/* ---------------------------------------------------------------------------
   Bible Formatting (BIBLE-FORMATTING-PLAN-2026-08-26)

   Poetry set the way a good printed Bible sets it: a number gutter, a hairline
   rule marking the section, and the text in its own measure with hanging
   indents on the turned lines. Everything here is scoped to `.pericope-fmt` /
   `.verse-fmt`, so with the toggle off not one declaration applies.

   The rendering of the labels - circled a-e chips, the ‖ caesura, the
   grey "A - Title" heading - is the Option 1 build restored verbatim from
   4b6c39b (owner msg be3f1895: "the very first mockup you gave me called
   option 1 was correct"), except the ink colours, which the owner re-ordered
   on 2026-08-27 (msg cc1cef68) - see the palette block below. Any further
   divergence is a separate, gated change - do not drift these values.
--------------------------------------------------------------------------- */

:root {
  /* Horizontal rhythm. One "step" of nesting, the verse-number gutter, and the
     text column, all in em so they track the reader's text-size setting. */
  --fmt-step: 1.15em;
  --fmt-gutter: 2.6em;
  --fmt-rule: color-mix(in srgb, var(--fg-tertiary) 34%, transparent);
  /* The gap above a section heading. A variable rather than a number in the
     margin because the nesting rails have to reach back up through exactly
     this much to keep the enclosing bracket unbroken - see .fmt-rail. */
  --fmt-gap: 1.3em;

  /* a-e correspondence ink: the palette the owner ordered on 2026-08-27
     (msg cc1cef68), replacing the Option 1 jewel tones. Shades are pulled
     toward readable-on-white where the named colour is too pale (golden
     yellow, light blue); hue names are his, exact values are ours.
     (e) is a fifth pen he reaches for rarely - Psalm 10:9 is its first use. */
  --fmt-a: #c62828;   /* red */
  --fmt-b: #b8860b;   /* golden yellow */
  --fmt-c: #4169e1;   /* royal blue */
  --fmt-d: #228b22;   /* forest green */
  --fmt-e: #3f9ad2;   /* light blue */
  /* F onward the owner delegated (msg a9595593): hues not already spent,
     placed in the largest gaps the a-e palette + purple caesura leave on
     the wheel - teal and magenta - with brown as the spare. */
  --fmt-f: #00897b;   /* teal */
  --fmt-g: #c2185b;   /* magenta */
  --fmt-h: #795548;   /* brown */
  /* I onward, same delegation: Psalm 25 nests A through J and closes on a Z,
     so three more levels were falling through to the grey fallback and reading
     as the heading colour rather than as distinct levels. Past K it still
     falls back to grey, which is flagged at the gate rather than guessed at. */
  --fmt-i: #d84315;   /* burnt orange */
  --fmt-j: #5e35b1;   /* indigo */
  --fmt-k: #556b2f;   /* dark olive */
  --fmt-z: #37474f;   /* dark blue-grey */
  /* The // caesura mark, same owner order: purple, no longer the accent ink. */
  --fmt-caesura: #8e44ad;
}

[data-theme="dark"],
[data-theme="oled"] {
  --fmt-rule: color-mix(in srgb, var(--fg-tertiary) 46%, transparent);
  --fmt-a: #e57373;
  --fmt-b: #e3b341;
  --fmt-c: #7e9ff5;
  --fmt-d: #77c077;
  --fmt-e: #9ed4f5;
  --fmt-f: #4db6ac;
  --fmt-g: #ec7fa6;
  --fmt-h: #a1887f;
  --fmt-i: #ff8a65;
  --fmt-j: #b39ddb;
  --fmt-k: #9ccc65;
  --fmt-z: #90a4ae;
  --fmt-caesura: #b58cd8;
}

/* --- the chip row above the chapter ------------------------------------- */

.fmt-chips {
  display: flex;
  /* Centered row (owner 47dbae89) so the chips sit balanced under the
     psalm title rather than hugging the left edge. */
  justify-content: center;
  /* The renamed chips (View Structure / Structural Notes) are longer than
     the originals; smaller type, tighter gaps and wrap-allowed keep the
     row inside a phone width (owner order f75eca27). */
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: -0.75rem 0 1.75rem 0;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--fmt-rule);
}

