/* web/studio-console-cut/cut.css — VARY ZONE (Delgado authors this).
 *
 * Built to STUDIO_CONSOLE_CUT_SPEC_v0_1 §3, which inherits the whole of
 * STUDIO_CONSOLE_DESIGN_FLOOR_SPEC_v0_2 §3 as its floor. The floor is carried
 * deliberately from the banked surface rung so the Console reads as ONE
 * instrument across the board and the cut, not two products:
 *
 *   §3.1 TYPE      major third, ratio 1.250, base 16px. Six named steps; every
 *                  font-size here is one of them. Two roles only — a UI sans for
 *                  chrome, a monospace for every machine value (crowns, bank
 *                  shas, ids, timecode) so a sealed value never reads as prose.
 *   §3.2 SPACING   one 4px base unit. Every padding/margin/gap/radius is a --sp-*
 *                  multiple of it. No magic numbers.
 *   §3.3 COLOR     neutral instrument ground, ONE accent (the seal), semantic
 *                  tones. Body text targets AAA 7:1. Seal and track state always
 *                  carry a glyph AND a word, so nothing depends on hue.
 *   §3.8 SEAL      one form (notched ring + struck core) at two scales only.
 *
 * CUT-SPECIFIC (spec §3.1-3.7):
 *   The ruler and every track share ONE positioning geometry — the same gutter
 *   column and the same lane box — so a vertical line dropped at any moment
 *   crosses the ruler tick and each track's shot at that instant. That alignment
 *   is structural (one grid definition, reused), not eyeballed.
 *
 *   Mobile-first: shots stack as full editorial cards, time order and track order
 *   preserved, provenance fully readable. At >=48em the lanes become a true
 *   proportional timeline. The spec explicitly permits this reflow.
 */

:root {
  color-scheme: light dark;

  /* §3.1 type scale · major third 1.250 · base 16px */
  --f-xs: 0.64rem;      /* step -2 · 10.24px */
  --f-sm: 0.8rem;       /* step -1 · 12.80px */
  --f-md: 1rem;         /* step  0 · 16.00px */
  --f-lg: 1.25rem;      /* step +1 · 20.00px */
  --f-xl: 1.5625rem;    /* step +2 · 25.00px */
  --f-2xl: 1.953125rem; /* step +3 · 31.25px */

  --lh-tight: 1.25;
  --lh-body: 1.55;
  --track-caps: 0.12em;

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* §3.2 spacing · 4px base */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;

  --gutter: 148px;
  --lane-h: 176px;

  /* §3.3 palette · dark instrument ground */
  --ground: #0b0f14;
  --panel: #121820;
  --well: #0e141b;
  --edge: #26303b;
  --edge-hi: #3a4855;
  --rule: #1e2731;

  --ink: #e9eef4;     /* ~14.9:1 on --panel */
  --ink-2: #b9c6d2;   /* ~9.9:1  on --panel */
  --ink-3: #a4b3c2;   /* ~8.0:1  on --panel */

  --accent: #6fd8c4;

  --tone-sealed: #7fe0a0;
  --tone-waiting: #c3b1ff;
  --tone-working: #ffd479;
  --tone-broken: #ffa294;
  --tone-unknown: #a4b3c2;

  --kind-picture: #8ec9ff;
  --kind-dialogue: #ffc48e;
  --kind-music: #d5b3ff;
  --kind-effects: #9fe6d2;
  --kind-overlay: #ffb4d6;
  --kind-other: #b9c6d2;

  --focus-ring: #ffd479;
}

