/* css/responsive.css — Braun redesign responsive system (v3.0).
   Imported into the `responsive` layer (wins over components by @layer order).
   The handoff prototype hard-codes device classes (.app--phone/tablet/desktop); the real app
   drives them from @media breakpoints per the audit's "components reflow, they don't disappear".

   ≥768px  → split console: clock pane + rundown pane (default markup).
   ≤767px  → phone: single pane chosen by body[data-tab], bottom .tabbar, compact HUD. */

/* ── tab bar (phone only) ──────────────────────────────────── */
.tabbar { display: none; }
.tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--faint); font-size: 10.5px; font-weight: 600; letter-spacing: .04em; background: none; border: none; cursor: pointer; font-family: var(--sans); }
.tabbar button .ic { font-size: 18px; line-height: 1; }
.tabbar button.on { color: var(--amber-ink); } /* AUD-F8: 1.74:1 in light with raw amber */
.tabbar button.on .ic { filter: drop-shadow(0 0 6px color-mix(in oklab, var(--amber) 60%, transparent)); }

/* ── Safe-area sides (notch / home-indicator in landscape) ───
   .app is position:fixed inset:0, so its background still fills the screen while
   this padding insets the content off the notch/home-indicator sides. Bottom is
   handled per-element (.tabbar/.hud have their own inset-bottom); top is on .tb.
   env() is 0 without a safe area, so this is inert on desktop/non-notched. */
