/* ════════════════════════════════════════════════════════════════════════════
   כרך — surfaces. Built only from the eight components in kerekh.css.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero{ position:relative; padding-block:clamp(2.25rem,6vw,4rem) var(--s6) }
.hero-line{
  font-family:var(--display); font-weight:700; font-size:var(--t-hero);
  line-height:1.02; letter-spacing:-.015em; max-width:var(--measure-lead);
  animation:fade var(--dur) var(--ease) both;   /* opacity only — §6 */
}
.hero-sub{ max-width:var(--measure-lead); color:var(--ink-soft); margin-block-start:var(--s4) }
/* the three-picture explainer inside the hero — the 5-second test (2026-08-02):
   the first screen must SHOW what this is before it argues it. Tight spacers,
   because everything they buy is measured in pixels above the fold. */
.hero-eyebrow{ margin-block-start:var(--s5) }
.hero .scenes{ margin-block-start:var(--s3) }
@media (min-width:820px){ .hero .scenes{ gap:var(--s4) } }
.hero-mark{ position:absolute; inset-block-start:0; inset-inline-start:0; inset-inline-end:0; inset-block-end:0;
  pointer-events:none }

/* ── ask box — a ruled writing line, not an input box ────────────────────── */
.askbox{ max-width:var(--measure); margin-block-start:var(--s5) }
.askbox label{ display:block; font-family:var(--sans); font-size:var(--t-micro);
  letter-spacing:.08em; color:var(--muted); margin-block-end:var(--s2) }
.askbox .row{ display:flex; gap:var(--s3); align-items:flex-end; flex-wrap:wrap }
.askbox .ruled{ flex:1 1 16em }
.ask-help{ font-family:var(--sans); font-size:var(--t-caption); color:var(--muted);
  margin-block-start:var(--s3); line-height:1.6 }
.ask-examples{ list-style:none; margin:var(--s4) 0 0; padding:0; display:grid; gap:var(--s2) }
.ask-examples button{
  background:none; border:0; padding:.5rem .1rem; min-height:44px; cursor:pointer;
  text-align:start; font-family:var(--serif); font-size:var(--t-caption);
  color:var(--ink-soft); width:100%; line-height:1.6;
}
.ask-examples button:hover{ color:var(--ink) }
.ask-examples s{ color:var(--muted); text-decoration-thickness:1px }
.ask-examples .arrow{ color:var(--muted); padding-inline:.4em }

/* ── the five beats ──────────────────────────────────────────────────────── */
.beats{ list-style:none; margin:0; padding:0; display:grid; gap:0 }
.beats > li{ display:grid; grid-template-columns:2.6em 1fr; gap:var(--s3);
  padding-block:var(--s4); border-block-end:1px solid var(--line-soft) }
.beats h3{ font-family:var(--sans); font-weight:500; font-size:var(--t-ui);
  letter-spacing:.04em; margin-block-end:var(--s2) }
.beats p{ max-width:var(--measure); color:var(--ink-soft) }

/* ── limitations ─────────────────────────────────────────────────────────── */
.limits{ list-style:none; margin:0; padding:0; max-width:var(--measure) }
.limits > li{ padding-block:var(--s4); border-block-end:1px solid var(--line-soft) }
.limits > li:first-child{ border-block-start:1px solid var(--line-soft) }

/* ── job ticket ──────────────────────────────────────────────────────────── */
.tk{ max-width:38em }
.tk-top{ margin-block-end:var(--s4) }
.tk-stamp{
  display:inline-block; font-family:var(--sans); font-weight:500;
  font-size:var(--t-micro); letter-spacing:.14em; color:var(--proof-on-paper);
  box-shadow:inset 0 0 0 1.5px var(--proof-on-paper); padding:.3rem .55rem;
  margin-block-end:var(--s3);
}
.tk-subject{ font-size:var(--t-h3); font-family:var(--serif); font-weight:500; line-height:1.35 }
.tk-note{ font-family:var(--sans); font-size:var(--t-caption); color:var(--ink-paper-muted);
  margin-block-start:var(--s4); line-height:1.7 }
