/* The capture scrubber — style E "Cloud" (delysium accordion), in this product's tokens.
 *
 * The reference is pure #000 with a #1E50FF wash. Dropped into a light dashboard that would be a
 * foreign panel, so the surface is `--nav` (the rail's own ink) and the text tiers are
 * `--on-nav` / `--on-nav-strong` — the pair `audit()` has already proven on that background.
 * Sitting directly under the stage, a dark band reads as part of the 3D surface rather than as a
 * second card, which is what the accordion wants anyway.
 *
 * 🔴 Namespaced `sc*`, every name grepped against app.css, screens.css AND spine.css first.
 * `.band`, `.body`, `.cap` and `.pill` are all already taken by other components — inheriting one
 * of those is trap 5 and trap 15, which each cost a pass: `screens.css`'s 14x3px `.legend .lg`
 * silently collapsed the spine's legend while still looking almost right.
 *
 * 🔴 The glow MUST also set a real background-color where it tints text's backdrop, or `audit()`
 * computes it transparent and walks past the check (trap 14). It does not: it is a decorative
 * wash over an opaque `--nav` column, and no text sits on the wash alone — the active column's
 * label reads against the column, and the wash only ever appears on INACTIVE columns.
 */

.scrub {
  --scbw: 260px;          /* the expanded column's content width — content is clipped, not squished */
  --scstrip: 36px;        /* a collapsed strip: index on top, date set vertical */
  --scglow: oklch(0.55 0.21 264);
  --scease: cubic-bezier(.22, .8, .2, 1);
  margin-top: var(--sp-3);
}

/* ------------------------------------------------------------- accordion */
.scacc {
  display: flex;
  height: 104px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--nav);
  cursor: crosshair;              /* the cursor IS the scrubber — rule 1 */
  touch-action: pan-y;            /* a vertical page scroll must still start on the band */
}

.sccol {
  position: relative;
  flex: 0 0 var(--scstrip);
  min-width: 0;
  overflow: hidden;               /* clipped, never squished — the delysium behaviour */
  border-inline-start: 1px solid oklch(1 0 0 / .14);
  cursor: pointer;
  /* 🔴 THE WASH IS A REAL background-color, NOT AN OVERLAY. An absolutely-positioned child span
     tinting the column is invisible to `audit()`, which composites only the PARENT chain: the
     strip's text would be checked against bare `--nav` while sitting on nav-plus-blue on screen.
     That is trap 14 ("any gradient fill must ALSO set background-color") in its other direction.
     Mixing into the column's own background-color keeps the audited number and the rendered
     pixel the same thing. `--sclit` is written per column by the component: 0 on the active one
     and on every column before it, rising toward the later dates. */
  background-color: color-mix(in oklab, var(--nav),
                              var(--scglow) calc(var(--sclit, 0) * 34%));
  /* A fixed sheen, identical on every column, so it carries no state and needs no audit. */
  background-image: linear-gradient(180deg, oklch(1 0 0 / 0) 45%, oklch(0.55 0.21 264 / .14) 100%);
  transition: flex-grow .6s var(--scease), flex-basis .6s var(--scease),
              background-color .6s var(--scease);
}
.sccol:first-child { border-inline-start: 0; }
.sccol.on { flex: 1 1 var(--scbw); }

/* ---------------------------------------------- exactly TWO dates: a PAIR, not an accordion
 * 🔴 MEASURED FAILURE, not a preference. On the Diner (the one real two-date capture) the band
 * rendered 867px of "As captured" beside a 36px sliver of "As made" - and 1564px beside the same
 * 36px once expanded. The accordion's bargain is that collapsing N-1 columns BUYS the active one
 * its width; with N=2 there is nothing to buy, so the collapse pays for nothing and simply hides
 * half of what the control exists to compare. `data.js` called this out when the three-date
 * render sequence was built ("two dates make an accordion of one panel and one sliver, which is
 * not the shape the design was drawn for") - this is that shape, fixed where it is decided.
 *
 * So a pair splits the track evenly and BOTH dates spell themselves out. Rule 2 of the 2026-09-12
 * session ("names hidden at rest") is kept where it earns its keep, at three dates and up, where
 * the strips are what make room for the active panel.
 *
 * Which one is live is then carried by WEIGHT rather than by width: the inactive half keeps the
 * same blue wash the accordion already uses for "not this one" and its name drops to the quieter
 * text tier, so the active column is still unambiguous without taking the other one's space.
 * Hit-testing is untouched - `fromX` divides the accordion's rect evenly and never read the
 * rendered widths, which is why this is a pure stylesheet change. */
