/* howlab: "What each party sees" on the How page. Layout and data marks only: core components (.ftabs .opts .readout .ph-cell
   .meter .switch .btn .key .cmark .syn-chip .fnote) and the V3.genomeGrid palette keep their own look. Every selector is scoped to .vv.
   v5: records are mono code lines in ink, hashes a step lighter (--dark), panel sites orange; the verdict and the leaf note
   speak in the films' italic caption voice. */

/* ---------- Sheet: recipient tabs on top, then the panel (body + lists) ---------- */
.vv .vv-tabs.ftabs { position: sticky; top: 64px; z-index: 4; }
.vv .vv-tabs.opts { padding: 16px 16px 0; }
.vv .vv-panel { container: vvp / inline-size; }
.vv .vv-body { padding: 32px; }
.vv .vv-cap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 24px; }

/* ---------- Readout (genotypes held, evidence) and the three results ---------- */
.vv .vv-read { --n: 2; --steps: 10; }
.vv #vv-c-e { --steps: 2; }
.vv .vv-ink { --meter-on: var(--ink); }
.vv .vv-res { --n: 3; margin-top: 24px; }

/* ---------- Record table ---------- */
.vv .vv-th { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin: 48px 0 12px; }
.vv .vv-scroll { overflow-x: auto; }
.vv .vv-tbl { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12px; line-height: 1.5; }
.vv .vv-tbl th { text-align: left; padding: 0 10px 8px 0; border-bottom: 1.5px solid var(--ink); vertical-align: bottom; white-space: nowrap; }
.vv .vv-tbl td { padding: 6px 10px 6px 0; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: middle; transition: background-color var(--t2) var(--ease); }
.vv .vv-tbl th:first-child, .vv .vv-tbl td:first-child, .vv .vv-gap td { padding-left: 10px; }
.vv .vv-tbl th.c-r span { display: inline-block; }
.vv .vv-tbl th.c-r span:first-child { width: calc(13.5ch * 12 / 11); }
.vv .vv-tbl th.c-h { min-width: 11ch; }
.vv .vv-tbl tbody tr[data-i] { cursor: pointer; }
.vv .vv-tbl tbody tr[data-i]:hover td { background-color: var(--soft); }
.vv .vv-tbl tbody tr[data-i]:focus { outline: none; }
.vv .vv-tbl tbody tr[data-i]:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.vv .vv-tbl tbody tr.on td { background-color: var(--sel); }
/* A panel site carries an orange bar on its first cell. */
.vv tr.is-panel > td:first-child { background-image: linear-gradient(var(--signal), var(--signal)); background-size: 3px 100%; background-repeat: no-repeat; }
.vv[data-v="link"] tr.is-sib .vv-c[data-k="h"] { background: var(--g1); }
.vv .vv-c { display: inline-block; overflow: hidden; vertical-align: bottom; transition: color var(--t2) var(--ease), background-color var(--t2) var(--ease); }
.vv .vv-c[data-k="i"] { width: 4ch; }
.vv .vv-c[data-k="rs"] { width: 12ch; margin-right: 1.5ch; }
.vv .vv-c[data-k="pos"] { width: 12ch; }
.vv .vv-c[data-k="gt"] { width: 3ch; }
.vv .vv-c[data-k="h"] { width: 11ch; }
/* Cell states: readable, public panel position, salted hash, hidden, hidden but used inside the proof, no commitment. */
.vv .s-p { color: var(--ink); }
.vv .s-u { color: var(--muted); }
.vv .s-h { color: var(--dark); }
.vv .s-m, .vv .s-n { color: var(--dash); }
.vv .s-x { color: var(--signal-ink); background: var(--signal-tint); }
.vv .vv-site { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font); font-weight: 500; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.vv .vv-site i { width: 7px; height: 7px; background: var(--signal); box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .5); flex: none; }
.vv .vv-site-in { display: none; margin-top: 2px; }
.vv .vv-gap td { padding: 4px 10px; font-size: 11px; letter-spacing: .04em; color: var(--muted); background: var(--soft); }
.vv.vv-nohash .c-h { display: none; }

