/* ── Task 111 ────────────────────────────────────────────────────────
   (5) THE STATE COLOURS, TUNED FOR READING AT DENSITY. A Majjhima
   screen is 152 lit chips at once, and the old dark triple asked too
   much of the eye: green and red carried more chroma than the signal
   needed (C* 35.7 and 32.5), and amber was byte-identical to the room's
   own accent gold (dE 0.0), so an amber chip and a gold title read as
   the same thing. Green and red drop to C* ~26–27, the closest pair
   moves from dE 28.1 to 32.1, and amber steps off the accent (dE 5.7).
   The tints and the chip text are deliberately untouched — text on a
   chip already measures 10.3:1, far above AA, so the strain was never
   contrast and darkening the tints further would only flatten the three
   states back together.
   (8) THE SECTION LINE centres its links. The collapse control is
   pinned left and OUT OF FLOW, so it cannot push the row off centre;
   only where the two would actually collide does the row give up
   centring and fall back to one left-aligned run.
   (9) ZONE AND GROUP HEADINGS ARE TITLES, so they take the centred gold
   title dress the section titles already have instead of reading as
   left-aligned labels. (The family summaries already centre with their
   arrow pinned left — that was settled in Tasks 98/102 and is left
   alone.) */
/* :root[data-theme="dark"] earlier in this file is (0,2,0); a bare
   attribute selector is (0,1,0) and loses however late it sits. */