.scrub[data-n="2"] .sccol { flex: 1 1 0; }
.scrub[data-n="2"] .sccol .scn,
.scrub[data-n="2"] .sccol .scbody { opacity: 1; }
.scrub[data-n="2"] .sccol .scvt { opacity: 0; }        /* no strip, so no vertical date */
/* 🔴 The dim is TOKENS, never `opacity`. An opacity on the column would fade its text against a
   background `audit()` still reads at full strength, so the check would pass on a contrast the
   screen does not have - the same blind spot that lets a glass panel through. `--on-nav` is the
   already-audited quieter tier on this surface, so the inactive half is quieter by the same
   means every other quiet thing here is. */
.scrub[data-n="2"] .sccol:not(.on) .sch { color: var(--on-nav); }

/* 🔴 "Showing above" IS A STATE, AND ONLY ONE COLUMN IS IN IT. The accordion never had to say so:
   a collapsed column's body was at opacity 0, so the chip went with it. Revealing both bodies
   revealed both chips, and the inactive half then asserted it was the thing on the stage while
   the stage drew the other one - a label that is false exactly when someone reads it to find out
   which date they are looking at. `.gen` ("Rendered") is NOT state, it is what the stage IS, so
   it stays on both. */
.scrub[data-n="2"] .sccol:not(.on) .scsrc:not(.gen) { visibility: hidden; }

/* 🔴 THE WASH HAS TO COME OFF THE SIDE IT IS ON. `--sclit` rises to the RIGHT of the active
   column, which is the delysium behaviour and correct for a row of strips - but on a pair it
   means date 2 is washed when date 1 is live and NOTHING is washed when date 2 is live. Measured:
   at i=1 both halves computed the identical `oklab(0.227 0.0011 -0.00384)`, and the only thing
   left telling them apart was the name's alpha. A pair has one inactive column wherever it sits,
   so it carries the wash wherever it sits, at the strength `--sclit: 1` would have given it. */
.scrub[data-n="2"] .sccol:not(.on) {
  background-color: color-mix(in oklab, var(--nav), var(--scglow) 34%);
}

.sccol:focus-visible {
  outline: 2px solid var(--on-nav-strong);
  outline-offset: -3px;
}

.scn {
  position: absolute;
  inset-block-start: var(--sp-3);
  inset-inline-start: var(--sp-4);
  opacity: 0;                     /* collapsed: the vertical date owns the strip, alone */
  transition: opacity .3s;
  font: 500 var(--t-label)/1 var(--font);
  font-variant-numeric: tabular-nums;
  color: var(--on-nav);
  transition: color .3s;
  /* 🔴 trap 16: a numeric run needs its own base direction, or `01` renders mirrored in HE and
     `unicode-bidi: isolate` alone does not set it. */
  direction: ltr;
  unicode-bidi: isolate;
}
.sccol.on .scn { color: var(--on-nav-strong); opacity: 1; }

/* Rule 2: at rest a column says only WHEN, and says it vertically. */
.scvt {
  position: absolute;
  inset-block: var(--sp-3);
  inset-inline-start: 11px;
  max-height: calc(100% - var(--sp-5));
  overflow: hidden;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  font: 400 11px/1 var(--font);
  color: var(--on-nav);
  transition: opacity .25s;
  direction: ltr;
  unicode-bidi: isolate;
}
.sccol.on .scvt { opacity: 0; }

/* The active column's content is laid out at the FULL expanded width and revealed, so it never
   reflows as the column grows — a body that relayouts mid-transition reads as a stutter. */
.scbody {
  position: absolute;
  inset: 0;
  padding: var(--sp-6) var(--sp-4) var(--sp-3);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  opacity: 0;
  transition: opacity .35s .1s;
  pointer-events: none;
}
.scwho { display: grid; gap: 2px; min-width: 0; }
.sccol.on .scbody { opacity: 1; }

.sch {
  font: 500 var(--t-h2)/1.1 var(--font);
  letter-spacing: -.01em;
  color: var(--on-nav-strong);
}
.scd {
  font: 400 var(--t-label)/1.3 var(--font);
  color: var(--on-nav);
  direction: ltr;
  unicode-bidi: isolate;
}
.scsrc {
  flex: none;
  align-self: flex-end;
  padding: 3px 9px;
  border: 1px solid oklch(1 0 0 / .28);
  border-radius: var(--r-pill);
  font: 500 11px/1.3 var(--font);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--on-nav);
}

