/* Open Staten Vertaling — Stylesheet (de kleine ark stijl) */
@import url('fonts.css');   /* MOET bovenaan staan — een @import na andere regels wordt genegeerd */

/* === Top navigatie === */
#topnav {
    display: flex;
    align-items: center;
    background: var(--navy);
    color: #fff;
    padding: 0 30px;
    height: 72px;
    font-family: var(--font-body);
    position: sticky;
    top: 0;
    z-index: 300;
    border-bottom: 2px solid var(--gold);   /* doorlopende gouden lijn onder topnav */
}
.topnav-brand {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
}
.topnav-brand-link {
    display: flex;
    align-items: center;
    /* Niet krimpen: anders schuift het versielabel over het logo zodra de
       bovenbalk meer links krijgt (zustersites, taalkeuze). */
    flex: 0 0 auto;
}
@media (min-width: 1181px) {
    .topnav-brand { flex: 0 0 auto; }
}
@media (min-width: 1181px) and (max-width: 1300px) {
    /* Net boven de hamburgergrens: het zoekveld geeft ruimte af. */
    #topnav .topnav-search-input { min-width: 110px; margin: 0 8px; }
}
/* Middelbrede schermen: compactere links, zodat merk en zoekveld passen. */
@media (min-width: 1181px) and (max-width: 1500px) {
    .topnav-links a { padding: 8px 11px; }
}
.topnav-logo {
    display: block;
    width: auto;
    height: 58px;
    max-width: 210px;
    object-fit: contain;
}
/* Woordmerk zolang Open Gods Woord nog geen eigen logo heeft. */
.topnav-merknaam {
    font-family: var(--font-cursive);
    font-size: 30px;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
    text-decoration: none;
}
.topnav-brand-link:has(.topnav-merknaam) { text-decoration: none; }
@media (max-width: 600px) { .topnav-merknaam { font-size: 22px; } }
.topnav-subtitle {
    /* Subtitle krimpt eerst weg als ruimte krap wordt */
    overflow: hidden;
    text-overflow: ellipsis;
}
.topnav-subtitle {
    font-size: 11px;
    font-weight: 400;
    color: rgba(255,255,255,0.4);
    margin-left: 12px;
    letter-spacing: 0.01em;
}
.topnav-version {
    font-family: var(--font-body);
    font-style: normal;
    font-size: 10px;
    font-weight: 600;
    background: rgba(203,164,73,0.25);
    color: var(--gold);
    padding: 1px 6px;
    border-radius: 3px;
    vertical-align: middle;
    margin-left: 4px;
}
.topnav-links {
    display: flex;
    gap: 2px;
    margin-left: 16px;
    margin-right: auto;
    flex-shrink: 0;
}
.topnav-search {
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.15s;
}
.topnav-search:hover { color: #fff; background: rgba(255,255,255,0.12); }
.topnav-search svg { display: block; }

/* Topnav thema-toggle (zon/maan icon) */
.topnav-theme {
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.15s;
}
.topnav-theme:hover { color: #fff; background: rgba(255,255,255,0.12); }
.topnav-theme svg { display: block; }

/* Centrale ingang voor dezelfde globale leesvoorkeuren als in de leestekst. */
.topnav-weergave {
    background: rgba(203,164,73,0.13);
    border: 1px solid rgba(203,164,73,0.44);
    color: #f7ecd0;
    cursor: pointer;
    min-height: 38px;
    padding: 0 11px;
    margin-right: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 7px;
    font: 600 13px/1 var(--font-body);
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.topnav-weergave:hover,
.topnav-weergave[aria-expanded="true"] {
    color: #fff;
    background: rgba(203,164,73,0.28);
    border-color: var(--gold);
}
.topnav-weergave svg { flex: 0 0 auto; }
.topnav-mobile-weergave { display: none; }
/* Toon sun in licht-mode, moon in donker-mode (icoon van wat je KRIJGT bij klik). */
.topnav-theme .theme-icon-sun { display: none; }
.topnav-theme .theme-icon-moon { display: block; }
:root[data-theme="donker"] .topnav-theme .theme-icon-sun { display: block; }
:root[data-theme="donker"] .topnav-theme .theme-icon-moon { display: none; }

/* === Auth-slot in topnav === */
.topnav-auth {
    display: flex;
    align-items: center;
    margin-left: 6px;
}
.auth-btn {
    background: rgba(203,164,73,0.18);
    border: 1px solid rgba(203,164,73,0.4);
    color: #fff;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-family: var(--font-body);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s;
}
.auth-btn:hover { background: rgba(203,164,73,0.32); }
.auth-user {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 13px;
}
.auth-avatar {
    width: 26px; height: 26px; border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.12);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 12px;
}
.auth-name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-logout {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.8);
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 13px;
    cursor: pointer;
}
.auth-logout:hover { background: rgba(255,255,255,0.1); color: #fff; }
@media (max-width: 768px) {
    .auth-name { display: none; }
    .auth-btn span { display: none; }
}

/* === Feedback-modal === */
.feedback-modal { position: fixed; inset: 0; z-index: 11000; }
.feedback-modal.hidden { display: none; }
.feedback-modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(20,28,48,0.55);
}
.feedback-modal-dialog {
    position: relative;
    max-width: 520px;
    margin: 10vh auto 0;
    background: #fff;
    border-radius: 10px;
    padding: 22px 26px 18px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.35);
    font-family: var(--font-body);
    color: #222;
}
.feedback-modal-dialog h3 {
    margin: 0 0 6px;
    color: var(--navy);
    font-size: 19px;
}
.feedback-modal-dialog .fb-ref {
    margin: 0 0 10px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--teal);
}
.feedback-modal-dialog .fb-quote {
    border-left: 3px solid var(--gold);
    padding: 8px 12px;
    background: #faf7f0;
    margin: 0 0 14px;
    font-style: italic;
    color: #333;
    max-height: 130px;
    overflow: auto;
    font-size: 14px;
    border-radius: 0 4px 4px 0;
}
.feedback-modal-dialog label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 4px;
    color: #333;
}
.feedback-modal-dialog textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d6d2c8;
    border-radius: 6px;
    padding: 8px 10px;
    font-family: var(--font-body);
    font-size: 14px;
    resize: vertical;
}
.feedback-modal-dialog textarea:focus { outline: none; border-color: var(--gold); }
.feedback-modal-dialog .fb-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}
.feedback-modal-dialog .fb-cancel,
.feedback-modal-dialog .fb-send {
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 14px;
    cursor: pointer;
}
.feedback-modal-dialog .fb-cancel { background: #ece8df; color: #444; }
.feedback-modal-dialog .fb-cancel:hover { background: #ddd7c8; }
.feedback-modal-dialog .fb-send { background: var(--navy); color: #fff; }
.feedback-modal-dialog .fb-send:hover:not(:disabled) { background: var(--gold); color: var(--navy); }
.feedback-modal-dialog .fb-send:disabled { opacity: 0.55; cursor: not-allowed; }
/* Donker thema — "Delen als afbeelding"-modal */
:root[data-theme="donker"] .vers-image-dialog { background: var(--bg-surface) !important; }
:root[data-theme="donker"] .vers-image-dialog #vers-image-close { background: var(--bg-surface-alt) !important; color: var(--text-primary) !important; }

/* Donker thema — feedback-modal */
:root[data-theme="donker"] .feedback-modal-dialog {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.7);
}
:root[data-theme="donker"] .feedback-modal-dialog h3 { color: var(--text-primary); }
:root[data-theme="donker"] .feedback-modal-dialog .fb-ref { color: var(--text-secondary); }
:root[data-theme="donker"] .feedback-modal-dialog .fb-quote {
    background: var(--bg-surface-alt);
    color: var(--text-primary);
}
:root[data-theme="donker"] .feedback-modal-dialog label { color: var(--text-primary); }
:root[data-theme="donker"] .feedback-modal-dialog textarea {
    background: var(--bg-surface-alt);
    color: var(--text-primary);
    border-color: var(--border-default);
}
:root[data-theme="donker"] .feedback-modal-dialog .fb-cancel {
    background: var(--bg-surface-alt);
    color: var(--text-primary);
}
:root[data-theme="donker"] .feedback-modal-dialog .fb-cancel:hover { background: var(--bg-elevated); }
:root[data-theme="donker"] .feedback-modal-dialog .fb-send { background: var(--gold); color: #1a1d24; }
:root[data-theme="donker"] .feedback-modal-dialog .fb-send:hover:not(:disabled) { background: #e2c779; }
:root[data-theme="donker"] .feedback-modal-backdrop { background: rgba(0,0,0,0.75); }
.feedback-modal-dialog .fb-status {
    margin: 8px 0 0;
    min-height: 18px;
    font-size: 12px;
    color: var(--teal);
    text-align: right;
}
.topnav-links a {
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.15s;
}
.topnav-links a:hover {
    color: #fff;
    background: rgba(255,255,255,0.1);
}
/* Taalkeuze in de bovenbalk (js/topnav.js, js/locale.js) */
.topnav-taal { display: inline-flex; align-items: center; margin-inline: 6px; }
.topnav-taal select {
    background: rgba(255,255,255,0.08);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 6px;
    padding: 6px 8px;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}
.topnav-taal select option { color: #142e42; background: #fff; }
.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
/* Hamburger-knop (verborgen op desktop) */
.topnav-hamburger {
    display: none;
    background: none; border: none; cursor: pointer;
    width: 44px; height: 44px; padding: 0;
    flex-direction: column; justify-content: center; align-items: center;
    gap: 5px; margin-inline-start: auto;
    border-radius: 6px;
    transition: background 0.15s;
}
.topnav-hamburger:hover, .topnav-hamburger:active { background: rgba(255,255,255,0.1); }
.topnav-hamburger span {
    display: block; width: 26px; height: 3px;
    background: #fff; border-radius: 2px;
    transition: transform 0.2s, opacity 0.2s;
}
.topnav-hamburger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.topnav-hamburger.open span:nth-child(2) { opacity: 0; }
.topnav-hamburger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Zodra de volledige desktopnavigatie het woordmerk zou wegdrukken, gaat zij
   al op tablet-/smalle laptopbreedte achter de hamburger. */
@media (min-width: 769px) and (max-width: 1180px) {
    .topnav-brand { flex: 1 1 auto; gap: 7px; }
    .topnav-logo { width: auto; height: 50px; max-width: 167px; }
    .topnav-hamburger { display: flex; }
    .topnav-links {
        display: none;
        position: fixed;
        top: 72px;
        right: 0;
        min-width: 210px;
        margin: 0;
        padding: 8px 0;
        gap: 0;
        flex-direction: column;
        background: var(--navy);
        border-left: 1px solid rgba(203,164,73,0.3);
        border-bottom: 1px solid rgba(203,164,73,0.3);
        border-bottom-left-radius: 8px;
        box-shadow: -2px 4px 16px rgba(0,0,0,0.3);
        z-index: 400;
    }
    .topnav-links.open { display: flex; }
    .topnav-links a {
        padding: 12px 24px;
        font-size: 15px;
        color: rgba(255,255,255,0.9);
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .topnav-links a:last-child { border-bottom: none; }
    .topnav-mobile-weergave { display: none; }
    .topnav-links a:hover { background: rgba(203,164,73,0.15); color: var(--gold); }
    .topnav-weergave { width: 38px; padding: 0; gap: 0; }
    .topnav-weergave span { display: none; }
}
.feedback-modal-dialog .fb-types {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 14px;
    padding: 0;
    border: 0;
}
.feedback-modal-dialog .fb-types-label {
    flex: 0 0 100%;
    margin-bottom: 3px;
    color: var(--text-muted);
    font-size: 12px;
}
.feedback-modal-dialog .fb-type-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    font-size: 11px;
    cursor: pointer;
    background: var(--bg-surface, #fff);
    color: var(--navy);
    font-family: inherit;
}
.feedback-modal-dialog .fb-type-chip:hover,
.feedback-modal-dialog .fb-type-chip:focus-visible {
    border-color: var(--gold);
    outline: none;
}
:root[data-theme="donker"] .feedback-modal-dialog .fb-type-chip {
    background: var(--bg-surface-alt);
    color: var(--text-primary);
}

@media (max-width: 768px) {
    .feedback-modal-dialog textarea { font-size: 16px; }
    #topnav { padding: 0 12px; height: 56px; }
    /* De weergaveknop blijft als zelfstandige hoofdactie zichtbaar; ze horen niet
       verstopt te zitten in het hamburgermenu. Met het woord erbij, want een
       icoon alleen leest niet als een knop; er is naast de merknaam ruimte zat. */
    .topnav-weergave {
        display: inline-flex;
        width: auto;
        min-height: 40px;
        padding: 0 12px;
        gap: 7px;
        flex: 0 0 auto;
        margin-left: 10px;
        background: rgba(203, 164, 73, 0.24);
        border-color: var(--gold);
        color: #fff;
    }
    .topnav-weergave span { display: inline; font-size: 13px; }
    .topnav-theme { display: none; }
    .topnav-brand {
        flex: 0 1 auto;
        gap: 5px;
    }
    .topnav-logo { width: auto; height: 44px; max-width: 150px; }
    .topnav-subtitle { display: none; }
    /* Versienummer klein zichtbaar naast de merknaam op mobiel. */
    .topnav-version { display: none; }
    .topnav-version a { font-size: 11px; }

    .topnav-hamburger { display: flex; }
    /* Links als off-canvas dropdown vanuit topnav */
    .topnav-links {
        display: none;
        position: fixed;
        top: 56px; right: 0;
        background: var(--navy);
        border-left: 1px solid rgba(203,164,73,0.3);
        border-bottom: 1px solid rgba(203,164,73,0.3);
        border-bottom-left-radius: 8px;
        flex-direction: column;
        padding: 8px 0;
        margin: 0;
        gap: 0;
        min-width: 180px;
        box-shadow: -2px 4px 16px rgba(0,0,0,0.3);
        z-index: 400;
    }
    .topnav-links.open { display: flex; }
    .topnav-links a {
        padding: 12px 24px; font-size: 15px;
        color: rgba(255,255,255,0.9);
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .topnav-links a:last-child { border-bottom: none; }
    .topnav-links a:hover { background: rgba(203,164,73,0.15); color: var(--gold); }
    .topnav-mobile-weergave {
        display: block;
        width: 100%;
        padding: 12px 24px;
        border: 0;
        border-top: 1px solid rgba(255,255,255,.08);
        background: transparent;
        color: rgba(255,255,255,.9);
        font: inherit;
        font-size: 15px;
        text-align: left;
        cursor: pointer;
    }
    .topnav-links .topnav-auth {
        width: 100%;
        margin: 0;
        padding: 10px 24px;
        border-top: 1px solid rgba(255,255,255,.08);
    }
    .topnav-links .topnav-auth .auth-btn {
        width: 100%;
        justify-content: flex-start;
    }
    /* In het menu is ruimte voor de naam, en Uitloggen vult de rest van de regel. */
    .topnav-links .topnav-auth .auth-user { display: flex; width: 100%; }
    .topnav-links .topnav-auth .auth-name { display: inline; max-width: none; }
    .topnav-links .topnav-auth .auth-logout { width: auto; flex: 1; justify-content: center; padding: 8px 10px; }
    .topnav-mobile-weergave:hover { background: rgba(203,164,73,.15); color: var(--gold); }
}

/* === Versierde initiaal (drop-cap) op eerste vers van een hoofdstuk ===
   Via <span class="dropcap"> (JS), niet ::first-letter — zo wordt bij een
   citaat de eerste LETTER vergroot en niet het aanhalingsteken. */
.col-2026 .dropcap {
    float: left;
}
.col-2026 .dropcap--penkrul {
    margin: -0.12em 0.08em -0.08em 0;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
    line-height: 0;
    shape-outside: var(--dropcap-shape);
    shape-image-threshold: 0.08;
    shape-margin: 0.02em;
}
.col-2026 .dropcap-image {
    display: block;
    width: auto;
    /* Standaard drie regels hoog; bij een kort vers zet JS hier de hoogte
       van het vers zelf neer, anders valt er een gat tot het volgende vers. */
    height: var(--dropcap-height, 3.2em);
}
.col-2026 .dropcap-image--dark { display: none; }
:root[data-theme="donker"] .col-2026 .dropcap-image--light { display: none; }
:root[data-theme="donker"] .col-2026 .dropcap-image--dark {
    display: block;
}
.col-2026 .dropcap--fallback {
    font-family: var(--font-serif, 'EB Garamond', Georgia, serif);
    font-size: 2.9em;
    line-height: 0.72;
    padding: 4px 9px 0 0;
    margin-top: 3px;
    color: var(--gold);
    font-weight: 600;
    text-transform: uppercase;
}
/* Begint het hoofdstuk met een citaat? Dan het openings-aanhalingsteken
   weglaten — de grote drop-cap-letter staat al vooraan; een « ná de hoofdletter
   ziet er gek uit. Sluit-aanhalingsteken (::after) blijft staan. */
.verse-row[data-verse="1"] .col-2026 .direct-speech::before,
.verse-row[data-verse="1"] .col-2026 .god-speaks::before,
.verse-row[data-verse="1"] .col-2026 .angel-speaks::before,
.verse-row[data-verse="1"] .col-2026 .devil-speaks::before { content: none; }

/* Alfabetlied. Klaagliederen 1–4, Psalm 25, 34, 37, 111, 112, 119 en 145 en
   Spreuken 31 beginnen elk vers of elke strofe met de volgende letter van het
   Hebreeuwse alfabet. De letter en zijn naam zijn een redactionele markering en
   geen tekst die iemand uitspreekt; ze staan daarom apart. Het Hebreeuwse font
   moet er uitdrukkelijk bij, want het is zonder unicode-range gedeclareerd. */
.acrostichon {
    font-family: 'Noto Serif Hebrew', serif;
    font-style: italic;
    color: var(--accent, #b8860b);
}

/* === Leesmodus === */
#content.reading-mode .column-headers { display: none; }
#content.reading-mode .verse-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    border-bottom: none;
    margin-bottom: 0;
    padding: 1px 24px;
    line-height: 1.35;
    font-family: var(--font-serif);
    font-size: 17px;
}
#content.reading-mode .verse-num {
    display: inline;
    padding: 0 2px;
    flex-shrink: 0;
    font-size: 0.55em;
    font-weight: 700;
    vertical-align: super;
    border-right: none;
    color: var(--gold);
    cursor: pointer;
}
#content.reading-mode .verse-num::after { display: none; }
#content.reading-mode .verse-cell {
    display: none;
    padding: 0;
    border-right: none;
    min-height: auto;
    background: none;
    flex: 1;
    min-width: 200px;
}
/* Toon alleen kolommen die aan staan (hide-X class regelt dit al) */
#content.reading-mode .verse-cell.col-2026,
#content.reading-mode .verse-cell.col-sv1888,
#content.reading-mode .verse-cell.col-1637,
#content.reading-mode .verse-cell.col-margin2026,
#content.reading-mode .verse-cell.col-margin1637,
#content.reading-mode .verse-cell.col-marginSV1888,
#content.reading-mode .verse-cell.col-nbg51,
#content.reading-mode .verse-cell.col-hsv,
#content.reading-mode .verse-cell.col-hebrew,
#content.reading-mode .verse-cell.col-diff,
#content.reading-mode .verse-cell.col-noteDiff {
    display: inline !important;
    background: none;
}
/* Maar hide-X overschrijft */
#content.reading-mode.hide-sv1888 .col-sv1888,
#content.reading-mode.hide-1637 .col-1637,
#content.reading-mode.hide-2026 .col-2026,
#content.reading-mode.hide-margin2026 .col-margin2026,
#content.reading-mode.hide-margin1637 .col-margin1637,
#content.reading-mode.hide-marginSV1888 .col-marginSV1888,
#content.reading-mode.hide-nbg51 .col-nbg51,
#content.reading-mode.hide-hsv .col-hsv,
#content.reading-mode.hide-hebrew .col-hebrew,
#content.reading-mode.hide-diff .col-diff,
#content.reading-mode.hide-noteDiff .col-noteDiff {
    display: none !important;
}

/* === Layout-modus voor extra kolommen in reading-mode === */
/* "naast" (default): bestaande flex-rij — kolommen ernaast.
   "eronder": elk cel als block onder elkaar binnen het vers. */
#content.reading-mode.layout-eronder .verse-row {
    display: block !important;   /* wint van .verse-row{display:grid!important}; diff stroomt zo ONDER de tekst */
    padding: 3px 24px 4px;
}
#content.reading-mode.layout-eronder .verse-num {
    display: inline !important;   /* wint van .verse-row .verse-num{display:block!important} */
    text-align: left !important;
    vertical-align: super;
    margin-right: 4px;
    padding-right: 0;
}
/* Toon zichtbare cellen als block-paragrafen onder OV2026.
   Hide-rules blijven werken via display:none !important. */
#content.reading-mode.layout-eronder .verse-cell.col-2026,
#content.reading-mode.layout-eronder .verse-cell.col-sv1888,
#content.reading-mode.layout-eronder .verse-cell.col-1637,
#content.reading-mode.layout-eronder .verse-cell.col-margin2026,
#content.reading-mode.layout-eronder .verse-cell.col-margin1637,
#content.reading-mode.layout-eronder .verse-cell.col-marginSV1888,
#content.reading-mode.layout-eronder .verse-cell.col-nbg51,
#content.reading-mode.layout-eronder .verse-cell.col-hsv,
#content.reading-mode.layout-eronder .verse-cell.col-hebrew,
#content.reading-mode.layout-eronder .verse-cell.col-diff,
#content.reading-mode.layout-eronder .verse-cell.col-noteDiff {
    display: block !important;
    margin-top: 4px;
    padding-left: 0;
    border-left: none;
    flex: none;
    min-width: 0;
    max-width: 100%;
}
/* OV2026 bovenaan zonder extra marge */
#content.reading-mode.layout-eronder .verse-cell.col-2026 {
    margin-top: 0;
    display: inline !important;
}
/* Subtiel label per editie zodat lezer weet welke editie het is */
#content.reading-mode.layout-eronder .verse-cell.col-sv1888::before { content: "SV 1888 — "; color: var(--gold); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin-right: 4px; }
#content.reading-mode.layout-eronder .verse-cell.col-1637::before { content: "SV 1637 — "; color: var(--gold); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin-right: 4px; }
#content.reading-mode.layout-eronder .verse-cell.col-hebrew::before { content: "Grondtekst — "; color: var(--gold); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin-right: 4px; }
#content.reading-mode.layout-eronder .verse-cell.col-margin2026::before { content: "KT 2026 — "; color: var(--gold); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin-right: 4px; }
#content.reading-mode.layout-eronder .verse-cell.col-margin1637::before { content: "KT 1637 — "; color: var(--gold); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin-right: 4px; }
#content.reading-mode.layout-eronder .verse-cell.col-marginSV1888::before { content: "KT 1888 — "; color: var(--gold); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin-right: 4px; }
#content.reading-mode.layout-eronder .verse-cell.col-diff::before { content: "Verschillen — "; color: var(--gold); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin-right: 4px; }
#content.reading-mode.layout-eronder .verse-cell.col-noteDiff::before { content: "KT-verschillen — "; color: var(--gold); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin-right: 4px; }
/* Diff kolom kleiner */
#content.reading-mode .col-diff,
#content.reading-mode .col-noteDiff {
    font-size: 13px;
    color: #888;
    flex: 0 0 250px;
    min-width: 150px;
}
/* Kanttekening kolom styling */
#content.reading-mode .col-margin2026,
#content.reading-mode .col-margin1637,
#content.reading-mode .col-marginSV1888 {
    font-size: 13px;
    color: #666;
    flex: 0 0 300px;
    border-left: 2px solid var(--gold);
    padding-left: 12px;
}
#content.reading-mode #chapter-title {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}
#content.reading-mode #book-intro,
#content.reading-mode #chapter-intro {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}
#content.reading-mode .chapter-footer {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* === Content topbar (sticky onder app-header) === */
#content-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    gap: 12px;
    flex-wrap: wrap;
    position: sticky;
    top: 0;                  /* JS zet top dynamisch op header.offsetHeight */
    z-index: 100;
    background: #faf8f3;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 2px 6px rgba(20,46,66,0.04);
}
#content-topbar #chapter-title {
    margin: 0;
    color: var(--navy);
    font-family: var(--font-cursive);
    font-size: 26px;
    font-weight: 400;
    line-height: 1.1;
    flex: 1 1 auto;
    min-width: 180px;
}
@media (max-width: 640px) {
    #content-topbar { padding: 8px 12px; gap: 8px; }
    #content-topbar #chapter-title { font-size: 20px; min-width: 0; }
    #column-toggles-wrapper { flex-wrap: wrap; gap: 6px; }
    #columns-btn, #opties-btn { padding: 4px 10px; font-size: 12px; }
    .quickfilter { padding: 4px 8px; font-size: 12px; }
}