.fmt-chip {
  font-family: var(--font-family-sans);
  /* Mixed case at this size keeps all four renamed chips on ONE row at
     phone width (owner f75eca27 + 'wrap only if you have to' b49acf09);
     flex-wrap above stays as the only-when-forced fallback. */
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--fg-tertiary);
  background: transparent;
  /* The off state keeps its outline - without one the chip reads as a caption
     rather than something you can press. */
  border: 1px solid var(--fmt-rule);
  border-radius: 999px;
  padding: 0.3em 0.65em;
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast),
              border-color var(--transition-fast);
}

.fmt-chip:hover {
  color: var(--fg-secondary);
}

.fmt-chip.active {
  color: var(--fg-secondary);
  border-color: color-mix(in srgb, var(--fg-tertiary) 55%, transparent);
  background: color-mix(in srgb, var(--fg-tertiary) 13%, transparent);
}

/* --- section headers ----------------------------------------------------- */

/* The header and the verses under it share one continuous hairline, so a
   section reads as a single bracket: margin above it separates sections,
   padding below it keeps the rule unbroken down to the first line. */
/* Nesting depth is a MARGIN, not padding, so the hairline and the verse number
   can both be placed at a fixed offset from the block's own edge. Putting the
   depth into an absolutely-positioned `left` instead would break: `em` there
   resolves against the positioned element's own font-size, and .verse-num is
   0.75em - the number and the rule drifted apart one step per level. */
/* No font-family here: the Option 1 heading inherited the page serif, and the
   owner signed that off as correct. The sans came in with the uppercase
   treatment that was rejected with it. */
.fmt-section {
  position: relative;
  margin: var(--fmt-gap) 0 0 calc(var(--fmt-depth, 0) * var(--fmt-step));
  padding: 0.1em 0 0.5em var(--fmt-gutter);
  line-height: 1.35;
}

.fmt-section::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--fmt-rule);
}

/* The first section of the chapter should not push a big gap under the title.
   Scoped to the FIRST pericope: Psalm 1 is served as two (vv1-3, vv4-6), and
   without :first-of-type this also caught the section that happens to open
   v4 - closing up a gap in the middle of the poem. Set through the variable
   so the rails shorten with the margin instead of overshooting into it. */
.pericope-fmt:first-of-type .fmt-section:first-child {
  --fmt-gap: 0.3em;
}

/* A section that runs across a pericope boundary (Psalm 1's A is vv1-4, and
   pericope.php serves vv1-3 and vv4-6 as separate blocks) has to keep its
   rule unbroken over the join, so in formatted mode the blocks sit flush and
   the section's own end padding does the spacing. */
.pericope-fmt {
  margin-bottom: 0;
}

/* --- nesting rails ------------------------------------------------------- */

/* One per section this element sits inside, at `--fmt-at` steps back from its
   own left edge (the element's own rule is the ::before above). Together they
   draw the containment: A's bracket runs the whole length of vv1-4 while B
   opens inside it and C opens inside B, which is the stepped-panel figure in
   the owner's drawing. Emitted by the renderer, so only the levels actually
   open are painted. */
.fmt-rail {
  position: absolute;
  left: calc(-1 * var(--fmt-at, 1) * var(--fmt-step));
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--fmt-rule);
  pointer-events: none;
}

/* On a heading the rails start one gap higher, so the enclosing bracket is
   not cut in two by the heading of its own child. */
.fmt-section > .fmt-rail {
  top: calc(-1 * var(--fmt-gap));
}

