/* css/mobile-tokens.css
 *
 * Single source of truth for mobile UX tokens (NN/g + Apple HIG + WCAG).
 * Phase 0 of the responsive plan (2026-05-02). Imported BEFORE per-page
 * CSS so per-page rules can reference these variables and override
 * safely. Hard floors (input font-size, tap target size) are enforced
 * via mobile-only utility classes — wrap them in @media so desktop
 * rendering is untouched.
 *
 * Companion: /js/ui/bottom-sheet.js
 *
 * LABEL: PRODUCTION-READY shared primitive (pure CSS, no behavior).
 */

:root {
  /* Tap target floor — Apple HIG / WCAG 2.5.5 minimum. */
  --tap-target-min: 44px;

  /* Input font-size floor — prevents iOS Safari auto-zoom on focus. */
  --input-min-fs: 16px;

  /* Thumb zone — primary actions live in the bottom 1/3 on phones. */
  --thumb-zone-bottom: 33vh;

  /* Bottom-sheet defaults (the JS primitive can override max-h at runtime
     when the virtual keyboard appears — visualViewport-aware). */
  --sheet-max-h: 75vh;
  --sheet-radius: 16px;
  --sheet-handle-w: 40px;
  --sheet-handle-h: 4px;
  --sheet-z: 60;
  --sheet-backdrop-z: 55;
  --sheet-backdrop-color: rgba(0,0,0,0.45);
}

/* ── Bottom-sheet backdrop ──
   Inserted by BottomSheet.attach() before the panel element. Tap to
   dismiss (wired in JS). Hidden by default; .show makes it visible.
   The JS only adds .show on mobile, so desktop never sees it.       */
.bottom-sheet-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--sheet-backdrop-color);
  z-index: var(--sheet-backdrop-z);
  opacity: 0;
  transition: opacity 0.2s ease-out;
}
.bottom-sheet-backdrop.show {
  display: block;
  opacity: 1;
}

/* ── Drag handle ──
   Visual affordance at the top of the sheet so users know it can be
   swiped down to dismiss (NN/g recognition over recall). Hidden on
   desktop where the panel is a side rail. Inserted by JS into the
   sheet's first child (typically .props-inner or similar).          */
.bottom-sheet-handle {
  display: none;
  width: var(--sheet-handle-w);
  height: var(--sheet-handle-h);
  background: rgba(0,0,0,0.2);
  border-radius: 999px;
  margin: 0.5rem auto 0.75rem;
  cursor: grab;
  touch-action: none;
  flex-shrink: 0;
}
.bottom-sheet-handle:active { cursor: grabbing }

/* ── Mobile-only enforcements ── */
@media (max-width: 1024px) {
  /* Show the swipe handle on mobile (where the sheet pattern is active). */
  .bottom-sheet-handle { display: block }

  /* Universal input floor (Phase 1a, 2026-05-02). Any page that imports
     mobile-tokens.css gets automatic 16px minimum font-size on text
     inputs to block iOS Safari's "page zooms when you tap a field"
     behavior. There is NO legitimate design reason to ship a sub-16px
     input on mobile — every case is either an oversight or a bug. The
     !important defends against per-page CSS that sets font-size in
     pixel units smaller than 16. Pages that don't import this file are
     unaffected, so adoption is opt-in per page.

     Excludes type=range and type=color (no virtual keyboard, sizing is
     about thumb track / swatch not text), but includes everything else
     because even type=number / type=date open a numeric or date picker
     keyboard at <16px is still a zoom trigger on iOS.                  */
  input:not([type="range"]):not([type="color"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
  textarea,
  select {
    font-size: var(--input-min-fs) !important;
  }

  /* Hard floor: tap targets ≥ 44×44 (Apple HIG / WCAG 2.5.5).
     Apply with `class="bs-tap-target"` to interactive elements that
     would otherwise be smaller. Won't shrink elements that are already
     larger — only enforces a minimum. Kept as OPT-IN class (not
     universal on <button>) because some legitimate UIs use compact
     button rows where 44px each would wrap or collide; we don't want
     to break layout silently.                                        */
  .bs-tap-target {
    min-width: var(--tap-target-min);
    min-height: var(--tap-target-min);
  }

  /* Legacy class — kept for backwards compatibility and for non-<input>
     elements (e.g., contenteditable divs). The universal rule above
     covers all standard form fields automatically.                    */
  .bs-no-zoom {
    font-size: var(--input-min-fs) !important;
  }
}

/* Desktop guard: even if a panel attaches to BottomSheet on a desktop
   page, we don't want the backdrop visually firing — sheets are a
   mobile-only pattern. JS already gates this, but belt-and-braces. */
@media (min-width: 1025px) {
  .bottom-sheet-backdrop.show { display: none }
}