/* === Kolommen dropdown === */
#column-toggles-wrapper {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.quickfilter {
    font-size: 13px;
    font-family: var(--font-body);
    color: var(--navy);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    transition: all 0.15s;
}
.quickfilter:hover { border-color: var(--gold); color: var(--gold); }
.quickfilter input { margin: 0; }
#columns-btn, #opties-btn {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    color: var(--navy);
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 5px 14px;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
#columns-btn:hover, #opties-btn:hover { border-color: var(--gold); color: var(--gold); }
#opties-dropdown { right: 0; }
#opties-dropdown label { display: flex; align-items: center; gap: 4px; }
#opties-dropdown input[type="radio"] { margin-right: 6px; }
.columns-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.12);
    padding: 12px 16px;
    z-index: 300;
    min-width: 200px;
    margin-top: 4px;
}
.columns-dropdown.open { display: block; }
.dropdown-group { margin-bottom: 10px; }
.dropdown-group:last-child { margin-bottom: 0; }
.dropdown-group-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gold);
    margin-bottom: 4px;
}
.columns-dropdown label {
    display: block;
    font-size: 13px;
    padding: 3px 0;
    cursor: pointer;
    color: var(--navy);
}
.columns-dropdown label:hover { color: var(--gold); }
.columns-dropdown input[type="checkbox"] { margin-right: 6px; }

/* === Site header === */
#site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--navy);
    color: #fff;
    padding: 12px 24px;
    font-family: var(--font-body);
    position: sticky;
    top: 0;
    z-index: 200;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.header-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}
.sidebar-menu-btn {
    background: rgba(255,255,255,0.1);
    border: none;
    color: #fff;
    font-size: 20px;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}
.sidebar-menu-btn:hover { background: rgba(255,255,255,0.2); }
.header-title {
    font-family: var(--font-cursive);
    font-size: 26px;
    font-weight: 400;
    color: #fff;
    margin: 0;
    line-height: 1.1;
}
.header-version {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    background: rgba(203,164,73,0.25);
    color: var(--gold);
    padding: 1px 7px;
    border-radius: 3px;
    margin-left: 6px;
    vertical-align: middle;
}
.header-subtitle {
    font-size: 12px;
    color: rgba(255,255,255,0.45);
    margin: 2px 0 0;
    font-weight: 400;
    letter-spacing: 0.01em;
}
.header-nav {
    display: flex;
    gap: 4px;
    align-items: center;
}
.header-nav a {
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.15s;
}
.header-nav a:hover {
    color: #fff;
    background: rgba(255,255,255,0.1);
}
@media (max-width: 768px) {
    #site-header { padding: 8px 14px; }
    .header-title { font-size: 20px; }
    .header-subtitle { display: none; }
    .header-nav { gap: 0; }
    .header-nav a { padding: 4px 8px; font-size: 11px; }
}

:root {
    --navy: #142e42;
    --gold: #cba449;
    --teal: #76978a;
    --teal-light: #95b3a7;
    --teal-bg: rgba(146, 182, 180, 0.17);
    --parchment: #f8f6f2;
    --green-tint: #f4f8f0;
    --yellow-tint: #fffef5;
    --brown: #142e42;
    --brown-light: #76978a;
    --header-bg: #142e42;
    --border: #d4d0c8;
    --border-light: #e8e4dc;
    --status-empty: #bbb;
    --status-draft: #cba449;
    --status-review: #76978a;
    --status-final: #5cb85c;

    /* Semantische tokens — gebruikt door dark-mode override.
       Bestaande --navy/--gold/etc blijven brand-kleuren (gelijk in beide modes). */
    --bg-page: #f8f6f2;          /* paginagrond (parchment) */
    --bg-surface: #ffffff;       /* kaartjes, panelen, sidebars */
    --bg-surface-alt: #f5f2ed;   /* lichte alt-vlakken */
    --bg-elevated: #fefcf6;      /* hover / popup */
    --text-primary: #333333;     /* body text */
    --text-secondary: #555555;   /* secundair */
    --text-muted: #888888;       /* hint, meta */
    --border-default: #d4d0c8;
    --border-soft: #e8e4dc;
    --shadow-soft: 0 2px 8px rgba(0,0,0,0.08);

    /* Font-stacks met systeem-fallbacks — als web-fonts niet laden,
       gebruikt de browser een vergelijkbaar systeemfont (Mac/Win/Linux). */
    --font-body: 'Fira Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-cursive: 'Allura', 'Brush Script MT', 'Lucida Handwriting', 'Apple Chancery', cursive;
    --font-serif: 'EB Garamond', 'Garamond', 'Cambria', 'Times New Roman', Georgia, serif;
}

/* Donker thema — semantische tokens overgeschreven, brand-kleuren (--navy/--gold/--teal) blijven herkenbaar. */
:root[data-theme="donker"] {
    /* Neutraal zwart/grijs — geen blauwzweem */
    --bg-page: #0a0a0a;
    --bg-surface: #181818;
    --bg-surface-alt: #121212;
    --bg-elevated: #202020;
    --parchment: #0a0a0a;         /* override de oude variabele zodat bestaande code automatisch donker wordt */
    --green-tint: #1a1f1a;
    --yellow-tint: #201d16;
    --text-primary: #e8e6e0;
    --text-secondary: #b8b5ad;
    --text-muted: #8a8780;
    --border-default: #3a3a3a;
    --border-soft: #2a2a2a;
    --border: #3a3a3a;             /* legacy --border ook donker */
    --border-light: #2a2a2a;
    --shadow-soft: 0 2px 8px rgba(0,0,0,0.5);
    /* Brand kleuren iets ophelderd voor leesbaarheid op donker */
    --gold: #d6b15a;
    --teal-light: #a5c4b8;
    --teal-bg: rgba(146, 182, 180, 0.10);
    --header-bg: #000000;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.65;
    color: var(--text-primary);
    background: var(--bg-page);
    /* Geen synthetisch vet/cursief — gebruik altijd de echte geladen font-faces,
       zodat tekst op elk apparaat identiek is (geen 'extra schuin' cursief op mobiel). */
    font-synthesis: none;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;     /* voorkomt mobile-overflow door rogue elementen */
}

/* Donker thema: gericht overschrijven van veelgebruikte hard-coded waarden. Brand-kleuren (navy/gold) blijven gelijk. */
:root[data-theme="donker"] body { background: var(--bg-page); color: var(--text-primary); }
:root[data-theme="donker"] #content,
/* .page transparant in dark (body levert de donkere achtergrond) — voorkomt dat
   het zwarte .page-blok via de hero-overlap (-80px) een harde rand over de
   afbeelding legt op over-ov. */
:root[data-theme="donker"] .page,
:root[data-theme="donker"] .stats-page { background: transparent !important; color: var(--text-primary); }
:root[data-theme="donker"] aside,
:root[data-theme="donker"] #sidebar-right { background: var(--bg-surface) !important; color: var(--text-primary); }
:root[data-theme="donker"] .verse-row,
:root[data-theme="donker"] .verse-row * { color: var(--text-primary); }
:root[data-theme="donker"] .verse-num { color: var(--text-muted); }
:root[data-theme="donker"] .text-cell,
:root[data-theme="donker"] [class*="text-"] { color: var(--text-primary); }
:root[data-theme="donker"] .chapter-intro,
:root[data-theme="donker"] .hint,
:root[data-theme="donker"] .subtitle,
:root[data-theme="donker"] small { color: var(--text-secondary); }
:root[data-theme="donker"] table,
:root[data-theme="donker"] td,
:root[data-theme="donker"] th { color: var(--text-primary); border-color: var(--border-default); }
:root[data-theme="donker"] tr:nth-child(even) { background: rgba(255,255,255,0.02); }
:root[data-theme="donker"] tr:nth-child(odd)  { background: transparent; }
:root[data-theme="donker"] .book-table tr:hover { background: rgba(203,164,73,0.10); }
:root[data-theme="donker"] .stat-card { background: var(--bg-surface) !important; color: var(--text-primary); border-color: var(--border-default); }
:root[data-theme="donker"] .principe-card { background: var(--bg-surface); color: var(--text-primary); border-color: var(--border-default); }
:root[data-theme="donker"] input[type="text"],
:root[data-theme="donker"] input[type="search"],
:root[data-theme="donker"] select,
:root[data-theme="donker"] textarea {
    background: var(--bg-surface-alt); color: var(--text-primary); border-color: var(--border-default);
}
:root[data-theme="donker"] a { color: var(--gold); }
:root[data-theme="donker"] a:visited { color: var(--gold); }
:root[data-theme="donker"] .highlight { background: rgba(203,164,73,0.10); }
:root[data-theme="donker"] code,
:root[data-theme="donker"] pre { background: var(--bg-surface-alt); color: var(--text-primary); }
:root[data-theme="donker"] .note-marker { color: var(--gold); }
:root[data-theme="donker"] .direct-speech i,
:root[data-theme="donker"] .god-speaks i { color: inherit; }
:root[data-theme="donker"] .god-speaks,
:root[data-theme="donker"] .god-speaks i { color: #f0978a !important; }
:root[data-theme="donker"] .devil-speaks,
:root[data-theme="donker"] .devil-speaks i { color: #d8d18a !important; }
/* Geen brightness-dimming op de hero: de bovenkant moet helder zijn; alleen de
   gradient onderaan (in over-ov.html) verzorgt de fade naar de donkere pagina. */
#app-container {
    display: flex;
    flex: 1;
}

/* === Sidebar === */
#sidebar {
    width: 260px;
    min-width: 260px;
    background: var(--navy);
    color: #fff;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 72px);
    position: sticky;
    top: 72px;  /* onder topnav (72px hoog) zodat header altijd zichtbaar blijft */
    z-index: 200;
    transition: margin-left 0.25s, min-width 0.25s, width 0.25s;
    overflow: hidden;
}
#sidebar.collapsed {
    width: 0;
    min-width: 0;
    padding: 0;
    overflow: hidden;
}
#sidebar-toggle {
    position: absolute;
    top: 4px;
    right: 6px;
    z-index: 6;
    background: var(--navy);
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 16px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
}
#sidebar-toggle:hover { color: #fff; background: rgba(255,255,255,0.1); }
#sidebar-open {
    position: fixed;
    top: 84px;
    z-index: 350;
    background: var(--navy);
    border: 1px solid var(--gold);
    color: var(--gold);
    font-size: 14px;
    cursor: pointer;
    padding: 8px 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    transition: all 0.2s;
}
#sidebar-open { left: 0; border-left: none; border-radius: 0 6px 6px 0; box-shadow: 2px 2px 8px rgba(0,0,0,0.25); }
#sidebar-open:hover { background: var(--gold); color: var(--navy); padding-left: 14px; }

/* === Zwevend optiespaneel === */
#sidebar-right.options-panel {
    position: fixed;
    inset: 88px 16px auto auto;
    width: min(520px, calc(100vw - 32px));
    min-width: min(360px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    height: min(680px, calc(100dvh - 104px));
    min-height: 340px;
    max-height: calc(100dvh - 32px);
    margin: 0;
    padding: 0;
    overflow: hidden;
    resize: both;
    border: 1px solid color-mix(in srgb, var(--gold) 34%, var(--border-soft));
    border-radius: 26px;
    background: var(--bg-surface);
    color: var(--text-primary);
    box-shadow: -12px 18px 60px rgba(10, 31, 48, 0.24);
    font-family: var(--font-body);
    flex-direction: column;
    opacity: 0;
    transform: translateX(18px);
}
#sidebar-right.options-panel:not([open]) { display: none; }
#sidebar-right.options-panel[open] {
    display: flex;
    animation: options-panel-in 180ms ease-out forwards;
}
#sidebar-right.options-panel::backdrop {
    background: transparent;
    backdrop-filter: none;
}
@keyframes options-panel-in {
    to { opacity: 1; transform: translateX(0); }
}

#sidebar-right-header.options-header {
    position: relative;
    flex: 0 0 auto;
    min-height: 54px;
    padding: 0;
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 0;
    border-bottom: 1px solid var(--border-soft);
    cursor: grab;
    touch-action: none;
}
#options-title {
    margin: 0;
    padding: 15px 62px 13px 18px;
    color: var(--navy);
    font: 600 24px/1.1 var(--font-serif);
}

/* De tekstrichting hoort bij de gekozen Bijbeltekst, niet bij de Nederlandse UI. */
.verse-cell.col-2026[dir="rtl"] {
    direction: rtl;
    text-align: start;
    unicode-bidi: plaintext;
    font-family: "Noto Naskh Arabic", "Amiri", serif;
}

.translation-unavailable {
    max-width: 42rem;
    margin: 3rem auto;
    padding: 1.5rem;
    border-inline-start: 4px solid var(--gold);
    background: rgba(199, 154, 58, 0.08);
}

.translation-unavailable a {
    color: var(--teal);
    font-weight: 600;
}
#sidebar-right.options-panel.is-dragging,
#sidebar-right.options-panel.has-custom-position {
    animation: none;
    opacity: 1;
    transform: none;
}
#sidebar-right.options-panel.is-dragging { user-select: none; }
#sidebar-right.options-panel.is-dragging #sidebar-right-header { cursor: grabbing; }
#sidebar-right-header button,
#sidebar-right-header [role="tab"] { cursor: pointer; }
.options-sheet-grip { display: none; }
#sidebar-right-toggle {
    position: absolute;
    top: 15px;
    right: 18px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    z-index: 3;
}
#sidebar-right-toggle:hover { background: var(--bg-surface-alt); color: var(--navy); }
.options-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 0 -4px 10px;
}
.options-tabs [role="tab"] {
    position: relative;
    min-height: 40px;
    padding: 0 6px;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font: 600 12px/1 var(--font-body);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}
.options-tabs [role="tab"]::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: -1px;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: transparent;
}
.options-tabs [role="tab"][aria-selected="true"] { color: var(--navy); }
.options-tabs [role="tab"][aria-selected="true"]::after { background: var(--gold); }

#sidebar-right-body.options-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 6px 0 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: auto;
}
.options-search {
    display: block;
    padding: 0 12px 8px;
}
/* Het label is er voor schermlezers; zichtbaar staat de placeholder al. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.options-search input {
    box-sizing: border-box;
    width: 100%;
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid var(--border-default);
    border-radius: 11px;
    background: var(--bg-surface-alt);
    color: var(--text-primary);
    font: 14px/1 var(--font-body);
}
.options-search input:focus {
    outline: 2px solid color-mix(in srgb, var(--gold) 60%, transparent);
    outline-offset: 1px;
}
.options-tabpanel[hidden] { display: none !important; }
/* De rijen zetten zelf display: flex; zonder deze regel verbergt het zoekfilter niets. */
.options-category[hidden],
.option-row[hidden],
.option-choice[hidden] { display: none !important; }
.options-search-empty {
    margin: 14px 16px;
    color: var(--text-secondary);
    font-size: 13.5px;
}
.options-category {
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--border-soft);
    border-inline-width: 0;
    border-radius: 0;
    background: var(--bg-surface);
}
.options-category > summary {
    position: relative;
    display: flex;
    min-height: 50px;
    align-items: center;
    padding: 0 46px 0 16px;
    background: #e8f2fb;
    border-bottom: 1px solid #b7d2e8;
    color: #fff;
    background: var(--navy);
    font: 600 16px/1.2 var(--font-serif);
    list-style: none;
    cursor: pointer;
}
.options-category > summary::-webkit-details-marker { display: none; }
.options-category > summary::after {
    content: "+";
    position: absolute;
    right: 16px;
    color: var(--gold);
    font: 400 24px/1 var(--font-body);
}
.options-category[open] > summary::after { content: "−"; }
.options-category > .options-list {
    margin: 0 12px 10px;
    border-top-color: var(--border-soft);
}
#sidebar-right select {
    min-height: 34px;
    /* Vaste maat, geen percentage: in de grid van een optieregel rekent een
       percentage terug naar de volle tekstbreedte van de langste optie, en
       dan duwt de keuzelijst het label weg. */
    max-width: 180px;
    padding: 0 31px 0 10px;
    appearance: none;
    border: 1px solid var(--border-default);
    border-radius: 10px;
    background-color: var(--bg-surface-alt);
    background-image: linear-gradient(45deg, transparent 50%, var(--navy) 50%), linear-gradient(135deg, var(--navy) 50%, transparent 50%);
    background-position: calc(100% - 14px) 14px, calc(100% - 9px) 14px;
    background-repeat: no-repeat;
    background-size: 5px 5px, 5px 5px;
    color: var(--text-primary);
    font: 13px/1 var(--font-body);
}
#opt-regelafstand {
    width: 132px;
    accent-color: var(--gold);
}
.options-section-heading {
    display: block;
    margin: 4px 0 7px;
    padding-left: 10px;
    padding: 10px 12px;
    border-left: 3px solid var(--gold);
    border-radius: 7px;
    background: var(--navy);
}
.options-section-heading:not(:first-child) { margin-top: 16px; }
.options-section-heading h3 {
    margin: 0;
    color: #fff;
    font-family: var(--font-serif);
    font-size: 17px;
    font-weight: 600;
}
.options-section-heading p {
    margin: 1px 0 0;
    color: rgba(255,255,255,.72);
    font-size: 10.5px;
    line-height: 1.35;
}
.options-list {
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
}
.option-row {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 4px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-soft);
    cursor: pointer;
}
.option-row:last-child { border-bottom: 0; }
.option-row > span:first-child { min-width: 0; }
.option-icon {
    display: block;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    object-fit: contain;
}
.option-label-with-icon {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}
.option-row-with-icon {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}
.option-row-with-icon > span:nth-child(2) { min-width: 0; }
.option-row strong { display: block; font-size: 13.5px; font-weight: 500; line-height: 1.3; }
.option-status-inline {
    display: inline-block;
    margin-top: 3px;
    color: var(--gold);
    font-family: var(--font-ui);
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .055em;
    line-height: 1.2;
    text-transform: uppercase;
}
.option-row small {
    display: block;
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 10.5px;
    line-height: 1.35;
}
#sidebar-right input[type="checkbox"] {
    appearance: none;
    position: relative;
    flex: 0 0 auto;
    width: 42px;
    height: 24px;
    margin: 0;
    border: 1px solid var(--border-default);
    border-radius: 999px;
    background: var(--bg-surface-alt);
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease;
}
#sidebar-right input[type="checkbox"]::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(10, 31, 48, 0.22);
    transition: transform 140ms ease;
}
#sidebar-right input[type="checkbox"]:checked { background: var(--navy); border-color: var(--navy); }
#sidebar-right input[type="checkbox"]:checked::after { transform: translateX(18px); }
.option-choice {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--border-soft);
}
.option-choice:last-child { border-bottom: 0; }
.option-choice > summary,
.option-choice > legend {
    color: var(--text-primary);
    font-size: 13.5px;
    font-weight: 500;
}
.option-choice > summary {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 10px 34px 9px 4px;
    list-style: none;
    cursor: pointer;
}
.option-choice > summary::-webkit-details-marker { display: none; }
.option-choice > summary::after {
    content: "›";
    position: absolute;
    top: 50%;
    right: 7px;
    color: var(--gold);
    font-size: 24px;
    transform: translateY(-52%);
    transition: transform 140ms ease;
}
.option-choice[open] > summary::after { transform: translateY(-52%) rotate(90deg); }
.option-current {
    max-width: 190px;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 400;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.option-choice[open] .option-current { color: var(--gold); }
.option-choice-values {
    display: grid;
    gap: 0;
    padding: 0 4px 9px 14px;
}
.option-choice-sub {
    padding: 6px 0 0;
    color: var(--text-secondary);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.8;
}
.option-choice-values label,
.option-choice-inline label {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 34px;
    color: var(--text-secondary);
    font-size: 12.5px;
    cursor: pointer;
}
#sidebar-right input[type="radio"] {
    appearance: none;
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin: 0;
    border: 1.5px solid var(--border-default);
    border-radius: 50%;
    background: var(--bg-surface);
}
#sidebar-right input[type="radio"]:checked {
    border: 5px solid var(--gold);
}
.option-choice > legend { padding: 10px 4px 4px; }
.option-choice-with-icon > legend { width: 100%; }
.option-choice-inline.option-choice-with-icon > label:first-of-type { margin-left: 44px; }
.option-choice-with-icon > .option-choice-values { padding-left: 48px; }
.option-choice-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
    padding: 0 4px 8px;
}
.option-choice-inline > legend { flex: 0 0 100%; }
.option-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-left: 4px; }
.option-help {
    margin: 6px 0 0 26px;
    color: var(--text-muted);
    font-size: 10.5px;
    line-height: 1.45;
}
.option-help a { color: var(--teal); }
.option-row select {
    max-width: 150px;
    padding: 8px 34px 8px 13px;
    border: 0;
    border-radius: 999px;
    outline: 0;
    background: transparent;
    color: var(--text-primary);
    font: 600 12px var(--font-body);
    cursor: pointer;
    appearance: none;
}
#sidebar-right .option-select-shell select {
    border: 0;
    background-color: transparent;
    background-image: none;
    -webkit-appearance: none;
    appearance: none;
}
.option-select-shell {
    position: relative;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border-default);
    border-radius: 999px;
    background: var(--bg-surface-alt);
    transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
.option-select-shell::after {
    content: "";
    position: absolute;
    right: 14px;
    width: 7px;
    height: 7px;
    border-right: 1.8px solid var(--navy);
    border-bottom: 1.8px solid var(--navy);
    pointer-events: none;
    transform: translateY(-2px) rotate(45deg);
}
.option-select-shell:hover {
    border-color: color-mix(in srgb, var(--gold) 70%, var(--border-default));
    background: var(--bg-surface);
}
.option-select-shell:focus-within {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 18%, transparent);
}
.option-row-book-order select { max-width: 230px; }
/* Drieknopsschakelaar (thema). Een keuzelijst met drie korte keuzes kost een
   extra tik en kapt op smalle schermen het woord af; alle drie naast elkaar
   is in één oogopslag te lezen en met één tik te zetten. */
.option-segmented {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--border-default);
    border-radius: 999px;
    background: var(--bg-surface-alt);
}
.option-segmented label {
    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    color: var(--text-secondary);
    font: 600 12px var(--font-body);
    white-space: nowrap;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}
#sidebar-right .option-segmented input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    opacity: 0;
    appearance: none;
    background: none !important;
    border: 0;
    pointer-events: none;
}
.option-segmented label:hover { color: var(--text-primary); }
#sidebar-right .option-segmented label:has(input:checked),
.option-segmented label:has(input:checked) {
    background: var(--gold);
    color: #1a1d24;
    font-weight: 700;
}
.option-segmented label:has(input:focus-visible) {
    outline: 2px solid color-mix(in srgb, var(--gold) 70%, transparent);
    outline-offset: 2px;
}
.options-zoom-controls {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--border-default);
    border-radius: 999px;
    background: var(--bg-surface-alt);
}
.options-zoom-controls button {
    min-width: 32px;
    height: 32px;
    padding: 0 7px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--navy);
    font: 600 14px var(--font-body);
    cursor: pointer;
}
.options-zoom-controls #options-zoom-value { min-width: 48px; font-size: 11px; }
.options-zoom-controls button:hover { background: var(--bg-elevated); }
.option-status {
    display: grid;
    gap: 3px;
    padding: 16px 4px;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.4;
}
.option-status strong { color: var(--text-primary); font-size: 13.5px; font-weight: 500; }
#sidebar-right :focus-visible {
    outline: 3px solid color-mix(in srgb, var(--gold) 62%, transparent);
    outline-offset: 2px;
}
:root[data-theme="donker"] .options-tabs [role="tab"][aria-selected="true"],
:root[data-theme="donker"] .options-category > summary,
:root[data-theme="donker"] .options-section-heading h3,
:root[data-theme="donker"] .options-zoom-controls button,
:root[data-theme="donker"] #sidebar-right-toggle { color: var(--text-primary); }
:root[data-theme="donker"] .option-current { color: var(--text-secondary); }
:root[data-theme="donker"] .option-select-shell::after {
    border-color: var(--text-secondary);
}
:root[data-theme="donker"] .options-category > summary,
:root[data-theme="donker"] .options-section-heading {
    background: #163c62;
    border-bottom-color: #2c5d89;
    color: #f4f8fc;
}
:root[data-theme="donker"] #options-title { color: var(--text-primary); }
:root[data-theme="donker"] #sidebar-right input[type="checkbox"]:checked {
    background: var(--gold);
    border-color: var(--gold);
}
:root[data-theme="donker"] #sidebar-right input[type="checkbox"]:checked::after {
    background: #1a1d24;
    box-shadow: none;
}

