/* ─── Design tokens — licht modus ───────────────────────────────────────── */
:root {
    /* Nieuwe semantische variabelen (primair voor nieuwe UI) */
    --bg:          #f6efe1;
    --card-warm:   #fffdf8;
    --hover-warm:  #efe6d2;
    --nav:         #17110a;
    --nav-text:    #c9b48c;
    --text:        #241b0f;
    --verse-num:   #ad9877;
    --col-label:   #8a5030;
    --divider:     rgba(107, 58, 20, 0.14);
    --accent:      #7a3b1e;
    --gold:        #b8863f;
    --amber:       #c07238;

    /* Bestaande variabelen (behouden voor editor-compat) */
    --color-parchment:   #fffdf8;
    --color-ink:         #241b0f;
    --color-ink-light:   #55492f;
    /* --color-ink-muted en --color-none zijn t.o.v. --bg verdonkerd tot ≥4,5:1
       (WCAG AA) — de oorspronkelijke tinten (#8c7c5e / #c0b090) haalden slechts
       ≈3,6:1 resp. ≈1,9:1 en waren te licht om betrouwbaar te lezen. */
    --color-ink-muted:   #6b5c3f;
    --color-border:      rgba(107, 58, 20, 0.18);
    --color-border-light:#efe6d2;
    --color-accent:      #7a3b1e;
    --color-accent-2:    #1e4d7a;
    --color-he:          #5a2d0c;
    --color-gk:          #0c3a5a;
    --color-nl:          #1a4a1a;
    --color-manual:      #1a7a3a;
    --color-manual-hint: #2e7d6e;
    --color-proper-noun: #1e4d7a;
    --color-positional:  #8a5c1a;
    --color-none:        #8a7a5a;
    --color-auto-pivot:      #2e5c8a;
    --color-auto-sequence:   #5c7a2e;
    --color-auto-positional: #7a6b2e;
    --color-gap:             #b3403f;

    /* Lettertypen */
    --font-ui:     'Public Sans', -apple-system, 'Segoe UI', Arial, sans-serif;
    --font-serif:  'Baskervville', Georgia, 'Times New Roman', serif;
    --font-nav:    'Jost', 'Century Gothic', var(--font-ui);
    --font-greek:  'GFS Didot', 'Palatino Linotype', Palatino, serif;
    --font-hebrew: 'Frank Ruhl Libre', 'Times New Roman', serif;
    --font-mono:   'JetBrains Mono', 'Courier New', monospace;

    /* Layout */
    --nav-height:  52px;
    --radius:      4px;
    --shadow:      0 1px 4px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.04);
}

/* ─── Donkere modus ─────────────────────────────────────────────────────────
   Warme, donkere manuscript-tint (geen neutraal grijs) die dezelfde
   terracotta/goud-identiteit als de lichte modus aanhoudt. Alle tekstkleuren
   hieronder zijn gecontroleerd op minimaal WCAG AA (4.5:1) tegen zowel --bg
   als --card-warm. ───────────────────────────────────────────────────────── */
[data-theme="dark"] {
    --bg:          #1c1610;
    --card-warm:   #241d15;
    --hover-warm:  #2c2318;
    --nav:         #110d08;
    --nav-text:    #cdb88f;
    --text:        #e8dfcf;
    --verse-num:   #9a8a6a;
    --col-label:   #a89878;
    --divider:     rgba(255, 255, 255, 0.08);
    --accent:      #d97d42;
    --gold:        #ecc07a;
    --amber:       #c9793d;

    --color-parchment:   #241d15;
    --color-ink:         #e8dfcf;
    --color-ink-light:   #c9b48c;
    --color-ink-muted:   #9a8a6a;
    --color-border:      rgba(255, 255, 255, 0.14);
    --color-border-light:rgba(255, 255, 255, 0.08);
    --color-accent:      #d97d42;
    --color-accent-2:    #6fa3d8;

    /* Koppelmethode- en taalkleuren: lichtere versie van dezelfde tint,
       zodat ze op de donkere achtergrond leesbaar en zichtbaar blijven
       (borders, link-dots, taallabels) — betekenis blijft ongewijzigd. */
    --color-he:              #d99a5c;
    --color-gk:              #6fa8d8;
    --color-nl:              #6fbf6f;
    --color-manual:          #4fbd6f;
    --color-manual-hint:     #5fc4b0;
    --color-proper-noun:     #6fa3d8;
    --color-positional:      #d99a4a;
    --color-none:            #9a8a6a;
    --color-auto-pivot:      #6fa3d8;
    --color-auto-sequence:   #8ab86a;
    --color-auto-positional: #c9a94a;
    --color-gap:             #e0655f;
}
[data-theme="dark"] .no-link-badge,
[data-theme="dark"] .link-dot.method-auto_source_pivot,
[data-theme="dark"] .link-dot.method-auto_sequence,
[data-theme="dark"] .link-dot.method-auto_positional { color: #8ab0a0; }

/* De statistiek-badges (.badge-*) hebben een vast licht pastel als achtergrond
   (nodig voor de leesbaarheid van hun eigen — altijd donkere — tekstkleur, zie
   hierboven). Op de donkere pagina oogden ze als lichte eilandjes; hier krijgen
   ze een op de pagina afgestemde, transparante versie van dezelfde tint. */
[data-theme="dark"] .badge-manual       { background: rgba(79, 189, 111, .16); color: #6fd08c; }
[data-theme="dark"] .badge-manual-hint  { background: rgba(95, 196, 176, .16); color: #7ed4c0; }
[data-theme="dark"] .badge-proper-noun  { background: rgba(111, 163, 216, .16); color: #8fb8e4; }
[data-theme="dark"] .badge-positional   { background: rgba(217, 154, 74, .16); color: #e2ab6a; }

/* ─── Thema-transitie ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    *, *::before, *::after {
        transition: background-color 0.35s ease, color 0.35s ease,
                    border-color 0.35s ease;
    }
}

/* ─── Focus-zichtbaarheid — klikbare woorden ────────────────────────────────
   .source-word/.dutch-word (leesweergave) en .src-word/.nl-word (koppelen)
   zijn <div>/<span> met een klik-handler, geen native knoppen. Zonder deze
   regel is er geen enkele zichtbare aanwijzing voor toetsenbordgebruikers dat
   het element focus heeft — de belangrijkste interactie van de hele app was
   daarmee onzichtbaar voor toetsenbordnavigatie. */
.source-word:focus-visible,
.src-word:focus-visible,
.dutch-word:focus-visible,
.nl-word:focus-visible,
.book-link:focus-visible,
.link-dot:focus-visible,
.no-link-badge:focus-visible,
.link-chip:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ─── Reset & basis ─────────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /* Browser-scroll-anchoring uit: op deze pagina's verschijnen/verdwijnen
       geregeld panelen (Strong's-detail, "Alle links", de actiebalk) boven of
       binnen het zichtbare gebied. De browser probeert dat te compenseren met
       een eigen, onzichtbare scrollcorrectie — maar omdat scroll-behavior
       hierboven op smooth staat, wordt die correctie een trage, zichtbare
       animatie i.p.v. een onmerkbare micro-aanpassing, en kan zelfs meerdere
       seconden oscilleren voordat de pagina tot rust komt. Overal uitzetten
       (niet alleen op html: overflow-anchor erft niet over) voorkomt dit. */
    overflow-anchor: none;
}

html { font-size: 18px; scroll-behavior: smooth; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-ui);
    line-height: 1.7;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ─── Navbar ────────────────────────────────────────────────────────────── */
.site-header {
    background: var(--nav);
    color: var(--nav-text);
    height: var(--nav-height);
    position: sticky;
    top: 0;
    z-index: 200;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.nav-inner {
    max-width: 1400px;
    height: 100%;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 0;
}

/* Logo */
.site-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--nav-text) !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.06em;
    margin-right: 8px;
    flex-shrink: 0;
}
.site-logo:hover { text-decoration: none !important; }
.site-logo svg { display: block; flex-shrink: 0; }
.site-logo-name {
    font-family: var(--font-serif);
    font-size: 16px;
    letter-spacing: 0.04em;
    color: var(--nav-text);
}

/* Nav-scheidingslijn */
.nav-sep {
    width: 1px;
    height: 18px;
    background: rgba(255, 255, 255, 0.07);
    margin: 0 8px;
    flex-shrink: 0;
}

/* Nav-links wrapper — desktop: gewone flex-rij; mobiel: uitklapbaar menu */
.nav-links {
    display: contents; /* Kinderen participeren direct in nav-inner flex */
}

/* Hamburger — alleen op mobiel zichtbaar */
.nav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 6px;
    padding: 6px 8px;
    cursor: pointer;
    transition: background 0.2s;
}
.nav-hamburger:hover { background: rgba(255, 255, 255, 0.06); }
.hamburger-bar {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--nav-text);
    border-radius: 2px;
    transition: transform 0.25s, opacity 0.25s;
}
/* ✕-animatie wanneer open */
.nav-open .nav-hamburger .hamburger-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nav-open .nav-hamburger .hamburger-bar:nth-child(2) {
    opacity: 0;
}
.nav-open .nav-hamburger .hamburger-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Dropdown-navigatie */
.nav-dropdown {
    position: relative;
}

.nav-dropdown-btn {
    background: transparent;
    border: none;
    color: var(--nav-text);
    font-family: var(--font-nav);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.02em;
    padding: 6px 10px;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}
.nav-dropdown-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--nav);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 4px;
    min-width: 200px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 300;
    overflow: hidden;
    padding-top: 6px;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
    display: block;
}

.nav-dropdown-menu a {
    display: block;
    padding: 9px 16px;
    color: var(--nav-text);
    font-size: 13px;
    font-family: var(--font-nav);
    letter-spacing: 0.01em;
    transition: background 0.15s, color 0.15s;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.nav-dropdown-menu a:last-child { border-bottom: none; }
.nav-dropdown-menu a:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    text-decoration: none;
}

/* Vertalingen-selector — zelfde patroon als .nav-user */
.nav-trans-selector {
    position: relative;
}
.nav-trans-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background: var(--nav);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    min-width: 190px;
    z-index: 300;
    overflow: hidden;
    padding: 12px 0 6px;
}
.nav-trans-selector:hover .nav-trans-menu,
.nav-trans-selector:focus-within .nav-trans-menu {
    display: block;
}
.nav-check-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 16px;
    cursor: pointer;
    color: var(--nav-text);
    font-size: 13px;
    font-family: var(--font-nav);
    letter-spacing: 0.01em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.15s;
    user-select: none;
    box-sizing: border-box;
}
.nav-check-item:last-child { border-bottom: none; }
.nav-check-item:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.nav-check-item input[type="checkbox"] {
    accent-color: #ecc07a;
    width: 14px;
    height: 14px;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
}

/* Rechter nav-groep */
.nav-right {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

/* Thema-toggle knop */
.nav-theme-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 20px;
    color: var(--nav-text);
    font-size: 13px;
    padding: 4px 0;
    width: 34px;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    white-space: nowrap;
    line-height: 1;
}
.nav-theme-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.18);
}

/* Gebruikermenu */
.nav-user {
    position: relative;
}
.nav-user-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 20px;
    color: var(--nav-text);
    font-family: var(--font-nav);
    font-size: 13px;
    padding: 4px 12px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    white-space: nowrap;
}
.nav-user-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.18);
}
.nav-user-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background: var(--nav);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    min-width: 150px;
    z-index: 300;
    overflow: hidden;
    padding-top: 6px;
}
.nav-user:hover .nav-user-menu,
.nav-user:focus-within .nav-user-menu {
    display: block;
}
.nav-user-menu a {
    display: block;
    padding: 9px 16px;
    color: var(--nav-text);
    font-size: 13px;
    font-family: var(--font-nav);
    transition: background 0.15s, color 0.15s;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.nav-user-menu a:last-child { border-bottom: none; }
.nav-user-menu a:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    text-decoration: none;
}
.nav-logout { color: var(--amber) !important; }

.nav-login-btn {
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 20px;
    color: var(--nav-text) !important;
    font-family: var(--font-nav);
    font-size: 13px;
    padding: 4px 12px;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    text-decoration: none !important;
}
.nav-login-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.18);
}

/* ─── Main & footer ─────────────────────────────────────────────────────── */
.site-main { flex: 1; max-width: 1400px; margin: 0 auto; padding: 2rem; width: 100%; }
@media (max-width: 768px) { .site-main { padding: 0; } }
.site-footer {
    text-align: center;
    padding: 1.5rem;
    font-size: .8rem;
    color: var(--color-ink-muted);
    border-top: 1px solid var(--divider);
    margin-top: 4rem;
}

/* ─── Home page ─────────────────────────────────────────────────────────── */
.hero { text-align: center; padding: 3rem 1rem 2rem; }
.hero h1 { font-family: var(--font-serif); font-size: 2.4rem; font-weight: 400; line-height: 1.3; }
.hero-sub { color: var(--color-ink-light); margin-top: .75rem; font-size: 1.1rem; font-style: italic; }
@media (max-width: 640px) {
    .hero { padding: 2rem 1rem 1.5rem; }
    .hero h1 { font-size: 1.7rem; line-height: 1.3; }
    .hero-sub { font-size: 1rem; }
}

.coverage-stats {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    margin: 2rem 0;
    flex-wrap: wrap;
}
.stat-card {
    background: var(--bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.25rem 1.75rem;
    min-width: 280px;
    box-shadow: var(--shadow);
}
.stat-testament { font-size: .8rem; font-weight: 600; letter-spacing: .12em;
                  color: var(--color-ink-muted); text-transform: uppercase; margin-bottom: .5rem; }
.stat-row { display: flex; justify-content: space-between; align-items: baseline; }
.stat-label { font-size: .85rem; color: var(--color-ink-light); }
.stat-value { font-size: 1rem; font-family: var(--font-mono); }
.stat-bar { height: 6px; background: var(--color-border-light); border-radius: 3px; margin: .5rem 0; }
.stat-bar-fill { height: 100%; background: var(--color-accent-2); border-radius: 3px;
                  transition: width .4s ease; }
.stat-methods { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }

.badge { font-size: .72rem; padding: .15rem .5rem; border-radius: 20px; font-family: var(--font-mono); }
/* Vaste (niet-thema-afhankelijke) kleuren: de achtergrond is altijd een licht pastel,
   dus de tekstkleur moet altijd donker blijven — ook in dark mode. */
.badge-manual    { background: #d4edda; color: #1a7a3a; }
.badge-manual-hint { background: #d4ede9; color: #2e7d6e; }
.badge-proper-noun { background: #d0e4f4; color: #1e4d7a; }
.badge-positional  { background: #fdf0d5; color: #8a5c1a; }

.home-anon-cta {
    text-align: center;
    margin: 2.5rem auto 0;
    max-width: 480px;
    padding: 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--card-warm);
}
.home-anon-cta p { margin-bottom: 1rem; color: var(--color-ink-light); }
.home-anon-cta-actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }

.testament-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-top: 2rem; }
@media (max-width: 900px) { .testament-grid { grid-template-columns: 1fr; } }
.testament-col-apoc { grid-column: 1 / -1; }
.testament-heading-note { font-size: .7em; font-weight: 400; color: var(--col-label); }

.testament-heading {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 400;
    border-bottom: 1px solid var(--divider);
    padding-bottom: .5rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: .75rem;
}
.heb-label { font-size: 1.5rem; direction: rtl; color: var(--color-he); }
.gk-label  { font-style: italic; color: var(--color-gk); }

.book-list { list-style: none; }
.book-link {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    padding: .4rem .5rem;
    border-radius: var(--radius);
    transition: background .15s;
    color: var(--text);
}
.book-link:hover { background: var(--color-border-light); text-decoration: none; }
.book-num { font-family: var(--font-mono); font-size: .8rem; color: var(--color-ink-muted);
             width: 1.8rem; text-align: right; flex-shrink: 0; }
.book-name { font-family: var(--font-serif); font-size: 1rem; flex: 1; }
.book-chapters { font-size: .8rem; color: var(--color-ink-muted); font-family: var(--font-mono); }

/* ─── Book / Chapter pages ──────────────────────────────────────────────── */
.breadcrumb { font-size: .85rem; color: var(--color-ink-muted); margin-bottom: 1rem; }
.breadcrumb a { color: var(--color-ink-muted); }
.book-meta { color: var(--color-ink-light); margin: .5rem 0 2rem; font-style: italic; }

.chapter-grid, .verse-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: .5rem;
    margin-top: 1.5rem;
}
.chapter-card, .verse-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: .75rem .5rem;
    background: var(--bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: .85rem;
    color: var(--text);
    transition: border-color .15s, box-shadow .15s;
}
.chapter-card:hover, .verse-card:hover {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent);
    text-decoration: none;
}
.chap-num { font-size: 1.25rem; font-weight: 500; }
.chap-verses { font-size: .72rem; color: var(--color-ink-muted); font-family: var(--font-mono); }

/* ─── Vers-vergelijking pagina ──────────────────────────────────────────── */
.verse-nav {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
    color: var(--color-ink-muted);
    margin-bottom: 1.5rem;
}
.verse-nav a { color: var(--color-ink-light); }
.nav-arrows { margin-left: auto; display: flex; gap: .5rem; }
.nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 1.25rem;
    color: var(--text);
    background: var(--bg);
    transition: border-color .15s;
}
.nav-btn:hover { border-color: var(--accent); text-decoration: none; }
.nav-btn-disabled { opacity: .35; cursor: default; }
.nav-btn-disabled:hover { border-color: var(--color-border); }
.nav-btn-active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    width: 2rem;
    font-weight: 600;
    pointer-events: none;
}
.strongs-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .5rem 0;
    margin: .75rem 0;
    border-top: 1px solid var(--divider);
    border-bottom: 1px solid var(--divider);
    flex-wrap: wrap;
}
.pager-info { font-size: .85rem; color: var(--color-ink-muted); }
.pager-btns { display: flex; gap: .3rem; align-items: center; }
.nav-btn-text {
    width: auto;
    padding: 0 .65rem;
    white-space: nowrap;
    font-size: .85rem;
}

/* Vertaling-switcher */
.translation-switcher { display: flex; gap: .4rem; flex-wrap: wrap; }
/* Mobiele variant: dropdown i.p.v. een knoppenrij die op smalle schermen
   wrapt. Beide varianten staan in de DOM; welke zichtbaar is wisselt via de
   mobiele media query hieronder — zelfde dual-render-patroon als
   .mobile-trans-pill / .translation-indicator-toggle op de leespagina's. */
.translation-switcher-mobile { display: none; }
.trans-btn {
    display: inline-flex;
    align-items: center;
    padding: .25rem .65rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: .8rem;
    font-family: var(--font-mono);
    color: var(--color-ink-light);
    background: var(--bg);
    text-decoration: none;
    transition: border-color .15s, background .15s;
}
.trans-btn:hover { border-color: var(--accent); text-decoration: none; }
.trans-btn-active {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
    font-weight: 600;
}

.verse-compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
    /* Een grid-track van 1fr heeft standaard min-width:auto, niet 0 — zonder
       deze regel duwt de inhoud van .compare-col (brontekstwoorden die niet
       verder willen krimpen) de kolom, en dus de hele pagina, breder dan het
       scherm op mobiel, ook al valt de layout terug op 1 kolom. */
    min-width: 0;
}
@media (max-width: 1000px) { .verse-compare-grid { grid-template-columns: 1fr; } }

.compare-col {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
}

.panel {
    background: var(--bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
}

/* Vertaalindicator-toggle */
.translation-indicator-toggle {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-left: auto;
}
.toggle-label {
    font-size: .8rem;
    color: var(--color-ink-muted);
    font-family: var(--font-mono);
    white-space: nowrap;
}
.trans-select {
    padding: .2rem 1.4rem .2rem .5rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: .8rem;
    font-family: var(--font-mono);
    color: var(--color-ink-light);
    background: var(--bg);
    cursor: pointer;
}
.trans-select:hover { border-color: var(--accent); }
.trans-select:focus { outline: none; border-color: var(--accent); }

/* Indicator-zichtbaarheid via CSS-attribuut */
[data-active-translation="SV"]     .hsv-indicators,
[data-active-translation="SV"]     .svgbs-indicators,
[data-active-translation="SV"]     .sv1657-indicators   { display: none; }
[data-active-translation="HSV"]    .sv-indicators,
[data-active-translation="HSV"]    .svgbs-indicators,
[data-active-translation="HSV"]    .sv1657-indicators   { display: none; }
[data-active-translation="SVGBS"]  .sv-indicators,
[data-active-translation="SVGBS"]  .hsv-indicators,
[data-active-translation="SVGBS"]  .sv1657-indicators   { display: none; }
[data-active-translation="SV1657"] .sv-indicators,
[data-active-translation="SV1657"] .hsv-indicators,
[data-active-translation="SV1657"] .svgbs-indicators    { display: none; }

.panel-heading {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-ink-light);
    margin-bottom: 1.25rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--divider);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}
