/* prove: the Prove and Verify tools. Both pages share one skeleton built from core components: page head, status strip
   (.readout), tool (.figbox: .drop | .ctl), result (V3.proofCard). This file only lays them out and draws the module's own
   marks: the record-grid stage with its lens and flying squares, the Merkle tree, the elapsed ruler. No keyframes here:
   motion is core's .a-* utilities and WAAPI with the core timings.
   v5 (the films' look): on the ink Prove page the tree and ruler are drawn in paper lines, the root locks in an orange
   outline; on white sheets the data marks are warm greys with a fine ink outline and orange for the one key element;
   big numbers in Newsreader, the status line in the films' italic caption voice. */

/* ---------- Shared: status strip and tool ---------- */
/* Each page is a size container: the strip's layout follows the width it really has (the side tabs take width on
   small screens), not the viewport. Five cells in a row from 790px, 3 + 2 from 560px, a compact list below. */
.pv, .vf { container: pv / inline-size; }
.pv-strip, .vf-strip { padding: 12px 8px 16px; margin: -12px -8px 20px; }   /* the page colour reaches past the cells when it sticks */
.pv-strip .meter > i.pv-miss { background: none; box-shadow: inset 0 0 0 1px var(--line-2); }   /* a panel site the file did not give */
.pv-strip .rd-bar .act, .vf-strip .rd-bar .act { padding-top: 0; }
.pv-strip .pv-open { position: relative; }
.pv-strip .pv-open::after { content: ""; position: absolute; inset: -16px -8px -11px; }   /* a 44px target without moving the row */
.rd-note.pv-long { white-space: normal; }
.vf-strip .vf-chk { display: block; margin-left: auto; color: var(--tone); }
.pv-tool .fig, .vf-tool .fig { display: flex; }
.pv-tool .fig { flex-direction: column; gap: 12px; }
.pv-tool .pv-cap { margin: 0; }
.pv-tool .drop, .vf-tool .drop { flex: 1; min-height: 180px; }
.drop .drop-g { margin-bottom: 8px; }
.drop .h4 { margin: 0; }
.pv-tool .opt, .vf-tool .opt, .pvb-pre .opt { flex-direction: column; align-items: flex-start; gap: 2px; }

/* ---------- Prove: the record grid on the ink page, the lens hop and the six squares' flight ---------- */
.px-stage { position: relative; }
.px-read { margin: 0; }
.px-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 12px; }
.px-head .k { overflow-wrap: anywhere; }
.px-grid { overflow: hidden; }
#px-grid { display: block; image-rendering: pixelated; }
.px-read .key .px-scale { margin-left: auto; }
.px-fly { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.px-sq { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; background: var(--signal); box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .5); }
.px-sq.x { background: none; box-shadow: inset 0 0 0 1.5px var(--g3); }
.px-lens { position: absolute; left: 0; top: 0; width: 72px; height: 72px; opacity: 0; }
.px-lens svg { display: block; }

/* Results: three phenotype cells on a white sheet; each gene's panel sites land in its label row first. */
.pv-genes { margin-top: 32px; }
.pv-sites { display: inline-flex; gap: 3px; margin-left: auto; }
.pv-sq { width: 10px; height: 10px; box-shadow: inset 0 0 0 1px var(--line-2); }
.pv-sq.in[data-s="ok"] { background: var(--signal); box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .5); }
.pv-genes .ph-cell.wait > dd { visibility: hidden; }
.pv-genes .ph-cell.na .ph-v { color: var(--muted); }
.pv-genes .readout:empty { display: none; }
.pv-genes .readout:not(:empty) + #result-note { margin-top: 20px; }
.pv-genes #result-note.note { margin-top: 0; }