@media (max-width: 768px) {
    #sidebar-right.options-panel::backdrop {
        background: transparent;
        backdrop-filter: none;
    }
    #sidebar-right.options-panel {
        inset: auto 0 0;
        width: 100vw;
        min-width: 0;
        max-width: 100vw;
        min-height: 0;
        height: 75dvh;
        max-height: 75dvh;
        border-width: 1px 0 0;
        border-color: rgba(20, 46, 66, 0.14);
        border-radius: 22px 22px 0 0;
        resize: none;
        background: #fbfaf7;
        color: #172d40;
        opacity: 1;
        transform: none;
        animation: none;
        box-shadow: 0 -12px 38px rgba(5, 24, 38, 0.28);
    }
    #sidebar-right-header.options-header {
        min-height: 54px;
        padding: 0;
        background: #fbfaf7;
        color: #172d40;
        border-bottom-color: rgba(20, 46, 66, 0.14);
        cursor: default;
        touch-action: auto;
    }
    #sidebar-right-toggle {
        top: 10px;
        right: 10px;
        color: #17344e !important;
        z-index: 2;
    }
    .options-tabs { margin: 0 22px 10px; }
    .options-tabs [role="tab"] {
        min-height: 46px;
        color: #17344e !important;
        font-family: var(--font-serif);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.025em;
        background: transparent !important;
    }
    .options-tabs [role="tab"][aria-selected="true"] { color: #17344e !important; }
    .options-tabs [role="tab"]::after { left: 12px; right: 12px; height: 3px; }
    #sidebar-right-body.options-body {
        padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px));
        background: #fbfaf7;
        color: #172d40;
    }
    #sidebar-right .option-row,
    #sidebar-right .option-choice > summary,
    #sidebar-right .option-choice > legend,
    #sidebar-right .option-status strong { color: #172d40; }
    #sidebar-right .option-row small,
    #sidebar-right .option-current,
    #sidebar-right .option-choice-values label,
    #sidebar-right .option-status { color: #657078; }
    #sidebar-right .options-list,
    #sidebar-right .option-row,
    #sidebar-right .option-choice,
    #sidebar-right .options-header { border-color: rgba(20, 46, 66, 0.14); }
    #sidebar-right input[type="radio"] { background: #fbfaf7; }
    #sidebar-right label:has(input[type="radio"]:checked) {
        color: #17344e;
        font-weight: 600;
    }
    #sidebar-right .option-segmented { background: #f1eee8; border-color: rgba(20, 46, 66, 0.14); }
    #sidebar-right .option-segmented label { color: #657078; }
    #sidebar-right .option-segmented label:has(input:checked) { background: var(--navy); color: #fff; }
    #sidebar-right .options-zoom-controls { background: #f1eee8; }
    #sidebar-right .options-zoom-controls button {
        background: transparent !important;
        color: #17344e !important;
    }
    #sidebar-right input[type="checkbox"] { background: #eeeae2 !important; }
    #sidebar-right input[type="checkbox"]:checked {
        background: #123752 !important;
        border-color: #123752 !important;
    }
    .options-category {
        margin-bottom: 6px;
        border-color: rgba(20, 46, 66, 0.14);
        border-inline-width: 0;
        border-radius: 0;
        background: #fff;
    }
    .options-category > summary {
        min-height: 52px;
        color: #fff;
        background: var(--navy);
        font-size: 16px;
    }
    .options-category > .options-list { margin: 0 10px 8px; }
    .option-row { min-height: 50px; }
    .option-choice-values label,
    .option-choice-inline label { min-height: 44px; }
    .option-row small { display: none; }
    #opt-regelafstand { width: 118px; }

    /* Donker thema op mobiel — het blok hierboven zet het optiepaneel als een
       licht vel op; in donkere modus moet datzelfde vel donker zijn. */
    :root[data-theme="donker"] #sidebar-right.options-panel {
        background: var(--bg-surface) !important;
        color: var(--text-primary);
        border-color: var(--border-soft);
        box-shadow: 0 -12px 38px rgba(0, 0, 0, 0.6);
    }
    :root[data-theme="donker"] #sidebar-right-header.options-header {
        background: var(--bg-surface);
        color: var(--text-primary);
        border-bottom-color: var(--border-soft);
    }
    :root[data-theme="donker"] #sidebar-right-toggle { color: var(--text-primary) !important; }
    :root[data-theme="donker"] .options-tabs [role="tab"],
    :root[data-theme="donker"] .options-tabs [role="tab"][aria-selected="true"] {
        color: var(--text-primary) !important;
    }
    :root[data-theme="donker"] #sidebar-right-body.options-body {
        background: var(--bg-surface);
        color: var(--text-primary);
    }
    :root[data-theme="donker"] #sidebar-right .option-row,
    :root[data-theme="donker"] #sidebar-right .option-choice > summary,
    :root[data-theme="donker"] #sidebar-right .option-choice > legend,
    :root[data-theme="donker"] #sidebar-right .option-status strong { color: var(--text-primary); }
    :root[data-theme="donker"] #sidebar-right .option-row small,
    :root[data-theme="donker"] #sidebar-right .option-current,
    :root[data-theme="donker"] #sidebar-right .option-choice-values label,
    :root[data-theme="donker"] #sidebar-right .option-status { color: var(--text-secondary); }
    :root[data-theme="donker"] #sidebar-right .options-list,
    :root[data-theme="donker"] #sidebar-right .option-row,
    :root[data-theme="donker"] #sidebar-right .option-choice,
    :root[data-theme="donker"] #sidebar-right .options-header { border-color: var(--border-soft); }
    :root[data-theme="donker"] #sidebar-right input[type="radio"] { background: var(--bg-surface-alt); }
    :root[data-theme="donker"] #sidebar-right label:has(input[type="radio"]:checked) {
        color: var(--text-primary);
    }
    :root[data-theme="donker"] #sidebar-right .option-segmented {
        background: var(--bg-surface-alt);
        border-color: var(--border-soft);
    }
    :root[data-theme="donker"] #sidebar-right .option-segmented label { color: var(--text-secondary); }
    :root[data-theme="donker"] #sidebar-right .option-segmented label:has(input:checked) {
        background: var(--gold);
        color: #1a1d24;
    }
    :root[data-theme="donker"] #sidebar-right .options-zoom-controls { background: var(--bg-surface-alt); }
    :root[data-theme="donker"] #sidebar-right .options-zoom-controls button {
        color: var(--text-primary) !important;
    }
    :root[data-theme="donker"] #sidebar-right input[type="checkbox"] { background: var(--bg-elevated) !important; }
    :root[data-theme="donker"] #sidebar-right input[type="checkbox"]:checked {
        background: var(--gold) !important;
        border-color: var(--gold) !important;
    }
    :root[data-theme="donker"] #sidebar-right input[type="checkbox"]:checked::after {
        background: #1a1d24;
        box-shadow: none;
    }
    :root[data-theme="donker"] .options-category {
        background: var(--bg-surface);
        border-color: var(--border-soft);
    }
}
/* Op de smalste telefoons past het merk plus de weergaveknop net; het merk
   krimpt daarom mee zodat de knop het woord kan houden. */
@media (max-width: 360px) {
    .topnav-logo { max-width: 112px; }
    .topnav-weergave { padding: 0 9px; gap: 5px; }
}
@media (max-width: 430px) {
    .option-choice-grid { grid-template-columns: 1fr; }
    .option-row { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    #sidebar-right.options-panel[open] { animation: none; opacity: 1; transform: none; }
    #sidebar-right input,
    .option-choice > summary::after { transition: none; }
}

/* Mobile backdrop voor off-canvas drawers */
#mobile-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(20,46,66,0.5);
    z-index: 199;
}
body.drawer-open #mobile-backdrop { display: block; }

#sidebar-tree {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}
#sidebar-tree::-webkit-scrollbar { width: 4px; }
#sidebar-tree::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 2px; }

/* Testament groepen */
.tree-group {
    margin-bottom: 2px;
}
.tree-group-label {
    padding: 8px 42px 8px 16px;
    font-size: 11px;
    font-weight: 600;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}
.tree-group-label:hover { background: rgba(255,255,255,0.05); }
.tree-group-label .arrow {
    font-size: 9px;
    transition: transform 0.2s;
}
.tree-group.collapsed .arrow { transform: rotate(-90deg); }
.tree-group.collapsed .tree-books { display: none; }

/* Geografische locaties gemarkeerd in de leestekst (optioneel) */
.geo-locatie {
    border-bottom: 1px dotted var(--teal, #2a7d7d);
    cursor: pointer;
    background: rgba(42,125,125,0.07);
    border-radius: 2px;
    padding: 0 1px;
}
.geo-locatie:hover { background: rgba(42,125,125,0.18); color: var(--navy); }
:root[data-theme="donker"] .geo-locatie { border-bottom-color: #6fb3b3; background: rgba(111,179,179,0.12); }

/* Naar een modern stelsel omgerekende maat (optie 'Maten en gewichten').
   De omgerekende maat vervángt de Bijbelse in de lopende tekst, dus hij leest
   als gewone tekst; alleen een fijne stippellijn verraadt dat er iets vervangen
   is. Het origineel staat in het title-attribuut. */
.maat-omgerekend {
    border-bottom: 1px dotted rgba(42,125,125,0.55);
    cursor: help;
}
.maat-omgerekend:hover { background: rgba(42,125,125,0.10); border-radius: 2px; }
:root[data-theme="donker"] .maat-omgerekend { border-bottom-color: rgba(127,192,192,0.55); }
/* "de sikkel van het heiligdom": ijkmaat, geen hoeveelheid — tekst blijft staan */
.maat-ijk { border-bottom: 1px dotted rgba(42,125,125,0.35); cursor: help; }
:root[data-theme="donker"] .maat-ijk { border-bottom-color: rgba(127,192,192,0.35); }
@media print { .maat-omgerekend, .maat-ijk { border-bottom: none; } }

.getal-cijfer {
    color: var(--teal);
    font-size: 0.82em;
    font-style: normal;
    white-space: nowrap;
}
:root[data-theme="donker"] .getal-cijfer { color: #7fc0c0; }

/* Naar moderne kloktijd omgerekende tijdsaanduiding (optie 'Tijdsaanduidingen').
   Zelfde terughoudende markering als bij de maten: de tekst leest gewoon door,
   het origineel staat in het title-attribuut. */
.tijd-omgerekend {
    border-bottom: 1px dotted rgba(42,125,125,0.55);
    cursor: help;
}
.tijd-omgerekend:hover { background: rgba(42,125,125,0.10); border-radius: 2px; }
:root[data-theme="donker"] .tijd-omgerekend { border-bottom-color: rgba(127,192,192,0.55); }
/* "het avondoffer" is een offer en geen kloktijd — tekst blijft staan, alleen uitleg */
.tijd-toelichting { border-bottom: 1px dotted rgba(42,125,125,0.35); cursor: help; }
:root[data-theme="donker"] .tijd-toelichting { border-bottom-color: rgba(127,192,192,0.35); }
@media print { .tijd-omgerekend, .tijd-toelichting { border-bottom: none; } }

/* Subcategorie binnen een groep (bv. Ethiopische boeken onder de Apocriefen) */
.tree-subgroup-label {
    padding: 6px 16px 4px 24px;
    margin-top: 4px;
    font-size: 10px;
    font-weight: 600;
    color: var(--teal, #7a9a9a);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.85;
    border-top: 1px solid rgba(255,255,255,0.06);
}

/* Boeken */
.tree-book {
    margin-bottom: 1px;
}
.tree-book-label {
    padding: 5px 16px 5px 24px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.8);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    user-select: none;
    transition: all 0.15s;
}
.tree-book-label:hover { background: rgba(255,255,255,0.08); color: #fff; }
.tree-book-label.active {
    background: rgba(203,164,73,0.15);
    color: var(--gold);
    font-weight: 600;
}
.tree-book-label .arrow {
    font-size: 8px;
    transition: transform 0.2s;
    opacity: 0.5;
}
.tree-book.collapsed .arrow { transform: rotate(-90deg); }
.tree-book.collapsed .tree-chapters { display: none; }

/* Hoofdstukken */
.tree-chapters {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 4px 16px 8px 32px;
}
.tree-ch-btn {
    width: 28px;
    height: 24px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.7);
    border-radius: 3px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tree-ch-btn:hover { background: rgba(255,255,255,0.15); color: #fff; }
.tree-ch-btn.active {
    background: var(--gold);
    color: var(--navy);
    border-color: var(--gold);
    font-weight: 700;
}
.tree-ch-btn.approved {
    background: rgba(92,184,92,0.2);
    border-color: rgba(92,184,92,0.4);
    color: #8fefa3;
}
.tree-ch-btn.approved.active {
    background: #5cb85c;
    color: #fff;
}

/* Sidebar footer */
#sidebar-footer {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sidebar-link {
    display: block;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.15s;
}
.sidebar-link:hover {
    background: rgba(255,255,255,0.08);
    color: var(--gold);
}

/* Main wrapper */
#main-wrapper {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* === Header === */
/* Op de leespagina zijn book-nav/chapter-nav/toolbar verborgen, dus
   #app-header is dan effectief leeg → geen donker-blauw "tussen-band"
   tussen #topnav en de hoofdstuk-titel. Toon styling alleen wanneer er
   nog een zichtbare child in zit (oude editor-toolbar). */
#app-header {
    background: transparent;
    border-bottom: none;
    padding: 0;
    min-height: 0;
    position: sticky;
    top: 0;
    z-index: 100;
}
#app-header:has(> :not([style*="display:none"]):not([style*="display: none"])) {
    background: var(--navy);
    border-bottom: 3px solid var(--gold);
    padding: 14px 20px;
}

#app-header h1 {
    display: none; /* Titel zit nu in sidebar */
}

/* Navigatie */
.nav-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
}

.nav-bar button {
    padding: 4px 12px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.85);
    border-radius: 3px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
}

.nav-bar button:hover { background: rgba(255,255,255,0.15); color: #fff; }
.nav-bar button.active {
    background: var(--gold);
    color: var(--navy);
    border-color: var(--gold);
    font-weight: 600;
}
.nav-bar button.chapter-approved {
    background: rgba(92, 184, 92, 0.2);
    border-color: rgba(92, 184, 92, 0.5);
    color: #8fefa3;
}
.nav-bar button.chapter-approved.active {
    background: #5cb85c;
    color: #fff;
    border-color: #4cae4c;
}

/* Boek-nav groepering OT/NT */
.book-nav-grouped {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.nav-group {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}
.nav-group-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 4px;
    padding: 4px 0;
}

/* Toolbar */
#toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 6px;
}

#toolbar button {
    padding: 5px 14px;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-family: var(--font-body);
    font-weight: 500;
    color: var(--navy);
    transition: all 0.2s;
}
#toolbar button:hover { background: var(--teal-bg); border-color: var(--teal); }
#btn-approve {
    background: var(--gold);
    color: var(--navy);
    border-color: var(--gold);
    font-weight: 600;
}
#btn-approve:hover { background: #b8933d !important; }

#toolbar .status-legend {
    margin-left: auto;
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: rgba(255,255,255,0.6);
}
.status-legend span::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 4px;
    vertical-align: middle;
}
.status-legend .s-empty::before { background: var(--status-empty); }
.status-legend .s-draft::before { background: var(--status-draft); }
.status-legend .s-review::before { background: var(--status-review); }
.status-legend .s-final::before { background: var(--status-final); }

/* === Column toggles === */
#column-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 6px;
    font-size: 12px;
    color: rgba(255,255,255,0.7);
}
#column-toggles label {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
#column-toggles input[type="checkbox"] {
    margin-right: 3px;
    vertical-align: middle;
}

/* === Progress bar === */
#progress-bar {
    height: 4px;
    background: var(--border-light);
    margin-top: 6px;
    border-radius: 2px;
    overflow: hidden;
}
#progress-fill {
    height: 100%;
    background: var(--gold);
    transition: width 0.3s;
}

/* === Hoofdinhoud === */
#content {
    padding: 0 20px 40px;
}

/* Boekinleiding (alleen bij hoofdstuk 1) */
/* Standaard verborgen, aan via filters */
#book-intro { display: none !important; }
body.show-book-intro #book-intro { display: block !important; }
#chapter-intro { display: none !important; }
body.show-chapter-intro #chapter-intro { display: block !important; }

#book-intro {
    background: transparent;
    border: none;
    border-left: 3px solid var(--gold);
    border-radius: 0;
    padding: 8px 16px;
    margin: 12px 0 16px;
    font-size: 14px;
    color: #666;
    max-height: 120px;
    overflow: hidden;
    cursor: pointer;
    transition: max-height 0.3s;
    font-style: italic;
    line-height: 1.6;
}
#book-intro .book-intro-label {
    font-weight: 600;
    color: var(--navy);
    margin-right: 8px;
}
#book-intro.expanded {
    max-height: none;
}
#book-intro::after {
    content: '... (klik om uit te vouwen)';
    display: block;
    font-style: normal;
    font-size: 11px;
    color: #999;
    margin-top: 4px;
}
#book-intro.expanded::after {
    content: '(klik om in te vouwen)';
}

/* Hoofdstuk inleiding */
#chapter-intro {
    background: transparent;
    border: none;
    border-left: 3px solid var(--teal);
    padding: 8px 16px;
    margin: 8px 0 20px;
    font-style: italic;
    font-size: 13px;
    color: #888;
    max-height: 80px;
    overflow: hidden;
    cursor: pointer;
    transition: max-height 0.3s;
    line-height: 1.6;
}
#chapter-intro.expanded {
    max-height: none;
}
#chapter-intro::after {
    content: '... (klik om uit te vouwen)';
    display: block;
    font-style: normal;
    font-size: 11px;
    color: #999;
    margin-top: 4px;
}
#chapter-intro.expanded::after {
    content: '(klik om in te vouwen)';
}

/* === Aangezette kolommen boven de tekst ===
   Elke extra kolom als knopje met een minteken, zodat een lezer hem met één
   tik weer weghaalt (js/kolom-chips.js). */
.kolom-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    margin: 4px 24px 10px;
}
.kolom-chips[hidden] { display: none; }
.kolom-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    padding: 0 5px 0 12px;
    border: 1px solid var(--border-default);
    border-radius: 999px;
    background: var(--bg-surface-alt);
    color: var(--text-primary);
    font: 500 12.5px var(--font-body);
    cursor: pointer;
    transition: border-color 140ms ease;
}
.kolom-chip:hover { border-color: var(--gold); }
.kolom-chip:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}
.kolom-chip-min {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--border-default);
    color: var(--text-primary);
    font-weight: 700;
    line-height: 1;
    transition: background 140ms ease, color 140ms ease;
}
.kolom-chip:hover .kolom-chip-min {
    background: var(--gold);
    color: #1a1d24;
}
.kolom-chip-alles {
    padding: 0 12px;
    color: var(--text-secondary);
}

/* === Kolom headers === */
.column-headers {
    display: grid;
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--navy);
    border-bottom: 2px solid var(--gold);
    font-weight: 600;
    font-size: 13px;
    color: #fff;
}
.column-headers > div {
    padding: 6px 12px;
    border-right: 1px solid var(--border);
}
.column-headers > div:last-child { border-right: none; }

/* === Verzen grid === */
#verses-container {
    border: none;
}

.verse-row {
    display: grid;
    border-bottom: none;
}
.verse-row:hover { background: rgba(0,0,0,0.01); }

/* (Verouderd "Leesmodus: alleen OV2026 aan" blok verwijderd — overschreef nieuwe flex/layout regels in r.78-185) */
#content.reading-mode .col-2026 {
    font-size: 16px;
    line-height: 1.85;
    font-family: var(--font-serif);
}
#content.reading-mode #chapter-title { max-width: 100%; }
/* hide-X overschrijft ook in layout-eronder (anders won show-rule met hogere specificiteit) */
#content.reading-mode.layout-eronder.hide-1637 .col-1637,
#content.reading-mode.layout-eronder.hide-sv1888 .col-sv1888,
#content.reading-mode.layout-eronder.hide-2026 .col-2026,
#content.reading-mode.layout-eronder.hide-margin1637 .col-margin1637,
#content.reading-mode.layout-eronder.hide-marginSV1888 .col-marginSV1888,
#content.reading-mode.layout-eronder.hide-margin2026 .col-margin2026,
#content.reading-mode.layout-eronder.hide-nbg51 .col-nbg51,
#content.reading-mode.layout-eronder.hide-hsv .col-hsv,
#content.reading-mode.layout-eronder.hide-hebrew .col-hebrew,
#content.reading-mode.layout-eronder.hide-diff .col-diff,
#content.reading-mode.layout-eronder.hide-noteDiff .col-noteDiff {
    display: none !important;
}

/* Versnummer */
.verse-num {
    padding: 8px 4px;
    text-align: center;
    font-weight: bold;
    color: var(--brown);
    font-size: 13px;
    border-right: 1px solid var(--border-light);
    cursor: pointer;
    user-select: none;
    position: relative;
}

/* Optie: versnummers verbergen — color transparent + visibility hidden zodat de status-balk en klik-handlers blijven werken.
   !important nodig omdat #content.reading-mode .verse-num een specifieker selector heeft. */
body.hide-verse-numbers .verse-num {
    color: transparent !important;
    visibility: hidden;
}
body.hide-verse-numbers .verse-num:hover {
    color: var(--brown) !important;
    visibility: visible;
}
/* Status-streep (::after) blijft zichtbaar — handig voor de status-klik */
body.hide-verse-numbers .verse-num::after {
    visibility: visible;
}

/* Status indicator */
.verse-num::after {
    content: '';
    position: absolute;
    left: 2px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 2px;
}
.verse-row[data-status="empty"] .verse-num::after { background: var(--status-empty); }
.verse-row[data-status="draft"] .verse-num::after { background: var(--status-draft); }
.verse-row[data-status="review"] .verse-num::after { background: var(--status-review); }
.verse-row[data-status="final"] .verse-num::after { background: var(--status-final); }

/* Cellen */
.verse-cell {
    padding: 8px 12px;
    border-right: none;
    min-height: 40px;
    word-wrap: break-word;
}
.verse-cell:last-child { border-right: none; }

body.reader-font-klassiek #content.reading-mode .verse-cell:not(.col-hebrew),
body.reader-font-klassiek .chapter-intro-inline,
body.reader-font-klassiek .book-intro-inline,
body.reader-font-klassiek .osv-cite {
    font-family: var(--font-serif);
}
body.reader-font-rustig #content.reading-mode .verse-cell:not(.col-hebrew),
body.reader-font-rustig .chapter-intro-inline,
body.reader-font-rustig .book-intro-inline,
body.reader-font-rustig .osv-cite {
    font-family: var(--font-body);
}
body.reader-spacing-compact #content.reading-mode .verse-cell:not(.col-hebrew) { line-height: 1.55; }
body.reader-spacing-normaal #content.reading-mode .verse-cell:not(.col-hebrew) { line-height: 1.85; }
body.reader-spacing-ruim #content.reading-mode .verse-cell:not(.col-hebrew) { line-height: 2.15; }
body.reader-spacing-compact .osv-cite { line-height: 1.55; }
body.reader-spacing-normaal .osv-cite { line-height: 1.85; }
body.reader-spacing-ruim .osv-cite { line-height: 2.15; }