/* The LSB's own mid-chapter heading, where it lands inside an open bracket.
   Psalm 19 is the only place in the forty psalms authored so far: the drawing
   runs one bracket over vv1-13, and "The Law of Yahweh Is Perfect" arrives at
   v7 in the middle of it. The renderer only adds this class where a section
   really is open across the join, and gives it the depth of the deepest one.

   Same shape as .fmt-section above, and for the same reason - the element in
   the gap is the one that has to carry the rules through itself. The depth is
   a MARGIN so the rule and the text keep a fixed offset from the block's own
   edge (see the .fmt-section note), and the gutter padding puts the text clear
   of every rule the rails draw to its left.

   It is a wrapper around the <h3> and not the <h3>, because --fmt-step is em
   and .pericope-title is 1.05em: on the heading itself a step came out 5%
   wide and set this rule a pixel off the column it continues. The wrapper
   inherits the verses' type size, so its step is theirs. */
.fmt-title-carrier {
  position: relative;
  margin-left: calc(var(--fmt-depth, 0) * var(--fmt-step));
  padding-left: var(--fmt-gutter);
}

.fmt-title-carrier::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--fmt-rule);
}

/* The title's own 0.75rem margin-bottom would fall OUTSIDE the wrapper, and so
   outside the rule the wrapper draws - an unruled strip under a title whose
   bracket is supposed to be continuous. Zero here, and let what follows do the
   spacing: a subsection heading brings its own --fmt-gap and reaches back up
   through it, and a verse sits flush. Psalm 19's spacing does not move, because
   the 1.3em gap of the heading that follows its title was already collapsing
   the smaller 0.75rem away. */
.fmt-title-carrier > .pericope-title {
  margin-bottom: 0;
}

/* The heading: a colour-badged letter and the title in the gutter grey. The
   quiet all-grey Option 1 line lasted until 2026-08-27, when the owner chose
   the square letter badge (msg ebb9e1db); the title text keeps its grey.

   The type size sits on the two spans, NOT on .fmt-section: that element's
   own margin and padding are written in em (--fmt-step, --fmt-gutter), so a
   font-size there would shrink the depth step and the gutter and pull the
   heading's hairline out of column with the verses under it. */
.fmt-section-letter,
.fmt-section-title {
  font-size: 0.82em;
  letter-spacing: 0.045em;
  line-height: 1.4;
  color: var(--fg-tertiary);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/* The letter is a solid square badge - white capital on its palette colour -
   the owner's pick of 2026-08-27 (msg ebb9e1db, from the rendered options in
   msg 21d9e2bf). The em-dash separator went with it; the badge's own margin
   now spaces the title. The in-line marks deliberately do NOT match: he wants
   the section letters and the correspondence marks visually distinct, so the
   marks keep their outlined-circle dress. */
.fmt-section-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 1.7em;
  height: 1.7em;
  border-radius: 0.1em;
  margin-right: 0.5em;
  font-family: var(--font-family-sans);
  font-weight: 700;
  color: #fff;
  vertical-align: -0.35em;
  /* Fallback for letters past K (Z is named separately) and for any emit site
     that misses its fmt-letter-* class: gutter grey, never white-on-nothing. */
  background: var(--fg-tertiary);
}

.fmt-letter-a { background: var(--fmt-a); }
.fmt-letter-b { background: var(--fmt-b); }
.fmt-letter-c { background: var(--fmt-c); }
.fmt-letter-d { background: var(--fmt-d); }
.fmt-letter-e { background: var(--fmt-e); }
.fmt-letter-f { background: var(--fmt-f); }
.fmt-letter-g { background: var(--fmt-g); }
.fmt-letter-h { background: var(--fmt-h); }
.fmt-letter-i { background: var(--fmt-i); }
.fmt-letter-j { background: var(--fmt-j); }
.fmt-letter-k { background: var(--fmt-k); }
.fmt-letter-z { background: var(--fmt-z); }

.fmt-section-title {
  text-wrap: balance;
}

/* A heading that opens partway down a verse - Psalm 7:9, where "Wicked die"
   owns the first line and "Righteous saved" opens on the second, and the same
   shape at 15:5 and 17:14. It is a <span> because it lives inside the verse
   <p>, where a <div> would close the paragraph and tear the verse in half.
   The paragraph has already applied this section's depth margin and gutter
   padding, so repeating either here would indent the heading twice; and the
   verse's own rails run the paragraph's full height, already carrying the
   bracket past this heading, so it paints no rule of its own. */
