/*
 * GOSPEL PARABLES: STYLESHEET  (https://GoJes.us/Parables/)
 * ===========================================================
 * Hand-written (replaces the old Tailwind CDN). Same 14 theme class names and localStorage keys as the
 * DivineRevelations Standard_Text_Page template, so a visitor's theme/font choice carries across GoJes.us pages.
 *
 * RULES (checked by other/scripts/test_parables.py, test T0):
 *   1. EVERY font-size is rem (or inherit). No px / vw / clamp / em font sizes, no inline font-size.
 *      The only thing that changes text size is  --font-scale  on <html>  (script.js, button "A↕").
 *   2. Never use the class names  active  content  collapsible  sidenav  closebtn  phpmenu :
 *      the shared menu stylesheet (/css/expanding_menu_php.css, loaded mid-body) restyles them globally.
 *   3. Every colour comes from the theme variables below. Text/background pairs are verified for WCAG AA (>= 4.5:1)
 *      in all 14 themes by other/scripts/check_theme_contrast.py. Re-run it after touching any theme value.
 *   4. Use rem for spacing too, so the layout grows with the font size and nothing overflows.
 *
 * TABLE OF CONTENTS
 *   §1  Design tokens (:root)            §8  Cards and the grid
 *   §2  The 14 themes                    §9  Passages (also used inside the reader)
 *   §3  Base / reset                     §10 Reader overlay
 *   §4  Accessibility                    §11 Page components: progress, back-to-top, toast, splash
 *   §5  Layout and header                §12 Bible references + popup colour/size overrides
 *   §6  Typography                       §13 Shared menu (SSI) overrides
 *   §7  Control bar, filter bar, chips   §14 Responsive / reduced motion / print
 */


/* ═══════════════════════════════════════════════════════════════════
   §1  DESIGN TOKENS
   ═══════════════════════════════════════════════════════════════════ */
:root {
    --font-base:   16px;       /* the ONLY px font value: it is the root the scale multiplies */
    --font-scale:  1;          /* 0.85 | 1 | 1.15 | 1.3 | 1.5, set by script.js on <html> */
    --font-title:  'Gabriela', Georgia, 'Times New Roman', serif;
    --font-body:   'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    --max-width:   78rem;
    --radius:      0.9rem;
    --radius-sm:   0.5rem;
    --radius-pill: 62rem;
    --ease:        0.2s;

    --shadow-sm:   0 0.1rem 0.4rem var(--shadow, rgba(0,0,0,.3));
    --shadow-md:   0 0.3rem 1rem  var(--shadow, rgba(0,0,0,.3));
    --shadow-lg:   0 0.6rem 2rem  var(--shadow, rgba(0,0,0,.4));

    /* Gospel accent stripes (decorative, never used for text) */
    --g-matthew:   #4f8df5;
    --g-mark:      #2fb785;
    --g-luke:      #a96bea;
    --g-john:      #f59e42;
}

html { font-size: calc(var(--font-base) * var(--font-scale)); }


/* ═══════════════════════════════════════════════════════════════════
   §2  THEMES: 7 dark + 7 light.   Default = theme-dark-midnight ("Dark Mode Sky Blue")
       Variables per theme:
         --bg-color --surface --surface-2   backgrounds (page / cards+reader / inputs+chips)
         --text-color --heading-color --muted-color --link-color --ref-color   text colours
         --primary --accent --border-color  decoration (borders, glows). NOT used for text on light themes.
         --btn-bg --btn-text  filled buttons / selected chips.   --focus-ring  keyboard focus.
         --placeholder  input placeholder.   --shadow  box-shadow colour.
         --popup-*  the Bible verse popup (dark themes get a light card; light themes get a dark card)
   ═══════════════════════════════════════════════════════════════════ */

/* Shared popup palettes */
body[class*="theme-dark-"] {
    --popup-bg: #ffffff;  --popup-ink: #1f2937;  --popup-ink-strong: #14204a;  --popup-muted: #5b6472;
    --popup-edge: #c8d0de; --popup-link: #1d4ed8; --popup-hover: rgba(20,32,74,.08);
}
body[class*="theme-light-"] {
    --popup-bg: #172033;  --popup-ink: #e8eefc;  --popup-ink-strong: #ffffff;  --popup-muted: #a9b6d3;
    --popup-edge: #4a5a80; --popup-link: #9dc0ff; --popup-hover: rgba(255,255,255,.12);
}

