/* web/studio-console-playhead/playhead.css — VARY ZONE (Delgado authors this).
 *
 * This stylesheet is a LAYER, not a product. The page loads the Cut's own
 * stylesheet first and this one second, so every token below — type scale,
 * spacing unit, palette, seal motif, focus ring — is inherited from
 * STUDIO_CONSOLE_DESIGN_FLOOR_SPEC_v0_2 §3 exactly as the banked Cut publishes
 * it. Nothing here redefines a floor token. The Console must read as ONE
 * instrument across the board, the cut and the playhead, not three products.
 *
 * The same reason the engine imports renderCut instead of copying it: one
 * definition, referenced. cut.css is referenced by the page, never duplicated.
 *
 * ── THE ONE-ACCENT RULE, AND HOW THE NEEDLE HONOURS IT ─────────────────────
 * The floor allows ONE accent (the seal) plus semantic tones. A playhead needle
 * is a strong visual claim and the obvious temptation is to give it a second
 * accent hue. It does not get one. The needle is drawn in the instrument's own
 * INK — the highest-contrast neutral already in the palette — because position
 * is chrome, not a semantic state. The seal keeps sole ownership of --accent,
 * and the needle still reads as the loudest thing on the page because it is the
 * only pure-ink mark on a panel of muted tones. See RUNLOG F4.
 *
 * ── THE ALIGNMENT GUARANTEE ────────────────────────────────────────────────
 * The scrub strip reuses the Cut's --gutter column and the same lane box, so the
 * needle at frame f sits directly under the ruler tick and the shot block at f in
 * the timeline above. That alignment is structural — one geometry, declared by
 * the Cut and reused here by name — not eyeballed against a screenshot.
 *
 * ── AND WHERE IT REFUSES TO IMPLY ALIGNMENT ────────────────────────────────
 * Below 48em the Cut hides its ruler, because the shots stack as cards and there
 * is no shared spatial axis for a ruler to describe. The scrub strip hides at
 * exactly the same breakpoint, for exactly that reason: a needle floating above
 * stacked cards would imply a spatial relationship that does not exist on that
 * layout. The frame, the timecode and the full resolved provenance stay on the
 * page as text at every width — only the drawing goes away.
 */

/* ── the playhead panel ───────────────────────────────────────────────────── */
.ph {
  max-width: 78rem;
  margin: var(--sp-4) auto 0;
  padding: var(--sp-6);
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--r-3);
  display: grid;
  gap: var(--sp-5);
}

/* ── masthead ─────────────────────────────────────────────────────────────── */
.ph-head-mark { display: flex; align-items: center; gap: var(--sp-4); }
.ph-head-words { min-width: 0; }
.ph-title { margin: 0; font-size: var(--f-xl); line-height: var(--lh-tight); letter-spacing: -0.01em; }
.ph-tagline { margin: var(--sp-1) 0 0; font-size: var(--f-sm); color: var(--ink-2); }

/* The mark is the needle itself at rest — same form as the thing it names, so the
   masthead glyph and the mark on the strip are one idea drawn at two scales. */
.ph-mark {
  position: relative;
  flex: 0 0 auto;
  width: var(--sp-8);
  height: var(--sp-12);
}
.ph-mark-head {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--sp-6);
  height: var(--sp-4);
  background: var(--ink);
  border-radius: var(--r-1) var(--r-1) 0 0;
  clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%);
}
.ph-mark-stem {
  position: absolute;
  top: var(--sp-4);
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: var(--ink);
}

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

/* ── the scrub strip — the Cut's geometry, reused by name ─────────────────── */
.ph-scrub-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-2);
}
@media (min-width: 48em) {
  .ph-scrub-row {
    grid-template-columns: var(--gutter) minmax(0, 1fr);
    gap: var(--sp-4);
    align-items: end;
  }
}
/* No shared spatial axis below the timeline breakpoint — see the header note. */
@media (max-width: 47.99em) {
  .ph-scrub-row { display: none; }
}

.ph-scrub-gutter { display: flex; align-items: flex-end; }

.ph-scrub {
  position: relative;
  min-width: 0;
  height: var(--sp-16);
  /* the flag rides the needle and is centred on it; at either extreme of the reel
     it leans over the lane edge rather than being clipped or re-anchored, so the
     stem stays the exact indicator at every frame */
  overflow: visible;
}