.tk-rows{ list-style:none; margin:0; padding:0 }
.tk-row{ display:grid; grid-template-columns:2.2em 1fr; gap:var(--s3);
  padding-block:var(--s3); border-block-start:1px solid var(--paper-edge) }
.tk-folio{ padding-block-start:.28rem }
.tk-dash{ display:inline-block; width:6px; height:1px; background:currentColor;
  vertical-align:middle }
.tk-head{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap }
.tk-label{ font-family:var(--sans); font-size:var(--t-ui); font-weight:500 }
.tk-state{ font-family:var(--sans); font-size:var(--t-micro); letter-spacing:.06em; color:var(--ink-paper-faint);
  margin-inline-start:auto }
.tk-fixed{ font-family:var(--sans); font-size:var(--t-caption); color:var(--ink-paper-faint); line-height:1.6;
  margin-block-start:.15rem }
.tk-detail{ font-family:var(--serif); font-size:var(--t-caption); line-height:1.7;
  margin-block-start:.35rem }
.tk-count{ font-variant-numeric:tabular-nums; color:var(--ink-paper-faint) }
.tk-pending .tk-label,.tk-pending .tk-fixed,.tk-pending .tk-state{ color:var(--ink-paper-faint) }
.tk-skipped .tk-label,.tk-skipped .tk-fixed,.tk-skipped .tk-detail,.tk-skipped .tk-state{ color:var(--ink-paper-faint) }
.tk-done .tk-state{ color:var(--ink-paper-soft) }

/* ── refusal (--proof at full weight) ────────────────────────────────────── */
.halt{ border-inline-start:1.5px solid var(--proof); padding-inline-start:1.15rem;
  max-width:var(--measure) }
.halt h2{ color:var(--proof) }

/* ════════════════════════════════════════════════════════════════════════════
   INTAKE — a page, not a form. 36em single column on every viewport.
   ════════════════════════════════════════════════════════════════════════════ */
.intake{ max-width:36em; margin-inline:auto; padding-block:var(--s6) var(--s8) }

/* the accumulating sentence — the first paper object */
.sheet{ margin-block-end:var(--s6) }
.sheet .paper{ font-family:var(--serif); font-size:var(--t-lead); line-height:2.1 }
.sheet[hidden]{ display:none }
.blank{
  display:inline-block; min-width:5.5em; text-align:center;
  border-block-end:1px solid var(--paper-edge); color:var(--ink-paper-faint);
  font-size:.92em; padding-inline:.25em; margin-inline:.12em;
}
.blank.filled{
  color:var(--ink-paper); border-block-end-color:var(--ink-paper);
  font-size:1em; cursor:pointer; background:none; border-width:0 0 1px; font-family:inherit;
  min-width:0; text-align:inherit; padding:0 .12em;
}
/* A filled blank must flow as TEXT, not as an inline-block object: an
   inline-block is a bidi-neutral object, and the sentence's own periods jump
   to the wrong end of the line around one. This is the RTL failure §2e warns
   about, arriving through the element box rather than through a Latin string. */
button.blank.filled{ display:inline; min-height:0; line-height:inherit }
.blank.filled:hover{ border-block-end-width:1.5px }

/* the intake's opening frame — the sentence the visitor arrived on, restated
   before question 1, ruled off from it */
.intake-say{ margin-block-start:0; margin-block-end:var(--s5);
  padding-block-end:var(--s4); border-block-end:1px solid var(--line-soft) }

/* questions */
.q{ animation:fade var(--dur) var(--ease) both }
.q h2{ font-family:var(--serif); font-weight:500; font-size:var(--t-h2); line-height:1.3;
  letter-spacing:0 }
.why{ font-family:var(--sans); font-size:var(--t-caption); color:var(--muted);
  line-height:1.7; max-width:var(--measure); margin-block-start:var(--s3) }