.lang-badge {
    display: inline-block;
    padding: .1rem .5rem;
    border-radius: 3px;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
}
.lang-he { background: #f4e8d8; color: #5a2d0c; }
.lang-gk { background: #d8e8f4; color: #0c3a5a; font-style: italic; }
.lang-nl { background: #d8f0d8; color: #1a4a1a; }

/* ─── Bronwoorden ────────────────────────────────────────────────────────── */
.source-words {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
}
.dir-rtl { direction: rtl; }

.source-word {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .5rem 3px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, background .15s;
    text-align: center;
    position: relative;
}
.source-word:hover, .source-word.active {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(122, 59, 30, .2);
    background: var(--hover-warm);
}
.word-text {
    font-size: 1.5rem;
    font-family: var(--font-greek);
}
.dir-rtl .word-text {
    font-size: 1.8rem;
    font-family: var(--font-hebrew);
}
.word-translit { font-size: .72rem; color: var(--color-ink-muted); font-style: italic; }
.word-popup {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--nav);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    padding: 5px 10px;
    z-index: 200;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    flex-direction: column;
    align-items: center;
    gap: 3px;
    direction: ltr;
    pointer-events: none;
}
/* Popup zichtbaar bij hover of terwijl de link focus heeft (klikbaar) */
.source-word:hover .word-popup,
.source-word:focus-within .word-popup {
    display: flex;
    pointer-events: auto;
}
/* Kleine pijl-punt onderaan de popup */
.word-popup::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--nav);
}
.word-strongs {
    font-family: var(--font-mono);
    font-size: .72rem;
    color: #ecc07a;
    padding: 0 .2rem;
    text-decoration: none;
}
.word-strongs:hover { text-decoration: underline; }
.word-morph {
    font-family: var(--font-mono);
    font-size: .65rem;
    color: rgba(255, 255, 255, 0.55);
}
.link-indicators { display: flex; flex-wrap: wrap; gap: .1rem; justify-content: center; direction: ltr; }
.link-dot {
    position: relative;
    font-size: .65rem;
    padding: .02rem .08rem;
    border-radius: 2px;
    color: #4d7a63;
}
.no-link-badge { position: relative; font-size: .65rem; color: #4d7a63; }

/* Methode + score staan in het title-attribuut. Native title-tooltips
   verschijnen alleen bij :hover — op een touchscreen (geen hover) en voor
   toetsenbordgebruikers (title reageert niet op focus) was deze info dus
   volledig onbereikbaar. Deze CSS-tooltip toont dezelfde tekst ook bij tik/
   focus, zelfde visuele stijl als de bestaande .word-popup. */
.link-dot:hover::after, .link-dot:focus::after,
.no-link-badge:hover::after, .no-link-badge:focus::after,
.link-chip:hover::after, .link-chip:focus::after {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--nav);
    color: #fff;
    font-size: .65rem;
    padding: 3px 7px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 300;
    pointer-events: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

/* ─── Nederlandse vers ───────────────────────────────────────────────────── */
.dutch-verse { font-family: var(--font-serif); font-size: 1.25rem; line-height: 2.2; }

.dutch-word {
    display: inline-block;
    border-radius: 2px;
    transition: background .15s;
    cursor: pointer;
    padding: .1em .15em;
}
.dutch-word:hover, .dutch-word.highlighted { background: #fef3cd; outline: 2px solid #f0c040; }

/* Methodekleuring — kleur én lijnstijl samen dragen het onderscheid, zodat
   kleurenblinde gebruikers (met name rood-groen) handmatig/hint/eigennaam niet
   alleen op tint hoeven te onderscheiden. */
.dutch-word[data-method="manual"]      { border-bottom: 2px solid var(--color-manual); }
.dutch-word[data-method="manual_hint"] { border-bottom: 2px dotted var(--color-manual-hint); }
.dutch-word[data-method="proper_noun"] { border-bottom: 3px double var(--color-proper-noun); }
.dutch-word[data-method="positional"]  { border-bottom: 2px dashed var(--color-positional); }
.dutch-word[data-method="none"]        { color: var(--color-ink-muted); }

/* Link-dot kleuren */
.method-manual,
.method-manual-empty,
.method-manual_hint,
.method-proper_noun,
.method-positional,
.method-none         { background: transparent; }

/* Legenda */
.confidence-legend {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
    padding-top: .75rem;
    border-top: 1px solid var(--divider);
    font-size: .8rem;
    color: var(--color-ink-muted);
}
.legend-item { display: flex; align-items: center; gap: .35rem; }
.dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* ─── Hover-highlights ──────────────────────────────────────────────────── */
.source-word.hover-active {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(122, 59, 30, .12);
    background: var(--hover-warm);
}
.dutch-word.hover-highlighted {
    background: #fef9e7;
    outline: 2px solid #f5d87a;
}
.source-word.active {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(122, 59, 30, .35);
    background: var(--hover-warm);
}
.dutch-word.highlighted {
    background: #fef3cd;
    outline: 2px solid #f0c040;
}

/* ─── Strong's paneel ────────────────────────────────────────────────────── */
.strongs-detail h3 {
    font-family: var(--font-mono);
    font-size: 1.4rem;
    color: var(--color-accent-2);
}
.strongs-placeholder { color: var(--color-ink-muted); font-style: italic; }

/* ─── Utilities ──────────────────────────────────────────────────────────── */
.no-verse { color: var(--color-ink-muted); font-style: italic; }

/* ═══════════════════════════════════════════════════════════════════════════
   Navigatiepaneel (boek / hoofdstuk selectie)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Trigger-knop in de navbar */
.nav-book-btn {
    background: transparent;
    border: none;
    color: var(--nav-text);
    font-family: var(--font-nav);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .01em;
    padding: 0 .5rem;
    cursor: pointer;
    white-space: nowrap;
}
.nav-book-btn:hover { color: var(--gold); }

/* Overlay */
.nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 199;
}
.nav-overlay.is-open { display: block; }

/* Paneel */
.nav-panel {
    display: none;
    position: fixed;
    top: var(--nav-height);
    left: 0;
    width: 340px;
    height: calc(100vh - var(--nav-height));
    background: var(--nav);
    border-right: 1px solid rgba(236,192,122,.12);
    box-shadow: 4px 0 20px rgba(0,0,0,.4);
    z-index: 200;
    overflow: hidden;
    flex-direction: column;
}
.nav-panel.is-open { display: flex; }

.nav-panel-inner {
    display: flex;
    height: 100%;
    overflow: hidden;
}

/* Linkerkolom — boekenlijst */
.nav-panel-books {
    width: 176px;
    flex-shrink: 0;
    overflow-y: auto;
    border-right: 1px solid rgba(236,192,122,.08);
    padding: .5rem 0;
}
.nav-panel-books::-webkit-scrollbar { width: 4px; }
.nav-panel-books::-webkit-scrollbar-thumb { background: rgba(236,192,122,.2); border-radius: 2px; }

.nav-panel-section {
    font-size: 9px;
    font-family: var(--font-ui);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(192,168,132,.4);
    padding: .6rem .75rem .2rem;
}

.nav-panel-book-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: transparent;
    border: none;
    color: var(--nav-text);
    font-family: var(--font-ui);
    font-size: 13px;
    padding: .35rem .75rem;
    cursor: pointer;
    text-align: left;
    transition: background .12s, color .12s;
}
.nav-panel-book-btn:hover,
.nav-panel-book-btn.is-selected {
    background: rgba(192,168,132,.1);
    color: var(--gold);
}
.nav-panel-book-btn.is-active {
    background: rgba(192,168,132,.18);
    color: var(--gold);
    font-weight: 600;
}
.nav-panel-book-count {
    font-size: 10px;
    opacity: .45;
    margin-left: .3rem;
}

/* Rechterkolom — hoofdstukraster */
.nav-panel-chapters {
    flex: 1;
    overflow-y: auto;
    padding: .75rem;
}
.nav-panel-chapters::-webkit-scrollbar { width: 4px; }
.nav-panel-chapters::-webkit-scrollbar-thumb { background: rgba(236,192,122,.2); border-radius: 2px; }

.nav-panel-chapter-book {
    font-family: var(--font-nav);
    font-size: 12px;
    letter-spacing: .02em;
    color: var(--nav-text);
    opacity: .6;
    margin-bottom: .5rem;
}
.nav-panel-chapter-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}
.nav-chapter-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    background: rgba(192,168,132,.08);
    border: 1px solid rgba(192,168,132,.12);
    border-radius: var(--radius);
    color: var(--nav-text);
    font-family: var(--font-ui);
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}
.nav-chapter-btn:hover {
    background: rgba(192,168,132,.18);
    color: var(--gold);
    border-color: rgba(192,168,132,.3);
}
.nav-chapter-btn.is-active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    font-weight: 600;
}

/* ── Mobiel: fullscreen overlay ─────────────────────────────────────────── */
@media (max-width: 640px) {
    .nav-panel {
        width: 100%;
        left: 0;
    }
    .nav-panel-books { width: 190px; }
    .nav-panel-chapter-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Hoofdstuk-vergelijking view
   ═══════════════════════════════════════════════════════════════════════════ */

.page-chapter-view {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem 1.5rem 4rem;
    position: relative;
}

/* ── Hoofdstuk-navigatie ──────────────────────────────────────────────────── */
.chapter-nav {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 13px;
    color: var(--col-label);
    margin-bottom: 1.25rem;
    font-family: var(--font-ui);
    letter-spacing: .04em;
}
.chapter-nav-book {
    color: var(--accent);
    text-decoration: none;
}
.chapter-nav-book:hover { text-decoration: underline; }
.chapter-nav-sep { color: var(--verse-num); }
.chapter-nav-current { color: var(--text); font-weight: 400; }
.chapter-nav-arrows { margin-left: auto; display: flex; gap: .4rem; }

/* ── Kolomkoppenrij ──────────────────────────────────────────────────────── */
/* grid-template-columns hieronder is de SSR/no-JS fallback voor "alle vertalingen
   zichtbaar waar de gebruiker rechten toe heeft" (aantal has-* klassen = aantal
   kolommen). translation_selector_controller.js zet nadien een inline style op
   basis van de daadwerkelijk zichtbare vertalingen (zie #_apply) — dat wint altijd
   van deze regels, dus hoeft geen aparte regel per hide-combinatie te bestaan. */
.chapter-grid-header {
    display: grid;
    grid-template-columns: 2fr 1fr;
    border: 1px solid var(--divider);
    border-bottom: none;
    border-radius: var(--radius) var(--radius) 0 0;
    overflow: hidden;
}
.chapter-grid-header.has-sv1657:not(.has-hsv):not(.has-svgbs),
.chapter-grid-header.has-hsv:not(.has-sv1657):not(.has-svgbs),
.chapter-grid-header.has-svgbs:not(.has-sv1657):not(.has-hsv) {
    grid-template-columns: 2fr 1fr 1fr;
}
.chapter-grid-header.has-sv1657.has-hsv:not(.has-svgbs),
.chapter-grid-header.has-sv1657.has-svgbs:not(.has-hsv),
.chapter-grid-header.has-hsv.has-svgbs:not(.has-sv1657) {
    grid-template-columns: 2fr 1fr 1fr 1fr;
}
.chapter-grid-header.has-sv1657.has-hsv.has-svgbs {
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
}

.col-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 9px 20px;
    border-right: 1px solid var(--divider);
}
.col-header:last-child,
.col-header.is-last-visible-col { border-right: none; }
.col-header-source { background: var(--card-warm); }
.col-header-sv,
.col-header-hsv,
.col-header-svgbs,
.col-header-sv1657 { background: var(--bg); }

.col-label {
    font-size: 9px;
    font-weight: 400;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--col-label);
    font-family: var(--font-ui);
    white-space: nowrap;
}

/* ── Vers-grid ───────────────────────────────────────────────────────────── */
.chapter-verse-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    border: 1px solid var(--divider);
    border-radius: 0 0 var(--radius) var(--radius);
    overflow: visible;
}
.chapter-verse-grid.has-sv1657:not(.has-hsv):not(.has-svgbs),
.chapter-verse-grid.has-hsv:not(.has-sv1657):not(.has-svgbs),
.chapter-verse-grid.has-svgbs:not(.has-sv1657):not(.has-hsv) {
    grid-template-columns: 2fr 1fr 1fr;
}
.chapter-verse-grid.has-sv1657.has-hsv:not(.has-svgbs),
.chapter-verse-grid.has-sv1657.has-svgbs:not(.has-hsv),
.chapter-verse-grid.has-hsv.has-svgbs:not(.has-sv1657) {
    grid-template-columns: 2fr 1fr 1fr 1fr;
}
.chapter-verse-grid.has-sv1657.has-hsv.has-svgbs {
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
}

/* display:contents laat de cellen direct in het ouder-grid participeren.
   Het id op de cel zelf zorgt voor correcte ankernavigatie (#v3 etc.). */
.verse-row {
    display: contents;
}

/* ── Vers-cellen ─────────────────────────────────────────────────────────── */
.verse-cell {
    padding: 16px 20px;
    border-bottom: 1px solid var(--divider);
    border-right: 1px solid var(--divider);
    scroll-margin-top: calc(var(--nav-height) + 8px);
    min-width: 0; /* voorkom overflow in grid */
}

/* Laatste kolom (SSR-fallback, zie hierboven): geen rechterrand.
   translation_selector_controller.js zet .is-last-visible-col op de daadwerkelijk
   laatste zichtbare cel zodra JS actief is — die regel wint via gelijke specificiteit
   doordat hij hieronder staat, en dekt elke hide-combinatie zonder opsomming. */
.chapter-verse-grid:not(.has-hsv):not(.has-svgbs) .verse-cell-sv,
.chapter-verse-grid.has-hsv:not(.has-svgbs) .verse-cell-hsv,
.chapter-verse-grid.has-svgbs:not(.has-hsv) .verse-cell-svgbs,
.chapter-verse-grid.has-hsv.has-svgbs .verse-cell-svgbs {
    border-right: none;
}
.verse-cell.is-last-visible-col {
    border-right: none;
}

/* Verberg-klassen die de translation-selector controller toepast */
.chapter-verse-grid.hide-sv     .verse-cell-sv,
.chapter-verse-grid.hide-hsv    .verse-cell-hsv,
.chapter-verse-grid.hide-svgbs  .verse-cell-svgbs,
.chapter-verse-grid.hide-sv1657 .verse-cell-sv1657 { display: none; }
.chapter-grid-header.hide-sv     .col-header-sv,
.chapter-grid-header.hide-hsv    .col-header-hsv,
.chapter-grid-header.hide-svgbs  .col-header-svgbs,
.chapter-grid-header.hide-sv1657 .col-header-sv1657 { display: none; }

/* Laatste rij: geen onderrand op de cellen */
.verse-row:last-child .verse-cell {
    border-bottom: none;
}
.verse-row:last-child .verse-cell-source {
    border-bottom-left-radius: var(--radius);
}
.chapter-verse-grid:not(.has-hsv):not(.has-svgbs) .verse-row:last-child .verse-cell-sv,
.chapter-verse-grid.has-hsv:not(.has-svgbs) .verse-row:last-child .verse-cell-hsv,
.chapter-verse-grid.has-svgbs:not(.has-hsv) .verse-row:last-child .verse-cell-svgbs,
.chapter-verse-grid.has-hsv.has-svgbs .verse-row:last-child .verse-cell-svgbs {
    border-bottom-right-radius: var(--radius);
}
.verse-row:last-child .verse-cell.is-last-visible-col {
    border-bottom-right-radius: var(--radius);
}

.verse-cell-source { background: var(--card-warm); }
.verse-cell-source:hover { background: var(--hover-warm); }
.verse-cell-sv,
.verse-cell-hsv,
.verse-cell-svgbs,
.verse-cell-sv1657 { background: var(--bg); }

/* Broncel: compacter dan vertaalcellen */
.verse-cell-source {
    padding: 10px 14px;
}

/* Hebreeuwse bronkolom: RTL */
.verse-cell-he {
    direction: rtl;
    unicode-bidi: isolate;
}
.verse-cell-he .source-words { direction: rtl; }
.verse-cell-he .word-text {
    font-family: var(--font-hebrew);
    font-size: 15px;
    line-height: 1.75;
}

/* ── Versnummer ──────────────────────────────────────────────────────────── */
.verse-number {
    display: block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--verse-num);
    font-family: var(--font-ui);
    margin-bottom: 6px;
    line-height: 1;
}

/* ── Kruisverwijzingen: inline letter-marker + hover-popover ─────────────
   Zelfde mechanisme als .word-popup (bron-woorden): puur CSS, geen JS --
   de popover verschijnt op :hover/:focus-within van de marker zelf. */
.cross-ref-marker {
    position: relative;
    display: inline-block;
}
.cross-ref-letter {
    font-size: 10px;
    font-weight: 700;
    color: var(--accent);
    cursor: default;
    margin: 0 1px;
}
.cross-ref-popup {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    min-width: 8rem;
    max-width: 14rem;
    padding: 5px;
    flex-direction: column;
    gap: 1px;
    background: var(--nav);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
.cross-ref-marker:hover .cross-ref-popup,
.cross-ref-marker:focus-within .cross-ref-popup,
.cross-ref-marker:focus .cross-ref-popup {
    display: flex;
}
.cross-ref-popup::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--nav);
}
.cross-ref-popup a {
    display: block;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 12px;
    font-family: var(--font-ui);
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}
.cross-ref-popup a:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* ── Kruisverwijzing-detailpaneel (rechterzijpaneel, zelfde als Strong's) ── */
.cross-ref-panel {
    background: var(--bg);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 1.25rem 1.5rem;
    box-shadow: var(--shadow);
    margin-bottom: 1.25rem;
}
.cross-ref-panel-trans {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    color: var(--accent);
    font-family: var(--font-mono);
    margin-bottom: .75rem;
}
.cross-ref-panel-item {
    padding: .6rem .7rem;
    border-radius: 4px;
    border-left: 3px solid transparent;
}
.cross-ref-panel-item + .cross-ref-panel-item {
    margin-top: .35rem;
    border-top: 1px solid var(--divider);
    padding-top: .85rem;
}
.cross-ref-panel-item.is-active {
    background: var(--hover-warm);
    border-left-color: var(--accent);
}
.cross-ref-panel-ref {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 .35rem;
}
.cross-ref-panel-text {
    font-family: var(--font-ui);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

/* ── Bronwoorden in de hoofdstuk-view ────────────────────────────────────── */
.verse-cell-source .source-words {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .1rem;
}
.verse-cell-source .source-word {
    border-color: var(--divider);
    background: transparent;
}
.verse-cell-source .source-word:hover {
    border-color: var(--accent);
    background: var(--hover-warm);
}

/* Grieks: GFS Didot */
.verse-cell-source:not(.verse-cell-he) .word-text {
    font-family: var(--font-greek);
    font-size: 13px;
    line-height: 1.7;
}

/* ── Nederlandse verstekst in de hoofdstuk-view ──────────────────────────── */
.verse-cell-sv .dutch-verse,
.verse-cell-hsv .dutch-verse,
.verse-cell-svgbs .dutch-verse,
.verse-cell-sv1657 .dutch-verse {
    font-family: var(--font-serif);
    font-size: 15px;
    line-height: 1.82;
}

/* ── Strong's zijpaneel (desktop) / bottom sheet (mobiel) ───────────────── */
.strongs-sidebar {
    position: fixed;
    top: var(--nav-height);
    right: 0;
    width: 340px;
    height: calc(100vh - var(--nav-height));
    background: var(--bg);
    border-left: 1px solid var(--divider);
    box-shadow: -4px 0 16px rgba(0, 0, 0, .08);
    display: none;
    flex-direction: column;
    z-index: 150;
    overflow: hidden;
}
.strongs-sidebar.is-open { display: flex; }

.strongs-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--divider);
    background: var(--card-warm);
    flex-shrink: 0;
}
.strongs-sidebar-title {
    font-size: 9px;
    font-weight: 400;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--col-label);
    font-family: var(--font-ui);
}
.strongs-sidebar-close {
    background: none;
    border: none;
    font-size: 18px;
    color: var(--verse-num);
    cursor: pointer;
    line-height: 1;
    padding: 0 2px;
    transition: color .15s;
}
.strongs-sidebar-close:hover { color: var(--text); }

.strongs-sidebar turbo-frame {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: block;
}

/* Wanneer zijpaneel open is: grid smaller maken */
.page-chapter-view.strongs-open .chapter-grid-header,
.page-chapter-view.strongs-open .chapter-verse-grid {
    margin-right: 264px;
}

/* ── Mobiele hoofdstukstrip ──────────────────────────────────────────────── */
.mobile-chapter-strip {
    display: none; /* desktop: verborgen */
}

/* ── Mobiele SV/HSV-toggle pill ─────────────────────────────────────────── */
.mobile-trans-pill {
    display: none; /* desktop: verborgen */
}