/* ─── DARK ─── */
body.theme-dark-auburn {            /* Auburn Night */
    --bg-color:#2a0a0a; --surface:#3a1414; --surface-2:#4c1e1e;
    --text-color:#fde8e8; --heading-color:#ffb8b8; --muted-color:#e3b9b9; --link-color:#ffb3b3; --ref-color:#ffd166;
    --primary:#ff5252; --accent:#ff8a80; --border-color:#7a3434;
    --btn-bg:#ff6b6b; --btn-text:#1a0404; --focus-ring:#ffd166; --placeholder:#dcb0b0; --shadow:rgba(0,0,0,.6);
}
body.theme-dark-art-deco {          /* Art Deco */
    --bg-color:#121212; --surface:#1c1a15; --surface-2:#27241b;
    --text-color:#ece7d8; --heading-color:#ecc95f; --muted-color:#c2baa4; --link-color:#f0d36b; --ref-color:#8ecbf5;
    --primary:#d4af37; --accent:#f7e7ce; --border-color:#5a4d25;
    --btn-bg:#d4af37; --btn-text:#141104; --focus-ring:#8ecbf5; --placeholder:#b5ad98; --shadow:rgba(0,0,0,.8);
}
body.theme-dark-midnight {          /* Midnight: "Dark Mode Sky Blue" (DEFAULT) */
    --bg-color:#0d1b2a; --surface:#13263a; --surface-2:#1b3350;
    --text-color:#e6f2fa; --heading-color:#9bdcfb; --muted-color:#a9c2d6; --link-color:#7dd3fc; --ref-color:#fbbf24;
    --primary:#38bdf8; --accent:#7dd3fc; --border-color:#2f4d6e;
    --btn-bg:#38bdf8; --btn-text:#04141f; --focus-ring:#fbbf24; --placeholder:#9fb7cb; --shadow:rgba(0,0,0,.5);
}
body.theme-dark-acid {              /* Acid High Energy */
    --bg-color:#050505; --surface:#101610; --surface-2:#1a241a;
    --text-color:#eaffea; --heading-color:#8bff6b; --muted-color:#aacdaa; --link-color:#8aff6b; --ref-color:#ff9cf2;
    --primary:#39ff14; --accent:#baffba; --border-color:#35553a;
    --btn-bg:#39ff14; --btn-text:#031203; --focus-ring:#ff9cf2; --placeholder:#9dbb9d; --shadow:rgba(0,255,0,.2);
}
body.theme-dark-vaporwave {         /* Vaporwave Sunset */
    --bg-color:#1a0b2e; --surface:#26113f; --surface-2:#351a56;
    --text-color:#ffe6fa; --heading-color:#ff9cf0; --muted-color:#dcbce9; --link-color:#f5a8ff; --ref-color:#5ef2ff;
    --primary:#ff4df0; --accent:#00e5ff; --border-color:#62358f;
    --btn-bg:#ff6af2; --btn-text:#1a0b2e; --focus-ring:#5ef2ff; --placeholder:#cdaede; --shadow:rgba(128,0,255,.4);
}
body.theme-dark-boreal {            /* Boreal Night */
    --bg-color:#002b36; --surface:#063d4a; --surface-2:#0c4f5f;
    --text-color:#e6f7f5; --heading-color:#86e6da; --muted-color:#a9d6d1; --link-color:#86e6da; --ref-color:#ffcf70;
    --primary:#26a69a; --accent:#80cbc4; --border-color:#2a7586;
    --btn-bg:#3ec7ba; --btn-text:#01221f; --focus-ring:#ffcf70; --placeholder:#9ccbc6; --shadow:rgba(0,0,0,.5);
}
body.theme-dark-neon {              /* Neon Void */
    --bg-color:#000000; --surface:#0b0b12; --surface-2:#161622;
    --text-color:#d9fffb; --heading-color:#18ffff; --muted-color:#9fd9d4; --link-color:#4dfff5; --ref-color:#ff80ec;
    --primary:#00e5ff; --accent:#e040fb; --border-color:#234e57;
    --btn-bg:#00e5ff; --btn-text:#00181a; --focus-ring:#ff80ec; --placeholder:#8fc8c3; --shadow:rgba(0,255,255,.3);
}

