/* ==========================================================================
   ON THE CLOCK · v3 · the clock (hero media), the shift strip, the crew
   Extends ledger.css (D2 Brutal Ledger). Tokens only. Motion = hard cuts,
   driven by clock.js at 1 Hz and by the shift sequence; no CSS loops here.
   ========================================================================== */

/* ---------- hero media: the clock -------------------------------------- */
.clockfig { position: relative; }
.clockfig .fig-head b { font-weight: 600; }
.clockfig .stage { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.clockfig .chart-box { position: relative; height: auto; aspect-ratio: 1 / 1; width: 100%; flex: none; }
.clockfig .chart { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--color-ink-mute); overflow: visible; }
.clockfig .slot { display: none; }

/* dial parts (drawn by clock.js); SVG defaults are off-token, so every part states its fill */
.clock, .clock g, .clock line, .clock path, .clock circle { fill: none; }
.clock rect { fill: var(--color-ink); }
.clock .paper { stroke: var(--color-line-soft); stroke-width: 1; shape-rendering: crispEdges; }
.clock .disc { fill: var(--color-ground); stroke: var(--color-line); stroke-width: 1; }
.clock .tick { stroke: var(--color-ink-mute); stroke-width: 1; }
.clock .tick.h { stroke: var(--color-ink); stroke-width: 2; }
.clock .ring-trk { fill: none; stroke: var(--color-surface); }
.clock .ring { fill: none; stroke: var(--color-ink); }
.clock .ring.hot { stroke: var(--color-accent); }
.clock text { fill: var(--color-ink-mute); font: 400 var(--fs-m1) var(--font-mono); text-anchor: middle; dominant-baseline: central; }
.clock text.top { fill: var(--color-ink); font-weight: 600; }
.clock .hand { stroke: var(--color-ink); stroke-linecap: butt; }
.clock .hand.sec { stroke: var(--color-accent); stroke-width: 1.5; }
.clock .hand.hot { stroke: var(--color-ink); }
.clock .hub { fill: var(--color-ink); }
.clock .hub.hot { fill: var(--color-accent); }

/* the stamp: three hard steps in, 0 ms out */
.stamp {
  position: absolute; left: 50%; top: 50%; display: none; padding: var(--sp-1) var(--sp-3);
  border: 6px solid var(--color-accent); color: var(--color-accent); background: var(--color-ground);
  font: 900 var(--fs-4)/.9 var(--font-display); font-stretch: 110%; letter-spacing: 0; text-transform: uppercase; white-space: nowrap;
  transform: translate(-50%, -50%) rotate(-7deg) scale(var(--k, 1)); transform-origin: 50% 50%; pointer-events: none; z-index: 2;
}
.stamp.on { display: block; }

/* readout: the live clock in type */
.readout { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2) var(--sp-4); align-items: end; padding: var(--sp-4) 0; border-top: var(--rule); }
.readout .time { grid-column: 1 / -1; font: 900 var(--fs-5)/.9 var(--font-display); font-stretch: 62%; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--color-ink); min-height: 1em; }
.readout .time.hot { color: var(--color-accent); }
.readout .lbl { align-self: start; }
.readout .next { font: 600 var(--fs-0)/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--color-ink); text-align: right; white-space: nowrap; }
.readout .state { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--sp-2); min-height: 24px; font: 600 var(--fs-m1)/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--color-ink-mute); }
.readout .state i { width: 8px; height: 8px; background: currentColor; flex: none; }
.readout .state.hot { color: var(--color-ink); }
.readout .state.hot i { background: var(--color-accent); }

