/* kit: the shared instruments built by assets/js/v5/kit.js (V3.dg diagrams, V3.locus gene drawings, V3.proofCard).
   v5 draws them in the films' grammar: ink strokes 1.25–2px, warm-grey fills with fine ink outlines, orange only for the
   proof (the one key element), labels in Figtree caps, data in JetBrains Mono, square corners, no shadows, core tokens.
   Core components used inside (.sheet, .readout, .rd-cell, .ph-cell, .meter, .tag, .key) keep their core styles; nothing
   here restyles them, and modules do not restyle these. Diagrams and gene drawings sit on white sheets (light tokens).
   Node kinds: data = personal genome data (warm grey, ink outline, like the films' molecules) · local = a step (white,
   ink outline) · engine = Jolt / a proof statement / proven (ink, the modules' --blue-900) · proof = the proof (orange,
   ink outline) · public = public or planned (white, dashed). */

/* ---------- .dg: the diagram vocabulary (plan 2.7). 1 viewBox unit = 1px at 1280×800; scales up to 1.15× ---------- */
.dg { display: block; width: 100%; height: auto; max-width: calc(var(--dg-w, 840) * 1.15px); overflow: visible; }
.dg text { font-family: var(--font); }
/* Labels: the films' small caps (the text is upper-cased by the builder), tracked; captions stay sentence case. */
.dg .dg-l, .dg .dg-k, .dg .dg-el, .dg .dg-tab text, .dg .dg-tag text, .dg .dg-ct { font-weight: 500; letter-spacing: .1em; }
.dg .dg-l { font-size: 11px; fill: var(--ink); }
.dg .dg-s { font-size: 12.5px; fill: var(--muted); }
.dg .dg-k { font-size: 11px; fill: var(--muted); }
.dg .dg-el { font-size: 10.5px; fill: var(--ink); stroke: var(--white); stroke-width: 4px; stroke-linejoin: round; paint-order: stroke; }

/* Nodes */
.dg .dg-b, .dg .dg-st { stroke-width: 1.5px; }
.dg .dg-st { fill: var(--white); stroke: var(--ink); }
.dg .dg-n.data .dg-b { fill: var(--g3); stroke: var(--ink); }
.dg .dg-n.data .dg-g { fill: var(--ink); }
.dg .dg-n.local .dg-b { fill: var(--white); stroke: var(--ink); }
.dg .dg-n.local .dg-g { fill: var(--ink); }
.dg .dg-n.engine .dg-b { fill: var(--blue-900); stroke: var(--blue-900); }
.dg .dg-n.engine .dg-g { fill: var(--paper); }
.dg .dg-n.proof .dg-b { fill: var(--signal); stroke: var(--ink); }
.dg .dg-n.proof .dg-g { fill: var(--ink); }
.dg .dg-n.public .dg-b, .dg .dg-n.public .dg-st { fill: var(--white); stroke: var(--dash); stroke-dasharray: 4 4; }
.dg .dg-n.public .dg-g { fill: var(--muted); }

/* Edges: square corners; heavier for proven and for the proof; dashed only for planned */
.dg .dg-ln { fill: none; stroke: var(--ink); stroke-width: 1.25px; stroke-linejoin: miter; }
.dg .dg-ah { fill: var(--ink); }
.dg .dg-e.proven .dg-ln { stroke: var(--blue-900); stroke-width: 2px; }
.dg .dg-e.proven .dg-ah { fill: var(--blue-900); }
.dg .dg-e.proof .dg-ln { stroke: var(--signal); stroke-width: 2px; }
.dg .dg-e.proof .dg-ah { fill: var(--signal); }
.dg .dg-e.planned .dg-ln { stroke: var(--dash); stroke-dasharray: 4 4; }
.dg .dg-e.planned .dg-ah { fill: var(--dash); }

/* Regions and their tabs: the device is the palest warm grey framed in ink, its tab an ink label with paper text */
.dg .dg-rb { stroke-width: 1.25px; }
.dg .dg-r.device .dg-rb { fill: var(--sel); stroke: var(--ink); }
.dg .dg-r.public .dg-rb { fill: none; stroke: var(--dash); stroke-dasharray: 4 4; }
.dg .dg-tab rect { fill: var(--ink); }
.dg .dg-tab text { font-size: 10.5px; fill: var(--paper); }
.dg .dg-r.public .dg-tab rect { fill: var(--white); stroke: var(--dash); stroke-width: 1px; }
.dg .dg-r.public .dg-tab text { fill: var(--ink); }