/* ── Mobiel (≤ 768px) ────────────────────────────────────────────────────── */
@media (max-width: 768px) {

    /* ── Hamburger-menu ── */
    .nav-hamburger {
        display: flex;
    }

    /* nav-links: verborgen totdat hamburger wordt geopend */
    .nav-links {
        display: none;
        position: fixed;
        top: var(--nav-height);
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--nav);
        z-index: 490;
        flex-direction: column;
        align-items: stretch;
        overflow-y: auto;
        padding-bottom: 2rem;
        border-top: 1px solid rgba(255, 255, 255, 0.07);
    }

    .site-header.nav-open .nav-links {
        display: flex;
    }

    /* Scheidingslijnen worden horizontale regels in het mobiele menu */
    .nav-links .nav-sep {
        width: 100%;
        height: 1px;
        margin: 4px 0;
        background: rgba(255, 255, 255, 0.06);
    }

    /* Boek-knop, dropdown-knoppen, login-knop: volle breedte */
    .nav-links .nav-book-btn,
    .nav-links .nav-dropdown-btn {
        width: 100%;
        text-align: left;
        padding: 14px 24px;
        border-radius: 0;
        border: none;
        font-size: 15px;
    }

    /* Dropdowns: ingeklapt, uitklapbaar via .is-open (beheerd door mobile-nav controller) */
    .nav-links .nav-dropdown,
    .nav-links .nav-user,
    .nav-links .nav-trans-selector { position: static; }

    .nav-links .nav-dropdown-menu,
    .nav-links .nav-user-menu,
    .nav-links .nav-trans-menu {
        display: none;
        position: static;
        background: rgba(255, 255, 255, 0.04);
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0 0 4px;
        min-width: 0;
    }

    .nav-links .nav-dropdown.is-open .nav-dropdown-menu,
    .nav-links .nav-user.is-open .nav-user-menu,
    .nav-links .nav-trans-selector.is-open .nav-trans-menu { display: block; }

    .nav-links .nav-dropdown-menu a,
    .nav-links .nav-user-menu a {
        padding: 11px 36px;
        font-size: 14px;
    }
    .nav-links .nav-check-item {
        padding: 11px 36px;
        font-size: 14px;
    }


    /* nav-right: kolom in het mobiele menu */
    .nav-links .nav-right {
        flex-direction: column;
        align-items: stretch;
        margin-left: 0;
        gap: 0;
        padding: 4px 0;
    }

    /* Thema-toggle: volle breedte rij */
    .nav-links .nav-theme-btn {
        width: auto;
        align-self: flex-start;
        margin: 8px 24px;
        border-radius: 20px;
    }

    .nav-links .nav-user-btn {
        width: 100%;
        text-align: left;
        padding: 14px 24px;
        border-radius: 0;
        border: none;
        font-size: 15px;
    }
    .nav-links .nav-login-btn {
        display: block;
        padding: 14px 24px;
        font-size: 15px;
    }

    /* ── Hoofdstukstrip — sticky direct onder navbar ── */
    .mobile-chapter-strip {
        display: flex;
        position: sticky;
        top: var(--nav-height);
        z-index: 91;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        background: var(--nav);
        border-bottom: 1px solid rgba(192, 168, 132, .12);
        padding: 0 6px;
        height: 40px;
        align-items: center;
        gap: 2px;
        flex-shrink: 0;
    }
    .mobile-chapter-strip::-webkit-scrollbar { display: none; }

    .mobile-chapter-btn {
        flex-shrink: 0;
        scroll-snap-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 32px;
        height: 28px;
        padding: 0 6px;
        border-radius: var(--radius);
        color: var(--nav-text);
        font-family: var(--font-ui);
        font-size: 13px;
        text-decoration: none;
        transition: background .12s, color .12s;
    }
    .mobile-chapter-btn:hover { background: rgba(192, 168, 132, .15); color: var(--gold); }
    .mobile-chapter-btn.is-active {
        background: var(--accent);
        color: #fff;
        font-weight: 600;
    }

    /* Pill — sticky onder hoofdstukstrip */
    .mobile-trans-pill {
        display: flex;
        position: sticky;
        top: calc(var(--nav-height) + 40px);
        z-index: 90;
        justify-content: center;
        padding: 6px 0;
        background: var(--bg);
        border-bottom: 1px solid var(--divider);
        gap: 2px;
    }

    .pill-btn {
        padding: 4px 20px;
        border: 1px solid var(--divider);
        border-radius: 20px;
        background: transparent;
        color: var(--col-label);
        font-family: var(--font-ui);
        font-size: 13px;
        cursor: pointer;
        transition: background .15s, color .15s;
    }
    .pill-btn.trans-btn-active {
        background: var(--accent);
        color: #fff;
        border-color: var(--accent);
    }

    /* ── Vers-grid: één kolom, gestapeld ── */
    .page-chapter-view { padding: 3px 0 4rem; }
    .chapter-nav { padding: 2px 1rem; margin-bottom: .25rem; font-size: 12px; }
    .chapter-grid-header { display: none; }

    .chapter-verse-grid,
    .chapter-verse-grid.has-hsv,
    .chapter-verse-grid.has-svgbs,
    .chapter-verse-grid.has-sv1657 {
        display: block; /* geen grid op mobiel — gewoon blokken */
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .verse-row {
        display: block;
        border-bottom: 2px solid var(--divider);
    }
    .verse-row:last-child { border-bottom: none; }

    .verse-cell {
        padding: 12px 16px;
        border-right: none;
        border-bottom: 1px solid var(--divider);
    }
    .verse-cell:last-child { border-bottom: none; }

    /* Hide-klassen van de translation-selector (ingesteld op desktop) mogen op mobiel niets verbergen */
    .chapter-verse-grid.hide-sv     .verse-cell-sv,
    .chapter-verse-grid.hide-hsv    .verse-cell-hsv,
    .chapter-verse-grid.hide-svgbs  .verse-cell-svgbs,
    .chapter-verse-grid.hide-sv1657 .verse-cell-sv1657 { display: block; }

    /* Verberg niet-actieve kolommen standaard op mobiel; toon alleen de actieve.
       .has-hsv / .has-svgbs / .has-sv1657 garanderen dat deze regels alleen vuren
       voor gebruikers met de bijbehorende viewer-rol (anders bestaat de kolom niet in de DOM). */
    .chapter-verse-grid.has-hsv[data-active-translation="SV"]        .verse-cell-hsv    { display: none; }
    .chapter-verse-grid.has-hsv[data-active-translation="SVGBS"]     .verse-cell-hsv    { display: none; }
    .chapter-verse-grid.has-hsv[data-active-translation="SV1657"]    .verse-cell-hsv    { display: none; }
    .chapter-verse-grid.has-hsv[data-active-translation="HSV"]       .verse-cell-sv     { display: none; }
    .chapter-verse-grid.has-svgbs[data-active-translation="SV"]      .verse-cell-svgbs  { display: none; }
    .chapter-verse-grid.has-svgbs[data-active-translation="HSV"]     .verse-cell-svgbs  { display: none; }
    .chapter-verse-grid.has-svgbs[data-active-translation="SV1657"]  .verse-cell-svgbs  { display: none; }
    .chapter-verse-grid.has-svgbs[data-active-translation="SVGBS"]   .verse-cell-sv     { display: none; }
    .chapter-verse-grid.has-sv1657[data-active-translation="SV"]     .verse-cell-sv1657 { display: none; }
    .chapter-verse-grid.has-sv1657[data-active-translation="HSV"]    .verse-cell-sv1657 { display: none; }
    .chapter-verse-grid.has-sv1657[data-active-translation="SVGBS"]  .verse-cell-sv1657 { display: none; }
    .chapter-verse-grid.has-sv1657[data-active-translation="SV1657"] .verse-cell-sv     { display: none; }

    .source-word { padding: .2rem 2px; }

    /* Twee klassen (i.p.v. kaal .src-word) — hogere specificiteit, wint
       betrouwbaar van de latere, onvoorwaardelijke basisregel verderop in dit
       bestand. Waarde gelijk gehouden aan de overeenkomstige regel in de
       bredere (900px) breakpoint hieronder. */
    .source-words-grid .src-word { padding: .4rem 6px; }

    .linking-area .link-panel  { padding: .75rem 1rem; }
    .link-panel .panel-label   { margin-bottom: .5rem; padding-bottom: .35rem; }
    .link-panel .dutch-words-flow { font-size: 1rem; line-height: 2; margin-top: .4rem; }

    .linking-status-bar { flex-direction: column; align-items: stretch; gap: .5rem; }
    /* Comprimeer de (vaak lange) instructie-/statuszin tot één regel i.p.v.
       twee/drie — de aria-live-aankondiging blijft ongewijzigd volledig,
       alleen de visuele ruimte die de tekst inneemt wordt kleiner. Een latere,
       onvoorwaardelijke regel verderop zet nog altijd flex:1/align-items op
       de rij; max-width:100% dwingt de breedtebeperking hier sowieso af,
       ongeacht wie van de twee de flex-eigenschappen wint. */
    .linking-status     {
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .btn-confirm-proposals { align-self: flex-start; }
    /* .source-words-grid-voorvoegsel: zelfde reden als bij .src-word hierboven —
       wint betrouwbaar van de latere, onvoorwaardelijke .src-text-regel. */
    .source-words-grid .src-text     { font-size: .9rem; }
    .source-words-grid.rtl .src-text { font-size: 1.1rem; }
    .src-translit   { font-size: .65rem; }
    .source-words-grid { gap: .2rem .1rem; }

    .link-indicators, .no-link-badge { display: none; }

    .word-popup {
        white-space: normal;
        max-width: min(220px, 80vw);
        text-align: center;
    }
    .word-morph { font-size: .65rem; }

    /* Broncel bovenlabel op mobiel */
    .verse-cell-source::before {
        content: attr(data-lang-label);
        display: block;
        font-size: 9px;
        letter-spacing: .26em;
        text-transform: uppercase;
        color: var(--col-label);
        margin-bottom: 6px;
        font-family: var(--font-ui);
    }

    /* Action-bar: sticky bottom-behavior en donkere achtergrond zijn nu
       onvoorwaardelijk op .action-bar-inline gezet (geldt op alle
       breedtes) — hier geen mobiel-specifieke override meer nodig. */

    .translation-switcher { display: none; }
    .translation-switcher-mobile {
        display: block;
        width: 100%;
        padding: .4rem .65rem;
        border: 1px solid var(--color-border);
        border-radius: 4px;
        font-size: .85rem;
        font-family: var(--font-mono);
        color: var(--color-ink-light);
        background: var(--bg);
        cursor: pointer;
    }
    .translation-switcher-mobile:focus { outline: none; border-color: var(--accent); }

    /* Strong's: bottom sheet op mobiel */
    .strongs-sidebar {
        display: flex;
        top: auto;
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        height: 52vh;
        border-left: none;
        border-top: 2px solid var(--accent);
        border-radius: var(--radius) var(--radius) 0 0;
        transform: translateY(100%);
        transition: transform .3s ease;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, .18);
        pointer-events: none;
    }
    .strongs-sidebar.is-open {
        transform: translateY(0);
        pointer-events: auto;
    }

    .page-chapter-view.strongs-open .chapter-verse-grid {
        margin-right: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Koppel-UI
   ═══════════════════════════════════════════════════════════════════════════ */

.page-linking {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 1200px;
    margin: 0 auto;
}
.page-strongs-linking { max-width: 1100px; margin: 0 auto; }

.linking-topbar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: .75rem 0;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: .5rem;
}
.linking-nav {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-left: auto;
}
.verse-ref { font-weight: 500; font-size: .85rem; }
.linking-legend {
    display: flex;
    gap: 1rem;
    font-size: .8rem;
    color: var(--color-ink-muted);
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.linking-legend span { display: flex; align-items: center; gap: .3rem; }

.linking-status-bar {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: var(--card-warm);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: .4rem 1rem;
}
.linking-status {
    flex: 1;
    font-size: .85rem;
    color: var(--color-ink-light);
    font-style: italic;
}
.btn-confirm-proposals {
    flex-shrink: 0;
    padding: .3rem .85rem;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: .85rem;
    cursor: pointer;
    font-style: normal;
    white-space: nowrap;
}
.btn-confirm-proposals:hover { filter: brightness(1.1); }
.btn-cancel-proposals {
    flex-shrink: 0;
    padding: .3rem .85rem;
    background: transparent;
    color: var(--color-ink-light);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: .85rem;
    cursor: pointer;
    font-style: normal;
    white-space: nowrap;
}
.btn-cancel-proposals:hover { border-color: var(--accent); color: var(--accent); }

.linking-area {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}
/* Een grid-track heeft standaard min-width:auto, niet 0 — zonder deze regel
   duwt een breed paneel (bv. het "Alle links"-overzicht bij een woord met
   veel koppelgeschiedenis) de hele kolom, en dus de hele pagina, breder dan
   het scherm, óók al heeft dat paneel zelf al een overflow-x:auto-wrapper
   (.word-links-confidence-table-wrap) — die kan alleen daadwerkelijk krimpen
   als de grid-item-ouder dat toestaat. Geldt op alle breedtes, niet alleen
   mobiel: dezelfde bug kan ook bij twee panelen per rij optreden. */
.linking-area .link-panel { min-width: 0; }

@media (max-width: 900px) {
    .linking-area { grid-template-columns: 1fr; }
    /* Zonder deze regel probeert .link-panel-word-links verderop nog altijd
       2 kolommen te claimen (grid-column: span 2) terwijl er nu maar 1
       expliciete kolom is — CSS Grid maakt dan een impliciete 2e kolom aan
       om die span te faciliteren, en plaatst de eerdere, niet-gepositioneerde
       panelen (Bron, Vertaling) daardoor alsnog naast elkaar in die twee
       kolommen i.p.v. gestapeld. Twee klassen i.p.v. kaal
       .link-panel-word-links: wint betrouwbaar van de latere,
       onvoorwaardelijke regel verderop in dit bestand. */
    .linking-area .link-panel-word-links { grid-column: span 1; }
    /* Compacte, maar nog steeds ruim tikbare bronwoord-blokken op mobiel.
       Met voorvoegsel-klasse (i.p.v. kale .src-word/.nl-word) zodat dit
       betrouwbaar wint van de latere, onvoorwaardelijke basisregels verderop
       in dit bestand (.src-word/.nl-word padding) — anders wint bij gelijke
       specificiteit de regel die later in het bestand staat, ongeacht of de
       media query hier actief is. */
    .source-words-grid .src-word { padding: .4rem 6px; }
    .dutch-words-flow .nl-word   { padding: .3em .3em; }
}

/* Its confidence table (method/score/notes/date/who — "who" can be a full
   name + email) needs more room than a single equal-width grid track once
   two or more panels share a row, so claim a second track when there's one
   to claim. On a single-column layout (mobile, or a narrow window with only
   one track) this simply clamps to span 1 — no separate override needed. */
.link-panel-word-links { grid-column: span 2; }

.link-panel {
    background: var(--bg);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 1.25rem 1.5rem;
    box-shadow: var(--shadow);
}
.panel-label {
    font-size: .85rem;
    font-weight: 500;
    color: var(--color-ink-light);
    margin-bottom: 1rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--divider);
    display: flex;
    align-items: center;
    gap: .5rem;
}

.source-words-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .1rem;
}
.source-words-grid.rtl { direction: rtl; }

.src-word {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
    padding: .5rem 3px;
    border: 2px solid var(--color-border);
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    transition: border-color .12s, box-shadow .12s, background .12s;
    position: relative;
}
.src-word:hover {
    border-color: var(--accent);
    background: var(--hover-warm);
}
.src-word-active {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(122,59,30,.2) !important;
    background: var(--hover-warm) !important;
}
.src-word-target {
    background: #f0f6ff;
    border-color: var(--color-accent-2);
}

.method-border-manual       { border-color: var(--color-manual); }
.method-border-manual-empty { border-color: var(--color-manual); border-style: dashed; }
.method-border-manual_hint  { border-color: var(--color-manual-hint); border-style: dotted; }
.method-border-proper_noun  { border-color: var(--color-proper-noun); border-style: double; border-width: 3px; }
.method-border-positional   { border-color: var(--color-positional); }
.method-border-none         { border-color: var(--color-border); }
.method-border-auto_source_pivot { border-color: var(--color-auto-pivot);     border-style: dashed; }
.method-border-auto_sequence     { border-color: var(--color-auto-sequence);  border-style: dashed; }
.method-border-auto_positional   { border-color: var(--color-auto-positional);border-style: dashed; }
.method-border-propagated        { border-color: var(--color-auto-pivot);     border-style: dashed; }
.method-border-simalign          { border-color: var(--color-auto-pivot);     border-style: dashed; }

.src-word-propagated { opacity: .85; }
.propagated-hint {
    font-size: .65rem;
    font-style: italic;
    color: var(--color-auto-pivot);
    white-space: nowrap;
}

.src-text    { font-size: 1.4rem; line-height: 1.3; font-family: var(--font-greek); }
.rtl .src-text { font-size: 1.7rem; font-family: var(--font-hebrew); }
.src-translit { font-size: .65rem; color: var(--color-ink-muted); font-style: italic; }
/* src-strongs zit in .word-popup; stijl zichtbaar in popup */
.src-strongs  { font-family: var(--font-mono); font-size: .72rem; color: #ecc07a; text-decoration: none; }
.strongs-highlight { color: #ecc07a; font-weight: 600; }
/* Popup activeren voor .src-word (zelfde mechanisme als .source-word) */
.src-word:hover .word-popup,
.src-word:focus-within .word-popup { display: flex; pointer-events: auto; }

.src-links { display: flex; flex-wrap: wrap; gap: .1rem; justify-content: center; margin-top: .1rem; }
.link-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    font-size: .65rem;
    padding: .02rem .15rem;
    color: #4d7a63;
    background: transparent;
    cursor: pointer;
}

.dutch-words-flow { font-family: var(--font-serif); font-size: 1.1rem; line-height: 2.4; margin-top: .75rem; }
.nl-word {
    display: inline-block;
    border-radius: 2px;
    padding: .1em .15em;
    cursor: pointer;
    transition: background .1s;
}
.nl-word:hover { background: var(--hover-warm); }
.nl-word-selected {
    background: #fff3b0 !important;
    outline: 2px solid #e8b400;
    border-radius: 2px;
}

.method-underline-manual       { border-bottom: 2px solid var(--color-manual); }
.method-underline-manual-empty { border-bottom: 2px dashed var(--color-manual); }
.method-underline-manual_hint  { border-bottom: 2px dotted var(--color-manual-hint); }
.method-underline-proper_noun  { border-bottom: 3px double var(--color-proper-noun); }
.method-underline-positional   { border-bottom: 2px dashed var(--color-positional); }
.method-underline-simalign     { border-bottom: 2px dashed var(--color-auto-pivot); }
.method-underline-none         {}

.verse-full-text {
    font-size: .8rem;
    color: var(--color-ink-muted);
    margin-top: 1rem;
    padding-top: .75rem;
    border-top: 1px solid var(--divider);
    line-height: 1.6;
}

.action-bar {
    display: none;
    background: var(--nav);
    color: var(--nav-text);
    border-radius: 6px;
    padding: .75rem 1.25rem;
}
.action-bar-inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.action-label { font-size: .85rem; }
.action-hint  { font-size: .8rem; color: #a0927a; font-style: italic; flex: 1; }
.action-buttons { display: flex; gap: .75rem; margin-left: auto; }

.btn-save {
    padding: .45rem 1.25rem;
    background: var(--color-manual);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-family: var(--font-ui);
    font-size: .85rem;
    cursor: pointer;
    transition: background .12s;
}
.btn-save:hover { background: #156a30; }
.btn-save:disabled { opacity: .5; cursor: not-allowed; }

.btn-cancel {
    padding: .45rem 1rem;
    background: transparent;
    color: var(--nav-text);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 4px;
    font-family: var(--font-ui);
    font-size: .85rem;
    cursor: pointer;
    transition: border-color .12s;
}
.btn-cancel:hover { border-color: rgba(255,255,255,.7); }

.action-bar-inline {
    display: none;
    margin-top: .75rem;
    background: var(--card-warm);
    border: 1px solid var(--color-border);
}
.action-bar-inline .action-label { color: var(--text); }
.action-bar-inline .action-hint  { color: var(--color-ink-muted); }
.action-bar-inline .btn-cancel   { color: var(--text); border-color: var(--color-border); }

/* Op de koppelpagina (één actiebalk voor de hele pagina) plakt de balk aan
   de onderkant van het scherm, over de volle breedte — op alle formaten,
   niet alleen mobiel. margin-left: calc(50% - 50vw) is de standaardtruc om
   buiten .page-linking/.site-main (gecentreerd, max-width) uit te breken
   tot volle viewportbreedte, zonder position:fixed nodig te hebben (sticky
   blijft, anders dan fixed, gewoon meetellen in de documentflow). Alleen
   margin gebruiken (geen extra `left`) — die twee combineren schuift dubbel
   op, met twee verschillende referentiebreedtes, en duwt de balk zichtbaar
   naar links. Bewust scoped tot .page-linking: op de Strong's-pagina staat
   per vers een eigen .action-bar-inline in de lijst — die moet inline
   blijven, niet vastplakken aan het scherm. */
.page-linking .action-bar-inline {
    position: sticky;
    bottom: 0;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    z-index: 400;
    margin-top: 0;
    border-radius: 0;
    border: none;
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, .25);
    background: var(--nav);
    padding: .75rem 1.5rem;
}
.page-linking .action-bar-inline .action-label { color: var(--nav-text); }
.page-linking .action-bar-inline .action-hint  { color: var(--nav-text); opacity: .75; }
.page-linking .action-bar-inline .btn-cancel   { color: var(--nav-text); border-color: rgba(255,255,255,.2); }

.strongs-header {
    background: var(--bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1.5rem 2rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow);
}
.strongs-title { font-size: 1.5rem; font-weight: 500; margin-bottom: .75rem; }
.strongs-badge {
    font-family: var(--font-mono);
    background: #e8f0fc;
    color: var(--color-accent-2);
    padding: .15rem .6rem;
    border-radius: 4px;
    font-size: 1.25rem;
}
.back-link { font-size: .85rem; color: var(--color-ink-muted); display: block; margin-bottom: .5rem; }
.back-link:hover { color: var(--accent); }

.translits-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.translit-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .75rem;
    background: var(--card-warm);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    font-size: .85rem;
}
.occ-count {
    font-family: var(--font-mono);
    font-size: .72rem;
    color: var(--color-ink-muted);
}

.progress-block { margin-top: .5rem; }
.progress-labels {
    display: flex;
    justify-content: space-between;
    font-size: .8rem;
    color: var(--color-ink-muted);
    margin-bottom: .4rem;
}
.progress-bar-track {
    position: relative;
    height: 10px;
    background: var(--color-border-light);
    border-radius: 5px;
    overflow: hidden;
}
.progress-bar-linked {
    position: absolute;
    inset: 0;
    background: var(--color-proper-noun);
    border-radius: 5px;
    transition: width .4s ease;
}
.progress-bar-manual {
    position: absolute;
    inset: 0;
    background: var(--color-manual);
    border-radius: 5px;
    transition: width .4s ease;
}
.progress-pct {
    font-size: .8rem;
    color: var(--color-manual);
    font-family: var(--font-mono);
    margin-top: .3rem;
    font-weight: 500;
}

.strongs-verses { display: flex; flex-direction: column; gap: 1.25rem; }
.strongs-verse-block {
    background: var(--bg);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 1.25rem 1.5rem;
    box-shadow: var(--shadow);
}
.verse-block-header {
    margin-bottom: .75rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--divider);
}
.verse-ref-link {
    font-weight: 500;
    font-size: 1rem;
    color: var(--color-accent-2);
}
.verse-ref-link:hover { text-decoration: underline; }
.no-results { text-align: center; color: var(--color-ink-muted); font-style: italic; padding: 3rem; }

