/* css/clock-view.css — Braun redesign app shell + clock view (v3.0).
   Replaces the prior stage/minimap clock-view module. Imported into `components`.
   Authoritative values: design_handoff_show_clock/rd-styles.css §"APP SHELL" + "CLOCK VIEW"
   + "DIRECTION" + "END-OF-SLOT ALERT". Device classes (.app--phone/tablet) → @media in responsive.css. */

/* ── App shell ──────────────────────────────────────────── */
.app {
  position: fixed; inset: 0; display: flex; flex-direction: column;
  background: var(--bg); color: var(--fg); overflow: hidden;
  --gap: 18px;
}
.app[data-state="warning"] { --live: var(--warning); }
.app[data-state="over"]    { --live: var(--error); }
/* idle keeps --live amber (design rd-styles.css has no idle override) — the ring simply
   shows its grey track with no arc when nothing is live. */

/* body: split (tablet/desktop) or single (phone, via responsive.css) */
.app__body { flex: 1; min-height: 0; display: flex; overflow: hidden; position: relative; }
.app__body--solo .pane--clock { border-right: none; }
.pane { min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.pane--clock { flex: 1.12; border-right: 1px solid var(--line); min-width: 0; }
.pane--rundown { flex: 1; min-width: 380px; }

/* reopen tab on the right edge when the rundown is collapsed */
.rd-reopen {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 6;
  /* NO `display` here: visibility is owned by rundown.css (.rd-reopen{display:none}
     + body.rd-collapsed .rd-reopen{display:flex}). Setting display:flex here —
     imported after rundown.css in the same @layer — re-showed the tab whenever the
     rundown was OPEN. The flex child props below only take effect once collapsed. */
  flex-direction: column; align-items: center; gap: 10px;
  background: var(--surface-2); border: 1px solid var(--line-2); border-right: none;
  border-radius: 10px 0 0 10px; padding: 16px 9px; color: var(--muted); transition: var(--transition); cursor: pointer;
}
.rd-reopen:hover { color: var(--amber); border-color: color-mix(in oklab, var(--amber) 40%, transparent); background: color-mix(in oklab, var(--amber) 8%, transparent); }
.rd-reopen__ar { font-size: 15px; line-height: 1; }
.rd-reopen__lbl { writing-mode: vertical-rl; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }

/* ── Clock view ─────────────────────────────────────────── */
.clock {
  flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 24px; text-align: center; overflow: hidden;
}
.clock__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--gap); width: 100%; }

/* Braun principle: digits stay neutral; colour only signals urgency. */
.clock__digits {
  font-family: var(--sans); font-weight: 600; line-height: .92; letter-spacing: -.01em; white-space: nowrap;
  color: var(--fg); font-variant-numeric: tabular-nums; margin: 0;
  font-size: clamp(64px, var(--clock-vw, 13vw), 240px);
  transition: font-size .35s ease;
}
.app[data-state="warning"] .clock__digits { color: var(--warning); }
.app[data-state="over"]    .clock__digits { color: var(--error); }
/* fixed per-glyph advance so the centered clock never shifts as digits change */
.clock__digits > span { display: inline-block; text-align: center; }
.clock__digits > span:not(.c) { width: .60em; }
.clock__digits > span.c { width: .30em; opacity: .55; font-weight: 400; }
.clock__label { font-family: var(--mono); font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin: 0; }
.clock__master { font-family: var(--mono); font-size: 15px; color: var(--faint); letter-spacing: .04em; margin: 0; }
.clock__eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--faint); display: none; }

/* dial wrapper: holds the (stage-only) ring SVG behind the readout */
.clock__dial { position: relative; display: flex; align-items: center; justify-content: center; transition: width .35s ease; }
.clock__readout { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.clock__ring { display: none; } /* shown in stage only */

/* next-up card (shared) */
.nextup { display: inline-flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 9px 9px 9px 18px; max-width: 100%; }
.nextup .k { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.nextup .t { font-family: var(--mono); font-size: 15px; color: var(--fg); }
.nextup .chip { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; background: color-mix(in oklab, var(--seg-c, #888) 16%, transparent); color: var(--seg-c, #888); border: 1px solid color-mix(in oklab, var(--seg-c, #888) 30%, transparent); }
.nextup .nm { font-size: 15px; font-weight: 600; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* on-deck progress (console: bar) */
.ondeck { width: min(560px, 100%); display: flex; flex-direction: column; gap: 9px; }
.ondeck__head { display: flex; justify-content: space-between; align-items: baseline; }
.ondeck__heading { font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); }
.ondeck__name { font-size: 15px; font-weight: 600; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }
.ondeck__bar { height: 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; position: relative; }
.ondeck__fill { position: absolute; inset: 0; border-radius: 999px; background: linear-gradient(90deg, color-mix(in oklab, var(--live) 70%, transparent), var(--live)); box-shadow: 0 0 16px -2px var(--live); transition: width .9s linear; }
.ondeck__meta { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 13px; color: var(--muted); }

/* stage direction: ring */
/* Self-theming track: a faint tint of the foreground so the ring is clearly
   visible on BOTH the dark dial and the light (white) dial. var(--line-2) was
   nearly invisible on white (#d2cfc4 on #fff). */
.ring__track { fill: none; stroke: color-mix(in oklab, var(--fg) 16%, transparent); stroke-width: 5; }
.ring__prog { fill: none; stroke: var(--live); stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset .9s linear; }

/* ── Direction: STAGE (calmer, ring) ────────────────────── */
.app--stage { --gap: 26px; }
.app--stage .clock__digits { font-weight: 500; font-size: clamp(40px, 11vmin, 104px); }
.app--stage .clock__dial { width: min(420px, 62vmin); aspect-ratio: 1; }
.app--stage .clock__ring { display: block; position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.app--stage .clock__eyebrow { display: block; }
.app--stage .clock__label { display: none; }
.app--stage .ondeck { display: none; }

/* ── Direction: CONSOLE (denser, bar) ───────────────────── */
.app--console { --gap: 14px; }
.app--console .clock__eyebrow { display: none; }
.app--console .clock__label { display: block; }
.app--console .ondeck { display: flex; }

/* ── Rundown collapsed → clock fills the pane (HUD » button) ──────────────
   Faithful to the design "fill" mode: with the rundown hidden the clock owns the
   whole body width, so the readout scales up — bounded so the status pill above and
   the next-up card below stay on screen. The split-pane sizes (above) are unchanged,
   which is why the non-collapsed console clamp stays at 240px (avoids split overflow). */
body.rd-collapsed .app--console .clock__digits { font-size: clamp(72px, 18vw, 320px); }
body.rd-collapsed .app--stage .clock__dial { width: min(520px, 72vmin); }
body.rd-collapsed .app--stage .clock__digits { font-size: clamp(44px, 13vmin, 124px); }

/* ── End-of-slot alert (data-state=over) ────────────────── */
.clock::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; border: 0 solid var(--error); border-radius: inherit; opacity: 0; }
.app[data-state="over"] .clock::after { border-width: 4px; opacity: .55; }
@media (prefers-reduced-motion: no-preference) {
  .app[data-state="over"] .clock::after { animation: alertpulse 1s ease-in-out infinite; }
  .app[data-state="over"] .clock__digits { animation: digitpulse 1s ease-in-out infinite; }
}
@keyframes alertpulse { 0%, 100% { opacity: .18; } 50% { opacity: .72; } }
@keyframes digitpulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }