/* Shared liturgy page styles: verses, intro, pardes, chant tips, print.
 * Extracted by tools/extract-liturgy-css.mjs from the 51 liturgy pages, which
 * each carried their own copy. Only rules byte-identical on every page live here;
 * anything a page does differently stayed in that page's <style> block, which is
 * why the six layout variants still behave differently.
 */

/* Tehilim, chant-friendly verse layout */
 .t-intro {
 background: var(--bg-card);
 border: 1px solid var(--border);
 border-radius: 6px;
 padding: 22px 28px;
 margin-bottom: 24px;
 color: var(--text-dim);
 font-size: 15px;
 line-height: 1.65;
 }

.t-intro strong { color: var(--text); }

/* Print styles, print EVERYTHING (full HTML page), just recolor for paper */
 @media print {
 @page { margin: 10mm; }
 body { background: #fff !important; color: #000 !important; padding: 0 !important; font-size: 11pt; }
 .container { max-width: 100% !important; padding: 0 !important; }
 /* Hide only truly UI-only chrome that has no value on paper */
 .chord-tooltip, #print-btn { display: none !important; }
 .back { display: none !important; }
 /* Recolor cards/blocks to white-on-black-text */
 .t-intro, .t-chord, .active-voicings, .verse, .voicing-card, .chant-tip {
 background: #fff !important;
 color: #000 !important;
 border: 1px solid #aaa !important;
 box-shadow: none !important;
 page-break-inside: avoid;
 }
 .verse, .active-voicings, .voicing-card { page-break-inside: avoid; }
 .verse { margin-bottom: 14px; padding: 14px 16px; }
 .verse-num { color: #000 !important; border-color: #000 !important; background: #f0f0f0 !important; }
 .verse-full { color: #000 !important; border-color: #888 !important; }
 .word .he { color: #000 !important; }
 .word .tr { color: #444 !important; }
 .word .tr b { color: #000 !important; }
 .word .fr { color: #555 !important; }
 .stich-translation { color: #444 !important; border-color: #888 !important; }
 .verse-summary { background: #f7f7f7 !important; border-color: #888 !important; color: #000 !important; }
 .verse-summary strong { color: #000 !important; }
 .label, .av-title, .voicing-name, .verse-num, .tuning-label, .meta-line, .chant-tip h3 { color: #000 !important; }
 .meta-line, .av-hint, .chant-tip { color: #333 !important; }
 .chant-tip ul li { color: #000 !important; }
 .tuning-row select, .tuning-row input { background: #fff !important; color: #000 !important; border-color: #888 !important; }
 .progression { color: #000 !important; }
 .progression .chord { color: #000 !important; border-bottom: 1px dotted #444; background: transparent !important; }
 /* Voicing-card unpin × not useful on paper */
 .voicing-unpin { display: none !important; }
 /* Convert green SVG elements to black/grey for print */
 svg text { fill: #000 !important; }
 svg line { stroke: #555 !important; }
 svg rect[fill="#4A9EDB"], svg rect[fill="#ccc"] { fill: #444 !important; }
 svg circle[fill="#4A9EDB"] { fill: #000 !important; stroke: #000 !important; }
 svg circle[stroke="#4A9EDB"] { stroke: #000 !important; }
 h1 { color: #000 !important; font-size: 18pt; }
 .subtitle { color: #444 !important; }
 a { color: #000 !important; text-decoration: none !important; }
 header { border-bottom: 1px solid #000 !important; }
 .nav { display: none !important; }
 }

.verse {
 background: var(--bg-card);
 border: 1px solid var(--border);
 border-radius: 8px;
 padding: 32px 28px 26px;
 margin-bottom: 28px;
 }

.verse-num {
 display: inline-block;
 font-size: 11px;
 color: var(--accent);
 font-weight: 600;
 letter-spacing: 2px;
 text-transform: uppercase;
 border: 1px solid var(--accent-dim);
 border-radius: 50px;
 padding: 4px 12px;
 margin-bottom: 18px;
 }

.verse-full {
 font-family: 'Frank Ruhl Libre', 'David', 'David CLM', serif;
 direction: rtl;
 font-size: 30px;
 line-height: 1.7;
 text-align: right;
 color: var(--text);
 margin-bottom: 24px;
 padding-bottom: 22px;
 border-bottom: 1px dashed var(--border);
 }

.stich {
 margin-bottom: 22px;
 }

.stich:last-of-type { margin-bottom: 14px; }

.stich-words {
 display: flex;
 flex-wrap: wrap;
 gap: 22px 28px;
 direction: rtl;
 margin-bottom: 10px;
 }

.word {
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
 direction: rtl;
 min-width: 40px;
 }

.word .he {
 font-family: 'Frank Ruhl Libre', 'David', serif;
 font-size: 30px;
 line-height: 1.2;
 color: var(--text);
 margin-bottom: 4px;
 direction: rtl;
 }

.word .tr {
 font-family: 'JetBrains Mono', 'Consolas', monospace;
 font-size: 13px;
 color: var(--accent);
 letter-spacing: 0.3px;
 direction: ltr;
 margin-bottom: 4px;
 }

.word .tr b { color: #fff; font-weight: 700; }

html.light .word .tr b { color: #000; }

.word .fr {
 font-size: 13px;
 color: var(--text-dim);
 direction: ltr;
 font-style: italic;
 line-height: 1.3;
 max-width: 130px;
 }

.stich-translation {
 color: var(--text-dim);
 font-size: 14px;
 font-style: italic;
 padding-right: 12px;
 border-right: 2px solid var(--accent-dim);
 margin-top: 14px;
 line-height: 1.5;
 text-align: right;
 direction: rtl;
 unicode-bidi: plaintext;
 }

/* The note under a stanza is ENGLISH prose with Hebrew words dropped in. It used to inherit
   the grid's RTL with `unicode-bidi: plaintext`, which picks the paragraph direction from the
   first strong character: a note opening with an English word read fine, a note opening with
   a Hebrew word (songs-030, bridge: "עַם הַנֶּצַח ... is a fixed phrase") became an RTL paragraph
   and the bidi algorithm scrambled every English run around the Hebrew — quotes, parens and
   dashes jumping to the wrong side, clauses out of order. The paragraph is English, so it is
   LTR, left-aligned, with the accent bar on the reading side; each Hebrew insert is an
   isolated run so its neighbours' punctuation stays put. */
.verse-summary {
 background: rgba(74, 158, 219, 0.05);
 border-left: 3px solid var(--accent);
 padding: 14px 18px;
 margin-top: 18px;
 font-size: 14px;
 color: var(--text);
 line-height: 1.6;
 border-radius: 0 4px 4px 0;
 text-align: left;
 direction: ltr;
 unicode-bidi: isolate;
 }

.verse-summary strong { color: var(--accent); unicode-bidi: isolate; }

.chant-tip {
 background: var(--bg-card);
 border: 1px solid var(--border);
 border-radius: 6px;
 padding: 22px 28px;
 margin-top: 32px;
 font-size: 14px;
 line-height: 1.65;
 color: var(--text-dim);
 }

.chant-tip h3 { color: var(--text); margin-bottom: 12px; font-size: 15px; text-transform: uppercase; letter-spacing: 1px; }

.chant-tip ul { padding-left: 22px; margin-top: 10px; }

.chant-tip li { margin-bottom: 6px; }

@media (max-width: 600px) {
 .verse-full { font-size: 24px; }
 .word .he { font-size: 24px; }
 .stich-words { gap: 16px 18px; }
 }

/* Compact one-screen layout, verses in 3 RTL columns, no full Hebrew block, no per-verse summary (moved to PARDES card) */
 .verse-full { display: none; }

.verses-grid .verse-summary { display: none; }

.verses-grid .stich { margin-bottom: 10px; }

.verses-grid .stich:last-of-type { margin-bottom: 4px; }

.verses-grid .stich-words {
 gap: 8px 12px;
 margin-bottom: 6px;
 }

.verses-grid .word { min-width: 32px; }

.verses-grid .word .tr {
 font-size: 11px;
 margin-bottom: 2px;
 letter-spacing: 0.2px;
 }

.verses-grid .word .fr {
 font-size: 11px;
 line-height: 1.25;
 max-width: 100px;
 }

.verses-grid .stich-translation {
 font-size: 12px;
 line-height: 1.4;
 padding-right: 8px;
 margin-top: 6px;
 }

/* PARDES analysis card */
 .pardes-card {
 background: var(--bg-card);
 border: 1px solid var(--border);
 border-radius: 6px;
 padding: 24px 30px;
 margin-top: 28px;
 font-size: 13.5px;
 line-height: 1.6;
 color: var(--text-dim);
 }

.pardes-card > h3 {
 color: var(--text);
 margin-bottom: 6px;
 font-size: 15px;
 text-transform: uppercase;
 letter-spacing: 1px;
 }

.pardes-card .pardes-intro {
 font-size: 12px;
 font-style: italic;
 color: var(--text-faint);
 margin-bottom: 20px;
 }

.pardes-level {
 border-left: 2px solid var(--accent-dim);
 padding-left: 14px;
 margin-bottom: 18px;
 text-align: justify;
 direction: ltr;
 unicode-bidi: plaintext;
 }

.pardes-level:last-child { margin-bottom: 0; }

.pardes-level h4 {
 color: var(--accent);
 font-size: 13px;
 margin-bottom: 8px;
 font-weight: 600;
 letter-spacing: 0.5px;
 }

.pardes-level p { margin: 0; }

.pardes-level strong { color: var(--text); }

.pardes-level em { color: var(--text); font-style: italic; }

/* Source line at the foot of a generated psalm page. The Hebrew is share-alike
   and the English is public domain; naming them is the condition of using both. */
.t-source {
  margin: 28px 0 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-faint);
}

/* ==========================================================================
   SONG PAGES — the chord line under a sung line.
   ==========================================================================
   Lifted out of liturgy/songs-004 and put here once. The seven hand-written
   song pages each carry their own copy of these rules in a <style> block, which
   is why editing one of them never changes the others; the pages built by
   tools/songs-build.mjs carry no per-page CSS at all and read this instead.

   The stich becomes a column so three things can stack in a fixed order:
   the Hebrew words, then the chords directly beneath them, then the English.
   Chords sit under the Hebrew and not under the translation because that is
   where a player looks — one line down from the syllable they are singing. */
.song-grid .stich {
  display: flex;
  flex-direction: column;
  direction: ltr;                 /* reset for the flex axis; children restore RTL */
  align-items: flex-end;          /* everything hangs off the right edge */
}
.song-grid .stich > *        { direction: rtl; }
.song-grid .stich-words      { width: 100%; order: 1; }
.song-grid .stich-chords     { order: 2; }
.song-grid .stich-translation{ width: 100%; order: 3; }

.song-grid .stich-chords {
  direction: ltr;                 /* chord symbols read left to right */
  text-align: left;
  width: fit-content;
  max-width: 100%;
  margin-top: 2px;
  padding: 3px 8px;
  background: rgba(74, 158, 219, 0.08);
  border-right: 2px solid var(--accent);
  border-radius: 3px 0 0 3px;
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  line-height: 1.3;
  color: var(--text-dim);
}
.song-grid .stich-chords .chord {
  color: var(--accent);
  font-weight: 700;
  padding: 0 3px;
  border-bottom: 1px dotted var(--accent-dim);
  cursor: help;
  transition: all 0.15s;
}
.song-grid .stich-chords .chord:hover {
  color: var(--text);
  background: rgba(74, 158, 219, 0.18);
  border-bottom-color: var(--accent);
  border-radius: 2px;
}
html.light .song-grid .stich-chords .chord:hover { color: #000; }
.song-grid .stich-chords .sep { color: var(--text-faint); margin: 0 2px; }

/* A stanza may run across a column boundary; a single sung line may not. */
.song-grid .verse  { break-inside: auto; -webkit-column-break-inside: auto; }
.song-grid .stich  { break-inside: avoid; -webkit-column-break-inside: avoid; margin-bottom: 6px; }

/* The source line, shown whole above its word-by-word breakdown. */
.song-grid .verse-full {
  font-size: 19px;
  line-height: 1.75;
  text-align: right;
  direction: rtl;
  margin-bottom: 10px;
  color: var(--text);
}
.song-grid .verse-full { font-size: 16px; line-height: 1.6; margin-bottom: 6px; }

/* Where the words came from and under what licence. Every song page states it,
   because the pages carry redistributed text and the licence differs per song. */
.t-provenance {
  max-width: 1100px;
  margin: 18px auto 40px;
  padding: 10px 18px;
  font-size: 11px;
  line-height: 1.7;
  color: var(--text-faint);
  border-top: 1px solid var(--border);
}
.t-provenance strong { color: var(--text-dim); font-weight: 600; }

/* --------------------------------------------------------------------------
   SONG GRID — what a song page needs that a psalm page does not.
   --------------------------------------------------------------------------
   style.css pins html .verses-grid to three equal columns with !important on
   every declaration, which is right for a psalm: 6 to 40 short verses fill them.
   A song is not shaped like that. Half of these have one stanza — a single
   biblical verse — and in a three-column RTL grid that one card sits alone in
   the right-hand third with two thirds of the page empty beside it.

   So the builder counts the stanzas and writes the count into data-cols, and the
   attribute selector below carries enough specificity to answer style.css. This
   is layout following content instead of content being poured into a fixed
   layout, and it costs one attribute. */
html .verses-grid[data-cols="1"] {
  grid-template-columns: 1fr !important;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
html .verses-grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr) !important; }

/* The whole sung line, and the note under the stanza. Both are hidden inside a
   psalm grid — deliberately, the psalm design moved that material into the
   PARDES card. A song is the other way round: the line is the unit you sing, and
   nobody sings a word grid. So the song grid puts them back. */
.song-grid .verse-full { display: block; }
.song-grid .verse-summary { display: block; }