/* ─── LIGHT ─── */
body.theme-light-creme {            /* Creme and Gold */
    --bg-color:#fdfbf7; --surface:#ffffff; --surface-2:#f4eee0;
    --text-color:#2f2c25; --heading-color:#5a4310; --muted-color:#5f5a4c; --link-color:#7a5a1a; --ref-color:#0d5a63;
    --primary:#c5a059; --accent:#e0d5b7; --border-color:#d9ccaa;
    --btn-bg:#6b4f12; --btn-text:#ffffff; --focus-ring:#0d5a63; --placeholder:#6f6a5b; --shadow:rgba(0,0,0,.1);
}
body.theme-light-ink {              /* Ink and Paper */
    --bg-color:#ffffff; --surface:#fafafa; --surface-2:#eeeeee;
    --text-color:#1a1a1a; --heading-color:#000000; --muted-color:#4d4d4d; --link-color:#b71c1c; --ref-color:#0b4f8a;
    --primary:#000000; --accent:#616161; --border-color:#c9c9c9;
    --btn-bg:#111111; --btn-text:#ffffff; --focus-ring:#0b4f8a; --placeholder:#666666; --shadow:rgba(0,0,0,.12);
}
body.theme-light-forest {           /* Forest Ethereal */
    --bg-color:#f1f8e9; --surface:#ffffff; --surface-2:#e1efd0;
    --text-color:#1b3d1e; --heading-color:#1b5e20; --muted-color:#46684a; --link-color:#1f6b24; --ref-color:#8a3b12;
    --primary:#388e3c; --accent:#8bc34a; --border-color:#b7d49a;
    --btn-bg:#2e7d32; --btn-text:#ffffff; --focus-ring:#8a3b12; --placeholder:#4a694d; --shadow:rgba(0,0,0,.1);
}
body.theme-light-denim {            /* Denim Wash */
    --bg-color:#ecf3f9; --surface:#ffffff; --surface-2:#d9e7f3;
    --text-color:#102a43; --heading-color:#0b3a66; --muted-color:#44607a; --link-color:#1b5a96; --ref-color:#9a3412;
    --primary:#336699; --accent:#9fb3c8; --border-color:#b3cade;
    --btn-bg:#1f4e82; --btn-text:#ffffff; --focus-ring:#9a3412; --placeholder:#496277; --shadow:rgba(0,0,0,.12);
}
body.theme-light-peach {            /* Peach Fuzz */
    --bg-color:#fff5f0; --surface:#ffffff; --surface-2:#ffe4d8;
    --text-color:#3e2723; --heading-color:#8a2e0f; --muted-color:#6d4c41; --link-color:#b23a10; --ref-color:#0e5f76;
    --primary:#ff8a65; --accent:#ffab91; --border-color:#f0c1ad;
    --btn-bg:#b23a10; --btn-text:#ffffff; --focus-ring:#0e5f76; --placeholder:#7d5f55; --shadow:rgba(0,0,0,.1);
}
body.theme-light-sahara {           /* Sahara Sand */
    --bg-color:#fff8e1; --surface:#fffdf5; --surface-2:#fbeab0;
    --text-color:#3b2a21; --heading-color:#6b4a00; --muted-color:#6a5340; --link-color:#7a5200; --ref-color:#0f5c3a;
    --primary:#d4a017; --accent:#ffd54f; --border-color:#e3cb7c;
    --btn-bg:#7a5200; --btn-text:#ffffff; --focus-ring:#0f5c3a; --placeholder:#7a6550; --shadow:rgba(0,0,0,.12);
}
body.theme-light-lavender {         /* Lavender Mist */
    --bg-color:#faf5ff; --surface:#ffffff; --surface-2:#efdff7;
    --text-color:#2d1450; --heading-color:#4a148c; --muted-color:#5e4a78; --link-color:#6a1b9a; --ref-color:#8a4b00;
    --primary:#9c27b0; --accent:#e1bee7; --border-color:#d3b7e6;
    --btn-bg:#6a1b9a; --btn-text:#ffffff; --focus-ring:#8a4b00; --placeholder:#6f5a88; --shadow:rgba(0,0,0,.1);
}