.hint{ font-family:var(--serif); font-size:var(--t-caption); color:var(--ink-soft);
  line-height:1.7; margin-block-start:var(--s3) }

/* page turn — forward = leftward (§2e.6, §6: one of exactly two places) */
@keyframes turn-in{ from{ opacity:0; transform:translateX(3%) } to{ opacity:1; transform:none } }
@keyframes turn-out{ from{ opacity:1; transform:none } to{ opacity:0; transform:translateX(-3%) } }
.q.turn-in{ animation:turn-in var(--dur-turn) var(--ease) both }
.q.turn-out{ animation:turn-out var(--dur-turn) var(--ease) both }
@media (prefers-reduced-motion:reduce){
  .q.turn-in,.q.turn-out{ animation:none !important }
}

/* option rows — real labels, ≥44px */
.opts{ list-style:none; margin:var(--s4) 0 0; padding:0 }
.opts > li{ border-block-end:1px solid var(--line-soft) }
.opts label{
  display:flex; align-items:center; gap:var(--s3); min-height:52px;
  padding-block:var(--s3); cursor:pointer; line-height:1.6;
}
.opts input{ position:absolute; opacity:0; width:1px; height:1px }
.opts .box{ flex:0 0 auto; width:9px; height:9px; box-shadow:inset 0 0 0 1px var(--line) }
.opts label:hover .box{ box-shadow:inset 0 0 0 1px var(--ink) }
.opts input:checked + .box{ box-shadow:inset 0 0 0 4.5px var(--ink) }
.opts input:focus-visible + .box{ outline:1.5px solid var(--ink); outline-offset:2px }
.opts .sub{ font-family:var(--sans); font-size:var(--t-caption); color:var(--muted);
  margin-inline-start:auto; text-align:end }

/* consent rows — same object as an option row, but the labels are sentences
   that wrap, so the box holds the first line instead of centring on a
   two-line block. Last row drops its rule: the quiet line below is not a
   third option.

   Everything the row needs is restated here rather than inherited, because
   this list also lives inside .joinbox on the landing page, and `.joinbox
   label{display:block}` (same specificity as `.opts label`, declared later)
   was winning — which turned the box into a 0×17 inline span and set the
   sentence in eyebrow micro-caps. `.opts.consents label` outranks both. */
.opts.consents > li:last-child{ border-block-end:0 }
.opts.consents label{
  display:flex; align-items:flex-start; gap:var(--s3); min-height:52px;
  padding-block:var(--s3); margin-block-end:0; cursor:pointer;
  font-family:var(--sans); font-size:var(--t-ui); letter-spacing:normal;
  line-height:1.6; color:var(--ink-soft);
}
.opts.consents .box{ margin-block-start:calc((1.6em - 9px) / 2) }

/* chips — write opening words into the field */
.chips{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-block-start:var(--s4); padding:0; list-style:none }
.chips button{
  min-height:44px; padding:.5rem .8rem; cursor:pointer; background:transparent;
  box-shadow:inset 0 0 0 1px var(--line-soft); border:0; border-radius:0;
  font-family:var(--sans); font-size:var(--t-caption); color:var(--ink-soft);
}
.chips button:hover{ box-shadow:inset 0 0 0 1px var(--ink); color:var(--ink) }

.nav-row{ display:flex; gap:var(--s3); align-items:center; margin-block-start:var(--s5); flex-wrap:wrap }
.nav-row .spacer{ margin-inline-start:auto }

/* the reader's own progress hairline, reused literally */
.progress{ position:fixed; inset-block-end:0; inset-inline:0; height:1.5px; background:transparent; z-index:30 }
.progress i{ display:block; height:100%; width:0; background:var(--ink);
  transition:width var(--dur) var(--ease) }

/* confirm table */
.map{ width:100%; border-collapse:collapse; font-size:var(--t-caption); margin-block-start:var(--s4) }
.map th,.map td{ text-align:start; padding:var(--s3) var(--s2); border-block-end:1px solid var(--line-soft);
  vertical-align:top; line-height:1.6 }