.fmt-section-inline {
  display: block;
  margin-left: 0;
  padding-left: 0;
  text-indent: 0;
}

.fmt-section-inline::before {
  display: none;
}

/* --- the superscription -------------------------------------------------- */

/* "A Psalm of David. When he fled from Absalom his son." api/pericope.php
   drops this line entirely (its title slot holds the LSB section heading and
   its verse splitter keeps nothing before verse 1), so the overlay carries
   the text and this is the first time it has ever been on the page. Set one
   step quieter than the verses and away from the section headings' grey, so
   it reads as the psalm's own inscription rather than as a heading we wrote. */
/* The grey heading some drawings put above that line (Psalms 3, 5, 6) is drawn
   with .fmt-section so it matches the section headings' type - but it is not a
   section, and .fmt-section::before would give it a section's vertical rule.
   That rule means "this bracket covers the verses below"; here it covers
   nothing, so it paints a detached 30px tick beside the word and then stops
   above the inscription. Suppressed rather than restyled: the heading keeps
   the section headings' size, colour and gutter, and only the bracket goes. */
.fmt-superscription-title::before {
  content: none;
}

.fmt-superscription {
  margin: 0 0 0.55em calc(var(--fmt-depth, 0) * var(--fmt-step));
  padding-left: var(--fmt-gutter);
  font-size: 0.86em;
  font-style: italic;
  color: var(--fg-secondary);
  text-wrap: balance;
}

/* --- the verse block ----------------------------------------------------- */

.verse-fmt {
  position: relative;
  margin: 0 0 0 calc(var(--fmt-depth, 0) * var(--fmt-step));
  padding: 0.12em 0 0.85em var(--fmt-gutter);
  hanging-punctuation: first last;
}

/* The hairline that marks the section's nesting level. The header and the
   verses under it sit flush, so their segments join into a single rule. */
.verse-fmt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--fmt-rule);
}

.verse-fmt.fmt-section-end {
  padding-bottom: 1.35em;
}

/* Verse numbers move into the letter gutter - the printed-Bible position.
   Padding keeps the ~40px tap target the long-press gesture depends on. */
.verse-fmt > .verse-num {
  position: absolute;
  /* Glyph lands clear of the hairline; the back-off cancels the span's own
     padding, which exists to keep the ~40px long-press target. */
  left: 0.2em;
  top: -0.35em;
  margin: 0;
  padding: 0.75em 0.45em;
  opacity: 0.85;
  font-variant-numeric: lining-nums;
}

/* --- poetic lines -------------------------------------------------------- */

.fmt-line {
  display: block;
  /* Turned lines hang under their own line, never under the verse number. */
  padding-left: calc(var(--fmt-indent, 0) * 1.35em + 1.15em);
  text-indent: -1.15em;
  text-wrap: pretty;
}

.fmt-line + .fmt-line {
  margin-top: 0.1em;
}

/* --- section-heading brackets (owner order 866c7043, 2026-08-31) ---------- */

/* The section titles are our authored headings, not Scripture - bracket them
   like the pericope headings so the two are never confused. Generated
   content: out of the DOM text, so TTS never speaks the brackets and
   copy/paste stays clean. */
.fmt-section-title::before {
  content: "[";
}

.fmt-section-title::after {
  content: "]";
}

/* --- declutter under the overlay (owner order 00e5e5a2, 2026-08-31) ------- */

/* The caesura marks break the outline rows' indentation, and the pericope
   headings crowd the stanza view - both hidden while Extra Formatting is on
   ("for now"). Display-only: TTS already skips .pericope-subhead wholesale
   and the ambient copy/share strip lists carry .fmt-group. */
.pericope-fmt .fmt-group { display: none; }
.pericope-fmt .pericope-subhead { display: none; }

/* --- Info chip: per-verse structure cards --------------------------------- */