/* ------------------------------------------------------------------ foot */
.scfoot {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}

.scnav { display: flex; gap: var(--sp-1); flex: none; }
.scnav button {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--slate);
  cursor: pointer;
}
.scnav button:hover:not(:disabled) { border-color: var(--ink); color: var(--ink); }
.scnav button:disabled { opacity: .35; cursor: default; }
.scnav svg {
  width: 13px; height: 13px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
/* I.chev points right; prev is the same glyph turned over. In RTL the whole pair turns, because
   "previous" follows the reading direction, not the screen. */
.scnav .scprev svg { transform: rotate(180deg); }
[dir="rtl"] .scnav .scprev svg { transform: none; }
[dir="rtl"] .scnav .scnext svg { transform: rotate(180deg); }

.scnote {
  margin: 0;
  font: 400 var(--t-label)/1.35 var(--font);
  color: var(--stone-text);
}

/* --------------------------------------------------------------- narrow */
@media (max-width: 720px) {
  .scrub { --scbw: 200px; --scstrip: 32px; }
  .scacc { height: 96px; }
  .sch { font-size: 17px; }
}

/* 🔴 A PAIR GETS HALF THE BAND, AND ON A PHONE HALF IS NOT ENOUGH FOR A ROW. Measured at 390px:
   each column was 122px while its body wanted 248px, so both halves clipped and the chip hung
   21.5% outside the column box, cut by `.sccol { overflow: hidden }`. The block above does
   nothing about it - `--scbw` is DEAD at n=2, because the pair sets `flex-basis: 0` and the
   column's width no longer comes from it.
   So the body stops being a row and becomes a stack: name over date over whatever is left. The
   state chip goes, because at this width it is the widest thing in the column and the colour
   already says which half is live; the tier-3 link stays, because it is the only way to the
   published date and nothing else offers it. */
@media (max-width: 560px) {
  .scrub[data-n="2"] .scbody {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 3px;
    padding: var(--sp-5) var(--sp-2) var(--sp-2);
  }
  .scrub[data-n="2"] .scwrap { display: contents; }
  .scrub[data-n="2"] .scsrc { display: none; }
  .scrub[data-n="2"] .scopen { align-self: flex-start; }
  .scrub[data-n="2"] .sch { font-size: 15px; line-height: 1.15; }
  .scrub[data-n="2"] .scn { inset-inline-start: var(--sp-2); }
}

/* No reduced-motion block here on purpose: app.css:520 already sets
   `* { transition-duration: 0.01ms !important }` under the query, and `!important` beats anything
   this file could declare. A rule that can never win is a dead rule, and a dead rule is the same
   class of thing as a dead control - it reads as cover that is not there. */

/* The scrubber host, under the stage inside the same panel. `.pjscrub` grepped against all
   three stylesheets plus this one before use. */
.pjscrub { padding: 0 var(--sp-2) var(--sp-2); }

/* ------------------------------------------- footage stages in the stage
 * Every clip of a capture is resident and preloaded; a scrub flips `hidden`. That is locked rule
 * 3 verbatim - the picture swaps on the same frame, nothing fetches, nothing seeks from cold. */
.stagemedia { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.stagemedia video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  background: var(--ink);
}
.stagemedia video[hidden] { display: none !important; }

/* A rendered stage says so on its own column. It is a statement about provenance, so it does not
   get the quiet treatment the "showing above" chip gets. */
.scsrc.gen {
  border-color: var(--brand-yellow);
  color: var(--brand-yellow);
}

/* The published date's link to the real tier-3 viewer. Only the stage that IS published carries
   one — scrubbing here and opening the full viewer are not alternatives, and removing this was
   the regression that made a multi-date capture reachable only as a preview. */
.scwrap { display: flex; align-items: flex-end; gap: var(--sp-2); flex: none; }
.scopen {
  padding: 3px 9px;
  border: 1px solid oklch(1 0 0 / .55);
  border-radius: var(--r-pill);
  font: 500 11px/1.3 var(--font);
  color: var(--on-nav-strong);
  text-decoration: none;
  white-space: nowrap;
  pointer-events: auto;          /* .scbody is pointer-events:none so the band keeps scrubbing */
}
.scopen:hover { background: var(--on-nav-strong); color: var(--nav); }
.sccol.on .scbody { pointer-events: none; }
.sccol.on .scbody .scopen { pointer-events: auto; }