/* ═══════════════════════════════════════════════════════════════════
   §3  BASE / RESET
   ═══════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior:    smooth;
    scroll-padding-top: 5rem;           /* room for the sticky control bar */
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background-color: var(--bg-color);
    color:            var(--text-color);
    line-height:      1.65;
    overflow-wrap:    break-word;
    transition:       background-color .3s, color .3s;
}
/* attribute selector outranks the shared menu's unqualified  body { font-family: Lato }  rule */
body[class*="theme-"] { font-family: var(--font-body); }

img { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }


/* ═══════════════════════════════════════════════════════════════════
   §4  ACCESSIBILITY
   ═══════════════════════════════════════════════════════════════════ */
.skip-link {
    position: absolute; top: -20rem; left: 1rem; z-index: 99999;
    background: var(--btn-bg); color: var(--btn-text);
    padding: .6rem 1.2rem; border-radius: var(--radius); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: .5rem; }

:focus-visible { outline: .18rem solid var(--focus-ring); outline-offset: .18rem; border-radius: .25rem; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
html:not(.js) .js-only { display: none !important; }


/* ═══════════════════════════════════════════════════════════════════
   §5  LAYOUT AND HEADER
   ═══════════════════════════════════════════════════════════════════ */
.page-container { width: 100%; display: flex; flex-direction: column; align-items: center; min-height: 100vh; }

.page-header {
    position: relative; width: 100%; text-align: center; overflow: hidden;
    background: var(--surface) var(--hero-image, url('title.jpg')) center 35% / cover no-repeat;   /* --hero-image is set inline by index.php with ?v= */
    border-bottom: 1px solid var(--border-color);
}
.page-header::before {                  /* colour wash keeps the headline readable on any image */
    content: ""; position: absolute; inset: 0; background: var(--bg-color); opacity: .88;
}
.header-inner { position: relative; max-width: var(--max-width); margin: 0 auto; padding: 2.2rem 1.25rem 1.8rem; }
.eyebrow { margin: 0; font-size: .9rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-color); font-weight: 700; }
.page-title {
    margin: .3rem 0 .4rem; font-family: var(--font-title); font-weight: 400; font-size: 3rem; line-height: 1.12;
    color: var(--heading-color); text-shadow: 0 .1rem .5rem var(--shadow); overflow-wrap: anywhere;
}
.page-subtitle { max-width: 44rem; margin: 0 auto 1.1rem; font-size: 1.15rem; color: var(--text-color); }
.header-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.header-stats li {
    background: var(--surface-2); color: var(--text-color); border: 1px solid var(--border-color);
    border-radius: var(--radius-pill); padding: .3rem .9rem; font-size: .92rem; font-weight: 700;
}

.content-body { width: 100%; max-width: var(--max-width); padding: 0 1.25rem 3rem; margin: 0 auto; flex: 1 0 auto; }
.content-body:focus { outline: none; }
.intro { max-width: 52rem; margin: 1.5rem auto 0; text-align: center; font-size: 1.05rem; color: var(--text-color); }

.page-footer {
    width: 100%; max-width: var(--max-width); padding: 1.5rem 1.25rem 3rem; margin: 0 auto;
    text-align: center; color: var(--muted-color); font-size: .9rem; border-top: 1px solid var(--border-color);
}
.page-footer p { margin: .4rem 0; }


/* ═══════════════════════════════════════════════════════════════════
   §6  TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════ */
h1, h2, h3, h4 { font-family: var(--font-title); color: var(--heading-color); line-height: 1.25; font-weight: 400; overflow-wrap: anywhere; }
h2 { font-size: 1.9rem; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; }
p  { margin: 0 0 1rem; font-size: 1rem; }

a { color: var(--link-color); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: .08em; }
a:hover { text-decoration-thickness: .16em; }


/* ═══════════════════════════════════════════════════════════════════
   §7  CONTROL BAR, FILTER BAR, CHIPS
   ═══════════════════════════════════════════════════════════════════ */
.control-bar {
    position: relative; z-index: 5; width: 100%;
    display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem;
    padding: .55rem 1rem; background: var(--bg-color); border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}
