/* ==========================================================================
   SUITE MOBILE — the shared mobile chrome fragment (Plan 07, Phase 0)
   Version 1.0.0 (2026-10-20). Served live by the hub at
   `http://127.0.0.1:4040/suite-mobile.css`, next to `suite-ui.css` and
   `suite-theme.css`. One `<link>` per document that opts in:

     <link rel="stylesheet" href="http://127.0.0.1:4040/suite-mobile.css" />

   WHAT THIS FILE IS
   The suite's ONE mobile-chrome sheet: safe-area geometry, the bottom-sheet
   primitive, minimum touch targets, momentum scrolling, thin themed scrollbars
   and deliberate `touch-action` defaults. Every value lives here; a structural
   change is one edit in this file and every application inherits it on reload.
   It answers to the PANE viewport, not the device — the hub's pane contract
   (mobile-responsive-conventions §4) guarantees that below `md` an app iframe
   gets the full viewport, which is what makes these media queries honest.

   WHAT THIS FILE IS NOT
   CSS-only, opt-in classes and tokens. It ships NO markup, NO logic, NO
   behavior: when a window collapses into a sheet, which control opens it and
   the back gesture itself stay per-application (hub shell mobile mode, Phase 1).
   Breakpoints follow the conventions doc §1: mobile decisions trigger below
   `md` = 768px; plain-CSS apps write `@media (max-width: 767.98px)` against
   the same number.

   THE CLASS CONTRACT (v1)
     --safe-top / --safe-right / --safe-bottom / --safe-left   env(safe-area-inset-*)
     .suite-sheet                    full-width bottom sheet (safe-area padded, momentum scroll)
       .suite-sheet-handle           the grab bar on top of a sheet (44pt hit target built in)
     .suite-tap                      44x44 minimum hit target via padding + ::after, visuals untouched
     .suite-scrollbar-thin           themed thin scrollbar; wheel/touch scroll stays functional
     .suite-scrollbar-hidden         scrollbar visually hidden, scroll functionality kept
     touch-action: sheet default vs canvas default (see the two rules below)

   All colors come from the theme tokens (`var(--…)`) — never a raw hex.
   ========================================================================== */

:root {
  /* Safe-area insets, resolved once here so full-screen panes and sheets pad
     against notches and home bars without each app re-deriving env(). */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

/* ---- The bottom sheet ------------------------------------------------------
   Below `md`, floating windows collapse into full-width sheets that dock to
   the bottom edge (conventions §5: settings windows open as full-screen
   sheets; the panel shell docks panels as bottom sheets). Momentum scrolling
   is preserved by never overriding the engine's own scroll behavior — the
   sheet only sizes and pads itself. */

.suite-sheet {
  position: fixed;
  left: 0px;
  right: 0px;
  bottom: 0px;
  max-height: min(50vh, calc(100% - var(--safe-top) - 44px));
  padding: 16px 20px;
  padding-left: calc(20px + var(--safe-left));
  padding-right: calc(20px + var(--safe-right));
  padding-bottom: calc(16px + var(--safe-bottom));
  background: var(--popover);
  color: var(--popover-foreground);
  border-top: 1px solid var(--border-subtle);
  border-radius: var(--radius) var(--radius) 0px 0px;
  box-shadow: var(--shadow-popover);
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overscroll-behavior-y: contain;
}

.suite-sheet-handle {
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translate(-50%, 8px);
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--muted);
}

/* The grab bar is small by design; the hit target is not. ::after keeps the
   visual sheet untouched while the touch pad reaches the 44pt minimum
   (conventions §3 — pad or pseudo-element, never visual-only size changes). */
.suite-sheet-handle::after {
  content: "";
  position: absolute;
  inset: -20px -16px;
}

/* ---- Touch targets --------------------------------------------------------
   .suite-tap guarantees a 44x44 hit area around any control without moving
   or resizing its visuals: the pseudo-element extends the clickable box to the
   Apple HIG minimum (conventions §3). */

.suite-tap {
  position: relative;
}

.suite-tap::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: auto;
}

/* ---- Scrollbars ------------------------------------------------------------
   A thin, theme-colored scrollbar that stays functional (wheel scroll kept —
   the conventions forbid disabling it). The hidden variant removes the ink but
   keeps the gesture. */

.suite-scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: var(--muted) transparent;
}

.suite-scrollbar-thin::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.suite-scrollbar-thin::-webkit-scrollbar-thumb {
  background: var(--muted);
  border-radius: 3px;
}

.suite-scrollbar-thin::-webkit-scrollbar-track {
  background: transparent;
}

.suite-scrollbar-hidden {
  scrollbar-width: none;
}

.suite-scrollbar-hidden::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}

/* ---- touch-action defaults --------------------------------------------------
   Sheets are scrolled, not dragged: `pan-y` lets the engine own vertical panning
   and blocks the accidental pinch/rotate that reads as a layout break. Canvas
   apps override per their own rule (conventions §3: deliberate `touch-action`
   per canvas app — no double-tap-zoom traps inside editors). */

.suite-sheet {
  touch-action: pan-y;
}

.suite-tap {
  touch-action: manipulation; /* kills the 300ms tap delay without trapping zoom */
}