@media (prefers-color-scheme: light) {
  :root {
    --ground: #e9edf2;
    --panel: #ffffff;
    --well: #f4f7fa;
    --edge: #cfd8e1;
    --edge-hi: #aebbc8;
    --rule: #e3e9ef;

    --ink: #0f1519;
    --ink-2: #3b4753;
    --ink-3: #47535f;

    --accent: #075a4c;

    --tone-sealed: #0f6034;
    --tone-waiting: #453596;
    --tone-working: #7a4b00;
    --tone-broken: #8c2f22;
    --tone-unknown: #47535f;

    --kind-picture: #14507e;
    --kind-dialogue: #7a4300;
    --kind-music: #4b2a8a;
    --kind-effects: #0b5c4b;
    --kind-overlay: #8a2560;
    --kind-other: #3b4753;

    --focus-ring: #8a5a00;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: var(--sp-4);
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--f-md);
  line-height: var(--lh-body);
  overflow-x: hidden;
}
@media (min-width: 48em) { body { padding: var(--sp-8); } }

/* visually hidden, still announced */
.cx-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.cx-skip {
  position: absolute;
  left: -9999px; top: 0;
  z-index: 10;
  padding: var(--sp-3) var(--sp-4);
  background: var(--panel);
  color: var(--ink);
  border: 2px solid var(--accent);
  border-radius: var(--r-2);
  text-decoration: none;
}
.cx-skip:focus { left: var(--sp-4); top: var(--sp-4); }

.cx-boot, .cx-fail-h, .cx-fail-d { max-width: 60ch; margin: var(--sp-10) auto; }
.cx-boot { color: var(--ink-2); }
.cx-boot-hint { display: block; margin-top: var(--sp-2); font-size: var(--f-sm); color: var(--ink-3); }
.cx-fail-h { font-size: var(--f-lg); line-height: var(--lh-tight); }
.cx-fail-d { color: var(--ink-2); overflow-wrap: anywhere; }

.cx { max-width: 78rem; margin: 0 auto; display: grid; gap: var(--sp-4); }

.cx-h {
  margin: 0;
  font-size: var(--f-sm);
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--ink-3);
}
.cx-k {
  font-size: var(--f-sm);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--ink-3);
}
.cx-sub { font-size: var(--f-sm); color: var(--ink-3); }
.cx-mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* §3.8 the seal motif — one form, two scales, provenance moments only */
.cx-seal {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
}
.cx-seal-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    repeating-conic-gradient(var(--edge-hi) 0deg 7deg, transparent 7deg 14deg),
    radial-gradient(circle at 50% 50%, var(--well) 58%, var(--edge) 59%);
  border: 1px solid var(--edge-hi);
}
.cx-seal-core { position: relative; border-radius: 50%; background: var(--accent); }
.cx-seal--lg { width: var(--sp-12); height: var(--sp-12); }
.cx-seal--lg .cx-seal-core { width: var(--sp-4); height: var(--sp-4); }

/* masthead */
.cx-head {
  padding: var(--sp-6);
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--r-3);
}
.cx-head-mark { display: flex; align-items: center; gap: var(--sp-4); }
.cx-head-words { min-width: 0; }
.cx-title { margin: 0; font-size: var(--f-2xl); line-height: var(--lh-tight); letter-spacing: -0.01em; }
.cx-tagline { margin: var(--sp-1) 0 0; font-size: var(--f-sm); color: var(--ink-2); }

.cx-facts {
  margin: var(--sp-6) 0 0;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.cx-fact { min-width: 0; }
.cx-fact dt {
  font-size: var(--f-sm);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--ink-3);
}
.cx-fact dd { margin: var(--sp-1) 0 0; font-size: var(--f-sm); color: var(--ink); min-width: 0; }

/* §3.5 the cut's ONE-COPY-FIELD */
.cx-seal-panel {
  padding: var(--sp-6);
  background: var(--panel);
  border: 1px solid var(--edge);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-3);
}
.cx-seal-panel--unsealed { border-left-color: var(--tone-working); }
.cx-seal-note { margin: var(--sp-2) 0 var(--sp-4); font-size: var(--f-sm); color: var(--ink-2); }

.cx-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-4);
  background: var(--well);
  border: 1px solid var(--edge);
  border-radius: var(--r-2);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.cx-copy:hover:not([disabled]) { border-color: var(--accent); }