@media (min-width: 40.01rem) { .control-bar { position: sticky; top: 0; } }   /* sticky only where it will not eat the screen */
.control-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
    min-width: 3rem; min-height: max(2.75rem, 44px); padding: .3rem 1rem;
    background: var(--surface-2); color: var(--text-color); border: 1px solid var(--border-color);
    border-radius: var(--radius); font-size: 1.1rem; font-weight: 700; line-height: 1.2; user-select: none;
    transition: background-color var(--ease), color var(--ease), transform var(--ease), border-color var(--ease);
}
.control-btn:hover { background: var(--btn-bg); color: var(--btn-text); border-color: var(--btn-bg); transform: translateY(-.1rem); }
.control-btn:active { transform: translateY(.05rem); }

.filter-bar { width: 100%; max-width: var(--max-width); padding: 1rem 1.25rem 0; }
.search-box { display: block; max-width: 40rem; margin: 0 auto .8rem; }
.search-box input {
    width: 100%; min-height: max(2.75rem, 44px); padding: .5rem 1rem; font-size: 1.05rem;
    background: var(--surface-2); color: var(--text-color); border: 1px solid var(--border-color); border-radius: var(--radius-pill);
}
.search-box input::placeholder { color: var(--placeholder); opacity: 1; }
.search-box input:focus { border-color: var(--focus-ring); }

.chip-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin-bottom: .55rem; }
.chip {
    display: inline-flex; align-items: center; gap: .3rem; min-height: max(2.25rem, 44px); padding: .15rem .85rem;
    background: var(--surface-2); color: var(--text-color); border: 1px solid var(--border-color);
    border-radius: var(--radius-pill); font-size: .9rem; font-weight: 700; line-height: 1.2;
    transition: background-color var(--ease), color var(--ease), border-color var(--ease);
}
.chip:hover { border-color: var(--btn-bg); }
.chip[aria-pressed="true"] { background: var(--btn-bg); color: var(--btn-text); border-color: var(--btn-bg); }
.chip .count { font-size: .78rem; font-weight: 400; }   /* no opacity: it silently lowers text contrast */
.chip-reset { background: transparent; border-style: dashed; }
.chip-toggle .count { font-size: .78rem; }
.filter-status { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .75rem; margin: .4rem 0 0; }
#result-count { margin: 0; color: var(--muted-color); font-size: .95rem; }
.empty-state { text-align: center; font-size: 1.15rem; margin: 3rem 0; color: var(--text-color); }


/* ═══════════════════════════════════════════════════════════════════
   §8  CARDS AND THE GRID
   ═══════════════════════════════════════════════════════════════════ */
.parable-section { margin-top: 2.5rem; }
.section-title { margin: 0 0 .4rem; font-size: 2rem; text-align: center; }
.section-intro { max-width: 50rem; margin: 0 auto 1.5rem; text-align: center; color: var(--muted-color); font-size: 1rem; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1.25rem; }

.parable-card {
    position: relative; display: flex; flex-direction: column; overflow: hidden;
    background: var(--surface); color: var(--text-color); border: 1px solid var(--border-color); border-radius: var(--radius);
    box-shadow: var(--shadow-sm); transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}
.parable-card:hover { transform: translateY(-.2rem); box-shadow: var(--shadow-md); border-color: var(--primary); }
.parable-card[hidden] { display: none; }

.card-media { background: var(--surface-2); }
.card-media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; }

.card-body { padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; flex: 1; }
.card-title { margin: 0 0 .5rem; font-size: 1.3rem; }
.card-emoji { margin-right: .15rem; }
.card-link { color: var(--heading-color); text-decoration: none; }
.card-link:hover { text-decoration: underline; }
.card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }   /* whole card is the click target */
.card-link:focus-visible { outline: none; }
.parable-card:has(.card-link:focus-visible) { outline: .18rem solid var(--focus-ring); outline-offset: .18rem; }

