/* ============================================================
   mobile-viewport.css — Phone Viewport Hardening (Shared)
   ─────────────────────────────────────────────────
   PURPOSE : Make the site behave like an app surface on a phone and
             inside the Flutter WebView shell — notch/home-indicator
             insets, no rubber-band scroll, no 300ms tap delay, no
             accidental text selection while dragging on a simulator.
   WHY ITS  : These rules are viewport/input-behaviour concerns, not
   OWN FILE  visual design. They apply to every page and every module,
             so they cannot live in a module stylesheet; and they must
             NOT live in design-tokens.css, which is values only and is
             consumed by the Dart token generator (tools/codegen).
   USAGE   : Loaded from components/head.html right after
             design-tokens.css, before any module stylesheet, so a
             module can still override a specific dock's padding.
   DO NOT  : Put colours, fonts, spacing scales or component styling
             here. Do not add `user-select: none` to text containers —
             it breaks copying the teaching copy, which is the point of
             the site. Surfaces only (canvas/svg stages).
   REF     : docs/mobile-app-architecture.md §3.5
   ============================================================ */

/* ── Safe-area inset tokens ───────────────────────────────────
   Named here rather than in design-tokens.css because env() is a
   runtime viewport value, not a design decision. They fall back to
   0px on every browser that has no notch, so they are safe to use
   unconditionally below. */
:root {
  --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);
}

/* ── Scroll containment ───────────────────────────────────────
   Kills the iOS/Android rubber-band overscroll that makes an
   embedded page feel like a web page instead of an app, and stops a
   scroll inside a dock from chaining up into the document. */
html,
body {
  overscroll-behavior: none;
}

/* ── Tap behaviour ────────────────────────────────────────────
   `manipulation` drops the 300ms click delay and double-tap zoom
   while keeping pan and pinch-zoom on the page itself. Applied to
   interactive chrome only — not to the simulator stages, which run
   their own pointer handling and need the browser to stay out of
   the way entirely (see the stage rule further down). */
button,
a,
[role="button"],
input,
select,
label,
summary {
  touch-action: manipulation;
}

/* Remove the grey flash Android/iOS paint over a tapped control. */
a,
button,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
}

/* ── Drawing surfaces ─────────────────────────────────────────
   Dragging on an eye stage, a dock slider or a 3D viewport must not
   start a text selection or a long-press callout. Scoped to the
   surfaces themselves so every teaching paragraph on the page stays
   selectable and copyable. */
canvas,
svg.stage,
.eye-stage,
.tool-dock-container,
.rb-dock,
.cq-dock-tray {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Stages own their gestures completely — no browser pan or zoom. */
canvas,
.eye-stage {
  touch-action: none;
}

/* ── Safe-area padding on pinned chrome ───────────────────────
   Every one of these is position:fixed or sticky against an edge, so
   on a notched phone it would otherwise sit under the status bar or
   the home indicator. Padding is added to whatever the module already
   sets, so a module's own spacing is preserved. */
.shell-header {
  padding-top: var(--safe-top);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}

.tool-dock-container,
.rb-dock,
.cq-dock-tray {
  padding-bottom: calc(var(--safe-bottom));
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}

/* ── Reduced transparency ─────────────────────────────────────
   Mirrors the Flutter side's `solid` glass tier (§5.3): when the OS
   asks for reduced transparency, translucent chrome becomes an opaque
   surface with a real border instead of a blur. Keeps the two
   platforms visually in step from the same decision. */
@media (prefers-reduced-transparency: reduce) {
  .shell-header,
  .tool-dock-container,
  .rb-dock,
  .cq-dock-tray {
    background: var(--surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--border);
  }
}