.translate-screen {
    max-width: 1300px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.translate-topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    background: var(--bg);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 1rem 1.5rem;
    box-shadow: var(--shadow);
}
.alignment-segment-nav { display: flex; gap: .4rem; }
.translate-selector-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}
.translate-selector-label {
    font-size: .85rem;
    font-weight: 500;
    color: var(--color-ink-light);
    white-space: nowrap;
}
.translate-selector-input {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: .4rem .75rem;
    font-family: var(--font-mono);
    font-size: 1rem;
    width: 140px;
    background: var(--card-warm);
    color: var(--text);
}
.translate-selector-input:focus {
    outline: 2px solid var(--color-accent-2);
    outline-offset: 1px;
}
.translate-saved-notice {
    margin-left: auto;
    color: var(--color-manual);
    font-weight: 500;
    font-size: 1rem;
}

.translate-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    align-items: start;
}
.translate-panels--three { grid-template-columns: 1fr 1fr 1fr; }
.translate-panel {
    background: var(--bg);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
}
.translate-panel--nl { border-color: var(--color-accent-2); }
.translate-panel-header {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--divider);
    flex-wrap: wrap;
}
.translate-panel-lang {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-ink-muted);
}
.translate-panel--nl .translate-panel-lang { color: var(--color-accent-2); }
.translate-panel-id {
    font-family: var(--font-mono);
    font-size: .85rem;
    color: var(--color-ink-muted);
}
.translate-field-group {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.translate-field-group--grow { flex: 1; }
.translate-field-label {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-ink-muted);
}
.translate-field-readonly {
    font-size: 1rem;
    color: var(--color-ink-light);
    background: var(--card-warm);
    border: 1px solid var(--divider);
    border-radius: var(--radius);
    padding: .5rem .75rem;
    min-height: 2.5rem;
    line-height: 1.5;
}
.translate-field-readonly--pre {
    white-space: pre-wrap;
    font-size: .85rem;
}
.translate-field-input,
.translate-field-textarea {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: .5rem .75rem;
    font-family: var(--font-ui);
    font-size: 1rem;
    color: var(--text);
    background: var(--bg);
    width: 100%;
    transition: border-color .15s;
}
.translate-field-input:focus,
.translate-field-textarea:focus {
    outline: none;
    border-color: var(--color-accent-2);
}
.translate-field-textarea {
    resize: vertical;
    min-height: 18rem;
    line-height: 1.5;
    font-size: .85rem;
    font-family: var(--font-mono);
}
.translate-panel-footer {
    padding-top: .75rem;
    border-top: 1px solid var(--divider);
    display: flex;
    justify-content: flex-end;
}
.btn-save { min-width: 110px; }
.translate-row--proposed {
    border-color: var(--color-accent-2);
    background: var(--card-warm);
}
.translate-proposal-btn {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--color-accent-2);
    text-decoration: none;
    padding: .4rem .1rem 0;
}
.translate-proposal-btn:hover { text-decoration: underline; }
.translate-proposal-btn.is-rejected { color: #922; }

/* ── Institutio: per-rij bewerk/voorstel-flow (translate_row_controller.js) ─── */
.translate-row-form {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.translate-row-form--grow { flex: 1; }
.translate-row-actions { display: flex; gap: .5rem; }
.translate-row-popup {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .35);
    z-index: 300;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.translate-row-popup.is-open { display: flex; }
.translate-row-popup-content {
    background: var(--bg);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .25);
    padding: 1.25rem;
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}
.translate-row-popup-actions {
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
}
.translate-row-popup-content .translate-field-textarea { min-height: 4rem; }
.translate-heading-bar {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    background: var(--bg);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: .75rem 1.25rem;
    box-shadow: var(--shadow);
}
.translate-heading-bar .translate-field-readonly {
    flex: 1;
    min-height: 0;
    border: none;
    background: none;
    padding: 0;
}
.translate-rows {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.translate-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    align-items: start;
    background: var(--bg);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    box-shadow: var(--shadow);
    padding: 1.25rem;
}
.translate-row-la {
    font-size: .85rem;
    color: var(--color-ink-light);
    line-height: 1.6;
    padding: .5rem .25rem;
}
.translate-row-textarea { min-height: 5.5rem; }
.translate-row--three { grid-template-columns: 1fr 1fr 1fr; }
.translate-row-weijenberg {
    font-size: .85rem;
    line-height: 1.6;
    padding: .5rem .25rem;
}
@media (max-width: 800px) {
    .translate-row, .translate-row--three { grid-template-columns: 1fr; }
}
.translate-empty {
    text-align: center;
    color: var(--color-ink-muted);
    font-style: italic;
    padding: 3rem;
}
@media (max-width: 800px) { .translate-panels { grid-template-columns: 1fr; } }

.strongs-badge-small {
    font-family: var(--font-mono);
    font-size: .8rem;
    background: var(--card-warm);
    border: 1px solid var(--color-border);
    border-radius: 3px;
    padding: .1rem .45rem;
    color: var(--color-ink-muted);
}

.strongs-entry {
    background: var(--bg);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 1.25rem 1.5rem;
    box-shadow: var(--shadow);
    margin-bottom: 1.25rem;
}
.strongs-entry-word {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .75rem;
}
.strongs-lemma {
    font-size: 2rem;
    font-family: var(--font-greek);
    color: var(--color-gk);
    line-height: 1;
}
.strongs-lemma-he {
    color: var(--color-he);
    direction: rtl;
    font-family: var(--font-hebrew);
}
.strongs-translit {
    font-style: italic;
    color: var(--color-ink-light);
    font-size: 1.1rem;
}
.strongs-pronun {
    color: var(--color-ink-muted);
    font-size: .85rem;
    font-family: var(--font-mono);
}
.strongs-pos {
    font-size: .8rem;
    font-family: var(--font-mono);
    background: var(--card-warm);
    border: 1px solid var(--color-border);
    border-radius: 3px;
    padding: .1rem .4rem;
    color: var(--color-ink-light);
}
.strongs-short-def {
    font-style: italic;
    color: var(--color-ink-light);
    margin-bottom: .75rem;
    font-size: 1rem;
}
.strongs-definition {
    font-family: var(--font-serif);
    margin: 0 0 .75rem 1.5rem;
    font-size: 1rem;
    color: var(--text);
    line-height: 1.6;
}
.strongs-meta {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    border-top: 1px solid var(--divider);
    padding-top: .75rem;
    font-size: .85rem;
    color: var(--color-ink-light);
}
.strongs-meta-row { display: flex; gap: .75rem; }
.strongs-meta-label {
    font-weight: 600;
    min-width: 5rem;
    color: var(--color-ink-muted);
    font-family: var(--font-mono);
    font-size: .8rem;
    padding-top: .15rem;
}
.strongs-occurrence {
    font-size: .85rem;
    color: var(--col-label);
    font-family: var(--font-mono);
    margin-top: .5rem;
}

.word-links-list { display: flex; flex-direction: column; gap: 1rem; }
.word-links-entry {
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: .75rem 1rem;
}
.word-links-entry-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .5rem;
}
.word-links-ref { font-size: .85rem; color: var(--color-ink-light); }
.word-links-tw  { font-size: 1rem; }
.word-filler-tag {
    font-size: .72rem;
    font-style: italic;
    color: var(--color-ink-muted);
}
.word-links-confidence-table-wrap { overflow-x: auto; }
.word-links-confidence-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .8rem;
}
.word-links-confidence-table th {
    text-align: left;
    font-weight: 600;
    color: var(--color-ink-muted);
    font-size: .8rem;
    padding: .25rem .5rem .25rem 0;
    border-bottom: 1px solid var(--divider);
}
.word-links-confidence-table td {
    padding: .3rem .5rem .3rem 0;
    border-bottom: 1px solid var(--divider);
    vertical-align: top;
    overflow-wrap: anywhere;
}
.word-links-confidence-table tr:last-child td { border-bottom: none; }
.word-links-no-confidence {
    font-size: .8rem;
    font-style: italic;
    color: var(--color-ink-muted);
}
.word-links-id-cell {
    font-size: .72rem;
    font-family: var(--font-mono);
    color: var(--color-ink-muted);
}
.word-links-email { color: var(--color-ink-muted); }

