/* Web Bible reader (S2.5). External file by necessity: the site CSP is
   style-src 'self' (no unsafe-inline), so <style> blocks are dropped. */
/* The body's `antialiased` thins strokes on macOS; opting the reading
   text back to auto plus a 450 weight restores the ink. */
.scripture {
  font-size: 1.125rem;
  line-height: 1.9;
  font-weight: 450;
  color: #2d2a32;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}
/* Verse numbers are self-links (deep-linkable coordinates), styled as
   plain numbers until hovered. They stay in the tab order — a focused
   link is how keyboard users copy the permalink — with the skip link
   below as the bypass around the long run (WCAG 2.4.1). */
.scripture .v { font-size: 0.7em; vertical-align: super; color: #756a99; margin-right: 0.35em; font-weight: 600; text-decoration: none; }
.scripture .v:hover, .scripture .v:active { color: #4a3d6b; }
/* Visually hidden until keyboard focus lands on it; jumping moves the
   sequential focus point to #chapter-nav past the verse links. Own CSS
   rather than Tailwind's sr-only/focus:not-sr-only so the focus-reveal
   styling lives with the reader's other chrome in this sheet. */
.skip-link { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.skip-link:focus { position: static; display: inline-block; width: auto; height: auto; clip-path: none; margin-bottom: 0.75rem; font-size: 0.875rem; color: #4a3d6b; }
.scripture .noteref { font-size: 0.7em; vertical-align: super; color: var(--color-yukaria-coral-deep); margin-left: 0.1em; }
.scripture p.prose { margin: 0 0 0.4rem 0; }
.scripture .q1 { margin: 0 0 0 1.5rem; text-indent: -0.5rem; }
.scripture .q2 { margin: 0 0 0 3rem; text-indent: -0.5rem; }
.scripture .qr { text-align: right; font-style: italic; margin: 0.2rem 0; }
/* Poetry reads optically heavier than prose (short stacked lines, no
   paragraph gaps), so it steps back to 400 against the prose's 450. */
.scripture .q1, .scripture .q2, .scripture .qr { font-weight: 400; }
/* USFM breaks the stanza before a quote but resumes prose flush after
   it; mirror the gap. `+` only fires with no .stanza between, so this
   never doubles an existing break. */
.scripture .q1 + p.prose, .scripture .q2 + p.prose, .scripture .qr + p.prose { margin-top: 0.9rem; }
.scripture .li1 { margin-left: 1.5rem; }
.scripture .li2 { margin-left: 3rem; }
.scripture .pmo, .scripture .pc { margin: 0 0 0.4rem 1rem; }
.scripture .stanza { height: 0.9rem; }
.h-superscription { font-style: italic; color: #6b6474; margin: 1rem 0 0.75rem; }
.h-section { font-weight: 700; color: #4a3d6b; margin: 1.5rem 0 0.5rem; }
.h-subsection { font-weight: 600; color: #4a3d6b; margin: 1rem 0 0.4rem; }
.h-reference { font-size: 0.85rem; color: #6f6a7a; margin: 0 0 0.75rem; }
.h-acrostic { font-weight: 700; letter-spacing: 0.08em; color: #6b6474; margin: 1.25rem 0 0.4rem; }
.h-division, .h-division_range { text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.85rem; color: #6f6a7a; margin: 0.25rem 0; }
.footnotes { font-size: 0.85rem; color: #6b6474; }
/* Flash the jumped-to footnote or verse line so the eye lands right.
   Two separate rules, deliberately: :has() is unparseable to older
   engines, and one bad selector invalidates the whole comma list — the
   footnote rule must survive on its own (there the jump still works,
   just without the flash). */
.footnotes div:target { animation: target-flash 5.0s ease-out; }
.scripture p:has(a.v:target) { animation: target-flash 5.0s ease-out; }
/* #fff8dc, not a warmer parchment: every text color that can sit on the
   flash (verse numbers 4.61, note markers 4.82, note text 5.33) must
   stay >=4.5:1 for the full hold. */
@keyframes target-flash {
  0%, 40% { background-color: #fff8dc; }
  100% { background-color: transparent; }
}
/* Print: a closed disclosure would print footnote markers with no note
   text. The CSS-only reveal works only where ::details-content is
   supported (Chrome 131+, Safari 18.4+, Firefox 143+) — closed-details
   hiding lives in the UA shadow tree, so author display on a light-DOM
   child can never override it; everywhere else the beforeprint open in
   bible.js is the mechanism, and with JS off on those older engines,
   markers print without note text (accepted residual). The chapter
   picker is the opposite case: an open state persists into print and a
   Psalms page would print 150 chapter links — hidden on paper outright. */
@media print {
  .footnotes summary { display: none; }
  .footnotes::details-content { content-visibility: visible; }
  .chapter-picker { display: none; }
}
/* Chapter-picker chips. Styled here, not per-chip utility classes: the
   template emits only href + aria-current="page" on the current
   chapter, making the test-pinned attribute the single source of truth
   for AT and visuals — and cutting ~33KB of repeated classes to ~5KB
   on Psalms pages. */
.chapter-picker a {
  width: 2.25rem; height: 2.25rem;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #e5e7eb; border-radius: 0.25rem;
  font-size: 0.875rem; color: var(--color-yukaria-purple);
  text-decoration: none;
}
/* :active mirrors :hover -- touch has no hover, and preflight mutes
   the native tap flash; the press itself must be visible. */
.chapter-picker a:hover, .chapter-picker a:active { background-color: var(--color-yukaria-coral-deep); border-color: var(--color-yukaria-coral-deep); color: #fff; }
.chapter-picker a[aria-current="page"] { background-color: var(--color-yukaria-purple); border-color: var(--color-yukaria-purple); color: #fff; }