/* SLE-T7-mobile — cross-cutting mobile viewport patterns.
 *
 * Loaded AFTER every component sheet (tokens / base / buttons / forms /
 * sidebar / topbar / modal / cmdk / bottom-sheet / etc.) so its
 * @media (max-width: 639px) overrides win the cascade. Component-local
 * mobile rules still live in their own sheets — this file is for
 * patterns that cross multiple components or apply suite-wide.
 *
 * The canonical phone breakpoint is 639px (matches Camp v2 Style Guide
 * §19 — phone <640, tablet 640-959, desktop ≥960). All component
 * sheets were aligned to the same breakpoint by the 2026-06-02 sweep.
 *
 * Depends on tokens.css for --wh / --bk / spacing tokens.
 */

/* ── Mobile-only viewport rules ──────────────────────────────────────
 * Fires below 640px (phone / phone-lg). Tablet+ continues at 640px. */
@media (max-width: 639px) {
  /* iPhone touch-target floor (Apple HIG ≥ 44×44pt) — universal safety
   * net for any interactive element. Component-specific rules in
   * buttons.css / modal.css already cover .btn / .modal-x / .modal-
   * fullscreen-close at this size; this catches plain anchors and
   * generic [role='button'] hosts that don't carry a component class. */
  a[role='button'],
  button:not([class*='m-bb-']):not(.sb-applauncher) {
    min-height: 44px;
  }

  /* Disable the iOS tap-highlight callout. Hover / active visuals are
   * carried by component-specific rules; the default blue rectangle
   * just adds noise. The variable lets apps reintroduce a tint with
   * --tap-highlight: rgba(...). */
  a,
  button,
  [role='button'],
  [tabindex]:not([tabindex='-1']) {
    -webkit-tap-highlight-color: var(--tap-highlight, transparent);
  }

  /* Prevent rubber-band scroll from triggering parent-page pull-to-refresh
   * on TRUE inner scroll containers. 2026-06-02: removed .m-scroll from
   * this list — on Android, two nested scroll containers (.main +
   * .m-scroll) with overscroll-behavior: contain on the inner trapped
   * touch scroll. The mobile shell now uses a single body-level scroll
   * container; .m-scroll is a plain block. .modal-fullscreen-body is
   * a genuinely fullscreen overlay that must trap its scroll so the
   * body underneath stays still. (The bottom-sheet primitive has its
   * own overscroll-behavior on .suite-sheet — see bottom-sheet.css.) */
  .modal-fullscreen-body {
    overscroll-behavior: contain;
  }

  /* Mobile-shell viewport sizing — 100dvh follows the dynamic mobile
   * URL-bar height so app shells don't leave a gap when the bar
   * collapses. 100vh kept as the fallback for browsers without dvh. */
  .app-shell,
  .modal-fullscreen {
    min-height: 100vh;
    min-height: 100dvh;
  }

  /* Cross-cutting visibility helpers — use `.desktop-only` to mark
   * chrome that should not render on phone shells (e.g. the ⌘K
   * trigger, dense table headers, sidebar collapse handle). */
  .desktop-only {
    display: none !important;
  }
}

/* ── Mobile scroll model (matos 2026-06-02 Android fix) ────────
 * Body scrolls naturally; .scroll is a plain block; .main resets
 * overflow on mobile. Bottom-bar is position:fixed and overlays
 * the bottom of the natural scroll with safe-area padding.
 *
 * Lifted from matos/css/matos-mobile.css (was .m-scroll); the
 * m- prefix is dropped on promotion. matos's local rules continue
 * working until a future sweep renames consumers.
 */
.scroll { padding: var(--sp-4) var(--sp-4) 96px; }
.scroll.flush { padding: 0 0 96px; }
[data-density="dense"] .scroll { padding: var(--sp-3) var(--sp-3) 96px; }

@media (max-width: 639px) {
  .main { overflow: visible; }   /* reset desktop's overflow-y:auto */

  /* Sticky-save-bar lift — avoid overlapping bottom-bar. */
  .save-bar,
  .actionbar.sticky {
    bottom: calc(96px + env(safe-area-inset-bottom));
  }

  /* iPhone touch-target floor (Apple HIG 2.5.5: 44×44pt). */
  .btn, .btn-y, .btn-g, .btn-b, .btn-r, .btn-gh, .btn-bk {
    min-height: 44px;
  }

  /* iOS Safari zoom-on-focus defence — inputs must be ≥16px. */
  .fm-field input[type=text],
  .fm-field input[type=email],
  .fm-field input[type=tel],
  .fm-field input[type=number],
  .fm-field input[type=search],
  .fm-field textarea {
    font-size: 16px;
  }
}