.page-linking-stats { max-width: 1400px; margin: 0 auto; padding: 1.5rem; }
.stats-section { margin-top: 1.5rem; }
.stats-count { font-weight: 400; font-size: .8rem; color: var(--color-ink-muted); }
.stats-table { width: 100%; border-collapse: collapse; font-size: .85rem; white-space: nowrap; }
.stats-table th {
    text-align: left;
    font-weight: 600;
    color: var(--color-ink-muted);
    font-size: .8rem;
    padding: .3rem .6rem .3rem 0;
    border-bottom: 1px solid var(--divider);
    position: sticky;
    top: 0;
    background: var(--bg);
}
.stats-table td {
    padding: .35rem .6rem .35rem 0;
    border-bottom: 1px solid var(--divider);
}
.stats-table tr:last-child td { border-bottom: none; }
.stats-lemma { font-size: 1.1rem; font-family: var(--font-greek); }
.stats-lemma-he { font-family: var(--font-hebrew); direction: rtl; text-align: right; }
.stats-translit { font-style: italic; color: var(--color-ink-light); }
.stats-total { font-weight: 600; }
.stats-shortdef {
    max-width: 28rem;
    color: var(--color-ink-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.word-filler {
    font-style: italic;
    color: var(--color-ink-muted);
}
.filler-marker {
    font-size: .7em;
    vertical-align: super;
    color: var(--color-ink-muted);
}
.panel-hsv    .word-filler,
.panel-sv     .word-filler,
.panel-svgbs  .word-filler,
.panel-sv1657 .word-filler {
    cursor: default;
}

.link-dot.link-dot-propagated { border-style: dashed; }
.method-auto_source_pivot  { background: var(--color-auto-pivot);      color: #fff; }
.method-auto_sequence      { background: var(--color-auto-sequence);    color: #fff; }
.method-auto_positional    { background: var(--color-auto-positional);  color: #fff; }
/* link-dots: auto-methodes zelfde neutrale stijl als de andere dots */
.link-dot.method-auto_source_pivot,
.link-dot.method-auto_sequence,
.link-dot.method-auto_positional { background: transparent; color: #4d7a63; }
.dot.method-auto_source_pivot  { background: var(--color-auto-pivot); }
.dot.method-auto_sequence      { background: var(--color-auto-sequence); }
.dot.method-auto_positional    { background: var(--color-auto-positional); }
.dot.method-manual             { background: var(--color-manual); }
.dot.method-simalign           { background: var(--color-auto-pivot); }
.dot.method-none               { background: var(--color-border); }

.page-trans-home {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1rem 3rem;
}
.trans-pair-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
    margin: 1.5rem 0;
}
.trans-pair-card {
    background: var(--bg);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 1.25rem 1.5rem;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.trans-pair-header { display: flex; align-items: center; gap: .5rem; }
.trans-badge {
    font-family: var(--font-mono);
    font-size: .85rem;
    font-weight: 600;
    background: var(--card-warm);
    border: 1px solid var(--color-border);
    border-radius: 3px;
    padding: .15rem .5rem;
    color: var(--color-ink-light);
}
.trans-pair-arrow { font-size: 1.1rem; color: var(--color-ink-muted); }
.trans-pair-family {
    font-size: .8rem;
    color: var(--color-ink-muted);
    margin-left: auto;
}
.trans-pair-names {
    font-size: .85rem;
    color: var(--color-ink-light);
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    align-items: center;
}
.trans-pair-name-sep { color: var(--color-ink-muted); }
.trans-home-hint {
    background: var(--card-warm);
    border: 1px solid var(--divider);
    border-radius: 6px;
    padding: 1rem 1.25rem;
    font-size: .85rem;
    color: var(--color-ink-light);
    margin-top: 1.5rem;
}
.trans-home-hint code {
    font-family: var(--font-mono);
    font-size: .8rem;
    background: var(--bg);
    border: 1px solid var(--color-border);
    border-radius: 3px;
    padding: .1rem .4rem;
}

.trans-linking-screen {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.trans-linking-topbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--bg);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: .75rem 1.25rem;
    box-shadow: var(--shadow);
    flex-wrap: wrap;
}
.trans-linking-breadcrumb {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
}
.trans-linking-breadcrumb a { color: var(--color-accent-2); }
.breadcrumb-sep { color: var(--color-ink-muted); }
.trans-linking-nav {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
}
.nav-pos { font-family: var(--font-mono); font-size: .85rem; color: var(--color-ink-muted); }
.trans-linking-actions { display: flex; gap: .5rem; }
.trans-linking-status-bar {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: var(--card-warm);
    border: 1px solid var(--divider);
    border-radius: 4px;
    padding: .5rem 1rem;
}
.trans-linking-status {
    flex: 1;
    font-size: .85rem;
    color: var(--color-ink-light);
    font-style: italic;
}
.btn-save-links {
    flex-shrink: 0;
    padding: .35rem .9rem;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: .85rem;
    cursor: pointer;
    font-style: normal;
}
.btn-save-links:hover { filter: brightness(1.1); }
.btn-save-links:disabled { opacity: .5; cursor: not-allowed; }
.trans-linking-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}
.trans-linking-col {
    background: var(--bg);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 1.25rem;
    box-shadow: var(--shadow);
}
.trans-linking-col-a { border-top: 3px solid var(--accent); }
.trans-linking-col-b { border-top: 3px solid var(--color-accent-2); }
.trans-col-header {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--divider);
}
.trans-col-name { font-size: .85rem; color: var(--color-ink-light); }
.trans-word-list {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .3rem;
    line-height: 1.8;
}
.trans-word {
    cursor: pointer;
    padding: .2rem .5rem;
    border-radius: var(--radius);
    border: 1px solid transparent;
    transition: background .12s, border-color .12s;
    font-size: 1rem;
    user-select: none;
}
.trans-word:hover {
    background: var(--card-warm);
    border-color: var(--color-border);
}
.trans-word-active {
    background: var(--color-accent-2) !important;
    color: #fff !important;
    border-color: var(--color-accent-2) !important;
}
.trans-word-linked {
    background: #e8f4e8;
    border-color: var(--color-manual);
}
.trans-word-linked-auto {
    background: #e8eef4;
    border-color: var(--color-auto-pivot);
    border-style: dashed;
}
.trans-word-unlinked { opacity: .45; }
.trans-word-unlinked:hover { opacity: 1; }

.trans-links-panel {
    background: var(--bg);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 1.25rem;
    box-shadow: var(--shadow);
}
.trans-links-heading {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 1rem;
    color: var(--color-ink-light);
}
.trans-links-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.trans-links-table th {
    text-align: left;
    padding: .35rem .6rem;
    font-size: .8rem;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-ink-muted);
    border-bottom: 1px solid var(--divider);
}
.trans-links-table td {
    padding: .35rem .6rem;
    border-bottom: 1px solid var(--divider);
    vertical-align: middle;
}
.trans-links-table tr:last-child td { border-bottom: none; }
.conf-cell {
    text-align: right;
    font-size: .8rem;
    color: var(--color-ink-muted);
    white-space: nowrap;
}

.method-badge {
    font-family: var(--font-mono);
    font-size: .8rem;
    border-radius: 3px;
    padding: .1rem .45rem;
    display: inline-block;
}
.method-badge-manual           { background: #d4edda; color: #1a7a3a; }
.method-badge-manual_empty     { background: #f8d7da; color: #721c24; }
.method-badge-auto_source_pivot{ background: #d4e5f5; color: #2e5c8a; }
.method-badge-auto_sequence    { background: #d4edda; color: #5c7a2e; opacity: .8; }
.method-badge-auto_positional  { background: #fff3cd; color: #7a6b2e; }

.confidence-badge {
    font-family: var(--font-mono);
    font-size: .8rem;
    border-radius: 3px;
    padding: .1rem .4rem;
}
.conf-high   { background: #d4edda; color: #1a7a3a; }
.conf-mid    { background: #fff3cd; color: #7a6b2e; }
.conf-low    { background: #f8d7da; color: #721c24; }
.conf-manual { background: #d4edda; color: #1a7a3a; font-weight: 600; }

.btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: .1rem .3rem;
    border-radius: var(--radius);
    color: var(--color-ink-muted);
    transition: color .12s, background .12s;
}
.btn-delete:hover { color: #c0392b; background: #fdecea; }

.trans-linking-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    font-size: .85rem;
    color: var(--color-ink-light);
    padding: .75rem 1rem;
    background: var(--card-warm);
    border: 1px solid var(--divider);
    border-radius: 4px;
}

@media (max-width: 700px) {
    .trans-linking-columns { grid-template-columns: 1fr; }
}

/* ── Linking home ─────────────────────────────────────────────────────────── */
.page-linking-home { max-width: 900px; margin: 0 auto; }
.linking-header { text-align: center; padding: 2rem 0 2.5rem; }
.linking-header h1 { font-family: var(--font-serif); font-size: 2rem; font-weight: 400; }
.linking-sub { color: var(--color-ink-muted); margin-top: .5rem; font-style: italic; }
.linking-method-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
@media (max-width: 700px) { .linking-method-grid { grid-template-columns: 1fr; } }

.method-card {
    background: var(--card-warm);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 2rem;
    box-shadow: var(--shadow);
}
.method-icon { font-size: 2.5rem; margin-bottom: .75rem; }
.method-card h2 { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 400; margin-bottom: .5rem; }
.method-card p { color: var(--color-ink-light); font-size: 1rem; margin-bottom: 1.5rem; line-height: 1.6; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-size: .85rem; color: var(--color-ink-light); margin-bottom: .3rem; }
.form-group select,
.form-group input[type="number"],
.form-group input[type="text"],
.form-group input[type="password"] {
    width: 100%;
    padding: .55rem .8rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-family: var(--font-serif);
    font-size: 1rem;
    background: var(--bg);
    color: var(--color-ink);
}
.form-group select:focus,
.form-group input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(122,59,30,.1);
}
.field-hint { font-size: .8rem; color: var(--color-ink-muted); margin-top: .3rem; }

/* ── Utility ───────────────────────────────────────────────────────────────── */
.is-hidden { display: none; }

/* ── Alert messages ────────────────────────────────────────────────────────── */
.alert { padding: .75rem 1rem; border-radius: 4px; margin-bottom: 1.25rem; }
.alert-error  { background: #fdf0ee; color: #922; border: 1px solid #f0b8b0; }
.alert-success { background: #edf7ed; color: #2a6a2a; border: 1px solid #b8ddb8; }
.alert-warning { background: #fdf6e3; color: #8a6414; border: 1px solid #f0dfa0; }

/* ── Profile page ──────────────────────────────────────────────────────────── */
.profile-page { max-width: 560px; margin: 0 auto; }
.profile-page h1 { font-family: var(--font-serif); font-weight: 400; font-size: 1.6rem; margin-bottom: 1.5rem; }
.profile-card {
    background: var(--card-warm);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 1.5rem 2rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow);
}
.profile-card h2 {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--color-border-light);
    padding-bottom: .5rem;
}
.profile-field { margin-bottom: .35rem; }
.profile-form-field { margin-bottom: 1rem; }
.profile-form-field--last { margin-bottom: 1.25rem; }
.profile-form-field label,
.form-group__label { display: block; font-size: .85rem; color: var(--color-ink-light); margin-bottom: .35rem; }
.form-input {
    width: 100%;
    padding: .6rem .85rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-family: var(--font-serif);
    font-size: 1rem;
    background: var(--bg);
    color: var(--color-ink);
}
.btn-submit {
    padding: .55rem 1.5rem;
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-family: var(--font-serif);
    font-size: 1rem;
    cursor: pointer;
}
.form-check label { margin: 0; }

/* ── Strong's note (no data available) ────────────────────────────────────── */
.strongs-note { color: var(--color-ink-muted); font-style: italic; font-size: .85rem; }

/* ── Strong's home search card ────────────────────────────────────────────── */
.page-strongs-home h1 { font-family: var(--font-serif); font-weight: 400; font-size: 1.6rem; margin-bottom: .5rem; }
.page-strongs-home > p { color: var(--color-ink-muted); margin-bottom: 2rem; font-style: italic; }
.strongs-home-card {
    background: var(--card-warm);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 2rem;
    box-shadow: var(--shadow);
}
.strongs-home-card .form-group select { margin-bottom: .75rem; }
.strongs-home-card input[type="text"] {
    width: 100%;
    padding: .65rem .9rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-family: var(--font-serif);
    font-size: 1.1rem;
    text-align: center;
}
.strongs-home-card .field-hint { margin-top: .35rem; }

/* ── Admin: user edit page ─────────────────────────────────────────────────── */
.container--narrow { max-width: 520px; margin: 2rem auto; padding: 0 1rem; }

/* ── Strong's als losse pagina (buiten het turbo-frame, zie strongs_page.html.twig) ── */
.strongs-standalone-back { margin-bottom: 1.25rem; }

/* ── Foutpagina's (404 / 500) ─────────────────────────────────────────────── */
.error-page { text-align: center; padding: 4rem 1rem; }
.error-page-code {
    font-family: var(--font-serif);
    font-size: 4rem;
    font-weight: 400;
    color: var(--color-ink-muted);
    margin-bottom: 1rem;
}
.error-page-message { font-size: 1.1rem; margin-bottom: 2rem; }
.page-heading { font-size: 1.6rem; font-weight: 500; margin-bottom: 1.5rem; }
.form-group--last { margin-bottom: 1.5rem; }
.form-actions { display: flex; gap: 1rem; }
.role-option { margin-top: .4rem; }
.role-option > label { display: flex; align-items: center; gap: .5rem; font-weight: normal; }
.email-display { padding: .5rem 0; color: var(--color-muted); }

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn-primary {
    padding: .55rem 1.25rem;
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
}
.btn-primary:hover { filter: brightness(1.08); }
.strongs-home-card .btn-primary { width: 100%; padding: .7rem; }

/* ── Linking: legend word-filler ───────────────────────────────────────────── */
.legend-item.word-filler { padding: .2rem .5rem; }

/* Brede tabellen zonder wrapper duwen op mobiel de hele layout-viewport breder
   dan het scherm — niet alleen de tabel, de héle pagina zoomt dan uit. Deze
   wrapper begrenst de tabel tot een eigen horizontaal scrollbare strook. */
.table-scroll { overflow-x: auto; }

/* ── Admin: users table ────────────────────────────────────────────────────── */
.container--wide { max-width: 900px; margin: 2rem auto; padding: 0 1rem; }
.admin-page-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1.5rem; }
.admin-page-header h1 { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 400; }
.list-search-input {
    display: block;
    width: 100%;
    max-width: 340px;
    padding: .5rem .75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-family: var(--font-ui);
    font-size: .9rem;
    background: var(--card-warm);
    color: var(--text);
    margin-bottom: 1.25rem;
}
.list-search-input:focus { outline: 2px solid var(--color-accent-2); outline-offset: 1px; }
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-ui);
    font-size: .85rem;
    background: var(--card-warm);
    border: 1px solid var(--divider);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow);
}
.admin-table thead tr { border-bottom: 1px solid var(--color-border); }
.admin-table th {
    text-align: left;
    padding: .75rem 1rem;
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-ink-muted);
    font-weight: 600;
}
.admin-table tbody tr { border-bottom: 1px solid var(--divider); transition: background .12s; }
.admin-table tbody tr:hover { background: var(--hover-warm); }
.admin-table tbody tr:last-child { border-bottom: none; }
.admin-table td { padding: .75rem 1rem; }
.admin-table td:last-child { white-space: nowrap; }
.admin-table .empty-row td { padding: 1rem .75rem; color: var(--color-muted); }
.role-badge {
    display: inline-block;
    padding: .15rem .5rem;
    background: var(--hover-warm);
    color: var(--color-accent);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: .72rem;
    letter-spacing: .02em;
    border-radius: 100px;
    margin: .1rem;
}
.btn-danger-inline { background: none; border: none; color: var(--color-error, #922); cursor: pointer; padding: 0; margin-left: .75rem; }
.btn-inline { background: none; border: none; color: var(--color-accent-2); cursor: pointer; padding: 0; margin-left: .75rem; text-decoration: underline; }
.form-inline { display: inline; }

/* Mobiel: kaarten i.p.v. een scrollende tabel op Gebruikersbeheer -- zelfde
   aanpak als .hist-align-overview-table-wrap / .blog-mine-table-wrap, met
   een label:waarde-lijstje voor de drie datapunten (Aangemaakt/Laatste
   login/Apparaten) i.p.v. een kale bullet-regel: bij drie losse getallen/
   data zonder context is een label nodig om leesbaar te blijven. */
.admin-users-cards { display: none; }
@media (max-width: 768px) {
    .admin-users-table-wrap { display: none; }
    .admin-users-cards { display: flex; flex-direction: column; gap: .6rem; margin-top: .5rem; }
    .admin-users-card {
        padding: .75rem .9rem;
        background: var(--card-warm);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
    }
    .admin-users-card-name { font-weight: 600; }
    .admin-users-card-email { font-size: .85rem; color: var(--color-ink-muted); word-break: break-word; margin-bottom: .5rem; }
    .admin-users-card-roles { margin-bottom: .6rem; }
    .admin-users-card-roles .role-badge { margin: .1rem .3rem .1rem 0; }

    .admin-users-card-meta {
        border-top: 1px solid var(--color-border-light);
        border-bottom: 1px solid var(--color-border-light);
        padding: .5rem 0;
        margin: 0 0 .6rem;
    }
    .admin-users-card-meta > div { display: flex; justify-content: space-between; gap: 1rem; padding: .15rem 0; }
    .admin-users-card-meta dt { font-size: .78rem; color: var(--color-ink-muted); }
    .admin-users-card-meta dd { margin: 0; font-family: var(--font-mono); font-size: .82rem; text-align: right; }

    .admin-users-card-actions { display: flex; align-items: center; justify-content: space-between; }
}

/* Mobiel: kaarten i.p.v. een scrollende tabel op Nieuwsoverzicht-historie --
   zelfde aanpak/opmaak als .admin-users-cards. De "Link"-rij krijgt een
   eigen modifier: URL's hebben geen spaties om op te wrappen, dus zonder
   overflow-wrap: anywhere zou een lange link de kaart breder duwen dan het
   scherm (in tegenstelling tot .hist-align-word eerder, kan deze kaart niet
   opzij scrollen -- hier is wél "anywhere" de juiste keuze). */
.admin-news-digest-cards { display: none; }
@media (max-width: 768px) {
    .admin-news-digest-table-wrap { display: none; }
    .admin-news-digest-cards { display: flex; flex-direction: column; gap: .6rem; margin-top: .5rem; }
    .admin-news-digest-card {
        padding: .75rem .9rem;
        background: var(--card-warm);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
    }
    .admin-news-digest-card-title { font-weight: 600; margin-bottom: .5rem; }

    .admin-news-digest-card-meta {
        border-top: 1px solid var(--color-border-light);
        border-bottom: 1px solid var(--color-border-light);
        padding: .5rem 0;
        margin: 0 0 .6rem;
    }
    .admin-news-digest-card-meta > div { display: flex; justify-content: space-between; gap: 1rem; padding: .15rem 0; }
    .admin-news-digest-card-meta dt { font-size: .78rem; color: var(--color-ink-muted); flex-shrink: 0; }
    .admin-news-digest-card-meta dd { margin: 0; font-family: var(--font-mono); font-size: .82rem; text-align: right; }
    .admin-news-digest-card-link-row dd { overflow-wrap: anywhere; }
}

/* ── Institutio: hoofdpagina (inhoudsopgave) ────────────────────────────────── */
.page-institutio-home { max-width: 700px; margin: 0 auto; padding: 2rem 1.25rem 3rem; }
.institutio-home-header { text-align: center; margin-bottom: 2.5rem; }
.institutio-home-header h1 {
    font-family: var(--font-serif);
    font-size: 1.7rem;
    font-weight: 600;
    font-style: italic;
    color: var(--text);
    margin: 0 0 .4rem;
}
.institutio-home-subtitle {
    font-family: var(--font-ui);
    font-size: .85rem;
    color: var(--col-label);
    margin: 0;
}

.institutio-toc { display: flex; flex-direction: column; gap: 2rem; }

.institutio-toc-entry {
    display: flex;
    gap: 1rem;
    align-items: baseline;
    padding: .55rem 0;
    border-bottom: 1px solid var(--divider);
    text-decoration: none;
    color: inherit;
    transition: background .1s;
}
.institutio-toc-entry:hover { background: var(--hover-warm); }
.institutio-toc-entry:last-child { border-bottom: none; }

.institutio-toc-front {
    padding-bottom: 1.1rem;
    margin-bottom: .3rem;
    border-bottom: 2px solid var(--divider);
}

.institutio-toc-num {
    flex: 0 0 auto;
    min-width: 1.6rem;
    text-align: right;
    font-family: var(--font-mono);
    font-size: .85rem;
    color: var(--verse-num);
}
.institutio-toc-titles { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.institutio-toc-title {
    font-family: var(--font-serif);
    font-size: 1rem;
    color: var(--text);
    line-height: 1.35;
}
.institutio-toc-title-latin {
    font-style: italic;
    color: var(--col-label);
}
.institutio-toc-zondagen {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .6rem;
    padding: 0 0 1rem 2.6rem;
    border-bottom: 1px solid var(--divider);
}
.institutio-toc-zondag-link {
    font-family: var(--font-ui);
    font-size: .78rem;
    color: var(--col-label);
    text-decoration: none;
    padding: .1rem .5rem;
    border: 1px solid var(--divider);
    border-radius: 999px;
    transition: background .1s, color .1s, border-color .1s;
}
.institutio-toc-zondag-link:hover {
    background: var(--hover-warm);
    color: var(--accent);
    border-color: var(--accent);
}

.institutio-toc-book-title {
    font-family: var(--font-ui);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 .3rem;
}

/* ── Institutio: hoofdstukweergave ─────────────────────────────────────────── */
.page-institutio { max-width: 760px; margin: 0 auto; padding: 0 1.25rem 3rem; }
.institutio-heading {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    font-weight: 600;
    font-style: italic;
    color: var(--text);
    margin: 1.5rem 0 .3rem;
    line-height: 1.4;
}
.institutio-heading-solo { margin-bottom: 2rem; }

/* HC-only: toggle for highlighting where the main (1697-traditie) Latin
   column differs from the editio-princeps-1563 column. Off by default --
   .institutio-word-hc-diff carries no visible styling until :root gets
   data-hc-diff="on" from hc_diff_toggle_controller.js. */
.institutio-hc-diff-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin: 0 0 1.6rem;
}
.institutio-hc-diff-btn {
    font-family: var(--font-ui);
    font-size: .8rem;
    font-weight: 600;
    color: var(--col-label);
    background: var(--card-warm);
    border: 1px solid var(--divider);
    border-radius: 999px;
    padding: .4rem .9rem;
    cursor: pointer;
    transition: background .1s, color .1s, border-color .1s;
}
.institutio-hc-diff-btn:hover {
    background: var(--hover-warm);
}
.institutio-hc-diff-btn[aria-pressed="true"] {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
}
.institutio-hc-diff-hint {
    font-family: var(--font-ui);
    font-size: .78rem;
    font-style: italic;
    color: var(--col-label);
}
.institutio-word-hc-diff {
    border-radius: 3px;
}
:root[data-hc-diff="on"] .institutio-word-hc-diff {
    background: color-mix(in srgb, var(--accent) 22%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent);
}
.institutio-heading-ref {
    font-style: normal;
    font-family: var(--font-mono);
    font-size: 1rem;
    color: var(--col-label);
    margin-right: .3rem;
}
.institutio-heading-nl {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-style: normal;
    color: var(--col-label);
    margin: 0 0 2rem;
    line-height: 1.4;
}
.institutio-sections { display: flex; flex-direction: column; gap: 1.4rem; }
/* Sub-heading marking where a new Zondag (Lord's Day) begins within an
   HC chapter -- see ConfessionController::HC_ZONDAG_STARTS. Sits between
   two .institutio-section siblings inside .institutio-sections, so its
   own top margin (rather than the flex gap) is what separates it from
   the previous question, and it hugs the question that follows. */
.institutio-heading-zondag {
    font-family: var(--font-ui);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 1.4rem 0 -0.6rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--divider);
}
.institutio-sections > .institutio-heading-zondag:first-child {
    margin-top: 0;
}
.institutio-section {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding-bottom: 1.4rem;
    border-bottom: 1px solid var(--divider);
}
.institutio-section:last-child { border-bottom: none; padding-bottom: 0; }
.institutio-section-num {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: .8rem;
    color: var(--verse-num);
    min-width: 1.4rem;
    text-align: right;
    padding-top: .2rem;
}
.institutio-sentence-group {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    flex: 1 1 auto;
    min-width: 0;
}
.institutio-sentence-row {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
}
/* HC shows up to N readings side by side (editio princeps 1563 / main-Latin /
   Den Heijer / Zwanepol-HSV, plus any future layer) -- one column per layer,
   count set via the --hc-cols custom property (see chapter.html.twig) so
   this scales without a CSS change each time a layer is added. Each layer
   is its own self-contained block (label+V+A together, not three parallel
   label/V/A rows) specifically so the mobile collapse below can turn each
   block into a simple vertical stack without losing which label belongs to
   which question/answer -- three separate collapsed rows would instead
   group every label together, then every question, then every answer. */
.institutio-hc-layers {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--hc-cols, 3), 1fr);
    gap: 1.5rem;
    align-items: start;
}
.institutio-hc-layer {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-width: 0;
}
@media (max-width: 960px) {
    .institutio-hc-layers { grid-template-columns: 1fr; gap: 1.1rem; }
}
.institutio-edit-btn {
    position: absolute;
    top: -.15rem;
    right: -1.6rem;
    width: 1.3rem;
    height: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    line-height: 1;
    color: var(--col-label);
    background: var(--card-warm);
    border: 1px solid var(--divider);
    border-radius: 3px;
    text-decoration: none;
    opacity: 0;
    transition: opacity .12s, color .12s, border-color .12s;
}
.institutio-sentence-row:hover .institutio-edit-btn,
.institutio-sentence-row:focus-within .institutio-edit-btn,
.institutio-edit-btn:focus {
    opacity: 1;
}
.institutio-edit-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
}

@media (max-width: 720px) {
    .institutio-edit-btn { right: 0; top: -1.4rem; }
}
/* Per-layer Dutch-translation edit pencil (belijdenisgeschriften) -- same
   look as .institutio-edit-btn, but inline rather than absolutely
   positioned: several of these can sit side by side in one
   .institutio-hc-layers row (one per Dutch layer), unlike the single
   whole-row .institutio-edit-btn for the Latin source text. */
.institutio-edit-btn-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    margin-left: .4rem;
    font-size: .75rem;
    line-height: 1;
    vertical-align: middle;
    color: var(--col-label);
    background: var(--card-warm);
    border: 1px solid var(--divider);
    border-radius: 3px;
    text-decoration: none;
    opacity: 0;
    transition: opacity .12s, color .12s, border-color .12s;
}
.institutio-sentence-nl:hover .institutio-edit-btn-inline,
.institutio-hc-layer:hover .institutio-edit-btn-inline,
.institutio-edit-btn-inline:focus {
    opacity: 1;
}
.institutio-edit-btn-inline:hover {
    color: var(--accent);
    border-color: var(--accent);
}
.institutio-sentence-la,
.institutio-sentence-nl {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    line-height: 1.65;
    color: var(--text);
    margin: 0;
}
.institutio-no-translation {
    font-family: var(--font-ui);
    font-size: .85rem;
    font-style: italic;
    color: var(--col-label);
}
.institutio-layer-label {
    display: block;
    font-family: var(--font-ui);
    font-size: .7rem;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--col-label);
}

@media (max-width: 720px) {
    .institutio-sentence-row { grid-template-columns: 1fr; gap: .3rem; }
}

/* ── Institutio: kritisch-apparaat referenties (variant/citaat) ────────────── */
.institutio-note {
    position: relative;
    cursor: help;
    outline: none;
}
.institutio-note-glyph {
    font-family: var(--font-mono);
    font-size: .7em;
    font-weight: 700;
    padding: 0 .1em;
}
.institutio-note-variant .institutio-note-glyph { color: var(--col-label); }
.institutio-note-citation .institutio-note-glyph { color: var(--color-accent-2); }

.institutio-note-popup {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--nav);
    color: var(--nav-text);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    padding: 6px 10px;
    font-family: var(--font-ui);
    font-size: .8rem;
    font-style: normal;
    line-height: 1.4;
    white-space: normal;
    width: max-content;
    max-width: min(320px, 80vw);
    text-align: left;
    z-index: 200;
    box-shadow: var(--shadow);
}
.institutio-note-popup-kind {
    display: block;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--gold);
    margin-bottom: 2px;
}
.institutio-note:hover .institutio-note-popup,
.institutio-note:focus-within .institutio-note-popup {
    display: block;
}
.institutio-note-popup::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--nav);
}

/* ── Institutio: woord-hover (lemma + Nederlandse gloss) ────────────────────── */
.institutio-word {
    position: relative;
    cursor: help;
    outline: none;
    border-bottom: 1px dotted transparent;
    transition: border-color .1s;
}
.institutio-word:hover,
.institutio-word:focus-within {
    border-bottom-color: var(--col-label);
}
.institutio-word-popup {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--nav);
    color: var(--nav-text);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    padding: 6px 10px;
    font-family: var(--font-ui);
    font-size: .8rem;
    font-style: normal;
    line-height: 1.4;
    white-space: normal;
    width: max-content;
    max-width: min(280px, 80vw);
    text-align: left;
    z-index: 200;
    box-shadow: var(--shadow);
}
.institutio-word-lemma {
    display: block;
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--gold);
}
.institutio-word-gloss {
    display: block;
    margin-top: 2px;
}
.institutio-word-lemma-link {
    color: inherit;
    text-decoration: underline;
    font-style: normal;
}
.institutio-word-lemma-link:hover { color: var(--nav-text); }
.institutio-word:hover .institutio-word-popup,
.institutio-word:focus-within .institutio-word-popup {
    display: block;
}
.institutio-word-popup::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--nav);
}

/* ── Institutio: verwijzing-marker als link (Schriftplaats aanklikbaar) ─────── */
.institutio-note-glyph a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.institutio-note-glyph a:hover,
.institutio-note-glyph a:focus { text-decoration: underline; }