.map th{ font-family:var(--sans); font-weight:500; color:var(--muted); white-space:nowrap }
.map caption{ text-align:start; margin-block-end:var(--s2) }
details.map-wrap summary{
  cursor:pointer; font-family:var(--sans); font-size:var(--t-caption);
  color:var(--ink-soft); min-height:44px; display:flex; align-items:center;
}
details.map-wrap summary::marker{ color:var(--muted) }

/* ════════════════════════════════════════════════════════════════════════════
   LIBRARY — the shelf. 68rem, this page only.
   ════════════════════════════════════════════════════════════════════════════ */
/* library only (its shelf is a direct child of <main>); the landing page's
   shelf keeps the full grid. Falls back to the plain grid where :has() is not
   supported, which is exactly today's behaviour. */
main > .shelf:not(:has(> li:nth-child(3))){ max-width:var(--measure);
  grid-template-columns:1fr }
.shelf{ display:grid; gap:var(--s5); grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));
  margin-block-start:var(--s5); padding:0; list-style:none }
.card{ display:flex; flex-direction:column; gap:var(--s3); min-height:15rem }
.card .cover-mark{ width:2.2rem; height:1.5px; background:var(--ink-paper) }
.card .title{ font-family:var(--serif); font-size:var(--t-h3); line-height:1.3; font-weight:500 }
.card .sub{ font-family:var(--serif); font-size:var(--t-caption); color:var(--ink-paper-muted); line-height:1.6 }
.card .stamp{ margin-block-start:auto }
.card-foot{ margin-block-start:var(--s2) }

/* ── page-turn: card → reader (the second and last one) ──────────────────── */
@keyframes open-book{ from{ opacity:1 } to{ opacity:0 } }

/* ════════════════════════════════════════════════════════════════════════════
   LANDING — skin 2 additions (2026-08-01)
   ════════════════════════════════════════════════════════════════════════════ */

/* the hero's own CTA row */
.hero-cta{ display:flex; gap:var(--s3); flex-wrap:wrap; margin-block-start:var(--s5) }
.hero-cta + .ask-help{ margin-block-start:var(--s3) }
/* the fold copy of it sits tighter — it is the second thing under the strip,
   not the closing gesture of the hero */
.hero-cta-top{ margin-block-start:var(--s4) }

/* ── the proof strip — the hero's evidence, above the fold ────────────────
   Speaks in the ledger's voice (figure at the start edge, caption beside it)
   rather than introducing a new component: §1e, one vocabulary. No paper
   under it — paper appears only where a book exists (§1a), and this is a
   pointer at the books, not one of them.

   `min-height` is load-bearing: the strip ships with a sentence and is
   replaced by figures once the status files answer. Both states are held
   under the same reserved height, so nothing below the strip moves. */
.proofstrip{
  display:block; color:inherit; max-width:var(--measure);
  margin-block-start:var(--s5); padding-block:var(--s4);
  border-block:1px solid var(--line-soft);
  min-height:13.25rem;   /* measured: sentence 200px, three figures 208px at
                            390 — the reserve clears both, so the swap moves
                            nothing. Re-measure if the figure list grows. */
  transition:border-color var(--dur-fast) var(--ease);
}
.proofstrip:hover{ border-color:var(--line) }
.ps-say{ font-size:var(--t-caption); color:var(--ink-soft); line-height:1.7;
  max-width:var(--measure-lead) }
/* ONE grid for all three rows (the rows are display:contents) rather than a
   grid per row — otherwise each figure sizes its own first column and the
   captions come out ragged, since "2" and "94 · 91" are nothing like the same
   width. `role` is restored explicitly because display:contents drops list
   semantics in some engines. */
.ps-figs{ list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:auto 1fr; gap:var(--s3) var(--s4);
  align-items:baseline }
.ps-figs > li{ display:contents }
.ps-n{
  font-family:var(--display); font-weight:700; font-size:1.6rem; line-height:1;
  font-variant-numeric:tabular-nums; color:var(--ink);
}
.ps-c{ font-family:var(--sans); font-size:var(--t-caption); color:var(--ink-soft);
  line-height:1.6 }