/* Owner order 75047b75 (2026-08-31): while INFO is on, each verse carries a
   short card naming its parallelism form and how the pattern works. Sibling
   of the verse paragraph, aria-hidden, on every copy/share strip list -
   Scripture text stays untouched everywhere. */
.fmt-info {
  /* Below its verse (owner order bdfffa1b): hugs the text above, then a
     wide gap underneath so it never reads as introducing the next verse. */
  margin: 0.35em 0 5em;
  padding: 0.55em 0.8em;
  background: color-mix(in srgb, currentColor 4%, transparent);
  border-left: 3px solid color-mix(in srgb, currentColor 20%, transparent);
  border-radius: 0 6px 6px 0;
  font-size: 0.82em;
  line-height: 1.45;
  /* Grey card text (owner order eb2f32db): visibly not Scripture. The
     mix rides currentColor so every theme greys relative to its own ink. */
  color: color-mix(in srgb, currentColor 58%, transparent);
}
.fmt-info-label {
  display: block;
  /* Normal weight (owner order 60290d50): at 600 the label anti-aliases
     near full ink and reads white/black against the grey body. Italic,
     the block break and the parentheses carry the distinction. */
  font-weight: normal;
  font-style: italic;
  margin-bottom: 0.15em;
}

/* --- outline layout: every lettered phrase on its own row ----------------- */

/* Owner order 49b3e39b (+ indent sketch 6c4ebd9d, 2026-08-31): each small
   letter opens a new row, indented by the letter's rank - (a) flush left,
   (b) one step in, (c) two - so paired phrases sit aligned under each other.
   Rows hang under their own first word, inside the line's own indent. The
   wrappers hold the words' real text: copy, share, TTS and quotes are
   untouched. Any text before a line's first letter keeps the line's row. */
.fmt-unit {
  display: block;
  text-indent: -1.15em;
  padding-left: 1.15em;
}
.fmt-unit-d1 { padding-left: calc(1.5em + 1.15em); }
.fmt-unit-d2 { padding-left: calc(3em + 1.15em); }
.fmt-unit-d3 { padding-left: calc(4.5em + 1.15em); }
.fmt-unit-d4 { padding-left: calc(6em + 1.15em); }

/* --- a verse the drawing splits across depths ----------------------------- */

/* Psalm 25:5 is drawn as three lines at three different depths - D opens on
   the first, E on the second, F on the third - and 25:16-17 and 27:6 draw the
   same figure. No single depth is true of such a paragraph, so the nesting
   moves off it and onto the line: each line carries its own `--fmt-depth`,
   its own rule and its own rails, and the paragraph keeps only the things
   that belong to the verse as a whole - the verse number's position and the
   vertical rhythm.

   Every other verse in every psalm keeps the paragraph-level shape above,
   untouched: the renderer emits this class only where the lines disagree. */
.fmt-verse-split {
  padding-left: 0;
}

/* The paragraph's own rule would run the full height at one depth, which is
   the very thing that is not true here. Each line draws its own instead. */
.fmt-verse-split::before {
  content: none;
}

/* `--fmt-base` is the first line's depth, which is where the paragraph itself
   sits. A line steps in by its own depth less that base, so a line at the base
   lands exactly where the unsplit shape would have put it. */
.fmt-verse-split > .fmt-line,
.fmt-verse-split > .fmt-section-stepped {
  position: relative;
  margin-left: calc((var(--fmt-depth, 0) - var(--fmt-base, 0)) * var(--fmt-step));
}

/* The gutter that the paragraph gives up moves here, ahead of the line's own
   hanging indent, so the text still clears the verse number. */
.fmt-verse-split > .fmt-line {
  padding-left: calc(var(--fmt-gutter) + var(--fmt-indent, 0) * 1.35em + 1.15em);
}

/* The line's own rule, and the ancestors' rails, both reach up over the
   0.1em that separates two lines - otherwise the bracket is drawn as a
   ladder of ticks with a gap at every line. */
.fmt-verse-split > .fmt-line::before {
  content: "";
  position: absolute;
  left: 0;
  top: -0.1em;
  bottom: 0;
  width: 1px;
  background: var(--fmt-rule);
}