/* ── Institutio: Bijbeltekst-zijpaneel (HSV), zelfde patroon als Strong's ──── */
.institutio-verse-sidebar {
    position: fixed;
    top: var(--nav-height);
    right: 0;
    width: 340px;
    height: calc(100vh - var(--nav-height));
    background: var(--bg);
    border-left: 1px solid var(--divider);
    box-shadow: -4px 0 16px rgba(0, 0, 0, .08);
    display: none;
    flex-direction: column;
    z-index: 150;
    overflow: hidden;
}
.institutio-verse-sidebar.is-open { display: flex; }

.institutio-verse-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--divider);
    background: var(--card-warm);
    flex-shrink: 0;
}
.institutio-verse-sidebar-title {
    font-size: 9px;
    font-weight: 400;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--col-label);
    font-family: var(--font-ui);
}
.institutio-verse-sidebar-close {
    background: none;
    border: none;
    font-size: 18px;
    color: var(--verse-num);
    cursor: pointer;
    line-height: 1;
    padding: 0 2px;
    transition: color .15s;
}
.institutio-verse-sidebar-close:hover { color: var(--text); }

.institutio-verse-sidebar turbo-frame {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: block;
}

.institutio-verse-entry + .institutio-verse-entry { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--divider); }
.institutio-verse-ref {
    font-family: var(--font-ui);
    font-size: .8rem;
    font-weight: 600;
    color: var(--gold);
    margin-bottom: .3rem;
}
.institutio-verse-trans {
    font-size: .72rem;
    font-weight: 400;
    letter-spacing: .04em;
    color: var(--col-label);
    margin-left: .3em;
}
.institutio-verse-text {
    font-family: var(--font-serif);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--text);
}
.institutio-verse-missing,
.institutio-verse-placeholder {
    font-family: var(--font-ui);
    font-size: .85rem;
    font-style: italic;
    color: var(--col-label);
}

@media (max-width: 768px) {
    .institutio-verse-sidebar {
        display: flex;
        top: auto;
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        height: 52vh;
        border-left: none;
        border-top: 2px solid var(--accent);
        border-radius: var(--radius) var(--radius) 0 0;
        transform: translateY(100%);
        transition: transform .3s ease;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, .18);
        pointer-events: none;
    }
    .institutio-verse-sidebar.is-open {
        transform: translateY(0);
        pointer-events: auto;
    }
}

/* ── Belijdenisgeschriften: bewijsteksten (HC) ─────────────────────────────── */
.confession-proof-list {
    margin-top: .8rem;
    font-family: var(--font-ui);
    font-size: .82rem;
    color: var(--col-label);
}
.confession-proof-list summary {
    cursor: pointer;
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    width: max-content;
}
.confession-proof-list ol {
    list-style: none;
    margin: .5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    line-height: 1.45;
}
.confession-proof-glyph {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--color-accent-2);
    text-decoration: none;
}
.confession-proof-glyph:hover,
.confession-proof-glyph:focus { text-decoration: underline; }
/* Bijbelverwijzing die in de tekst zelf staat (Canones, NGB) -- klikbaar */
.confession-scripture-ref {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--color-accent-2);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    cursor: pointer;
}
.confession-scripture-ref:hover,
.confession-scripture-ref:focus { color: var(--color-accent-2); }
.institutio-verse-context {
    font-family: var(--font-ui);
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--col-label);
    margin-bottom: .8rem;
}
.confession-proof-verse-num {
    font-family: var(--font-ui);
    font-size: .65em;
    color: var(--col-label);
    margin-right: .15em;
}

/* ── Institutio: vertaalvoorstel-zijpaneel (zelfde patroon als het
   Bijbeltekst-citaatpaneel hierboven) ───────────────────────────────────────── */
.institutio-proposal-sidebar {
    position: fixed;
    top: var(--nav-height);
    right: 0;
    width: 380px;
    height: calc(100vh - var(--nav-height));
    background: var(--bg);
    border-left: 1px solid var(--divider);
    box-shadow: -4px 0 16px rgba(0, 0, 0, .08);
    display: none;
    flex-direction: column;
    z-index: 150;
    overflow: hidden;
}
.institutio-proposal-sidebar.is-open { display: flex; }

.institutio-proposal-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--divider);
    background: var(--card-warm);
    flex-shrink: 0;
}
.institutio-proposal-sidebar-title {
    font-size: 9px;
    font-weight: 400;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--col-label);
    font-family: var(--font-ui);
}
.institutio-proposal-sidebar-close {
    background: none;
    border: none;
    font-size: 18px;
    color: var(--verse-num);
    cursor: pointer;
    line-height: 1;
    padding: 0 2px;
    transition: color .15s;
}
.institutio-proposal-sidebar-close:hover { color: var(--text); }

.institutio-proposal-sidebar turbo-frame {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: block;
}
.institutio-proposal-placeholder {
    font-family: var(--font-ui);
    font-size: .85rem;
    font-style: italic;
    color: var(--col-label);
}

@media (max-width: 768px) {
    .institutio-proposal-sidebar {
        display: flex;
        top: auto;
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        height: 60vh;
        border-left: none;
        border-top: 2px solid var(--accent);
        border-radius: var(--radius) var(--radius) 0 0;
        transform: translateY(100%);
        transition: transform .3s ease;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, .18);
        pointer-events: none;
    }
    .institutio-proposal-sidebar.is-open {
        transform: translateY(0);
        pointer-events: auto;
    }
}

/* ── Institutio: vertaalvoorstel-tijdlijn (proposal_panel.html.twig) ────────── */
.institutio-proposal-header {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding-bottom: .9rem;
    margin-bottom: .9rem;
    border-bottom: 1px solid var(--divider);
}
.institutio-proposal-meta { font-size: .85rem; color: var(--color-ink-light); }
.institutio-proposal-field-label {
    display: block;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-ink-muted);
    margin-bottom: .2rem;
}
.institutio-proposal-reason p, .institutio-proposal-diff p { margin: 0; font-size: .85rem; line-height: 1.5; }
.institutio-proposal-diff-delete {
    color: #922;
    background: #fbe4e2;
    text-decoration: line-through;
    padding: 0 .1em;
    border-radius: 2px;
}
.institutio-proposal-diff-insert {
    color: var(--color-manual);
    background: #d4edda;
    text-decoration: none;
    padding: 0 .1em;
    border-radius: 2px;
}

.institutio-proposal-status {
    display: inline-block;
    font-size: .8rem;
    font-weight: 600;
    padding: .3rem .7rem;
    border-radius: 999px;
    margin-bottom: 1rem;
}
.institutio-proposal-status--pending { background: var(--card-warm); color: var(--color-ink-muted); }
.institutio-proposal-status--rejected { background: #fbe4e2; color: #922; }
.institutio-proposal-status--approved { background: #d4edda; color: #1a7a3a; }

.institutio-proposal-timeline {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    margin-bottom: 1.25rem;
}
.institutio-proposal-date-divider {
    position: relative;
    display: flex;
    justify-content: center;
    margin: .4rem 0;
}
.institutio-proposal-date-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--divider);
}
.institutio-proposal-date-divider span {
    position: relative;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-ink-muted);
    background: var(--bg);
    padding: 0 .7rem;
}
.institutio-proposal-step {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    max-width: 88%;
}
.institutio-proposal-step--mine {
    align-self: flex-end;
    flex-direction: row-reverse;
    text-align: right;
}
.institutio-proposal-step-icon {
    flex-shrink: 0;
    width: 1.6rem;
    height: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: .8rem;
    background: var(--card-warm);
    border: 1px solid var(--color-border);
}
.institutio-proposal-step--approve .institutio-proposal-step-icon {
    color: var(--color-manual);
    border-color: var(--color-manual);
}
.institutio-proposal-step--reject .institutio-proposal-step-icon {
    color: #922;
    border-color: #922;
}
.institutio-proposal-step-body { flex: 1; min-width: 0; }
.institutio-proposal-step-meta { font-size: .8rem; color: var(--color-ink-light); }
.institutio-proposal-step-meta time { color: var(--color-ink-muted); margin-left: .3em; }
.institutio-proposal-step-text {
    font-size: .85rem;
    line-height: 1.5;
    margin-top: .25rem;
    background: var(--card-warm);
    border-radius: 6px;
    padding: .5rem .7rem;
}

.institutio-proposal-actions {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding-top: .9rem;
    border-top: 1px solid var(--divider);
}
.institutio-proposal-form { display: flex; flex-direction: column; gap: .5rem; }
.institutio-proposal-form--inline { flex-direction: row; justify-content: flex-end; }
.institutio-proposal-submit-right { align-self: flex-end; }
.institutio-proposal-review { display: flex; flex-direction: column; gap: .5rem; }
.institutio-proposal-review-buttons { display: flex; gap: .5rem; }
.institutio-proposal-textarea {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: .5rem .75rem;
    font-family: var(--font-ui);
    font-size: .85rem;
    color: var(--text);
    background: var(--bg);
    width: 100%;
    resize: vertical;
    min-height: 3.5rem;
}
.institutio-proposal-textarea:focus { outline: none; border-color: var(--color-accent-2); }

/* ── Institutio: lemmalijst ─────────────────────────────────────────────────── */
.lemma-total { color: var(--color-ink-muted); font-size: .85rem; }
.lemma-table td:first-child, .lemma-table th:first-child { width: 6rem; }
.lemma-table td:last-child, .lemma-table th:last-child { width: 6rem; }
.lemma-word { font-family: var(--font-serif); font-style: italic; font-size: 1rem; }
/* Lemma-bibliotheek (algemeen): woord vetgedrukt i.p.v. cursief, zelfde als
   op de mobiele kaarten -- alleen deze tabel, niet de Institutio-only
   /institutie/lemmas-pagina die dezelfde .lemma-word/.admin-table-klassen
   hergebruikt. */
.lemma-table--library .lemma-word { font-style: normal; font-weight: 700; }
.lemma-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 1.5rem 0;
}
.lemma-pagination-current { color: var(--color-ink-muted); font-size: .85rem; }
.lemma-pagination-ellipsis { color: var(--color-ink-muted); padding: 0 .1rem; }
.lemma-pagination--right { justify-content: flex-end; margin: 0; }

.lemma-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 1.25rem 0 1.5rem;
}
.lemma-toolbar .lemma-search-form { margin: 0; }

.lemma-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 1.75rem 0 .75rem;
}
.lemma-section-header .lemma-detail-heading { margin: 0; }

.lemma-word details > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: baseline;
    gap: .5rem;
}
.lemma-word summary::-webkit-details-marker { display: none; }
.lemma-word summary::before {
    content: '▸';
    font-style: normal;
    font-size: .7em;
    color: var(--color-ink-muted);
}
.lemma-word details[open] > summary::before { content: '▾'; }
.lemma-word details.lemma-variants-single > summary { cursor: default; }
.lemma-word details.lemma-variants-single > summary::before { content: ''; }
.lemma-variant-count {
    font-family: var(--font-ui);
    font-style: normal;
    font-size: .72rem;
    color: var(--color-ink-muted);
}
.lemma-variant-table {
    margin: .5rem 0 .25rem 1.1rem;
    font-family: var(--font-ui);
    font-style: normal;
    font-size: .85rem;
    border-collapse: collapse;
}
.lemma-variant-table th {
    text-align: left;
    font-weight: 600;
    color: var(--color-ink-muted);
    padding: .15rem .75rem .15rem 0;
    border-bottom: 1px solid var(--color-border);
}
.lemma-variant-table td { padding: .15rem .75rem .15rem 0; }
.lemma-word-link { color: inherit; text-decoration: none; }
.lemma-word-link:hover { text-decoration: underline; }

/* ── Institutio: lemma-detailpagina ──────────────────────────────────────────── */
.lemma-detail-word {
    font-family: var(--font-serif);
    font-style: italic;
}
/* Lemma-bibliotheek (algemeen): woord vetgedrukt i.p.v. cursief, zelfde als
   de tabel/kaarten op de indexpagina -- alleen hier, niet de
   Institutio-only /institutie/lemma-detailpagina die dezelfde
   .lemma-detail-word-klasse hergebruikt. */
.lemma-detail-word--library { font-style: normal; font-weight: 700; }
/* Alleen de primaire betekenis (gloss_nl), niet de Alternatieven/Noot-rijen
   die dezelfde .lemma-detail-gloss-value-klasse hergebruiken. */
.lemma-detail-primary-gloss { font-weight: 700; font-style: normal; }
.lemma-detail-gloss {
    background: var(--card-warm);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.lemma-detail-gloss-row {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    flex-wrap: wrap;
}
.lemma-detail-gloss-row--note { align-items: flex-start; }
.lemma-detail-gloss-label {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-ink-muted);
    min-width: 6.5rem;
}
.lemma-detail-gloss-value { font-size: 1rem; }
.lemma-detail-gloss-row--note .lemma-detail-gloss-value {
    margin: 0;
    color: var(--color-ink-light);
    line-height: 1.5;
}
.lemma-gloss-source {
    font-size: .72rem;
    color: var(--color-ink-muted);
    border: 1px solid var(--divider);
    border-radius: 3px;
    padding: 0 .35em;
    margin-left: auto;
}
.lemma-gloss-source-manual { color: var(--color-manual); border-color: var(--color-manual); }
.lemma-detail-heading {
    font-size: 1rem;
    font-weight: 600;
    margin: 1.75rem 0 .75rem;
}
.lemma-variant-table--standalone {
    margin: 0 0 .5rem 0;
    font-size: .85rem;
}
.lemma-variant-table--standalone th:first-child,
.lemma-variant-table--standalone td:first-child {
    padding-left: .75rem;
}
.lemma-occurrence-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.lemma-occurrence {
    display: flex;
    gap: 1rem;
    align-items: baseline;
    padding: .5rem .75rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    transition: background .1s;
}
.lemma-occurrence:hover { background: var(--hover-warm); }
.lemma-occurrence-ref {
    font-family: var(--font-mono);
    font-size: .8rem;
    color: var(--color-ink-muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.lemma-occurrence-context {
    font-family: var(--font-serif);
    font-size: .85rem;
    color: var(--color-ink-light);
}
.lemma-occurrence-context mark {
    background: #fff3b0;
    color: inherit;
    font-weight: 600;
    padding: 0 .1em;
    border-radius: 2px;
}
@media (max-width: 600px) {
    .lemma-occurrence { flex-direction: column; gap: .2rem; }
}

/* ── Lemma-bibliotheek (algemeen, alle werken) ──────────────────────────────── */
.lemma-search-form {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 1.25rem 0 1.5rem;
}
.lemma-search-input {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 24rem;
    font-family: var(--font-ui);
    font-size: .9rem;
    padding: .45rem .8rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--card-warm);
    color: inherit;
}
.lemma-search-clear {
    font-size: .8rem;
    color: var(--color-ink-muted);
}
@media (max-width: 600px) {
    /* Input weigert anders te krimpen naast de knop/link (automatische
       flex-minimumbreedte); op smalle schermen laten we het hele
       zoekformulier daarom wrappen zodat het invoerveld zijn eigen regel
       krijgt in plaats van de pagina horizontaal te laten scrollen. */
    .lemma-search-form { flex-wrap: wrap; }
    .lemma-search-input { flex: 1 1 100%; max-width: none; }
}
.lemma-number {
    font-family: var(--font-mono);
    color: var(--color-ink-muted);
}
.lemma-detail-number {
    font-family: var(--font-ui);
    font-style: normal;
    font-size: .8rem;
    font-weight: 600;
    color: var(--color-ink-muted);
    margin-left: .6rem;
    vertical-align: middle;
}
.lemma-work-tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.lemma-work-tag {
    font-family: var(--font-ui);
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--color-ink-muted);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: .05rem .5rem;
}
.lemma-occurrence--no-link { cursor: default; }
.lemma-occurrence--no-link:hover { background: none; }

/* Mobiel: kaarten i.p.v. een scrollende tabel op de lemma-bibliotheek --
   zelfde aanpak/opmaak als .admin-users-cards. Anders dan die kaarten heeft
   een lemma-rij maar één bestemming (de detailpagina), dus is de hele kaart
   hier zelf de link i.p.v. een los "Bewerken"-linkje erin. */
.lemma-cards { display: none; }
.lemma-cards-empty { display: none; }
@media (max-width: 768px) {
    .lemma-table-wrap { display: none; }
    .lemma-cards { display: flex; flex-direction: column; gap: .6rem; margin-top: .5rem; }
    .lemma-cards-empty { display: block; }
    .lemma-card {
        display: block;
        padding: .75rem .9rem;
        background: var(--card-warm);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        text-decoration: none;
        color: var(--text);
    }
    .lemma-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; margin-bottom: .6rem; }
    .lemma-card-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; min-width: 0; }
    .lemma-card-word { font-family: var(--font-serif); font-weight: 700; font-size: 1.05rem; }
    .lemma-card-number { font-family: var(--font-mono); font-size: .78rem; color: var(--color-ink-muted); white-space: nowrap; }
    .lemma-card-gloss { color: var(--color-ink-light); }
    .lemma-card-foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .6rem;
        border-top: 1px solid var(--color-border-light);
        padding-top: .5rem;
    }
    .lemma-card-freq { font-family: var(--font-mono); font-size: .82rem; color: var(--color-ink-muted); white-space: nowrap; }
}

/* ── Institutio alignment editor ─────────────────────────────────────────────── */
.alignment-screen {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.alignment-status {
    color: var(--color-ink-light);
    font-size: .85rem;
}
.alignment-help {
    font-size: .85rem;
    color: var(--color-ink-muted);
    line-height: 1.6;
    margin: 0;
}
.alignment-boundary-sample, .alignment-gap-sample {
    display: inline-block;
    font-weight: 600;
    padding: 0 .3em;
    border-radius: 3px;
    background: var(--card-warm);
    border: 1px solid var(--color-border);
}
.alignment-gap-sample.is-boundary-sample { color: var(--color-accent-2); }
.alignment-collapse-banner {
    display: block;
    width: 100%;
    text-align: left;
    font-size: .85rem;
    font-weight: 600;
    color: var(--color-ink-muted);
    background: var(--card-warm);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: .6rem .9rem;
    cursor: pointer;
}
.alignment-collapse-banner:hover { border-color: var(--color-accent-2); color: var(--color-accent-2); }
.alignment-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
}
.alignment-columns--three { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 900px) {
    .alignment-columns, .alignment-columns--three { grid-template-columns: 1fr; }
}
.alignment-section {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.alignment-panel-label {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-ink-muted);
}
.alignment-panel {
    background: var(--bg);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    box-shadow: var(--shadow);
    padding: 1.25rem 1.5rem;
    line-height: 2.1;
}
.alignment-panel-la { font-size: .85rem; color: var(--color-ink-light); }
.alignment-heading-la {
    font-weight: 600;
    font-style: italic;
    color: var(--color-ink);
}
.alignment-heading-separator {
    display: inline-block;
    font-weight: 600;
    padding: 0 .35em;
    margin: 0 .1em;
    color: var(--color-accent-2);
    user-select: none;
}
.alignment-la-sentence { }
.alignment-la-gap {
    display: inline-block;
    cursor: pointer;
    font-weight: 600;
    padding: 0 .35em;
    margin: 0 .1em;
    border-radius: 3px;
    color: var(--color-ink-muted);
    background: var(--card-warm);
    border: 1px solid var(--divider);
    user-select: none;
}
.alignment-la-gap:hover { border-color: var(--color-border); }
.alignment-la-gap.is-boundary {
    color: var(--color-accent-2);
    border-color: var(--color-accent-2);
}
.alignment-panel-nl { font-size: 1rem; }
.alignment-word {
    display: inline-block;
    padding: 0 .15em;
    border-radius: 3px;
    cursor: pointer;
}
.alignment-word.row-odd { background: var(--card-warm); }
.alignment-word:hover { outline: 1px dashed var(--color-accent-2); }
.alignment-boundary {
    display: inline-block;
    cursor: grab;
    font-weight: 700;
    color: var(--color-accent-2);
    padding: 0 .3em;
    margin: 0 .1em;
    border-radius: 3px;
    background: var(--bg);
    border: 1px solid var(--color-accent-2);
    user-select: none;
    touch-action: none;
}
.alignment-boundary.is-dragging {
    cursor: grabbing;
    background: var(--color-accent-2);
    color: var(--bg);
}
/* Collapsed rows: hidden by default, force-shown while .show-collapsed is
   active on .alignment-columns (see alignment_editor_controller.js). Each
   selector restores the element's own normal display value -- a single
   `display: revert` isn't reliable enough across these mixed inline/
   inline-block elements to use instead. */
.is-collapsed-row { display: none !important; }
.show-collapsed .alignment-word.is-collapsed-row { display: inline-block !important; }
.show-collapsed .alignment-boundary.is-collapsed-row { display: inline-block !important; }
.show-collapsed .alignment-la-sentence.is-collapsed-row { display: inline !important; }
.show-collapsed .alignment-la-gap.is-collapsed-row { display: inline-block !important; }
.show-collapsed .alignment-heading-la.is-collapsed-row { display: inline-block !important; }
.show-collapsed .alignment-heading-separator.is-collapsed-row { display: inline-block !important; }
.alignment-preview {
    background: var(--card-warm);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 1.25rem 1.5rem;
}
.alignment-preview-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
}
.alignment-preview-row + .alignment-preview-row {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--divider);
}
.alignment-preview.has-weijenberg .alignment-preview-row { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 900px) {
    .alignment-preview-row, .alignment-preview.has-weijenberg .alignment-preview-row { grid-template-columns: 1fr; }
}

