/* closing: 06 who it is for (a white band + measured numbers on paper), 07 what is published, contact, footer. Scoped to .cl.
   Shared components (.band-blue .stats/.stat .sheet .act .btn .k .small .tag .cmark .fnote .h3 .h4) come from core and keep core's look;
   this file only lays them out. v5: the films' world, bright: full-bleed fields are white or paper, lines are ink hairlines,
   and nothing glows or shines. */

.cl .wrap { container: cl / inline-size; }

/* ---------- 06 · Who it is for: a full-bleed white field with ink type (core .band-blue), no grid ---------- */
.cl-band { background-image: none; }
.cl-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
/* Bordered, no fill. The card keeps the reveal (.rv) and adds an instant-start border change on hover. */
.cl-card { container-type: inline-size; position: relative; display: flex; flex-direction: column; min-width: 0; padding: 24px; border: 1px solid var(--line);
  transition: opacity var(--t4) var(--ease) var(--d, 160ms), transform var(--t4) var(--ease) var(--d, 160ms), border-color var(--t1) ease 0ms; }
.cl-card:nth-child(2) { --d: 220ms; }
.cl-card:nth-child(3) { --d: 280ms; }
.cl-card:nth-child(4) { --d: 340ms; }
.cl-card:hover { border-color: var(--ink); }
.cl-card .h4 { margin: 0 0 8px; }
.cl-card .small { margin: 0 0 20px; }
/* Spacing sits on the rows, never on .act, so core's touch hit area (a transparent top border offset by a negative margin) stays put. */
.cl-sees { margin: auto 0 20px; padding-top: 16px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.cl-sees div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.cl-sees dt { display: flex; align-items: center; gap: 8px; }
.cl-sees dd { margin: 0; font-size: 15px; line-height: 1.4; }
.cl-card .act { align-self: flex-start; }
.cl-card .act::after { content: ""; position: absolute; inset: 0; }   /* the whole card is the link */
@container (max-width: 250px) {
  .cl-sees div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .cl-sees div + div { margin-top: 6px; }
}

/* 28px pixel glyph (one rect per pixel), in ink on the white. On hover or keyboard focus it rebuilds pixel by pixel along
   the diagonals (core v3-fill in one step per pixel, 40ms apart, about half a second), never on its own. Accent pixels take
   the band's tone, not orange. */
.cl-g { display: block; width: 28px; height: 28px; margin-bottom: 20px; color: var(--ink); --g2: var(--tone); --g3: var(--tone); }
.cl-g svg { display: block; }
.cl-card:hover .cl-g rect { animation: v3-fill 40ms steps(1, end) calc(var(--i) * 40ms) backwards; }

@supports selector(:has(*)) {
  .cl-card .act:focus-visible { outline: none; }
  .cl-card:has(.act:focus-visible) { border-color: var(--ink); outline: 2px solid var(--focus); outline-offset: 3px; }
  .cl-card:has(.act:focus-visible) .cl-g rect { animation: v3-fill 40ms steps(1, end) calc(var(--i) * 40ms) backwards; }
}

/* Measured numbers on the paper field, directly under the band: the only place on home for them. */
.cl-measured { background: var(--paper); padding: var(--s7) 0 var(--block); }
.cl-stats .stat { position: relative; }
.cl-stats .stat b { padding-right: 32px; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.cl-si { position: absolute; top: 14px; right: 0; line-height: 0; color: var(--tone); }

/* ---------- 07 · Check a download: the published SHA-256 and the hash of the received bytes as two 16 × 16 bit grids ---------- */
.cl-hx + .fnote { margin: 16px 0 var(--s7); }
/* Column-major grid, so caption, source, bits and hex line up across the two columns. */
.cl-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: 32px; align-items: start; }
.cl-pair > .k { margin: 0; }
.cl-src { margin: 4px 0 14px; min-height: 2.8em; color: var(--muted); overflow-wrap: anywhere; }   /* two lines kept, so the grids never jump between files */
.cl-bits { position: relative; display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); grid-template-rows: repeat(16, minmax(0, 1fr)); gap: 2px; width: min(100%, 240px); aspect-ratio: 1; }
/* A bit: hollow until known, then pale warm grey (0), ink (1) or orange (differs from the published bit: the one key
   element). --d staggers the fill. */
.cl-bits i { box-shadow: inset 0 0 0 1px var(--line); transition: background-color var(--t2) var(--ease) var(--d, 0ms), box-shadow var(--t2) var(--ease) var(--d, 0ms); }
.cl-bits i.b0 { background: var(--line); box-shadow: none; }
.cl-bits i.b1 { background: var(--blue-900); box-shadow: none; }
.cl-bits i.x { background: var(--signal); box-shadow: none; }
/* The compare rule steps down both grids together, one row per step. */
.cl-scan { position: absolute; left: -6px; right: -6px; top: 0; height: 2px; margin-top: -1px; background: var(--ink); opacity: 0; pointer-events: none; }
.cl-bits.scan .cl-scan { opacity: 1; top: 100%; transition: top var(--scan, 640ms) steps(16, end); }
.cl-bits.now i, .cl-bits.now .cl-scan, .cl-hex.now span { transition: none; }
/* 64 hex digits as four lines of 16; line n covers bit rows 4n to 4n + 3. Digits that differ are marked. */
.cl-hex { margin: 14px 0 0; font-size: 12px; line-height: 1.55; white-space: pre; }
.cl-hex span { display: block; transition: opacity var(--t2) var(--ease) var(--d, 0ms); }
.cl-hex.wait span { opacity: 0; }
.cl-hex b { font-weight: 400; transition: background-color var(--t1); }
.cl-hex b.x { color: var(--signal-ink); background: var(--signal-tint); }
.cl-hex b.hi { background: var(--sel); box-shadow: inset 0 -1.5px 0 var(--ink); }
/* Pointing at a square marks its hex digit: the four squares here and the digit below each grid. */
.cl-bits i.hi { box-shadow: inset 0 0 0 2px var(--ink); }
.cl-bits { cursor: crosshair; }
.cl-rd { margin-top: 24px; }
.cl-verdict { margin-top: 20px; }
.cl-verdict:not(.ok):not(.bad) { box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font-size: 15px; }
.cl-verdict b { font-weight: 500; }
/* Files to check: name with one status tag on the first line, statement and size across the second. */
.cl-opts .opt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; }
.cl-opts .opt small { grid-column: 1 / -1; overflow-wrap: anywhere; }
.cl-flip .small { margin: 8px 0 0 42px; }
/* When the control column sits under the figure (core: ≤1000px) and there is room, the files take two columns. */
@media (min-width: 640px) and (max-width: 1000px) {
  .cl-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container cl (max-width: 559.98px) {
  .cl-pair { column-gap: 16px; }
  .cl-hex { font-size: 11px; }
  .cl-scan { left: -4px; right: -4px; }
}

/* ---------- 07 · What is published: one sheet per group, head left, rows right ---------- */
.cl-index { display: grid; gap: 16px; }
.cl-grp { display: grid; grid-template-columns: clamp(200px, 28%, 260px) minmax(0, 1fr); }
.cl-gh { padding: 24px; }
.cl-gh .h3 { margin: 0 0 8px; }
.cl-gh .small { margin: 0; }
.cl-gh .tag { margin-top: 16px; }
.cl-items { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); min-width: 0; }
.cl-row { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px 20px; align-items: center; padding: 20px 24px; transition: background var(--t1); }
.cl-row + .cl-row { border-top: 1px solid var(--line); }
.cl-ic { align-self: start; width: 40px; height: 40px; display: grid; place-items: center; background: var(--paper); color: var(--tone); }
.cl-ic svg { display: block; }
.cl-tx { min-width: 0; }
.cl-tx b { display: block; font-weight: 500; font-size: 17px; line-height: 1.3; transition: color var(--t1); }
.cl-tx .small { display: block; margin-top: 2px; }
.cl-tx .data { display: block; margin-top: 6px; color: var(--muted); overflow-wrap: anywhere; }
.cl-row > .act { justify-self: end; white-space: nowrap; }
.cl .act small { font: inherit; color: var(--muted); margin-left: 4px; }
/* Link rows: the whole row is the target. */
.cl-row.is-link .act::after { content: ""; position: absolute; inset: 0; }
.cl-row.is-link:hover { background: var(--sel); }
.cl-row.is-link:hover .cl-tx b { color: var(--tone); }
@supports selector(:has(*)) {
  .cl-row.is-link .act:focus-visible { outline: none; }
  .cl-row.is-link:has(.act:focus-visible) { background: var(--sel); outline: 2px solid var(--focus); outline-offset: -2px; }
}
/* Synthetic genomes: pick one, then load it in Prove or download it (both actions sit with the picker). */
.cl-synth .cl-tx { grid-column: 2 / -1; }
.cl-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 12px; }
.cl-pick select { flex: 0 1 220px; min-width: 0; min-height: 40px; appearance: none; -webkit-appearance: none; padding: 8px 36px 8px 12px; border: 1px solid var(--line-2); border-radius: 0; color: var(--ink); font: 15px/1.3 var(--font); cursor: pointer; text-overflow: ellipsis; transition: border-color var(--t1);
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 4'%3E%3Cpath d='M0 0h1v1H0zM1 1h1v1H1zM2 2h1v1H2zM3 3h1v1H3zM4 2h1v1H4zM5 1h1v1H5zM6 0h1v1H6z' fill='%23111'/%3E%3C/svg%3E") no-repeat right 12px center / 12px 7px; }
.cl-pick select:hover { border-color: var(--blue-900); }

/* ---------- Contact ---------- */
.cl-contact { padding-bottom: var(--block); }
.cl-touch { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s7); }
.cl-tl .lead { margin-bottom: 32px; }
.cl-cta { margin: 0; }
.cl-tl .fnote { margin-top: 20px; }
.cl-tr { padding-top: 8px; }
.cl-qs { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid currentColor; }
.cl-qs a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 24px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.cl-qs a > .k { grid-column: 1; }
.cl-q { grid-column: 1; margin: 0; font-family: var(--display); transition: color var(--t1); }   /* Newsreader, as the 06 card titles (h3.h4) */
.cl-qs a:hover .cl-q { color: var(--tone); }
.cl-qs li:last-child a { border-bottom: 0; }   /* the footer's top rule is the one line between contact and footer */
.cl-qs .arr { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.cl-qs a:focus-visible { outline-offset: 2px; }

/* ---------- Footer: the paper field continues from Contact; its top rule is the one line between them ---------- */
.cl-foot { background: var(--paper); color: var(--ink); }
.cl-fgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 24px; padding-top: var(--s8); border-top: 1px solid var(--line); }
.cl-fgrid > .mark { grid-column: 1 / -1; }
.cl-foot nav .k { margin: 0 0 16px; }
.cl-foot nav ul { list-style: none; margin: 0; padding: 0; }
.cl-foot nav li { margin: 0 0 10px; }
.cl-foot nav a { font-size: 15px; text-decoration: none; transition: color var(--t1); }
.cl-foot nav a:hover { color: var(--tone); text-decoration: underline; }
.cl-foot nav .arr { margin-left: 6px; }
.cl-fbar { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px 24px; margin-top: var(--s8); padding: 20px 0 24px; border-top: 1px solid var(--line); }
.cl-fbar .small { margin: 0; }

/* ---------- Container widths ---------- */
@container cl (min-width: 900px) {
  .cl-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container cl (min-width: 760px) {
  .cl-touch { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s8); }
}
@container cl (min-width: 700px) {
  .cl-fgrid { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); }
  .cl-fgrid > .mark { grid-column: auto; }
}
@container cl (max-width: 699.98px) {
  .cl-grp { grid-template-columns: minmax(0, 1fr); }
  .cl-gh { padding: 20px 20px 16px; }
  .cl-items { border-left: 0; border-top: 1px solid var(--line); }
  .cl-row { padding: 16px 20px; }
}
@container cl (max-width: 559.98px) {
  .cl-cards { grid-template-columns: minmax(0, 1fr); }
  .cl-card { --d: 160ms !important; padding: 20px; }
  .cl-row { grid-template-columns: 40px minmax(0, 1fr); gap: 10px 16px; align-items: start; }
  .cl-row > .act { grid-column: 2; justify-self: start; }
  .cl-pick select { flex-basis: 100%; }
}