:root[data-theme="dark"] { --g: #87a67a; --a: #b8974f; --r: #bd8279; }

/* Task 142 — the pill DRESS reaches every room, not only the .deep six.
   The TOC dress lives in each page as `.deep nav.toc a { padding; 99px
   radius; nowrap }`, and it is present in all sixteen rooms. But the
   `.deep` wrapper class is NOT: it exists on exactly buddhist,
   christianity, confucian, daoist, islam and judaism — the same six that
   already had pill rows. In the other ten the rule simply never matched,
   so Task 140's pills rendered as bare anchors running together.

   So this was never a markup fault. build_room_toc.py emits the same
   `<a data-j="…">` confucian has, character for character; the survey
   in Task 142 confirmed it. What Task 140 got wrong was the CLAIM: its
   MATCH test compared (id, label) PAIRS and I reported it as reproducing
   working rooms "byte-identically". A check whose name outruns its
   predicate — 8.1d, and mine.

   De-scoped rather than adding `.deep` to ten pages: that class carries
   a whole page layout (hindu is a mandala, not a basket stack) and would
   change far more than a TOC. The sticky positioning and the -2.2rem
   bleed margins are deliberately NOT copied — they are tuned to the
   .deep page gutter, and applying them where that gutter differs is how
   a room gets horizontal scroll at 390px. Colour is left alone too: the
   lens block already sets `nav.toc a` colour at !important. */
/* Task 144 item 2 — `position: relative` is what makes Collapse-all sit on
   the pill row in EVERY room. `.toc-all` is absolutely positioned with
   `top:50%; translateY(-50%)`, which centres it against its CONTAINING
   BLOCK — and that requires a positioned ancestor. The six .deep rooms
   have one, because `.deep nav.toc { position: sticky }` establishes it;
   the other ten had none, so the button resolved against a further
   ancestor and sat off the row: dy +47px in seven rooms, +93 in bahai,
   −36 in hindu, against 0 in all six .deep rooms. Measured, not guessed.
   The .deep six are unaffected — their inline `sticky` outranks this on
   specificity and already establishes the same containing block.
   This is the third lane running of one shape: a shared rule silently
   depending on a wrapper only some pages carry (142: the dress, 143: the
   overflow metric, now this). */
nav.toc { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem; }
nav.toc a {
  font-size: 0.8rem; text-decoration: none; padding: 0.25rem 0.6rem;
  border-radius: 99px; white-space: nowrap; cursor: pointer;
}
nav.toc a:hover { background: var(--panel); }
/* `nowrap` is confucian's, and correct for ITS labels — "The Four Books"
   is short. Applied archive-wide it broke hindu at 390px: its derived
   zone names are long ("RING 1 — Vedāṅgas & Kalpa-sūtras"), so a single
   unbreakable pill measured 381px inside a 390px viewport and pushed
   scrollWidth to 397. Horizontal scroll is the one thing the mobile
   grammar forbids outright, so below the room breakpoint a long label
   wraps instead. Caught by measuring, not by looking — the pill dress
   matched confucian perfectly and still overflowed. */
@media (max-width: 560px) {
  nav.toc a { white-space: normal; }
  /* Task 143 — the SAME fault one element over. `.famr` carries
     `white-space: nowrap` inline in every room, which is fine until a
     family header note is long: indigenous's Task 102b line ("a
     demonstrated 19th-c. hoax (Rafinesque 1836) — not a genuine Lenape
     text") is unbreakable at 390px and pushed scrollWidth to 464. One
     room of eighteen overflows, but the rule is archive-wide, so the
     fix is too — the next long note would do the same thing.

     Specificity, not !important (8.3): the inline `.famr` is (0,1,0)
     and is stamped after this file, so a bare `.famr` here would lose
     on order. `summary .famr` is (0,1,1) and wins on weight regardless
     of order. `min-width: 0` because a flex item will not shrink below
     its content width without it, so wrapping alone would not settle it. */
  summary .famr { white-space: normal; min-width: 0; }
}

nav.toc:not(.toc-bare) { justify-content: center; }
nav.toc:not(.toc-bare) > .toc-all {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
}
/* Task 149 item 1 — WHEN THE PILLS WRAP, `top: 50%` CENTRES ON THE BLOCK,
   NOT ON A ROW. Fifteen rooms fit their pills on one line at desktop, so
   "centred on the nav" and "on the pills' row" were the same measurement
   and nobody had to choose. Hindu's eleven zone names wrap to three rows
   (nav 89px tall), and there the two readings diverge: the button centred
   on an 89px block sits +31px below the first row — beside the SECOND row,
   which it has no relation to — and, measured, it was painted ON TOP of
   that row's first pill: "Collapse all" and "SIBLING BRANCH A" rendered
   over each other, both illegible. The offset was the reported symptom;
   the collision was the real defect underneath it.

   RULED (the block delegated this choice): the control tracks the pills'
   FIRST row. That is what fifteen rooms already read — dy 0 against row
   one — so first-row alignment is the archive's actual constant and
   block-centring only ever agreed with it by accident. `align-self:
   flex-start` puts an absolutely-positioned flex child's static position
   at the container's content-box top, which is exactly where the first
   flex line starts, in every room, with no per-room constant.

   The 2px is not a guess and not a tuning: the pill row measures 28.19px
   (0.8rem × 1.5 line-height + 0.5rem padding + 1px rule) and this control
   24px, so half the difference re-centres it on the row. Measured after:
   dy 0 (±0.1) in all sixteen.

   AND THE LANE IS RESERVED. The control is an overlay at `left: 1rem`,
   so centred pills run underneath it as soon as a row fills the width —
   which is why hindu collided. 9rem clears the control's 132px (116 wide
   + 16 left) with a gutter, and it is applied to BOTH sides so the pills
   stay centred exactly where they are today: fifteen rooms are visually
   unchanged, hindu wraps to four rows instead of three and stops
   overlapping. Scoped to the width where the control is an overlay at
   all — below 901px it is back in the flow and needs neither. */
@media (min-width: 901px) {
  nav.toc:not(.toc-bare) { padding-left: 9rem; padding-right: 9rem; }
  nav.toc:not(.toc-bare) > .toc-all {
    top: auto; bottom: auto; transform: none;
    align-self: flex-start; margin-top: 2px;
  }
}
@media (max-width: 900px) {
  nav.toc:not(.toc-bare) { justify-content: flex-start; }
  nav.toc:not(.toc-bare) > .toc-all { position: static; transform: none; }
}

.sec > h3, .vagga > h3 { justify-content: center; text-align: center; }
[data-theme="dark"] .sec > h3, [data-theme="dark"] .vagga > h3,
[data-theme="dark"] .sec > h3 .sc, [data-theme="dark"] .vagga > h3 .pn { color: #c4a060; }
.blurb { text-align: center; margin-left: auto; margin-right: auto; }

/* ── Task 127 ──────────────────────────────────────────────────────
   THE FOLD PILL RETIRES FOR A CORNER ARROW, and the zone description's
   BOX centres. Both live here, in the shared file, so the change lands
   once for all sixteen rooms rather than sixteen times by hand.       */

/* THE ZONE READS AS A BOX, so that "upper-left corner" means something.
   Before this the zone had no border and no ground at all (measured:
   border 0px, background transparent), so the arrow floated in blank
   space and read as a stray dot rather than a control. The outline is
   the archive's existing idiom, taken from the family box one level in
   (`.fam { border: 1px solid var(--line); border-radius: 9px }`) and
   held one step quieter so the zone frames its families rather than
   competing with them. */
/* Task 140 item 4 — the section box reads as a block, not a line.
   It was 1px solid var(--line): the SAME weight as the .fam family box
   one level inside it. The comment above says the zone is "held one step
   quieter" so it frames its families rather than competing — but at equal
   weight there was no hierarchy to read, and the top-level boundary
   between e.g. shinto's "The Records" and "The Liturgy" looked like just
   another divider. 2px restores the step: the outer box is now heavier
   than what it contains, which is the direction the nesting implies.
   Section level ONLY — .fam and the TOC-entry boxes are untouched. */
section.basket, section.zone {
  position: relative;
  border: 2px solid var(--line);
  border-radius: 11px;
  padding: 10px 12px 12px;
  margin-bottom: 1rem;
}
[data-theme="dark"] section.basket, [data-theme="dark"] section.zone {
  border-color: var(--chrome-border, #34343a);
}
.zone-arrow {
  position: absolute; top: 8px; left: 10px; z-index: 2;
  width: 30px; height: 30px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: 6px;
  color: var(--ink-faint); font-size: 16px; line-height: 1;
  cursor: pointer; opacity: 0.9;
}
.zone-arrow:hover, .zone-arrow:focus-visible {
  opacity: 1; color: var(--accent); background: rgba(0, 0, 0, 0.04);
}
[data-theme="dark"] .zone-arrow:hover,
[data-theme="dark"] .zone-arrow:focus-visible { background: rgba(255, 255, 255, 0.06); }

/* The pill is retired, not hidden (doctrine 6.2) — the JS removes it.
   This rule exists only so a stale copy in a room's own stylesheet
   cannot paint one back before the script runs. */
.zone-toggle { display: none !important; }

/* THE DESCRIPTION'S BOX CENTRES.
   Diagnosed before fixing, as Task 127 asks, and it is a cascade defeat
   (doctrine 8.3) — NOT a wrong selector and NOT a missing rule:

     shared    .blurb                 { text-align:center;
                                        margin-left:auto; margin-right:auto }  (0,1,0)
     per-room  .deep .basket > .blurb { margin: 0.5rem 0px 1rem;
                                        max-width: 82ch }                      (0,3,0)

   The per-room SHORTHAND resets the auto margins to 0px and outranks the
   shared rule, so the box is pinned left (L=0, R=485 in a 1170px zone)
   while `text-align: center` still centres the ink INSIDE that box. That
   is why two lanes swept for the class and found it correct: the half of
   the ruling they measured had landed. The visible symptom was a
   paragraph flush against the left edge with its last line centred.

   !important here matches the precedent this room CSS already sets for
   the same `.deep` scope fight (Task 123 item 4, the TOC gold). */
.deep .basket > .blurb, .basket > .blurb, .blurb {
  margin-left: auto !important; margin-right: auto !important;
}

@media (max-width: 720px) {
  .zone-arrow { top: 2px; left: 2px; width: 44px; height: 44px; }
}

/* Task 128 item 4 — the mast fraction is two centred lines under the
   browse button. It replaces the single "~N · N readable · N acquirable"
   run; the acquirable clause is gone, not hidden. */
#m-fraction { text-align: center; }
#m-fraction .m-l1, #m-fraction .m-l2 { display: block; }
#m-fraction .m-l2 { font-weight: 600; }

/* Task 128 item 1 — THE VAGGA HEADER BECOMES THREE STACKED LINES.
   It was one run: "Mūlapariyāya-vagga Root Fifty · I MN 1–10". Now the
   Pāli title, the English beneath it, the MN range beneath that — all
   centred, in the room's existing registers rather than new ones:
   gold for the title (§4.1 — gold is titles), italic muted for the
   translation, mono muted for the range. Buddhist is the only room with
   this pattern: `span.pn` appears in no other room (measured). */
/* The h3 is a FLEX ROW (`.deep .vagga h3 { display:flex; align-items:
   baseline; gap:.4rem }`), so `display:block` on the children did NOT
   stack them — they stayed flex items in a row, and the header measured
   20px tall with all three at top 0/2/2. Geometry caught what the
   computed `display` did not: block children of a flex parent are still
   laid out by the parent. The column direction is the actual fix. */
.deep .vagga h3.vagga-h, h3.vagga-h {
  display: flex; flex-direction: column; align-items: center;
  gap: 0; text-align: center;
}
h3.vagga-h .vg-title,
h3.vagga-h .vg-en,
h3.vagga-h .pn { display: block; }
h3.vagga-h .vg-title {
  font-size: 1.02em; color: var(--accent); letter-spacing: 0.01em;
}
h3.vagga-h .vg-en {
  font-style: italic; font-size: 0.88em; color: var(--ink-faint);
  margin-top: 1px;
}
h3.vagga-h .pn {
  font: 400 0.76em/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.06em; color: var(--ink-faint); margin-top: 2px;
}

/* Task 128 item 2 — THE CHIP NUMERAL LEAVES THE STATE COLOUR.
   The ordinal in front of each sutta name was painted `var(--g)` — the
   HELD green. Two things wrong with that, and the steward saw the second
   before the first: it gives a state hue to something that carries no
   state (§4.3, one mark one meaning), and it reads far fainter than the
   name beside it. Measured against the real chip ground, compositing the
   translucent chip fill rather than treating it as opaque:

       theme   numeral was      name        gap
       dark    5.38             9.78        -4.40
       light   4.32 (fails AA)  11.78       -7.46

   Now on the apparatus register in BOTH themes, chosen from measured
   candidates rather than picked by eye — above doctrine §4.1's 5.88 for
   apparatus, and still quieter than the name so the hierarchy holds:

       dark  #c0b9ac -> 7.72      light #5a5248 -> 6.48                */
.deep .su b, .deep .tc b, .deep .tc.g b,
.deep .su b, .basket .su b { color: #5a5248; }
[data-theme="dark"] .deep .su b,
[data-theme="dark"] .deep .tc b,
[data-theme="dark"] .deep .tc.g b,
[data-theme="dark"] .basket .su b { color: #c0b9ac; }

/* Light-contrast lane — two survivors of the token raise, both on their
   own painted grounds rather than the page ground, so the token could
   not reach them. Measured, not guessed. */
/* .toc-all IS LEFT ALONE — deliberately, and this comment is the record.
   Two "fixes" were applied here and both were wrong, because the probe
   that measured them was wrong: it read `color(srgb 0.98 0.97 0.96/.88)`
   as 0-255 instead of 0-1, so the TOC bar's near-WHITE ground measured as
   near-black. On that false reading the label looked dark-on-dark, was
   bound to --ink-soft (2.30 -> 2.11), then to #d4d0c8 (1.45 — genuinely
   broken, light on light). With the parser fixed the original colour
   measures fine. Doctrine 8.1: probe the rendered page — and check the
   probe before believing it. */

/* ── Task 135b ─────────────────────────────────────────────────────────
   THE FAMILY CARD RETIRES. Each family ("Pentateuch", "Historical",
   "RING 1 — Vedāṅgas & Kalpa-sūtras") sat in a bordered AND shaded box —
   `.deep details.fam { border: 1px solid var(--line); background:
   var(--surface) }` — inside the zone box, so a reader met two nested
   frames before reaching a chip. Buddhist never had it and is the
   reference dress: heading, gloss, range, hairline rule, then chips on
   the page ground.

   Only the border and the fill go. The heading/gloss/range/rule and the
   chip grid keep the layout they already have, and the ZONE box
   (section.basket / section.zone — bordered, no fill, carrying the Task
   127 corner arrow) is untouched in all 16 rooms including buddhist.
   Confirmed distinct before editing: swept by computed style, the zone
   wrapper paints border-without-fill at depth 0 and this card paints
   border-AND-fill at depth 1. */
.deep details.fam, details.fam {
  border: none;
  background: none;
}