.card-lesson { margin: 0 0 .7rem; font-size: 1rem; color: var(--text-color); }
.card-refs { margin: 0 0 .7rem; font-size: .9rem; color: var(--muted-color); display: flex; flex-wrap: wrap; gap: .25rem .4rem; align-items: baseline; }
.card-refs .ref-item { white-space: nowrap; }
.card-refs a, .card-tags button, .detail-seealso a { position: relative; z-index: 2; }   /* above the stretched card link */
.sep { color: var(--muted-color); }
.card-tags { margin: 0 0 .7rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.tag-chip {
    min-height: max(1.9rem, 44px); padding: .1rem .65rem; background: var(--surface-2); color: var(--text-color);
    border: 1px solid var(--border-color); border-radius: var(--radius-pill); font-size: .78rem; font-weight: 700;
}
.tag-chip:hover { border-color: var(--btn-bg); }
.card-excerpt {
    margin: auto 0 0; font-size: .92rem; font-style: italic; color: var(--muted-color);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.parable-card.no-img .card-body { padding-top: 1.2rem; }

/* Full text: hidden in the grid when JavaScript is available (it opens in the reader); visible without JavaScript. */
html.js .card-grid .parable-detail { display: none; }
html:not(.js) .card-grid { grid-template-columns: 1fr; }
html:not(.js) .parable-detail { padding: 0 1.1rem 1.1rem; }


/* ═══════════════════════════════════════════════════════════════════
   §9  PASSAGES (inside the reader, and inline when JavaScript is off)
   ═══════════════════════════════════════════════════════════════════ */
.gospel-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1.25rem; align-items: start; }
.gospel-col { border-top: .3rem solid var(--border-color); padding-top: .6rem; min-width: 0; }
.gospel-col[data-gospel="matthew"] { border-top-color: var(--g-matthew); }
.gospel-col[data-gospel="mark"]    { border-top-color: var(--g-mark); }
.gospel-col[data-gospel="luke"]    { border-top-color: var(--g-luke); }
.gospel-col[data-gospel="john"]    { border-top-color: var(--g-john); }
.gospel-name { font-family: var(--font-title); font-size: 1.25rem; color: var(--heading-color); margin: 0 0 .6rem; }

.passage { margin: 0 0 1.4rem; }
.passage-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .6rem; margin-bottom: .3rem; }
h4.passage-ref { margin: 0; font-size: 1.1rem; font-family: var(--font-body); font-weight: 700; color: var(--heading-color); }
.role-badge {
    font-size: .75rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    color: var(--text-color); background: var(--surface-2); border: 1px solid var(--border-color);
    border-radius: var(--radius-pill); padding: 0 .55rem;
}
.passage-text p { margin: 0 0 .75rem; font-size: 1.05rem; line-height: 1.8; text-align: left; hyphens: manual; }
sup.vn { font-size: .7rem; line-height: 0; vertical-align: super; font-weight: 700; color: var(--muted-color); margin-right: .15rem; }

html[data-tr="kjv"] .passage-text[data-tr="web"] { display: none; }
html:not([data-tr="kjv"]) .passage-text[data-tr="kjv"] { display: none; }

.detail-related, .detail-seealso { font-size: .95rem; color: var(--muted-color); margin: .5rem 0 0; }
.detail-label { font-weight: 700; color: var(--text-color); margin-right: .3rem; }


/* ═══════════════════════════════════════════════════════════════════
   §10 READER OVERLAY (a div, not <dialog>: <dialog>.showModal() would sit above and disable the Bible popup)
   ═══════════════════════════════════════════════════════════════════ */