/* ── Generieke helpers (formulieren/knoppen die admin- en blogpagina's delen) ── */
.text-muted { color: var(--color-ink-muted); }
.list-search-empty { margin-top: 1rem; }
.btn-secondary {
    padding: .55rem 1.25rem;
    background: transparent;
    color: var(--text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 1rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.btn-secondary:hover { background: var(--hover-warm); }
.btn-danger {
    padding: .55rem 1.25rem;
    background: #922;
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 1rem;
    cursor: pointer;
}
.btn-danger:hover { filter: brightness(1.1); }

/* ── Bevestigingsdialoog (vervangt window.confirm()) ─────────────────────── */
.confirm-dialog {
    /* De site-brede reset (`* { margin: 0 }`) wint van de UA-stylesheet se
       margin:auto-centrering voor dialog:modal — dus zelf expliciet centreren. */
    position: fixed;
    inset: 0;
    margin: auto;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1.5rem;
    max-width: 380px;
    width: calc(100% - 2rem);
    height: fit-content;
    background: var(--card-warm);
    color: var(--text);
    box-shadow: var(--shadow);
}
.confirm-dialog::backdrop { background: rgba(0, 0, 0, .45); }
.confirm-dialog-message { margin-bottom: 1.25rem; line-height: 1.5; }
.confirm-dialog-actions { display: flex; gap: .75rem; justify-content: flex-end; }
.confirm-dialog-confirm { border-radius: var(--radius); }
/* .btn-cancel is standaard gestileerd voor een donkere achtergrond
   (action-bar); op de lichte dialoog-achtergrond overschrijven naar de
   tekstkleur, net als .action-bar-inline .btn-cancel dat al elders doet. */
.confirm-dialog .btn-cancel { color: var(--text); border-color: var(--color-border); }
.confirm-dialog .btn-cancel:hover { border-color: var(--accent); }
.btn-success {
    padding: .55rem 1.25rem;
    background: var(--color-manual);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 1rem;
    cursor: pointer;
}
.btn-success:hover { filter: brightness(1.1); }
.btn-small { padding: .3rem .75rem; font-size: .8rem; }
/* .is-hidden alone (display:none) has the same specificity as
   .btn-secondary's explicit display:inline-flex, and .btn-secondary is
   declared later in this file, so it would win the cascade and the button
   would stay visible. This combined selector outranks it. */
.btn-small.is-hidden { display: none; }
.admin-page-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }

/* ── Blog: overzicht ─────────────────────────────────────────────────────── */
.blog-list { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.blog-card {
    display: block;
    padding: 1.25rem 1.5rem;
    background: var(--card-warm);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    text-decoration: none;
    color: var(--text);
    transition: border-color .15s, background .15s;
}
.blog-card:hover { border-color: var(--color-accent); background: var(--hover-warm); }
.blog-card-title { font-family: var(--font-serif); font-weight: 400; margin: 0 0 .4rem; font-size: 1.4rem; }
.blog-card-meta { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--color-ink-muted); }
.badge-visibility {
    padding: .1rem .5rem;
    border-radius: 3px;
    background: var(--hover-warm);
    border: 1px solid var(--color-border);
    font-size: .8rem;
}

/* ── Blog: bewerken ──────────────────────────────────────────────────────── */
.badge-status { padding: .25rem .7rem; border-radius: 3px; font-size: .85rem; }
.badge-status--draft     { background: #fdf6e3; color: #8a6414; }
.badge-status--published { background: #edf7ed; color: #2a6a2a; }

/* Mobiel: kaarten i.p.v. een scrollende tabel op "Mijn blogs" -- zelfde
   aanpak als .hist-align-overview-table-wrap / .hist-align-chapter-cards. */
.blog-mine-cards { display: none; }
@media (max-width: 768px) {
    .blog-mine-table-wrap { display: none; }
    .blog-mine-cards { display: flex; flex-direction: column; gap: .6rem; margin-top: .5rem; }
    .blog-mine-card {
        padding: .75rem .9rem;
        background: var(--card-warm);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
    }
    .blog-mine-card-head {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: baseline;
        gap: .5rem;
        margin-bottom: .4rem;
    }
    .blog-mine-card-title { font-weight: 600; }
    .blog-mine-card-meta { font-size: .8rem; color: var(--color-ink-muted); margin-bottom: .6rem; }
    .blog-mine-card-actions { display: flex; gap: .5rem; }
    .blog-mine-card-actions .btn { flex: 1; text-align: center; }
}
.blog-publish-form { display: flex; gap: .75rem; align-items: center; margin-bottom: 1.5rem; }
.form-control {
    padding: .55rem .8rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-family: var(--font-ui);
    font-size: 1rem;
    background: var(--bg);
    color: var(--color-ink);
}
.blog-editor-form .form-control { width: 100%; }
/* .form-group input[type="text"]/select (hierboven, regel ~3071) is door de
   [type="text"]-attribuutselector specifieker dan .form-control alleen en
   wint daardoor het lettertype-gevecht -- title en de zichtbaarheid-select
   toonden hierdoor de oude serif-stijl i.p.v. --font-ui, inconsistent met de
   rest van dit scherm (knoppen, kop, toolbar, textarea). Extra klasse (drie
   in totaal) om gegarandeerd te winnen ongeacht volgorde in dit bestand. */
.blog-editor-form .form-group input.form-control,
.blog-editor-form .form-group select.form-control {
    font-family: var(--font-ui);
}
/* Dropdowns oogden zwaarder dan de rest van het scherm op de eigen 1rem
   van .form-control -- iets kleiner brengt ze in balans met de labels
   (.85rem) en de rest van de knoppen/tekst op deze pagina en in de
   Bijbelvers-/Institutie-tekst-dialogen (die dezelfde .form-control-selects
   gebruiken). */
.blog-editor-form .form-group select.form-control {
    font-size: .9rem;
}
.blog-editor-textarea { font-family: var(--font-mono); font-size: .85rem; line-height: 1.5; resize: vertical; }
.blog-slug-field { display: flex; align-items: center; gap: .3rem; }
.blog-slug-field .form-control { width: auto; flex: 1; }
.blog-slug-prefix { color: var(--color-ink-muted); font-size: .85rem; }

/* ── Blog: weergave (gerenderde Markdown) ───────────────────────────────── */
.blog-post-container { max-width: 720px; }
.blog-post-header { margin-bottom: 1.5rem; position: relative; }
.blog-post-header h1 { font-family: var(--font-serif); font-weight: 400; margin-bottom: .4rem; padding-right: 6rem; }
.blog-post-edit-btn { position: absolute; top: 0; right: 0; padding: .35rem .8rem; font-size: .85rem; }
.blog-post-meta { display: flex; gap: .5rem; font-size: .85rem; color: var(--color-ink-muted); }
.blog-post-back { margin-top: 2.5rem; }
.blog-content { font-family: var(--font-serif); font-size: 1.1rem; line-height: 1.75; }
.blog-content h1, .blog-content h2, .blog-content h3 { font-family: var(--font-serif); font-weight: 400; margin: 1.75rem 0 .75rem; line-height: 1.3; }
.blog-content p { margin: 0 0 1.1rem; }
.blog-content ul, .blog-content ol { margin: 0 0 1.1rem 1.5rem; }
.blog-content li { margin-bottom: .3rem; }
.blog-content blockquote {
    margin: 0 0 1.1rem;
    padding: .25rem 1.25rem;
    border-left: 3px solid var(--color-accent);
    color: var(--color-ink-light);
    font-style: italic;
}
.blog-content a { color: var(--color-accent-2); }
.blog-content img { max-width: 100%; border-radius: 4px; }
.blog-content code { font-family: var(--font-mono); font-size: .9em; background: var(--hover-warm); padding: .1em .35em; border-radius: 3px; }
.blog-content pre { background: var(--hover-warm); padding: 1rem; border-radius: 6px; overflow-x: auto; }
.blog-content pre code { background: none; padding: 0; }
.blog-content table { display: block; overflow-x: auto; margin: 0 0 1.1rem; border-collapse: collapse; font-size: .95em; }
.blog-content th, .blog-content td { padding: .5rem .75rem; border: 1px solid var(--color-border); text-align: left; }
.blog-content th { background: var(--hover-warm); font-weight: 600; }

/* ── Nieuwsoverzicht (/cgk-rijnsburg-nieuwsoverzicht): iets kleinere, vette
   titel en compactere tekst dan een gewoon blogartikel ─────────────────── */
.page-news-digest .blog-post-header h1 { font-size: 1.6rem; font-weight: 700; }
.page-news-digest .blog-content { line-height: 1.5; }
.page-news-digest .blog-content p { margin: 0 0 .75rem; }
.page-news-digest .blog-content ul,
.page-news-digest .blog-content ol { margin: 0 0 .75rem 1.5rem; }
.page-news-digest .blog-content li { margin-bottom: .15rem; }

/* ── Blog: embedmodules (bijbelvers/institutie) ─────────────────────────── */
.blog-embed { margin: 1.75rem 0; }
.embed-error {
    padding: .6rem 1rem;
    background: #fdf6e3;
    color: #8a6414;
    border: 1px solid #f0dfa0;
    border-radius: 4px;
    font-size: .85rem;
}
.embed-bible, .embed-institutie {
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--card-warm);
    padding: 1.25rem 1.5rem;
}
.embed-verse-block + .embed-verse-block { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--divider); }
.embed-verse-ref { font-size: .85rem; color: var(--color-ink-muted); letter-spacing: .02em; }
.embed-verse-header { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; margin-bottom: .5rem; }
.embed-layout-naast-elkaar .embed-verse-content { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
.embed-layout-onder-elkaar .embed-verse-content { display: flex; flex-direction: column; gap: .75rem; }
@media (max-width: 700px) {
    .embed-layout-naast-elkaar .embed-verse-content { grid-template-columns: 1fr; }
}
.embed-source { font-family: var(--font-hebrew), var(--font-greek), serif; font-size: 1.25rem; line-height: 2; }
.embed-source.dir-rtl { direction: rtl; text-align: right; }
.embed-source-word { display: inline-block; padding: .05em .15em; border-radius: 3px; cursor: default; }
.embed-translations { display: flex; flex-direction: column; gap: .9rem; min-width: 0; }
.embed-translation { font-size: 1rem; line-height: 1.9; }
.embed-translation + .embed-translation { padding-top: .9rem; border-top: 1px dashed var(--divider); }
.embed-translation-code,
.embed-translation-label {
    display: inline-block;
    flex-shrink: 0;
    font-size: .72rem;
    font-weight: 600;
    color: var(--color-ink-muted);
    border: 1px solid var(--color-border);
    border-radius: 3px;
    padding: 0 .35em;
    vertical-align: middle;
}
.embed-translation-label { margin-bottom: .3rem; }
.embed-dutch-word { display: inline-block; padding: .05em .15em; border-radius: 3px; }
.embed-source-word.is-highlighted, .embed-dutch-word.is-highlighted { background: var(--gold); color: var(--nav); }
.embed-no-translation { color: var(--color-ink-muted); }
.embed-institutie-row + .embed-institutie-row { margin-top: .75rem; }
.embed-institutie .embed-institutie-ref { margin-bottom: 0; margin-top: .75rem; font-style: italic; text-align: right; }
.embed-latin { font-style: italic; margin: 0; }
.embed-dutch { margin: 0; }

/* ── Blog editor: embed-picker toolbar + dialog ─────────────────────────── */
/* flex-wrap: de knoptekst gebruikt sinds de overstap naar .btn/.btn-sm het
   iets bredere --font-serif (net als "Bewerken" elders in de app) i.p.v.
   het compactere geërfde ui-font van de oude .btn-secondary -- zonder wrap
   kromp de rij de knoppen smaller dan hun tekst nodig had, met een
   afgebroken "+ Institutie- tekst" op twee regels tot gevolg. */
.blog-editor-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; align-items: center; }
.btn-toolbar { padding: .35rem .8rem; font-size: .85rem; }
.blog-editor-image-status { font-size: .85rem; color: var(--color-ink-muted); margin: -.25rem 0 .5rem; }
.blog-editor-image-status.is-error { color: #922; }
.embed-dialog {
    max-width: 560px;
    width: 90vw;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1.5rem;
    background: var(--bg);
    color: var(--text);
}
.embed-dialog::backdrop { background: rgba(0,0,0,.45); }
.embed-dialog h2 { margin: 0 0 1rem; font-size: 1.25rem; }
.embed-dialog-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .embed-dialog-row { grid-template-columns: 1fr; } }
.embed-word-chips { display: flex; flex-wrap: wrap; gap: .3rem; padding: .5rem; border: 1px solid var(--color-border); border-radius: 4px; max-height: 140px; overflow-y: auto; }
.embed-word-chip {
    padding: .2rem .55rem;
    border: 1px solid var(--color-border);
    border-radius: 3px;
    background: var(--card-warm);
    color: var(--text);
    font-family: var(--font-hebrew), var(--font-greek), serif;
    font-size: 1rem;
    cursor: pointer;
}
.embed-word-chip:hover { border-color: var(--color-accent); }
.embed-word-chip.is-selected { background: var(--gold); border-color: var(--accent); color: var(--nav); }

.embed-vertaling-checks { display: flex; flex-direction: column; gap: .35rem; }
.embed-vertaling-check {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .5rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    cursor: pointer;
    font-weight: 400;
}
.embed-vertaling-check:hover { border-color: var(--color-accent); }
.embed-vertaling-check input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; margin: 0; }

.embed-zin-list { display: flex; flex-direction: column; gap: .3rem; padding: .5rem; border: 1px solid var(--color-border); border-radius: 4px; max-height: 220px; overflow-y: auto; }
.embed-zin-row { display: flex; gap: .6rem; padding: .4rem .5rem; border: 1px solid transparent; border-radius: 4px; cursor: pointer; font-size: .85rem; }
.embed-zin-row:hover { border-color: var(--color-border); }
.embed-zin-row.is-selected { background: var(--gold); color: var(--nav); }
.embed-zin-index { flex-shrink: 0; font-weight: 600; color: var(--color-ink-muted); }
.embed-zin-row.is-selected .embed-zin-index { color: var(--nav); }
.embed-zin-preview { line-height: 1.4; }
.embed-zin-text {
    padding: .6rem .75rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    max-height: 160px;
    overflow-y: auto;
    font-size: .85rem;
    line-height: 1.6;
    user-select: text;
    cursor: text;
}
.lemma-variant-form { font-family: var(--font-serif); font-style: italic; }

/* ─── Historische alignment reviewpagina (SV1657/SV/SVGBS/HSV) ────────────
   Vier kolommen met klikbare woord-"chips" en een SVG-laag die gebogen
   verbindingslijnen tekent tussen gekoppelde woorden. Lijnkleur = methode;
   zie legend hieronder voor de exacte toewijzing. ────────────────────── */

.hist-align-screen { max-width: 100%; padding: 1rem 1.5rem 3rem; }
/* This page needs real width for four side-by-side columns of Dutch words
   -- .site-main's normal 1400px reading-width cap (fine for flowing Bible
   text) leaves each column too cramped. Widen only when this screen is
   present, so other pages keep their narrower reading width. */
.site-main:has(.hist-align-screen) { max-width: 1800px; }

.hist-align-topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: .75rem 1rem;
    background: var(--card-warm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin-bottom: .75rem;
}
.hist-align-breadcrumb { font-size: 1.1rem; }
.hist-align-nav { display: flex; align-items: center; gap: .6rem; }
.hist-align-nav .nav-pos { font-family: var(--font-mono); font-size: .85rem; color: var(--color-ink-muted); }
.hist-align-score { font-family: var(--font-mono); font-size: .85rem; }
.hist-align-score-detail { color: var(--color-ink-muted); font-size: .8rem; }
.hist-align-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; }

.hist-align-lock-banner,
.hist-align-gap-warning {
    padding: .5rem .9rem;
    border-radius: var(--radius);
    margin-bottom: .75rem;
    font-size: .85rem;
}
.hist-align-lock-banner {
    background: rgba(179, 64, 63, 0.12);
    border: 1px solid var(--color-gap);
    color: var(--color-gap);
}
.hist-align-gap-warning {
    background: rgba(122, 107, 46, 0.12);
    border: 1px solid var(--color-auto-positional);
    color: var(--color-auto-positional);
}

.hist-align-toast {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);
    background: var(--nav);
    color: var(--nav-text);
    padding: .6rem 1rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    z-index: 50;
    font-size: .85rem;
    display: flex;
    align-items: center;
    gap: .75rem;
}
.hist-align-toast-btn {
    background: transparent;
    border: 1px solid currentColor;
    color: inherit;
    border-radius: var(--radius);
    padding: .15rem .6rem;
    font-size: .8rem;
    cursor: pointer;
}
@media (max-width: 640px) {
    /* Zonder breedtebeperking kon deze balk (bericht + 3 knoppen, in één
       rij zonder wrap) breder worden dan het scherm; met transform:
       translateX(-50%) op een fixed element schoof hij dan half buiten
       beeld en oogde alsof hij het hele scherm bedekte. */
    .hist-align-toast {
        left: .75rem;
        right: .75rem;
        bottom: .75rem;
        transform: none;
        max-width: none;
        flex-wrap: wrap;
        padding: .5rem .75rem;
        font-size: .8rem;
        gap: .5rem;
    }
    .hist-align-toast-btn { padding: .1rem .5rem; font-size: .75rem; }
}

.hist-align-columns {
    position: relative;
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--bg);
}
.hist-align-svg {
    position: absolute;
    top: 0;
    left: 0;
    /* Geen width/height: 100% -- de controller zet de width/height-attributen
       op scrollWidth/scrollHeight (echte pixels van de volle, scrollbare
       tabelbreedte). CSS 100% zou die attributen overschrijven met de
       *zichtbare* breedte van de wrapper, waardoor het svg-coördinatenstelsel
       werd platgedrukt zodra de tabel breder is dan het scherm (altijd het
       geval op mobiel door .hist-align-table's min-width) -- de lijnen kwamen
       dan op de verkeerde plek terecht. Zonder CSS-override krijgt het svg
       zijn werkelijke pixelgrootte en scrollt het gewoon mee met de tabel. */
    pointer-events: none;
    /* Above the table (z-index 2): a real click on empty cell space must
       reach the line-hit paths underneath it, not be swallowed by the <td>
       first. The <svg> itself stays click-through everywhere except the
       line-hit paths, which opt back in via pointer-events: stroke. */
    z-index: 3;
}
.hist-align-line { fill: none; stroke-width: 1.5; opacity: .85; }
.hist-align-line-hit { fill: none; stroke: transparent; stroke-width: 12; pointer-events: stroke; cursor: pointer; }
.hist-align-line-chain { stroke-width: 3; opacity: 1; }

.hist-align-line.method-anchor              { stroke: var(--color-auto-pivot); stroke-width: 2.5; }
.hist-align-line.method-window,
.hist-align-line.method-compound,
.hist-align-line.method-phrase              { stroke: var(--color-auto-sequence); }
.hist-align-line.method-synonym,
.hist-align-line.method-moved,
.hist-align-line.method-one_to_many         { stroke: var(--color-auto-positional); }
.hist-align-line.method-manual              { stroke: var(--color-manual); stroke-width: 2.5; }
.hist-align-line.method-particle_drop,
.hist-align-line.method-prefix_drop         { stroke: var(--color-ink-muted); stroke-dasharray: 4 3; }

/* Rijen = één per SV1657-woord (HistoricalAlignmentRowBuilder); elke kolom
   toont het/de gekoppelde woord(en) in diezelfde rij, zodat overeenkomstige
   woorden onder elkaar staan i.p.v. los per kolom doorlopen. */
/* width: auto (not 100%) so table-layout: auto sizes each column to its own
   widest word instead of stretching every column to fill .hist-align-columns
   -- a short verse in a wide viewport would otherwise get needlessly wide
   columns with lots of empty space around each word. min-width keeps very
   short verses from looking cramped; overflow-x: auto on the wrapper (not
   here) handles verses wide enough to need horizontal scroll. */
