/* ONE FACE. The tent's dark face was dropped on 2026-09-10 at the
     owner's word. What is left is the courtyard: linen hangings in
     daylight, which is the face the channels were tuned on and the one
     that was called right. color-scheme is stated so a device set to
     dark does not hand its own dark chrome to a light page. */
  :root {
    color-scheme: light;
    --bg: #f1e9d8; --panel: #f8f2e5; --panel2: #ebe2cd;
    --nav-veil: rgba(248, 242, 229, 0.94);
    --line: #8a6a18; --wash: #e8dec7;
    --surface-c: #ece0c6; --panel-c: #e4d5b4; --line-c: #c6b189;
    --ink: #2b2338; --ink-strong: #191223; --muted: #5c5270; --faint: #7b7290;
    --shesh: #6b5a35; --shesh-bright: #4f421d;
    /* on linen, bright means saturated and not light: a pale gold vanishes
       into the ground, and a deep one reads as leaf. Both clear the 3:1 a
       rule needs, which a lighter gold did not. */
    --gold: #96700f; --gold-dim: #9a7a28; --amber: #96700f;
    /* selection is amber on this face too — gold's in-process value, filled,
       with the tent's own ink on top of it */
    --sel: #8d5e0c; --sel-dim: #b8871a;
    --shani: #7a2e3b; --shani-dim: #a8797f;
    /* the inks the channels are written in, held muted: the corpus a quiet
       rose-red, the reading a quiet blue (owner, 2026-09-11: mockup 4, "i
       still might make that red like a little more muted somehow") */
    --shani-ink: #8b5560; --tekhelet-ink: #34649a;
    --wash-shani: #eedcd6;
    /* the held word: its own wash, more opaque — never a third color (owner,
       2026-09-11: "move away from gold as the highlighting itself and move
       toward just a more opaque red and blue") */
    --held-shani: #dbb9b6;
    --held-tekhelet: #b9c6e6;
    --halo-shani: rgba(122, 46, 59, 0.75);
    /* tekhelet the reading, argaman our own voice — both taken down for
       daylight, both above the AAA floor on linen */
    --tekhelet: #264282; --tekhelet-dim: #7f8ba8;
    --wash-tekhelet: #dfe4f1;
    --halo-tekhelet: rgba(38, 66, 130, 0.75);
    --argaman: #6b3f8f; --argaman-dim: #8f7aa8;
    /* A link is the page offering a reader somewhere to go, which is the page
       speaking, so it is argaman like the rest of our voice.
       It had been declared in the night block and nowhere else, so deleting
       that block left nine rules calling var(--link) with nothing behind it.
       What that cost, measured rather than assumed: nothing visible. Setting
       the token to a test color on five served pages moved 0 of 163 links,
       because every link at rest is painted by a more specific rule. The
       orphan was real and its effect was nil.
       Not measured, and the reason this is still worth a value rather than a
       deletion: three of the nine are hover and HUD states — #toc a:hover,
       #hud .att a, #hud .c-back — which a snapshot of a page at rest does not
       reach. A token that governs nothing today is also a rule that will
       silently do nothing the day someone leans on it. */
    --link: var(--argaman);
    /* the scripture's own ink, darkened to the AAA floor the contrast judge
       holds body text to — still warm, never black; linen is not glare and
       ink is not tar, but thin niqqud marks need 7:1 to stay marks */
    --c-word: #453b25; --en-word: #6f6042;
    --hover-ink: #6b4f0e; --hover-line: #bda15c;
    --chip-bg: rgba(43, 35, 56, 0.05); --chip-line: rgba(150, 112, 15, 0.34);
    --shadow-pop: 0 8px 24px rgba(96, 80, 48, 0.28);
    --shadow-card: 0 14px 40px rgba(96, 80, 48, 0.30);
    --shadow-hud: 0 18px 48px rgba(96, 80, 48, 0.32), 0 2px 8px rgba(96, 80, 48, 0.20);
  }
  * { box-sizing: border-box; }
  /* text-size-adjust: a phone browser that decides a block is "main content"
     inflates its font after layout has already been computed. Every box on this
     page that was sized from a measurement — the reading line held at the height
     it painted at, a band cut to a whole row — is sized against the font that
     was there when it was measured, and a font that grows afterwards spills out
     of all of them. The page sets its own sizes; it does not want them adjusted
     underneath it. */
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 Georgia, "Times New Roman", serif;
    overflow-x: hidden; }

  /* The header holds the way out in its top corner, and the book's own title
     below it. On a narrow screen the two stack rather than fight. */
  #home { display: flex; align-items: baseline; gap: 0.45rem; justify-content: flex-end;
    margin: 0 0 0.9rem; font-size: 0.85rem; }
  #home .nav-lab { font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--faint); }
  #home a.home { border: 1px solid var(--line); border-radius: 999px;
    padding: 0.3rem 0.95rem; background: var(--panel2); color: var(--shesh);
    text-decoration: none; white-space: nowrap; }
  #home a.home:hover { color: var(--ink-strong); border-color: var(--muted); }
  /* the other face, one press away — the button names where it takes you */
  #home button.face { border: 1px solid var(--line); border-radius: 999px; background: none;
    color: var(--muted); font: inherit; font-size: 0.72rem; padding: 0.1rem 0.7rem; cursor: pointer; }
  #home button.face:hover { color: var(--ink-strong); border-color: var(--muted); }
  header.top { padding: 1.4rem 1.5rem 1rem; border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, var(--panel) 0%, var(--bg) 100%); }
  header.top h1 { margin: 0; font-size: 1.9rem; color: var(--ink-strong); letter-spacing: 0.01em; }
  /* The title is the book's own, from the ledger. The English beside it is
     not a translation of it and must not be able to be read as one — it is how
     a reader who does not read Hebrew finds and refers to the book. So each
     line says which of the two it is, in plain English, before the thing
     itself. The labels are ours; only the title is the corpus's. */
  header.top h1 { display: flex; flex-direction: column; gap: 0.1rem; }
  header.top h1 .t-row { display: flex; align-items: baseline; gap: 0.55rem; flex-wrap: wrap; }
  header.top h1 .t-lab { font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--faint); font-variant: normal; flex: 0 0 auto; min-width: 6.4rem; }
  header.top h1 .he-t { font-size: 2.1rem; }
  /* The book's own title is a word of the corpus like any other: it opens, it
     carries records, it carries licenses. Rendered through the same row the
     chapter titles use, so there is one way a title is drawn. */
  header.top h1 .he-t .title-row { display: inline-block; text-align: right; }
  header.top h1 .he-t .title-row .wb { margin-bottom: 0; }
  header.top h1 .he-t .title-row .w { font-size: 2.1rem; }
  header.top h1 .he-t .title-row .g { font-size: 0.62rem; max-width: 12em; }
  header.top h1 .t-note { font-size: 0.6rem; letter-spacing: 0.06em; color: var(--muted);
    font-variant: normal; text-transform: none; }
  /* The third register: a machine's guess, named by its author. The chip is
     an attribution, never a license, and dresses differently — dashed where
     a license chip is solid — so no reader and no gate can mistake the one
     for the other. */
  header.top h1 .t-sug { display: block; font-size: 0.62rem; color: var(--muted);
    letter-spacing: 0.04em; margin-top: 0.18rem; font-variant: normal; text-transform: none; }
  header.top h1 .sug-chip { border: 1px dashed var(--line); border-radius: 0.6rem;
    padding: 0 0.4rem; font-size: 0.58rem; color: var(--muted); }
  /* the interval's words inside the register: the work's own, pressable,
     scaled to the register they stand in — a pointer, not the masthead */
  header.top h1 .t-sug .title-row { display: inline-block; vertical-align: middle; }
  header.top h1 .t-sug .title-row .w { font-size: 1.05rem; }
  header.top h1 .t-sug .title-row .g { font-size: 0.56rem; max-width: 8em; }
  /* The drawer for a guess that coexists with a witness: the surface is the
     witness's, and the guess waits one level down behind a press that names
     what it holds. */
  header.top h1 .sug-fold { display: block; margin-top: 0.18rem; padding: 0;
    border: none; background: none; cursor: pointer; font: inherit;
    font-size: 0.58rem; letter-spacing: 0.04em; color: var(--muted);
    text-decoration: underline dotted; font-variant: normal; text-transform: none; }
  header.top h1 .en-t { color: var(--ink-strong); font-size: 1.15rem; font-variant: small-caps; letter-spacing: 0.14em; }
  /* a credit line can carry an unbreakable witness id longer than a phone is wide; it wraps rather than widening the page */
  header.top p.byline { margin: 0.25rem 0 0; font-size: 0.85rem; color: var(--muted); overflow-wrap: anywhere; }
  /* THE SOURCE FOLDS, AND ITS TERMS DO NOT. The credit is a document id, an
     OID, a percent-encoded URL and a license — nine lines on a phone, standing
     between the reader and the book. It folds; the summary keeps the edition
     and the license in the open, so what the license requires shown is shown
     whether or not anyone presses anything, and the full credit is one press
     away and unchanged. */
  .byline-fold { margin: 0.5rem 0 0; max-width: 62rem; }
  .byline-fold > summary { list-style: none; cursor: pointer; font-size: 0.72rem;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
  .byline-fold > summary::-webkit-details-marker { display: none; }
  .byline-fold > summary::before { content: "\25B8 "; color: var(--muted); }
  .byline-fold[open] > summary::before { content: "\25BE "; }
  .byline-fold > summary .lic { color: var(--ink-strong); }
  .byline-fold > summary:hover { color: var(--muted); }
  #basisLine, #holdsLine, #rightsLine { margin: 0.3rem 0 0; font-size: 0.8rem; color: var(--muted); font-style: italic; max-width: 62rem; }
  .wb.ov .w { background: var(--chip-bg); }
  .wb.ov-first .w { border-start-start-radius: 0.25rem; border-end-start-radius: 0.25rem; padding-inline-start: 0.15rem; }
  .wb.ov-last .w { border-start-end-radius: 0.25rem; border-end-end-radius: 0.25rem; padding-inline-end: 0.15rem; }
  .wb.typed-here .w { border-bottom: 1px dashed var(--argaman); }
  /* a mark is corpus, so it wears the corpus channel like any other word —
     the one ink and the wash behind it — and is told apart by being smaller
     and letter-spaced, not by being painted a second color */
  /* INK THAT IS NOT A WORD. A wash means "counts as a word"; a mark is ink that
     does not, so it wears no wash and a gold outline — gold being the frame,
     and this being a thing the frame holds rather than a thing the text says.
     The glyph itself is the page's neutral ink, never gold: gold reaches no
     glyph at rest. Approved 2026-09-11 on the demonstration sheet. */
  .wb.mark .w { font-size: 0.8em; letter-spacing: 0.06em; background: none;
    border: 1px solid var(--gold-dim); color: var(--muted); }
  .wb.mark-off { display: none; }
  body.marks-on .wb.mark-off { display: inline-flex; }
  body.marks-on .wb.mark-off .w { color: var(--muted); }
  /* RULE 10 ON THE PAGE: a brick gap is the space the scribes leave inside a
     song line. The zone carries the restore's stand-in glyph; the page draws
     the space, not the glyph, and rules a faint line under it so the gap is
     seen as a gap and not as a missing word. RULE 12: a letter the scribes
     wrote large, small, suspended or dotted is drawn so; the mark is on the
     letter and the word keeps its count and its key. */
  /* RULE 10: a brick gap is a ruled span the width the scribe left — a hairline
     and two ticks — so it reads as space and never as a word with no text. It
     prints nothing under itself; the sentence lives in its card. */
  .wb.mark[data-mark="BRICK_GAP"] .w { color: transparent; min-width: 2.6em; background: none;
    border: 0; border-bottom: 1px solid var(--gold); border-radius: 0; position: relative; padding: 0 0.2em; }
  .wb.mark[data-mark="BRICK_GAP"] .w::before, .wb.mark[data-mark="BRICK_GAP"] .w::after {
    content: ""; position: absolute; bottom: -1px; width: 1px; height: 6px; background: var(--gold); }
  .wb.mark[data-mark="BRICK_GAP"] .w::before { left: 0; } .wb.mark[data-mark="BRICK_GAP"] .w::after { right: 0; }
  .wb.mark[data-mark="BRICK_GAP"] .g { display: none; }
  /* RULE 6: the inverted nun stands at the words' own size in its own outlined
     tile, like the ink it is; it had been a hairline a reader had to hunt for.
     Nothing in English stands under it: a runner is a licensed reading, and
     this page has none for a scribal mark, so the sentence waits on the card
     (owner, 2026-09-11: "let someone click it to find out"). */
  .wb.mark[data-mark="INVERTED_NUN"] .w { font-size: 1.05em; padding: 0 0.35em; letter-spacing: 0; }
  .wb.mark[data-mark="INVERTED_NUN"] .g { display: none; }
  /* RULE 4: the empty verse is one row — the edition's own dash in its tile and
     a rule across the line. Nothing in English stands on the line: the dash is
     what the edition prints, and what it means waits on the card (owner,
     2026-09-11: "if its empty we can make it empty"). */
  .wb.mark[data-mark="EMPTY_VERSE"] { display: flex; flex-direction: row; align-items: center; width: 100%; gap: 0.6rem; }
  .wb.mark[data-mark="EMPTY_VERSE"] .w { font-size: 1em; letter-spacing: 0; order: 1; padding: 0 0.45em; }
  .wb.mark[data-mark="EMPTY_VERSE"]::before { content: ""; order: 2; flex: 1 1 auto; border-top: 1px solid var(--gold); }
  .wb.mark[data-mark="EMPTY_VERSE"] .g { display: none; }
  /* THE CHANNELS ON THE PAGE · color-channel-rule-v2, ruled 2026-09-10.
     A channel says who is speaking, and that is the whole of it. The corpus
     speaks in tola'at shani; the reading offered for one of its words speaks
     in tekhelet, because a dictionary said it and not the source; this
     project speaks in argaman, and is the only voice licensed by nobody.
     This began as a URL parameter tried on one book. It is the page now. */
  /* THE INK CARRIES THE CHANNEL, MUTED. Ruled 2026-09-11 off six mockups on
     the real page: the Hebrew is written in a quiet rose-red and its reading
     in a quiet blue, with nothing behind either of them — no wash, no box on
     the Hebrew, and only the gold hairline around the reading so it stays a
     label and not a second line of text. The washes of 2026-09-10 were right
     about one thing and it is kept: what says who is speaking must be
     nameable at a glance. They were wrong about the cost: a page of filled
     tiles is a page of tiles, and this is a page of words.
     The one ink of the page — argaman — stays on everything that is ours. */
  .wb .w { color: var(--shani-ink); border-radius: 0.5em; padding: 0.02em 0.3em;
    background: none; }
  .wb > .g, .wjoin > .g { color: var(--tekhelet-ink); border-color: transparent;
    background: none; }

  :root[data-accent="halo"] .wb .w { background: none; padding: 0;
    text-shadow: 0 0 2.5px var(--halo-shani), 0 0 1px var(--halo-shani); }
  :root[data-accent="halo"] .wb > .g,
  :root[data-accent="halo"] .wjoin > .g { background: none;
    text-shadow: 0 0 2px var(--halo-tekhelet); }
  .lm-large { font-size: 1.45em; line-height: 0.9; }
  .lm-small { font-size: 0.68em; }
  .lm-suspended { vertical-align: 0.5em; font-size: 0.82em; }
  .lm-dotted { color: var(--shani); }
  /* THE STAMP. The count of this book on every named axis, and beside it the
     figures other men reached for the same book: a row per witness, the
     difference shown with its sign. Gold is exact, scarlet differs, the linen
     of the page where nobody published a figure. The color reinforces the
     number and the glyph and never carries the meaning alone. The rows light
     once, top to bottom, and hold still for a reader who asked for still. */
  #stamp { margin: 0.6rem 0 0; max-width: 62rem; padding: 0; font-size: 0.8rem; }
  /* THE COUNT IS A HANDLE, like the contents and the commentary index beside
     it, and for the same reason they are. The owner's ruling of 2026-09-07
     put the count on the book's own page, and it belongs there; what nobody
     ruled was that it should stand between a reader and the first word. Five
     figures, four witness rows and a paragraph came to 285px of an 915px
     phone, and with the masthead, the modes and the two other handles above
     it the first word of every book on the shelf opened below the fold —
     1,128px down in Amos, which check-contents-shut-v1 caught the day it
     first ran. Shut, this says what it is and what the witnesses made of it;
     pressed, the whole comparison is there, unchanged. */
  #stamp #stampHead { display: flex; align-items: center; gap: 0.55rem; width: 100%; text-align: left;
    background: var(--panel2); border: 1px solid var(--line);
    border-inline-start: 3px solid var(--gold-dim); border-radius: 0.5rem;
    padding: 0.5rem 0.85rem; margin: 0; cursor: pointer;
    font: inherit; color: var(--shesh); }
  #stamp #stampHead .toc-t { font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; }
  #stamp #stampHead .toc-n { font-size: 0.78rem; color: var(--muted); }
  #stamp #stampHead .toc-n .differs { color: var(--argaman); font-weight: 600; }
  #stamp #stampHead::after { content: "\25be"; margin-inline-start: auto; font-size: 0.9rem;
    color: var(--gold-dim); transform: rotate(-90deg); transition: transform 0.12s; }
  #stamp #stampHead[aria-expanded="true"] { color: var(--sel); border-inline-start-color: var(--sel); }
  #stamp #stampHead[aria-expanded="true"]::after { transform: none; color: var(--sel); }
  #stamp #stampHead:hover { color: var(--ink-strong); border-color: var(--muted); }
  #stampBody[hidden] { display: none; }
  #stampBody { border-top: 1px solid var(--gold-dim); border-bottom: 1px solid var(--gold-dim);
    margin-top: 0.4rem; padding: 0.35rem 0 0.4rem; overflow-x: auto; }
  /* THE DESK. The count used to be a sentence, and a sentence is the one shape
     a number cannot be read in at a glance. Five figures, each under its axis,
     each over what the witnesses say about that axis: a mark per witness in
     the stamp's own order, gold where they agree and scarlet with the signed
     difference where they do not. No witness is put ahead of another and none
     is summarised away; the table underneath is still the whole comparison,
     witness by witness. Owner, 2026-09-07: more space, fewer words. */
  #stamp .desk { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
    gap: 0.5rem 1.2rem; margin: 0.15rem 0 0.7rem; }
  #stamp .desk .cell { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
  #stamp .desk .k { font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
  #stamp .desk .v { font-family: ui-monospace, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums;
    font-size: 1.45rem; line-height: 1.1; color: var(--ink-strong); }
  #stamp .desk .d { font-family: ui-monospace, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums;
    font-size: 0.7rem; color: var(--faint); display: flex; gap: 0.45rem; flex-wrap: wrap; }
  #stamp .desk .d .exact { color: var(--ink-strong); }
  #stamp .desk .d .differs { color: var(--argaman); font-weight: 600; }
  @media (max-width: 560px) { #stamp .desk { grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr)); }
    #stamp .desk .v { font-size: 1.2rem; } }
  #stamp table { border-collapse: collapse; font-variant-numeric: tabular-nums; }
  #stamp td { padding: 0.1rem 0.7rem 0.1rem 0; vertical-align: baseline; white-space: nowrap; line-height: 1.45; }
  #stamp td.wit { white-space: normal; color: var(--muted); max-width: 26rem; }
  #stamp td.ax { color: var(--muted); }
  #stamp td.num { text-align: right; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.82rem; color: var(--ink); }
  #stamp td.why { color: var(--faint); font-style: italic; white-space: normal; max-width: 16rem; }
  #stamp .cls { font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); margin-inline-end: 0.45rem; }
  #stamp tr.exact td.delta, #stamp tr.exact td.glyph { color: var(--ink-strong); font-weight: 600; }
  #stamp tr.differs td.delta, #stamp tr.differs td.glyph { color: var(--argaman); font-weight: 600; }
  #stamp tr.no_witness td { color: var(--argaman-dim); }
  #stamp tr { animation: stamp-flash 1100ms ease-out both; }
  @keyframes stamp-flash { 0% { box-shadow: inset 0 0 0 1px var(--sel-dim); } 100% { box-shadow: inset 0 0 0 1px transparent; } }
  @media (prefers-reduced-motion: reduce) { #stamp tr { animation: none; } }
  /* On a narrow screen the strip stays a strip: one line per witness, the
     witness's name cut with an ellipsis (the whole of it rides in the hover
     and in the receipts), the layer note folded away. */
  @media (max-width: 600px) {
    #stamp td.wit { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 9.5rem; }
    #stamp td.why { display: none; }
    #stamp td { padding-right: 0.45rem; }
  }
  #stamp .stamp-note { color: var(--faint); font-style: italic; margin: 0.3rem 0 0; }
  #stamp .stamp-warn { color: var(--argaman); margin: 0.3rem 0 0; }
  #demoLine { margin: 0.35rem 0 0; font-size: 0.82rem; color: var(--argaman); line-height: 1.55; }
  #demoLine .demo-credit { color: var(--faint); overflow-wrap: anywhere; }
  header.top p#meta { margin: 0.55rem 0 0; font-size: 0.8rem; color: var(--muted); max-width: 60rem; }
  .receipts-btn { background: none; border: 0; border-bottom: 1px dotted var(--gold-dim);
    color: var(--link); font: inherit; font-size: 0.8rem; cursor: pointer; padding: 0; }
  .receipts-btn:hover { color: var(--ink-strong); }
  .receipts-full { display: block; margin-top: 0.4rem; color: var(--faint); }
  .receipts-full[hidden] { display: none; }
  /* A work the ledger has not named in Hebrew keeps its English locator, but
     the locator does not get to look like a title. */
  header.top h1 .he-t.unnamed { color: var(--argaman); font-size: 0.92rem; font-style: italic; }
  /* the name slot's absence, same voice as the title slot's */
  header.top h1 .en-t.unnamed { color: var(--argaman); font-size: 0.92rem; font-style: italic;
    font-variant: normal; letter-spacing: normal; }
  a { color: var(--link); }
  header.top a { color: var(--link); text-decoration: none; border-bottom: 1px solid var(--chip-line); }
  header.top #home a.home { border-bottom: 1px solid var(--line); }
  header.top a:hover { color: var(--ink-strong); border-bottom-color: var(--ink-strong); }

  /* contents */
  #toc { max-width: 48rem; margin: 1.3rem auto 0; padding: 0 1.5rem; }
  /* Fifty chapters is the whole screen on a phone before a word of the book has
     been reached, so the grid arrives shut and says how much is behind it. */
  /* Shut, this used to be a faint grey line the width of two words, and a
     reader who knew it was there took twenty seconds to find it. A control
     that has to be hunted for is not a control. It is now the same object as
     every other thing on this page that can be pressed — a bordered pill in
     linen — and it carries the count, so the press is worth making before it
     is made. */
  #toc #tocHead { display: flex; align-items: center; gap: 0.55rem; text-align: left;
    background: var(--panel2); border: 1px solid var(--line);
    border-inline-start: 3px solid var(--gold-dim); border-radius: 0.5rem;
    padding: 0.5rem 0.85rem; margin: 0 0 0.4rem; cursor: pointer;
    font: inherit; color: var(--shesh); }
  #toc #tocHead .toc-t { font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; }
  #toc #tocHead .toc-n { font-size: 0.78rem; color: var(--muted); }
  #toc #tocHead::after { content: "\25be"; margin-inline-start: auto; font-size: 0.9rem;
    color: var(--muted); transform: rotate(-90deg); transition: transform 140ms; }
  #toc #tocHead[aria-expanded="true"] { color: var(--sel); border-inline-start-color: var(--sel); }
  #toc #tocHead[aria-expanded="true"]::after { transform: none; color: var(--sel); }
  #toc #tocHead:hover { color: var(--ink-strong); border-color: var(--muted); }
  #tocBody[hidden] { display: none; }
  /* Contents is a coordinate grid: positions, not content. Plain English
     names the structure ("Part 2", "Chapter 7") — describing a thing is not
     translating it, and an English reader should never be locked out of
     navigation. The words themselves live in the text, where they can be
     tapped. */
  #toc .chs { display: grid; gap: 0.28rem; margin-top: 0.3rem;
    grid-template-columns: repeat(auto-fill, minmax(2.35rem, 1fr)); }
  #toc .chs a { display: flex; align-items: center; justify-content: center; min-height: 2.05rem;
    border: 1px solid var(--line); border-radius: 0.35rem; background: var(--panel2);
    text-decoration: none; font: 0.92rem/1 Georgia, serif; color: var(--ink-strong);
    font-variant-numeric: tabular-nums; transition: border-color 120ms, background 120ms; }
  #toc .chs a:hover { border-color: var(--ink-strong); background: var(--wash); }
  #toc .chs a.on { border-color: var(--sel); color: var(--sel); font-weight: bold; }
  /* the sections of one chapter, opened in place under the grid */
  #secPanel { margin-top: 0.7rem; border: 1px solid var(--line); border-radius: 0.5rem;
    background: var(--panel2); padding: 0.6rem 0.7rem; }
  #secPanel[hidden] { display: none; }
  #secPanel .sp-head { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.5rem;
    font-size: 0.74rem; letter-spacing: 0.14em; font-variant: small-caps; color: var(--faint); }
  #secPanel .sp-he { font-variant: normal; letter-spacing: 0; font-size: 1rem; color: var(--shani); }
  #secPanel .sp-x { margin-inline-start: auto; background: none; border: 0; color: var(--muted);
    font-size: 1.05rem; line-height: 1; cursor: pointer; padding: 0 0.2rem; }
  #secPanel .sp-grid { display: grid; gap: 0.26rem;
    grid-template-columns: repeat(auto-fill, minmax(2.9rem, 1fr)); }
  #secPanel .sp-grid a { display: flex; align-items: center; justify-content: center; min-height: 1.85rem;
    border: 1px solid var(--line); border-radius: 0.32rem; background: var(--panel);
    color: var(--muted); text-decoration: none; font-size: 0.76rem; font-variant-numeric: tabular-nums; }
  #secPanel .sp-grid a:hover { border-color: var(--ink-strong); color: var(--ink-strong); }
  #secPanel .sp-grid a.sp-top { grid-column: span 2; color: var(--ink-strong); font-variant: small-caps;
    letter-spacing: 0.1em; border-color: var(--muted); }

  /* one floating bar, not chrome on every section */
  /* the bar wears the scheme's own panel, veiled — a hard-coded night
     background stood black over the day parchment */
  #nav { position: fixed; z-index: 60; right: 0.9rem; bottom: 0.9rem; display: flex; gap: 0.3rem;
    background: var(--nav-veil, rgba(21, 18, 13, 0.94)); border: 1px solid var(--line); border-radius: 999px;
    padding: 0.3rem; box-shadow: var(--shadow-pop); backdrop-filter: blur(4px); }
  #nav[hidden] { display: none; }
  #nav button { border: 0; background: none; color: var(--muted); font: inherit; font-size: 0.75rem;
    letter-spacing: 0.08em; font-variant: small-caps; cursor: pointer; border-radius: 999px;
    padding: 0.24rem 0.7rem; white-space: nowrap; }
  #nav button:hover:not(:disabled) { color: var(--ink-strong); background: var(--wash); }
  #nav button:disabled { opacity: 0.35; cursor: default; }
  #navPrev, #navNext { font-size: 1rem; padding: 0.14rem 0.55rem; }
  @media (max-width: 520px) { #nav { left: 0.9rem; right: 0.9rem; justify-content: center; } }

  #toc .toc-note { margin: 0.75rem 0 0; font-size: 0.72rem; color: var(--faint); }
  #toc .part { margin: 0 0 0.65rem; }
  #toc .part b { display: block; color: var(--ink-strong); font-variant: small-caps; letter-spacing: 0.1em;
    font-weight: normal; font-size: 0.92rem; margin-bottom: 0.15rem; }
  #toc .part b .he-small { color: var(--ink); font-size: 1rem; margin-left: 0.6rem; }
  #toc a { color: var(--muted); text-decoration: none; font-size: 0.84rem; }
  #toc a:hover { color: var(--link); }

  main { max-width: 48rem; margin: 0 auto; padding: 0.4rem 1.5rem 5rem; }

  .part-head { margin: 3rem 0 0.4rem; padding-top: 1.6rem; border-top: 1px double var(--gold-dim); }
  .part-head .he { direction: rtl; text-align: right; font-size: 1.05rem; color: var(--shani); letter-spacing: 0.04em; }
  .part-head .en { font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--faint); text-align: left; }
  /* Titles are corpus words: same word blocks as the text, sized as a title.
     Gold on the Hebrew per the Y ledger's own color contract (structure). */
  .title-row { direction: rtl; text-align: right; }
  body.en .title-row { direction: ltr; text-align: left; }
  .part-head .title-row .w { font-size: 1.05rem; color: var(--shani); letter-spacing: 0.04em; }
  .node-head .title-row .w { font-size: 1.55rem; color: var(--shani); }
  .title-row .wb { margin-bottom: 0.35rem; }
  .title-row .g { font-size: 0.62rem; max-width: 9em; }
  .node-head .title-row .g { font-size: 0.68rem; }
  .locator { display: block; font-size: 0.74rem; letter-spacing: 0.16em; font-variant: small-caps;
    color: var(--faint); margin-bottom: 0.3rem; }
  .vnum { font-variant-numeric: tabular-nums; }
  .seg-row .vlabel { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--faint); margin-inline-start: 0.4rem; }

  .node-head { margin: 1.9rem 0 0.9rem; }
  .node-head .he { direction: rtl; text-align: right; font-size: 1.55rem; color: var(--shani);
    font-family: "Frank Ruehl CLM", "Frank Ruehl", "David Libre", "SBL Hebrew", Georgia, serif; }
  .node-head .en { font-size: 0.82rem; font-variant: small-caps; letter-spacing: 0.16em; color: var(--ink-strong); margin-top: 0.1rem; }
  /* One register at every head: the same labelled two-row frame the masthead
     uses, sized down to chapter grain. The label column, the quiet slot and
     the force-read row match the masthead's forms so a reader learns the
     frame once. */
  /* The frame is the page's voice, not the corpus's text: labels, registers,
     locators, and absence sentences never ride along in a copy. The same law
     that keeps a reading out of a copied Hebrew verse keeps "commonly force
     read as" out of a drag that crosses a section head — the browser already
     treats unselectable as not-selected, and the copy rewrite follows it.
     The title words inside the frame stay selectable; they are text. */
  .nh-lab, .nh-en, .nh-he.unnamed, .nh-of, .vlabel, .t-lab, .t-note, .t-sug,
  .sug-fold, .en-t, header.top .lic-chip, .vnum, .toc-note, #meta, .byline
    { user-select: none; -webkit-user-select: none; }
  .nh-row { display: flex; align-items: baseline; gap: 0.55rem; flex-wrap: wrap; margin-bottom: 0.15rem; }
  .nh-lab { flex: 0 0 auto; min-width: 7rem; font-size: 0.6rem; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--faint); }
  .nh-en { font-size: 0.88rem; font-variant: small-caps; letter-spacing: 0.14em; color: var(--ink-strong); }
  .nh-of { font-size: 0.74rem; color: var(--faint); }
  .nh-he.unnamed { font-family: Georgia, serif; font-size: 0.8rem; font-style: italic; color: var(--argaman-dim); }
  .nh-row .title-row { margin: 0; }
  /* the ledger's mark for a section, riding beside the coordinate pill */
  .seg-row .v-he { font-size: 0.85rem; color: var(--shesh);
    font-family: "Frank Ruehl CLM", "Frank Ruehl", "David Libre", "SBL Hebrew", Georgia, serif; }

  section.seg { margin: 0 0 1.35rem; }
  /* An omission is drawn as a hole in the page, because that is what it is.
     Muted rather than loud: it is not an error and not a warning, it is a
     statement that this work is served in part and this is where the part
     is missing. */
  .omission { margin: 1.1rem 0 1.35rem; padding: .7rem .9rem; display: grid; gap: .28rem;
    border-inline-start: 3px solid var(--rule, #8b7f69); opacity: .82; }
  .omission .om-mark { letter-spacing: .12em; opacity: .55; }
  .omission .om-what { font-size: .92em; color: var(--argaman); }
  .omission .om-why { font-size: .84em; opacity: .75; font-style: italic; color: var(--argaman-dim); }
  .seg-row { display: flex; align-items: baseline; gap: 0.55rem; margin-bottom: 0.25rem; direction: ltr; }
  .vnum { font-size: 0.72rem; color: var(--ink-strong); border: 1px solid var(--gold-dim);
    background: var(--panel); border-radius: 0.5rem; padding: 0.05rem 0.5rem; letter-spacing: 0.06em; }
  .vnum.at { color: var(--sel); border-color: var(--sel); font-weight: bold; }
  .drift-chip { font-size: 0.68rem; color: var(--argaman); border: 1px dashed var(--argaman-dim); border-radius: 0.5rem;
    padding: 0.05rem 0.45rem; letter-spacing: 0.03em; }
  .he-text { direction: rtl; text-align: right; font-size: 1.5rem; line-height: 1.35; margin: 0;
    font-family: "Frank Ruehl CLM", "Frank Ruehl", "David Libre", "SBL Hebrew", Georgia, serif; }
  /* A commentary is not a book of its own; it belongs to the section it
     comments on. Turned on, it reads beneath the verse in the same word
     blocks, a size down, so the base text stays the text. */
  .c-inline { direction: rtl; text-align: right; margin: 0.15rem 0 0; padding: 0.35rem 0.5rem 0.2rem;
    border-inline-end: 2px solid var(--shani-dim); border-radius: 0.4rem;
    background: var(--surface-c); }
  .c-inline .wb { margin: 0 0.14rem 0.45rem; }
  .c-inline .w { font-size: 1.12rem; color: var(--c-word);
    font-family: "Frank Ruehl CLM", "Frank Ruehl", "David Libre", "SBL Hebrew", Georgia, serif; }
  .c-inline .g { font-size: 0.6rem; max-width: 8em; }
  .c-inline[hidden] { display: none; }
  /* Hebrew on Hebrew: a dictionary's entry on the card, laid out like the
     verse — a run of blocks, Hebrew over its English; a quoted line in a gold
     box, because gold is line work and a quotation is a line drawn around
     somebody else's words */
  .hoh-slot:empty { display: none; }
  /* the parts of a word nothing defines: blocks like any other, Hebrew over
     its English, two witnesses stacked where they differ */
  .parts-slot:empty { display: none; }
  .parts { margin: 0.4rem 0 0; padding: 0.45rem 0.6rem 0.35rem; background: var(--surface-c);
    border: 1px solid var(--line-c); border-radius: 0.6rem; }
  .parts .r-label { margin: 0 0 0.2rem; }
  .parts-say, .parts-src { font-size: 0.7rem; line-height: 1.45; color: var(--muted); margin: 0.2rem 0 0; direction: ltr; text-align: left; }
  .parts-src { border-top: 1px solid var(--line-c); padding-top: 0.35rem; margin-top: 0.45rem; }
  .parts-run { display: flex; flex-wrap: wrap; flex-direction: row-reverse; justify-content: flex-start;
    gap: 0.1rem 0.5rem; margin: 0.5rem 0 0.1rem; }
  .pb { display: inline-flex; flex-direction: column; align-items: center; gap: 0.08rem; margin-bottom: 0.4rem; }
  .pw { font-size: 1.15rem; line-height: 1.3; color: var(--shani-ink); }
  .prole { font-size: 0.52rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--faint); direction: ltr; }
  .pen { font-size: 0.62rem; line-height: 1.25; color: var(--tekhelet-ink); direction: ltr; text-align: center; max-width: 8em; }
  .pwit { font-style: normal; font-size: 0.52rem; letter-spacing: 0.08em; color: var(--faint); margin-inline-end: 0.2rem; }
  body.en .parts-run { direction: ltr; flex-direction: row; }
  /* the edition mark: a word the Leningrad codex spells otherwise wears a
     dotted gold rule while the toggle asks for it — gold is line work */
  body.ed-mark .wb[data-ld] .w { text-decoration: underline dotted var(--gold); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
  .hoh { margin: 0.4rem 0 0; padding: 0.45rem 0.6rem 0.3rem; background: var(--surface-c);
    border: 1px solid var(--line-c); border-radius: 0.6rem; max-height: 42vh; overflow: auto; }
  .hoh .r-label { margin: 0 0 0.3rem; }
  .hoh-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; }
  .hoh-hw { font-size: 1.3rem; line-height: 1.3; color: var(--shani-ink); }
  .hoh-head .lic-chip.on { color: var(--sel); border-color: var(--sel-dim); }
  .hoh-held, .hoh-silent, .hoh-src { font-size: 0.72rem; line-height: 1.45; color: var(--muted); margin: 0.35rem 0 0; direction: ltr; text-align: left; }
  .hoh-silent .hoh-hw { font-size: 1.05rem; }
  /* v-volume-rule-v1 · how much commentary the corpus lane has indexed here.
     A count, not an offer: no border, no chip, nothing that reads as pressable,
     because nothing about it opens.

     AND IT GIVES WAY FIRST. placeHud caps the card to the room beneath the
     word and releases that cap when fitBands reports the bands can no longer
     hold a row each — so every pixel of fixed prose on this card is a pixel
     the controls may have to buy back by standing the card somewhere else.
     A first draft of this panel took 134 of them in three paragraphs and cost
     the card its place under the word on a 360x640 phone, which the overlaps
     gate caught. It is one sentence now, and capped: the least important
     thing on the card is the first thing to scroll. */
  .vol { margin: 0.45rem 0 0; padding: 0.35rem 0 0; border-top: 1px solid var(--line-c);
    direction: ltr; text-align: left; max-height: 4.2rem; overflow-y: auto; }
  .vol-say { margin: 0; font-size: 0.72rem; line-height: 1.4; color: var(--muted); }
  .vol-lead { color: var(--ink); }
  .vol-n { font-variant-numeric: tabular-nums; color: var(--shani-ink); }
  .hoh-run { position: relative; margin: 0.8rem 0 0.2rem; padding: 0.5rem 0.5rem 0.15rem; text-align: right; }
  .hoh-quote { border: 1px solid var(--gold); border-radius: 0.6rem; }
  .hoh-prose { border-inline-end: 2px solid var(--shani-dim); }
  .hoh-ref { position: absolute; top: -0.55rem; left: 0.5rem; font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--gold); background: var(--surface-c); padding: 0 0.3rem; direction: ltr; }
  .hoh-run .wb { margin: 0 0.14rem 0.45rem; }
  .hoh-run .w { font-size: 1.05rem; }
  .hoh-run .g { font-size: 0.58rem; max-width: 8em; }
  .hoh-src { border-top: 1px solid var(--line-c); padding-top: 0.35rem; }
  body.en .hoh-run { direction: ltr; text-align: left; }
  .c-inline .lab { display: block; direction: ltr; text-align: left; font-size: 0.62rem;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin-bottom: 0.1rem; }
  .c-inline .lab .lic-chip { text-transform: none; letter-spacing: 0.02em; }
  /* Where the attachment came from, said in place. The card used to carry
     this; the commentary reads here now, so the basis reads here too. */
  .c-inline .c-att { display: block; direction: ltr; text-align: left; font-size: 0.64rem;
    color: var(--faint); margin-top: 0.15rem; }
  /* Held: in the record, not printed here. It is not an error and not a gap —
     it is the page saying what it is holding and why, in the place the text
     would have stood. */
  .c-inline.c-held { direction: ltr; text-align: left; font-size: 0.74rem;
    color: var(--argaman); font-style: italic; }
  body.en .c-inline { direction: ltr; text-align: left; }
  body.en .c-inline .g { font-size: 0.86rem; max-width: 11em; }
  body.en .c-inline .w { font-size: 0.92rem; }
  /* A commentary opened in the line follows the reader it was opened in. It
     was left running right to left in the English reader, so the verse above
     it ran one way and the commentary under it ran the other — two directions
     on one screen, from one setting. */
  body.en .c-mark-text { direction: ltr; text-align: left; }
  body.en .c-mark-text .g { font-size: 0.86rem; max-width: 11em; }
  body.en .c-mark-text .w { font-size: 0.92rem; }
  .wb { display: inline-flex; flex-direction: column; align-items: center; vertical-align: top;
    margin: 0 0.16rem 0.55rem; cursor: pointer; }
  .w { display: block; order: 1; border-bottom: 1px dashed transparent; border-radius: 2px; }
  .wb:hover .w { color: var(--hover-ink); border-bottom-color: var(--hover-line); }
  /* A word the chain holds is printed as the chain has it and not touched. But
     some of what it holds is not a word — the Miqra source's section markers
     arrive as a run of markup with no break in it, and an unbreakable run wider
     than the column pushed the whole page sideways, which is how a phone ends
     up with the text off the left edge and dead space on the right. It breaks
     where it must to stay in the column. Nothing is removed or rewritten: this
     is where the line wraps, not what the line says. */
  .wb.held { opacity: 0.45; cursor: default; max-width: 100%; }
  .wb.held .w { overflow-wrap: anywhere; word-break: break-word; }
  /* THE HELD WORD IS BOXED IN GOLD, THE WHOLE BLOCK — Hebrew and reading
     together — and the card is that box projected forward: two gold lines
     run from the box's far corners to the card's near corners, so the card
     reads as the selection brought up close (owner, 2026-09-11, drawn on a
     screenshot: "a big gold box around the entire selected"). Nothing is
     filled and nothing changes color; the outline costs no layout. */
  .wb.active { outline: 1.5px solid var(--gold); outline-offset: 3px; border-radius: 0.4rem; }
  .wb.active .w { background: none; }
  .wb.mark.active .w { background: none; border-color: var(--gold); }
  /* A word the reader has ruled on keeps a mark after the card closes. Without
     it, closing the card left nothing to say which word had just been changed,
     and the reader had to hold that in their head. It is a tint rather than a
     border so nothing on the line moves when it appears. */
  /* A word with its commentary standing open beneath it. */
  /* Opening a commentary on a word is something the reader did, so the word
     wears the selection, not the structure. */
  .wb.c-open { border-radius: 0.25rem; box-shadow: inset 0 -2px 0 var(--sel-dim); }
  .wb.c-open .w { text-decoration: underline dotted; text-underline-offset: 0.18em; text-decoration-color: var(--gold-dim); }
  /* A word the reader has ruled on keeps a mark after the card closes. That is
     the point of it: the page holds the list of what has been worked so the
     reader does not have to. But it kept that mark as the same filled blue box
     that means "open right now", four percent lighter — so ruling on a second
     word left two filled boxes on the line and the first one read as a
     selection that had failed to clear. Nothing was stuck; two different
     things were wearing one appearance.
     A live state is filled. A remembered one is underlined. Same color,
     because the ledger gives every one of these to the reader; different
     weight, because only one of them is happening now. */
  /* A ruling is marked with a tint and has to stay one. It was briefly changed
     to an underline here, to separate the word standing open from the words
     already worked — a real complaint, that both looked live. But the mark
     being a tint is a rule with a check on it (check-ruled-mark-v1: "the mark
     is a tint, not a border that moves the line"), and that check was not in
     the container when the change was made, so nothing said so. The complaint
     is answered by the difference in strength instead: the live word is more
     than twice the tint of a word already ruled on, and carries the reading
     color and underline on its own letters besides. */
  .wb.chosen { box-shadow: inset 0 -2px 0 -1px var(--sel-dim); border-radius: 0.25rem; }
  .wb.chosen.active { box-shadow: inset 0 0 0 1px var(--sel); }
  /* a word that is both ruled on and standing open keeps the open edge */
  .wb.chosen.c-open { box-shadow: inset 0 0 0 1px var(--sel), inset 0 -4px 0 -2px var(--sel); }
  /* An occurrence written with a maqaf is one block and more than one W. The
     block never splits; the W inside it light and open one at a time, and the
     maqaf itself prints without opening, because it is not a W. */
  .mq-open { cursor: pointer; }
  .mq-open:hover, .mq-open.on { color: var(--sel); }
  /* RULE 2 ON THE PAGE: A JOINED RUN IS ONE BREATH.
     A maqaf joins its words into one breath and one accent, so they are drawn
     touching — no space anywhere inside the run — with one rule under the whole
     compound and a tick at each C0 boundary. The tick is what a gap used to be:
     a reader still sees where one word ends and the next begins, without the
     compound being pulled apart into separate words on the line.
     The gap was not a margin. Every word block is a column — ink over reading —
     and shrinks to the WIDER of the two, so a fifteen-pixel word under a sixty-
     pixel reading sat centred in a sixty-pixel block and the ink of its
     neighbours stood twenty pixels away. Inside a run the readings therefore
     come out of the ink row and print once, under the run, joined as the reader
     joins the parts of any one form. Each word keeps its own reading element,
     hidden, because the export reads it there and a ruling repaints it there. */
  .wjoin { white-space: nowrap; display: inline-flex; flex-direction: column;
    align-items: center; vertical-align: top; margin: 0 0.16rem 0.55rem; }
  .wjoin .wj-ink { display: inline-flex; align-items: flex-start;
    border-bottom: 1px solid var(--gold-dim);
    /* THE PIECES NEVER TURN AROUND. This row inherited its direction from
       whatever container it landed in, so in the English reader a maqaf
       compound drew its second piece first — the record's own order,
       reversed, inside a single form. parts-direction-rule-v1 already says
       the first part of a Hebrew row is the rightmost; it says nothing about
       which reader is open, and neither does this. */
    direction: rtl; }
  .wjoin .wb { margin: 0; }
  .wjoin .wb > .g { display: none; }
  .wjoin .wj-ink > .wb + .wb { border-inline-start: 1px solid var(--gold-dim); }
  .wjoin > .g { display: block; text-align: center; }
  /* The English reader prints a reading ABOVE its ink (body.en .g order 1,
     body.en .w order 2). A run's ink wrapper carries no order of its own, so
     a joined word printed its reading BELOW its ink while every word beside
     it printed above, and the eye met the readings out of the order the
     corpus emitted them in. The wrapper takes the swap too. */
  body.en .wjoin .wj-ink { order: 3; }
  .q-mark { font-size: 0.62em; vertical-align: super; color: var(--muted);
    margin-inline-start: 0.1em; cursor: help; }
  .wb.has-q .w { border-bottom: 1px dotted var(--muted); }
  .wb.multi:hover .w { color: inherit; border-bottom-color: transparent; }
  .wb.multi.active .w { color: inherit; border-bottom: 1px dashed transparent; }
  .wr { border-bottom: 1px dashed transparent; border-radius: 2px; }
  .wr:hover { color: var(--hover-ink); border-bottom-color: var(--hover-line); }
  /* the open half of a pair is underlined in its own ink; no fill, no amber */
  .wr.on { border-bottom: 1px solid var(--shani-ink); }
  /* The half of a source-marked pair that the shown English is reading from.
     An underline in the selection role, not a new color: it marks provenance
     of the gloss, never a choice about the text — both halves keep printing
     exactly as the source wrote them, and text-decoration moves no glyph. */
  .wb.kq .wr.backs-en { text-decoration: underline; text-decoration-color: var(--tekhelet-ink);
    text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
  /* ...and the same mark on the English it backs: two underlines in the same
     color, stacked, are the two ends of one claim — this reading, that half.
     The connector is the pair of marks, not a drawn line; it costs no ink the
     eye must climb over and moves nothing. Only pairs wear it: a plain word's
     gloss has one possible source, so a mark would say nothing. */
  /* A variant site: the source's own mark is already in the carrier; the
     dotted line only says a record stands behind it. Structure's color,
     because the mark is the text's own apparatus, not a reader's act. */
  .wb.vs .w { text-decoration: underline dotted; text-decoration-color: var(--muted);
    text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
  .wb.kq .g.backs-en { text-decoration: underline; text-decoration-color: var(--tekhelet-ink);
    text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
  .mq { color: var(--shani-dim); }
  /* The reading under a word is shown whole. It used to run one line and end in
     an ellipsis, which was the honest thing to do when the average reading was
     45 characters and the tail ran to 435 — the page could not have carried
     them. Under the provider declarations the average is 23, so the tail is
     gone and the ellipsis has nothing left to hide. It wraps in a narrow
     column instead of widening the row, so a long reading costs its own word a
     few lines rather than costing the whole line its shape. The height is
     settled at paint and never changes afterwards: nothing here moves while
     the reader is reading. */
  /* The reading stands centred under its own word. It used to inherit the
     column's alignment, so in the Hebrew reader a reading long enough to take
     two lines set both of them hard right — under the right-hand edge of its
     word and up against the word beside it, which reads as a gap in the wrong
     place. It belongs under the word it is a reading of. */
  .g { display: block; order: 2; direction: ltr; text-align: center;
    font: 0.66rem/1.25 Georgia, serif; color: var(--tekhelet);
    letter-spacing: 0.02em; margin-top: 0.06rem; max-width: 11em;
    white-space: normal; overflow-wrap: anywhere; overflow: hidden; }
  /* 4 · A word the store has no reading for still holds the line the reading
     would have stood on. Without it the block is one line shorter than its
     neighbours, and in the English reader — where the reading leads and the
     Hebrew rides beneath — the Hebrew climbs into the reading's row and the
     line stops being a line. Nothing is printed in the space; it is kept. */
  .g.bare { min-height: 1.25em; }
  body.en .g.bare { min-height: 1.3em; }
  /* the held word's reading is inside the block's box and wears none of its own */
  .wb.active .g { background: none; }

  /* English reader (LTR): the gloss line leads, the Hebrew rides beneath. */
  /* THE LINE'S DIRECTION IS A READER MODE. THE PIECES OF A WORD ARE NOT.
     The owner, 2026-09-08: "i think entire word order can be justified, but i
     dont think theres a justification for maqaf order going opposite."
     So this stands: in the English reader the verse is laid out left to right,
     word after word, because that mode exists for a reader who reads English
     and the order of whole words is a way of presenting them. What may never
     follow the mode is the order of the parts INSIDE one word — a maqaf
     compound is one form the record wrote in one order, and drawing its pieces
     backwards is not presentation, it is a different word. The rule for that
     is below, on .wj-ink, and it does not ask what mode the page is in. */
  body.en .he-text { direction: ltr; text-align: left; }
  /* In the English reader the gloss is the text, not a label on it. It clamped
     at two lines for the same reason the Hebrew-side one clipped at one, and
     it comes off for the same reason: there is no longer a tail to hide. */
  /* overflow: hidden, as on the Hebrew side. It was visible here on the
     reasoning that the reading is the text in this reader and should not be
     hidden — but the box is still held at the height it painted at, so a longer
     reading did not extend the box, it spilled out of it and printed over the
     Hebrew beneath. Nothing on this page may move while the reader is reading,
     so the box cannot grow; what it can do is stop at its own edge. The whole
     reading is on the card and on the line's own title. */
  body.en .g { order: 1; font-size: 0.98rem; line-height: 1.3; color: var(--tekhelet); margin-top: 0; max-width: 12em;
    white-space: normal; display: block; overflow: hidden; }
  body.en .w { order: 2; font-size: 1.02rem; color: var(--en-word); margin-top: 0.04rem; }
  body.en .wb.active .g { background: none; }

  #modeRow { margin-top: 0.75rem; display: flex; gap: 0.55rem; align-items: flex-start; flex-wrap: wrap; }
  /* the rail: the page's toggles as one control block (see the header) */
  .rail { max-width: 62rem; margin: 0.6rem 0 0.2rem; border: 1px solid var(--line); border-radius: 0.6rem;
    background: var(--panel); padding: 0.45rem 0.7rem; }
  .rail > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.6rem; }
  .rail > summary::-webkit-details-marker { display: none; }
  .rail .k { font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
  .rail .now { font-size: 0.8rem; color: var(--ink); }
  .rail .now b { font-weight: 600; color: var(--ink); }
  .rail .now i { color: var(--faint); font-style: normal; padding: 0 0.2rem; }
  .rail .row { display: grid; grid-template-columns: 6.2rem 1fr; gap: 0.35rem 0.6rem; align-items: baseline;
    padding: 0.42rem 0 0; margin-top: 0.42rem; border-top: 1px dotted var(--chip-line); }
  .rail .row .lab { font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
  .rail .row .why { grid-column: 2; font-size: 0.66rem; color: var(--faint); font-style: italic; margin-top: -0.1rem; }
  .rail .row .def-order { margin: 0; }
  .rail .row.dead .lab { color: var(--faint); }
  @media (max-width: 30rem) { .rail .row { grid-template-columns: 1fr; } .rail .row .why { grid-column: 1; } }
  /* Which way the words run, and nothing else. The two readers differ in the
     direction of the flow, so that is what is said under them. */
  .mode-pick { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
  .mode-dir { font-size: 0.64rem; letter-spacing: 0.12em; color: var(--faint); }
  .mode-btn { border: 1px solid var(--line); background: var(--panel2); color: var(--muted);
    border-radius: 999px; padding: 0.32rem 1.15rem; font: inherit; font-size: 0.86rem; cursor: pointer; }
  .mode-btn.on { color: var(--sel); border-color: var(--sel); font-weight: bold; }

  /* The HUD floats. The Hebrew never moves — law of the house. */
  /* A card that always carries a whole record needs room for one; 55vh put
     the source and its license below the fold on a phone. */
  /* overflow-y: auto, not hidden. Every band on this card has a floor, and on a
     window short enough that the floors themselves do not fit, hidden would
     have cut the bottom off — which is the source line, the license, the one
     thing here that is not the reader's to lose. Scrolling puts it below the
     fold; hiding loses it. At any ordinary height nothing scrolls, because
     nothing has to. */
  #hud { position: fixed; z-index: 70; max-width: 23rem; width: min(23rem, 92vw); max-height: min(84vh, 50rem);
    display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden;
    background: var(--panel); border: 1px solid var(--sel-dim); border-radius: 0.7rem;
    padding: 0.85rem 1.05rem; box-shadow: var(--shadow-card); }
  /* what scrolls, and what does not */
  /* The card is a stack of bands, and each keeps its own share.
     One region that scrolled as a whole meant whichever band came first could
     spend the entire card: eight divisions took three rows of pills, the block
     row took a fourth, and every selectable reading was below the fold on a
     card that had just opened. A reader who cannot see one thing to press has
     been handed a card that does nothing.
     So each band is bounded and scrolls inside itself, and the readings — the
     thing the reader came to press — take what is left and never less than two
     rows. Nothing is dropped to achieve it: every division, every block and
     every reading is in its band, whole and reachable. */
  /* The rows region shrinks; what it must never do is shrink below the floors
     of the bands inside it, because a band that overflows here is clipped at
     this edge and its pills end up behind the record — present, on screen, and
     dead to a finger. It is held off that by arithmetic rather than by a
     keyword: the bands beside the readings are capped at a fixed height, the
     record is capped at a fraction of the window, and the readings' floor is a
     single row — so what is left for the readings is never less than the row
     they are owed. (min-content is the wrong keyword here: a wrapping row's
     min-content height is its height at its narrowest, which for two hundred
     pills is enormous, and the card scrolled at every size.) */
  #hud .rows { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
    overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
  /* THE BANDS' REGION SCROLLS, THE PAGE DOES NOT. When the room under a word
     could not seat every band, the card used to give its height back — grow
     tall, come off its cap — and the placement answered by scrolling the
     document to make room, so the word moved out from under the finger that
     pressed it. And when it did fit, a division band squeezed to a single row
     was a selector too small to select with. Both were the same mistake: the
     card treating its own height as the only thing that could give. It can
     scroll. One region, one gesture, in place. The record and its source are
     siblings of this region, not inside it, so they never scroll away. */
  /* overflow: hidden on the band itself, so a band can never paint outside its
     own share. Without it a pill box whose floor was taller than the band's
     rendered straight over the record below and the reader pressed the record
     instead of the reading — the pill was there, on screen, and dead. */
  #hud .band { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
  #hud .band > .r-label { flex: 0 0 auto; }
  /* overflow-x hidden as well as overflow-y auto: setting one axis to auto makes
     the other auto too, and a horizontal scrollbar nobody asked for took nine
     pixels off the height — so a box given exactly three rows had room to show
     two and a sliver, and the sliver was a pill cut in half. */
  #hud .band > .s-pills, #hud .band > .r-pills { overflow-y: auto; overflow-x: hidden; min-height: 0; }
  /* The structural bands do not shrink. Letting them was the same mistake in a
     new place: a band whose height is decided by what its siblings weigh gets
     squeezed to nothing by the one carrying two hundred readings, and a reader
     could not press a division or a block at all. Their size is decided here
     and nowhere else — a row and a half of pills, then they scroll. */
  /* The floor goes on the box that holds the pressable things, not on the band
     around it: a band held at a minimum whose pill box was still free to shrink
     gave a row of half-cut pills and nothing to press. One whole row always
     stands, a row and a half is the most either takes, and the rest scrolls. */
  /* Every band takes exactly what it is given — no growing into slack, no
     shrinking to make room. The heights are handed out above, in whole rows,
     and a band that could still shrink afterwards undid that: a box given
     three rows sat in a band nine pixels shorter and cut the third one in
     half. */
  #hud .b-cut, #hud .b-cell, #hud .b-read { flex: 0 0 auto; min-height: 0; }
  /* And the record yields before any of them does. It has a floor of its own —
     the source line plus a line of the definition — so yielding never costs the
     license, which is the one thing on this card that is not the reader's to
     lose. Below that floor the provenance goes; the record does not. */
  #hud .prov { flex: 0 1 auto; overflow: hidden; }
  /* The D is the foundational record and it is always on the card. How much of
     the card it takes is not the part that is foundational.
     The old cap was `max-height: 58%`, and it never bound anything: a
     percentage height resolves against a container with a definite height, and
     this card has only a maximum, so the cap computed to none and one long
     record took 91% of the card — the readings, the divisions and the source
     all pushed out by a single definition. So the bound is a length, which
     always resolves; the record's text scrolls inside it; and the source line
     is pinned under it rather than scrolling with it. The reader's law is that
     a selected reading always shows one whole D with its M, and pinning the M
     is how that holds however long the D runs. */
  /* 0 0, not 0 1: a shrinkable D slot loses its share to whichever sibling has
     the bigger content, and a form with two hundred readings has a rows region
     thousands of pixels tall — it took nearly all the shrink and squeezed the
     source line out of the bottom of a slot that was only 7% of the card. The
     rows region is the one that scrolls, so it is the one that gives. */
  /* No floor at all, and none is needed once the slot does not shrink: it takes
     the smaller of what it holds and its cap, and inside it the source line is
     the part that never gives. min-content was tried here and is a trap — a
     block of text's min-content height is its height at its narrowest, so the
     floor came out at 365px on a card capped at 221 and a min beats a max. The
     same keyword had already lied once, in the rows region. */
  /* 0 0, not 0 1. Shrink is handed out in proportion to how much content each
     sibling has, and the rows region carries thousands of pixels of pills — so
     when the card was short both it and the record were driven to their floors
     together, and the record's floor cut the source line off. The rows region
     scrolls inside itself; it is the one that can afford to give, so it gives
     all of it. What bounds the record is its cap, not its neighbours. */
  /* One arrangement at every height: the record and its source share one
     scroll, and the source line sticks to the bottom of it. This used to be
     the short-screen arrangement only, while taller screens got a flex
     column that clipped — and a real phone's font metrics found the seam
     between the two and lost the record entirely, foot standing on nothing.
     The record's floor is three lines, not one: a floor of one line is
     clipping wearing a scrollbar's clothes. */
  #hud .d-slot { flex: 0 0 auto; max-height: max(32vh, 10rem); overflow-y: auto; }
  #hud .d-card { display: block; }
  #hud .d-body { min-height: 3.9rem; }
  #hud .d-foot { position: sticky; bottom: 0; background: var(--panel); padding-top: 0.15rem; }

  /* What is standing under the word right now. The card used to answer this
     only by which pill was lit, and with two hundred pills in a scrolling row
     the lit one is often not on screen — so the reader closed the card to find
     out whether their choice held. It is the first thing under the handle and
     it never scrolls. */
  #hud .r-now { flex: 0 0 auto; margin: 0.1rem 0 0.35rem; padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--line); direction: ltr; }
  #hud .r-now .k { display: block; color: var(--faint); font-size: 0.68rem;
    letter-spacing: 0.08em; text-transform: uppercase; }
  /* Bounded, like every other region on this card. One Strong's route runs to
     four hundred and ninety-two characters, and printed whole it was most of a
     phone — the divisions, the blocks and the record all pushed out of sight by
     the line that was only supposed to say what had been chosen. Three lines,
     then it scrolls. The whole of it is still on its pill and still in the
     record underneath. */
  #hud .r-now .v { display: block; color: var(--tekhelet-ink); background: none;
    padding: 0.15rem 0.45rem; border-radius: 0.4em; font-size: 0.94rem;
    line-height: 1.3; overflow-wrap: anywhere;
    max-height: 3.9em; overflow-y: auto; overflow-x: hidden; }
  #hud .r-now .v.none { color: var(--argaman); font-style: italic; }
  #hud[hidden] { display: none; }
  /* the brick gap's head on the card is the ruled span the line draws, not the
     restore's stand-in box */
  #hud .head b[data-mark="BRICK_GAP"] { color: transparent; display: inline-block; width: 4em;
    position: relative; border-bottom: 1px solid var(--gold); }
  #hud .head b[data-mark="BRICK_GAP"]::before, #hud .head b[data-mark="BRICK_GAP"]::after {
    content: ""; position: absolute; bottom: -1px; width: 1px; height: 6px; background: var(--gold); }
  #hud .head b[data-mark="BRICK_GAP"]::before { left: 0; } #hud .head b[data-mark="BRICK_GAP"]::after { right: 0; }
  /* THE THREAD. While a card is open, one line runs from each held word to
     the card: it leaves the Hebrew tile's own rounded corner, a pixel off the
     arc, and arrives at the nearest point of the card's edge. It leaves in the
     word's color and arrives in the frame's — a gradient along its length —
     so both ends say whose they are. A soft glow under the line; a pin where
     it leaves. An overlay: it moves no text, takes no taps, dies with the card.
     It replaced four dashed lines hung off the block around the Hebrew, which
     made the block look held rather than the word (owner, 2026-09-11). */
  #tether { position: fixed; inset: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 69; }
  #tether .line { fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; }
  /* THE POP. When a card opens it is drawn out of the held box: the two
     lines draw themselves from the box's corners to the card's corners, and
     the card grows from the middle of the edge they land on — a little
     scaled down and tilted back, then upright — so the card reads as the
     selection brought forward, not something that appeared over it. A fifth
     of a second; a drag, a scroll or a re-anchor moves them with no animation. */
  #tether .line { transition: stroke-dashoffset 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); }
  @keyframes hud-pop {
    from { opacity: 0; transform: perspective(900px) rotateX(-7deg) scale(0.93) translateY(6px); }
    to { opacity: 1; transform: none; }
  }
  #hud.pop { transform-origin: var(--pop-x, 50%) var(--pop-y, 0%);
    animation: hud-pop 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  @media (prefers-reduced-motion: reduce) {
    #hud.pop { animation: none; }
    #tether .line { transition: none; }
  }
  /* The head is the handle. A card the reader can move is a card that stops
     being in the way, and a card that is never re-anchored while it is open
     stops moving on its own. It is sticky so the handle is reachable however
     far the record below it has been scrolled. */
  #hud .head { cursor: grab; touch-action: none; flex: 0 0 auto; }
  #hud .head:active { cursor: grabbing; }
  #hud.moved { box-shadow: 0 14px 40px rgba(0,0,0,.6), 0 0 0 1px var(--sel-dim); }
  #hud .head button { cursor: pointer; }
  #hud .head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem;
    flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 0.4rem; margin-bottom: 0.3rem; }
  /* which half of a source-marked pair the card is about, said in words —
     hover titles do not exist on a phone */
  #hud .head .kq-key { flex: 1 1 100%; margin: 0; color: var(--faint);
    font-size: 0.68rem; direction: ltr; text-align: left; }
  #hud .head .kq-role { flex: 1 1 100%; margin: 0; color: var(--muted);
    font-size: 0.74rem; font-style: italic; direction: ltr; text-align: left; }
  /* THE CARD KEEPS THE PAGE'S RULE: one ink, channels as washes, gold for
     lines. It had kept the older design — shani ink on the head, tekhelet ink
     on every reading, amber on the pressed pill — and with the thread and the
     held washes beside it the owner called the palette overcrowded
     (2026-09-11). So the Hebrew head sits on the shani wash, a reading sits on
     the tekhelet wash, the pressed pill is that wash deepened, and nothing on
     the card is ink in a channel color. */
  #hud .head b { font-size: 1.55rem; color: var(--shani-ink); background: none;
    padding: 0.04em 0.3em; border-radius: 0.4em;
    font-family: "Frank Ruehl CLM", "Frank Ruehl", "David Libre", "SBL Hebrew", Georgia, serif; }
  #hud .head button { background: none; border: 0; color: var(--link); font-size: 1.15rem; cursor: pointer; }
  #hud p { margin: 0.45rem 0; }
  #hud .att { color: var(--muted); font-size: 0.78rem; }
  #hud .att a { color: var(--link); }
  /* R pills — one route per pill, one selected at a time (the reader's law). */
  #hud .r-label { margin: 0.5rem 0 0.3rem; color: var(--faint); font-size: 0.74rem;
    letter-spacing: 0.06em; text-transform: uppercase; }
  /* Every R is here, so this row is the one thing on the card allowed to be
     long. It scrolls on its own rather than pushing the D and M off the end. */
  #hud .r-pills { display: flex; flex-wrap: wrap; gap: 0.35rem; direction: ltr; }
  /* A pill shows its whole reading. It used to clamp at two lines, which made
     the card claim a reading it was not showing — the code beneath says R is
     "never truncated away" and the clamp was quietly making that false. A long
     reading now takes the room it needs; the row scrolls, so the D and the M
     below it are still one flick away, and a reading that runs to a paragraph
     looks like one, which is information about the record, not noise. */
  /* the order row: seven positions, three answerable today. A dead one is
     dimmed and struck, never hidden — the question stands even where the
     evidence has not arrived. */
  #hud .def-order, #modeRow .def-order, .rail .def-order { display: flex; flex-wrap: wrap; gap: 0.28rem; margin: 0 0 0.4rem; }
  #hud .def-order .dfp, #modeRow .def-order .dfp, .rail .def-order .dfp { font: inherit; font-size: 0.58rem; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--faint); background: none;
    border: 1px solid var(--line); border-radius: 999px; padding: 0.14rem 0.5rem; cursor: pointer; }
  #hud .def-order .dfp:hover:not(:disabled), #modeRow .def-order .dfp:hover:not(:disabled), .rail .def-order .dfp:hover:not(:disabled) { color: var(--muted); border-color: var(--muted); }
  /* THE POSITION IN FORCE IS A READER'S SELECTION, so it wears the role the
     contract gives a reader's selection. It wore gold until 2026-09-09,
     which is the structure role \u2014 the color of the frame, not of a choice
     the reader made. Nothing new is invented here: colour-role-rule-v1
     declares structure gold, reader_selection electric blue, commentary
     attachment crimson, and this only moves a control into the role it
     already belonged to. It is also the one cold thing on a warm page,
     which is the half of the name that had nowhere to stand. */
  #hud .def-order .dfp.on, #modeRow .def-order .dfp.on, .rail .def-order .dfp.on { color: var(--sel); border-color: var(--sel-dim); }
  #hud .def-order .dfp.waiting, #modeRow .def-order .dfp.waiting, .rail .def-order .dfp.waiting {
    opacity: 0.4; cursor: default; }
  #hud .r-pills button { border: 1px solid var(--chip-line); background: none; color: var(--tekhelet-ink);
    border-radius: 0.9rem; padding: 0.22rem 0.7rem; font: inherit; font-size: 0.76rem; cursor: pointer;
    max-width: 100%; text-align: left; white-space: normal; overflow-wrap: anywhere; }
  /* the pressed pill is the reading's own ink, filled, with the linen showing
     through as its letters — pressed, not a box in a second color */
  #hud .r-pills button[aria-pressed="true"] { border-color: var(--tekhelet-ink);
    background: var(--tekhelet-ink); color: var(--bg); font-weight: bold; }
  #hud .r-more { margin-top: 0.35rem; background: none; border: 0; color: var(--link);
    font: inherit; font-size: 0.76rem; cursor: pointer; padding: 0; }
  #hud .r-overflow { margin-top: 0.45rem; }
  #hud .r-overflow select { width: 100%; font: inherit; font-size: 0.78rem; color: var(--tekhelet-ink);
    background: var(--panel2); border: 1px solid var(--line); border-radius: 0.45rem;
    padding: 0.3rem 0.5rem; cursor: pointer; }
  #hud .r-overflow select:hover { border-color: var(--muted); }
  #hud .r-overflow select.on { background: var(--tekhelet-ink); color: var(--bg); font-weight: bold; }
  #hud .d-card { margin-top: 0.55rem; border-top: 1px solid var(--line); padding-top: 0.45rem; }
  /* P — the sources that carry the same record. A corroboration is not a
     louder kind of source, so it wears the same chip and the same weight as
     the one above it, a size down, and reads as a list rather than a claim. */
  #hud .d-also { margin: 0.3rem 0 0; padding-top: 0.3rem; border-top: 1px dotted var(--line);
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.45rem; }
  #hud .d-also-lab { flex: 1 0 100%; color: var(--faint); font-size: 0.66rem;
    letter-spacing: 0.08em; text-transform: uppercase; }
  #hud .d-also-m { font: inherit; font-size: 0.74rem; color: var(--muted); cursor: pointer;
    background: var(--panel2); border: 1px solid var(--line); border-radius: 0.6rem;
    padding: 0.16rem 0.55rem; text-align: left; max-width: 100%; }
  #hud .d-also-m:hover { border-color: var(--sel-dim); color: var(--ink); }
  #hud .d-also-read { display: block; color: var(--faint); font-size: 0.68rem; }
  #hud .d-also-more { font: inherit; font-size: 0.72rem; color: var(--muted);
    background: var(--panel2); border: 1px solid var(--line); border-radius: 0.5rem;
    padding: 0.16rem 0.4rem; cursor: pointer; max-width: 100%; }
  #hud .d-cut { margin: 0 0 0.35rem; font-size: 0.72rem; color: var(--argaman);
    border-inline-start: 2px solid var(--argaman-dim); padding-inline-start: 0.5rem; }
  /* The D record, whole and never clipped. The sense the reader selected is
     lit inside it, so a truncated pill still resolves to something readable. */
  #hud .d-card .d-text { margin: 0.25rem 0; color: var(--tekhelet-ink); }
  #hud .d-card .d-sense.on { font-weight: bold; }
  #hud .d-card .d-sep { color: var(--faint); }
  #hud .d-more { margin-top: 0.35rem; background: none; border: 0; border-bottom: 1px dotted var(--gold-dim);
    color: var(--muted); font: inherit; font-size: 0.72rem; cursor: pointer; padding: 0 0 0.05rem; text-align: left; }
  #hud .d-more:hover { color: var(--ink-strong); }
  #hud .d-more[aria-expanded="true"] { color: var(--ink-strong); }
  #hud .d-drawer { margin-top: 0.3rem; padding-inline-start: 0.6rem; border-inline-start: 1px solid var(--line); }
  #hud .d-drawer[hidden] { display: none; }
  /* Structure pills — how the form divides, and which block of it is open.
     Quieter than a reading pill on purpose: the reading is the loud thing on
     this card, and the structure is how you got to it. */
  #hud .s-pills { display: flex; flex-wrap: wrap; gap: 0.32rem; direction: ltr; }
  /* the blocks of one division lay out in the word's own direction, so the
     row reads as the form does and the word visibly reassembles */
  /* parts-direction-rule-v1-the-first-part-of-a-hebrew-row-is-the-rightmost.
     Wherever the page draws a form's parts in a row, the part the record puts
     FIRST is the part furthest RIGHT. Setting direction here is the whole of
     it, and forgetting it once already shipped a card whose two rows drew the
     same division in opposite directions, so that a pair read backwards.
     check-parts-read-right-to-left-v1 measures where the parts landed, in
     pixels, rather than trusting this attribute. */
  #hud .s-pills[dir="rtl"] { direction: rtl; }
  #hud .s-pills button { border: 1px solid var(--line); background: var(--panel2); color: var(--muted);
    border-radius: 0.4rem; padding: 0.18rem 0.6rem; font: inherit; font-size: 0.9rem; cursor: pointer;
    max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-family: "Frank Ruehl CLM", "Frank Ruehl", "David Libre", "SBL Hebrew", Georgia, serif; }
  #hud .s-pills button:hover { border-color: var(--muted); color: var(--shesh); }
  #hud .s-pills button[aria-pressed="true"] { border-color: var(--shesh); color: var(--ink-strong);
    background: var(--wash); }
  #hud .s-pills button .none { font: 0.62rem/1 Georgia, serif; color: var(--faint); margin-inline-start: 0.35rem; }
  #hud .b-q { flex: 0 0 auto; min-height: 0; }
  #hud .b-q .q-role { font: 0.6rem/1 Georgia, serif; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--faint); margin-inline-start: 0.4rem; }
  #hud .b-q button[aria-pressed="true"] .q-role { color: var(--muted); }
  #hud .prov { color: var(--faint); font-size: 0.72rem; margin: 0.35rem 0 0; }
  .lic-chip { display: inline-block; margin-inline-start: 0.45rem; padding: 0.02rem 0.5rem;
    border-radius: 999px; background: var(--chip-bg); border: 1px solid var(--chip-line);
    color: var(--shesh); font-size: 0.72rem; }
  /* Commentary rides in the same register as the readings: same pill, same
     selected treatment, same card. It is named by its label, not by a color
     of its own — a commentator is one more voice on the card, not a louder
     kind of thing than the catalog it sits beside. */
  .wb { position: relative; }
  /* A commentary handle standing in the line of the verse, after the words it
     covers. It is inline, so it reads as part of the line; what it opens is
     block-level, so the words after it fall below and the words above it are
     what it is about. */
  /* Under the start of the line, not its end. The word a handle opens on is the
     first one it covers — the one left standing above the commentary — so the
     handle belongs beneath that word, where the reader's eye returns to. The
     pill's own text stays left-to-right; only where the row sits follows the
     direction the words are running in. */
  .c-mark-row { display: block; direction: ltr; text-align: right; margin: 0.1rem 0 0.5rem; }
  body.en .c-mark-row { text-align: left; }
  .c-mark { display: inline-flex; align-items: center; gap: 0.35rem; vertical-align: middle;
    direction: ltr; margin: 0; padding: 0.1rem 0.5rem;
    border: 1px solid var(--shani-dim); border-radius: 999px; background: var(--surface-c);
    color: var(--ink-strong); font: 0.68rem/1.4 Inter, system-ui, sans-serif;
    letter-spacing: 0.04em; cursor: pointer; }
  .c-mark:hover { color: var(--ink-strong); border-color: var(--muted); }
  .c-mark[aria-expanded="true"] { border-color: var(--sel);
    color: var(--sel); font-weight: bold; }
  .c-mark .c-glyph { font-variant: small-caps; letter-spacing: 0.08em; }
  /* Bounded, like the card's regions. A Rashi runs to a page and it was taking
     one — the verse it belongs to disappeared above it. It gets a share and
     scrolls inside it. */
  .c-mark-slot { display: block; direction: ltr; text-align: left;
    max-height: min(22rem, 46vh); overflow-y: auto; overflow-x: hidden;
    margin: 0.15rem 0 0.6rem; padding: 0.5rem 0.7rem;
    border: 1px solid var(--line-c); border-inline-start: 2px solid var(--shani-dim);
    border-radius: 0.5rem; background: var(--surface-c); }
  .c-mark-slot[hidden] { display: none; }
  .c-mark-slot .c-pick { display: block; color: var(--faint); font-size: 0.72rem; margin-bottom: 0.45rem; }
  .c-mark-slot .c-pick select { font: inherit; font-size: 0.76rem; color: var(--muted);
    background: var(--panel-c); border: 1px solid var(--line-c); border-radius: 0.4rem;
    padding: 0.16rem 0.4rem; max-width: 100%; }
  /* the reference and the license stay put while the commentary scrolls under
     them: a text whose source has scrolled away is a text standing on nothing */
  .c-mark-slot .lab { display: block; color: var(--muted); font-size: 0.74rem;
    letter-spacing: 0.03em; margin-bottom: 0.3rem;
    position: sticky; top: -0.5rem; background: var(--surface-c); padding: 0.35rem 0 0.25rem; z-index: 1; }
  .c-mark-slot .lab a { color: var(--link); }
  /* Three plain rows: what it is, what it is commonly read as, and where the
     chain puts it. Same register as the masthead above the book. */
  .c-head-row { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.2rem; }
  .c-head-lab { font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--faint); min-width: 8.5em; }
  .c-head-he { font-family: "Frank Ruehl CLM", "David Libre", "SBL Hebrew", Georgia, serif; }
  .c-head-he.title-row { display: flex; gap: 0.1rem; }
  /* Same voice as the masthead's unnamed title: dimmed, italic, plainly a
     statement about the record rather than a name. */
  .c-head-he.unnamed { color: var(--argaman); font-style: italic; font-family: Georgia, serif; font-size: 0.8rem; }
  .c-head-en { color: var(--shesh); font-size: 0.94rem; }
  .c-head-on { color: var(--muted); font-size: 0.82rem; }
  /* Said once, in English, before the names — because "what is this thing"
     comes before "what is it called". */
  .c-how-said { flex: 1 1 14rem; font-size: 0.78rem; line-height: 1.45; color: var(--muted); }
  /* Scarlet marks what the page will not vouch for. 180 of the 181 placements
     on this book's first verse are ours, so coloring the whole sentence
     scarlet colored the page — and a mark that is everywhere marks nothing.
     It sits on the tail instead: the clause that actually makes the claim,
     five words long, in the one place a reader looks to see whose it is. */
  .c-how-whose { display: block; margin-top: 0.2rem; font-size: 0.62rem;
    letter-spacing: 0.04em; color: var(--faint); }
  .c-how-whose.c-suggested { color: var(--argaman); }
  .c-how-basis { display: block; margin-top: 0.15rem; font-size: 0.6rem;
    letter-spacing: 0.06em; color: var(--faint); }
  .c-mark-body { display: block; }
  .c-mark-text { display: block; font-size: 1.05rem; line-height: 1.9; color: var(--shani);
    font-family: "Frank Ruehl CLM", "Frank Ruehl", "David Libre", "SBL Hebrew", Georgia, serif;
    text-align: right; }
  /* Once the words open, they are blocks and carry their own line height. */
  .c-mark-text.c-worded { line-height: 1.35; }
  .c-mark-text.c-worded .wb { margin-bottom: 0.3rem; }
  .c-mark-slot .c-att { display: block; color: var(--faint); font-size: 0.68rem; margin-top: 0.4rem; }
  /* Scarlet, by the rule at the top of this file: the page is refusing to draw
     a shape it has not been given, and says so where the shape would have
     been. It is not saying the commentary is wrong. */
  .c-mark-slot .c-undeclared { color: var(--argaman); border-inline-start: 2px solid var(--argaman-dim);
    padding-inline-start: 0.5rem; }
  .c-mark-slot .c-two-counts { color: var(--argaman); border-inline-start: 2px solid var(--argaman-dim);
    padding-inline-start: 0.5rem; }
  /* Same rule where the commentary reads in line: the sentence stays linen and
     the tail carries the color. */
  .c-att .c-how-whose.c-suggested { color: var(--argaman); }
  /* The chooser: everything attached to this line, named by its work and by
     the word it sits on, because a line's handle covers words and this is the
     reader deciding between them. */
  .c-choose .lab { color: var(--faint); }
  .c-choices { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; }
  .c-choice { display: inline-flex; align-items: baseline; gap: 0.35rem; direction: ltr;
    border: 1px solid var(--line); background: var(--panel); color: var(--muted);
    border-radius: 999px; padding: 0.2rem 0.7rem; font: inherit; font-size: 0.74rem; cursor: pointer; }
  .c-choice:hover { border-color: var(--muted); color: var(--shesh); }
  .c-more { font: inherit; font-size: 0.72rem; color: var(--faint); background: none;
    border: 0; border-bottom: 1px dotted var(--gold-dim); cursor: pointer; padding: 0 0 1px; }
  .c-more:hover { color: var(--shesh); }
  .c-choice .c-on { color: var(--shani); font-size: 0.95rem;
    font-family: "Frank Ruehl CLM", "Frank Ruehl", "David Libre", "SBL Hebrew", Georgia, serif; }
  .c-more { display: block; width: 100%; color: var(--faint); font-size: 0.68rem; }
  .c-shut { background: none; border: 0; border-bottom: 1px dotted var(--gold-dim);
    color: var(--muted); font: inherit; font-size: 0.7rem; cursor: pointer; padding: 0; }
  .c-shut:hover { color: var(--ink-strong); }
  /* Every commentary the book carries, in one place, before the text starts. */
  #cIndex { margin: 0 0 1.6rem; border: 1px solid var(--line-c); border-radius: 0.6rem;
    background: var(--surface-c); overflow: hidden; }
  #cIndex .ci-head { display: flex; flex-direction: column; gap: 0.2rem; width: 100%;
    text-align: left; direction: ltr; background: none; border: 0; color: var(--muted);
    font: inherit; padding: 0.7rem 0.9rem; cursor: pointer; }
  #cIndex .ci-head:hover { color: var(--shesh); }
  #cIndex .ci-head b { color: var(--ink-strong); font-size: 0.95rem; letter-spacing: 0.04em; }
  #cIndex .ci-head[aria-expanded="true"] b { color: var(--sel); }
  #cIndex .ci-sum { color: var(--faint); font-size: 0.72rem; margin: 0 0 0.55rem;
    padding: 0 0.9rem; line-height: 1.5; }
  #cIndex .ci-body[hidden] { display: none; }
  #cIndex .ci-bar { display: flex; gap: 0.5rem; align-items: center; padding: 0 0.9rem 0.5rem; }
  #cIndex input[type="search"] { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 0.82rem;
    color: var(--ink); background: var(--panel); border: 1px solid var(--line);
    border-radius: 0.45rem; padding: 0.35rem 0.6rem; }
  #cIndex input[type="search"]:focus { outline: none; border-color: var(--muted); }
  #cIndex .ci-count { color: var(--faint); font-size: 0.72rem; white-space: nowrap; }
  #cIndex .ci-list { max-height: min(24rem, 50vh); overflow-y: auto; overflow-x: hidden;
    padding: 0 0.9rem 0.8rem; display: flex; flex-direction: column; gap: 0.3rem; }
  #cIndex .ci-hit { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.45rem;
    text-align: left; direction: ltr; background: var(--panel); border: 1px solid var(--line);
    border-radius: 0.45rem; padding: 0.32rem 0.6rem; color: var(--muted);
    font: inherit; font-size: 0.78rem; cursor: pointer; }
  #cIndex .ci-hit:hover { border-color: var(--muted); color: var(--shesh); }
  #cIndex .ci-where { color: var(--muted); }
  #cIndex .ci-what { flex: 1 1 auto; }
  #cIndex .ci-more { color: var(--faint); font-size: 0.72rem; margin: 0.3rem 0 0; }
  /* A commentary answering another sits under it, indented, and is the one
     case where two stand open at once. */
  .c-counter-row { display: block; margin-top: 0.5rem; }
  .c-counter-mark { font-size: 0.66rem; }
  .c-mark-slot.c-counter { margin-inline-start: 1.1rem; border-inline-start: 2px solid var(--shesh); }
  .c-noen { color: var(--argaman); }
  #hud .c-pills { display: flex; flex-wrap: wrap; gap: 0.35rem; direction: ltr; }
  #hud .c-pills button { border: 1px solid var(--line); background: var(--panel2); color: var(--muted);
    border-radius: 999px; padding: 0.22rem 0.7rem; font: inherit; font-size: 0.76rem; cursor: pointer;
    max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #hud .c-pills button[aria-pressed="true"] { border-color: var(--tekhelet-ink);
    background: var(--tekhelet-ink); color: var(--bg); font-weight: bold; }
  #hud .c-card { margin-top: 0.55rem; border-top: 1px solid var(--line); padding-top: 0.45rem; }
  #hud .c-card .c-he { margin: 0.3rem 0; font-size: 1.05rem; line-height: 1.9; color: var(--shani-ink);
    padding: 0.1rem 0.4rem; border-radius: 0.4em;
    font-family: "Frank Ruehl CLM", "Frank Ruehl", "David Libre", "SBL Hebrew", Georgia, serif; }
  #hud .c-note { color: var(--faint); font-size: 0.72rem; margin: 0.2rem 0 0; }
  /* A commentary served from the chain is text, not decoration: its own words
     carry their own routes, so they are word blocks like any others. */
  #hud .c-he .wb { margin: 0 0.14rem 0.5rem; }
  #hud .c-he .w { font-size: 1.05rem; }
  #hud .c-he .g { font-size: 0.6rem; max-width: 8em; }
  #hud .c-back { background: none; border: 0; color: var(--link); font: inherit; font-size: 0.74rem;
    cursor: pointer; padding: 0 0 0.25rem; letter-spacing: 0.04em; }
  #hud .c-back:hover { color: var(--ink-strong); }
  /* Short windows. These come last on purpose: they were sitting above the
     rules they mean to override, so the base won on source order and every one
     of them was dead — measured, not assumed: the record's cap read 32vh on a
     400px window that was asking for 20vh.
     Everything the card owes a reader still holds here — a row of divisions, a
     row of blocks, a row of readings, the record and its source. The room comes
     from the things that are not owed: the provenance line goes, the structural
     rows drop to one row apiece, the labels and the head tighten. */
  @media (max-height: 660px) {
    #hud { max-height: 94vh; }
    #hud .prov { display: none; }
    #hud .r-now { margin: 0 0 0.2rem; padding-bottom: 0.2rem; }
    #hud .d-slot { max-height: max(26vh, 9rem); }
  }
  /* Shorter still — a desktop window a few hundred pixels tall. The structural
     rows go to a single row each and the labels tighten. Everything the reader
     must have is still on the card and still pressable; what has gone is room
     to browse, not anything to reach. */
  @media (max-height: 480px) {
    #hud .r-label { margin: 0.15rem 0 0.1rem; font-size: 0.66rem; }
    #hud .head b { font-size: 1.15rem; }
    #hud .head { padding-bottom: 0.2rem; margin-bottom: 0.15rem; }
    #hud .d-slot { max-height: max(27vh, 8.75rem); }
    #hud .s-pills button, #hud .r-pills button { padding-top: 0.08rem; padding-bottom: 0.08rem; }
  }
  /* A desktop window squashed flat is short but wide, and a card locked to
     phone width there wrapped its source line to three rows — rows that came
     straight out of the record's share, under a word at the top of the page
     with nowhere higher to go. Where the window affords width, the card
     takes it: the source line stands in one row and the record keeps its
     line above it. Height was the scarce thing; width was free. */
  @media (max-height: 480px) and (min-width: 640px) {
    #hud { max-width: 34rem; width: min(34rem, 92vw); }
  }
  /* The record, whole, on request. The capped card is the resting state —
     nothing rests open — but the record is entitled to say what it says, and
     on a short screen the only honest way to read a long D is to let it
     stand at its full height while it is wanted. The control sits in the
     foot beside the M, where the record's own furniture lives. */
  #hud .d-slot.whole { max-height: min(72vh, 36rem); overflow-y: auto; }
  #hud .d-slot.whole .d-body { max-height: none; overflow-y: visible; }
  #hud .d-grow { margin-left: auto; border: 1px solid var(--line); background: var(--panel2);
    color: var(--muted); border-radius: 999px; font: inherit; font-size: 0.72rem;
    padding: 0.02rem 0.55rem; cursor: pointer; white-space: nowrap; }
  #hud .d-foot { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; }
  /* The polish layer · values only, cascade-late so order wins ties.
     What a professional surface adds and an honest one may: the same roles,
     the same families, executed with care — motion that acknowledges a
     press, focus a keyboard can see, scrollbars in the page's own cloth,
     selection in the reader's own blue, elevation that says what floats. */
  * { -webkit-tap-highlight-color: transparent; }
  body { font-kerning: normal; }
  ::selection { background: var(--sel-dim); color: var(--ink-strong); }
  button, select { transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease; }
  button:hover:not([disabled]) { border-color: var(--muted); }
  button:active:not([disabled]) { transform: translateY(0.5px); }
  :focus-visible { outline: 2px solid var(--sel); outline-offset: 2px; border-radius: 3px; }
  * { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
  *::-webkit-scrollbar { width: 8px; height: 8px; }
  *::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
  *::-webkit-scrollbar-thumb:hover { background: var(--gold-dim); }
  *::-webkit-scrollbar-track { background: transparent; }
  #hud { box-shadow: var(--shadow-hud); }
  #hud .r-pills button[aria-pressed="true"], #hud .s-pills button[aria-pressed="true"] {
    box-shadow: 0 0 0 1px var(--sel-dim); }
  @media (prefers-reduced-motion: reduce) {
    button, select { transition: none; }
    button:active:not([disabled]) { transform: none; }
  }
  /* Levels. Three things hang off a section and they are not the same size of
     act. The number names it. The commentary is the section's other text, so
     it gets a line of its own, the width of the column, carrying the name of
     the work rather than a letter. Taking the text away for good is the last
     act, so the export sits beneath at the smallest weight. Carrying a line
     off in a clipboard is not a control at all — see below. */
  .c-slot:empty { display: none; }
  .c-bar { display: flex; align-items: center; gap: 0.5rem; width: 100%;
    margin: 0.55rem 0 0.32rem; padding: 0.36rem 0.62rem; border: 1px solid var(--line);
    border-radius: 0.55rem; background: var(--panel2); color: var(--muted);
    font-family: inherit; font-size: 0.78rem; letter-spacing: 0.04em; cursor: pointer;
    direction: ltr; text-align: left; }
  .c-bar:hover { border-color: var(--shani-dim); color: var(--shesh); }
  .c-bar[aria-expanded="true"] { color: var(--sel); border-color: var(--sel); }
  .c-bar .c-glyph { font-variant: small-caps; letter-spacing: 0.12em; font-size: 0.7rem;
    border: 1px solid currentColor; border-radius: 0.35rem; padding: 0 0.32rem; opacity: 0.75; }
  .c-bar .c-name { flex: 1 1 auto; }
  .c-bar .c-hint { font-size: 0.66rem; opacity: 0.6; }
  /* Copying is the reader's act, not the page's. There is no button that writes
     to a clipboard here — a button doing that is the site handing text over,
     and text handed over carries obligations. A reader who selects and presses
     copy is doing what a reader does on any page, and the licenses are on the
     page: on the card, in the footer, and in the export.
     What the page owes them is a clean selection. The Hebrew and its reading
     live in one block, so selecting a verse used to interleave them word by
     word. So a drag takes one layer, and which one is decided by the word the
     reader pressed to start it — not by a setting, and never permanently:
     press a Hebrew word and the drag takes Hebrew, press a reading and it
     takes readings. Nothing on this page is locked away from a reader who
     reaches for it. Either way what lands is a line rather than a zip of two. */
  /* the gloss's license chip: visible in the English reader — the owner's
     ruling, "english and license reader… never let them separate even by a
     display degree" — quiet in the Hebrew reader, where every license is
     one tap away on the word's card; never in a copy, by the frame law */
  .g .g-lic { display: block; width: fit-content; margin: 0.12em auto 0;
    user-select: none; -webkit-user-select: none; padding: 0 0.32em;
    border: 1px solid var(--chip-line); border-radius: 0.6em; font-size: 0.8em;
    color: var(--faint); white-space: nowrap; }
  /* A joined run's reading line is two cards' readings side by side, so each
     one stands in its own cell with its own chip under it. The cells and the
     joiner between them align at the top, which puts every reading on one
     line and every chip on the line below its own reading. */
  /* FIRE HAS NO EDGES; HAIL DOES. The Hebrew stands free on the ground with
     no box, no rule and no chip \u2014 it is the thing itself. Every English
     reading is a bounded object, because that is what it is: one witness's
     word, under a license, from a year, replaceable by a better one. The
     frame already said so \u2014 R pills, D cards, M with its terms \u2014 and the
     line under the word was the one place English was drawn without an edge.
     It also fixes a plain legibility fault: where a reading runs long, as
     Uzziah's does at Amos 1:1, nothing said where one word's English stopped
     and its neighbour's began. (Moses, 2026-09-09.) */
  /* the reading wears no box (owner, 2026-09-11: "your boxes are getting
     further and further from usable"); the border is kept transparent so the
     line's metrics do not move the day one is wanted back */
  .wb > .g:not(.bare), .wjoin > .g:not(.bare) {
    border: 1px solid transparent; border-radius: 0.45em; padding: 0.1em 0.4em; }
  .g .g-part { display: inline-block; vertical-align: top; text-align: center; }
  .g .g-part + .g-part { margin-left: 0.3em; }
  .g .g-join { color: var(--tekhelet-dim); }
  /* the chip shows in both readers — the owner chose the demonstration look, 2026-08-30 */
  /* A reading is a reading wherever the run drew it. A joined word prints one
     shared reading on the run itself, outside any .wb, so this rule never
     reached it and a Hebrew copy across a maqaf compound carried English. */
  body.pick-he .wb .g, body.pick-he .wjoin > .g { user-select: none; -webkit-user-select: none; }
  body.pick-he .wb .w { user-select: text; -webkit-user-select: text; }
  body.pick-en .wb .g { user-select: text; -webkit-user-select: text; }
  body.pick-en .wb .w { user-select: none; -webkit-user-select: none; }
  /* the chrome is not text anyone wants in a copy */
  .seg-row, .c-bar, .c-mark, .c-choose, .xp-row, #nav, header.top nav, #modeRow { user-select: none; -webkit-user-select: none; }
  /* Taking the text away for good. A copy is a convenience; an export is the
     final stop, so it says what it is about to hand over before it hands it
     over, and it obeys the license of every record it would carry. */
  .xp-row { display: flex; gap: 0.4rem; margin: 0.55rem 0 0.2rem; direction: ltr;
    flex-wrap: wrap; align-items: center; }
  .xp { font-size: 0.68rem; color: var(--muted); border: 1px solid var(--line);
    background: var(--panel2); border-radius: 0.5rem; padding: 0.12rem 0.5rem;
    letter-spacing: 0.04em; cursor: pointer; font-family: inherit; }
  .xp:hover { border-color: var(--muted); color: var(--shesh); }
  .xp.armed { color: var(--sel); border-color: var(--sel); font-weight: bold; }
  .xp.busy { opacity: 0.6; cursor: progress; }
  .xp-note { font-size: 0.66rem; color: var(--faint); direction: ltr; flex: 1 1 100%; margin: 0.1rem 0 0; }
  .xp-note b { color: var(--shesh); font-weight: normal; }
  .xp-note .held { color: var(--argaman); }
  .xp-lab { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--faint); margin-inline-end: 0.15rem; }
  #bookExport { max-width: 48rem; margin: 2.2rem auto 0; padding: 0 1.5rem; direction: ltr; }
  #bookExport .xp-lab { display: block; margin-bottom: 0.35rem; }
  #prov a { color: var(--shesh); }

  footer { max-width: 48rem; margin: 0 auto; padding: 1.1rem 1.5rem 2.2rem; font-size: 0.76rem;
    color: var(--faint); border-top: 1px solid var(--line); direction: ltr; text-align: left; }

  @media (max-width: 640px) {
    .he-text { font-size: 1.32rem; line-height: 2.05; }
    header.top h1 { font-size: 1.5rem; } header.top h1 .he-t { font-size: 1.7rem; }
  }