.app {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* ── Small tablet / large-phone landscape (768–900px) ───────
   Below ~900px the split console's 380px rundown min-width crowds the clock pane
   (the digit clamp floor) and can overflow. Trim the rundown minimum in this band
   only so the clock keeps room; ≥900px is unchanged. */
@media (min-width: 768px) and (max-width: 900px) {
  .pane--rundown { min-width: 300px; }
}

/* ════════════ PHONE (≤767px) ════════════ */
@media (max-width: 767px) {
  /* top bar: shrink brand, hand the row to the show name; OS status bar shows wall time.
     padding-top carries the notch safe-area in the installed PWA (black-translucent status
     bar draws content under the notch); env() is 0 on non-notched devices, so no visual change
     there. It's a separate declaration because the `padding` shorthand above resets top to 0. */
  .tb { gap: 10px; padding: 0 14px; padding-top: env(safe-area-inset-top); height: auto; min-height: 56px; }
  .tb__brand .lbl { display: none; }
  .tb__sep { display: none; }
  .tb__show { flex: 1; min-width: 0; }
  .tb__spacer { display: none; }
  .tb__clock { display: none; }
  /* Operator/Viewer preview is a desktop affordance; on a 56px phone bar it squeezes the
     show name to a sliver (the blade comment always claimed it was hidden here — it wasn't). */
  .tb__opviewer { display: none; }
  .tb__gear { display: grid; }
  .wx { display: none; } /* weather chip moves into the clock view on phone */

  /* whole-show bar hidden on phone (space) — projected wrap still in the offset banner */
  .showstat { display: none; }

  /* single pane: show one per body[data-tab]; bottom tab bar reserves --tabbar-h.
     AUD-F7: the bar's height must GROW by the home-indicator inset, not absorb it —
     height:64px + inner padding-bottom under border-box squeezed the three tab
     buttons to ~30px on exactly the devices the safe-area code targets. */
  :root { --tabbar-h: calc(64px + env(safe-area-inset-bottom)); }
  .app__body { display: block; position: relative; }
  .pane { position: absolute; inset: 0 0 var(--tabbar-h); width: 100%; border: none; }
  .pane--clock { display: none; }
  .pane--rundown { display: none; }
  body[data-tab="clock"] .pane--clock { display: flex; }
  body[data-tab="rundown"] .pane--rundown { display: flex; }
  /* rundown is reachable via the tab bar — never the desktop collapse/reopen on phone.
     AUD-F23: the header's collapse » too — tapping it on the phone tab planted a stale
     body.rd-collapsed that hid the rundown after rotating to landscape (split console). */
  .rd-reopen, .rd [data-collapse] { display: none !important; }
  .pane--rundown { min-width: 0; }

  /* AUD-F6: iOS Safari auto-zooms the page when a focused control's font-size is
     under 16px — and the fixed overflow:hidden app shell then strands the HUD/tabbar
     off-viewport, stuck zoomed after blur. 16px on all text-entry controls at phone
     widths kills the zoom trigger; compact desktop sizes are untouched. */
  .field input, .field select, .field textarea,
  .sc-input, .sc-select, .tt-switch__in, .cue__input,
  .show-title-input, .settings-field__input { font-size: 16px; }

  /* bottom tab bar (AUD-F7: height grows with the safe-area inset — see --tabbar-h) */
  .tabbar { display: flex; position: absolute; left: 0; right: 0; bottom: 0; height: var(--tabbar-h); border-top: 1px solid var(--line); background: var(--surface); z-index: 4; padding-bottom: env(safe-area-inset-bottom); }

  /* HUD: shown only on the Clock tab; compact (Next + Cue + stepper) */
  .hud { position: absolute; left: 0; right: 0; bottom: var(--tabbar-h); display: none; gap: 8px; padding: 10px 12px; padding-bottom: 10px; }
  body[data-tab="clock"] .hud { display: flex; }
  .hud .seg, .hud__util, #reset-btn { display: none; }
  .hud .btn--pri { flex: 1; min-width: 0; height: 50px; }
  .hud__cuebtn { height: 50px; }
  .hud__cuelbl { display: none; } /* phone: cue button is icon-only ✎ (design rd-app.jsx:49) */
  .hud .stepper { height: 50px; flex-shrink: 0; }
  .hud .stepper button { width: 52px; font-size: 23px; }
  .hud .stepper__mid { min-width: 92px; font-size: 13px; }

  /* clock view: a touch tighter */
  .app--console .clock__digits { font-size: clamp(56px, 18vw, 132px); }
  .app--stage .clock__digits { font-size: clamp(40px, 14vmin, 96px); }
  .app--stage .clock__dial { width: min(300px, 72vw); }

  /* sheets full-bleed-ish on phone */
  .sheet { padding: 0; align-items: flex-end; }
  .sheet__card { width: 100%; max-height: 92%; border-radius: 16px 16px 0 0; }
}

/* ════════════ coarse-pointer touch targets (AUD-F19/F20) ════════════
   Applies at ANY width with a touch pointer — an iPad running the full split
   console is still a touch device. Two techniques, per control:
   - ::after inset bump (house pattern, topbar.css .tb__gear): grows the HIT AREA
     without moving layout — used where a real size change would reflow chrome.
   - min-height: used where the container tolerates growth (stacked editor rows).
   Pre-F19 the HUD utility icons were 38×38, the offset stepper 40px tall (the
   "running late" control, hit in the dark at FOH), the rundown-header Share 34px
   (also the primary Share action on the phone Running-order tab), and the inline
   editor's Done/Delete 34px with "More options" ≈23px. */
@media (pointer: coarse) {
  .btn { position: relative; }
  .btn--sm::after, .btn--icon::after { content: ''; position: absolute; inset: -5px; }
  .stepper button { position: relative; }
  .stepper button::after { content: ''; position: absolute; inset: -4px 0; }
  .hud .btn--icon { height: 44px; width: 44px; }
  .rd .field .btn--sm, .rd .ed__actions .btn--sm { min-height: 44px; }
  .rd .disc { min-height: 44px; display: inline-flex; align-items: center; }
  .dup-row-btn { min-height: 44px; }
  /* belt-and-braces vs double-tap-zoom on rapid ± taps mid-show */
  .stepper button, .tabbar button, .hud .btn { touch-action: manipulation; }
}

/* ════════════ reduced motion ════════════ */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ════════════ print ════════════ */
@media print {
  .app, .hud, .tabbar, .sheet { display: none !important; }
  .print-timetable { display: block !important; }
}