/* Wide cards (text pipelines) and their tags: a caps title, a Figtree body */
.dg .dg-cbx { fill: var(--white); stroke: var(--ink); stroke-width: 1.25px; }
.dg .dg-c.planned .dg-cbx { stroke: var(--dash); stroke-dasharray: 4 4; }
.dg .dg-cg { fill: var(--ink); }
.dg .dg-ct { font-size: 11px; fill: var(--ink); }
.dg .dg-cb { font-size: 12.5px; fill: var(--muted); }
.dg .dg-tag .bg { fill: var(--white); stroke: var(--line-2); stroke-width: 1px; }
.dg .dg-tag text { font-size: 10.5px; letter-spacing: .09em; fill: var(--ink); }

/* Packets: hidden until a move step carries them. Filled marks take the films' fine ink outline. */
.dg .dg-pk { opacity: 0; }
.dg .dg-pk.show { opacity: 1; }
.dg .pk-d { fill: var(--g3); stroke: var(--ink); stroke-width: 1px; }
.dg .pk-p, .dg .pk-o { fill: var(--signal); stroke: rgba(17, 17, 17, .5); stroke-width: 1px; }
.dg .pk-c { fill: var(--blue-500); }
.dg .pk-ol { fill: none; stroke: var(--ink); stroke-width: 1px; opacity: 0; }

/* ---------- .lc: the gene drawing (V3.locus, plan 5.3). Positions, alleles and HGVS are data: mono ---------- */
.lc { display: block; width: 100%; height: auto; overflow: visible; }
.lc text { font-family: var(--mono); font-size: 10.5px; fill: var(--muted); }
.lc .lc-pl { font-size: 11px; fill: var(--ink); }
.lc .lc-line { fill: none; stroke: var(--dash); stroke-width: 1px; }
.lc .lc-utr { fill: var(--blue-100); }
.lc .lc-tss { fill: var(--ink); }
.lc .lc-ex rect { fill: var(--blue-500); }
.lc .lc-ex.v rect { fill: var(--blue-900); }
.lc .lc-ex { transition: opacity var(--t3) var(--ease); }
.lc .lc-ex.dim { opacity: .4; }
.lc .lc-stem { fill: none; stroke: var(--signal); stroke-width: 1.25px; }
.lc .lc-sq { fill: var(--signal); stroke: rgba(17, 17, 17, .5); stroke-width: 1px; transform-box: fill-box; transform-origin: 50% 50%; transition: transform var(--t3) var(--ease); }
.lc .lc-pin.hov .lc-sq { transform: scale(1.5); }
.lc .lc-pin.off .lc-stem { stroke: var(--dash); }
.lc .lc-pin.off .lc-sq { fill: var(--white); stroke: var(--dash); stroke-width: 1.5px; }
.lc .lc-pin.off .lc-pl { fill: var(--muted); }
.lc .lc-ol { fill: none; stroke: var(--ink); stroke-width: 1.25px; opacity: 0; transition: opacity var(--t3) var(--ease); }
.lc .lc-ol.on { opacity: 1; }
.lc .lc-m { opacity: 0; transition: opacity var(--t3) var(--ease); }
.lc .lc-m.on { opacity: 1; }
.lc .lc-arc { fill: none; stroke: var(--signal); stroke-width: 1.5px; }
.lc .lc-arck { fill: none; stroke: var(--lc-bg, var(--white)); stroke-width: 6px; }   /* breaks the stem the splice arc crosses */
.lc .lc-bar { fill: var(--ink); }
.lc .lc-grey { fill: var(--line-2); }
.lc .lc-up { fill: var(--blue-900); }
.lc .lc-mc { fill: var(--signal); }

/* ---------- .proof-card: the one proof card (V3.proofCard, plan 2.5) ---------- */
.proof-card { max-width: 680px; }
.proof-card .pc-head { align-items: center; }
.proof-card .pc-t { display: flex; align-items: center; gap: 12px; min-width: 0; }
.proof-card .pc-t h4 { margin: 0; }
.proof-card .pc-seal { flex: none; color: var(--tone); }
.proof-card .pc-time { color: var(--muted); white-space: nowrap; }
.proof-card .pc-body { margin-bottom: 24px; }
.proof-card .rd-cell { position: relative; }
/* The drawn rule sits exactly over the cell's 1px top hairline (core .rd-cell) while the card builds. */
.proof-card .pc-rule { position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: currentColor; transform-origin: 0 50%; }
.proof-card .rd-cell.hot > .pc-rule { background: var(--signal); }
.proof-card.pc-run .rd-cell { border-top-color: transparent; }
/* Phones: the three phenotype cells stack; the footer leads with Genotypes across the card, then Root and Size side by side. */
@media (max-width: 760px) {
  .proof-card .pc-body { grid-template-columns: minmax(0, 1fr); }
  .proof-card .pc-foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof-card .pc-foot .pc-gt { order: -1; grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .lc .lc-ex, .lc .lc-sq, .lc .lc-ol, .lc .lc-m { transition: none; }
}