.cx-copy:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.cx-copy[disabled] { cursor: not-allowed; opacity: 1; border-style: dashed; }
.cx-copy-crown { font-size: var(--f-sm); color: var(--ink); min-width: 0; }
.cx-copy-cue {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid currentColor;
  border-radius: var(--r-3);
  color: var(--accent);
  font-size: var(--f-sm);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  white-space: nowrap;
}
.cx-copy[disabled] .cx-copy-cue { color: var(--ink-3); }
.cx-copy[data-copied="yes"] { border-color: var(--tone-sealed); }
.cx-copy[data-copied="yes"] .cx-copy-cue { color: var(--tone-sealed); }
.cx-copy[data-copied="no"] .cx-copy-cue { color: var(--tone-working); }

/* ── the timeline ─────────────────────────────────────────────────────────── */
.cx-timeline {
  padding: var(--sp-6);
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--r-3);
  display: grid;
  gap: var(--sp-4);
}

/* §3.1 ruler + §3.2 tracks share ONE geometry — this is the alignment guarantee */
.cx-ruler-row, .cx-track-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-2);
}
@media (min-width: 48em) {
  .cx-ruler-row, .cx-track-row {
    grid-template-columns: var(--gutter) minmax(0, 1fr);
    gap: var(--sp-4);
    align-items: start;
  }
}

.cx-ruler-gutter { display: flex; align-items: flex-end; }

/* Below the timeline breakpoint the cards stack and there is no shared spatial
   axis, so a ruler would imply an alignment that does not exist. It is hidden,
   and every card states its own timecode range instead — time stays readable,
   nothing is implied that is not true. */
@media (max-width: 47.99em) {
  .cx-ruler-row { display: none; }
}
.cx-lane { position: relative; min-width: 0; }

.cx-lane--ruler { border-bottom: 1px solid var(--edge-hi); }
.cx-ticks { list-style: none; margin: 0; padding: 0; position: relative; height: var(--sp-10); }
.cx-tick { position: absolute; bottom: 0; transform: translateX(-50%); text-align: center; }
.cx-tick:first-child { transform: none; text-align: left; }
.cx-tick-mark {
  display: block;
  width: 1px;
  height: var(--sp-2);
  margin: 0 auto;
  background: var(--edge-hi);
}
.cx-tick:first-child .cx-tick-mark { margin: 0; }
.cx-tick-label { display: block; font-size: var(--f-xs); color: var(--ink-3); white-space: nowrap; }

/* tracks */
.cx-track {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
}
.cx-track:first-of-type { border-top: 0; padding-top: 0; }
.cx-gutter { min-width: 0; }
.cx-track-name {
  margin: 0;
  font-size: var(--f-md);
  line-height: var(--lh-tight);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
.cx-kind {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--f-sm);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}
.cx-kind--picture { color: var(--kind-picture); }
.cx-kind--dialogue { color: var(--kind-dialogue); }
.cx-kind--music { color: var(--kind-music); }
.cx-kind--effects { color: var(--kind-effects); }
.cx-kind--overlay { color: var(--kind-overlay); }
.cx-kind--other { color: var(--kind-other); }
.cx-track-id {
  font-size: var(--f-sm);
  color: var(--ink-2);
  border: 1px solid var(--edge-hi);
  border-radius: var(--r-3);
  padding: 0 var(--sp-2);
}
.cx-track-meta { margin: var(--sp-1) 0 0; font-size: var(--f-sm); color: var(--ink-3); }

/* §3.3 shots — stacked cards on narrow, proportional blocks on wide */
.cx-shots { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }

.cx-shot { min-width: 0; }
.cx-shot-body {
  height: 100%;
  padding: var(--sp-3);
  background: var(--well);
  border: 1px solid var(--edge);
  border-left: 3px solid var(--tone-sealed);
  border-radius: var(--r-2);
  overflow: hidden;
}
.cx-shot-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-2);
}
.cx-shot-id { font-size: var(--f-sm); font-weight: 600; }
.cx-shot-span { font-size: var(--f-xs); color: var(--ink-3); white-space: nowrap; }
.cx-shot-label {
  margin: var(--sp-2) 0;
  font-size: var(--f-sm);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* §3.4 the seal, legible on the shot itself — glyph + word, never colour alone */
.cx-seal-state {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 0 var(--sp-2);
  border: 1px solid currentColor;
  border-radius: var(--r-3);
  font-size: var(--f-xs);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  white-space: nowrap;
}
.cx-seal-state--sealed { color: var(--tone-sealed); }
.cx-seal-state--waiting { color: var(--tone-waiting); }
.cx-seal-state--working { color: var(--tone-working); }
.cx-seal-state--broken { color: var(--tone-broken); }
.cx-seal-state--unknown { color: var(--tone-unknown); }

/* §3.4 provenance — the thread from shot to source artifact, expressed */
.cx-prov {
  padding-top: var(--sp-2);
  border-top: 1px solid var(--rule);
}
.cx-prov-line { margin: 0 0 var(--sp-1); font-size: var(--f-sm); color: var(--ink-2); }
.cx-prov-arrow { color: var(--ink-3); }
.cx-prov-rung { color: var(--accent); }
.cx-prov-vals { margin: 0; display: grid; gap: var(--sp-1); }
.cx-prov-val {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  min-width: 0;
  /* a narrow shot block must still show BOTH sealed values: clip the glyphs,
     never drop the row. The full value stays in the hook and the title. */
  white-space: nowrap;
  overflow: hidden;
}
.cx-prov-val dd { text-overflow: ellipsis; overflow: hidden; }
.cx-prov-val dt { flex: 0 0 auto; font-size: var(--f-xs); }
.cx-prov-val dd { margin: 0; min-width: 0; font-size: var(--f-xs); color: var(--ink-2); }
.cx-prov-val code { font-size: var(--f-xs); }

/* §3.2 empty lane */
.cx-lane--empty { display: flex; align-items: center; }
.cx-empty {
  margin: 0;
  width: 100%;
  padding: var(--sp-4);
  background: var(--well);
  border: 1px dashed var(--edge-hi);
  border-radius: var(--r-2);
  font-size: var(--f-sm);
  color: var(--ink-2);
}
.cx-empty-glyph { color: var(--ink-3); margin-right: var(--sp-2); }
.cx-empty b { color: var(--ink); }

/* wide: the real proportional timeline */
@media (min-width: 48em) {
  .cx-shots { display: block; position: relative; height: var(--lane-h); }
  .cx-shot {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--shot-left);
    width: var(--shot-width);
    padding-right: var(--sp-1);
    /* each block measures itself, so detail is shed by BLOCK width, not by
       viewport width — a short clip in a long edit is narrow no matter how wide
       the screen is */
    container-type: inline-size;
  }
  .cx-lane--empty { min-height: var(--lane-h); }
  .cx-shot-label { margin: var(--sp-1) 0; }

  /* Nothing inside a block may wrap: a 14px-wide clip must read as a thin clip,
     never as a column of single stacked characters. */
  .cx-shot-id, .cx-shot-span, .cx-shot-label, .cx-prov-line, .cx-seal-state {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* §3.7 legibility at scale — shed detail in a deliberate order as the clip
     narrows, so what remains is always readable. The full provenance never
     leaves the data layer: every hook, the per-value titles and the block's own
     summary title stay intact at every width. */
  @container (max-width: 160px) {
    .cx-prov-vals { display: none; }
  }
  @container (max-width: 112px) {
    .cx-prov { display: none; }
    .cx-shot-span { display: none; }
  }
  @container (max-width: 72px) {
    .cx-shot-label { display: none; }
    .cx-seal-state .cx-seal-word { display: none; }
    .cx-seal-state { border: 0; padding: 0; }
  }
  @container (max-width: 44px) {
    .cx-shot-id { display: none; }
    .cx-shot-body { padding: var(--sp-2); }
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media (prefers-contrast: more) {
  :root { --ink-2: var(--ink); --ink-3: var(--ink); }
}