.ph-rail {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--sp-3);
  background: var(--well);
  border: 1px solid var(--edge);
  border-radius: var(--r-1);
}

/* The resolved shot's extent, lit under the needle: position and coverage read in
   one glance. Accent, because this is a sealed artifact's span — a seal moment. */
.ph-extent {
  position: absolute;
  bottom: 0;
  left: var(--ph-left);
  width: var(--ph-width);
  height: var(--sp-3);
  background: var(--accent);
  border-radius: var(--r-1);
}
.ph-extent-id {
  position: absolute;
  left: 0;
  bottom: calc(var(--sp-3) + var(--sp-1));
  font-size: var(--f-xs);
  color: var(--accent);
  white-space: nowrap;
}

.ph-needle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--ph-at);
  width: 0;
}
.ph-needle-stem {
  position: absolute;
  top: var(--sp-6);
  bottom: 0;
  left: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--ink);
}
.ph-needle-flag {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-50%);
  padding: var(--sp-1) var(--sp-2);
  background: var(--ink);
  color: var(--ground);
  border-radius: var(--r-1);
  font-size: var(--f-xs);
  font-weight: 600;
  white-space: nowrap;
}
/* the flag points at its own frame, so the mark and the number are one object */
.ph-needle-flag::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: var(--sp-1) solid transparent;
  border-top-color: var(--ink);
}

/* ── the resolved-shot readout — the point of the rung ────────────────────── */
.ph-res {
  padding: var(--sp-5);
  background: var(--well);
  border: 1px solid var(--edge);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-2);
}
.ph-res-top {
  margin-top: var(--sp-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
.ph-res-id { font-size: var(--f-lg); font-weight: 600; }
.ph-res-track {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  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;
}
.ph-res-track--picture { color: var(--kind-picture); }
.ph-res-track--dialogue { color: var(--kind-dialogue); }
.ph-res-track--music { color: var(--kind-music); }
.ph-res-track--effects { color: var(--kind-effects); }
.ph-res-track--overlay { color: var(--kind-overlay); }
.ph-res-track--other { color: var(--kind-other); }
.ph-res-span { font-size: var(--f-sm); color: var(--ink-3); white-space: nowrap; }
.ph-res-label { margin: var(--sp-2) 0 0; font-size: var(--f-md); color: var(--ink); }

.ph-res-into { margin: var(--sp-4) 0 0; font-size: var(--f-sm); color: var(--ink-2); }
.ph-res-bar {
  display: block;
  position: relative;
  margin-top: var(--sp-2);
  height: var(--sp-1);
  background: var(--edge);
  border-radius: var(--r-1);
  overflow: hidden;
}
.ph-res-bar::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--ph-through);
  background: var(--ink-3);
}

/* Unanimity across tracks is a fact about the reading, so it is stated, not
   implied by the absence of a warning. */
.ph-agree {
  margin: var(--sp-4) 0 0;
  padding: var(--sp-2) var(--sp-3);
  background: var(--panel);
  border: 1px dashed var(--edge-hi);
  border-radius: var(--r-1);
  font-size: var(--f-sm);
  color: var(--ink-2);
}
.ph-agree-glyph { color: var(--tone-sealed); }

/* provenance — the thread from this frame back to a banked artifact */
.ph-prov {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--rule);
}
.ph-prov-line { margin: 0 0 var(--sp-2); font-size: var(--f-sm); color: var(--ink-2); }
.ph-prov-arrow { color: var(--ink-3); }
.ph-prov-rung { color: var(--accent); font-size: var(--f-md); }
.ph-prov-vals {
  margin: 0;
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
.ph-prov-val { min-width: 0; }
.ph-prov-val dt { font-size: var(--f-xs); }
.ph-prov-val dd { margin: var(--sp-1) 0 0; min-width: 0; }
.ph-prov-val code {
  font-size: var(--f-sm);
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* ── the two copy fields ──────────────────────────────────────────────────── */
.ph-crowns {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}
.ph-crown {
  min-width: 0;
  padding: var(--sp-4);
  background: var(--well);
  border: 1px solid var(--edge);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-2);
}
.ph-crown--unsealed { border-left-color: var(--tone-working); }
.ph-crown-note {
  margin: var(--sp-2) 0 var(--sp-3);
  font-size: var(--f-sm);
  color: var(--ink-2);
}

@media (prefers-contrast: more) {
  .ph-rail, .ph-res-bar { border-color: var(--ink); }
}