/* ---------- Whole-file map (canvas) + leaf inspector ---------- */
.vv .vv-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 48px; align-items: start; }
.vv .vv-file { min-width: 0; }
.vv .vv-fh { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 12px; }
.vv .vv-map { padding: 3px; cursor: crosshair; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.vv .vv-cv { position: relative; }
.vv .vv-cv canvas { display: block; }
.vv .vv-selbox { position: absolute; left: 0; top: 0; width: 0; height: 0; border: 2px solid var(--ink); pointer-events: none; }
.vv .vv-key { margin-top: 12px; }
/* Panel-site stepper: only on touch screens, where one 6px square is too small to tap. */
.vv .vv-step { display: none; margin-top: 16px; }
@media (pointer: coarse) { .vv .vv-step { display: flex; } }
.vv i.sw { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; flex: none; background: var(--mk); }
.vv i.sw + i.sw { margin-left: -4px; }
.vv i.sw.ring { background: none; box-shadow: inset 0 0 0 1.5px var(--mk); }
.vv .vv-leaf { padding: 20px; background: var(--soft); min-width: 0; }
.vv .vv-lh { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 14px; }
.vv .vv-st { display: inline-flex; align-items: center; font-family: var(--font); font-weight: 500; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }   /* a state label, not data */
.vv .vv-leaf dl { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 6px 12px; margin: 0; }
.vv .vv-leaf dt { padding-top: 2px; }
.vv .vv-leaf dd { margin: 0; overflow-wrap: anywhere; }
.vv .vv-hx { color: var(--dark); }
.vv .vv-mk { color: var(--dash); }
.vv .vv-leaf .small { margin: 16px 0 0; font-family: var(--display); font-style: italic; font-size: 17px; line-height: 1.35; letter-spacing: -0.005em; color: var(--ink); }   /* the films' caption voice */

/* ---------- Commitment root ---------- */
.vv .vv-rootbox { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 24px; margin-top: 48px; padding-top: 16px; border-top: 1.5px solid var(--ink); }
.vv .vv-root { max-width: 34ch; margin: 6px 0 0; overflow-wrap: anywhere; color: var(--ink); transition: color var(--t3) var(--ease); }
.vv .vv-root.off { color: var(--dash); }
.vv .vv-rootbox .fnote { margin-top: 8px; }
.vv .vv-rootbox .btn { flex: none; }

/* ---------- What they hold / what is taken on trust ---------- */
.vv .vv-foot { display: grid; gap: 24px; padding: 32px; border-top: 1px solid var(--line); }
.vv .vv-verdict { margin: 0; max-width: 24em; font-style: italic; }   /* a one-line caption, as in the films */
.vv .vv-l { list-style: none; margin: 10px 0 0; padding: 0; }
.vv .vv-l li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.42; }
.vv .vv-l .cmark { margin-top: 6px; }

/* ---------- Panel width (container queries) ---------- */
@container vvp (min-width: 760px) {
  .vv .vv-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .vv .vv-foot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 32px; }
  .vv .vv-verdict { grid-column: 1 / -1; }
}
@container vvp (max-width: 559px) {
  .vv .c-i { display: none; }
  .vv .vv-tbl th.c-r, .vv .vv-tbl td.c-r { padding-left: 10px; }
  .vv tr.is-panel > td.c-r { background-image: linear-gradient(var(--signal), var(--signal)); background-size: 3px 100%; background-repeat: no-repeat; }
}
@container vvp (max-width: 499px) {
  .vv .c-p { display: none; }
  .vv .vv-site-in { display: flex; }
  .vv .vv-read { --n: 1; }
  .vv .vv-tbl th.c-r span, .vv .vv-c[data-k="rs"], .vv .vv-c[data-k="pos"] { display: block; }
  .vv .vv-tbl th.c-r { white-space: normal; }
  .vv .vv-rootbox { flex-direction: column; align-items: flex-start; }
}

/* ---------- Page breakpoints ---------- */
@media (max-width: 1000px) {
  .vv .vv-tabs.ftabs { top: 56px; }
  .vv .vv-body, .vv .vv-foot { padding: 24px; }
}
@media (max-width: 760px) {
  .vv .vv-body, .vv .vv-foot { padding: 16px; }
  .vv .vv-th, .vv .vv-grid, .vv .vv-rootbox { margin-top: 40px; }
  .vv .vv-leaf { padding: 16px; }
  .vv .vv-leaf dl { grid-template-columns: 1fr; gap: 0; }
  .vv .vv-leaf dt { padding-top: 8px; }
}