/* about: tiers, references, roadmap figure (status bands, line of stops, one square per published file; "By gene" moves
   the squares into gene rows) + stepped card, limits ledger, contact and footer. Scoped to .ab and #about.
   Type, buttons, options, tags, claim marks, readouts, notes and sources are core components; this file only lays them out.
   v5, the films' figure grammar: one warm-grey atom per file with a fine ink outline (--ab-ol), the five kinds of file told apart
   by tone (ink, an ink ring, three warm greys), ink hairlines for the line of stops, a calmer build. */

.ab { container: ab / inline-size; --ab-ol: rgba(17, 17, 17, .5); }

/* ---------- Tiers (three sheets) and references ---------- */
.ab-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ab-tier { display: flex; flex-direction: column; gap: 12px; }
.ab-t-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.ab-t-head .h4 { margin: 0; }
.ab-tier p { margin: 0; font-size: 15px; line-height: 1.45; }
.ab-refs { --n: 2; margin-top: var(--s7); }
.ab-refs .rd-cell > dd { margin-top: 10px; }
.ab-ul { list-style: none; margin: 0; padding: 0; }
.ab-ul li { margin: 0; font-size: 15px; line-height: 1.5; }
.ab-ul li + li { margin-top: 6px; }
.ab .lead a:hover { color: var(--tone); }

/* ---------- Roadmap figure ----------
   Built once when it is 30% visible (after the repository files are read): each stop's stretch of line draws in --tick,
   its marker builds in 4 steps as the line reaches it, its label rises in, then its files print one square at a time
   (--q apart, at most ~640ms a column) while the count runs. Solid line up to the stop where the build is now, dashed after. */
.ab-tl { --tick: 230ms; --lh: 58px; --mr: 34px; position: relative; }
.ab-bands { display: flex; margin: 0 0 12px; }
.ab-band { position: relative; min-width: 0; padding: 10px 12px 0 0; opacity: 0; transition: opacity var(--t3) var(--ease) calc(var(--i) * var(--tick)); }
.ab-band b { font-weight: 400; }
.ab-band::before { content: ""; position: absolute; left: 0; right: 12px; top: 0; height: 1.5px; background: var(--ink); transform: scaleX(0); transform-origin: left;
  transition: transform calc(var(--k, 1) * var(--tick)) linear calc(var(--i) * var(--tick)); }
.ab-band:last-child::before { right: 0; }
.ab-band::after { content: ""; position: absolute; left: 0; top: -4px; width: 1.5px; height: 9px; background: var(--ink); }
.ab-band[data-s="live"]::before, .ab-band[data-s="live"]::after { content: none; }   /* built stops: no status band, only the line */
.ab-band[data-s="planned"]::before { background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 6px); }
.ab-tl.in .ab-band { opacity: 1; }
.ab-tl.in .ab-band::before { transform: none; }

.ab-stops { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 7), minmax(0, 1fr)); }
.ab-st { position: relative; min-width: 0; padding-right: 12px; }
.ab-st::after { content: ""; position: absolute; left: 10px; top: calc(var(--lh) + var(--mr) / 2 - .75px); width: 100%; height: 1.5px; pointer-events: none;
  background: repeating-linear-gradient(90deg, var(--ink) 0 4px, transparent 4px 8px);
  transform: scaleX(0); transform-origin: left; transition: transform var(--tick) linear calc(var(--i) * var(--tick)); }
.ab-st:last-child::after { width: calc(100% - 10px); }
.ab-st.ab-solid::after { background: var(--ink); }
.ab-tl.in .ab-st::after { transform: none; }