.ps-go{ display:block; font-family:var(--sans); font-size:var(--t-micro);
  letter-spacing:.08em; color:var(--muted); margin-block-start:var(--s4) }
.proofstrip:hover .ps-go{ color:var(--ink-soft) }
.ps-go .arrow{ padding-inline-start:.4em }
@media (min-width:820px){
  .proofstrip{ max-width:none; min-height:0 }
  .ps-figs{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s5);
    align-items:start }
  .ps-figs > li{ display:block }
  .ps-n{ display:block; font-size:2.5rem; margin-block-end:var(--s2) }
  .ps-c{ max-width:15em }
}

/* ── the ledger — the counting voice, at size ────────────────────────────── */
.ledger{ list-style:none; margin:0; padding:0; max-width:var(--measure) }
.ledger > li{
  display:grid; grid-template-columns:3.2em 1fr; gap:var(--s4); align-items:baseline;
  padding-block:var(--s4); border-block-end:1px solid var(--line-soft);
}
.ledger > li:first-child{ border-block-start:1px solid var(--line-soft) }
.ledger .num{
  font-family:var(--display); font-weight:700; font-size:var(--t-h2); line-height:1;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.ledger > li > span + span{ color:var(--ink-soft) }

/* ── in / out, side by side ──────────────────────────────────────────────── */
.two-col{ display:grid; gap:var(--s5) var(--s6); grid-template-columns:1fr }
@media (min-width:760px){ .two-col{ grid-template-columns:1fr 1fr } }
.two-col .limits{ margin-block-start:var(--s3) }

/* ── the launch-edition list ─────────────────────────────────────────────── */
.joinbox{ max-width:var(--measure); margin-block-start:var(--s5) }
.joinbox label{
  display:block; font-family:var(--sans); font-size:var(--t-micro);
  letter-spacing:.08em; color:var(--muted); margin-block-end:var(--s2);
}
.joinbox .row{ display:flex; gap:var(--s3); align-items:flex-end; flex-wrap:wrap }
.joinbox .ruled{ flex:1 1 14em }
.joinbox .statement{ margin-block-start:var(--s2) }

/* The offer gets the room's one raised surface — a lit plate on the board.
   `background-color`, never the `background` shorthand: the shorthand would
   wipe the .frame's trim-edge hairlines, which are painted as background-image. */
.join{ background-color:var(--field-2); border-block:1px solid var(--line-soft) }

/* the counting voice answers the hover the reader's TOC answers with (§6) */
.ledger > li{ transition:padding var(--dur-fast) var(--ease) }
.ledger > li:hover{ padding-inline-start:.5rem }

/* ════════════════════════════════════════════════════════════════════════════
   THE THREE-PICTURE EXPLAINER — the product, understood before it is read.
   Markup is generated by platform/build-scenes.py; every colour below comes
   from a token, so nothing here survives a re-skin as a stale hex.
   ════════════════════════════════════════════════════════════════════════════ */
.scenes{ list-style:none; margin:var(--s6) 0 0; padding:0;
  display:grid; gap:var(--s6); grid-template-columns:1fr }
@media (min-width:820px){ .scenes{ grid-template-columns:repeat(3,1fr); gap:var(--s5) } }
.scene{ display:flex; flex-direction:column; gap:var(--s3) }
.scene-h{ display:flex; align-items:baseline; gap:var(--s3) }
.scene-h .folio{ flex:0 0 auto }
.scene-t{ font-family:var(--sans); font-weight:500; font-size:var(--t-ui);
  letter-spacing:.04em; color:var(--ink) }
.scene-art{ position:relative; aspect-ratio:320/220; overflow:hidden }
.well{ background:var(--field-3); box-shadow:inset 0 0 0 1px var(--line-soft) }
.scene-art > svg{ display:block; width:100%; height:100% }
.scene-c{ font-size:var(--t-caption); color:var(--ink-soft); line-height:1.75;
  max-width:34ch }
.explain-p{ margin-block-start:var(--s4); max-width:var(--measure) }

/* ── scene paint ─────────────────────────────────────────────────────────── */
.sc-frag{ fill:var(--field-2); stroke:var(--line); stroke-width:1 }
.sc-tab{ fill:var(--line) }
.sc-line{ fill:var(--line) }
.sc-line.sc-dim{ fill:var(--line-soft) }
.sc-hair{ fill:var(--line-soft) }
.sc-rule{ fill:var(--ink-paper) }
.sc-dot{ fill:var(--line) }
.sc-play{ fill:var(--ink-soft) }
.sc-x{ fill:none; stroke:var(--muted); stroke-width:1.5 }
.sc-far{ opacity:.42 }
@media (prefers-color-scheme:dark){ :root[data-theme="auto"] .sc-far{ opacity:.66 } }
:root[data-theme="dark"] .sc-far{ opacity:.66 }
.sc-mid{ opacity:.78 }
.sc-ink{ fill:var(--ink) }
.sc-post{ fill:var(--ink-soft) }
.sc-soft{ fill:var(--ink-soft); opacity:.5 }
.sc-thread{ fill:none; stroke:var(--line); stroke-width:1; opacity:.85 }
.sc-thread.is-lit{ stroke:var(--ink-soft); opacity:.9 }
.sc-paper{ fill:var(--paper); stroke:var(--paper-edge); stroke-width:1 }
.sc-stitch{ fill:none; stroke:var(--ink-soft); stroke-width:1.4 }
/* the register mark — a square, never a circle (§3.8), and one of the four
   sanctioned uses of --proof: a source that was verified. */
.sc-mark{ fill:none; stroke:var(--proof); stroke-width:1.5 }
.sc-mark-s{ fill:none; stroke:var(--proof-on-paper); stroke-width:1.2 }
/* inside a book object the wall/judge pages are ink-on-paper, not ink-on-board */
.pg .sc-line{ fill:var(--ink-paper-faint) }
.pg .sc-line.sc-dim{ fill:var(--paper-edge) }
.pg .sc-hair{ fill:var(--paper-edge) }
.sc-score{ font-family:var(--display); font-weight:700; font-size:44px;
  fill:var(--ink-paper); text-anchor:middle; font-variant-numeric:tabular-nums }

/* ── the page turn ───────────────────────────────────────────────────────────
   One leaf, hinged on the spine. Its front face is the page it lifts off and
   its back face is the page it lands on, so the loop closes with no seam and
   needs no fade. Under reduced motion the leaf simply rests flat — which is a
   plain open book, the honest static fallback §2d demands.
   `direction:ltr` scopes physical left/right to fixed picture geometry only;
   no text flows through this element, so §2e's logical-property law is not in
   play here (and the figure is aria-hidden decoration around real captions). */
.bookflip{ position:absolute; inset:0; direction:ltr; overflow:hidden }
.bf{ position:absolute; inset:8% 7%; display:flex; perspective:1500px;
  box-shadow:var(--lift) }
.bf-page{ position:relative; width:50%; height:100%; background:var(--paper);
  overflow:hidden }
.bf-page > svg,.bf-face > svg{ display:block; width:100%; height:100% }
.bf-spine{ position:absolute; left:50%; top:0; bottom:0; width:1px;
  background:var(--paper-edge) }
.bf-leaf{
  position:absolute; left:0; top:0; width:50%; height:100%; z-index:2;
  transform-origin:right center; transform-style:preserve-3d;
  animation:bf-turn 8s var(--ease) infinite;
}
/* the fore-edge only — a ring around the whole face would print a rectangle
   over the page it is resting on, which is what a leaf must never do */
.bf-face{ position:absolute; inset:0; background:var(--paper);
  backface-visibility:hidden; overflow:hidden;
  box-shadow:inset 1px 0 0 var(--paper-edge) }
.bf-back{ transform:rotateY(180deg) }
@keyframes bf-turn{
  0%,34%   { transform:rotateY(0deg); animation-timing-function:cubic-bezier(.42,0,.28,1) }
  56%,100% { transform:rotateY(180deg) }
}

/* ── "coming soon" note — a stated absence, never a promise with a date ──── */
.soon{ max-width:var(--measure); font-size:var(--t-caption); color:var(--ink-soft);
  line-height:1.9; padding-block-start:var(--s4);
  border-block-start:1px solid var(--line-soft) }
.soon-b{ display:inline-block; font-family:var(--sans); font-weight:500;
  font-size:var(--t-micro); letter-spacing:.14em; color:var(--muted);
  box-shadow:inset 0 0 0 1px var(--line); padding:.24rem .5rem;
  margin-inline-end:.5rem }

/* ════════════════════════════════════════════════════════════════════════════
   /corrections — "מה תיקנו", the public corrections ledger.

   No new component: this is COMPONENT VOCABULARY §3's rule (structural
   hairlines) + FOLIO (§3.3) + the badge already drawn for `.soon-b`, reused
   verbatim as the verdict tag. Deliberately NOT a paper object — paper appears
   only where a book exists or is coming into existence (§5.1), and a list of
   what a book got wrong is not a book.
   ════════════════════════════════════════════════════════════════════════════ */
.fixes{ list-style:none; margin:0; padding:0 }
.fixes > li{ max-width:var(--measure); padding-block:var(--s5);
  border-block-end:1px solid var(--line-soft) }
.fixes > li:first-child{ border-block-start:1px solid var(--line-soft) }
.fix-head{ display:flex; flex-wrap:wrap; gap:var(--s3) 0; align-items:baseline;
  margin-block-end:var(--s4) }
.fix-title{ font-family:var(--display); font-weight:700; font-size:var(--t-h3);
  line-height:1.35; letter-spacing:-.01em }
/* the label column of a correction — "מה נכתב" / "מה מצאנו" — set in the
   counting voice so the eye can skim the pairs without a table */
.fix-rows{ display:grid; gap:var(--s3) var(--s4); grid-template-columns:1fr }
@media (min-width:640px){ .fix-rows{ grid-template-columns:6.5em 1fr } }
.fix-rows dt{ font-family:var(--sans); font-size:var(--t-micro); letter-spacing:.08em;
  color:var(--muted); line-height:1.9 }
.fix-rows dd{ margin:0; line-height:1.85 }
@media (max-width:639px){ .fix-rows dd{ margin-block-end:var(--s3) } }

/* ════════════════════════════════════════════════════════════════════════════
   /vote — the subject board. The counting voice (§3.3) with a button on the
   row: it is the `.ledger`, extended by one column, not a new component.
   ════════════════════════════════════════════════════════════════════════════ */
.board > li{ grid-template-columns:3.2em 1fr auto; column-gap:var(--s4) }
.board .subj{ color:var(--ink) }
.board .subj small{ display:block; font-family:var(--sans); font-size:var(--t-micro);
  color:var(--muted); line-height:1.8; margin-block-start:.35rem }
/* the count is unknown until it is fetched, and it says so with a dash rather
   than standing at 0 — a 0 that is really "not loaded" is a lie the same size
   as any other invented number (DESIGN-SPEC §10b.9) */
.board .num[data-unknown]{ color:var(--muted) }
.board .vote{ align-self:center }
/* once counted it stops being a button and becomes a stamp — muted micro type,
   no box, held at the column's inline-start so it lines up with the buttons
   still waiting above and below it */
.board .vote[disabled]{ opacity:1; box-shadow:none; color:var(--muted);
  font-family:var(--sans); font-size:var(--t-micro); letter-spacing:.08em;
  padding-inline:0; background:transparent; cursor:default; justify-self:start }
@media (max-width:520px){
  .board > li{ grid-template-columns:3.2em 1fr }
  .board .vote{ grid-column:2; justify-self:start; margin-block-start:var(--s3) }
}
.board-note{ max-width:var(--measure); margin-block-start:var(--s4) }