.hist-align-table { position: relative; z-index: 2; width: auto; min-width: 900px; border-collapse: collapse; table-layout: auto; }
.hist-align-table th,
.hist-align-table td { border-left: 1px solid var(--color-border); padding: .35rem .6rem; vertical-align: top; }
.hist-align-table th:first-child,
.hist-align-table td:first-child { border-left: none; }
.hist-align-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--card-warm) 45%, transparent); }
.hist-align-table thead th {
    position: sticky;
    top: 0;
    background: var(--card-warm);
    font-family: var(--font-mono);
    font-size: .85rem;
    font-weight: 600;
    color: var(--col-label);
    text-align: left;
    padding: .5rem .6rem;
    border-bottom: 1px solid var(--color-border);
}
/* Strong's column: shows the Strong's number(s) linked (via word_links) to
   any word in the row, across all four editions -- usually only SV/Jongbloed
   carries a direct word_links row, but this checks every edition's words
   rather than assuming which one. Narrow and non-wrapping since it's just a
   short comma-separated list of codes like "H1234, G5678". */
.hist-align-strongs-col {
    width: 130px;
    max-width: 130px;
    white-space: normal;
    font-family: var(--font-mono);
    font-size: .8rem;
}
.hist-align-strongs-col a { color: var(--col-label); }

/* Context column: unlike the word-chip columns (auto-sized to their widest
   word), this one holds a short run of prose, so it gets a fixed width and
   normal wrapping instead of shrinking/growing with word length. One empty
   cell per row; only the currently-hovered word's row gets filled in, so the
   context appears at that word's height instead of pinned to the top. */
.hist-align-context-col {
    width: 320px;
    max-width: 320px;
    white-space: normal;
    font-size: .85rem;
    line-height: 1.5;
}
.hist-align-context-label {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 600;
    color: var(--col-label);
    border: 1px solid var(--color-border);
    border-radius: 3px;
    padding: 0 .3rem;
    margin-right: .35rem;
    vertical-align: middle;
}

.hist-align-pivot-badge {
    font-size: .65rem;
    font-weight: 400;
    color: var(--color-auto-pivot);
    border: 1px solid var(--color-auto-pivot);
    border-radius: 3px;
    padding: 0 .3rem;
    vertical-align: middle;
}

.hist-align-word {
    display: inline-block;
    cursor: pointer;
    padding: .15rem .45rem;
    margin: 0 .2rem .2rem 0;
    border-radius: var(--radius);
    border: 1px solid transparent;
    background: transparent;
    transition: background .12s, border-color .12s, opacity .12s;
    user-select: none;
    /* Geen overflow-wrap: anywhere -- .hist-align-table is table-layout:auto
       met min-width:900px binnen een horizontaal scrollende .hist-align-columns
       (bewust: elke kolom groeit mee met haar breedste woord, overflow lost
       de rest op via scroll). overflow-wrap: anywhere geeft de auto-table-
       layout een kleinere "min-content"-breedte om mee te rekenen, waardoor
       de browser een kolom te smal voor het woord kiest en het woord
       midden-in-een-letter afbreekt i.p.v. de kolom te laten groeien -- op
       mobiel (waar bijna elke kolom smaller dan menig woord is) gebeurde dat
       voortdurend. white-space: normal (het default) laat het woord gewoon
       heel blijven en de kolom zijn bedoelde breedte krijgen.
       overflow-wrap: normal per woord is de eigenlijke fix. */
    overflow-wrap: normal;
}
.hist-align-word:hover,
.hist-align-word:focus-visible {
    background: var(--hover-warm);
    border-color: var(--color-border);
    outline: none;
}
.hist-align-word-pending {
    background: var(--color-accent-2) !important;
    color: #fff !important;
    border-color: var(--color-accent-2) !important;
}
.hist-align-word-chain { background: var(--hover-warm); border-color: var(--color-auto-pivot); }
.hist-align-word.word-note { color: var(--color-ink-muted); border-style: dashed; border-color: var(--color-border); }

.hist-align-screen.hist-align-hovering .hist-align-word:not(.hist-align-word-chain):not(.hist-align-word-pending) { opacity: .4; }
.hist-align-screen.hist-align-hovering .hist-align-line:not(.hist-align-line-chain) { opacity: .12; }

.hist-align-screen.review-lock-readonly .hist-align-word { pointer-events: none; }
.hist-align-screen.review-lock-readonly .hist-align-actions button { pointer-events: none; opacity: .5; }

.hist-align-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; font-size: .85rem; color: var(--color-ink-light); }
.legend-item { display: flex; align-items: center; gap: .4rem; }
.legend-line { display: inline-block; width: 22px; height: 0; border-top-width: 2.5px; border-top-style: solid; }
.legend-line.legend-anchor      { border-color: var(--color-auto-pivot); }
.legend-line.legend-derived     { border-color: var(--color-auto-sequence); }
.legend-line.legend-last-resort { border-color: var(--color-auto-positional); }
.legend-line.legend-manual      { border-color: var(--color-manual); }
.legend-line.legend-note        { border-color: var(--color-ink-muted); border-top-style: dashed; }
.legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--color-gap); }

.hist-align-help { margin-top: .75rem; font-size: .8rem; color: var(--color-ink-muted); }
.hist-align-help kbd {
    font-family: var(--font-mono);
    background: var(--card-warm);
    border: 1px solid var(--color-border);
    border-radius: 3px;
    padding: 0 .3rem;
}

/* ─── Generieke knopklassen (.btn/.btn-sm/.btn-xs) ─────────────────────────
   .btn-primary bestond al (felle accentknop); dit voegt de neutrale/outline
   basisstijl en maatvarianten toe die .trans-linking-nav en de historische
   alignmentpagina's al gebruikten zonder dat er ooit CSS voor bestond. ── */
.btn {
    display: inline-block;
    padding: .5rem 1rem;
    background: var(--card-warm);
    color: var(--text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-family: var(--font-serif);
    font-size: 1rem;
    cursor: pointer;
    text-decoration: none;
}
.btn:hover { background: var(--hover-warm); text-decoration: none; }
.btn-sm { padding: .35rem .75rem; font-size: .85rem; }
.btn-xs { padding: .2rem .55rem; font-size: .8rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* .btn en .btn-primary worden vaak samen op één element gebruikt (class="btn btn-primary");
   zonder deze regel wint .btn's neutrale stijl van .btn-primary door cascade-volgorde. */
.btn.btn-primary {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
    font-family: var(--font-ui);
    font-weight: 600;
}
.btn.btn-primary:hover { background: #8f4a26; }

/* ─── Historische alignment: boek-/hoofdstukoverzicht ──────────────────── */
.hist-align-book-grid { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 1.5rem; }
.hist-align-book-card {
    padding: .4rem .8rem;
    background: var(--card-warm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--text);
    text-decoration: none;
}
.hist-align-book-card:hover { background: var(--hover-warm); text-decoration: none; }

.hist-align-overview-table { width: 100%; border-collapse: collapse; margin-top: .5rem; }
.hist-align-overview-table th, .hist-align-overview-table td {
    text-align: left;
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--color-border-light);
}
.hist-align-overview-table th { font-family: var(--font-mono); font-size: .8rem; color: var(--color-ink-muted); font-weight: 600; }

.hist-align-score-bar {
    position: relative;
    width: 160px;
    height: 1.3rem;
    background: var(--card-warm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}
.hist-align-score-bar-fill {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    background: var(--color-manual);
    opacity: .35;
}
.hist-align-score-bar span {
    position: relative;
    display: block;
    text-align: center;
    line-height: 1.3rem;
    font-family: var(--font-mono);
    font-size: .8rem;
}

/* Mobiel: kaarten i.p.v. een scrollende tabel. De tabel blijft in de DOM
   (desktop-weergave, ongewijzigd) -- op smalle schermen wisselen we alleen
   welk van de twee zichtbaar is, dezelfde aanpak als .translation-switcher
   / .translation-switcher-mobile op de koppelpagina. */
.hist-align-chapter-cards { display: none; }
@media (max-width: 768px) {
    .hist-align-overview-table-wrap { display: none; }
    .hist-align-chapter-cards { display: flex; flex-direction: column; gap: .6rem; margin-top: .5rem; }
    .hist-align-chapter-card {
        padding: .75rem .9rem;
        background: var(--card-warm);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
    }
    .hist-align-chapter-card-head {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        margin-bottom: .5rem;
    }
    .hist-align-chapter-card-num { font-weight: 600; }
    .hist-align-chapter-card-verses { font-family: var(--font-mono); font-size: .8rem; color: var(--color-ink-muted); }
    .hist-align-chapter-card .hist-align-score-bar { width: 100%; margin-bottom: .6rem; }
    .hist-align-chapter-card-actions { display: flex; gap: .5rem; }
    .hist-align-chapter-card-actions .btn { flex: 1; text-align: center; }
}

/* ── Commentaren van Calvijn (/commentaren) ─────────────────────────────────── */
.commentary-part-heading {
    font-family: var(--font-ui);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--col-label);
    margin: 2rem 0 .3rem;
}
.commentary-part-hint {
    font-family: var(--font-ui);
    font-size: .82rem;
    color: var(--col-label);
    margin: 0 0 1rem;
}
.commentary-verses {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}
.commentary-verse-row {
    display: grid;
    grid-template-columns: 2rem 1.1fr 1fr 1fr;  /* nr | Latijn | Los | SV */
    gap: 1.2rem;
    align-items: baseline;
}
.commentary-verse-row p { margin: 0; }
.commentary-verse-num,
.commentary-verse-link {
    font-family: var(--font-ui);
    font-size: .8rem;
    color: var(--color-accent-2);
    text-decoration: none;
}
.commentary-verse-num:hover,
.commentary-verse-link:hover { text-decoration: underline; }
.commentary-print-ref {
    display: block;
    margin-top: .4rem;
    font-family: var(--font-ui);
    font-size: .72rem;
    color: var(--col-label);
}
.commentary-nl-para { margin: 0 0 .6rem; }
.commentary-nl-para:last-child { margin-bottom: 0; }
/* A misprint of the translator's, shown corrected: marked, the printed form
   and the reason in the popup (same popup as the edition's notes). */
.commentary-correction {
    position: relative;
    cursor: help;
    outline: none;
    background: color-mix(in srgb, var(--gold) 22%, transparent);
    border-bottom: 1px dashed var(--gold);
    border-radius: 2px;
    padding: 0 .1em;
}
.commentary-correction:hover .institutio-note-popup,
.commentary-correction:focus .institutio-note-popup {
    display: block;
}
.commentary-nl-missing {
    font-family: var(--font-ui);
    font-size: .82rem;
    font-style: italic;
    color: var(--col-label);
}
.commentary-source-note {
    max-width: 40rem;
    margin: 2rem auto 0;
    font-family: var(--font-ui);
    font-size: .82rem;
    color: var(--col-label);
    text-align: center;
}
.commentary-verse-head .institutio-layer-label { margin: 0; }
@media (max-width: 720px) {
    .commentary-verse-row { grid-template-columns: 1.6rem 1fr; }
    .commentary-verse-row .institutio-sentence-nl { grid-column: 2; }
    /* stacked: the column heads above each text instead */
    .commentary-verse-head { display: none; }
    .commentary-verse-los::before,
    .commentary-verse-sv::before {
        display: block;
        font-family: var(--font-ui);
        font-size: .65rem;
        font-weight: 600;
        text-transform: uppercase;
        color: var(--col-label);
    }
    .commentary-verse-los::before { content: "Los (1900)"; }
    .commentary-verse-sv::before { content: "Statenvertaling"; }
}

/* ── Commentaren: moderne spelling van Los (SpellingRules) ─────────────────── */
/* The commentary pages have three texts side by side: wider than the
   Institutio's reading column. */
.page-institutio.page-commentary { max-width: 1240px; }
.institutio-sentence-row.commentary-row-3 { grid-template-columns: 1.1fr 1fr 1fr; gap: 1.2rem; }
.commentary-nl-modern { border-left: 1px solid var(--divider); padding-left: 1.2rem; }
.commentary-spelling-bar { margin-bottom: 1.2rem; }
.commentary-spelling-rules-link {
    margin-left: auto;
    font-family: var(--font-ui);
    font-size: .8rem;
    color: var(--accent);
}
.spelling-changed { position: relative; outline: none; }
:root[data-spelling-marks="on"] .spelling-changed {
    cursor: help;
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    border-bottom: 1px dotted var(--accent);
    border-radius: 2px;
}
:root[data-spelling-marks="on"] .spelling-changed:hover .institutio-note-popup,
:root[data-spelling-marks="on"] .spelling-changed:focus .institutio-note-popup {
    display: block;
}
@media (max-width: 720px) {
    .institutio-sentence-row.commentary-row-3 { grid-template-columns: 1fr; }
    .commentary-nl-modern { border-left: none; padding-left: 0; border-top: 1px solid var(--divider); padding-top: .4rem; }
    .commentary-spelling-rules-link { margin-left: 0; }
}

/* The rules page (/commentaren/spelling). */
.spelling-page { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem 3rem; }
.spelling-title { font-family: var(--font-serif); font-size: 1.5rem; margin: 1rem 0 .4rem; color: var(--text); }
.spelling-intro { max-width: 46rem; color: var(--text); margin: 0 0 1.2rem; }
.spelling-muted { color: var(--col-label); font-size: .85em; }
.spelling-coverage { margin: 0 0 1.4rem; font-family: var(--font-ui); font-size: .9rem; }
.spelling-coverage p { margin: .4rem 0 0; }
.spelling-coverage-bar { height: 8px; border-radius: 4px; background: var(--card-warm); border: 1px solid var(--divider); overflow: hidden; }
.spelling-coverage-bar span { display: block; height: 100%; background: var(--accent); }
.spelling-columns { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.2rem; align-items: start; }
.spelling-card {
    background: var(--card-warm);
    border: 1px solid var(--divider);
    border-radius: 6px;
    padding: 1rem 1.2rem;
    margin-bottom: 1.2rem;
    font-family: var(--font-ui);
}
.spelling-card h2 { font-size: 1.05rem; margin: 0 0 .7rem; color: var(--text); }
.spelling-form label { display: block; font-size: .85rem; color: var(--col-label); margin-bottom: .6rem; }
.spelling-form input[type="text"], .spelling-form input[type="number"], .spelling-form textarea {
    display: block; width: 100%; box-sizing: border-box; margin-top: .2rem;
    padding: .45rem .6rem; font: inherit; font-size: .95rem; color: var(--text);
    background: var(--bg); border: 1px solid var(--divider); border-radius: 4px;
}
.spelling-kind { display: flex; gap: 1.2rem; margin-bottom: .6rem; }
.spelling-kind label, .spelling-active { display: inline-flex; align-items: center; gap: .35rem; color: var(--text); }
.spelling-pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: .6rem; align-items: end; }
.spelling-arrow { padding-bottom: 1rem; color: var(--col-label); }
.spelling-more { margin: .2rem 0 .8rem; font-size: .85rem; }
.spelling-more summary { cursor: pointer; color: var(--accent); margin-bottom: .5rem; }
.spelling-actions { display: flex; gap: .6rem; margin-top: .6rem; }
.spelling-help { margin-top: 1rem; font-size: .82rem; color: var(--col-label); }
.spelling-help p { margin: .3rem 0; }
.spelling-help code, .spelling-table code { font-size: .9em; background: var(--bg); padding: 0 .25em; border-radius: 3px; }
.spelling-preview { margin-top: 1rem; font-size: .88rem; }
.spelling-preview:empty { display: none; }
.spelling-preview-error { color: #b3261e; }
.spelling-preview-words { display: flex; flex-wrap: wrap; gap: .3rem 1rem; list-style: none; padding: 0; margin: .3rem 0 .6rem; }
.spelling-preview-examples { padding-left: 1.1rem; margin: 0; font-family: var(--font-serif); }
.spelling-preview-examples li { margin-bottom: .3rem; }
.spelling-old { text-decoration: line-through; color: #b3261e; }
.spelling-new { color: #1e7b34; font-weight: 600; margin-left: .2em; }
.spelling-suggestions { columns: 2; column-gap: 1.5rem; padding-left: 1.4rem; margin: .4rem 0 0; font-size: .9rem; }
.spelling-suggestions li { break-inside: avoid; margin-bottom: .15rem; }
.spelling-rules .list-search-input { margin-bottom: .6rem; }
.spelling-table td { vertical-align: middle; }
.spelling-inactive { opacity: .5; }
.spelling-row-actions { display: flex; gap: .3rem; justify-content: flex-end; }
.spelling-row-actions form { margin: 0; }
.spelling-transfer-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.spelling-import { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; font-size: .88rem; }
:root[data-theme="dark"] .spelling-old, :root[data-theme="dark"] .spelling-preview-error { color: #f28b82; }
:root[data-theme="dark"] .spelling-new { color: #81c995; }
@media (max-width: 720px) {
    .spelling-columns { grid-template-columns: 1fr; }
    .spelling-suggestions { columns: 1; }
    .spelling-pair { grid-template-columns: 1fr; }
    .spelling-arrow { display: none; }
}

/* ── Commentaren: keuze per plek + flags (commentary_edit_controller.js) ────
   Only for editors, and only while "Markeer wijzigingen" is on. */
mark.text-flag { background: none; color: inherit; padding: 0; }
.text-flag-icon { display: none; }
:root[data-spelling-marks="on"] .spelling-choosable { cursor: pointer; }
:root[data-spelling-marks="on"] .spelling-has-choice { border-bottom: 2px solid var(--accent); }
:root[data-spelling-marks="on"] .spelling-kept { background: color-mix(in srgb, var(--gold) 22%, transparent); }
:root[data-spelling-marks="on"] mark.text-flag {
    background: color-mix(in srgb, #d93025 18%, transparent);
    border-bottom: 2px solid #d93025;
    border-radius: 2px;
}
:root[data-spelling-marks="on"] mark.text-flag-resolved {
    background: none;
    border-bottom: 2px dotted var(--col-label);
}
:root[data-spelling-marks="on"] .text-flag-icon {
    display: inline;
    border: none;
    background: none;
    padding: 0 .1em;
    margin-left: .05em;
    font-size: .8em;
    line-height: 1;
    vertical-align: super;
    color: #d93025;
    cursor: pointer;
}
:root[data-spelling-marks="on"] .text-flag-icon.text-flag-resolved { color: var(--col-label); }
.text-flag-new {
    position: absolute;
    z-index: 300;
    font-family: var(--font-ui);
    font-size: .78rem;
    font-weight: 600;
    color: #fff;
    background: #d93025;
    border: none;
    border-radius: 999px;
    padding: .25rem .6rem;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}
.commentary-edit-pop {
    position: absolute;
    z-index: 310;
    width: 290px;
    max-width: calc(100vw - 16px);
    box-sizing: border-box;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--divider);
    border-radius: 6px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
    padding: .6rem;
    font-family: var(--font-ui);
    font-size: .85rem;
}
.commentary-edit-title { font-weight: 600; margin-bottom: .4rem; }
.commentary-edit-muted { color: var(--col-label); font-size: .9em; }
.commentary-edit-option {
    display: block;
    width: 100%;
    text-align: left;
    font: inherit;
    color: var(--text);
    background: none;
    border: none;
    border-radius: 4px;
    padding: .35rem .45rem;
    cursor: pointer;
}
.commentary-edit-option:hover { background: var(--hover-warm); }
.commentary-edit-option.is-current { background: color-mix(in srgb, var(--accent) 16%, transparent); font-weight: 600; }
.commentary-edit-pop label { display: block; margin: .35rem 0; color: var(--col-label); }
.commentary-edit-pop select, .commentary-edit-pop textarea {
    display: block; width: 100%; box-sizing: border-box; margin-top: .15rem;
    font: inherit; color: var(--text); background: var(--bg);
    border: 1px solid var(--divider); border-radius: 4px; padding: .3rem .4rem;
}
.commentary-edit-pop .commentary-edit-check { display: flex; align-items: center; gap: .35rem; color: var(--text); }
.commentary-edit-snippet { font-family: var(--font-serif); margin-bottom: .3rem; }
.commentary-edit-snippet mark { background: color-mix(in srgb, #d93025 20%, transparent); color: inherit; }
.commentary-edit-actions { display: flex; gap: .4rem; margin-top: .5rem; }

/* The flags overview (/commentaren/flags). */
.flags-filter { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: end; margin-bottom: 1rem; font-family: var(--font-ui); font-size: .85rem; }
.flags-filter label { display: flex; flex-direction: column; gap: .15rem; color: var(--col-label); }
.flags-filter select, .flags-filter input { font: inherit; padding: .3rem .4rem; border: 1px solid var(--divider); border-radius: 4px; background: var(--bg); color: var(--text); }
.flags-table td { vertical-align: top; }
.flags-snippet { font-family: var(--font-serif); }
.flags-snippet mark { background: color-mix(in srgb, #d93025 18%, transparent); color: inherit; }
.flags-resolved { opacity: .6; }
.flags-gone { color: #b3261e; font-size: .8rem; }
:root[data-theme="dark"] .flags-gone { color: #f28b82; }
.spelling-badge { font-size: .72rem; color: var(--col-label); border: 1px solid var(--divider); border-radius: 999px; padding: 0 .4rem; }
.spelling-badge.is-default { color: var(--accent); border-color: var(--accent); }
.commentary-spelling-rules-link a { color: var(--accent); }