.ab-stop { display: block; position: relative; width: 100%; margin: 0; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ab-lab { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 4px; height: var(--lh);
  opacity: 0; transform: translateY(8px); transition: opacity var(--t3) var(--ease), transform var(--t3) var(--ease); transition-delay: calc(var(--i) * var(--tick) + 120ms); }
.ab-lab b { font-weight: 500; font-size: 15px; line-height: 1.2; text-decoration: underline transparent; text-decoration-thickness: 2px; text-underline-offset: 4px;
  transition: color var(--t1), text-decoration-color var(--t1); }
.ab-lab .tag { display: none; }   /* wide: the bands above the line name the status */
.ab-tl.in .ab-lab { opacity: 1; transform: none; }
.ab-stop:hover .ab-lab b { text-decoration-color: var(--line-2); }
.ab-st.is-sel .ab-lab b { color: var(--tone); text-decoration-color: currentColor; }
.ab-stop:focus-visible { outline: none; }
.ab-stop:focus-visible .ab-lab b { outline: 2px solid var(--focus); outline-offset: 4px; }

.ab-mkw { display: block; position: relative; z-index: 1; width: 21px; height: 21px; margin: calc((var(--mr) - 21px) / 2) 0; background: var(--white); color: var(--ink); }
.ab-mkw svg { display: block; }
/* Where the build is now: a static ink hairline ring. */
.ab-here .ab-mkw::after { content: ""; position: absolute; inset: -6px; border: 1.5px solid var(--ink); pointer-events: none; }
.ab-tl:not(.in) .ab-mkw { clip-path: inset(0 100% 0 0); }
.ab-tl.in .ab-mkw { animation: v3-fill 360ms var(--ease) both; animation-delay: calc(var(--i) * var(--tick)); }

.ab-cnt { margin: 2px 0 10px; opacity: 0; transition: opacity var(--t3) var(--ease) calc(var(--i) * var(--tick) + 200ms); }
.ab-tl.in .ab-cnt { opacity: 1; }
.ab-files { display: flex; flex-wrap: wrap; gap: 3px; --q: 14ms; }
/* One file, one atom: its kind's tone (--c, set by about.js) inside the films' fine ink outline (or the kind's own ring, --o). */
.ab-sq { flex: none; display: block; width: 12px; height: 12px; background: var(--c, var(--ink)); box-shadow: var(--o, inset 0 0 0 1px var(--ab-ol)); opacity: 0; transform: translateY(-6px);
  transition: opacity 160ms var(--ease), transform var(--t3) var(--ease); transition-delay: calc(var(--i) * var(--tick) + 260ms + var(--j, 0) * var(--q)); }
.ab-sq.none { background: none; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.ab-sq.on { outline: 1.5px solid var(--ink); outline-offset: 1px; }
.ab-tl.in .ab-sq { opacity: 1; transform: none; }
.ab-reset *, .ab-reset *::before, .ab-reset *::after { transition: none !important; animation: none !important; }

/* View switch in the sheet head; the head's end row may wrap on phones */
.ab-fig .sheet-head .end { flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; }

/* "By gene": the squares leave the stops for one row per gene (moved by about.js, FLIP); the stops keep their counts */
.ab-byg .ab-files, .ab-byg .ab-knone { display: none; }
.ab-byg .ab-cnt { margin-bottom: 0; }
.ab-genes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; margin-top: 28px; }
.ab-genes[hidden] { display: none; }
.ab-gg { min-width: 0; }
.ab-gh { padding: 8px 0 6px; border-top: 1.5px solid var(--ink); }
.ab-gr { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; min-height: 36px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.ab-gn { min-width: 0; overflow-wrap: anywhere; }
.ab-gq { display: flex; flex-wrap: wrap; gap: 3px; min-width: 0; }
.ab-gm { white-space: nowrap; }

/* Caption: the file under the pointer */
.ab-cap { max-width: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; min-height: 22px; margin: 24px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.ab-cap .data { min-width: 0; overflow-wrap: anywhere; }
.ab-cap-w { font-size: 14px; color: var(--muted); }
.ab-fig .key { margin-top: 14px; }

/* ---------- Roadmap figure, narrow: a vertical line; the card opens inside the selected stop ---------- */
.ab-vert .ab-bands, .ab-vert .ab-host { display: none; }
.ab-vert .ab-stops { display: block; }
.ab-vert .ab-st { padding: 0 0 24px 35px; }
.ab-vert .ab-st:last-child { padding-bottom: 0; }
.ab-vert .ab-st::after { left: 9.75px; top: 10.5px; width: 1.5px; height: 100%; transform: scaleY(0); transform-origin: top;
  background: repeating-linear-gradient(180deg, var(--ink) 0 4px, transparent 4px 8px); }
.ab-vert .ab-st.ab-solid::after { background: var(--ink); }
.ab-vert .ab-st:last-child::after { display: none; }
.ab-vert .ab-tl.in .ab-st::after { transform: none; }
.ab-vert .ab-stop { position: static; }
.ab-vert .ab-mkw { position: absolute; left: 0; top: 0; margin: 0; }
.ab-vert .ab-lab { height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ab-vert .ab-lab .tag { display: inline-flex; }
.ab-vert .ab-lab b { order: 3; flex-basis: 100%; font-size: 17px; }
.ab-vert .ab-cnt { margin: 8px 0 8px; }
.ab-vert .ab-cap { margin: 12px 0 0; padding-top: 10px; }
.ab-vert .ab-card { margin: 16px 0 4px; }
/* Phones: the gene rows open right under the view switch, above the line, so the squares land in sight */
.ab-vert .ab-tl { display: flex; flex-direction: column; }
.ab-vert .ab-genes { order: -1; grid-template-columns: minmax(0, 1fr); gap: 24px; margin: 0 0 32px; }
.ab-vert .ab-gr { grid-template-columns: 96px minmax(0, 1fr) auto; }
/* Inside a stop the label already names it: the card keeps its title for screen readers only. */
.ab-vert .ab-c-meta .tag, .ab-vert .ab-c-w { display: none; }
.ab-vert .ab-c-main h3 { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Roadmap: the card (Back · n / N · Next) ---------- */
.ab-host { margin-top: 16px; }
.ab-card { container: abc / inline-size; }
.ab-c-body { display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(220px, 280px); }
.ab-c-art { padding: 24px; border-right: 1px solid var(--line); }
.ab-glyph { display: grid; place-items: center; width: 72px; height: 72px; background: var(--paper); color: var(--tone); }
.ab-c-main { padding: 24px; min-width: 0; }
.ab-c-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 12px; }
.ab-c-main .h3 { margin: 0 0 8px; }
.ab-c-b { margin: 0 0 16px; max-width: 38em; }
.ab-c-f { min-width: 0; padding: 24px; background: var(--soft); border-left: 1px solid var(--line); }
.ab-c-f > .k { margin: 0 0 12px; }
.ab-c-f > .small { margin: 0; }
.ab-cells { --n: 1; gap: 16px; }
.ab-m { flex: 1; min-width: 0; display: flex; }
.ab-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ab-items li { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.35; }
.ab-c-foot { padding: 12px 24px; border-top: 1px solid var(--line); }
.ab-c-foot .n { white-space: nowrap; }
@container abc (max-width: 760px) {
  .ab-c-body { grid-template-columns: 104px minmax(0, 1fr); }
  .ab-c-art { padding: 24px 16px; }
  .ab-c-f { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); }
  .ab-cells { --n: 3; }
  .ab-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px 20px; }
}
@container abc (max-width: 520px) {
  .ab-c-body { grid-template-columns: minmax(0, 1fr); }
  .ab-c-art { display: none; }
  .ab-c-main, .ab-c-f { padding: 16px; }
  .ab-cells { --n: 1; }
  .ab-c-foot { padding: 12px 16px; gap: 8px; }
  .ab-c-foot .btn { padding: 0 14px; }
}

/* ---------- Limits: what a proof covers ---------- */
.ab-lg { --abk: 150px; }
.ab-lg-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px 24px; flex-wrap: wrap; padding: 16px 24px; background: var(--soft); border-bottom: 1px solid var(--line); }
.ab-lg-head, .ab-row { display: grid; grid-template-columns: var(--abk) minmax(0, 1fr) minmax(0, 1.25fr); }
/* The head spans the rows' own grid (no inset of its own), so its column rule meets the rows' rule. */
.ab-lg-head { border-bottom: 1.5px solid var(--ink); }
.ab-lg-head > span { display: flex; align-items: center; gap: 8px; padding: 16px 24px 12px 0; }
.ab-lg-head > span:nth-child(2) { padding-left: 24px; }
.ab-lg-head .ab-lg-hn { padding-left: 24px; border-left: 1px solid var(--line); }
.ab-lg-hn .cmark + .cmark { margin-left: -4px; }
.ab-rows { list-style: none; margin: 0; padding: 0; }
.ab-row { border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(8px);
  transition: opacity var(--t3) var(--ease), transform var(--t3) var(--ease); transition-delay: calc(min(var(--i), 7) * 60ms + 160ms); }
.ab-row:last-child { border-bottom: 0; }
.ab-lg.in .ab-row { opacity: 1; transform: none; }
.ab-k { padding: 20px 12px 20px 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.ab-k .ab-kt { color: var(--ink); }
.ab-k .tag { margin-top: 6px; }
.ab-p, .ab-n { padding: 20px 24px; display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 4px 12px; align-items: start; }
.ab-n { border-left: 1px solid var(--line); }
.ab-p > .cmark, .ab-n > .cmark { margin-top: 6px; }
.ab-p p, .ab-n p:not(.k) { margin: 0; font-size: 15px; line-height: 1.5; }
.ab-n p.ab-kind { margin: 0 0 4px; }
.ab-n .ab-kind + p { font-weight: 500; }
.ab-n p.ab-act { margin-top: 12px; }
.ab-lg.no-act .ab-act { display: none; }
.ab-row.is-na p, .ab-row.is-na li { color: var(--muted); font-weight: 400; }
.cmark.ab-na { background: none; box-shadow: inset 0 0 0 1.5px var(--line-2); }        /* does not apply / never received: hollow, like the hero's "nothing received" */
.cmark.proven.ab-tbd { background: none; box-shadow: inset 0 0 0 1.5px var(--tone); }  /* would be proven once the statement is built */
.ab-tally { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px 24px; border-top: 1.5px solid var(--ink); background: var(--soft); }
.ab-recv { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ab-recv .tag { --mk: var(--ink); }
.ab-recv .tag.hot { --mk: var(--signal); }
.ab-recv .tag.off { color: var(--muted); text-decoration: line-through; }
.ab-recv .tag.off::before { background: none; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.ab-tally .ab-never { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.ab-tnote { margin: 0; font-family: var(--display); font-style: italic; font-size: 17px; line-height: 1.38; letter-spacing: -0.003em; }   /* the ledger's one-line caption */

@container ab (max-width: 720px) {
  .ab-lg-head { display: none; }
  .ab-row { grid-template-columns: minmax(0, 1fr); }
  .ab-k { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 16px 16px 0; }
  .ab-k .tag { margin-top: 0; }
  .ab-p { padding: 12px 16px 16px; }
  .ab-n { border-left: 0; border-top: 1px solid var(--line); margin: 0 16px; padding: 14px 0 18px; }
  .ab .ab-cl:not(.ab-cl-n) { position: static !important; width: auto; height: auto; margin: 0 0 4px; overflow: visible; clip: auto; white-space: normal; grid-column: 1 / -1; }
  .ab-lg-bar, .ab-tally { padding: 16px; }
  .ab-tally .ab-never { margin-left: 0; }
}
@container ab (max-width: 420px) {
  .ab-lg .ab-modes { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
}
.ab .ab-cl { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Contact and footer ---------- */
#about .foot { display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; max-width: none; margin-top: var(--block); padding-top: 24px; padding-bottom: 24px;
  border-top: 1px solid var(--rule); font-size: 14px; line-height: 1.4; color: var(--muted); }
#about .foot img { vertical-align: -5px; margin-right: 6px; }
/* the wordmark's baseline is 76.3 % down its box, so this puts it on the text baseline */
#about .foot .ab-word { height: 18px; width: auto; vertical-align: -4.3px; margin-right: 0; }

/* ---------- Phones ---------- */
@media (max-width: 760px) {
  .ab-tiers { grid-template-columns: minmax(0, 1fr); }
  .ab-refs { --n: 1; }
}

/* ---------- Reduced motion: everything in its final state (core switches animations and transitions off) ---------- */
@media (prefers-reduced-motion: reduce) {
  .ab-band, .ab-lab, .ab-cnt, .ab-sq, .ab-row { opacity: 1 !important; transform: none !important; }
  .ab-band::before, .ab-st::after { transform: none !important; }
  .ab-mkw { clip-path: none !important; }
}