.reader { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: .75rem; }
.reader-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.72); }
.reader-panel {
    position: relative; display: flex; flex-direction: column; width: min(100%, 78rem); max-height: 100%;
    background: var(--surface); color: var(--text-color); border: 1px solid var(--border-color);
    border-radius: var(--radius); box-shadow: var(--shadow-lg); outline: none;
}
.reader-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; padding: .45rem .6rem; border-bottom: 1px solid var(--border-color); background: var(--surface-2); border-radius: var(--radius) var(--radius) 0 0; }
.reader-spacer { flex: 1; }
.reader-btn {
    min-width: 44px; min-height: 44px; padding: .2rem .6rem;     /* tap-target minimum in px: it must not grow with the font and wrap the bar */
    background: var(--surface); color: var(--text-color); border: 1px solid var(--border-color); border-radius: var(--radius-sm);
    font-size: 1.05rem; font-weight: 700; line-height: 1.2;
}
.reader-btn:hover { background: var(--btn-bg); color: var(--btn-text); border-color: var(--btn-bg); }
.reader-btn[aria-pressed="true"] { background: var(--btn-bg); color: var(--btn-text); border-color: var(--btn-bg); }
.reader-btn:disabled { opacity: .4; cursor: default; }
.reader-scroll { overflow-y: auto; overscroll-behavior: contain; padding: 1.25rem 1.5rem 2rem; }
.reader-kicker { margin: 0 0 .2rem; font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-color); font-weight: 700; }
.reader-title { margin: 0 0 .5rem; font-size: 2.2rem; line-height: 1.15; outline: none; }
.reader-lesson { margin: 0 0 1.4rem; font-size: 1.15rem; padding: .7rem 1rem; background: var(--surface-2); border-left: .3rem solid var(--primary); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.reader-tags { margin: 1.5rem 0 0; font-size: .9rem; color: var(--muted-color); }
.reader-body .parable-detail { display: block; }
body.reader-open { overflow: hidden; }


/* ═══════════════════════════════════════════════════════════════════
   §11 PAGE COMPONENTS: progress bar, back-to-top, toast, splash
   ═══════════════════════════════════════════════════════════════════ */
#scroll-progress { position: fixed; top: 0; left: 0; width: 0; height: .2rem; background: var(--primary); z-index: 99998; pointer-events: none; }

#btn-back-to-top {
    position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 500; width: 3.1rem; height: 3.1rem; min-width: 44px; min-height: 44px;
    display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 700; border: none; border-radius: 50%;
    background: var(--btn-bg); color: var(--btn-text); box-shadow: var(--shadow-md);
    opacity: 0; visibility: hidden; transform: translateY(1rem); transition: opacity .3s, visibility .3s, transform .3s;
}
#btn-back-to-top.visible { opacity: 1; visibility: visible; transform: none; }

#theme-toast {
    position: fixed; bottom: 1.5rem; left: 50%; z-index: 100000; width: max-content; max-width: calc(100vw - 2rem);
    transform: translate(-50%, 1rem); opacity: 0; visibility: hidden; pointer-events: none; text-align: center;
    background: var(--surface-2); color: var(--text-color); border: 1px solid var(--primary);
    border-radius: var(--radius-pill); padding: .6rem 1.4rem; font-weight: 700; font-size: 1rem; box-shadow: var(--shadow-lg);
    transition: opacity .25s, transform .25s, visibility .25s;
}
#theme-toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* Splash: visible for --splash-hold (set inline by PHP, default 2 s), then a 0.4 s fade. Works with CSS alone. */
#splash {
    position: fixed; inset: 0; z-index: 30000; display: flex; align-items: center; justify-content: center;
    background: #05080f; cursor: pointer; opacity: 1;
    animation: splashFade .4s ease-in var(--splash-hold, 2s) forwards;
}
#splash img { width: min(92%, 75rem); height: auto; border-radius: var(--radius); box-shadow: 0 0 4rem rgba(255,255,255,.18); }
#splash:focus { outline: none; }
@keyframes splashFade { to { opacity: 0; visibility: hidden; } }
html.splash-seen #splash { display: none; }


/* ═══════════════════════════════════════════════════════════════════
   §12 BIBLE REFERENCES + POPUP OVERRIDES
   ═══════════════════════════════════════════════════════════════════ */
/* Reference links (made by Universal_Bible_Popup.py). --ref-color contrasts with body text AND links in every theme. */
a.bible-ref {
    color: var(--ref-color); font-weight: 700; text-decoration: none;
    border-bottom: .14rem dotted var(--ref-color); padding-bottom: .02rem;
}
a.bible-ref:hover { border-bottom-style: solid; }
strong > a.bible-ref { font-weight: 700; }

/* The shared popup (/Javascript/Bible_popup.js) hard-codes px font sizes and light colours with !important.
   We cannot edit that file, so we override with higher specificity (html body #bible-popup ...) :
   - px -> rem so the popup follows the A↕ button        - light themes get a DARK card, dark themes keep the light card
   Do not override  width  (the script positions the popup assuming 360px). */
