/* 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 and
   * .matos-bs-list are genuinely fullscreen overlays that must trap
   * their scroll so the body underneath stays still. */
  .modal-fullscreen-body,
  .matos-bs-list {
    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;
  }
}