/* ═══ 00-MOBILE-FOUNDATION ════════════════════════════════════════
 * Phase 1 of the Mobile UI/UX overhaul. Loaded BEFORE all surface
 * stylesheets so that surface-level rules can still override these
 * defaults, but pages that ship without the full CSS chain (login,
 * landing, register, onboarding, form, verify-email, marketplace,
 * agb, datenschutz, impressum, checkout, auth-callback) still get
 * a solid mobile baseline.
 *
 * Self-contained: does not depend on CSS variables defined in
 * 01-base.css, so it is safe to load on standalone pages.
 *
 * Goals
 *   1. No accidental horizontal overflow on any viewport.
 *   2. 44 px tap-target floor for *real* action buttons on phones.
 *   3. Safe-area helpers for notch / Dynamic Island / home indicator.
 *   4. 100dvh fallback to avoid Safari URL-bar layout jump.
 *   5. Responsive media defaults (img/video/iframe never overflow).
 *   6. Opt-in utilities for horizontal scroll wrappers.
 *
 * 2026-04-26 — Regression fix after fab4ca4: removed the broad
 * touch-action / tap-highlight rules and the form-control min-height
 * rules that interfered with click handling and pushed primary
 * buttons below the fold in dense forms / modals. Form-control
 * tap-target enforcement is left to 05-components.css, which already
 * handles it correctly.
 * ═══════════════════════════════════════════════════════════════ */

/* — 1. Box-sizing belt-and-suspenders (also in 01-base.css). ───── */
*,
*::before,
*::after { box-sizing: border-box; }

/* — 2. Page-level overflow safeguards for pages without 01-base. ─ */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html,
body {
  max-width: 100vw;
  overflow-x: clip;
}
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}
body {
  overscroll-behavior-x: none;
}

/* — 3. Responsive media defaults. ──────────────────────────────── */
img,
video,
iframe,
embed,
object {
  max-width: 100%;
}
img, video { height: auto; }
/* Note: <canvas> width/height attrs control the drawing buffer.
   We constrain its rendered max-width but leave height to the JS
   that owns the canvas (signature pads, charts, etc.). */
canvas { max-width: 100%; }

/* — 4. Long-text wrap utility (opt-in). ────────────────────────── */
.mob-wrap-anywhere {
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* — 5. Flex/grid child shrink utility (opt-in). ────────────────── */
.mob-min-0 { min-width: 0; min-height: 0; }

/* — 6. Safe-area helpers (notch / Dynamic Island / home bar). ──── */
.safe-top    { padding-top:    max(12px, env(safe-area-inset-top)); }
.safe-bottom { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.safe-left   { padding-left:   max(12px, env(safe-area-inset-left)); }
.safe-right  { padding-right:  max(12px, env(safe-area-inset-right)); }
.safe-x {
  padding-left:  env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
.safe-y {
  padding-top:    env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* — 7. 100dvh fallback for Safari URL-bar collapse. ────────────── */
.h-screen-safe     { height: 100vh; height: 100dvh; }
.min-h-screen-safe { min-height: 100vh; min-height: 100dvh; }
@supports (height: 100dvh) {
  .h-screen-safe     { height: 100dvh; }
  .min-h-screen-safe { min-height: 100dvh; }
}

/* — 8. Mobile tap-target floor for *real* action buttons. ──────── */
/* Scoped narrowly to anchor-buttons and design-system buttons that
   05-components.css does not already cover. Form controls are NOT
   forced here — 05-components.css already enforces 44 px on typed
   inputs at the same breakpoint, and forcing min-height globally
   on every <select>/<textarea>/<input> caused tall layouts that
   pushed primary buttons below the fold. */
@media (max-width: 640px) {
  .mb-btn,
  a.btn,
  a.mb-btn,
  a.btn-p,
  a.btn-full {
    min-height: 44px;
  }
}

/* — 9. Defensive flex-row wrap utility for badge/pill rows. ───── */
.mob-row-wrap { flex-wrap: wrap; }

/* — 10. Horizontal-scroll wrapper utility (opt-in for legacy). ── */
.mob-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.mob-scroll-x > table { min-width: max-content; }

/* End 00-mobile-foundation.css */