.fmt-verse-split > .fmt-line > .fmt-rail {
  top: -0.1em;
}

/* The paragraph keeps its own vertical padding, and in an unsplit verse the
   rule is the paragraph's ::before, so it covers that padding and consecutive
   verses stack into one unbroken bracket. Here the rule and the rails are on
   the LINES, which stop short of the padding at both ends - so without these
   two rules every enclosing bracket breaks by 0.85em under every split verse.
   Measured, not guessed: the nesting check found Psalm 27's A-rule in four
   runs with a 15.3px hole, which is exactly 0.85em at an 18px font.

   .fmt-line-first / .fmt-line-last are set by the renderer. They cannot be
   found in CSS: the paragraph's children include the verse number and every
   mid-verse heading, both spans, so :first-of-type and :last-child pick the
   wrong element. */
.fmt-verse-split > .fmt-line-first::before,
.fmt-verse-split > .fmt-line-first > .fmt-rail {
  top: -0.12em;
}

.fmt-verse-split > .fmt-line-last::before,
.fmt-verse-split > .fmt-line-last > .fmt-rail {
  bottom: -0.85em;
}

/* A verse that closes its section takes the larger bottom padding, so its
   last line has that much further to reach. */
.fmt-verse-split.fmt-section-end > .fmt-line-last::before,
.fmt-verse-split.fmt-section-end > .fmt-line-last > .fmt-rail {
  bottom: -1.35em;
}

/* A heading that opens the deeper section. .fmt-section-inline zeroes the
   margin and padding and hides the rule, because in an unsplit verse the
   paragraph has already applied both; here it has not, so they come back. */
.fmt-verse-split > .fmt-section-stepped {
  padding-left: var(--fmt-gutter);
}

.fmt-verse-split > .fmt-section-stepped::before {
  display: block;
}

/* The caesura that opens a parallel line-set - the owner draws // and the
   app typesets it as ‖, the printed caesura mark (owner order ef345272,
   2026-08-29). Drawn in ink, not in hairline grey: the owner's pen stroke
   is bold, and the --fmt-rule wash made it a ghost mid-line in v1.
   Option 1's weight and size; the purple is the owner's 2026-08-27
   palette order (msg cc1cef68). letter-spacing dropped with the swap -
   it existed only to tighten the two slashes. */
.fmt-group {
  color: var(--fmt-caesura);
  font-weight: 600;
  font-size: 0.86em;
  margin: 0 0.28em 0 0.05em;
  opacity: 0.85;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/* --- correspondence marks ------------------------------------------------ */

/* Circled letters, the way the owner draws them - Option 1's chip, restored
   verbatim from 4b6c39b. The italic serif superscript that replaced it read
   as a footnote number, not as his pen.

   text-indent: 0 matters. A mark can open a line, and .fmt-line carries a
   negative text-indent for the hanging indent; without this the first chip on
   a line would be dragged back into the gutter. */
.fmt-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 1.28em;
  height: 1.28em;
  margin: 0 0.3em 0 0.06em;
  border: 1.4px solid currentColor;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 7%, transparent);
  font-family: var(--font-family-sans);
  font-size: 0.62em;
  font-weight: 650;
  font-style: normal;
  line-height: 1;
  vertical-align: 0.14em;
  text-indent: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.fmt-mark-a { color: var(--fmt-a); }
.fmt-mark-b { color: var(--fmt-b); }
.fmt-mark-c { color: var(--fmt-c); }
.fmt-mark-d { color: var(--fmt-d); }
.fmt-mark-e { color: var(--fmt-e); }

/* Color chip (owner order 2026-08-31, msg 5605c2a8): the marked word wears
   its letter's color. The wrapper is emitted by the renderer only while the
   chip is on; color inherits into the .w token span inside it, so the word-
   study underline and tap behavior are untouched. */
.fmt-word-a { color: var(--fmt-a); }
.fmt-word-b { color: var(--fmt-b); }
.fmt-word-c { color: var(--fmt-c); }
.fmt-word-d { color: var(--fmt-d); }
.fmt-word-e { color: var(--fmt-e); }