/* Two ways to share: two option sheets, buttons on one line. */
.pv-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.pv-modes .sheet { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.pv-modes h4, .pv-modes p { margin: 0; }
.pv-modes .btn { margin-top: auto; }
.pv-modes .k:empty, .pv-wait:empty { display: none; }

/* Commit: the Merkle tree, flat on the ink page in paper lines; leaves in the record palette. At most 640px wide, so the
   tree, the counter and the strand fit under the sticky strip together. Its labels are HTML on the type scale. */
.pv-prog { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--rule); }
.pv-prog:focus { outline: none; }
.pv-zip { position: relative; max-width: 640px; }
.zip { display: block; width: 100%; height: auto; overflow: visible; }
.pv-root { position: absolute; left: 54.2%; top: 19.9%; max-width: 45.8%; margin: 0; display: flex; flex-direction: column; gap: 2px; transform: translateY(-100%); opacity: 0; transition: opacity var(--t2) var(--ease); }   /* bottom-aligned with the root node, clear of the edges under it */
.pv-root .data { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zip.lock + .pv-root { opacity: 1; }
.pv-zcap { display: flex; justify-content: space-between; gap: 16px; max-width: 640px; margin: 10px 0 0; }
.zip .e { fill: none; stroke: color-mix(in srgb, var(--paper) 26%, transparent); stroke-width: 1.2; transition: stroke var(--t2) var(--ease); }
.zip .e.on { stroke: var(--paper); }
.zip .n { fill: none; stroke: color-mix(in srgb, var(--paper) 50%, transparent); stroke-width: 1.2; transition: fill var(--t2) var(--ease), stroke var(--t2) var(--ease); }
.zip .n.on { fill: var(--paper); stroke: var(--paper); }
.zip .n.lf.on { fill: var(--lc, var(--g3)); stroke: var(--lc, var(--g3)); }
.zip .n.pn { stroke: var(--signal); }
.zip .n.pn.on { fill: var(--signal); stroke: var(--signal); }
.zip .rk { opacity: 0; transition: opacity var(--t3) var(--ease); }
.zip.lock .n[data-l="5"] { stroke: var(--signal); stroke-width: 3; }
.zip.lock .rk { opacity: 1; }
.pv-log { margin-top: 16px; color: var(--muted); }
.pv-log:empty { display: none; }
.pv-log > div { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Prove: elapsed time, the strand forming with it, the ruler with the expected marker. */
.pz { margin-top: 32px; }
.pz-stat { max-width: 360px; }
.pz-meter { position: relative; margin-top: 28px; }
.pz-strand { display: block; width: 100%; height: 84px; }
.pz-bar { height: 6px; margin-top: 12px; background: var(--meter-off); }
.pz-bar i { display: block; height: 100%; width: 0; background: var(--paper); transition: width var(--t2) linear; }
.pz-exp { position: absolute; top: -12px; bottom: -6px; width: 0; border-left: 1.5px solid var(--signal); pointer-events: none; }
.pz-exp::before { content: ""; position: absolute; top: 0; left: -6px; width: 11px; height: 7px; background: var(--signal); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.pz-exp .k { position: absolute; right: 8px; bottom: -22px; white-space: nowrap; color: var(--paper); }   /* on the axis row */
.pz .pz-ax { display: flex; justify-content: space-between; margin-top: 14px; }
.pv-status { margin: 24px 0 0; font-family: var(--display); font-style: italic; font-size: 19px; line-height: 1.35; letter-spacing: -0.005em; color: inherit; }   /* the films' italic caption */
.pv-status:empty { display: none; }

/* Result: the proof card and its buttons. */
.pv-done { margin-top: 48px; }
#certificate:focus { outline: none; }
.pv-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.pv-linkbox { max-width: 680px; margin-top: 20px; }
.pv-linkbox .k { margin: 0 0 8px; }
.pv-linkbox input { display: block; width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 0; background: var(--white); color: var(--ink); }
.pv-linkbox input:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }
.pv-end .fnote, .vf-end .fnote { margin-top: 24px; }

/* ---------- Full consumer files: the openings tape (01) and the new statements' run (02) ---------- */
.pv-big > .h2s { margin-bottom: 24px; }
.pvb { margin: 0; }
.pvb > .pvb-tabs { grid-column: 1 / -1; }
.pvb > .pvb-fig { grid-column: 1; grid-row: 2; }
.pvb > .pvb-ctl { grid-column: 2; grid-row: 2; }
.pvb-p { position: relative; }
.pvb-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 16px; }
.pvb-top .k { margin-right: auto; }
#pvb-tape { display: block; }
.pvb-p .key i:not(.hollow) { box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .5); }   /* the swatches carry the blocks' fine outline */
.pvb-hover { min-height: 1.4em; margin: 10px 0 14px; color: var(--muted); overflow-wrap: anywhere; }
.pvb-c { display: flex; flex-direction: column; gap: 20px; }
.pvb-c[hidden] { display: none; }
.pvb-size .k { display: block; }
.pvb-nv { display: block; margin: 4px 0 8px; font-family: var(--display); font-size: 27px; line-height: 1.1; letter-spacing: -0.01em; font-variant-numeric: lining-nums tabular-nums; }
.pvb-nd { margin: 6px 0 0; color: var(--muted); }
.pvb-total { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 16px; }
.pvb-total b { font: 400 52px/.9 var(--display); letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; }
.pvb-bar { display: flex; gap: 2px; height: 28px; }
.pvb-s { position: relative; flex: 1 1 0; min-width: 4px; transform-origin: 0 50%; transition: opacity var(--t1); }
/* The run's segments: warm greys from dark to light in flow order (commit, panel proofs, rules), setup hollow; each filled
   segment and swatch takes the films' fine ink outline. */