/* the shift strip: seven calls */
.clockfig .run { display: grid; grid-template-columns: minmax(0, 1fr); border-top: var(--rule); counter-reset: s; }
.clockfig .run li {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--sp-1) var(--sp-3); align-items: baseline; min-height: 44px;
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-3); border-bottom: var(--rule-soft); counter-increment: s;
}
.clockfig .run li::before { content: counter(s, decimal-leading-zero); font: 400 var(--fs-m1)/1.3 var(--font-mono); color: var(--color-ink-mute); }
.clockfig .run code { font: 600 var(--fs-m1)/1.3 var(--font-mono); color: var(--color-ink-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clockfig .run span { font: 400 var(--fs-m1)/1.3 var(--font-mono); color: var(--color-ink-mute); white-space: nowrap; text-align: right; }
.clockfig .run li.now { box-shadow: inset 4px 0 0 var(--color-accent); }
.clockfig .run li.now code, .clockfig .run li.done code, .clockfig .run li.now::before { color: var(--color-ink); }
.clockfig .run li.now span { color: var(--color-ink); }
.clockfig .run li.done span::before { content: "✓ "; color: var(--color-ink); }

/* desktop: the stage is a grid; the SVG is its full-width ground, the dial is drawn into the slot */
@media (min-width: 1024px) {
  .clockfig .stage { display: grid; grid-template-columns: minmax(0, 56fr) minmax(0, 44fr); grid-template-rows: minmax(var(--sp-4), 1fr) auto auto minmax(var(--sp-4), 1fr); column-gap: var(--sp-6); min-height: 560px; }
  .clockfig .chart-box { position: absolute; inset: 0; aspect-ratio: auto; height: auto; width: auto; }
  .clockfig .slot { display: block; grid-column: 1; grid-row: 2; justify-self: start; width: min(100%, clamp(320px, calc(100svh - 297px), 560px)); aspect-ratio: 1 / 1; pointer-events: none; }
  .readout { grid-column: 1; grid-row: 3; position: relative; z-index: 1; margin-top: var(--sp-4); border-top: var(--rule); width: min(100%, clamp(320px, calc(100svh - 297px), 560px)); }
  .clockfig .run { grid-column: 2; grid-row: 2 / 4; align-self: center; position: relative; z-index: 1; }
  .clockfig .run li { grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: auto auto; min-height: 56px; padding: var(--sp-2) 0 var(--sp-2) var(--sp-3); }
  .clockfig .run li::before { grid-row: 1 / 3; align-self: start; }
  .clockfig .run code { font-size: var(--fs-0); }
  .clockfig .run span { text-align: left; }
  .clockfig .run li:last-child { border-bottom: var(--rule); }
}
@media (min-width: 1024px) and (max-height: 820px) { .readout .time { font-size: var(--fs-4); } }

/* ---------- the crew ----------------------------------------------------- */
#crew .roster { border-top: var(--rule); border-right: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
#crew .who { grid-template-columns: 48px minmax(0, 1fr); gap: var(--sp-4); align-items: start; padding: var(--sp-5) 0; border-bottom: var(--rule-soft); min-height: 0; }
#crew .who b { font: 600 var(--fs-0)/1.2 var(--font-mono); }
#crew .who span { font: 400 var(--fs-0)/1.45 var(--font-display); color: var(--color-ink-soft); margin-top: var(--sp-2); }
#crew .av { width: 48px; height: 48px; }
#crew .av::after { height: 16px; margin-top: -16px; }
#crew .av::before { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--color-ink); }
@media (min-width: 900px) {
  #crew .roster { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #crew .who { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-5) var(--sp-5) var(--sp-6) 0; border-bottom: var(--rule); }
  #crew .who + .who { padding-left: var(--sp-5); border-left: var(--rule-soft); }
}

/* ---------- code --------------------------------------------------------- */
.codeblock { font-size: var(--fs-0); line-height: 1.5; padding: var(--sp-5) var(--sp-6); }
.codeblock .c { color: var(--color-ink-mute); }
.codeblock .k { font-weight: 600; }
@media (max-width: 1023px) { .codeblock { font-size: var(--fs-m1); padding: var(--sp-4); } }

/* ---------- timecard empty state ---------------------------------------- */
.receipts tr.empty td { height: 96px; white-space: normal; color: var(--color-ink-soft); font: 400 var(--fs-0)/1.4 var(--font-display); }

/* ---------- motion hygiene ---------------------------------------------- */
.clockfig *, .stamp, .readout *, .clock * { transition: none; }
@media (prefers-reduced-motion: reduce) { .stamp { display: none !important; } }

/* ---------- v3 fixes ---------------------------------------------------- */
.mark, .status { white-space: nowrap; }
@media (min-width: 1024px) { .readout, .clockfig .run { background: var(--color-ground); } .clockfig .run li { padding-right: var(--sp-3); } }
@media (max-width: 639px) {
  .actions { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
  .actions .btn { justify-content: center; }
  .actions .textlink { justify-content: center; }
  #clock-utc { display: none; }
}
#split .stack .s1 { background: var(--data-1); } #split .stack .s2 { background: var(--data-3); }