/* --- Zoomregeling: tekst moet echt meeschalen --------------------------------
   De zweefknop zet `zoom` op <html>. Dat is geen standaard-eigenschap: Chromium
   en Firefox schalen er alles mee, maar Safari past hem toe op de opmaak en
   laat de lettergrootte over aan zijn eigen automatische aanpassing. Op de iPad
   groeide daardoor wel de regelafstand maar niet de letter.

   text-size-adjust op 100% zet die automatische aanpassing uit, zodat Safari de
   tekst niet meer terugregelt. Dat lost het in de regel op. Werkt het tóch niet,
   dan meet zoom.js dat en schaalt het de leestekst zelf — niet met regels hier,
   want de lettergroottes verschillen per schermbreedte en een vaste waarde zou
   op mobiel het verkeerde uitgangspunt nemen. */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}


.col-1637 { background: var(--parchment); }
.col-hebrew {
    background: #f8f4f0;
    font-size: 16px;
    direction: rtl;
    line-height: 1.8;
}
.col-hebrew .hebrew-text {
    font-family: 'Noto Serif Hebrew', 'SBL Hebrew', 'Ezra SIL', 'Times New Roman', serif;
    font-size: 17px;
    color: #2a1a0a;
}
.col-hebrew .hebrew-meaning {
    direction: ltr;
    font-size: 12px;
    color: #666;
    font-style: italic;
    margin-top: 4px;
    display: block;
}
.col-2026 { background: #fff; }
.edition-comparison {
    display: grid;
    grid-template-columns: repeat(var(--edition-count, 4), minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}
.edition-comparison[data-layout="eronder"] { display: block; }
.parallel-edition {
    min-width: 0;
    padding-inline: 10px;
    border-inline-start: 2px solid var(--border-soft, #e5dfd3);
}
.parallel-edition:first-child { border-inline-start-color: var(--gold); }
.parallel-edition::before {
    content: attr(data-edition-label);
    display: block;
    margin-bottom: 5px;
    color: var(--teal);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .055em;
    line-height: 1.25;
    text-transform: uppercase;
}
.edition-comparison[data-layout="eronder"] .parallel-edition {
    margin-bottom: 10px;
    padding-block: 2px 8px;
}
.parallel-editions-unavailable {
    margin: 8px 40px;
    padding: 8px 12px;
    border-inline-start: 3px solid var(--gold);
    color: var(--text-muted);
    font-size: 13px;
}
:root[data-theme="donker"] .parallel-edition { border-inline-start-color: var(--border-default); }
:root[data-theme="donker"] .parallel-edition:first-child { border-inline-start-color: var(--gold); }
@media (max-width: 768px) {
    .edition-comparison { display: block; }
    .parallel-edition { margin-bottom: 10px; padding-block: 2px 8px; }
}
.col-opmerkingen { background: #fff8f0; font-size: 13px; }
.col-notes { background: var(--yellow-tint); font-size: 13px; }
.col-nbg51 { background: #f5f5f0; font-size: 14px; color: #444; }
.col-hsv { background: #f0f4f5; font-size: 14px; color: #444; }
.col-sv1888 { background: #f4f2ee; font-size: 14px; color: #444; }
.col-margin1637 { background: #f8f3e8; font-size: 13px; }
.col-margin2026 { background: #fff; font-size: 13px; }
.col-marginSV1888 { background: #f5f2ed; font-size: 13px; color: #444; }

/* Kanttekeningen items */
.note-item {
    margin-bottom: 4px;
    padding: 2px 0;
    border-bottom: 1px solid var(--border-light);
    line-height: 1.4;
}
.note-item:last-child { border-bottom: none; }
.note-item .note-marker-label {
    font-weight: 700;
    color: var(--gold);
    font-size: 11px;
    margin-right: 4px;
}
.note-item .note-type-label {
    font-size: 10px;
    color: #999;
    text-transform: uppercase;
}
.margin-note-edit {
    outline: none;
    display: inline;
    min-width: 60px;
}
.margin-note-edit:focus {
    background: #fffde6;
    box-shadow: 0 0 0 1px #4a90d9;
    border-radius: 2px;
}
.margin-note-edit:empty::before {
    content: attr(data-placeholder);
    color: #bbb;
    font-style: italic;
}

/* Kolom drag-and-drop */
.column-headers [data-col][draggable="true"] {
    cursor: grab;
    user-select: none;
    transition: opacity 0.15s;
}
.column-headers [data-col][draggable="true"]:active {
    cursor: grabbing;
}
.column-headers .drag-over-left {
    box-shadow: inset 3px 0 0 var(--gold);
}
.column-headers .drag-over-right {
    box-shadow: inset -3px 0 0 var(--gold);
}

/* Kolom-verberg classes */
#content.hide-1637 [data-col="1637"] { display: none; }
#content.hide-hebrew [data-col="hebrew"] { display: none; }
#content.hide-2026 [data-col="2026"] { display: none; }
#content.hide-opmerkingen [data-col="opmerkingen"] { display: none; }
#content.hide-notes [data-col="notes"] { display: none; }
#content.hide-nbg51 [data-col="nbg51"] { display: none; }
#content.hide-hsv [data-col="hsv"] { display: none; }
#content.hide-sv1888 [data-col="sv1888"] { display: none; }
#content.hide-diff [data-col="diff"] { display: none; }
#content.hide-noteDiff [data-col="noteDiff"] { display: none; }
#content.hide-margin1637 [data-col="margin1637"] { display: none; }
#content.hide-margin2026 [data-col="margin2026"] { display: none; }
#content.hide-marginSV1888 [data-col="marginSV1888"] { display: none; }

/* Verberg nootcijfers in bijbeltekst als bijbehorende kanttekeningkolom uit staat */
#content.hide-margin1637 [data-col="1637"] sup.note-marker { display: none; }
#content.hide-margin2026 [data-col="2026"] sup.note-marker { display: none; }
#content.hide-marginSV1888 [data-col="sv1888"] sup.note-marker { display: none; }

/* Bewerkbare cellen */
.verse-cell[contenteditable="true"] {
    outline: none;
    cursor: text;
}
span.god-speaks {
    color: #c0392b !important;
    font-style: italic !important;
    font-weight: bold !important;
    display: inline !important;
}
span.direct-speech {
    font-style: italic !important;
    display: inline !important;
    text-decoration: none !important;
}

/* Citaat binnen een citaat: geel, zodat de lagen uit elkaar te houden zijn.
   Komt honderden keren voor, meestal wanneer iemand een boodschap doorgeeft
   die hij zelf gekregen heeft ("Zo zegt JAHWEH: …" binnen een opdracht aan
   de profeet). De regels staan bewust op twee klassen diep, want de losse
   .god-speaks- en .angel-speaks-regels dragen !important. */
span.direct-speech span.direct-speech, span.direct-speech span.direct-speech i,
span.direct-speech span.god-speaks,    span.direct-speech span.god-speaks i,
span.god-speaks    span.direct-speech, span.god-speaks    span.direct-speech i,
span.god-speaks    span.god-speaks,    span.god-speaks    span.god-speaks i,
span.angel-speaks  span.direct-speech, span.angel-speaks  span.direct-speech i,
span.angel-speaks  span.god-speaks,    span.angel-speaks  span.god-speaks i,
span.devil-speaks  span.direct-speech, span.devil-speaks  span.direct-speech i,
span.devil-speaks  span.god-speaks,    span.devil-speaks  span.god-speaks i {
    color: #9a6b00 !important;
}
:root[data-theme="donker"] span.direct-speech span.direct-speech,
:root[data-theme="donker"] span.direct-speech span.direct-speech i,
:root[data-theme="donker"] span.direct-speech span.god-speaks,
:root[data-theme="donker"] span.direct-speech span.god-speaks i,
:root[data-theme="donker"] span.god-speaks span.direct-speech,
:root[data-theme="donker"] span.god-speaks span.direct-speech i,
:root[data-theme="donker"] span.god-speaks span.god-speaks,
:root[data-theme="donker"] span.god-speaks span.god-speaks i,
:root[data-theme="donker"] span.angel-speaks span.direct-speech,
:root[data-theme="donker"] span.angel-speaks span.direct-speech i,
:root[data-theme="donker"] span.angel-speaks span.god-speaks,
:root[data-theme="donker"] span.angel-speaks span.god-speaks i,
:root[data-theme="donker"] span.devil-speaks span.direct-speech,
:root[data-theme="donker"] span.devil-speaks span.direct-speech i,
:root[data-theme="donker"] span.devil-speaks span.god-speaks,
:root[data-theme="donker"] span.devil-speaks span.god-speaks i {
    color: #e3b341 !important;
}
span.direct-speech::before { content: '\201C'; }
span.direct-speech::after { content: '\201D'; }
span.devil-speaks {
    color: #8a8a3a !important;
    font-style: italic !important;
    font-weight: bold !important;
    display: inline !important;
}
.verse-cell[contenteditable="true"]:focus {
    box-shadow: inset 0 0 0 2px #4a90d9;
    background: #fff;
}
.verse-cell[contenteditable="true"]:empty::before {
    content: attr(data-placeholder);
    color: #bbb;
    font-style: italic;
}

/* Noot markers in 1637 tekst */
sup.note-marker {
    color: var(--gold);
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    padding: 0 1px;
}
sup.note-marker:hover {
    background: var(--navy);
    color: var(--gold);
    border-radius: 2px;
}
.note-markers {
    display: inline;
    margin-left: 4px;
    white-space: nowrap;
}

/* Column resize handles */
.col-resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    cursor: col-resize;
    background: transparent;
    z-index: 10;
}
.col-resize-handle:hover {
    background: var(--gold);
    opacity: 0.5;
}

/* Kanttekeningen tooltip */
.note-tooltip {
    position: fixed;
    max-width: 400px;
    background: #fff;
    border: 1px solid var(--brown-light);
    border-radius: 4px;
    padding: 10px 14px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 200;
    font-size: 13px;
    line-height: 1.5;
}
.note-tooltip .note-label {
    font-weight: bold;
    color: var(--brown);
    margin-bottom: 4px;
}
.note-tooltip .note-type {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Status dropdown */
.status-dropdown {
    position: absolute;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 150;
    padding: 4px 0;
}
.status-dropdown button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 4px 12px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 12px;
    font-family: inherit;
}
.status-dropdown button:hover { background: #f0f0f0; }
.status-dropdown button::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    margin-right: 6px;
    vertical-align: middle;
}
.status-dropdown .s-empty::before { background: var(--status-empty); }
.status-dropdown .s-draft::before { background: var(--status-draft); }
.status-dropdown .s-review::before { background: var(--status-review); }
.status-dropdown .s-final::before { background: var(--status-final); }

/* Grondtekst klikbare woorden */
.strongs-word {
    cursor: pointer;
    padding: 1px 2px;
    border-radius: 2px;
    transition: background 0.15s;
}
/* Strong's nummers */
.strongs-sub {
    font-size: 8px;
    color: var(--teal);
    display: block;
    text-align: center;
    direction: ltr;
    line-height: 1;
    margin-top: -2px;
}
.strongs-word {
    display: inline-block;
    text-align: center;
    vertical-align: top;
}
.strongs-row {
    margin-top: 4px;
    padding-top: 3px;
    border-top: 1px solid var(--border-light);
    font-size: 10px;
    color: var(--teal);
    line-height: 1.8;
    word-spacing: 4px;
}
.strongs-inline {
    cursor: pointer;
    display: inline;
    padding: 0;
    border: 0;
    background: transparent;
    color: #246da8;
    font: inherit;
    font-size: 0.72em;
    line-height: inherit;
    user-select: none;
    vertical-align: baseline;
    margin-inline: 0.2em;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.14em;
}
.strongs-inline:hover {
    color: #2a5a8a;
}
.strongs-inline:focus-visible {
    outline: 2px solid #246da8;
    outline-offset: 2px;
}
:root[data-theme="donker"] .strongs-inline {
    color: #83bbef !important;
    background: transparent !important;
    border-color: transparent !important;
}
:root[data-theme="donker"] .strongs-inline:hover {
    color: #add6ff !important;
}
:root[data-theme="donker"] .strongs-inline:focus-visible {
    outline-color: #83bbef;
}
.strongs-alignment {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 5px 9px;
    margin-top: 9px;
    padding-top: 8px;
    border-top: 1px solid var(--border-light);
    direction: rtl;
    font-family: var(--font-body);
    user-select: none;
}
.strongs-alignment-ltr,
.strongs-alignment-greek { direction: ltr; }
.strongs-alignment-ltr .strongs-source-word,
.strongs-alignment-greek .strongs-source-word {
    direction: ltr;
    font-family: var(--font-serif);
}
.strongs-token-latin .strongs-source-word { font-style: italic; }
.strongs-token-geez .strongs-source-word { font-family: "Noto Serif Ethiopic", var(--font-serif); }
.strongs-token {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    direction: ltr;
}
.strongs-source-word {
    color: var(--text-primary);
    font-family: "Noto Serif Hebrew", "SBL Hebrew", "Times New Roman", serif;
    font-size: 16px;
    line-height: 1.2;
    direction: rtl;
}

.strongs-word:hover {
    background: rgba(203, 164, 73, 0.25);
}
/* Diff kolom */
.col-diff { background: #faf8f4; font-size: 12px; line-height: 1.6; }
.diff-change {
    display: block;
    margin-bottom: 2px;
}
.diff-old {
    color: #999;
    text-decoration: line-through;
}
.diff-new {
    color: var(--navy);
    font-weight: 600;
    background: rgba(203, 164, 73, 0.2);
    padding: 0 3px;
    border-radius: 2px;
}
.diff-added {
    display: block;
    color: #2d6a2d;
    font-weight: 600;
    background: rgba(92, 184, 92, 0.15);
    padding: 0 3px;
    border-radius: 2px;
    margin-bottom: 2px;
}
.diff-removed {
    display: block;
    color: #c0392b;
    text-decoration: line-through;
    margin-bottom: 2px;
}
.diff-identical {
    color: #bbb;
    font-style: italic;
    font-size: 11px;
}

.strongs-word.strongs-active {
    background: var(--gold);
    color: var(--navy);
    border-radius: 2px;
    padding: 1px 3px;
}
.strongs-verse-highlight {
    background: rgba(203, 164, 73, 0.12) !important;
    box-shadow: inset 3px 0 0 var(--gold);
    transition: background 0.2s;
}

/* Hover tooltip (kort) */
.word-hover-tooltip {
    position: fixed;
    background: #2a1a0a;
    color: #fff;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 13px;
    line-height: 1.4;
    z-index: 250;
    pointer-events: none;
    max-width: 280px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.wht-translit { color: #dbb84b; font-style: italic; }
.wht-gloss { color: #aed6f1; }
.wht-strongs { color: #999; font-size: 10px; }

/* Lexicon tooltip (uitgebreid, bij klik) */
.lexicon-tooltip {
    position: fixed;
    max-width: 420px;
    min-width: 250px;
    background: #fff;
    border: 1px solid var(--brown-light);
    border-radius: 6px;
    padding: 12px 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    z-index: 300;
    font-size: 13px;
    line-height: 1.5;
    max-height: 350px;
    overflow-y: auto;
}
.lexicon-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.lexicon-strongs {
    font-weight: bold;
    color: var(--brown);
    font-size: 14px;
}
.lexicon-source {
    font-size: 10px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.lexicon-word {
    font-size: 18px;
    color: #2a1a0a;
    margin-bottom: 4px;
}
.lexicon-gloss {
    font-weight: bold;
    color: #333;
    margin-bottom: 8px;
}
.lexicon-def {
    font-size: 12px;
    color: #555;
    border-top: 1px solid #eee;
    padding-top: 8px;
}

/* Toegankelijk woordenboekpaneel onderaan bij Strong-nummers. */
.strongs-sheet {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(19, 41, 58, 0.28);
}
.strongs-sheet-panel {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: min(760px, 100%);
    margin-inline: auto;
    max-height: min(72vh, 680px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-light);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    background: var(--bg-surface);
    box-shadow: 0 -12px 40px rgba(19, 41, 58, 0.2);
}
.strongs-sheet-handle {
    width: 44px;
    height: 4px;
    margin: 9px auto 2px;
    border-radius: 3px;
    background: var(--border-light);
}
.strongs-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-light);
}
.strongs-sheet-header > div {
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.strongs-sheet-resize-handle {
    display: none;
}
.strongs-sheet-header .strongs-sheet-actions {
    align-items: center;
    margin-left: auto;
}
.strongs-sheet-close {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: var(--bg-surface-alt);
    color: var(--text-primary);
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
}
.strongs-sheet-close:focus-visible {
    outline: 2px solid #246da8;
    outline-offset: 2px;
}
.strongs-sheet-article {
    display: block;
    width: 100%;
    min-height: 0;
    flex: 1 1 auto;
    border: 0;
    background: var(--bg-surface);
}
.strongs-sheet-content .lexicon-word {
    font-size: 28px;
    color: var(--text-primary);
}
.strongs-sheet-transliteration {
    margin-top: -4px;
    margin-bottom: 8px;
    color: var(--text-muted);
    font-style: italic;
}
.strongs-sheet-content .lexicon-def {
    max-height: none;
    color: var(--text-primary);
    font-size: 14px;
}
.strongs-sheet-content .lexicon-def p:first-child { margin-top: 0; }
.strongs-sheet-content .lexicon-def a {
    color: var(--gold);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.strongs-sheet-full-link {
    display: inline-block;
    margin: 0;
    color: var(--gold);
    font-weight: 600;
    text-decoration: none;
    font-size: 12px;
}

@media (min-width: 769px) {
    .strongs-sheet-panel {
        position: relative;
        width: min(760px, calc(100vw - 40px));
        height: min(50vh, calc(100vh - 40px));
        min-width: min(560px, calc(100vw - 40px));
        min-height: min(420px, calc(100vh - 40px));
        max-width: calc(100vw - 40px);
        max-height: calc(100vh - 40px);
        margin-bottom: 18px;
        border-bottom: 1px solid var(--border-light);
        border-radius: 18px;
    }
    .strongs-sheet-resize-handle {
        position: absolute;
        z-index: 3;
        top: 9px;
        right: 9px;
        display: block;
        width: 18px;
        height: 18px;
        border-top: 2px solid var(--gold);
        border-right: 2px solid var(--gold);
        border-radius: 0 8px 0 0;
        cursor: nesw-resize;
        opacity: 0.75;
    }
    .strongs-sheet-resize-handle:hover,
    .strongs-sheet-resize-handle:focus-visible {
        opacity: 1;
        outline: none;
    }
    .strongs-sheet-panel.is-resizing,
    .strongs-sheet-panel.is-resizing * {
        user-select: none;
    }
    .strongs-sheet-panel.is-resizing .strongs-sheet-article {
        pointer-events: none;
    }
    .strongs-sheet-actions {
        padding-right: 14px;
    }
}

/* Directe rede — cursief */
.direct-speech {
    font-style: italic;
}

/* Woorden van God — rood + cursief + aanhalingstekens */
.god-speaks {
    color: #c0392b !important;
    font-style: italic !important;
    font-weight: bold;
}
.god-speaks::before { content: '\201C'; }
.god-speaks::after { content: '\201D'; }

/* Woorden van de duivel/satan/verzoeker — geel/amber + cursief + aanhalingstekens */
.devil-speaks {
    color: #8a8a3a !important;
    font-style: italic !important;
    font-weight: bold;
}
.devil-speaks::before { content: '\201C'; }
.devil-speaks::after { content: '\201D'; }

/* === Citaatopmaak UIT (optie) — alle citaat-styling neutraliseren === */
body.citaten-uit .direct-speech,
body.citaten-uit .god-speaks,
body.citaten-uit .devil-speaks,
body.citaten-uit .direct-speech i,
body.citaten-uit .god-speaks i,
body.citaten-uit .devil-speaks i {
    color: inherit !important;
    font-style: normal !important;
    font-weight: inherit !important;
}
/* ook het gele citaat-in-een-citaat; dat staat op twee klassen diep en zou
   anders als enige gekleurd blijven staan wanneer de opmaak uit is */
body.citaten-uit span.direct-speech span.direct-speech,
body.citaten-uit span.direct-speech span.direct-speech i,
body.citaten-uit span.direct-speech span.god-speaks,
body.citaten-uit span.direct-speech span.god-speaks i,
body.citaten-uit span.god-speaks span.direct-speech,
body.citaten-uit span.god-speaks span.direct-speech i,
body.citaten-uit span.god-speaks span.god-speaks,
body.citaten-uit span.god-speaks span.god-speaks i,
body.citaten-uit span.angel-speaks span.direct-speech,
body.citaten-uit span.angel-speaks span.direct-speech i,
body.citaten-uit span.angel-speaks span.god-speaks,
body.citaten-uit span.angel-speaks span.god-speaks i,
body.citaten-uit span.devil-speaks span.direct-speech,
body.citaten-uit span.devil-speaks span.direct-speech i,
body.citaten-uit span.devil-speaks span.god-speaks,
body.citaten-uit span.devil-speaks span.god-speaks i {
    color: inherit !important;
    font-style: normal !important;
    font-weight: inherit !important;
}
/* in het donkere thema draagt de gele regel een extra klasse aan gewicht;
   deze variant moet daar overheen */
:root[data-theme="donker"] body.citaten-uit span.direct-speech span.direct-speech,
:root[data-theme="donker"] body.citaten-uit span.direct-speech span.direct-speech i,
:root[data-theme="donker"] body.citaten-uit span.direct-speech span.god-speaks,
:root[data-theme="donker"] body.citaten-uit span.direct-speech span.god-speaks i,
:root[data-theme="donker"] body.citaten-uit span.god-speaks span.direct-speech,
:root[data-theme="donker"] body.citaten-uit span.god-speaks span.direct-speech i,
:root[data-theme="donker"] body.citaten-uit span.god-speaks span.god-speaks,
:root[data-theme="donker"] body.citaten-uit span.god-speaks span.god-speaks i,
:root[data-theme="donker"] body.citaten-uit span.angel-speaks span.direct-speech,
:root[data-theme="donker"] body.citaten-uit span.angel-speaks span.direct-speech i,
:root[data-theme="donker"] body.citaten-uit span.angel-speaks span.god-speaks,
:root[data-theme="donker"] body.citaten-uit span.angel-speaks span.god-speaks i,
:root[data-theme="donker"] body.citaten-uit span.devil-speaks span.direct-speech,
:root[data-theme="donker"] body.citaten-uit span.devil-speaks span.direct-speech i,
:root[data-theme="donker"] body.citaten-uit span.devil-speaks span.god-speaks,
:root[data-theme="donker"] body.citaten-uit span.devil-speaks span.god-speaks i {
    color: inherit !important;
    font-style: normal !important;
    font-weight: inherit !important;
}
body.citaten-uit .direct-speech::before,
body.citaten-uit .direct-speech::after,
body.citaten-uit .god-speaks::before,
body.citaten-uit .god-speaks::after,
body.citaten-uit .devil-speaks::before,
body.citaten-uit .devil-speaks::after { content: none !important; }

/* Bijbelverwijzingen links */
.ref-link {
    color: var(--brown);
    text-decoration: none;
    border-bottom: 1px dotted var(--brown-light);
    cursor: pointer;
}
.ref-link:hover {
    color: #c0392b;
    border-bottom-color: #c0392b;
}
.ref-highlight {
    animation: refHighlight 2s ease-out;
}
@keyframes refHighlight {
    0% { background: #fff3cd; }
    100% { background: transparent; }
}

/* === Responsive / Mobiel === */
@media (max-width: 768px) {
    body {
        font-size: 15px;
    }

    /* Linker sidebar als off-canvas drawer (slide vanuit links) — start onder topnav */
    #sidebar {
        width: 80vw !important;
        max-width: 320px;
        min-width: 0;
        height: calc(100vh - 56px);
        position: fixed;
        top: 56px;
        left: 0;
        z-index: 250;
        transform: translateX(-100%);
        transition: transform 0.28s ease;
        overflow-y: auto;
        box-shadow: 2px 0 16px rgba(0,0,0,0.25);
    }
    #sidebar.mobile-open { transform: translateX(0); }
    #sidebar.collapsed { transform: translateX(-100%); }

    /* Open-knoppen op mobile */
    #sidebar-open {
        display: block !important;
        top: 78px;
        font-size: 18px;
        padding: 10px 12px;
    }

    main {
        margin-left: 0 !important;
        padding: 8px 12px 16px;
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
    }
    #content { padding: 0 12px 24px; max-width: 100%; box-sizing: border-box; }
    #verses-container { max-width: 100%; overflow-x: hidden; }
    .verse-row { max-width: 100%; min-width: 0; }
    .verse-cell, .col-2026 { min-width: 0; word-wrap: break-word; overflow-wrap: anywhere; }
    #content-topbar { padding: 8px 4px; gap: 6px; }
    #content-topbar #chapter-title { display: none !important; }   /* dubbel met mobile-book-btn picker */

    /* Verzen leesbaarder op mobile */
    #content.reading-mode .verse-row {
        padding: 8px 4px;
        font-size: 18px;
        line-height: 2.0;
    }

    /* Versie-tabel scrollbaar */
    .verses-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .verses-table {
        min-width: 600px;
    }

    /* Kolom checkboxes compact */
    .column-toggles {
        flex-wrap: wrap;
        gap: 4px;
    }
    .column-toggles label {
        font-size: 10px;
        padding: 2px 6px;
    }

    /* Modals full-width op mobiel */
    #technisch-modal > div,
    #lexicon-modal > div,
    #paintings-modal > div,
    #woordenlijst-modal > div,
    #uitgangspunten-modal > div,
    #changelog-modal > div {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        height: 100vh;
    }

    /* Schilderijen grid 2 kolommen op mobiel */
    #paintings-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Vers tekst leesbaar */
    .verse-text {
        font-size: 14px;
        line-height: 1.7;
    }
    /* Parallelle vertalingen onder een vers */
    .verse-parallel { margin: 4px 0 2px; padding: 2px 6px; font-size: 14px; line-height: 1.6; color: #555; }
    .verse-kjv { border-left: 3px solid var(--gold, #cba449); font-style: italic; }
    .verse-arabisch {
        direction: rtl; text-align: right;
        font-family: 'Amiri', 'Scheherazade New', 'Noto Naskh Arabic', 'Times New Roman', serif;
        font-size: 19px; line-height: 2; color: var(--teal, #2a7d7d);
        border-right: 3px solid var(--gold, #cba449);
    }
    :root[data-theme="donker"] .verse-parallel { color: var(--text-secondary, #cdd6d6); }
    :root[data-theme="donker"] .verse-arabisch { color: var(--text-secondary, #cdd6d6); }
    #arabisch-toggle, #kjv-toggle {
        font-size: 18px; line-height: 1; background: none; border: none; cursor: pointer;
        color: inherit; opacity: 0.55; padding: 4px 7px;
    }
    #kjv-toggle { font-size: 13px; font-weight: 700; }
    #arabisch-toggle.on, #kjv-toggle.on { opacity: 1; color: var(--gold, #cba449); }

    /* Kanttekeningen */
    .note-text {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    main {
        padding: 46px 4px 12px;
    }

    /* Schilderijen 1 kolom op kleine telefoons */
    #paintings-grid {
        grid-template-columns: 1fr !important;
    }

    .verse-text {
        font-size: 13px;
    }

    /* Dropdowns op smartphone: vol breedte, niet overhangen */
    .columns-dropdown {
        right: -10px;
        left: -10px;
        min-width: 0;
        max-width: calc(100vw - 20px);
    }
    #content-topbar #chapter-title { display: none; }   /* dubbel met mobile-book-btn label */
    .quickfilter span, #columns-btn svg, #opties-btn svg { display: none; }
}

/* === Dyslexie-modus === */
body.dyslexia-mode {
    background: #f5f1e8;
}

body.dyslexia-mode main {
    background: #f5f1e8;
}

body.dyslexia-mode .verses-table td,
body.dyslexia-mode .verse-text,
body.dyslexia-mode .note-text,
body.dyslexia-mode .verse-cell,
body.dyslexia-mode .col-2026 {
    font-family: 'Lexend', sans-serif !important;
    font-size: 17px;
    line-height: 2;
    letter-spacing: 0.08em;
    word-spacing: 0.25em;
    text-align: left !important;
    color: #1a1a2e;
    font-weight: 400;
    font-style: normal !important;
    max-width: 60ch;
}

body.dyslexia-mode .verse-text {
    font-size: 17px;
    max-width: 65ch;
}

body.dyslexia-mode .note-text {
    font-size: 14px;
    max-width: 65ch;
}

body.dyslexia-mode .god-speaks {
    color: #b91c1c;
    font-style: normal !important;
    font-weight: 600;
}

body.dyslexia-mode .direct-speech {
    font-style: normal !important;
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: #ccc;
    text-underline-offset: 3px;
}

body.dyslexia-mode sup.note-marker {
    font-family: 'Lexend', sans-serif !important;
    font-size: 11px;
}

body.dyslexia-mode .verses-table {
    background: #faf7f0;
}

body.dyslexia-mode .verses-table tr:nth-child(even) td {
    background: #f0ede4;
}

/* Dyslexie toggle knop */
#dyslexia-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    color: rgba(255,255,255,0.7);
    transition: background 0.2s;
}

#dyslexia-toggle:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

#dyslexia-toggle.active {
    background: rgba(203, 164, 73, 0.3);
    color: var(--gold);
}

/* === Verse selectie — underline i.p.v. arcering === */
.verse-row.verse-selected {
    background: transparent !important;
    outline: none;
}
.verse-row.verse-selected .col-2026,
.verse-row.verse-selected .verse-text {
    text-decoration: underline;
    text-decoration-color: rgba(96, 165, 250, 0.85);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.verse-row.verse-selected .verse-num {
    background: transparent;
    color: var(--navy);
    text-decoration: underline;
    text-decoration-color: rgba(96, 165, 250, 0.85);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
:root[data-theme="donker"] .verse-row.verse-selected .verse-num { color: var(--text-primary); }
/* Browser-native ::selection: geen achtergrond, alleen onderstreping */
.verse-row .col-2026 ::selection,
.verse-row .col-2026::selection {
    background: transparent;
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(96, 165, 250, 0.85);
    text-decoration-thickness: 2px;
}
.verse-row .col-2026 ::-moz-selection,
.verse-row .col-2026::-moz-selection {
    background: transparent;
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(96, 165, 250, 0.85);
    text-decoration-thickness: 2px;
}

/* Kopieer-toolbar — alleen zichtbaar bij selectie */
#copy-toolbar {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--navy);
    color: #fff;
    padding: 10px 18px;
    border-radius: 10px;
    display: none;
    align-items: center;
    gap: 12px;
    z-index: 9999;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    font-size: 14px;
}
#copy-toolbar.visible {
    display: flex;
}
#copy-count {
    font-weight: 500;
    min-width: 140px;
    transition: color 0.2s;
}
#copy-toolbar button {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: none;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.15s;
}
#copy-toolbar button:hover {
    background: var(--gold);
    color: var(--navy);
}
#copy-close {
    font-size: 18px !important;
    padding: 4px 10px !important;
    margin-left: 4px;
}
/* Kleur-dropdown in de selectie-toolbar */
#vers-color-wrap { position: relative; display: inline-flex; }
#vers-color-menu {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    background: var(--card-bg, #1d3a4f);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    padding: 7px;
    gap: 7px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.35);
    z-index: 1001;
}
#vers-color-wrap.open #vers-color-menu { display: flex; }
.vc-swatch {
    width: 26px !important; height: 26px;
    border-radius: 50% !important;
    border: 2px solid rgba(255,255,255,0.35) !important;
    cursor: pointer; padding: 0 !important;
}
.vc-swatch:hover { transform: scale(1.12); }
.vc-swatch.vc-none {
    background: rgba(255,255,255,0.15) !important;
    color: #fff; font-size: 13px; line-height: 1; display: flex;
    align-items: center; justify-content: center;
}

/* === Highlight-palet === */
.hl-palette {
    display: flex;
    align-items: center;
    gap: 6px;
}
.hl-palette-toolbar {
    padding: 0 6px;
    border-left: 1px solid rgba(255,255,255,0.18);
    border-right: 1px solid rgba(255,255,255,0.18);
    margin: 0 2px;
}
.hl-palette-float {
    position: absolute;
    z-index: 10000;
    background: var(--navy, #1a2238);
    color: #fff;
    padding: 6px 8px;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
    display: flex;
    gap: 6px;
}
.hl-color-btn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.5);
    cursor: pointer;
    padding: 0;
    background: #999;
    transition: transform 0.1s, border-color 0.1s;
}
.hl-color-btn:hover {
    transform: scale(1.18);
    border-color: #fff;
}
.hl-color-btn.hl-color-magenta    { background: rgba(255, 0, 255, 0.55); }
.hl-color-btn.hl-color-lichtblauw { background: rgba(135, 206, 235, 0.85); }
.hl-color-btn.hl-color-lichtgroen { background: rgba(144, 238, 144, 0.9); }
.hl-color-btn.hl-color-lichtgeel  { background: rgba(255, 235, 80, 0.95); }
.hl-color-btn.hl-clear {
    background: transparent;
    color: #fff;
    font-size: 16px;
    line-height: 18px;
    border-color: rgba(255,255,255,0.55);
}
.hl-color-btn.hl-clear:hover {
    background: rgba(255,255,255,0.18);
}
/* Donker thema — palet leesbaar tegen donkere paginas */
:root[data-theme="donker"] .hl-palette-float {
    background: #000000 !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-default);
    box-shadow: 0 4px 18px rgba(0,0,0,0.6);
}
:root[data-theme="donker"] .hl-color-btn {
    border-color: rgba(255,255,255,0.55);
}
:root[data-theme="donker"] .hl-color-btn:hover { border-color: #fff; }
/* Volledig verzadigde knopkleuren in donker thema — anders verdwijnen ze in de zwarte achtergrond */
:root[data-theme="donker"] .hl-color-btn.hl-color-magenta    { background: #ff4dff !important; }
:root[data-theme="donker"] .hl-color-btn.hl-color-lichtblauw { background: #60a5fa !important; }
:root[data-theme="donker"] .hl-color-btn.hl-color-lichtgroen { background: #4ade80 !important; }
:root[data-theme="donker"] .hl-color-btn.hl-color-lichtgeel  { background: #facc15 !important; }
:root[data-theme="donker"] .hl-color-btn.hl-clear { color: #fff; border-color: rgba(255,255,255,0.55); background: transparent !important; }

/* === Verse-highlights — arcering met kleurkeuze === */
.verse-row.hl-verse-magenta    .col-2026 { background: rgba(255, 0, 255, 0.25) !important; border-radius: 3px; }
.verse-row.hl-verse-lichtblauw .col-2026 { background: rgba(135, 206, 235, 0.4) !important;  border-radius: 3px; }
.verse-row.hl-verse-lichtgroen .col-2026 { background: rgba(144, 238, 144, 0.4) !important;  border-radius: 3px; }
.verse-row.hl-verse-lichtgeel  .col-2026 { background: rgba(255, 255, 0, 0.35) !important;   border-radius: 3px; }

/* === Word-highlights — arcering === */
mark.hl-word {
    color: inherit;
    padding: 0 2px;
    border-radius: 2px;
    cursor: pointer;
}
mark.hl-word:hover {
    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.25);
}
mark.hl-word-magenta    { background: rgba(255, 0, 255, 0.25); }
mark.hl-word-lichtblauw { background: rgba(135, 206, 235, 0.4); }
mark.hl-word-lichtgroen { background: rgba(144, 238, 144, 0.4); }
mark.hl-word-lichtgeel  { background: rgba(255, 255, 0, 0.35); }
/* In donker thema iets meer alpha zodat de kleur niet te flauw wordt */
:root[data-theme="donker"] .verse-row.hl-verse-magenta    .col-2026 { background: rgba(255, 77, 255, 0.30) !important; }
:root[data-theme="donker"] .verse-row.hl-verse-lichtblauw .col-2026 { background: rgba(96, 165, 250, 0.32) !important; }
:root[data-theme="donker"] .verse-row.hl-verse-lichtgroen .col-2026 { background: rgba(74, 222, 128, 0.30) !important; }
:root[data-theme="donker"] .verse-row.hl-verse-lichtgeel  .col-2026 { background: rgba(250, 204, 21, 0.28) !important; }
:root[data-theme="donker"] mark.hl-word-magenta    { background: rgba(255, 77, 255, 0.32); }
:root[data-theme="donker"] mark.hl-word-lichtblauw { background: rgba(96, 165, 250, 0.35); }
:root[data-theme="donker"] mark.hl-word-lichtgroen { background: rgba(74, 222, 128, 0.32); }
:root[data-theme="donker"] mark.hl-word-lichtgeel  { background: rgba(250, 204, 21, 0.30); }

/* === Tags === */
.verse-tag {
    display: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin: 3px auto 0;
    cursor: pointer;
    position: relative;
    transition: transform 0.1s;
}
body.show-tags .verse-tag {
    display: block;
}
.verse-tag:hover {
    transform: scale(1.4);
}
.verse-tag:hover::after {
    content: attr(title);
    position: absolute;
    left: 16px;
    top: -4px;
    background: #142e42;
    color: #fff;
    font-size: 11px;
    font-family: var(--font-body);
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 50;
    pointer-events: none;
}

/* === Begrippenlijst === */
.begrip-link {
    color: #c87f1a;
    text-decoration: underline;
    text-decoration-color: rgba(200, 127, 26, 0.4);
    text-underline-offset: 2px;
    cursor: pointer;
    transition: all 0.1s;
}
.begrip-link:hover {
    background: rgba(203, 164, 73, 0.15);
    color: #a06510;
    text-decoration-color: #a06510;
    border-radius: 2px;
}

/* === Principe-badges in diff-kolom === */
.principe-badge { display:inline-block; font-size:9px; font-weight:600; font-family:var(--font-body); padding:1px 4px; border-radius:3px; margin-right:3px; cursor:pointer; text-decoration:none; }
.cat-N { background:#dbeafe; color:#1e40af; }
.cat-A { background:#d1fae5; color:#065f46; }
.cat-G { background:#fef3c7; color:#92400e; }
.cat-W { background:#ffedd5; color:#9a3412; }
.cat-V { background:#ede9fe; color:#5b21b6; }
.cat-S { background:#fce7f3; color:#9d174d; }
.cat-O { background:#f3f4f6; color:#374151; }

/* Undo-knop op principes-pagina */
.undo-btn {
    font-size: 11px;
    font-family: var(--font-body);
    padding: 2px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    color: #666;
    cursor: pointer;
    margin-left: auto;
    transition: all 0.15s;
    white-space: nowrap;
}
.undo-btn:hover { border-color: #c0392b; color: #c0392b; }
.undo-btn.undone { background: #fef2f2; border-color: #c0392b; color: #c0392b; }
/* De uitzonderingsknop is redactiegereedschap: hij noteert lokaal, in deze
   browser, dat een principe hier niet had moeten gelden. Hij verandert de
   vertaling niet. Voor een uitgelogde bezoeker is hij daarom verborgen —
   anders wekt hij de indruk dat je de tekst zelf kunt aanpassen, terwijl er
   op de pagina niets verandert. js/principes.js zet de klasse. */
.undo-btn { display: none; }
body.is-ingelogd .undo-btn { display: inline-block; }
.uitzondering-uitleg { display: none; }
body.is-ingelogd .uitzondering-uitleg { display: block; }
.vers-undone .vers-diff { text-decoration: line-through; opacity: 0.5; }
.undo-diff-btn {
    font-size: 10px; background: none; border: none; color: #ccc;
    cursor: pointer; padding: 0 2px; margin-left: 2px; vertical-align: middle;
}
.undo-diff-btn:hover { color: #c0392b; }
.vers-item { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid #f0ede8; flex-wrap: wrap; }
.vers-tekst { width: 100%; }

/* Responsive: kolom-zichtbaarheid wordt nu via checkboxes geregeld */

/* === Mobiele topbar + footer-nav (≤768px) ===
   Standaard verborgen op desktop. */
#mobile-topbar { display: none; }
#mobile-footer-nav { display: none; }

@media (max-width: 768px) {
    /* --- Sticky mobile topbar onder #topnav (#topnav is 48px hoog op mobile) --- */
    #mobile-topbar {
        display: flex;
        align-items: center;
        gap: 6px;
        position: sticky;
        top: 56px;                   /* matcht hoogte #topnav op mobile */
        z-index: 180;
        padding: 8px 8px;
        background: #faf8f3;
        border-bottom: 1px solid var(--border);
        box-shadow: 0 2px 6px rgba(20,46,66,0.06);
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
    }
    #mobile-topbar select {
        min-width: 0;
        height: 40px;
        padding: 6px 24px 6px 8px;
        font-family: var(--font-body);
        font-size: 14px;
        color: var(--navy);
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 6px;
        appearance: none;
        -webkit-appearance: none;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23142e42' d='M6 8L0 0h12z'/></svg>");
        background-repeat: no-repeat;
        background-position: right 8px center;
        background-size: 10px 6px;
        box-sizing: border-box;
    }
    #mobile-book-select { flex: 1 1 0; width: 0; font-weight: 600; }
    #mobile-chapter-select { flex: 0 0 72px; width: 72px; text-align: center; }
    /* Nieuwe mobile pick-buttons (vervangen <select>) */
    .mobile-pick-btn {
        height: 40px;
        padding: 0 12px;
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 6px;
        color: var(--navy);
        font-family: var(--font-serif);
        font-size: 17px;
        font-style: italic;
        font-weight: 600;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
        box-sizing: border-box;
        text-align: left;
    }
    .mobile-pick-btn .mp-label {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .mobile-pick-btn:hover, .mobile-pick-btn:active { background: #fdfcf9; }
    #mobile-book-btn { flex: 1 1 0; width: 0; }
    .mobile-pick-ch { flex: 0 0 72px; justify-content: center; text-align: center; }
    .mobile-pick-ch .mp-label { flex: 0 0 auto; }
    #mobile-opties-btn {
        flex: 0 0 40px;
        width: 40px; height: 40px;
        border: 1px solid var(--border);
        background: #fff;
        color: var(--navy);
        border-radius: 6px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        box-sizing: border-box;
    }
    /* Begrippen aan/uit pill in mobile-topbar */
    .mobile-toggle-btn {
        flex: 0 0 40px;
        width: 40px; height: 40px;
        border: 1px solid var(--border);
        background: #fff;
        color: var(--navy);
        border-radius: 6px;
        cursor: pointer;
        font-family: var(--font-body);
        font-size: 15px;
        font-weight: 700;
        padding: 0;
        box-sizing: border-box;
        transition: all 0.15s;
    }
    .mobile-toggle-btn.is-on {
        background: var(--gold, #cba449);
        color: #fff;
        border-color: var(--gold, #cba449);
    }
    .mobile-toggle-btn:hover { border-color: var(--gold, #cba449); }
    #mobile-opties-btn:hover { background: var(--gold); color: #fff; border-color: var(--gold); }

    /* --- Sticky bottom nav — respect iOS safe-area-inset-bottom (Safari URL-bar) --- */
    /* Volledig transparante balk: de verstekst loopt eronderdoor; alleen de
       knoppen (zwevende cirkels) zijn zichtbaar en klikbaar. */
    #mobile-footer-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        left: 0; right: 0;
        bottom: 0;
        padding: 0 20px calc(10px + env(safe-area-inset-bottom, 0));
        z-index: 180;
        background: transparent;
        border-top: none;
        box-shadow: none;
        min-height: 0;
        pointer-events: none;   /* tikken op de tekst erachter blijft mogelijk */
    }
    #mobile-footer-nav button { pointer-events: auto; cursor: pointer; }
    /* Vorig/volgend hoofdstuk: cirkel met open (outline) pijl, kleiner. */
    #mobile-prev-btn, #mobile-next-btn {
        flex: 0 0 auto;
        width: 46px; height: 46px;
        border-radius: 50%;
        border: 2px solid var(--gold);
        background: rgba(255,255,255,0.6);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        color: var(--gold);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    }
    #mobile-prev-btn:disabled, #mobile-next-btn:disabled { opacity: 0.35; cursor: not-allowed; }
    #mobile-prev-btn svg, #mobile-next-btn svg { width: 22px; height: 22px; }
    .mfn-audio { pointer-events: none; display: inline-flex; align-items: center; gap: 8px; }
    #mobile-chapter-label {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-body);
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0.02em;
        color: #fff;
        text-align: center;
        padding: 0 8px;
    }

    /* Reserveer ruimte onderin zodat content niet onder de footer valt
       (incl. iOS safe-area zodat content niet achter Safari URL-bar verdwijnt) */
    body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }

    /* --- Verberg desktop-elementen die op mobiel verwarrend zijn --- */
    /* De ◀-driehoek voor links-inklappen blijft binnen sidebar header maar de
       open-knoppen aan de rand verbergen we; boek-dropdown vervangt ze. */
    #sidebar-open, #sidebar-right-open { display: none !important; }

    /* "Begrippen" quickfilter in topbar verbergen — staat ook in Opties-sidebar */
    #content-topbar .quickfilter { display: none; }

    /* Originele sticky #content-topbar moet onder mobile-topbar uitkomen */
    #content-topbar { top: 112px !important; }   /* 56 (topnav) + 56 (mobile-topbar) */

    /* Lege #app-header (book-nav/chapter-nav/toolbar zijn verborgen) — geen
       lelijke navy balk tussen mobile-topbar en chapter-titel. */
    #app-header {
        background: transparent;
        border-bottom: none;
        padding: 0;
        min-height: 0;
    }

    /* Het hoofdstuk-footer onderaan main neemt extra ruimte; op mobile vervangen
       door fixed mobile-footer-nav, dus hide het oude footer. */
    #chapter-footer { display: none !important; }
}

/* Wat smaller scherm: chapter-label compacter */
@media (max-width: 480px) {
    #mobile-chapter-label { font-size: 13px; }
    #mobile-topbar { padding: 6px 8px; gap: 6px; }
    #mobile-book-select, #mobile-chapter-select { font-size: 13px; height: 38px; }
    #mobile-opties-btn { height: 38px; flex-basis: 40px; width: 40px; }
}

/* === Site-footer (rust onder pagina-content) === */
.site-footer {
    background: var(--navy);
    color: rgba(255,255,255,0.78);
    padding: 32px 24px 24px;
    border-top: 2px solid var(--gold);
    font-family: var(--font-body);
    font-size: 13px;
    margin-top: 64px;
}
.site-footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 28px;
    align-items: start;
}
.site-footer-brand { display: flex; flex-direction: column; gap: 6px; }
.site-footer-mark {
    font-family: var(--font-serif);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #fff;
    line-height: 1;
}
.site-footer-tag { color: rgba(255,255,255,0.55); line-height: 1.5; }
.site-footer-links { display: flex; flex-direction: column; gap: 6px; }
.site-footer-links a {
    color: rgba(255,255,255,0.78);
    text-decoration: none;
    transition: color 0.15s;
}
.site-footer-links a:hover { color: var(--gold); }
.site-footer-meta { display: flex; flex-direction: column; gap: 6px; color: rgba(255,255,255,0.55); }
@media (max-width: 768px) {
    .site-footer-inner { grid-template-columns: 1fr; gap: 18px; }
    .site-footer { padding: 24px 18px 100px; }
}

/* === Mobile picker-overlay === */
.mp-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #faf8f3;
    display: flex;
    flex-direction: column;
    transform: translateY(0);
    transition: opacity 0.2s, transform 0.25s;
}
.mp-overlay.hidden {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
}
.mp-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: var(--navy);
    color: #fff;
    border-bottom: 2px solid var(--gold);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.mp-back, .mp-close {
    background: rgba(255,255,255,0.08);
    border: none;
    color: #fff;
    font-size: 20px;
    width: 40px; height: 40px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.mp-back:hover, .mp-close:hover { background: rgba(255,255,255,0.18); }
.mp-back.hidden { visibility: hidden; }
.mp-title {
    flex: 1 1 auto;
    text-align: center;
    margin: 0;
    font-family: var(--font-cursive);
    font-size: 28px;
    font-weight: 400;
    color: #fff;
    line-height: 1.2;
}
.mp-body {
    flex: 1 1 auto;
    min-height: 0;          /* sta krimpen toe zodat de lijst vanaf de bovenkant scrollt (mobiel-flex-fix) */
    overflow-y: auto;
    padding: 14px 12px 32px;
    -webkit-overflow-scrolling: touch;
    align-content: start;   /* lange hoofdstuk-grids (Psalmen) bovenaan uitlijnen, niet centreren */
}
.mp-search {
    position: sticky;
    top: 0;
    z-index: 2;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 12px;
    padding: 11px 14px;
    border: 1px solid var(--border, #e5e1d8);
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 16px;
    background: var(--bg-surface, #fff);
    color: var(--text-primary, #142e42);
}
.mp-search:focus { outline: none; border-color: var(--gold); }
.mp-group { margin-bottom: 12px; }
.mp-group-label {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--teal, #1f6f7c);
    padding: 0 4px 6px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    margin-bottom: 6px;
}
.mp-list {
    display: grid;
    grid-template-columns: 1fr;   /* boeken: één lange lijst onder elkaar */
    gap: 5px;
}
.mp-item {
    background: #fff;
    border: 1px solid var(--border, #e5e1d8);
    border-radius: 7px;
    padding: 11px 14px;
    color: var(--navy);
    font-family: var(--font-body);   /* normaal lettertype, niet cursief serif */
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.mp-item:hover, .mp-item:active {
    background: rgba(203,164,73,0.08);
    border-color: var(--gold);
}
.mp-item.active {
    background: var(--gold);
    color: #fff;
    border-color: var(--gold);
    font-weight: 600;
}
/* Hoofdstuk-grid: kleine vierkantjes */
.mp-list.mp-chapters {
    grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
    gap: 8px;
}
.mp-list.mp-chapters .mp-item {
    text-align: center;
    padding: 14px 6px;
    font-weight: 600;
    font-size: 18px;
    font-family: var(--font-serif);
    font-style: normal;       /* hoofdstuk-cijfers niet cursief */
}

/* === Chapter-footer (vorig/volgend hoofdstuk) — sticky onderaan ===
   Blijft altijd zichtbaar bij scrollen door het hoofdstuk. */
#chapter-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 18px;
    margin-top: 32px;
    /* Transparante zwevende balk (zelfde weergave als de mobiele versie): geen
       witte strook, alleen de zwevende cirkel-knoppen + player vóór de tekst. */
    background: transparent;
    border: none;
    box-shadow: none;
    position: sticky;
    bottom: 0;
    z-index: 80;
    pointer-events: none;   /* lege strook vangt geen klikken; tekst blijft selecteerbaar */
}
#chapter-footer .chf-btn,
#chapter-footer .chf-center { pointer-events: auto; }
/* Verloop onderaan naar de paginakleur zodat de zwevende player leesbaar blijft
   boven de doorlopende tekst (wit in licht, zwart in donker). */
#chapter-footer::after {
    content: '';
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: 140px;
    background: linear-gradient(to bottom, transparent, var(--bg-page) 75%);
    pointer-events: none;
    z-index: -1;
}
.chf-btn {
    flex: 0 0 auto;
    width: 46px; height: 46px;
    border-radius: 50%;
    border: 2px solid var(--gold);
    background: rgba(255,255,255,0.6);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--gold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);   /* laat de cirkel zweven, zoals mobiel */
}
.chf-btn svg { width: 22px; height: 22px; }
.chf-btn:hover { background: var(--gold); color: #fff; }
.chf-btn:disabled { opacity: 0.35; cursor: not-allowed; }
:root[data-theme="donker"] .chf-btn { background: rgba(255,255,255,0.06); }
.chf-label {
    flex: 1 1 auto;
    text-align: center;
    font-family: var(--font-body);
    font-size: 13px;
    color: rgba(20,46,66,0.55);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* === Play-knop + snelheid in chapter-footer (index.html) === */
.chf-center {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 0;
}
.chf-play {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: var(--gold, #cba449);
    color: var(--navy, #142e42);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    transition: background 0.15s, transform 0.1s;
}
.chf-play:hover { background: #d9b35d; }
.chf-play:active { transform: scale(0.96); }
.chf-play.hidden { display: none; }
.chf-play .rf-pause-icon { display: none; }
.chf-play.is-playing .rf-play-icon { display: none; }
.chf-play.is-playing .rf-pause-icon { display: block; }
.chf-speed {
    flex: 0 0 auto;
    height: 26px;
    min-width: 36px;
    padding: 0 8px;
    border-radius: 13px;
    border: 1px solid var(--gold, #cba449);
    background: rgba(203,164,73,0.1);
    color: var(--navy, #142e42);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.chf-speed:hover { background: var(--gold, #cba449); color: #fff; }
.chf-speed.hidden { display: none; }

/* Stem-toggle (man/vrouw) — desktop */
.chf-voice {
    flex: 0 0 auto;
    height: 26px;
    min-width: 52px;
    padding: 0 10px;
    border-radius: 13px;
    border: 1px solid var(--gold, #cba449);
    background: rgba(203,164,73,0.1);
    color: var(--navy, #142e42);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.chf-voice:hover { background: var(--gold, #cba449); color: #fff; }
.chf-voice.hidden { display: none; }

/* Scrubber (doorspoelen) */
.chf-scrubber {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 120px;
    max-width: 360px;
}
.chf-scrubber.hidden { display: none; }
.chf-time {
    flex: 0 0 auto;
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--navy, #142e42);
    font-variant-numeric: tabular-nums;
    min-width: 36px;
    text-align: center;
}
.chf-scrubber-input {
    flex: 1 1 auto;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: rgba(20,46,66,0.18);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}
.chf-scrubber-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--gold, #cba449);
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    cursor: pointer;
}
.chf-scrubber-input::-moz-range-thumb {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--gold, #cba449);
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    cursor: pointer;
}

/* === KT-popup-modus: maak nootmarkers prominenter en clickable-uitnodigend === */
body.kt-popup-mode #content.hide-margin2026 [data-col="2026"] sup.note-marker,
body.kt-popup-mode .col-2026 sup.note-marker {
    display: inline !important;
    color: var(--gold, #cba449);
    font-weight: 700;
    cursor: pointer;
    padding: 0 1px;
}
body.kt-popup-mode .col-2026 sup.note-marker:hover {
    background: rgba(203,164,73,0.18);
    border-radius: 2px;
}

/* Vers-link in begrip-popover verbergen — gebruiker wil geen tekst-links in popup */
#begrip-popover #begrip-ref { display: none; }

/* === Definitieve 50/50 fix: forceer grid-layout in reading-mode ===
   Voorheen was .verse-row flex met inline cellen → grid-template-columns
   deed niets. Nu echt grid met cellen als block, zodat 2 kolommen exact
   50/50 zijn (en N kolommen 1/N). */
#content.reading-mode .verse-row {
    display: grid !important;
    align-items: start;
    gap: 12px;
}
#content.reading-mode .verse-row .verse-cell {
    display: block !important;
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
#content.reading-mode .verse-row .verse-num {
    display: block !important;
    text-align: right;
    padding-right: 6px;
    vertical-align: baseline;
    font-size: 13px;
}
/* 'Eronder'-layout: versnummer inline als kleine superscript VÓÓR de verstekst
   i.p.v. een volle-breedte blok erboven — veel kleinere regelafstand, zoals in
   een gedrukte Bijbel. Hogere specificiteit + latere plaatsing dan de grid-regel
   hierboven, dus dit wint. */
#content.reading-mode.layout-eronder .verse-row {
    margin-bottom: 2px !important;
}
#content.reading-mode.layout-eronder .verse-row .verse-num {
    display: inline !important;
    float: none !important;
    width: auto !important;
    text-align: left !important;
    vertical-align: super;
    font-size: 0.62em;
    font-weight: 700;
    color: var(--gold);
    padding: 0 !important;
    margin-right: 3px;
}
/* De gekleurde thema-tag niet inline meeslepen in deze compacte modus */
#content.reading-mode.layout-eronder .verse-row .verse-num .verse-tag { display: none !important; }
/* Vers 1 heeft al de sierletter (drop-cap) als markering; het inline nummer '1'
   zou tussen de drop-cap en de rest van het eerste woord vallen (I¹n) → verbergen. */
#content.reading-mode.layout-eronder .verse-row[data-verse="1"] .verse-num,
#content.reading-mode.layout-eronder .verse-row.verse-row--dropcap .verse-num { display: none !important; }
/* Cellen die niet zichtbaar moeten zijn — hide via grid (display: none) blijft werken */
#content.reading-mode.hide-sv1888 .col-sv1888,
#content.reading-mode.hide-1637 .col-1637,
#content.reading-mode.hide-2026 .col-2026,
#content.reading-mode.hide-margin2026 .col-margin2026,
#content.reading-mode.hide-margin1637 .col-margin1637,
#content.reading-mode.hide-marginSV1888 .col-marginSV1888,
#content.reading-mode.hide-nbg51 .col-nbg51,
#content.reading-mode.hide-hsv .col-hsv,
#content.reading-mode.hide-hebrew .col-hebrew,
#content.reading-mode.hide-diff .col-diff,
#content.reading-mode.hide-noteDiff .col-noteDiff {
    display: none !important;
}
/* Resize-handle altijd zichtbaar als subtiele lijn — gebruiker ziet 'm */
.col-resize-handle {
    background: rgba(203,164,73,0.3) !important;
}
.col-resize-handle:hover { background: var(--gold, #cba449) !important; opacity: 1; }

/* === Mobile audio in footer-nav === */
@media (max-width: 768px) {
    .mfn-audio {
        flex: 0 1 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-width: 0;
    }
    /* Play-knop: grotere gevulde cirkel met gevulde driehoek; groter dan de
       vorig/volgend-cirkels. */
    .mfn-play {
        flex: 0 0 auto;
        width: 62px; height: 62px;
        border-radius: 50%;
        border: none;
        background: var(--gold, #cba449);
        color: #fff;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 3px 12px rgba(0,0,0,0.32);
    }
    .mfn-play svg { width: 26px; height: 26px; }
    .mfn-play:hover { background: #d9b35d; }
    .mfn-play.hidden { display: none; }
    .mfn-play .rf-pause-icon { display: none; }
    .mfn-play.is-playing .rf-play-icon { display: none; }
    .mfn-play.is-playing .rf-pause-icon { display: block; }
    .mfn-speed {
        flex: 0 0 auto;
        height: 28px;
        min-width: 40px;
        padding: 0 10px;
        border-radius: 14px;
        border: 1px solid var(--gold, #cba449);
        background: rgba(203,164,73,0.15);
        color: #fff;
        font-family: var(--font-body);
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
    }
    .mfn-speed:hover { background: var(--gold, #cba449); color: var(--navy, #142e42); }
    .mfn-speed.hidden { display: none; }
    .mfn-voice {
        flex: 0 0 auto;
        height: 28px;
        min-width: 52px;
        padding: 0 10px;
        border-radius: 14px;
        border: 1px solid var(--gold, #cba449);
        background: rgba(203,164,73,0.15);
        color: #fff;
        font-family: var(--font-body);
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
    }
    .mfn-voice:hover { background: var(--gold, #cba449); color: var(--navy, #142e42); }
    .mfn-voice.hidden { display: none; }
}

/* === AI-concept-banner (boven verzen bij niet-geverifieerde hoofdstukken) === */
.ai-concept-banner {
    background: #fef3c7;
    border-left: 4px solid #f59e0b;
    border-radius: 0 6px 6px 0;
    padding: 12px 16px;
    margin: 12px 0 18px;
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.55;
    color: #78350f;
}
.ai-concept-banner strong { color: #92400e; }

.ethiopic-banner {
    background: #ede9fe;
    border-left: 4px solid #7c3aed;
    border-radius: 0 6px 6px 0;
    padding: 12px 16px;
    margin: 12px 0 18px;
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.55;
    color: #4c1d95;
}
.ethiopic-banner strong { color: #5b21b6; }

/* Op de telefoon nemen de waarschuwingen boven de tekst anders het halve
   scherm in; compacter, zodat de leestekst direct in beeld komt. */
@media (max-width: 768px) {
    .ai-concept-banner,
    .ethiopic-banner {
        padding: 6px 10px;
        margin: 6px 0 10px;
        border-left-width: 3px;
        font-size: 11.5px;
        line-height: 1.4;
    }
}

/* Ge'ez-grondtekst is links-naar-rechts (anders dan Hebreeuws RTL) */
.col-hebrew .hebrew-text[lang="gez"] {
    direction: ltr;
    text-align: left;
    font-family: 'Noto Sans Ethiopic', 'Abyssinica SIL', serif;
}
/* Ge'ez overal met de gebundelde Ethiopische webfont — ook buiten de grondtekst-cel
   (klikbare woorden, lexicon-popup, andere pagina's), zodat het altijd leesbaar is. */
[lang="gez"], .geez-word, .geez-lex-popup [lang="gez"], .geez-translit + .geez-orig, .geez-orig {
    font-family: 'Noto Sans Ethiopic', 'Abyssinica SIL', serif;
}
/* Hebreeuws overal (grondtekst, klikbare woorden, lexicon-popup, woordenboek),
   zelf-gehoste font zodat het ook op iPad/iOS altijd rendert. */
[lang="he"], .hebrew, .lex-def heb, .lex-def [lang="he"], .lex-def .hebrew {
    font-family: 'Noto Serif Hebrew', 'SBL Hebrew', 'Ezra SIL', 'Times New Roman', serif;
}
/* Griekse grondtekst (NT + apocriefen/LXX) is links-naar-rechts */
.col-hebrew .hebrew-text[lang="grc"] {
    direction: ltr;
    text-align: left;
    font-family: 'SBL Greek', 'Cardo', 'Times New Roman', serif;
}
/* Latijnse grondtekst (4 Ezra) — links-naar-rechts, gewone serif */
.col-hebrew .hebrew-text[lang="la"] {
    direction: ltr;
    text-align: left;
    font-family: 'EB Garamond', 'Cardo', 'Times New Roman', serif;
    font-style: italic;
}
/* Ge'ez- en Latijnse woorden: klikbaar (lexicon-popup, js/geez-lexicon.js) */
.geez-word, .latin-word { cursor: pointer; border-radius: 3px; transition: background 0.15s; }
.geez-word:hover, .latin-word:hover { background: rgba(124, 58, 237, 0.14); }
.geez-lex-popup {
    position: absolute; z-index: 1000; max-width: 300px;
    background: #fff; border: 1px solid #d6c9f0; border-top: 3px solid #7c3aed;
    border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,0.18);
    padding: 12px 14px; font-family: var(--font-body);
}
.geez-lex-popup .geez-lex-word { font-size: 22px; color: #2a1a0a; margin-bottom: 2px; direction: ltr; }
.geez-lex-popup .geez-lex-translit { font-style: italic; color: #6b5d3f; font-size: 14px; margin-bottom: 6px; }
.geez-lex-popup .geez-lex-betekenis { color: #2c2c2c; font-size: 14px; line-height: 1.45; }
.geez-lex-popup .geez-lex-empty { color: #999; font-size: 12.5px; font-style: italic; }
body.dark .geez-lex-popup { background: #23233b; border-color: #4c1d95; }
body.dark .geez-lex-popup .geez-lex-word { color: #e0e0e0; }
body.dark .geez-lex-popup .geez-lex-betekenis { color: #d8d8d8; }

/* ===========================================================================
   Bijbel-zoek-overlay (js/search.js) — werkt op zowel index.html als lees.html
   =========================================================================== */
.search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 46, 66, 0.55);
    z-index: 1200;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 60px 16px 24px;
    overflow-y: auto;
    /* Scroll niet doorgeven aan de pagina eronder zodra deze laag op zijn
       eind zit. Aanvulling op de scroll-lock in search.js, niet de hoofdmoot:
       Safari kent dit pas vanaf 16. */
    overscroll-behavior: contain;
}
.search-overlay.hidden { display: none; }
.search-overlay .search-panel {
    background: #fff;
    width: 100%;
    max-width: 760px;
    border-radius: 10px;
    box-shadow: 0 12px 48px rgba(0,0,0,0.35);
    border-top: 4px solid var(--gold, #cba449);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 84px);
}
.search-overlay .search-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-light, #e8e4dc);
    background: #fff;
}
.search-overlay #search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 18px;
    font-family: var(--font-body, 'Fira Sans', sans-serif);
    padding: 6px 4px;
    color: #222;
    background: transparent;
}
.search-overlay #search-input::placeholder { color: #999; }
.search-overlay .search-close {
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: #888;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 4px;
}
.search-overlay .search-close:hover { color: var(--navy, #142e42); background: #f4f1ea; }

.search-overlay .search-testaments {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    align-items: center;
    padding: 9px 18px;
    border-bottom: 1px solid var(--border-light, #e8e4dc);
    background: #f4efe7;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--navy, #142e42);
}
.search-overlay .search-test {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
}
.search-overlay .search-test input { margin: 0; cursor: pointer; }
.search-overlay .search-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    align-items: center;
    padding: 10px 18px;
    border-bottom: 1px solid var(--border-light, #e8e4dc);
    background: #faf8f5;
    font-size: 12px;
    color: #555;
}
.search-overlay .search-cat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 2px 4px;
    user-select: none;
}
.search-overlay .search-cat input { margin: 0; cursor: pointer; }
.search-overlay .search-cat-actions {
    margin-left: auto;
    font-size: 11px;
    color: #888;
}
.search-overlay .search-cat-actions a {
    color: var(--gold, #cba449);
    text-decoration: none;
    font-weight: 500;
}
.search-overlay .search-cat-actions a:hover { text-decoration: underline; }

.search-overlay .search-results {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    background: #fff;
}
.search-overlay .search-empty {
    padding: 28px 18px;
    color: #888;
    font-style: italic;
    text-align: center;
    font-size: 14px;
}
.search-overlay .search-result {
    padding: 12px 18px;
    border-bottom: 1px solid #f0ece4;
    cursor: pointer;
    transition: background 0.12s;
}
.search-overlay .search-result:hover,
.search-overlay .search-result:focus { background: #f8f4ea; outline: none; }
.search-overlay .search-result-ref {
    font-size: 12px;
    font-weight: 600;
    color: var(--gold, #cba449);
    letter-spacing: 0.02em;
    margin-bottom: 3px;
}
.search-overlay .search-result-text {
    color: #333;
    font-size: 14px;
    line-height: 1.55;
}
.search-overlay .search-result-text mark {
    background: #fef3c7;
    color: inherit;
    padding: 0 2px;
    border-radius: 2px;
}
.search-overlay .search-more {
    padding: 12px 18px;
    text-align: center;
    color: #888;
    font-size: 12px;
    background: #faf8f5;
    border-top: 1px solid var(--border-light, #e8e4dc);
}

/* Mobiel: full-width overlay */
@media (max-width: 640px) {
    .search-overlay { padding: 0; }
    .search-overlay .search-panel {
        max-width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        border-top: none;
    }
    .search-overlay .search-categories { font-size: 11px; }
}

/* === Vers-highlight bij navigatie via zoekfunctie === */
@keyframes searchHighlightFade {
    0%   { background-color: #fef3c7; box-shadow: inset 3px 0 0 #f59e0b; }
    70%  { background-color: #fef3c7; box-shadow: inset 3px 0 0 #f59e0b; }
    100% { background-color: transparent; box-shadow: inset 3px 0 0 transparent; }
}
.search-highlight,
.search-highlight .verse-cell,
[data-verse].search-highlight {
    animation: searchHighlightFade 3s ease-out;
}
/* In de tabel-layout (index.html) zit data-verse op .verse-row; markeer
   ook visueel duidelijk de hele rij. */
.verse-row.search-highlight {
    background-color: #fef3c7 !important;
    box-shadow: inset 3px 0 0 #f59e0b;
    transition: background-color 1.5s ease-out, box-shadow 1.5s ease-out;
}
/* In lees.html zit data-verse op .verse-span; markeer de tekst rond het vers. */
.verse-span.search-highlight {
    background-color: #fef3c7;
    box-shadow: 0 0 0 4px #fef3c7;
    border-radius: 3px;
    transition: background-color 1.5s ease-out, box-shadow 1.5s ease-out;
}


/* === Concept / niet-gecontroleerd hoofdstuk markering === */
.chapter-concept-tag {
    display: inline-block;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #f59e0b;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
    margin-left: 8px;
    font-family: 'Fira Sans', sans-serif;
}

/* Inhoudsopgave / sidebar / mobile picker — niet-geverifieerde hoofdstukken */
.tree-ch-btn.unverified,
.mp-item.unverified {
    color: #92400e;
    background: rgba(254,243,199,0.4);
}
.tree-ch-btn.unverified:hover,
.mp-item.unverified:hover {
    background: rgba(254,243,199,0.7);
}
.tree-ch-btn.unverified::after,
.mp-item.unverified::after {
    content: "•";
    color: #f59e0b;
    margin-left: 2px;
    font-weight: 700;
}
/* Mobiele picker: GEEN 'nog niet nagekeken'-markering op hoofdstukken
   (de gele achtergrond + • verwarren — zag eruit als 'geblokkeerd'). */
.mp-item.unverified { color: inherit; background: none; }
.mp-item.unverified:hover { background: rgba(203,164,73,0.08); }
.mp-item.unverified::after { content: none; }

/* Audio-container containers verbergen op hoofdstukken zonder voorlezing */
.chf-center.hidden { display: none; }
.mfn-audio.hidden { display: none; }

/* === Quickfilter-knoppen bovenin (in plaats van checkboxen) === */
.quickfilter-btn {
    display: inline-block;
    padding: 5px 14px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--navy);
    border-radius: 16px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    margin-right: 8px;
    transition: all 0.15s;
}
.quickfilter-btn:hover { border-color: var(--gold); color: var(--gold); }
.quickfilter-btn.is-on,
.quickfilter-btn[aria-pressed="true"] {
    background: var(--gold);
    color: #fff;
    border-color: var(--gold);
}

/* === Brede zoekbalk in topnav (desktop) === */
.topnav-search-input {
    flex: 1 1 320px;
    max-width: 480px;
    min-width: 200px;
    margin: 0 16px;
    padding: 7px 14px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(203,164,73,0.35);
    border-radius: 18px;
    color: #fff;
    font-family: 'Fira Sans', sans-serif;
    font-size: 14px;
    outline: none;
    transition: background 0.15s, border-color 0.15s;
}
.topnav-search-input::placeholder { color: rgba(255,255,255,0.55); }
.topnav-search-input:hover { background: rgba(255,255,255,0.16); border-color: rgba(203,164,73,0.55); }
.topnav-search-input:focus { background: rgba(255,255,255,0.18); border-color: var(--gold); }

/* Op mobiel verbergen — daar blijft de search-icon-knop staan */
@media (max-width: 768px) {
    .topnav-search-input { display: none; }
}
@media (min-width: 769px) and (max-width: 1180px) {
    .topnav-search-input { display: none; }
}

/* === Mobiele copy-toolbar — apart boven de footer-nav, compacter === */
@media (max-width: 768px) {
    #copy-toolbar {
        left: 8px;
        right: 8px;
        transform: none;
        max-width: none;
        padding: 8px 10px;
        gap: 6px;
        font-size: 12px;
        flex-wrap: wrap;
        justify-content: center;
        /* footer-nav (56px) + safe-area + 8px gap */
        bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 8px);
    }
    #copy-count {
        min-width: 0;
        flex-basis: 100%;
        text-align: center;
        font-size: 11px;
        opacity: 0.85;
        margin-bottom: 2px;
    }
    #copy-toolbar button {
        padding: 6px 10px;
        font-size: 12px;
        flex: 0 1 auto;
    }
    #copy-toolbar #vers-share svg,
    #copy-toolbar #vers-image svg {
        width: 13px;
        height: 13px;
    }
    /* Verberg "kopiëren met opmaak" tekst, alleen icon-style afkortingen */
    #copy-toolbar #vers-share { padding: 6px 10px; }
}

/* Heel smal scherm: nog compacter — alle 4 functies blijven */
@media (max-width: 420px) {
    #copy-toolbar { padding: 6px 8px; gap: 4px; }
    #copy-toolbar button { padding: 6px 8px; font-size: 11px; }
}

/* === Mobiel: extra kolommen ALTIJD onder OV2026 (block-layout), niet ernaast ===
   Override 'display: grid !important' uit reading-mode-block (regel ~2655)
   Plus: compactere vers-spacing op smal scherm. */
@media (max-width: 768px) {
    #verses-container .verse-row,
    #content.reading-mode .verse-row,
    #content.reading-mode.layout-eronder .verse-row {
        display: block !important;
        padding: 1px 14px 1px;
        margin-bottom: 0 !important;
        line-height: 1.4 !important;
        gap: 0;
    }
    #verses-container .verse-num {
        display: inline;
        margin-right: 4px;
    }
    #verses-container .verse-cell {
        display: block;
        margin-top: 4px;
        padding-left: 0;
        border-left: none;
        flex: none;
        min-width: 0;
        max-width: 100%;
    }
    /* OV2026 kolom direct na nummer, geen extra marge */
    #verses-container .verse-cell.col-2026 {
        margin-top: 0;
        display: inline;
    }
    /* Extra kolommen (diff, sv1888, etc.) krijgen labeltje voor duidelijkheid */
    #verses-container .verse-cell.col-diff::before {
        content: 'Verschillen SV-OSV';
        display: block;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--teal);
        font-weight: 600;
        margin-top: 8px;
        margin-bottom: 4px;
    }
    #verses-container .verse-cell.col-sv1888::before { content: 'SV 1888'; display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--teal); font-weight: 600; margin-top: 8px; margin-bottom: 4px; }
    #verses-container .verse-cell.col-1637::before { content: 'SV 1637'; display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--teal); font-weight: 600; margin-top: 8px; margin-bottom: 4px; }
    #verses-container .verse-cell.col-margin2026::before { content: 'OSV kanttekeningen'; display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--teal); font-weight: 600; margin-top: 8px; margin-bottom: 4px; }
    #verses-container .verse-cell.col-hebrew::before { content: 'Hebr/Grieks'; display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--teal); font-weight: 600; margin-top: 8px; margin-bottom: 4px; }
    #verses-container .verse-cell.col-noteDiff::before { content: 'Verschillen KT'; display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--teal); font-weight: 600; margin-top: 8px; margin-bottom: 4px; }
}

/* ========================================================================
   DONKER THEMA — uitgebreide overrides
   Hoge specificiteit + !important om hardcoded inline-styles in HTML te overrulen.
   Brand-kleuren (--navy, --gold) blijven herkenbaar; alleen achtergronden/tekst
   en grijswaarden worden geïnverteerd.
   ======================================================================== */

:root[data-theme="donker"] {
    color-scheme: dark;
}

/* Hoofd-layout */
:root[data-theme="donker"] body,
:root[data-theme="donker"] #app-container,
:root[data-theme="donker"] #main-wrapper,
:root[data-theme="donker"] #content,
:root[data-theme="donker"] main {
    background: var(--bg-page) !important;
    color: var(--text-primary);
}

/* Topnav blijft navy (al donker, herkenbaar brand) — geen wijziging */

/* Linker sidebar (boeknavigatie) — al navy, behoud */

/* Boek-intro + chapter-intro */
:root[data-theme="donker"] #book-intro,
:root[data-theme="donker"] #chapter-intro {
    color: var(--text-secondary) !important;
    background: rgba(255,255,255,0.02) !important;
}

/* Vers-rij + alle vers-cellen */
:root[data-theme="donker"] #verses-container,
:root[data-theme="donker"] .verse-row {
    color: var(--text-primary) !important;
}
:root[data-theme="donker"] .verse-row:hover {
    background: rgba(255,255,255,0.03) !important;
}
:root[data-theme="donker"] .verse-cell,
:root[data-theme="donker"] .text-cell,
:root[data-theme="donker"] .verse-text,
:root[data-theme="donker"] [class*="col-"] {
    color: var(--text-primary);
}
:root[data-theme="donker"] .verse-num {
    color: var(--text-muted) !important;
}

/* Kolom-headers */
:root[data-theme="donker"] .column-headers {
    background: var(--bg-surface-alt) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-default) !important;
}
:root[data-theme="donker"] .column-headers > div {
    color: var(--text-secondary) !important;
}

/* Content topbar (h2 chapter-title) */
:root[data-theme="donker"] #content-topbar,
:root[data-theme="donker"] #content-topbar #chapter-title {
    color: var(--text-primary) !important;
}
:root[data-theme="donker"] #chapter-title {
    color: var(--text-primary) !important;
}

/* Chapter footer (audio/nav) */
:root[data-theme="donker"] #chapter-footer {
    background: var(--bg-surface) !important;
    border-top-color: var(--border-default) !important;
    color: var(--text-primary) !important;
}

/* Knoppen — algemeen */
:root[data-theme="donker"] button:not(.topnav-hamburger):not(#topnav-hamburger):not([class*="navy"]) {
    background: var(--bg-surface-alt);
    color: var(--text-primary);
    border-color: var(--border-default);
}
:root[data-theme="donker"] button:hover {
    background: var(--bg-elevated);
}
:root[data-theme="donker"] .quickfilter-btn {
    background: var(--bg-surface-alt) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-default) !important;
}
:root[data-theme="donker"] .quickfilter-btn.is-on,
:root[data-theme="donker"] .quickfilter-btn[aria-pressed="true"] {
    background: var(--gold) !important;
    color: var(--bg-page) !important;
}

/* Inputs/zoekvelden */
:root[data-theme="donker"] input[type="text"],
:root[data-theme="donker"] input[type="search"],
:root[data-theme="donker"] input[type="email"],
:root[data-theme="donker"] textarea,
:root[data-theme="donker"] select {
    background: var(--bg-surface-alt) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-default) !important;
}
:root[data-theme="donker"] input::placeholder,
:root[data-theme="donker"] textarea::placeholder {
    color: var(--text-muted) !important;
}

/* Modals/popups met hardcoded background:#fff */
:root[data-theme="donker"] div[style*="background:#fff"],
:root[data-theme="donker"] div[style*="background: #fff"] {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
}
:root[data-theme="donker"] div[style*="color:#333"] {
    color: var(--text-primary) !important;
}
:root[data-theme="donker"] div[style*="color:#666"],
:root[data-theme="donker"] div[style*="color:#555"],
:root[data-theme="donker"] span[style*="color:#666"],
:root[data-theme="donker"] span[style*="color:#555"] {
    color: var(--text-secondary) !important;
}

/* Begrippen-popover */
:root[data-theme="donker"] #begrip-popover {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-default) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5) !important;
}
:root[data-theme="donker"] #begrip-woord {
    color: var(--gold) !important;
}
:root[data-theme="donker"] #begrip-uitleg,
:root[data-theme="donker"] #begrip-cat,
:root[data-theme="donker"] #begrip-ref {
    color: var(--text-primary) !important;
}

/* KT-popup (kanttekeningen) */
:root[data-theme="donker"] .kt-popup,
:root[data-theme="donker"] [class*="kt-"][class*="popup"] {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-default) !important;
}

/* Phrase-diff (verschillen) */
:root[data-theme="donker"] .phrase-removed { color: #ff7a85 !important; background: rgba(255,122,133,0.10) !important; }
:root[data-theme="donker"] .phrase-added { color: #7ed27a !important; background: rgba(126,210,122,0.10) !important; }

/* Verse-row selection — geen background, alleen underline (afgehandeld in .verse-selected hierboven) */
:root[data-theme="donker"] .verse-row.selected,
:root[data-theme="donker"] .verse-row[data-selected="true"] {
    background: transparent !important;
}

/* Audio-player */
:root[data-theme="donker"] #audio-scrubber {
    background: var(--bg-surface-alt) !important;
}

/* Hr en dividers */
:root[data-theme="donker"] hr { border-color: var(--border-default) !important; }

/* Tabel-styling (statistieken / principes pagina) */
:root[data-theme="donker"] table { background: transparent !important; color: var(--text-primary) !important; }
:root[data-theme="donker"] table th { background: var(--bg-surface-alt) !important; color: var(--text-primary) !important; }
:root[data-theme="donker"] table td { border-color: var(--border-default) !important; }

/* Statistieken stat-cards */
:root[data-theme="donker"] .stat-card { background: var(--bg-surface) !important; color: var(--text-primary) !important; border-color: var(--border-default) !important; }
:root[data-theme="donker"] .stat-number { color: var(--text-primary) !important; }
:root[data-theme="donker"] .stat-label { color: var(--text-secondary) !important; }

/* Principes-card */
:root[data-theme="donker"] .principe-card { background: var(--bg-surface) !important; color: var(--text-primary) !important; border-color: var(--border-default) !important; }
:root[data-theme="donker"] .principe-header { color: var(--text-primary) !important; }
:root[data-theme="donker"] .principe-count { color: var(--text-secondary) !important; }
:root[data-theme="donker"] .principes-summary { background: var(--bg-surface) !important; color: var(--text-primary) !important; }
/* Categorie-badges leesbaar maken in donker thema: zachtere tinten */
:root[data-theme="donker"] .cat-N { background: rgba(96,165,250,0.16) !important; color: #93c5fd !important; }
:root[data-theme="donker"] .cat-A { background: rgba(52,211,153,0.16) !important; color: #6ee7b7 !important; }
:root[data-theme="donker"] .cat-G { background: rgba(251,191,36,0.16) !important; color: #fcd34d !important; }
:root[data-theme="donker"] .cat-W { background: rgba(251,146,60,0.16) !important; color: #fdba74 !important; }
:root[data-theme="donker"] .cat-V { background: rgba(167,139,250,0.32) !important; color: #ddd0ff !important; }
:root[data-theme="donker"] .cat-S { background: rgba(244,114,182,0.16) !important; color: #f9a8d4 !important; }
:root[data-theme="donker"] .cat-O { background: rgba(156,163,175,0.16) !important; color: #d1d5db !important; }

/* H2/h3 onder pagina */
:root[data-theme="donker"] h1, :root[data-theme="donker"] h2, :root[data-theme="donker"] h3, :root[data-theme="donker"] h4 { color: var(--text-primary); }
:root[data-theme="donker"] .subtitle { color: var(--text-muted) !important; }
:root[data-theme="donker"] em { color: inherit; }

/* AI-concept banner — al een gele badge, blijft */

/* Page-paginas (over-ov/uitgangspunten/etc.) */
:root[data-theme="donker"] .page,
:root[data-theme="donker"] .page p,
:root[data-theme="donker"] .page li { color: var(--text-primary); }
:root[data-theme="donker"] .page p { color: var(--text-primary); }
:root[data-theme="donker"] .highlight {
    background: rgba(203,164,73,0.08) !important;
    color: var(--text-primary) !important;
}

/* Topnav-link kleuren al via rgba — blijven werken */

/* Span/em inline blokken in kanttekeningen */
:root[data-theme="donker"] .kt-explainer { color: var(--text-secondary) !important; }

/* ========================================================================
   DONKER THEMA — agressieve "alles zwart" pass voor Tekst-pagina (desktop + mobile)
   ======================================================================== */

/* Content-topbar (sticky balk met boek/hoofdstuk-titel) */
:root[data-theme="donker"] #content-topbar {
    background: var(--bg-surface) !important;
    border-bottom-color: var(--border-default) !important;
    color: var(--text-primary) !important;
}
:root[data-theme="donker"] #content-topbar #chapter-title { color: var(--text-primary) !important; }

/* Hoofd-nav-balken (book-nav, chapter-nav) */
:root[data-theme="donker"] #book-nav,
:root[data-theme="donker"] #chapter-nav,
:root[data-theme="donker"] .nav-bar,
:root[data-theme="donker"] #app-header {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-default) !important;
}
:root[data-theme="donker"] .nav-bar button,
:root[data-theme="donker"] .nav-bar a {
    background: transparent !important;
    color: var(--text-primary) !important;
}
:root[data-theme="donker"] .nav-bar button:hover,
:root[data-theme="donker"] .nav-bar a:hover {
    background: var(--bg-surface-alt) !important;
}

/* Sidebar (links) — momenteel navy; in donker mag het iets donkerder/contrast */
:root[data-theme="donker"] #sidebar {
    background: var(--bg-surface-alt) !important;
    color: var(--text-primary) !important;
}
:root[data-theme="donker"] #sidebar #sidebar-tree,
:root[data-theme="donker"] #sidebar input,
:root[data-theme="donker"] #sidebar button {
    color: var(--text-primary) !important;
}

/* Mobile-topbar */
:root[data-theme="donker"] #mobile-topbar {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-default) !important;
}
:root[data-theme="donker"] #mobile-topbar button,
:root[data-theme="donker"] .mobile-pick-btn,
:root[data-theme="donker"] .mobile-toggle-btn,
:root[data-theme="donker"] #mobile-opties-btn,
:root[data-theme="donker"] #mobile-book-btn,
:root[data-theme="donker"] #mobile-kt-btn {
    background: var(--bg-surface-alt) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-default) !important;
}

/* Mobile picker overlay */
:root[data-theme="donker"] #mobile-picker,
:root[data-theme="donker"] .mp-overlay {
    background: var(--bg-page) !important;
    color: var(--text-primary) !important;
}
:root[data-theme="donker"] .mp-header {
    background: var(--bg-surface) !important;
    border-bottom-color: var(--border-default) !important;
}
:root[data-theme="donker"] .mp-title { color: var(--text-primary) !important; }
:root[data-theme="donker"] .mp-back,
:root[data-theme="donker"] .mp-close { color: var(--text-primary) !important; }
:root[data-theme="donker"] .mp-body { background: var(--bg-page) !important; }
:root[data-theme="donker"] .mp-body button,
:root[data-theme="donker"] .mp-body a {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-default) !important;
}

/* Toolbar (boven, opslaan/exporteer/etc.) */
:root[data-theme="donker"] #toolbar {
    background: var(--bg-surface) !important;
    border-color: var(--border-default) !important;
}
:root[data-theme="donker"] #toolbar button {
    background: var(--bg-surface-alt) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-default) !important;
}

/* Progress-bar */
:root[data-theme="donker"] #progress-bar {
    background: var(--bg-surface-alt) !important;
}
:root[data-theme="donker"] #progress-fill {
    background: var(--gold) !important;
}
:root[data-theme="donker"] #progress-text {
    color: var(--text-secondary) !important;
}

/* Chapter footer (audio etc.) — balk blijft transparant; alleen de knoppen
   krijgen een donkere achtergrond. */
:root[data-theme="donker"] #chapter-footer {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}
:root[data-theme="donker"] .chf-btn,
:root[data-theme="donker"] .chf-play {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-default) !important;
}

/* Algemene catch-all: alles wat inline parchment-bg heeft */
:root[data-theme="donker"] [style*="#f8f6f2"],
:root[data-theme="donker"] [style*="#faf8f3"],
:root[data-theme="donker"] [style*="#f5f2ed"],
:root[data-theme="donker"] [style*="#e5e1d8"] {
    background-color: var(--bg-surface) !important;
}

/* Inline #fff backgrounds (modals, kaarten) */
:root[data-theme="donker"] [style*="background:#fff"],
:root[data-theme="donker"] [style*="background: #fff"],
:root[data-theme="donker"] [style*="background:white"],
:root[data-theme="donker"] [style*="background: white"] {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
}

/* Tekst color overrides voor inline grijs/donker */
:root[data-theme="donker"] [style*="color:#333"],
:root[data-theme="donker"] [style*="color: #333"],
:root[data-theme="donker"] [style*="color:#000"],
:root[data-theme="donker"] [style*="color:#142e42"] {
    color: var(--text-primary) !important;
}
:root[data-theme="donker"] [style*="color:#666"],
:root[data-theme="donker"] [style*="color:#555"],
:root[data-theme="donker"] [style*="color:#777"],
:root[data-theme="donker"] [style*="color:#888"] {
    color: var(--text-secondary) !important;
}

/* Topnav blijft navy — al donker. Voeg lichte accent voor zichtbaarheid in donker thema. */
:root[data-theme="donker"] #topnav {
    border-bottom: 1px solid var(--border-default);
}

/* === DONKER THEMA — Topnav volledig zwart === */
:root[data-theme="donker"] #topnav {
    background: #000000 !important;     /* echt zwart */
    color: #e6e3dc !important;
    border-bottom: 2px solid var(--gold) !important;
}
:root[data-theme="donker"] .topnav-brand,
:root[data-theme="donker"] .topnav-brand a,
:root[data-theme="donker"] .topnav-links a,
:root[data-theme="donker"] .topnav-subtitle {
    color: #e6e3dc !important;
}
:root[data-theme="donker"] .topnav-links a:hover {
    color: #fff !important;
}
:root[data-theme="donker"] .topnav-version a {
    color: var(--gold) !important;
}
:root[data-theme="donker"] .topnav-search,
:root[data-theme="donker"] .topnav-theme {
    color: rgba(255,255,255,0.85) !important;
}
:root[data-theme="donker"] .topnav-search:hover,
:root[data-theme="donker"] .topnav-theme:hover {
    background: rgba(255,255,255,0.10) !important;
    color: #fff !important;
}
:root[data-theme="donker"] .topnav-search-input {
    background: rgba(255,255,255,0.05) !important;
    color: #e6e3dc !important;
    border-color: rgba(255,255,255,0.10) !important;
}
:root[data-theme="donker"] .topnav-search-input::placeholder {
    color: rgba(255,255,255,0.45) !important;
}

/* Hamburger menu spans (witte balkjes) */
:root[data-theme="donker"] .topnav-hamburger span {
    background: #fff !important;
}

/* Pas pagina-body op alle pagina's (over-ov, statistieken, etc.) */
:root[data-theme="donker"] .page,
:root[data-theme="donker"] .stats-page,
:root[data-theme="donker"] .page p,
:root[data-theme="donker"] .page li,
:root[data-theme="donker"] .page h1,
:root[data-theme="donker"] .page h2,
:root[data-theme="donker"] .page h3 {
    color: var(--text-primary) !important;
}
:root[data-theme="donker"] .page a { color: var(--gold) !important; }

/* Hero op over-ov.html — donker thema: GEEN brightness-dimming (afbeelding helder
   houden; alleen de gradient onderaan in over-ov.html fadet naar donker). */
/* Hero-citaat + wordmark liggen op het LICHTE schilderij → ook in dark mode
   donker (navy) houden met lichte schaduw, anders vallen ze weg. */
:root[data-theme="donker"] .hero-quote,
:root[data-theme="donker"] .hero-quote em { color: #000 !important; font-weight: 700 !important; text-shadow: 0 1px 4px rgba(255,255,255,0.75) !important; }
:root[data-theme="donker"] .hero-mark-name,
:root[data-theme="donker"] .hero-mark-id { color: var(--navy, #142e42) !important; text-shadow: 0 1px 3px rgba(255,255,255,0.6) !important; }
:root[data-theme="donker"] .hero-quote .ref { color: #000 !important; font-weight: 700 !important; text-shadow: 0 1px 4px rgba(255,255,255,0.8) !important; }

/* Inline `style="color:#fff"` op donker thema — laat staan (witte tekst op donker) */

/* === Wiki page dark mode === */
:root[data-theme="donker"] .wiki-shell { background: var(--bg-page) !important; }
:root[data-theme="donker"] .wiki-sidebar {
    background: var(--bg-surface) !important;
    border-color: var(--border-default) !important;
    color: var(--text-primary) !important;
}
:root[data-theme="donker"] .wiki-sidebar a {
    color: var(--text-primary) !important;
}
:root[data-theme="donker"] .wiki-sidebar a:hover {
    background: rgba(203,164,73,0.12) !important;
}
:root[data-theme="donker"] .wiki-sidebar a.active {
    background: rgba(203,164,73,0.15) !important;
    color: var(--gold) !important;
    border-left-color: var(--gold) !important;
}
:root[data-theme="donker"] .wiki-sidebar .section-label {
    color: var(--gold) !important;
}
:root[data-theme="donker"] .wiki-iframe {
    background: var(--bg-page) !important;
    border-color: var(--border-default) !important;
}
:root[data-theme="donker"] iframe {
    filter: invert(0.94) hue-rotate(180deg) brightness(1.0);
    background: var(--bg-page) !important;
}

/* === Site-footer dark mode (Linkedin etc.) === */
:root[data-theme="donker"] .site-footer,
:root[data-theme="donker"] .site-footer-inner,
:root[data-theme="donker"] footer {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-top-color: var(--border-default) !important;
}
:root[data-theme="donker"] .site-footer a,
:root[data-theme="donker"] footer a {
    color: var(--gold) !important;
}
:root[data-theme="donker"] .site-footer-brand,
:root[data-theme="donker"] .site-footer-tag,
:root[data-theme="donker"] .site-footer-meta {
    color: var(--text-secondary) !important;
}
:root[data-theme="donker"] .site-footer-mark {
    color: var(--gold) !important;
}

/* Contact-pagina specifiek: alle witte tekstkleur in form/inline blijft wit op donker → herstel naar gold of muted */
:root[data-theme="donker"] [style*="color:#fff"][href*="linkedin"],
:root[data-theme="donker"] [style*="color: #fff"][href*="linkedin"],
:root[data-theme="donker"] [style*="color:white"][href*="linkedin"] {
    color: var(--gold) !important;
}

/* Algemene catch: alle a[href*=linkedin/twitter/etc] op contact-pagina → gold ipv wit */
:root[data-theme="donker"] a[href*="linkedin.com"],
:root[data-theme="donker"] a[href*="github.com"],
:root[data-theme="donker"] a[href*="twitter.com"],
:root[data-theme="donker"] a[href*="mailto:"] {
    color: var(--gold) !important;
}

/* === Mobiele leeservaring: extra verfijningen === */
@media (max-width: 768px) {
    /* Grotere leestekst */
    #content.reading-mode .col-2026 { font-size: 19px; line-height: 1.9; }
    /* 'Verschillen SV-OSV'-knop verbergen → groter leesvenster */
    #quick-diff-btn { display: none !important; }
    /* Verstekst mag onder de zwevende navigatieknoppen doorlopen */
    #content { padding-bottom: 8px; }
}
/* Vorig/volgend-cirkels in dark mode: donkere glas-achtergrond i.p.v. wit */
:root[data-theme="donker"] #mobile-prev-btn,
:root[data-theme="donker"] #mobile-next-btn {
    background: rgba(18,18,18,0.55) !important;
    border-color: var(--gold) !important;
    color: var(--gold) !important;
}
/* Play-knop in dark mode: gouden omranding (donkere vulling, gouden driehoek). */
:root[data-theme="donker"] .mfn-play {
    background: #161616 !important;   /* ondoorzichtig, niet semi-transparant */
    border: 2px solid var(--gold) !important;
    color: var(--gold) !important;
}

/* === Typografie-uniformering ===
   Merknaam, hoofdstuktitels, boeknamen en panel-koppen gebruiken nu één rustige
   cursief (EB Garamond italic) i.p.v. het sterk cursieve Allura — minder rommelig.
   (Het decoratieve Allura blijft alleen op de over-ov hero.) */
.topnav-brand,
#chapter-title,
.header-title,
.mp-title,
.opt-section,
.opt-group-label,
.tree-book-label {
    font-family: var(--font-serif, 'EB Garamond', Georgia, serif) !important;
    font-style: italic !important;
}
/* Mobiel: de (lege) #content-topbar verbergen — gaf een grijze balk tussen de
   mobiele boek/hoofdstuk-bar en de tekst; boek+hoofdstuk staan al in de topbar. */
@media (max-width: 768px) {
    #content-topbar { display: none !important; }
}

/* === Versnummers uit → verzen vloeien als doorlopende tekst (dichter op elkaar) ===
   Alleen in de standaard "naast"-leesmodus; de "eronder"-layout (meerdere edities)
   blijft per vers gestapeld. */
/* Zonder versnummers: elk vers tóch op een eigen regel (per vers nieuwe regel). */
body.hide-verse-numbers #content.reading-mode:not(.layout-eronder) .verse-row {
    display: flex;
    padding: 1px 24px;
}
body.hide-verse-numbers #content.reading-mode:not(.layout-eronder) .verse-row .col-2026 {
    display: block;
}
body.hide-verse-numbers #content.reading-mode:not(.layout-eronder) .verse-row::after {
    content: none;
}

/* Stem (Man/Vrouw) en snelheid (1×) staan nu in het opties-paneel → uit de speler. */
#audio-speed, #audio-voice, #audio-speed-mobile, #audio-voice-mobile { display: none !important; }

/* Mobiele audio-scrubber: sleepbare voortgangsbalk bovenin de footer-nav. */
.mfn-scrubber {
    position: absolute;
    left: 16px; right: 16px; top: -4px;
    width: auto; margin: 0;
    pointer-events: auto;
    -webkit-appearance: none; appearance: none;
    height: 5px; border-radius: 3px;
    background: rgba(203,164,73,0.35);
    accent-color: var(--gold);
    cursor: pointer;
}
.mfn-scrubber.hidden { display: none; }
.mfn-scrubber::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--gold); box-shadow: 0 1px 3px rgba(0,0,0,0.3); cursor: pointer; }
.mfn-scrubber::-moz-range-thumb { width: 16px; height: 16px; border: none; border-radius: 50%; background: var(--gold); cursor: pointer; }

/* ===========================================================================
   DARK MODE — GEDEELDE, OVERERFBARE REGELS (één centrale plek)
   Nieuwe pagina's die deze klassen gebruiken worden vanzelf donker; geen
   per-pagina dark-CSS meer nodig. Liever var(--bg-surface) dan #fff in pagina's.
   =========================================================================== */
/* Zoek-overlay */
:root[data-theme="donker"] .search-overlay .search-panel,
:root[data-theme="donker"] .search-overlay .search-header,
:root[data-theme="donker"] .search-overlay .search-results { background: var(--bg-surface) !important; }
:root[data-theme="donker"] .search-overlay .search-categories,
:root[data-theme="donker"] .search-overlay .search-more { background: var(--bg-surface-alt) !important; color: var(--text-secondary) !important; }
:root[data-theme="donker"] .search-overlay .search-testaments { background: var(--bg-elevated) !important; color: var(--text-primary) !important; border-color: var(--border-default) !important; }
:root[data-theme="donker"] .search-overlay .search-header { border-color: var(--border-default) !important; }
:root[data-theme="donker"] .search-overlay #search-input,
:root[data-theme="donker"] .search-overlay input[type="text"],
:root[data-theme="donker"] .search-overlay input[type="search"] { color: var(--text-primary) !important; background: var(--bg-surface) !important; }
:root[data-theme="donker"] .search-overlay .search-result { border-color: var(--border-soft) !important; color: var(--text-primary) !important; }
:root[data-theme="donker"] .search-overlay .search-result-text { color: var(--text-primary) !important; }
:root[data-theme="donker"] .search-overlay .search-result:hover,
:root[data-theme="donker"] .search-overlay .search-result:focus { background: var(--bg-elevated) !important; }
:root[data-theme="donker"] .search-overlay .search-close:hover { background: var(--bg-elevated) !important; color: var(--text-primary) !important; }
:root[data-theme="donker"] .search-overlay .search-category,
:root[data-theme="donker"] .search-overlay .search-cat { color: var(--text-secondary) !important; }

/* Hamburger-uitklapmenu (mobiel) → zwart i.p.v. wit */
:root[data-theme="donker"] #topnav-links.open,
:root[data-theme="donker"] .topnav-links.open { background: #000 !important; border-color: var(--border-default) !important; }
:root[data-theme="donker"] #topnav-links.open a { color: var(--text-primary) !important; }

/* Generieke content-kaarten/boxen: vang hardgecodeerde witte achtergronden op. */
:root[data-theme="donker"] .contact-card,
:root[data-theme="donker"] .toc,
:root[data-theme="donker"] .codex-card,
:root[data-theme="donker"] .card,
:root[data-theme="donker"] .info-card,
:root[data-theme="donker"] .ms-table { background: var(--bg-surface) !important; border-color: var(--border-default) !important; color: var(--text-primary) !important; }

/* === Engelen-citaten — BLAUW ===
   Woorden van een (gewone) engel krijgen een blauwe citatiekleur. De
   'Engel des HEEREN' in het OT is God zelf → die houdt de rode .god-speaks. */
span.angel-speaks, .angel-speaks {
    color: #1d4ed8 !important;
    font-style: italic !important;
    font-weight: bold !important;
    display: inline !important;
}
.angel-speaks::before { content: '\201C'; }
.angel-speaks::after { content: '\201D'; }
:root[data-theme="donker"] .angel-speaks,
:root[data-theme="donker"] .angel-speaks i { color: #7ab0ff !important; }
#content.reading-mode .verse-row:first-of-type .col-2026 .angel-speaks::before { content: none; }
body.citaten-uit .angel-speaks,
body.citaten-uit .angel-speaks i { color: inherit !important; font-style: normal !important; font-weight: inherit !important; }

/* Boekvolgorde-dropdown in de mobiele boekpicker */
.mp-order {
    width: 100%; box-sizing: border-box; margin: 0 0 12px;
    padding: 10px 12px; border: 1px solid var(--border, #e5e1d8);
    border-radius: 8px; font-family: var(--font-body); font-size: 14px;
    background: var(--bg-surface, #fff); color: var(--text-primary, #142e42);
}
:root[data-theme="donker"] .mp-order { background: var(--bg-surface) !important; color: var(--text-primary) !important; border-color: var(--border-default) !important; }

/* Pericoop-kopjes (NBG-stijl indeling, eigen koppen) */
.pericope-heading {
    font-family: var(--font-serif, 'EB Garamond', Georgia, serif);
    font-style: italic;
    font-weight: 600;
    font-size: 1.18em;
    color: var(--gold, #cba449);
    margin: 24px 24px 6px;
    line-height: 1.3;
}
body.pericopen-uit .pericope-heading { display: none; }
/* Dyslexie-modus: pericoop-kopjes groter */
body.dyslexia-mode .pericope-heading { font-size: 1.5em; line-height: 1.4; }

/* Vers in focus: het vers ongeveer in het midden van het scherm (leeshulp) */
.verse-row.verse-focus .col-2026 {
    background: rgba(203,164,73,0.13);
    border-radius: 4px;
    box-shadow: -3px 0 0 var(--gold, #cba449);
    transition: background 0.25s ease;
}
:root[data-theme="donker"] .verse-row.verse-focus .col-2026 { background: rgba(203,164,73,0.18); }

/* Aangesproken vers (vanaf Onderwerpen): korte oplichtende markering */
@keyframes verse-flash-anim {
    0% { background: rgba(203,164,73,0.45); }
    100% { background: transparent; }
}
.verse-row.verse-flash { animation: verse-flash-anim 1.7s ease-out; border-radius: 4px; }

/* Hoofdstuknummers verbergen (instelling) */
body.hoofdstuknummers-uit #chapter-title,
body.hoofdstuknummers-uit #content-topbar #chapter-title,
body.hoofdstuknummers-uit .chapter-separator { display: none !important; }

/* Hoofdstukinleiding inline in de tekstkolom (instelling) */
.chapter-intro-inline { display: none; }
body.show-chapter-intro .chapter-intro-inline {
    display: block;
    font-family: var(--font-serif, 'EB Garamond', Georgia, serif);
    font-style: italic;
    font-size: 0.96em;
    line-height: 1.5;
    color: var(--text-secondary, #6b6b6b);
    margin: 4px 24px 18px;
    padding-bottom: 12px;
    border-bottom: 1px dotted var(--border, #e0dccf);
}
@media (max-width: 640px) { body.show-chapter-intro .chapter-intro-inline { margin: 4px 16px 14px; } }

/* Boekinleiding inline in de tekstkolom (instelling, alleen bij hoofdstuk 1) */
.book-intro-inline { display: none; }
body.show-book-intro .book-intro-inline {
    display: block;
    font-family: var(--font-serif, 'EB Garamond', Georgia, serif);
    font-size: 0.97em;
    line-height: 1.55;
    color: var(--text-secondary, #5b5b5b);
    margin: 6px 24px 16px;
    padding-bottom: 12px;
    border-bottom: 1px dotted var(--border, #e0dccf);
}
.book-intro-inline .book-intro-label { font-weight: 700; color: var(--gold, #cba449); font-style: normal; }
@media (max-width: 640px) { body.show-book-intro .book-intro-inline { margin: 6px 16px 14px; } }
:root[data-theme="donker"] body.show-book-intro .book-intro-inline { color: var(--text-secondary, #aaa); }

/* Doorlopend lezen: vorige/volgende-hoofdstuk-knoppen BLIJVEN zichtbaar (desktop
   én mobiel). Ze navigeren relatief t.o.v. het hoofdstuk waar je naartoe gescrold
   bent (Navigation.currentChapter wordt via de scroll-spy bijgewerkt). */

/* Doorlopend lezen: geen footer-strook — de player zweeft vóór de tekst */
body.doorlopend-aan #chapter-footer {
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    margin-top: 0;
    justify-content: center;
    pointer-events: none;   /* lege strook vangt geen klikken; tekst blijft selecteerbaar */
}
body.doorlopend-aan #chapter-footer .chf-center { pointer-events: auto; }
/* Verloop onderaan naar de paginakleur (wit in licht, zwart in donker) zodat
   de zwevende player goed leesbaar is. */
body.doorlopend-aan #chapter-footer::after {
    content: '';
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: 140px;
    background: linear-gradient(to bottom, transparent, var(--bg-page) 75%);
    pointer-events: none;
    z-index: -1;
}

/* Doorlopend lezen: scheiding tussen aaneengeschoven hoofdstukken */
.chapter-separator {
    font-family: var(--font-cursive, 'Tangerine', cursive);
    font-size: 1.7em;
    color: var(--gold, #cba449);
    text-align: center;
    margin: 40px auto 14px;
    padding-top: 22px;
    max-width: 680px;
    border-top: 1px solid var(--border, #e7e1d4);
}
@media (max-width: 640px) { .chapter-separator { margin: 28px 16px 10px; } }

/* Boek-datering (schrijftijd + oudste handschrift) bovenin */
.book-dating {
    font-family: var(--font-body);
    font-size: 12.5px; line-height: 1.5;
    color: #6b5d3f;
    background: #f8f4ec; border: 1px solid #e8e0cf;
    border-radius: 6px; padding: 8px 12px; margin: 4px 0 14px;
}
.book-dating .dating-label { font-weight: 600; color: #9a7b1e; }
.book-dating .dating-icon {
    width: 20px;
    height: 20px;
    margin-right: 7px;
    vertical-align: -5px;
    object-fit: contain;
}

/* Klikbare 'oudste handschrift' in de datering-box -> grondteksten.html */
.book-dating .dating-link { color: #9a7b1e; text-decoration: none; border-bottom: 1px dotted #c9a94a; }
.book-dating .dating-link:hover { color: #7a610f; border-bottom-style: solid; }
/* Donker thema: het schrijftijd-blok bleef licht -> donkere variant */
:root[data-theme="donker"] .book-dating {
    color: var(--text-secondary);
    background: var(--bg-surface-alt);
    border-color: var(--border-default);
}
:root[data-theme="donker"] .book-dating .dating-label,
:root[data-theme="donker"] .book-dating .dating-link { color: var(--gold); }
:root[data-theme="donker"] .book-dating .dating-link { border-bottom-color: rgba(214,177,90,0.5); }

/* === Chunk-audio: voorlees-instellingen (godsnaam/kopjes/intro) === */
.audio-settings-btn {
    background: none; border: none; cursor: pointer; font-size: 18px;
    color: inherit; opacity: 0.75; padding: 4px 6px; line-height: 1;
}
.audio-settings-btn:hover { opacity: 1; }
.audio-settings-btn.hidden { display: none; }
.audio-settings-panel {
    position: absolute; bottom: 52px; right: 12px; z-index: 60;
    background: var(--bg-surface, #fff); color: var(--text-primary, #222);
    border: 1px solid var(--border-default, #d8d2c6); border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.18); padding: 12px 14px; width: 250px;
    font-family: 'Fira Sans', sans-serif; font-size: 13px;
}
.audio-settings-panel .asp-row { margin-bottom: 10px; }
.audio-settings-panel .asp-label { display: block; font-weight: 600; margin-bottom: 5px; color: var(--navy, #142e42); }
.audio-settings-panel .asp-seg { display: flex; gap: 4px; }
.audio-settings-panel .asp-seg button {
    flex: 1; padding: 5px 4px; border: 1px solid var(--border-default, #d8d2c6);
    background: transparent; color: inherit; border-radius: 5px; cursor: pointer; font-size: 12px;
}
.audio-settings-panel .asp-seg button.on {
    background: var(--gold, #cba449); color: #fff; border-color: var(--gold, #cba449); font-weight: 600;
}
.audio-settings-panel .asp-check { display: flex; align-items: center; gap: 7px; margin: 7px 0 0; cursor: pointer; }
.audio-settings-panel .asp-check input { margin: 0; }
:root[data-theme="donker"] .audio-settings-panel .asp-label { color: var(--text-primary); }

/* ── Mobiele weergave: documentatie-layout (zijbalk + inhoud) ──────────────
   Doc-pagina's (grondteksten, statistieken, principes, uitgangspunten, …)
   gebruiken een vaste 220px-zijbalk naast .page. Op smalle schermen stapelen
   we die: de zijbalk wordt een compacte, horizontaal-wrappende linkbalk
   bovenaan. .page krijgt min-width:0 zodat brede tabellen binnen hun
   .ms-table-wrap (overflow-x:auto) scrollen i.p.v. de pagina te verbreden
   (een flex-item heeft standaard min-width:auto = min-content). */
.page { min-width: 0; }
@media (max-width: 820px) {
  .doc-shell { flex-direction: column; }
}

/* ── Mobiele weergave: doc-content die niet meekromp ──────────────────────────
   Een brede tabel (bv. .book-table, 9 kolommen) rekt anders de héle
   layout-viewport op tot ~728px, waardoor de kolom-grid en cards buiten beeld
   vallen. Een harde max-width:100vw op de content-kolom kapt dat af: de reeds
   in overflow-x:auto-wrappers zittende tabellen scrollen dan binnen de
   schermbreedte i.p.v. de pagina te verbreden. */
.stats-page { min-width: 0; }               /* zelfde flex-item-fix als .page */
@media (max-width: 820px) {
  .doc-shell > .page,
  .doc-shell > .stats-page { max-width: 100vw !important; min-width: 0 !important; }
  .stat-grid { grid-template-columns: 1fr !important; }        /* vaste kolom-grid -> 1 kolom */
  /* tabellen zonder eigen scroll-wrapper alsnog laten scrollen */
  .page > table, .stats-page > table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  /* form-controls (bv. lange <select>-opties) niet breder dan het scherm */
  .page select, .page input, .stats-page select, .stats-page input { max-width: 100%; }
}

/* Reader-optie: oudste handschrift per vers — vaste rechter kolom naast de verstekst.
   Absolute positionering, want de vers-rij is op desktop een grid (float werkt daar niet). */
.hs-vers-tag { display: none; }
body.hs-per-vers-aan #content .verse-row { position: relative; padding-right: 190px; min-height: 4.6em; }
body.hs-per-vers-aan .hs-vers-tag {
    display: block; position: absolute; top: 2px; right: 8px; width: 165px;
    padding: 5px 9px; box-sizing: border-box;
    border-left: 2px solid var(--gold); background: rgba(203,164,73,0.06);
    border-radius: 0 5px 5px 0; font-size: 10.5px; line-height: 1.3; font-family: var(--font-body);
}
.hs-vw-kop { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gold); font-weight: 600; margin-bottom: 2px; }
.hs-vw-link { display: block; text-decoration: none; color: var(--teal); margin-top: 2px; }
.hs-vw-link:hover .hs-vw-naam { color: var(--gold); text-decoration: underline; }
.hs-vw-naam { font-weight: 600; color: var(--navy); margin-right: 4px; }
.hs-vw-jaar { color: var(--text-muted, #999); }
.hs-vw-alle .hs-vw-jaar { font-size: 10px; }
@media (max-width: 760px) {
    body.hs-per-vers-aan #content .verse-row { padding-right: 0; }
    body.hs-per-vers-aan .hs-vers-tag { position: static; width: auto; margin: 4px 0 8px; border-left-width: 3px; }
}
:root[data-theme="donker"] .hs-vw-naam { color: var(--text-primary); }
:root[data-theme="donker"] .hs-vw-link { color: var(--teal-light); }

/* Link in de Ge'ez/Latijn-woordpopup naar het woordenboek */
.geez-lex-link { display: block; margin-top: 8px; padding-top: 6px; border-top: 1px solid rgba(203,164,73,0.3); font-size: 12px; color: var(--teal); text-decoration: none; }
.geez-lex-link:hover { color: var(--gold); }

/* Citaatopmaak iets minder cursief: mildere schuinstand i.p.v. de sterk
   calligrafische Garamond-italic (verzoek: 'iets minder cursief'). */
span.direct-speech, span.direct-speech i,
span.god-speaks, span.god-speaks i,
span.devil-speaks, span.devil-speaks i {
    font-style: italic !important;
}

/* OV-strongs-nummers (eigen nummering Ge'ez/Latijn, geen echte Strong's) */
.strongs-sub.ov-strongs { color: var(--gold); font-style: italic; }
.geez-lex-strongs { font-size: 11px; color: var(--gold); font-style: italic; margin-top: 4px; }

/* === Ingebed in de wiki ===
   De wiki toont pagina's in een iframe. Zonder deze regels verschijnt de site
   binnen zichzelf: een tweede bovenbalk en, bij de documentatiepagina's, een
   tweede zijbalk naast die van de wiki. js/topnav.js zet de markering
   .ov-ingebed op <html> zodra hij merkt dat hij niet het bovenste venster is. */
.ov-ingebed #topnav,
.ov-ingebed .doc-sidebar,
.ov-ingebed #ov-zoom { display: none !important; }

/* De documentatiepagina's zetten hun inhoud naast de eigen zijbalk. Valt die
   weg, dan mag de inhoud de volle breedte gebruiken. */
.ov-ingebed .doc-shell,
.ov-ingebed .doc-layout { display: block !important; }
.ov-ingebed .doc-content { max-width: 100% !important; }
.ov-ingebed .page {
    max-width: 100% !important;
    box-sizing: border-box;
    padding-left: 24px;
    padding-right: 24px;
}
@media (max-width: 768px) {
    .ov-ingebed .page {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* === Opmerkingenkaart op een telefoon === */
/* De kaart stond op 10vh van boven zonder hoogtebegrenzing en liep daardoor
   door tot voorbij de onderrand. Met het toetsenbord open viel de knoppenrij
   helemaal weg: typen ging wel, op Verzenden drukken niet. Hier staat de kaart
   onderaan vast binnen het deel dat zichtbaar blijft (js/feedback.js meet dat
   met visualViewport), schuift alleen zijn eigen inhoud, en plakt de
   knoppenrij aan de onderkant. */
@media (max-width: 768px) {
    .feedback-modal-dialog {
        position: absolute;
        left: 0;
        right: 0;
        bottom: var(--fb-onder, 0px);
        margin: 0;
        max-width: none;
        max-height: calc(var(--fb-hoogte, 92vh) - 8px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 14px 14px 0 0;
        padding: 14px 16px 0;
    }
    .feedback-modal-dialog h3 { font-size: 17px; }
    .feedback-modal-dialog .fb-quote { max-height: 76px; margin-bottom: 10px; }
    .feedback-modal-dialog .fb-types { margin-bottom: 10px; }
    .feedback-modal-dialog textarea { min-height: 72px; }
    .feedback-modal-dialog .fb-status { margin: 6px 0 0; }
    .feedback-modal-dialog .fb-actions {
        position: sticky;
        bottom: 0;
        margin: 8px -16px 0;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
        background: #fff;
        border-top: 1px solid #eee7d8;
    }
    .feedback-modal-dialog .fb-cancel,
    .feedback-modal-dialog .fb-send {
        flex: 1 1 0;
        min-height: 46px;
        font-size: 15px;
    }
    :root[data-theme="donker"] .feedback-modal-dialog .fb-actions {
        background: var(--bg-surface);
        border-top-color: var(--border-default);
    }
}

/* === Melding onderin na het verzenden === */
/* De kaart is al dicht tegen de tijd dat Google antwoordt, dus de bevestiging
   kan daar niet meer in staan. */
.fb-toast {
    position: fixed;
    left: 50%;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    z-index: 12000;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: min(440px, calc(100vw - 32px));
    box-sizing: border-box;
    padding: 12px 18px;
    border-radius: 10px;
    background: var(--navy, #1b2440);
    color: #fff;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.35;
    box-shadow: 0 6px 24px rgba(0,0,0,0.3);
    opacity: 0;
    transform: translate(-50%, 16px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}
.fb-toast.zichtbaar {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}
.fb-toast-fout { background: #7a2733; }
.fb-toast-knop {
    flex: 0 0 auto;
    border: 1px solid rgba(255,255,255,0.5);
    background: transparent;
    color: inherit;
    font: inherit;
    padding: 5px 12px;
    border-radius: 999px;
    cursor: pointer;
}
.fb-toast-knop:hover { background: rgba(255,255,255,0.15); }
@media (prefers-reduced-motion: reduce) {
    .fb-toast { transition: none; }
}

/* === Boekenlijst links: dichter op elkaar op een groot scherm === */
/* De regels stonden op duimformaat: vijf pixels boven en onder plus een marge
   per boek. Op een muis hoeft dat niet, en met zesenzestig boeken scheelt het
   of je de lijst overziet of erdoorheen moet scrollen. Onder de 769 pixels
   blijft alles zoals het was, want daar wordt er wel met een vinger getikt. */
@media (min-width: 769px) {
    .tree-book { margin-bottom: 0; }
    .tree-book-label {
        padding-top: 2px;
        padding-bottom: 2px;
        line-height: 1.35;
    }
    .tree-group { margin-bottom: 0; }
    .tree-group-label { padding-top: 6px; padding-bottom: 6px; }
}

/* === Hooglied: elke spreker zijn eigen kleur === */
/* Het boek is een gesprek tussen drie partijen, maar stond in een kleur: alle
   honderdzeventien verzen droegen direct-speech. Wie zegt "Mijn vriendin" en
   wie "mijn Liefste" was aan de opmaak niet te zien. De tekst wijst de sprekers
   zelf aan, dus krijgen ze elk een eigen kleur: de bruid roze, de bruidegom
   blauwgroen, en het koor -- de dochters van Jeruzalem, die de vragen stellen
   ("Wie is zij, die daar opkomt uit de woestijn?") -- olijfgroen.

   Drie kleuren die in tint en helderheid ver genoeg uit elkaar liggen om ook
   zonder kleurwaarneming te scheiden, en die geen van drieen botsen met het
   rood van god-speaks of het goud van een citaat-in-citaat. */
.bride-speaks,
.groom-speaks,
.chorus-speaks {
    font-style: italic !important;
    display: inline !important;
}
.bride-speaks  { color: #a8386b !important; }
.groom-speaks  { color: #1f6f8b !important; }
.chorus-speaks { color: #5f6b2f !important; }
.bride-speaks::before,
.groom-speaks::before,
.chorus-speaks::before { content: '\201C'; }
.bride-speaks::after,
.groom-speaks::after,
.chorus-speaks::after { content: '\201D'; }

:root[data-theme="donker"] .bride-speaks,
:root[data-theme="donker"] .bride-speaks i  { color: #e9a3c0 !important; }
:root[data-theme="donker"] .groom-speaks,
:root[data-theme="donker"] .groom-speaks i  { color: #8ecae6 !important; }
:root[data-theme="donker"] .chorus-speaks,
:root[data-theme="donker"] .chorus-speaks i { color: #bcc98a !important; }

/* De optie "citaten uit" moet ook deze drie uitzetten. */
body.citaten-uit .bride-speaks,
body.citaten-uit .groom-speaks,
body.citaten-uit .chorus-speaks {
    color: inherit !important;
    font-style: normal !important;
}
body.citaten-uit .bride-speaks::before,  body.citaten-uit .bride-speaks::after,
body.citaten-uit .groom-speaks::before,  body.citaten-uit .groom-speaks::after,
body.citaten-uit .chorus-speaks::before, body.citaten-uit .chorus-speaks::after { content: none !important; }

/* Opent het hoofdstuk met een citaat, dan geen openings-aanhalingsteken: de
   sierletter staat er al. Zelfde regel als voor de andere sprekers. */
.verse-row[data-verse="1"] .col-2026 .bride-speaks::before,
.verse-row[data-verse="1"] .col-2026 .groom-speaks::before,
.verse-row[data-verse="1"] .col-2026 .chorus-speaks::before { content: none; }