html body #bible-popup { font-size: .875rem; background: var(--popup-bg) !important; color: var(--popup-ink) !important; border-color: var(--popup-edge) !important; }
html body #bible-popup * { color: var(--popup-ink) !important; }
html body #bible-popup .bp-header { border-bottom-color: var(--popup-edge) !important; }
html body #bible-popup .bp-reference { font-size: .9375rem; color: var(--popup-ink-strong) !important; }
html body #bible-popup .bp-header-link { font-size: 1rem; }
html body #bible-popup .bp-close { font-size: 1rem; color: var(--popup-muted) !important; opacity: 1; }   /* upstream uses opacity .75 -> 3.4:1 */
html body #bible-popup .bp-header-link:hover, html body #bible-popup .bp-close:hover, html body #bible-popup .bp-biblehub-button:hover { background: var(--popup-hover) !important; }
html body #bible-popup .bp-body { max-height: 13.75rem; }
html body #bible-popup .bp-verse-text { font-size: .875rem; color: var(--popup-ink) !important; white-space: normal; }
html body #bible-popup .bp-chapter-note { font-size: .75rem; color: var(--popup-muted) !important; }
html body #bible-popup .bp-biblehub-button { font-size: 1.125rem; }
html body #bible-popup .bp-loading { font-size: .8125rem; color: var(--popup-muted) !important; }
html body #bible-popup .bp-error { font-size: .8125rem; }
html body #bible-popup .bp-error a { color: var(--popup-link) !important; }
html body #bible-popup .bp-caret::before { background: var(--popup-bg) !important; border-color: var(--popup-edge) !important; }
html body #bible-popup .bp-body::-webkit-scrollbar-thumb { background: var(--popup-edge); }


/* ═══════════════════════════════════════════════════════════════════
   §13 SHARED MENU (SSI) OVERRIDES
   The menu (ssi/MENU_index.htm + /css/expanding_menu_php.css) uses px font sizes, inline styles and generic
   class names. We cannot edit it, so: px -> rem (so A↕ scales it), and its quirks are contained here.
   ═══════════════════════════════════════════════════════════════════ */
#mySidenav a, #mySidenav .collapsible { font-size: 1.5625rem; }
#mySidenav .closebtn, #mySidenav .closebtn2 { font-size: 5rem; }
@media screen and (max-height: 450px) { #mySidenav a { font-size: 1.125rem; } }
/* inline style="font-size: NNpx" on a few menu links: only !important beats an inline style */
#mySidenav [style*="font-size: 20px"] { font-size: 1.25rem   !important; }
#mySidenav [style*="font-size: 22px"] { font-size: 1.375rem  !important; }
#mySidenav [style*="font-size: 23px"] { font-size: 1.4375rem !important; }
#mySidenav [style*="font-size: 24px"] { font-size: 1.5rem    !important; }
#mySidenav { max-width: 100vw; }


/* ═══════════════════════════════════════════════════════════════════
   §14 RESPONSIVE / REDUCED MOTION / PRINT
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 40rem) {
    .page-title { font-size: 2.3rem; }
    .section-title { font-size: 1.6rem; }
    .reader { padding: 0; }
    .reader-panel { width: 100%; height: 100%; border-radius: 0; border-width: 0; }
    .reader-bar { border-radius: 0; }
    .reader-scroll { padding: 1rem 1rem 2rem; }
    .reader-title { font-size: 1.75rem; }
    .header-inner { padding: 1.6rem 1rem 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .parable-card, .chip, .control-btn, .reader-btn, #btn-back-to-top, #theme-toast, body { transition: none !important; }
    .parable-card:hover { transform: none; }
}

@media print {
    .control-bar, .filter-bar, #splash, #btn-back-to-top, #theme-toast, #scroll-progress, #mySidenav, .skip-link, .card-tags { display: none !important; }
    body { background: #fff; color: #000; }
    .page-header::before { opacity: .95; }
    html.js .card-grid .parable-detail { display: block !important; }
    .card-grid { display: block; }
    .parable-card { break-inside: avoid; margin-bottom: 1rem; box-shadow: none; }
    .card-link::after { display: none; }
    /* A parable open in the reader prints ALONE (the whole page would be ~100 pages) */
    body.reader-open .page-container { display: none !important; }
    body.reader-open .reader { position: static; display: block; padding: 0; }
    body.reader-open .reader-backdrop, body.reader-open .reader-bar { display: none; }
    body.reader-open .reader-panel { width: 100%; max-height: none; border: 0; box-shadow: none; background: #fff; color: #000; }
    body.reader-open .reader-scroll { overflow: visible; padding: 0; }
    body.reader-open .reader-title, body.reader-open h4, body.reader-open .gospel-name, body.reader-open .reader-kicker { color: #000; text-shadow: none; }
    body.reader-open a.bible-ref { color: #000; border-bottom-color: #000; }
}

/* style.css: Gospel Parables */