@youversion/platform-core 1.21.0 → 1.22.1

package/src/styles/bible-reader.css

@@ -0,0 +1,1515 @@
+[data-slot='yv-bible-renderer'],
+[data-yv-sdk-bible-reader] {
+  /* Makes it where cascading styles from the parent app do not affect the bible reader */
+  all: unset;
+  display: block;
+
+  width: 100%;
+  /* This helps readability and is a standard max width for text */
+  max-width: 65ch;
+
+  --yv-reader-font-size: 20px;
+  --yv-reader-line-height: 1.625;
+
+  /* Set base typography on the root so descendants can inherit */
+  font-family: var(--yv-reader-font-family);
+  font-size: var(--yv-reader-font-size);
+  line-height: var(--yv-reader-line-height);
+  color: var(--yv-foreground);
+
+  /* Disable text selection and tap highlights on mobile */
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  user-select: none;
+
+  /* Inherit typography from root instead of forcing a fixed size on every element.
+     This allows em-based sizing in headings/poetry to cascade properly to children. */
+  & * {
+    font-family: var(--yv-reader-font-family);
+    font-size: inherit;
+    line-height: inherit;
+    margin: 0;
+    padding: 0;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  /* Hide metadata and navigation classes */
+  & .id, /* \id - File identification */
+  & .ide, /* \ide - Encoding specification */
+  & .usfm, /* \usfm - USFM version specification */
+  & .h, /* \h - Running header text */
+  & .sts, /* \sts - Status */
+  & .rem, /* \rem - Remark */
+  & .toc1, /* \toc1 - Long table of contents text */
+  & .toc2, /* \toc2 - Short table of contents text */
+  & .toc3, /* \toc3 - Book abbreviation */
+  & .toca1, /* \toca1 - Alt language long TOC text */
+  & .toca2, /* \toca2 - Alt language short TOC text */
+  & .toca3, /* \toca3 - Alt language book abbreviation */
+  & .ie, /* \ie - Introduction end marker */
+  & .mte, /* \mte - Major title at ending (print convention) */
+  & .cl {
+    /* \cl - Chapter label */
+    display: none;
+  }
+
+  /* Version/chapter container */
+  & .version {
+    margin-top: 1.6em;
+    padding: 1.2em;
+  }
+
+  /* Chapter label hidden */
+  & .chapter > .label {
+    display: none;
+  }
+
+  /* Verse labels */
+  & .verse > .label,
+  & .fv,
+  & .yv-vlbl {
+    display: inline;
+    font-size: 0.65em;
+    color: var(--yv-muted-foreground);
+    line-height: 1em;
+    vertical-align: baseline;
+    position: relative;
+    top: -0.3em;
+    white-space: nowrap;
+  }
+
+  &[data-show-verse-numbers='false'] .yv-vlbl {
+    display: none;
+  }
+
+  & .yv-vlbl {
+    font-family: var(--yv-font-sans);
+  }
+
+  /* \f - Footnote container (YouVersion wrapper) */
+  & .yv-n {
+    display: none;
+  }
+
+  /* Hide footnote buttons when notes are disabled */
+  &[data-show-notes='false'] [data-verse-footnote] {
+    display: none;
+  }
+
+  /* Verse marker */
+  & .vp {
+    display: inline;
+    font-size: 0.5em;
+    color: var(--yv-gray-20);
+    line-height: 1em;
+    vertical-align: baseline;
+    position: relative;
+    top: -0.6em;
+  }
+
+  /* Prevent verse label from wrapping away from first word */
+  & .verse > .label + .content,
+  & .yv-vlbl + .content,
+  & .fv + .content {
+    white-space: normal;
+  }
+
+  /* Wrap verse + label + content together to prevent breaking */
+  & .yv-v,
+  & .verse {
+    display: inline;
+  }
+
+  /* Only show pointer cursor when verses are selectable */
+  &[data-selectable='true'] .yv-v,
+  &[data-selectable='true'] .verse {
+    cursor: pointer;
+  }
+
+  /* Selected verse styling */
+  & .yv-v.yv-v-selected {
+    text-decoration: underline;
+    text-decoration-color: var(--yv-border);
+    text-underline-offset: 0.33em;
+  }
+
+  /* Demo highlighted verse styling 20% opacity of expressive yellow 30 */
+  & .yv-v.yv-v-highlighted {
+    background-color: rgba(241, 156, 51, 0.2);
+    border-radius: 2px;
+    box-decoration-break: clone;
+    -webkit-box-decoration-break: clone;
+  }
+
+  /* ============================================================
+     TITLES — Major Book Titles
+     ============================================================ */
+
+  /* \mt, \mt1 - Main title (level 1) — FontSize 20, Bold, Center */
+  & .mt,
+  & .mt1 {
+    font-size: 1.6em;
+    font-weight: bold;
+    line-height: 1.4em;
+    text-align: start; /* Intentionally set as left-aligned per YV standards */
+    margin: 1em 0 0.25em;
+    display: block;
+  }
+
+  /* \mt2 - Main title (level 2) — FontSize 16, Italic, Center */
+  & .mt2 {
+    font-size: 1.3em;
+    font-style: italic;
+    line-height: 1.4em;
+    text-align: start; /* Intentionally set as left-aligned per YV standards */
+    margin: 0.5em 0 0.15em;
+    display: block;
+  }
+
+  /* \mt3 - Main title (level 3) — FontSize 16, Bold, Center */
+  & .mt3 {
+    font-size: 1.3em;
+    font-weight: bold;
+    line-height: 1.4em;
+    text-align: start; /* Intentionally set as left-aligned per YV standards */
+    margin: 0.15em 0;
+    display: block;
+  }
+
+  /* \mt4 - Main title (level 4) — FontSize 12, Center */
+  & .mt4 {
+    line-height: 1.8em;
+    text-align: start; /* Intentionally set as left-aligned per YV standards */
+    margin: 0.15em 0;
+    display: block;
+  }
+
+  /* ============================================================
+     TITLES — Introduction Major Titles
+     ============================================================ */
+
+  /* \imt, \imt1 - Introduction major title (level 1) — FontSize 14, Bold, Center */
+  & .imt,
+  & .imt1 {
+    font-size: 1.17em;
+    font-weight: bold;
+    line-height: 1.8em;
+    text-align: start; /* Intentionally set as left-aligned per YV standards */
+    margin: 1em 0 0.25em;
+    display: block;
+  }
+
+  /* \imt2 - Introduction major title (level 2) — FontSize 13, Italic, Center */
+  & .imt2 {
+    font-size: 1.08em;
+    font-style: italic;
+    line-height: 1.8em;
+    text-align: start; /* Intentionally set as left-aligned per YV standards */
+    margin: 0.5em 0 0.25em;
+    display: block;
+  }
+
+  /* \imt3 - Introduction major title (level 3) — FontSize 12, Bold, Center */
+  & .imt3 {
+    font-weight: bold;
+    line-height: 1.8em;
+    text-align: start; /* Intentionally set as left-aligned per YV standards */
+    margin: 0.15em 0;
+    display: block;
+  }
+
+  /* \imt4 - Introduction major title (level 4) — FontSize 12, Italic, Center */
+  & .imt4 {
+    font-style: italic;
+    line-height: 1.8em;
+    text-align: start; /* Intentionally set as left-aligned per YV standards */
+    margin: 0.15em 0;
+    display: block;
+  }
+
+  /* ============================================================
+     TITLES — Introduction Major Title Ending
+     ============================================================ */
+
+  /* \imte, \imte1 - Introduction major title ending (level 1) — FontSize 20, Bold, Center */
+  & .imte,
+  & .imte1 {
+    font-size: 1.6em;
+    font-weight: bold;
+    line-height: 1.4em;
+    text-align: start; /* Intentionally set as left-aligned per YV standards */
+    margin: 1em 0 0.25em;
+    display: block;
+  }
+
+  /* \imte2 - Introduction major title ending (level 2) — FontSize 16, Italic, Center */
+  & .imte2 {
+    font-size: 1.3em;
+    font-style: italic;
+    line-height: 1.4em;
+    text-align: start; /* Intentionally set as left-aligned per YV standards */
+    margin: 0.5em 0 0.15em;
+    display: block;
+  }
+
+  /* ============================================================
+     HEADINGS — Major Section Headings
+     ============================================================ */
+
+  /* \ms, \ms1 - Major section heading (level 1) — FontSize 14, Bold, Center */
+  & .ms,
+  & .ms1 {
+    font-size: 1.17em;
+    font-weight: bold;
+    line-height: 1.8em;
+    text-align: start; /* Intentionally set as left-aligned per YV standards */
+    margin: 1em 0 0.25em;
+    display: block;
+  }
+
+  /* \ms2 - Major section heading (level 2) — FontSize 14, Bold, Center */
+  & .ms2 {
+    font-size: 1.17em;
+    font-weight: bold;
+    line-height: 1.8em;
+    text-align: start; /* Intentionally set as left-aligned per YV standards */
+    margin: 0.5em 0;
+    display: block;
+  }
+
+  /* \ms3 - Major section heading (level 3) — FontSize 14, Italic, Center */
+  & .ms3 {
+    font-size: 1.17em;
+    font-style: italic;
+    line-height: 1.8em;
+    text-align: start; /* Intentionally set as left-aligned per YV standards */
+    margin: 0.5em 0;
+    display: block;
+  }
+
+  /* \mr - Major section reference range — Italic, Center */
+  & .mr {
+    display: block;
+    font-style: italic;
+    line-height: 1.8em;
+    text-align: start; /* Intentionally set as left-aligned per YV standards */
+    margin: 0 0 0.5em;
+  }
+
+  /* ============================================================
+     HEADINGS — Section Headings
+     ============================================================ */
+
+  /* \s, \s1 - Section heading (level 1) — Bold, Center */
+  & .s,
+  & .s1 {
+    font-weight: bold;
+    line-height: 1.8em;
+    text-align: start; /* Intentionally set as left-aligned per YV standards */
+    margin: 0.5em 0 0.5em 0;
+    display: block;
+  }
+
+  /* \s2 - Section heading (level 2) — Italic, Center */
+  & .s2 {
+    display: block;
+    font-style: italic;
+    line-height: 1.8em;
+    text-align: start; /* Intentionally set as left-aligned per YV standards */
+    margin: 0.5em 0;
+  }
+
+  /* \s3 - Section heading (level 3) — Italic, Left */
+  & .s3 {
+    display: block;
+    font-style: italic;
+    line-height: 1.8em;
+    margin: 0.5em 0 0.25em;
+  }
+
+  /* \s4 - Section heading (level 4) — Italic, Left */
+  & .s4 {
+    display: block;
+    font-style: italic;
+    line-height: 1.8em;
+    margin: 0.5em 0 0.25em;
+  }
+
+  /* \sr - Section reference range — Bold, Center */
+  & .sr {
+    display: block;
+    font-weight: bold;
+    line-height: 1.8em;
+    text-align: start; /* Intentionally set as left-aligned per YV standards */
+    margin: 0 0 0.5em;
+  }
+
+  /* \r - Parallel passage reference — Italic, Center */
+  & .r {
+    display: block;
+    font-style: italic;
+    line-height: 1.8em;
+    text-align: start; /* Intentionally set as left-aligned per YV standards */
+    margin: 0 0 0.5em;
+  }
+
+  /* \sp - Speaker identification — Italic, Left */
+  & .sp {
+    display: block;
+    font-style: italic;
+    line-height: 1.8em;
+    margin: 0 0 0.5em;
+  }
+
+  /* \d - Descriptive title / Hebrew subtitle — Italic, Center */
+  & .d {
+    display: block;
+    font-style: italic;
+    line-height: 1.8em;
+    text-align: start; /* Intentionally set as left-aligned per YV standards */
+    margin: 0.5em 0;
+  }
+
+  /* \qa - Acrostic heading — Italic */
+  & .qa {
+    display: block;
+    font-style: italic;
+    line-height: 1.8em;
+    margin: 0 0 0.5em;
+  }
+
+  & .heading {
+    font-weight: bold;
+    line-height: 1.8em;
+    margin: 0.5em 0 0.5em 0;
+    display: block;
+  }
+
+  /* ============================================================
+     HEADINGS — Introduction Section Headings
+     ============================================================ */
+
+  /* \is, \is1 - Introduction section heading (level 1) — FontSize 14, Bold, Center */
+  & .is,
+  & .is1 {
+    font-size: 1.17em;
+    font-weight: bold;
+    line-height: 1.8em;
+    text-align: start; /* Intentionally set as left-aligned per YV standards */
+    margin: 0.5em 0 0.5em 0;
+    display: block;
+  }
+
+  /* \is2 - Introduction section heading (level 2) — FontSize 12, Bold, Center */
+  & .is2 {
+    font-weight: bold;
+    line-height: 1.8em;
+    text-align: start; /* Intentionally set as left-aligned per YV standards */
+    margin: 0.5em 0 0.5em 0;
+    display: block;
+  }
+
+  /* \yv-h - YouVersion heading (custom, styled like \is) */
+  & .yv-h {
+    font-size: 1.17em;
+    font-weight: bold;
+    line-height: 1.8em;
+    text-align: start;
+    margin: 0.5em 0 0.5em 0;
+    display: block;
+  }
+
+  & .yv-h.r {
+    font-size: 1em;
+    font-weight: normal;
+    line-height: 1.8em;
+    font-style: italic;
+    text-align: start;
+    margin: 0 0 0.5em 0;
+    display: block;
+  }
+
+  /* ============================================================
+     INTRODUCTION — Outline
+     ============================================================ */
+
+  /* \iot - Introduction outline title — Bold, Center */
+  & .iot {
+    font-weight: bold;
+    line-height: 1.8em;
+    text-align: start; /* Intentionally set as left-aligned per YV standards */
+    margin: 0.5em 0;
+    display: block;
+  }
+
+  /* \io, \io1 - Introduction outline entry (level 1) — LeftMargin .5in */
+  & .io,
+  & .io1 {
+    display: block;
+    margin-inline-start: 2em;
+  }
+
+  /* This adds top margin to the introduction outline entries */
+  & .io:not(.io + .io),
+  & .io1:not(.io1 + .io1) {
+    margin-block-start: 1em;
+  }
+
+  /* This adds bottom margin to the introduction outline entries */
+  & .io:has(+ :not(.io)),
+  & .io1:has(+ :not(.io1)) {
+    margin-block-end: 1em;
+  }
+
+  /* \io2 - Introduction outline entry (level 2) — LeftMargin .75in */
+  & .io2 {
+    display: block;
+    margin-inline-start: 3em;
+  }
+
+  /* \io3 - Introduction outline entry (level 3) — LeftMargin 1in */
+  & .io3 {
+    display: block;
+    margin-inline-start: 4em;
+  }
+
+  /* \io4 - Introduction outline entry (level 4) — LeftMargin 1.25in */
+  & .io4 {
+    display: block;
+    margin-inline-start: 5em;
+  }
+
+  /* \ior - Introduction outline reference range — no special style per spec */
+  & .ior {
+    display: inline;
+  }
+
+  /* ============================================================
+     INTRODUCTION — List Items
+     ============================================================ */
+
+  /* \ili, \ili1 - Introduction list item (level 1) — hanging indent */
+  & .ili,
+  & .ili1 {
+    display: block;
+    margin-inline-start: 2em;
+    text-indent: -1em;
+  }
+
+  /* This adds top margin to the introduction list items */
+  & .ili:not(.ili + .ili) {
+    margin-block-start: 1em;
+  }
+
+  /* This adds bottom margin to the introduction list items */
+  & .ili:has(+ :not(.ili)) {
+    margin-block-end: 1em;
+  }
+
+  /* \ili2 - Introduction list item (level 2) */
+  & .ili2 {
+    display: block;
+    margin-inline-start: 3em;
+    text-indent: -1em;
+  }
+
+  /* \ili3 - Introduction list item (level 3) */
+  & .ili3 {
+    display: block;
+    margin-inline-start: 4em;
+    text-indent: -1em;
+  }
+
+  /* ============================================================
+     INTRODUCTION — Paragraphs
+     ============================================================ */
+
+  /* \ip - Introduction paragraph — first line indent */
+  & .ip {
+    display: block;
+    margin-bottom: 0;
+    text-indent: 1em;
+  }
+
+  /* \im - Introduction flush left (margin) paragraph — no indent */
+  & .im {
+    display: block;
+    text-indent: 0;
+    margin: 0;
+  }
+
+  /* \ipi - Indented introduction paragraph — first line indent + margins */
+  & .ipi {
+    display: block;
+    text-indent: 1em;
+    margin-inline-start: 1em;
+    margin-inline-end: 1em;
+  }
+
+  /* \imi - Indented introduction flush left paragraph — margins, no indent */
+  & .imi {
+    display: block;
+    margin-inline-start: 1em;
+    margin-inline-end: 1em;
+    text-indent: 0;
+  }
+
+  /* \ipq - Introduction quote from scripture text — Italic, margins, indent */
+  & .ipq {
+    display: block;
+    font-style: italic;
+    text-indent: 1em;
+    margin-inline-start: 1em;
+    margin-inline-end: 1em;
+  }
+
+  /* \imq - Introduction flush left quote from text — Italic, margins */
+  & .imq {
+    display: block;
+    font-style: italic;
+    text-indent: 0;
+    margin: 1em;
+  }
+
+  /* \ipr - Introduction right-aligned paragraph — Italic, Right, margins */
+  & .ipr {
+    display: block;
+    font-style: italic;
+    text-align: end;
+    margin-inline-start: 1em;
+    margin-inline-end: 1em;
+  }
+
+  /* \ib - Introduction blank line */
+  & .ib {
+    display: block;
+    height: 1em;
+  }
+
+  /* \iex - Introduction explanatory/bridge text — first line indent */
+  & .iex {
+    display: block;
+    text-indent: 1em;
+    line-height: 2em;
+    margin: 0.5em 0;
+  }
+
+  /* \iqt - Introduction quoted text (scripture quotation, character style) — Italic */
+  & .iqt {
+    font-style: italic;
+  }
+
+  /* ============================================================
+     INTRODUCTION — Poetry
+     ============================================================ */
+
+  /* \iq, \iq1 - Introduction poetry (level 1) — Italic, hanging indent */
+  & .iq,
+  & .iq1 {
+    display: block;
+    font-style: italic;
+    padding-inline-start: 2em;
+    text-indent: -1em;
+    margin-bottom: calc(var(--yv-reader-font-size) * 0.3);
+  }
+
+  /* \iq2 - Introduction poetry (level 2) — Italic */
+  & .iq2 {
+    display: block;
+    font-style: italic;
+    padding-inline-start: 3em;
+    text-indent: -1.5em;
+    margin-bottom: calc(var(--yv-reader-font-size) * 0.3);
+  }
+
+  /* \iq3 - Introduction poetry (level 3) — Italic */
+  & .iq3 {
+    display: block;
+    font-style: italic;
+    padding-inline-start: 3em;
+    text-indent: -2em;
+    margin-bottom: calc(var(--yv-reader-font-size) * 0.3);
+  }
+
+  /* \iq4 - Introduction poetry (level 4) — Italic */
+  & .iq4 {
+    display: block;
+    font-style: italic;
+    padding-inline-start: 4em;
+    text-indent: -2em;
+    margin-bottom: calc(var(--yv-reader-font-size) * 0.3);
+  }
+
+  /* ============================================================
+     NOTES — Footnote/Note Character Styles
+     ============================================================ */
+
+  /* Notes within headings */
+  & .s1 .note .heading,
+  & .s .note .heading {
+    font-size: 0.67em;
+    font-weight: normal;
+    font-style: normal;
+  }
+
+  & .s1 .note_close,
+  & .s .note_close {
+    font-size: 0.67em;
+  }
+
+  & .s .note,
+  & .is .note,
+  & .s1 .note,
+  & .ms1 .note,
+  & .is1 .note,
+  & .is2 .note,
+  & .mr .note {
+    font-size: 0.9em;
+  }
+
+  & .note .fr {
+    /* \fr - Footnote reference (verse number) — Bold */
+    padding-inline-end: 0.25em;
+    font-weight: bold;
+  }
+
+  & .note .fq, /* \fq - Footnote quotation from text — Italic */
+  & .note .fqa {
+    /* \fqa - Footnote alternate translation — Italic */
+    font-style: italic;
+  }
+
+  & .note .ft {
+    /* \ft - Footnote text */
+    display: inline;
+  }
+
+  & .note .fv {
+    /* \fv - Footnote verse number — Superscript */
+    vertical-align: super;
+    font-size: 0.75em;
+  }
+
+  & .note .fk {
+    /* \fk - Footnote keyword — Bold + Italic */
+    font-style: italic;
+    font-weight: bold;
+  }
+
+  & .note .fl {
+    /* \fl - Footnote label — Italic + Bold */
+    font-weight: bold;
+    font-style: italic;
+  }
+
+  /* ============================================================
+     PARAGRAPHS
+     ============================================================ */
+
+  /* \p - Normal paragraph — first line indent */
+  & .p {
+    display: block;
+    margin-bottom: 0;
+    text-indent: 1em;
+  }
+
+  /* Special paragraph spacing rules */
+  & .pi + .p,
+  & .pi1 + .p,
+  & .s + .pi,
+  & .s + .pi1,
+  & .s1 + .pi,
+  & .s1 + .pi1,
+  & .ms + .p,
+  & .ms1 + .p,
+  & .ms2 + .p,
+  & .q + .m,
+  & .q1 + .m,
+  & .q2 + .m,
+  & .q3 + .m {
+    margin-top: 0.5em;
+    text-indent: 0;
+  }
+
+  & .label + .p {
+    text-indent: 0;
+  }
+
+  & .chapter div:first-child {
+    margin-top: 0;
+  }
+
+  /* Hebrew text heading spacing */
+  & .d + .d {
+    margin-top: -1.25em;
+  }
+
+  /* Complex spacing rules between elements */
+  & .p + .s,
+  & .p + .s1,
+  & .p + .s2,
+  & .p + .ms,
+  & .p + .ms1,
+  & .p + .ms2,
+  & .p + .q,
+  & .p + .q1,
+  & .p + .li,
+  & .p + .li1,
+  & .li + .li2,
+  & .li1 + .li2,
+  & .li2 + .li,
+  & .li2 + .li1,
+  & .m + .s,
+  & .m + .s1,
+  & .m + .s2,
+  & .q + p,
+  & .q1 + .p,
+  & .q2 + .p,
+  & .q + .s,
+  & .q + .s1,
+  & .q + .s2,
+  & .q + .ms,
+  & .q + .ms1,
+  & .q + .ms2,
+  & .q1 + .s,
+  & .q1 + .s1,
+  & .q1 + .s2,
+  & .q1 + .ms,
+  & .q1 + .ms1,
+  & .q1 + .ms2,
+  & .q2 + .s,
+  & .q2 + .s1,
+  & .q2 + .s2,
+  & .q2 + .ms,
+  & .q2 + .m1,
+  & .q2 + .m2,
+  & .q3 + .s,
+  & .q3 + .s1,
+  & .q3 + .s2,
+  & .q3 + .ms,
+  & .q3 + .m1,
+  & .q3 + .m2,
+  & .imt + .is,
+  & .imt + .is1,
+  & .imt1 + .is,
+  & .imt1 + .is1,
+  & .ip + .is,
+  & .ip + .is1,
+  & .io + .is,
+  & .io + .is1,
+  & .io1 + .is,
+  & .io1 + .is1,
+  & .io2 + .is,
+  & .io2 + .is1,
+  & .io3 + .is,
+  & .io3 + .is1,
+  & .ip + .io,
+  & .ip + .io1,
+  & .ip + .io2,
+  & .ip + .io3,
+  & .table + .p,
+  & .p + .table,
+  & .pi1 + .s,
+  & .pi + .s {
+    margin-top: 1em;
+  }
+
+  & .p + .pm,
+  & .p + .pmo,
+  & .p + .pmc,
+  & .p + .q1,
+  & .p + .q2,
+  & .p + .q3,
+  & .p + .q4,
+  & .p + .qr,
+  & .p + .qm1,
+  & .p + .qm2,
+  & .p + .pmr,
+  & .m + .pm,
+  & .m + .pmo,
+  & .m + .pmc,
+  & .m + .q1,
+  & .m + .q2,
+  & .m + .q3,
+  & .m + .q4,
+  & .m + .qr,
+  & .m + .qm1,
+  & .m + .qm2,
+  & .m + .pmr,
+  & .mi + .pm,
+  & .mi + .pmo,
+  & .mi + .pmc,
+  & .mi + .q1,
+  & .mi + .q2,
+  & .mi + .q3,
+  & .mi + .q4,
+  & .mi + .qr,
+  & .mi + .qm1,
+  & .mi + .qm2,
+  & .mi + .pmr,
+  & .pi1 + .pm,
+  & .pi1 + .pmo,
+  & .pi1 + .pmc,
+  & .pi1 + .q1,
+  & .pi1 + .q2,
+  & .pi1 + .q3,
+  & .pi1 + .q4,
+  & .pi1 + .qr,
+  & .pi1 + .qm1,
+  & .pi1 + .qm2,
+  & .pi1 + .pmr,
+  & .pi2 + .pm,
+  & .pi2 + .pmo,
+  & .pi2 + .pmc,
+  & .pi2 + .q1,
+  & .pi2 + .q2,
+  & .pi2 + .q3,
+  & .pi2 + .q4,
+  & .pi2 + .qr,
+  & .pi2 + .qm1,
+  & .pi2 + .qm2,
+  & .pi2 + .pmr,
+  & .pi3 + .pm,
+  & .pi3 + .pmo,
+  & .pi3 + .pmc,
+  & .pi3 + .q1,
+  & .pi3 + .q2,
+  & .pi3 + .q3,
+  & .pi3 + .q4,
+  & .pi3 + .qr,
+  & .pi3 + .qm1,
+  & .pi3 + .qm2,
+  & .pi3 + .pmr,
+  & .li + .pm,
+  & .li + .pmo,
+  & .li + .pmc,
+  & .li + .q1,
+  & .li + .q2,
+  & .li + .q3,
+  & .li + .q4,
+  & .li + .qr,
+  & .li + .qm1,
+  & .li + .qm2,
+  & .li + .pmr,
+  & .li1 + .pm,
+  & .li1 + .pmo,
+  & .li1 + .pmc,
+  & .li1 + .q1,
+  & .li1 + .q2,
+  & .li1 + .q3,
+  & .li1 + .q4,
+  & .li1 + .qr,
+  & .li1 + .qm1,
+  & .li1 + .qm2,
+  & .li1 + .pmr,
+  & .li2 + .pm,
+  & .li2 + .pmo,
+  & .li2 + .pmc,
+  & .li2 + .q1,
+  & .li2 + .q2,
+  & .li2 + .q3,
+  & .li2 + .q4,
+  & .li2 + .qr,
+  & .li2 + .qm1,
+  & .li2 + .qm2,
+  & .li2 + .pmr,
+  & .li3 + .pm,
+  & .li3 + .pmo,
+  & .li3 + .pmc,
+  & .li3 + .q1,
+  & .li3 + .q2,
+  & .li3 + .q3,
+  & .li3 + .q4,
+  & .li3 + .qr,
+  & .li3 + .qm1,
+  & .li3 + .qm2,
+  & .li3 + .pmr,
+  & .li4 + .pm,
+  & .li4 + .pmo,
+  & .li4 + .pmc,
+  & .li4 + .q1,
+  & .li4 + .q2,
+  & .li4 + .q3,
+  & .li4 + .q4,
+  & .li4 + .qr,
+  & .li4 + .qm1,
+  & .li4 + .qm2,
+  & .li4 + .pmr,
+  & .lpi + .pm,
+  & .lpi + .pmo,
+  & .lpi + .pmc,
+  & .lpi + .q1,
+  & .lpi + .q2,
+  & .lpi + .q3,
+  & .lpi + .q4,
+  & .lpi + .qr,
+  & .lpi + .qm1,
+  & .lpi + .qm2,
+  & .lpi + .pmr {
+    margin-top: 0;
+  }
+
+  /* ============================================================
+     CHARACTER STYLES
+     ============================================================ */
+
+  /* \wj - Words of Jesus (red letter) */
+  & .wj {
+    color: var(--yv-red);
+  }
+
+  /* \nd - Name of Deity (e.g. "LORD") — Smallcaps */
+  & .nd {
+    font-variant: small-caps;
+  }
+
+  /* \sc - Small-cap text — Smallcaps */
+  & .sc {
+    font-variant: small-caps;
+  }
+
+  /* \bd - Bold text */
+  & .bd {
+    font-weight: bold;
+  }
+
+  /* \em - Emphasis text — Italic */
+  & .em {
+    font-style: italic;
+  }
+
+  /* \bdit - Bold-italic text */
+  & .bdit {
+    font-weight: bold;
+    font-style: italic;
+  }
+
+  /* \bk - Book name reference — Italic */
+  & .bk {
+    font-style: italic;
+  }
+
+  /* \ord - Ordinal number ending — Superscript */
+  & .ord {
+    font-size: 0.75em;
+    line-height: 2em;
+    position: relative;
+    vertical-align: baseline;
+    top: -0.5em;
+  }
+
+  /* \pn - Proper name (semantic marker, no special formatting in this reader) */
+  & .pn {
+    font-weight: normal;
+    font-style: normal;
+  }
+
+  /* \k - Keyword/keyterm — Italic + Bold */
+  & .k {
+    font-style: italic;
+    font-weight: bold;
+  }
+
+  /* \w - Wordlist/glossary entry */
+  & .w {
+    display: inline;
+  }
+
+  /* \rq - Inline cross-reference quotation — Italic, smaller */
+  & .rq {
+    font-style: italic;
+    font-size: 0.8em;
+  }
+
+  /* \x - Cross-reference note */
+  & .x {
+    display: none;
+  }
+
+  /* \f - Footnote container, \fe - Endnote container */
+  & .f,
+  & .fe {
+    display: inline;
+  }
+
+  /**
+    * \add - Translator addition — Italic
+    * {@see https://docs.usfm.bible/usfm/latest/char/features/add.html}
+    */
+  & .add {
+    font-style: italic;
+  }
+
+  /* \it - Italic text, \tl - Transliterated word,
+     \sls - Secondary language/alternate source text — Italic */
+  & .it,
+  & .tl,
+  & .sls {
+    font-style: italic;
+  }
+
+  /* \qt - Quoted text (OT quotation in NT, etc.) — Italic */
+  & .qt {
+    font-style: italic;
+  }
+
+  /* \sig - Signature of the author of a letter/epistle — Italic */
+  & .sig {
+    font-style: italic;
+  }
+
+  /* \dc - Deuterocanonical/LXX additions — Italic */
+  & .dc {
+    font-style: italic;
+  }
+
+  /* \no - Normal text (resets italic/bold within a styled context) */
+  & .no {
+    font-weight: normal;
+    font-style: normal;
+  }
+
+  /* \fdc - Footnote deuterocanonical content */
+  & .fdc {
+    font-style: italic;
+  }
+
+  /* ============================================================
+     POETRY
+     ============================================================ */
+
+  /* \b - Blank line (stanza break in poetry) */
+  & .b {
+    line-height: 2em;
+    height: 1em;
+    display: block;
+  }
+
+  /* \q, \q1 - Poetic line (level 1) */
+  & .q,
+  & .q1 {
+    display: block;
+    padding-inline-start: 2em;
+    text-indent: -2em;
+    margin-bottom: calc(var(--yv-reader-font-size) * 0.3);
+  }
+
+  & .q2 {
+    display: block;
+    padding-inline-start: 2em;
+    text-indent: -1em;
+    margin-bottom: calc(var(--yv-reader-font-size) * 0.3);
+  }
+
+  & .q3 {
+    display: block;
+    padding-inline-start: 3em;
+    text-indent: -2em;
+    margin-bottom: calc(var(--yv-reader-font-size) * 0.3);
+  }
+
+  & .q4 {
+    display: block;
+    padding-inline-start: 4em;
+    text-indent: -2em;
+    margin-bottom: calc(var(--yv-reader-font-size) * 0.3);
+  }
+
+  /* \qc - Centered poetic line */
+  & .qc {
+    text-align: center;
+    display: block;
+    margin-bottom: calc(var(--yv-reader-font-size) * 0.5);
+  }
+
+  /* \qr - Right-aligned poetic refrain */
+  & .qr {
+    text-align: end;
+    display: block;
+    margin-bottom: calc(var(--yv-reader-font-size) * 0.5);
+  }
+
+  /* \qs - Selah (commonly in Psalms and Habakkuk) — Italic */
+  & .qs {
+    display: block;
+    text-align: end;
+    font-style: italic;
+    margin-top: calc(var(--yv-reader-font-size) * 0.5);
+    margin-bottom: calc(var(--yv-reader-font-size) * 0.5);
+  }
+
+  /* \qac - Acrostic letter within a poetic line — Italic */
+  & .qac {
+    font-style: italic;
+  }
+
+  /* \qd - Hebrew note at end of poetic section — Italic */
+  & .qd {
+    display: block;
+    font-style: italic;
+    margin: 0.5em 0;
+    margin-inline-start: 1em;
+  }
+
+  /* \qm, \qm1 - Embedded text poetic line (level 1) */
+  & .qm,
+  & .qm1 {
+    display: block;
+    padding-inline-start: 2em;
+    text-indent: -2em;
+    margin-bottom: calc(var(--yv-reader-font-size) * 0.3);
+  }
+
+  & .qm2 {
+    display: block;
+    padding-inline-start: 2em;
+    text-indent: -1em;
+    margin-bottom: calc(var(--yv-reader-font-size) * 0.3);
+  }
+
+  & .qm3 {
+    display: block;
+    padding-inline-start: 3em;
+    text-indent: -2em;
+    margin-bottom: calc(var(--yv-reader-font-size) * 0.3);
+  }
+
+  & .qm4 {
+    display: block;
+    padding-inline-start: 4em;
+    text-indent: -2em;
+    margin-bottom: calc(var(--yv-reader-font-size) * 0.3);
+  }
+
+  /* ============================================================
+     PARAGRAPHS — Continued
+     ============================================================ */
+
+  /* \m - Continuation (margin) paragraph, \nb - No-break paragraph */
+  & .m,
+  & .nb {
+    margin-bottom: calc(var(--yv-reader-font-size) * 0.5);
+    text-indent: 0;
+    display: block;
+  }
+
+  /* \pi, \pi1 - Indented paragraph (level 1) — first line indent + left margin */
+  & .pi,
+  & .pi1 {
+    display: block;
+    text-indent: 1em;
+    padding-inline-start: 0;
+    margin-bottom: calc(var(--yv-reader-font-size) * 0.5);
+  }
+
+  & .pi2 {
+    display: block;
+    text-indent: 2em;
+    padding-inline-start: 1em;
+    margin-bottom: calc(var(--yv-reader-font-size) * 0.5);
+  }
+
+  & .pi3 {
+    display: block;
+    text-indent: 4em;
+    padding-inline-start: 3em;
+    margin-bottom: calc(var(--yv-reader-font-size) * 0.5);
+  }
+
+  /* \mi - Indented flush left, \pm - Embedded text, \pmo - Embedded opening,
+     \pmc - Embedded closing, \pmr - Embedded refrain */
+  & .mi,
+  & .pm,
+  & .pmo,
+  & .pmc,
+  & .pmr {
+    display: block;
+    text-indent: 0;
+    padding-inline-start: 2em;
+    margin-bottom: calc(var(--yv-reader-font-size) * 0.5);
+  }
+
+  /* \pr - Right-aligned paragraph */
+  & .pr {
+    text-align: end;
+    display: block;
+    margin-bottom: calc(var(--yv-reader-font-size) * 0.5);
+  }
+
+  /* \pc - Centered paragraph (inscriptions) */
+  & .pc {
+    text-align: center;
+    display: block;
+    margin-bottom: calc(var(--yv-reader-font-size) * 0.5);
+  }
+
+  /* \po - Opening of an epistle/letter */
+  & .po {
+    display: block;
+    text-indent: 1em;
+    margin-bottom: calc(var(--yv-reader-font-size) * 0.5);
+  }
+
+  /* \ph - Indented paragraph with hanging indent (deprecated, use \li) */
+  & .ph,
+  & .ph1 {
+    display: block;
+    padding-inline-start: 2em;
+    text-indent: -2em;
+    margin-bottom: calc(var(--yv-reader-font-size) * 0.5);
+  }
+
+  & .ph2 {
+    display: block;
+    padding-inline-start: 3em;
+    text-indent: -2em;
+    margin-bottom: calc(var(--yv-reader-font-size) * 0.5);
+  }
+
+  & .ph3 {
+    display: block;
+    padding-inline-start: 4em;
+    text-indent: -2em;
+    margin-bottom: calc(var(--yv-reader-font-size) * 0.5);
+  }
+
+  /* \cls - Closure of an epistle/letter — Right-aligned */
+  & .cls {
+    display: block;
+    text-align: end;
+    margin: 0.5em 0;
+  }
+
+  /* ============================================================
+     LISTS
+     ============================================================ */
+
+  /* \lh - List header, \lf - List footer */
+  & .lh,
+  & .lf {
+    display: block;
+    margin: 0.5em 0 0.25em;
+  }
+
+  /* \li, \li1 - List entry (level 1) — hanging indent, no bullets per USFM spec */
+  & .li,
+  & .li1 {
+    display: block;
+    list-style-type: none;
+    padding-inline-start: 2em;
+    text-indent: -1.5em;
+  }
+
+  & .li2 {
+    display: block;
+    list-style-type: none;
+    padding-inline-start: 3em;
+    text-indent: -1.5em;
+  }
+
+  & .li3 {
+    display: block;
+    list-style-type: none;
+    padding-inline-start: 4em;
+    text-indent: -1.5em;
+  }
+
+  & .li4 {
+    display: block;
+    list-style-type: none;
+    padding-inline-start: 5em;
+    text-indent: -1.5em;
+  }
+
+  /* \lim, \lim1 - Embedded list entry (level 1) — hanging indent, no bullets per USFM spec */
+  & .lim,
+  & .lim1 {
+    display: block;
+    list-style-type: none;
+    padding-inline-start: 3em;
+    padding-inline-end: 1em;
+    text-indent: -1.5em;
+  }
+
+  & .lim2 {
+    display: block;
+    list-style-type: none;
+    padding-inline-start: 4em;
+    padding-inline-end: 1em;
+    text-indent: -1.5em;
+  }
+
+  & .lim3 {
+    display: block;
+    list-style-type: none;
+    padding-inline-start: 5em;
+    padding-inline-end: 1em;
+    text-indent: -1.5em;
+  }
+
+  /* ============================================================
+     LINE BREAKS & CONTENT
+     ============================================================ */
+
+  & br {
+    line-height: inherit;
+  }
+
+  & .content {
+    display: inline;
+  }
+
+  /* ============================================================
+     FOOTNOTES & CROSS-REFERENCES (display elements)
+     ============================================================ */
+
+  & .footnote,
+  & .crossref {
+    vertical-align: super;
+    font-size: 0.6em;
+    line-height: 0;
+    white-space: nowrap;
+  }
+
+  /* ============================================================
+     SUBSCRIPT & SUPERSCRIPT
+     ============================================================ */
+
+  & .sub,
+  & .sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+
+  & .sup {
+    top: -0.25em;
+  }
+
+  & .sub {
+    bottom: -0.1em;
+  }
+
+  /* ============================================================
+     TABLES
+     ============================================================ */
+
+  & table {
+    width: 100%;
+    background: var(--yv-background);
+    border-radius: 0.5rem;
+    border: 1px solid var(--yv-border);
+    margin-bottom: calc(var(--yv-reader-font-size) * 1);
+    margin-top: calc(var(--yv-reader-font-size) * 0.75);
+    table-layout: auto;
+    font-size: inherit;
+    line-height: normal;
+    border-collapse: separate;
+    border-spacing: 0;
+    overflow: hidden;
+  }
+
+  & table tr:nth-child(odd) {
+    background-color: var(--yv-card);
+  }
+
+  & table td,
+  & .tc {
+    padding: 0.25em;
+    text-align: inherit;
+    vertical-align: top;
+  }
+
+  & table td:not(:last-child),
+  & table th:not(:last-child) {
+    border-right: 1px solid var(--yv-border);
+  }
+
+  & table tr:not(:last-child) td,
+  & table tr:not(:last-child) th {
+    border-bottom: 1px solid var(--yv-border);
+  }
+
+  & table td[colspan],
+  & table th[colspan] {
+    border-right: none;
+  }
+
+  & table th,
+  & .th,
+  & .th1 {
+    background: var(--yv-foreground);
+    color: var(--yv-primary-foreground);
+    font-weight: 700;
+    padding: 0.25em;
+    vertical-align: top;
+  }
+
+  & .tcr,
+  & .tcr1 {
+    padding: 0.25em;
+    text-align: end;
+    vertical-align: top;
+  }
+
+  & .thr,
+  & .thr1 {
+    background: var(--yv-foreground);
+    color: var(--yv-primary-foreground);
+    font-weight: 700;
+    padding: 0.25em;
+    text-align: end;
+    vertical-align: top;
+  }
+
+  /* ============================================================
+     SPECIAL / MISC
+     ============================================================ */
+
+  /* \sd - Semantic division (vertical space between sections) */
+  & .sd {
+    display: block;
+    height: 1em;
+  }
+
+  /* \lb - Line break (same as \b) */
+  & .lb {
+    display: block;
+    height: 1em;
+  }
+
+  /* \cd - Chapter description — Italic */
+  & .cd {
+    display: block;
+    font-style: italic;
+    margin: 0.5em 0;
+  }
+
+  /* \fp - Footnote paragraph (block-level paragraph within a footnote) */
+  & .fp {
+    display: block;
+    margin-top: 0.5em;
+    text-indent: 1em;
+  }
+
+  /* \lit - Liturgical note — Right-aligned, Bold */
+  & .lit {
+    display: block;
+    text-align: end;
+    font-weight: bold;
+  }
+
+  /* ============================================================
+     RTL SUPPORT
+     ============================================================ */
+
+  &[dir='rtl'] {
+    direction: rtl;
+    text-align: right;
+  }
+}