/* verifiedai: Platform C (M7 Bridge+: one figure, two tabs: the read-out estimate next to the measured statements, a commit-reveal
   leaderboard over GeT-RM labels) and Platform E (M10 reads to a proof: one recorded reads → VCF → commitment run, drawn from
   assets/data/platform/reads.json).
   Core components are used as they are (page-head, mod-head, figbox, ftabs, readout, opts, switch, stepper, note, key,
   details.sources, verdict); this file only lays them out and draws the module's own marks.
   v5, the films' figure grammar: warm-grey marks with a fine ink outline (--va-ol), ink for axes, labels and the strong
   marks, orange for the one key element (the read-out the slider sets, the carrier label, the alternate base); labels in
   Figtree caps, data in mono, the figure's one-line captions in Newsreader italic. */

.va { --va-ol: rgba(17, 17, 17, .5); --va-ol2: rgba(17, 17, 17, .28); }
.va figure { margin: 0; }
.va sup { font-size: .68em; line-height: 0; }
.va sup a { color: var(--tone); text-decoration: none; padding: 0 1px; }
.va sup a:hover { text-decoration: underline; }

/* ---------- M7: one figure, a pane and a control group per tab ---------- */
.va .va-box { margin-top: 32px; }
.va .va-box > .ftabs { grid-column: 1 / -1; }
.va .va-pane:focus-visible { outline-offset: 4px; }
.va .va-ph { margin: 0 0 24px; }
.va .va-pane > .fnote { margin-top: 24px; }
.va .va-cg { display: flex; flex-direction: column; gap: 20px; }
.va .va-rh { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.va .va-rh .k { margin: 0; }
.va .va-cg > .btn, .va .va-cg > .act { align-self: flex-start; }

/* 01 · Read-out cost: readout, then one row per measured statement and the estimate, on a shared log2 axis.
   Grid columns: label | track | value; the zone bands, gridlines and the limit line sit over the track column only. */
.va .va-pane { container-type: inline-size; }
.va .va-calc { --n: 2; }
@container (min-width: 600px) { .va .va-calc { --n: 4; } }
.va .va-cy { margin-top: 32px; }
.va .va-gh { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.va .va-cy-fig { --lw: 128px; --vw: 64px; --g: 12px; position: relative; margin-top: 12px; padding-top: 30px; }
.va .va-cy-bg, .va .va-cy-fg { position: absolute; left: calc(var(--lw) + var(--g)); right: calc(var(--vw) + var(--g)); top: 30px; bottom: 22px; pointer-events: none; }
.va .va-cy-fg { top: 0; z-index: 2; }
.va .va-cy-z, .va .va-cy-g { position: absolute; top: 0; bottom: 0; }
.va .va-cy-z.va-z1, .va .key i.va-kz1 { background: var(--paper); }
.va .va-cy-z.va-z2, .va .key i.va-kz2 { background: var(--paper-far); }
.va .va-cy-z.va-z3, .va .key i.va-kz3 { background: var(--signal-tint); }
.va .key i.va-kz1, .va .key i.va-kz2 { box-shadow: inset 0 0 0 1px var(--line-2); }
.va .va-cy-g { width: 1px; margin-left: -.5px; background: var(--line); }
/* The trace limit: an ink hairline with a dot at its head and its name beside it, the films' leader label. */
.va .va-cy-lim { position: absolute; top: 0; bottom: 0; }
.va .va-cy-lim i { position: absolute; top: 22px; bottom: 0; left: -.75px; width: 1.5px; background: var(--ink); transform-origin: 50% 0; }
.va .va-cy-lim i::before { content: ""; position: absolute; top: -3px; left: -2.25px; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.va .va-cy-lim b { position: absolute; top: 1px; right: 8px; padding: 2px 0; background: none; color: var(--ink); font: 400 11px/1.3 var(--mono); letter-spacing: 0; white-space: nowrap; }
.va .va-cy-rows { position: relative; z-index: 1; }
.va .va-cy-r { display: grid; grid-template-columns: var(--lw) minmax(0, 1fr) var(--vw); gap: 0 var(--g); align-items: center; width: 100%; min-height: 40px; margin: 0; padding: 4px 0;
  border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: default; }
.va .va-cy-r:focus-visible { outline-offset: 2px; }
.va .va-cy-l, .va .va-cy-v { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 3px 6px; margin: 0 -6px; transition: background var(--t1); }
.va .va-cy-l b { font-weight: 400; font-size: 14px; line-height: 1.25; }
.va .va-cy-l span, .va .va-cy-v span { font: 400 10.5px/1.3 var(--mono); letter-spacing: .04em; color: var(--muted); }
.va .va-cy-l span { white-space: pre-line; font: 500 10.5px/1.35 var(--font); letter-spacing: .1em; text-transform: uppercase; }
.va .va-cy-v { align-items: flex-end; text-align: right; }
.va .va-cy-v b { font: 400 13px/1.3 var(--mono); white-space: nowrap; }
.va .va-cy-v span { white-space: nowrap; }
.va .va-cy-r.on .va-cy-l b { color: var(--tone); }
.va .va-cy-r.on .va-cy-l, .va .va-cy-r.on .va-cy-v { background: var(--sel); }
.va .va-cy-t { position: relative; height: 12px; }
.va .va-cy-t i { position: absolute; top: 0; bottom: 0; left: 0; }
/* Measured rows: warm-grey bars with the films' fine outline; the read-out the slider sets is the one orange bar. */
.va .va-cy-b { background: var(--g3); box-shadow: inset 0 0 0 1px var(--va-ol); transform-origin: 0 50%; }
.va .va-cy-pd { background: var(--white); box-shadow: inset 0 0 0 1px var(--line-2); }
.va .va-est .va-cy-b { background: var(--signal); }
.va .va-cy-rg { border: 1.5px dashed var(--ink); background: var(--white); }
.va .va-est .va-cy-b, .va .va-est .va-cy-rg, .va .va-est .va-cy-pd { transition: left var(--t2) var(--ease), width var(--t2) var(--ease); }
.va .va-cy .key > span:first-child > i { background: var(--g3); box-shadow: inset 0 0 0 1px var(--va-ol); }
.va .key i.va-kest { background: var(--signal); box-shadow: inset 0 0 0 1px var(--va-ol); }
.va .va-cy-ax { position: relative; height: 22px; margin: 0 calc(var(--vw) + var(--g)) 0 calc(var(--lw) + var(--g)); font: 400 10.5px/1.3 var(--mono); color: var(--muted); }
.va .va-cy-ax span { position: absolute; top: 6px; transform: translateX(-50%); }
.va .va-cy-ax span:first-child { transform: none; }
.va .va-cy-ax span:last-child { transform: translateX(-100%); }
/* The row under the pointer, said in the films' caption voice. */
.va .va-cy-d { min-height: 2.8em; margin: 16px 0 0; color: var(--ink); font-family: var(--display); font-style: italic; font-size: 18px; line-height: 1.38; letter-spacing: -0.003em; font-variant-numeric: lining-nums; }
.va .va-cy .key { margin-top: 12px; }
.va #va-c-say { margin-top: 24px; }
@container (max-width: 420px) {
  .va .va-cy-fig { --lw: 92px; --vw: 58px; --g: 8px; }
  .va .va-cy-l b { font-size: 13px; }
}
@container (max-width: 600px) { .va .va-cy-ax span.va-odd { display: none; } }
.va .va-rwrap { position: relative; padding-bottom: 4px; }
.va .va-rwrap .range { display: block; width: 100%; margin: 6px 0 0; }
.va .va-rax { display: flex; justify-content: space-between; font: 400 10.5px/1.3 var(--mono); color: var(--muted); }
.va .va-fit { margin: 0; color: var(--ink); }

/* Step strips (M7 leaderboard, M10 run): the hero's readout cells as buttons */
.va .va-steps { margin: 0 0 32px; }
.va .va-steps > button { border-width: 1.5px 0 0; border-style: solid; border-radius: 0; background: none; color: inherit; padding: 8px 0 0; margin: 0; text-align: left; font: inherit; cursor: pointer; }
.va .va-steps > button .rd-v { margin-bottom: 0; }
.va .va-steps > button .rd-bar { margin-top: 4px; }
.va .va-steps > button:hover .rd-k { color: var(--ink); }
.va .va-steps > button:focus-visible { outline-offset: 4px; }

/* 02 · Leaderboard: set, submissions, reveal */
.va .va-sec + .va-sec { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.va .va-sh { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 12px; }
.va .va-cells { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; }
.va .va-cells i { aspect-ratio: 1; background: var(--line); transition: background var(--t3) var(--ease), box-shadow var(--t3) var(--ease); }
.va .va-cells i.va-s { background: var(--ink); }
.va .va-cells i.va-em { background: none; box-shadow: inset 0 0 0 1px var(--line-2); }
.va .va-cells i.va-y1, .va .va-cells i.va-p1 { background: var(--fn-no); box-shadow: inset 0 0 0 1px var(--va-ol); }
.va .va-cells i.va-y0, .va .va-cells i.va-p0 { background: var(--fn-norm); box-shadow: inset 0 0 0 1px var(--va-ol); }
.va .va-cells i.va-tp { box-shadow: inset 0 0 0 2px var(--ink); }
.va .va-cells i.va-x { background: var(--white); box-shadow: inset 0 0 0 1.5px var(--ink); }
.va .va-cg .key i { box-shadow: inset 0 0 0 1px var(--va-ol); }
.va .key i.va-kx { background: var(--white); box-shadow: inset 0 0 0 1.5px var(--ink); }
.va .va-hk { margin-top: 12px; }
.va .va-hash { display: flex; flex-wrap: wrap; gap: 0 10px; margin: 4px 0 0; }
.va .va-hash i { font-style: normal; color: var(--signal-ink); }
.va .va-hash.va-bad { color: var(--signal-ink); }
.va .va-board { list-style: none; margin: 0; padding: 0; }
.va .va-team { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "rk tn sc" "rk cells cells" "rk rc rc"; gap: 6px 12px; align-items: center;
  padding: 12px 0; border-top: 1px solid var(--line); background: var(--white); transition: transform var(--t4) var(--ease); }
.va .va-team:first-child { border-top: 0; padding-top: 0; }
/* Rank and score are the row's big numbers (Newsreader); the receipt stays a mono hash. */
.va .va-rk { grid-area: rk; align-self: start; font: 400 24px/.9 var(--display); letter-spacing: -0.01em; font-variant-numeric: lining-nums tabular-nums; }
.va .va-tn { grid-area: tn; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; min-width: 0; }
.va .va-tn b { font-weight: 500; font-size: 15px; }
.va .va-pred { grid-area: cells; }
.va .va-sc { grid-area: sc; display: flex; align-items: baseline; gap: 10px; margin: 0; }
.va .va-sc b { font: 400 21px/1.05 var(--display); letter-spacing: -0.01em; font-variant-numeric: lining-nums tabular-nums; }
.va .va-rc { grid-area: rc; font: 400 10.5px/1.3 var(--mono); color: var(--muted); }
.va .va-rc:empty { display: none; }
.va .va-cmp { margin: 0; display: grid; gap: 10px; }
.va .va-cmp dd { margin: 0; }
.va .va-check .verdict { margin-top: 16px; }
.va .va-check > .small { margin: 0; }
/* The step, narrated like the films' captions. */
.va .va-stept { margin: 0; color: var(--ink); font-family: var(--display); font-style: italic; font-size: 17.5px; line-height: 1.38; letter-spacing: -0.003em; font-variant-numeric: lining-nums; }

/* ---------- M10: reads → VCF → commitment, one block per step ---------- */
.va .va-rd { margin-top: 32px; container-type: inline-size; }
.va .va-sites { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 28px; }
.va .va-sites .k { margin: 0; }
.va .va-sites .opts { gap: 8px; }
.va .va-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
@container (min-width: 680px) {
  .va .va-stage { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 32px 40px; }
  .va .va-b[data-b="1"] { grid-column: 1 / -1; }
  .va .va-b[data-b="2"] { grid-column: 1; grid-row: 2 / span 2; }
  .va .va-b[data-b="3"] { grid-column: 2; grid-row: 2; }
  .va .va-b[data-b="4"] { grid-column: 2; grid-row: 3; }
  .va .va-b[data-b="5"] { grid-column: 1; grid-row: 4; }
  .va .va-b[data-b="6"] { grid-column: 2; grid-row: 4; }
}
.va .va-b { min-width: 0; border-top: 1px solid var(--line); padding-top: 12px; }
.va .va-b > .k { margin: 0 0 16px; }
.va .va-b { transition: opacity var(--t3) var(--ease); }
.va .va-b.va-off { opacity: .3; }
.va .va-bx { min-width: 0; }
.va .va-bx svg { display: block; width: 100%; height: auto; overflow: visible; }
.va .va-bx svg text { font: 400 10.5px var(--mono); letter-spacing: .04em; fill: var(--muted); }
.va .va-bx svg text.on { fill: var(--ink); }
.va .va-bx svg text.lt { font-size: 11px; letter-spacing: 0; fill: var(--ink); }
.va .va-bx svg rect { transform-box: fill-box; }
/* The drawing: paper-grey bars and reads with fine ink outlines, ink hairline leaders, the alternate base in orange. */
.va .va-bar { fill: var(--paper-far); stroke: var(--va-ol2); stroke-width: 1; transform-origin: 0 50%; }
.va .va-tk { fill: var(--ink); transform-origin: 50% 100%; }
.va .va-zl { fill: none; stroke: var(--va-ol2); stroke-width: 1; }
.va .va-base { fill: var(--va-ol); transform-origin: 0 50%; }
.va .va-lc { fill: var(--white); stroke: var(--va-ol2); stroke-width: 1; }
.va .va-lc.on { stroke: var(--ink); stroke-width: 1.5; }
.va .va-rr { fill: var(--blue-100); stroke: var(--va-ol2); stroke-width: .75; transition: fill var(--t2) var(--ease), stroke var(--t2) var(--ease); }
.va .va-rdr.va-hl .va-rr { fill: var(--blue-300); stroke: var(--va-ol); }
.va .va-ref { fill: var(--blue-500); }
.va .va-alt { fill: var(--signal); }
.va .va-mm { fill: var(--muted); }
.va .va-col { fill: none; stroke: var(--ink); stroke-width: 1; }
.va .va-hov { min-height: 17px; margin: 8px 0 0; font: 400 11px/1.6 var(--mono); color: var(--muted); }
.va .va-sec .va-hov { margin: 6px 0 0; }
.va .va-rd-key > span:nth-child(2) > i { box-shadow: inset 0 0 0 1px var(--va-ol2); }

.va .va-al { display: grid; gap: 12px; }
.va .va-alr { display: grid; grid-template-columns: 16px 28px minmax(0, 1fr) auto; align-items: start; gap: 10px; }
.va .va-alr > .data, .va .va-alr > .k { line-height: 16px; }
.va .va-alr > b { font-weight: 400; }
.va .va-u { display: flex; flex-wrap: wrap; gap: 2px; padding-top: 4px; min-height: 12px; }
.va .va-u i { width: 8px; height: 8px; background: var(--blue-500); box-shadow: inset 0 0 0 1px var(--va-ol); }
.va .va-alr[data-a="alt"] .va-u i { background: var(--signal); }
.va .va-u i.va-hl { box-shadow: inset 0 0 0 1.5px var(--ink); }
.va .va-gt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 20px 0 0; }

.va .va-vcf { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 12px 16px; margin: 0; }
.va .va-vcf > div { min-width: 0; border-top: 1px solid var(--line); padding-top: 6px; }
.va .va-vcf dd { margin: 4px 0 0; font-size: 12px; overflow-wrap: anywhere; }
.va .va-vcf > div:last-child { grid-column: span 2; }
.va .va-lk { margin: 18px 0 4px; }
.va .va-leaf { margin: 0; overflow-wrap: anywhere; }

.va .va-lv { fill: none; stroke: var(--line); stroke-width: 1; }
.va .va-lv.va-edge { stroke: var(--va-ol2); }
.va .va-pth { fill: none; stroke: var(--blue-900); stroke-width: 1.25; }
.va .va-pn { fill: var(--blue-900); transform-origin: 50% 50%; }
.va .va-lf { fill: var(--ink); }

.va .va-fly { position: absolute; inset: 0; pointer-events: none; }
.va .va-fly i { position: absolute; transform-origin: 0 0; }

.va .va-rd-key { margin-top: 28px; }
.va .va-run { margin-top: 32px; }
.va .va-rd > .fnote { margin-top: 20px; }
.va .va-acts { margin: 24px 0 0; }

/* ---------- Responsive ---------- */
/* Stacked figure: tabs, then the controls, so the result stays in view while you change them */
@media (max-width: 1000px) {
  .va .va-box > .ftabs { order: -2; }
  .va .va-box > .ctl { order: -1; border-top: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 760px) {
  .va .va-team { grid-template-columns: 22px minmax(0, 1fr) auto; gap: 6px 10px; }
  .va .va-steps { margin-bottom: 24px; }
  .va .va-sites { margin-bottom: 20px; }
}