.pvb-s.c, .pvb-sw.c { background: var(--dark); }
.pvb-s.s1, .pvb-sw.s1 { background: var(--shadow); }
.pvb-s.s2, .pvb-sw.s2 { background: var(--g3); }
.pvb-s:not(.r), .pvb-sw:not(.r) { box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .5); }
.pvb-s.r, .pvb-sw.r { box-shadow: inset 0 0 0 1.5px var(--line-2); }
.pvb-pk { position: absolute; right: 5px; top: 9px; width: 10px; height: 10px; background: var(--signal); box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .5); }
.pvb-pk.gone { background: none; box-shadow: inset 0 0 0 1.5px var(--signal); }
.pvb-bar.hl > .pvb-s:not(.on) { opacity: .3; }
.pvb-rows { list-style: none; margin: 16px 0 0; padding: 0; }
.pvb-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--line); transition: color var(--t1); }
.pvb-row:last-child { border-bottom: 1px solid var(--line); }
.pvb-sw { width: 10px; height: 10px; align-self: start; margin-top: 6px; transition: opacity var(--t1); }
.pvb-row > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pvb-rn { font-size: 15px; }
.pvb-row > span .data { font-size: 12px; color: var(--muted); }
.pvb-row > b { font-weight: 400; }
.pvb-row sup { font-size: .75em; line-height: 0; }
.pvb-rows.hl > .pvb-row:not(.on) { color: var(--muted); }
.pvb-rows.hl > .pvb-row:not(.on) .pvb-sw { opacity: .3; }
.pvb-bundle { margin-top: 20px; }
.pvb-bx { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1.5px solid var(--ink); }
.pvb-bx > span:not(.pvb-slots) { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin-right: auto; }
.pvb-slots { display: flex; gap: 4px; flex: none; }
.pvb-slots i { width: 12px; height: 12px; box-shadow: inset 0 0 0 1.5px var(--line-2); transition: background var(--t2), box-shadow var(--t2); }
.pvb-slots i.on { background: var(--signal); box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .5); }
.pvb-ok { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 15px; }
.pvb-ok svg { flex: none; color: var(--tone); }
.pvb-fl { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.pvb-fly { position: absolute; left: 0; top: 0; width: 10px; height: 10px; background: var(--signal); box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .5); }
@media (max-width: 1000px) {
  .pvb > .pvb-fig, .pvb > .pvb-ctl { grid-column: auto; grid-row: auto; }
}

/* ---------- Verify ---------- */
.vf-use { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.vf-use .opt { width: 100%; }
.vf-tool details.vf-paste { margin: 0; }
.vf-paste textarea { display: block; width: 100%; margin: 12px 0; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 0; background: var(--white); color: var(--ink); font: 12px/1.5 var(--mono); resize: vertical; }
.vf-paste textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }
.vf-out { max-width: 680px; }   /* strand, verdict, card and forge row share one right edge */
.vf-ghost { display: block; width: 100%; height: 40px; }
.vf-verdict { margin-top: 24px; }
.vf-verdict:focus { outline: none; }
.vf-verdict .verdict:not(.ok):not(.bad) { box-shadow: inset 0 0 0 1px var(--line-2); color: var(--muted); }
.vf-forge { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px 24px; margin-top: 32px; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.vf-forge > div { flex: 1 1 260px; min-width: 0; }
.vf-forge .btn { flex: none; }
.vf-forge h4, .vf-forge p { margin: 0; }
.vf-forge h4 { margin-bottom: 4px; }
.vf-verdict details.sources ol .cmark { margin-right: 8px; }
.vf-verdict details.sources li > span { min-width: 0; overflow-wrap: anywhere; }

/* ---------- Strip layouts, sticky strip while the tool runs (wide screens, one row only) ---------- */
@container pv (min-width: 560px) and (max-width: 789.98px) {
  .readout.pv-strip, .readout.vf-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Phones: one row per step, label | value | meter and note, about 40px each; the top rule stays. */
@container pv (max-width: 559.98px) {
  .readout.pv-strip, .readout.vf-strip { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pv-strip > .rd-cell, .vf-strip > .rd-cell { display: grid; grid-template-columns: 92px minmax(0, 1fr) 84px; align-items: center; column-gap: 12px; padding: 9px 0 10px; }
  .pv-strip .rd-cell > dt, .vf-strip .rd-cell > dt { grid-column: 1; }
  .pv-strip .rd-cell .rd-v, .vf-strip .rd-cell .rd-v { grid-column: 2; margin: 0; white-space: normal; }
  .pv-strip .rd-cell .rd-bar, .vf-strip .rd-cell .rd-bar { grid-column: 3; flex-direction: column; align-items: stretch; gap: 4px; }
  .pv-strip .rd-bar .meter, .vf-strip .rd-bar .meter { flex: none; width: 100%; }
  .pv-strip .rd-note, .vf-strip .rd-note { text-align: right; overflow: hidden; text-overflow: ellipsis; }
  .pv-strip .rd-note.pv-long, .vf-strip .rd-note.pv-long { text-overflow: clip; }
  .pv-strip .rd-cell.pv-act .rd-bar { grid-column: 1 / -1; align-items: flex-start; margin-top: 4px; }
  .pv-strip .pv-open { min-height: 44px; }
  .pv-strip .pv-open::after { content: none; }
}
@media (min-width: 1001px) {
  @container pv (min-width: 790px) {
    .pv-strip.run, .vf-strip.run { position: sticky; top: 64px; z-index: 5; box-shadow: inset 0 -1px 0 var(--rule); }
    .pv-strip.run { background: var(--paper); }   /* v5: the Prove page is paper under its orange bar */
    .vf-strip.run { background: var(--c-verify); }
  }
}
@media (max-width: 760px) {
  .pv-modes { grid-template-columns: minmax(0, 1fr); }
  .pv-tool .drop, .vf-tool .drop { min-height: 140px; }
}