/* --- acrostic markers --------------------------------------------------- */

/* The LSB prints the Hebrew letter names in the text of Psalms 9 and 10, one
   above each strophe, and none of the owner's drawings show them. They reach
   the page three ways - a line inside a verse, a pericope title, the tail of
   Psalm 9's superscription - and this one rule takes all three off screen.

   display:none, deliberately, and NOT aria-hidden or removal from the DOM:
   the words stay in `textContent`, so text-to-speech, copy, share, the note
   quote and cross-references keep reading exactly the string they read before
   this feature existed. Formatting is display-only (owner ruling 2026-08-27);
   what TTS says about these words is a separate, text-level decision. */
.fmt-hidden {
  display: none;
}

/* --- turning labels off leaves the poetry ------------------------------- */
/* Labels-off is done in the renderer (the elements are simply not emitted),
   so nothing needs hiding here. The rule, the indentation and the section
   titles stay, which is the point of the chip. */

/* --- narrow screens ------------------------------------------------------ */

@media (max-width: 420px) {
  :root {
    --fmt-step: 0.8em;
    --fmt-gutter: 2.2em;
  }

  /* No .fmt-section-letter override any more: the letter is inline in the
     heading, so it cannot collide with the title and needs no gutter
     clearance. The gutter above is now only holding the verse numbers. */

  .fmt-line {
    padding-left: calc(var(--fmt-indent, 0) * 1em + 1em);
    text-indent: -1em;
  }

  /* The split-verse line carries the gutter as well, and its selector is more
     specific than the rule above, so the narrow-screen step has to be
     restated here or a split verse would keep the wide-screen indent. */
  .fmt-verse-split > .fmt-line {
    padding-left: calc(var(--fmt-gutter) + var(--fmt-indent, 0) * 1em + 1em);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fmt-chip {
    transition: none;
  }
}

/* ---- Mark explainers (owner order 976c183a) --------------------------------
   Touching a small letter, a large section letter, or the ‖ parallel mark
   opens a short explainer card. The finger target is enlarged by an
   invisible absolutely-positioned pseudo-element: padding on the marks
   themselves is WRONG here — .fmt-mark draws its circle from its own
   border-box, so padding inflates the circle, and a margin rule would
   stomp the marks' spacing margins (the owner caught exactly that on the
   first deploy). The pseudo-element cannot touch either. */
.fmt-mark,
.fmt-group,
.fmt-section-letter {
  cursor: pointer;
  position: relative;
}
.fmt-mark::after,
.fmt-group::after {
  content: '';
  position: absolute;
  inset: -8px -5px;
}

.fmt-explainer-body {
  margin: 0;
  padding: 0.75rem 1rem 1rem;
  background: var(--overlay-bg);
  font-family: var(--font-family-sans);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--fg);
}

/* Glyphs shown INSIDE the explainer card (owner 14f2d2b8): the drawn
   circle/badge illustrates the sentence. Slightly larger than in-psalm
   scale for legibility, no pointer affordance (they are illustrations,
   not buttons), and no enlarged hit area. */
#fmt-explainer-title .fmt-mark,
.fmt-explainer-body .fmt-mark {
  font-size: 0.72em;
  cursor: default;
  vertical-align: -0.05em;
}
#fmt-explainer-title .fmt-group,
.fmt-explainer-body .fmt-group,
#fmt-explainer-title .fmt-section-letter,
.fmt-explainer-body .fmt-section-letter {
  cursor: default;
}
#fmt-explainer-title .fmt-mark::after,
.fmt-explainer-body .fmt-mark::after,
#fmt-explainer-title .fmt-group::after,
.fmt-explainer-body .fmt-group::after {
  content: none;
}
#fmt-explainer-title .fmt-section-letter,
.fmt-explainer-body .fmt-section-letter {
  /* In prose the badge sits tight against its plural "s" and scales to
     the sentence, not the heading. */
  font-size: 0.8em;
  margin: 0 0.08em;
  vertical-align: -0.15em;
}