/* Cover: "The claim, replayed". A sequence diagram with four lanes (your machine, the Gate, the record, a licensed
   carrier that is planned). Scrolling moves a replay head along time; each message travels between lanes as the head
   passes it. cover.js builds the SVG and sets the classes: .is-live (JS on), .rp-h (lanes across, wide screens),
   .rp-v (lanes down, phones and tablets), .rp-still (reduced motion: the whole sequence drawn, nothing pinned).
   Colour keeps its meaning: ink for the Gate (building), green for the record (draft format), gold for the carrier
   (planned), vermilion only for what went wrong. */
.replay{position:relative;padding-top:clamp(70px,10vh,130px);padding-bottom:clamp(40px,6vh,90px)}
.rp-head{margin-bottom:clamp(26px,4vh,44px)}
.rp-head .lead{margin-top:20px}

.rp-board{width:min(var(--wrap),100% - 2*var(--gut));margin-inline:auto}
.rp-fig{margin:0}
.rp-dia{position:relative;width:100%}
.rp-dia svg{display:block;width:100%;height:100%;overflow:visible}
.rp-cap{margin-top:10px;font-family:var(--mono);font-size:11.5px;line-height:1.45;color:var(--text-3)}

.rp-steps{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:22px}
.rp-step{position:relative;padding-top:14px;border-top:2px solid var(--line)}
.rp-n{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--text-3);margin-bottom:8px}
.rp-step .h3{font-size:clamp(19px,1.55vw,24px);margin-bottom:8px}
.rp-step p:last-child{font-size:15.5px;line-height:1.5;color:var(--text-2);max-width:30em}
@media (min-width:900px){.rp-steps{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---- live: the board is a card, pinned while the replay runs ---- */
.replay.is-live .rp-board{background:var(--card);border-radius:22px;padding:clamp(14px,2vw,28px);
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(15,23,34,.08),0 40px 80px -44px rgba(15,23,34,.4)}
.replay.is-live:not(.rp-still) .rp-track{height:calc(100svh - var(--nav) + 300svh)}
.replay.is-live:not(.rp-still) .rp-pin{position:sticky;top:var(--nav);height:calc(100svh - var(--nav));display:flex;align-items:center}

/* the step text follows the head: the step in play in ink with an ink bar, the rest quieter (still AA) */
.replay.is-live .rp-step{transition:border-color .4s var(--calm)}
.replay.is-live .rp-step .h3,.replay.is-live .rp-step p:last-child{transition:color .4s var(--calm)}
.replay.is-live:not(.rp-still) .rp-step:not(.on) .h3,.replay.is-live:not(.rp-still) .rp-step:not(.on) p:last-child{color:var(--text-3)}
.replay.is-live .rp-step.on{border-top-color:var(--ink)}
.replay.is-live .rp-step.on .rp-n{color:var(--ink)}
.replay.is-live .rp-step.on.k1{border-top-color:var(--hold)}
.replay.is-live .rp-step.on.k1 .rp-n{color:var(--hold-text)}
.replay.is-live .rp-step.on.k3{border-top-color:var(--gold)}

/* lanes across: the step text sits under its own column of the diagram */
.rp-h .rp-dia{height:clamp(290px,calc(100svh - var(--nav) - 360px),430px)}
.rp-h .rp-steps{grid-template-columns:var(--rp-lab,180px) repeat(4,minmax(0,1fr));gap:0 18px;margin-top:16px}
.rp-h .rp-step:nth-child(1){grid-column:2}
.rp-h .rp-board{position:relative}

/* lanes down: one step at a time under the diagram (all four stay in the page for screen readers) */
.rp-v .rp-dia{height:clamp(300px,calc(100svh - var(--nav) - 300px),560px)}
.rp-v:not(.rp-still) .rp-steps{grid-template-columns:minmax(0,1fr);margin-top:14px}
.rp-v:not(.rp-still) .rp-step{grid-area:1/1;opacity:0;transform:translateY(10px);transition:opacity .35s var(--calm),transform .45s var(--ease),border-color .4s var(--calm)}
.rp-v:not(.rp-still) .rp-step.on{opacity:1;transform:none}
.rp-v .rp-step .h3{font-size:20px}
.rp-v .rp-step p:last-child{font-size:15px}

/* reduced motion: the whole replay drawn complete, nothing pinned, every step in full */
.rp-v.rp-still .rp-dia{height:min(560px,140vw)}
.rp-still .rp-step{border-top-color:var(--ink)}
.rp-still .rp-step:nth-child(2){border-top-color:var(--hold)}
.rp-still .rp-step:nth-child(4){border-top-color:var(--gold)}
.rp-still .rp-step .rp-n{color:var(--ink)}

@media (max-width:760px){
  .rp-board{width:calc(100% - 20px)}
  .replay.is-live .rp-board{border-radius:16px;padding:10px 10px 14px}
  .rp-step{padding-top:12px}
}
@media (max-height:700px) and (max-width:760px){
  .rp-v:not(.rp-still) .rp-dia{height:clamp(300px,calc(100svh - var(--nav) - 235px),560px)}
  .rp-v .rp-step .h3{font-size:18px;margin-bottom:6px}
  .rp-v .rp-step p:last-child{font-size:14px}
  .rp-v .rp-n{margin-bottom:4px}
}

/* ---- the diagram (SVG, built by cover.js) ---- */
.rp-dia text{font-family:var(--sans);fill:var(--ink)}
.rp-dia .t-lane{font-weight:600;font-size:14px;letter-spacing:-.01em}
.rp-dia .t-col{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;fill:var(--text-3)}
.rp-dia .t-colw{font-weight:600;font-size:13px;fill:var(--text-2)}
.rp-dia .t-chip{font-weight:600;font-size:12px}
.rp-dia .t-id{font-family:var(--mono);font-size:11px}
.rp-dia .t-tick{font-family:var(--mono);font-size:11px}
.rp-dia .t-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;fill:#5A4214}
.rp-dia .t-wrong{font-weight:600;font-size:12.5px;fill:var(--hold-text)}
.rp-dia .sep{stroke:rgba(15,23,34,.08);stroke-width:1}
.rp-dia .band{fill:rgba(15,23,34,.035)}
.rp-dia .ln{fill:none;stroke-linecap:round}
.rp-dia .ln-machine{stroke:rgba(15,23,34,.32);stroke-width:1.5}
.rp-dia .ln-gate{stroke:var(--ink);stroke-width:2.5}
.rp-dia .ln-record{stroke:var(--ok);stroke-width:2.5}
.rp-dia .ln-run{stroke:var(--ink);stroke-width:2.5}
.rp-dia .act{fill:var(--card);stroke:var(--ink);stroke-width:1.5}
.rp-dia .tick-bg{fill:var(--card)}
.rp-dia .ln-carrier{stroke:var(--gold);stroke-width:2;stroke-dasharray:7 6}
.rp-dia .tag-plan{fill:var(--gold-tint)}
.rp-dia .msg{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round}
.rp-dia .msg-ok{stroke:var(--ok)}
.rp-dia .msg-plan{stroke:#9A6E1C;stroke-dasharray:4 4}
.rp-dia .head{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rp-dia .head-ok{stroke:var(--ok)}
.rp-dia .head-plan{stroke:#9A6E1C}
.rp-dia .pk{fill:var(--ink)}
.rp-dia .pk-ok{fill:var(--ok)}
.rp-dia .pk-plan{fill:#9A6E1C}
.rp-dia .chip rect{fill:var(--card);stroke:var(--ink);stroke-width:1.2}
.rp-dia .chip-ok rect{fill:var(--ok-tint);stroke:var(--ok)}
.rp-dia .chip-ok text{fill:var(--ok)}
.rp-dia .chip-ok .t-id{fill:#145F3E}
.rp-dia .chip-plan rect{fill:var(--gold-tint);stroke:#9A6E1C}
.rp-dia .chip-plan text{fill:#5A4214}
.rp-dia .chip-ink rect{fill:var(--ink);stroke:var(--ink)}
.rp-dia .chip-ink text{fill:var(--cream)}
.rp-dia .dot{fill:var(--ink)}
.rp-dia .node rect{fill:var(--ink)}
.rp-dia .node path{fill:none;stroke:var(--cream);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rp-dia .wrong circle{fill:var(--hold)}
.rp-dia .wrong path{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round}
.rp-dia .ring{fill:none;stroke:var(--hold);stroke-width:2}
.rp-dia .look{fill:none;stroke:var(--ok);stroke-width:5;stroke-linecap:round;stroke-opacity:.35}
.rp-dia .found{fill:none;stroke:var(--ok);stroke-width:2}
.rp-dia .tick path{fill:none;stroke:var(--ok);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rp-dia .head-line{stroke:var(--ink);stroke-width:1;stroke-opacity:.55}
.rp-dia .head-cap{fill:var(--ink);fill-opacity:.7}

/* v13 (31 Oct 2026): no cards and no drop shadows; the work stands on the canvas, divided by hairlines */
.replay.is-live .rp-board{background:none;box-shadow:none;border-radius:0;padding-inline:0;border-top:1px solid var(--line)}