/* ─── Design tokens — licht modus ───────────────────────────────────────── */
:root {
    /* Nieuwe semantische variabelen (primair voor nieuwe UI) */
    --bg:          #ffffff;
    --card-warm:   #faf6f0;
    --hover-warm:  #f3ece0;
    --nav:         #1b1208;
    --nav-text:    #c0a884;
    --text:        #1e1208;
    --verse-num:   #b89a7a;
    --col-label:   #8a5030;
    --divider:     rgba(122, 59, 30, 0.10);
    --accent:      #7a3b1e;
    --gold:        #ecc07a;
    --amber:       #c07238;

    /* Bestaande variabelen (behouden voor editor-compat) */
    --color-parchment:   #faf6f0;
    --color-ink:         #1e1208;
    --color-ink-light:   #4a3f2a;
    --color-ink-muted:   #8a7a60;
    --color-border:      rgba(122, 59, 30, 0.18);
    --color-border-light:#e8e0cc;
    --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:        #c0b090;
    --color-auto-pivot:      #2e5c8a;
    --color-auto-sequence:   #5c7a2e;
    --color-auto-positional: #7a6b2e;

    /* Lettertypen */
    --font-ui:     'Cormorant Garamond', Georgia, 'Book Antiqua', Palatino, serif;
    --font-serif:  'Cormorant Garamond', Georgia, 'Book Antiqua', Palatino, serif;
    --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 ─────────────────────────────────────────────────────── */
[data-theme="dark"] {
    --bg:          #1a1a1e;
    --card-warm:   #141417;
    --hover-warm:  #1f1f24;
    --nav:         #0e0e11;
    --nav-text:    #b8b4ac;
    --text:        #ddd9d2;
    --verse-num:   #6b6660;
    --col-label:   #9a9590;
    --divider:     rgba(255, 255, 255, 0.07);
    --accent:      #c07238;
    --gold:        #ecc07a;
    --amber:       #c07238;

    --color-parchment:   #141417;
    --color-ink:         #ddd9d2;
    --color-ink-light:   #b8b4ac;
    --color-ink-muted:   #706c66;
    --color-border:      rgba(255, 255, 255, 0.10);
    --color-border-light:rgba(255, 255, 255, 0.06);
    --color-accent:      #c07238;
}

/* ─── Thema-transitie ───────────────────────────────────────────────────── */
*, *::before, *::after {
    transition: background-color 0.35s ease, color 0.35s ease,
                border-color 0.35s ease;
}

/* ─── Reset & basis ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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-ui);
    font-size: 13px;
    letter-spacing: 0.08em;
    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-ui);
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.06em;
    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-ui);
    letter-spacing: 0.04em;
    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-ui);
    letter-spacing: 0.04em;
    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-ui);
    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-ui);
    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-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-size: 2.4rem; font-weight: 500; line-height: 1.3; }
.hero-sub { color: var(--color-ink-light); margin-top: .75rem; font-size: 1.1rem; font-style: italic; }

.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: .75rem; 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: .9rem; 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); }
.badge-manual    { background: #d4edda; color: var(--color-manual); }
.badge-manual-hint { background: #d4ede9; color: var(--color-manual-hint); }
.badge-proper-noun { background: #d0e4f4; color: var(--color-proper-noun); }
.badge-positional  { background: #fdf0d5; color: var(--color-positional); }

.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-size: 1.2rem;
    font-weight: 500;
    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: .75rem; color: var(--color-ink-muted);
             width: 1.8rem; text-align: right; flex-shrink: 0; }
.book-name { flex: 1; }
.book-chapters { font-size: .78rem; 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.2rem; font-weight: 500; }
.chap-verses { font-size: .7rem; 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.2rem;
    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: .9rem;
}

/* Vertaling-switcher */
.translation-switcher { display: flex; gap: .4rem; flex-wrap: wrap; }
.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;
}
@media (max-width: 1000px) { .verse-compare-grid { grid-template-columns: 1fr; } }

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

.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: .75rem;
    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;
    gap: .5rem;
}
.lang-badge {
    display: inline-block;
    padding: .1rem .5rem;
    border-radius: 3px;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
}
.lang-he { background: #f4e8d8; color: var(--color-he); }
.lang-gk { background: #d8e8f4; color: var(--color-gk); font-style: italic; }
.lang-nl { background: #d8f0d8; color: var(--color-nl); }

/* ─── 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: .7rem; 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: .7rem;
    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 {
    font-size: .65rem;
    padding: .02rem .08rem;
    border-radius: 2px;
    color: #4d7a63;
}
.no-link-badge { font-size: .65rem; color: #4d7a63; }

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

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

/* Methodekleuring */
.dutch-word[data-method="manual"]      { border-bottom: 2px solid var(--color-manual); }
.dutch-word[data-method="manual_hint"] { border-bottom: 2px solid var(--color-manual-hint); }
.dutch-word[data-method="proper_noun"] { border-bottom: 2px solid 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: .78rem;
    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-ui);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: .04em;
    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-ui);
    font-size: 12px;
    letter-spacing: .06em;
    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: .7rem;
    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: .95rem;
    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-ui);
    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; }

    .source-words-grid .src-word { padding: .15rem 2px; }

    .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; }
    .linking-status     { flex: none; }
    .btn-confirm-proposals { align-self: flex-start; }
    .src-text            { font-size: 1.05rem; }
    .source-words-grid.rtl .src-text { font-size: 1.25rem; }
    .src-translit   { font-size: .55rem; }
    .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: .6rem; }

    /* 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: zwevend onderaan het scherm op mobiel */
    .action-bar-inline {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        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;
    }
    .action-bar-inline .action-label { color: var(--nav-text); }
    .action-bar-inline .btn-cancel   { color: var(--nav-text); border-color: rgba(255,255,255,.2); }

    /* 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: 1.1rem; }
.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: .9rem;
    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); }

.linking-area {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}
@media (max-width: 900px) { .linking-area { grid-template-columns: 1fr; } }

/* 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: .9rem;
    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); }
.method-border-proper_noun  { border-color: var(--color-proper-noun); }
.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: .6rem;
    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: .7rem; 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 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    font-size: .6rem;
    padding: .02rem .15rem;
    color: #4d7a63;
    background: transparent;
    cursor: pointer;
}

.dutch-words-flow { font-size: 1.15rem; line-height: 2.4; margin-top: .75rem; }
.nl-word {
    display: inline;
    border-radius: 2px;
    padding: .05em .1em;
    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 solid var(--color-manual-hint); }
.method-underline-proper_noun  { border-bottom: 2px solid 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: .82rem;
    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: .9rem; }
.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: .9rem;
    cursor: pointer;
    transition: background .12s;
}
.btn-save:hover { background: #156a30; }

.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: .9rem;
    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); }

.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.3rem;
}
.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: .9rem;
}
.occ-count {
    font-family: var(--font-mono);
    font-size: .7rem;
    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: .75rem;
    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: .95rem;
    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;
    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;
    align-items: center;
    gap: .75rem;
}
.translate-selector-label {
    font-size: .9rem;
    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: .95rem;
}

.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: .75rem;
    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: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-ink-muted);
}
.translate-field-readonly {
    font-size: .95rem;
    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: .95rem;
    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: .88rem;
    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: .9rem;
    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: .9rem;
    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: .75rem;
    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: .9rem;
    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: .95rem;
}
.strongs-definition {
    margin: 0 0 .75rem 1.5rem;
    font-size: .95rem;
    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: .88rem;
    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: .95rem; }
.word-filler-tag {
    font-size: .7rem;
    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: .82rem;
}
.word-links-confidence-table th {
    text-align: left;
    font-weight: 600;
    color: var(--color-ink-muted);
    font-size: .75rem;
    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: .82rem;
    font-style: italic;
    color: var(--color-ink-muted);
}
.word-links-id-cell {
    font-size: .7rem;
    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: .75rem;
    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: .78rem;
    color: var(--color-ink-muted);
    margin-left: auto;
}
.trans-pair-names {
    font-size: .9rem;
    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: .88rem;
    color: var(--color-ink-light);
    margin-top: 1.5rem;
}
.trans-home-hint code {
    font-family: var(--font-mono);
    font-size: .82rem;
    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: .9rem;
}
.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: .9rem;
    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: .9rem; 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: .9rem; }
.trans-links-table th {
    text-align: left;
    padding: .35rem .6rem;
    font-size: .78rem;
    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: .82rem;
    color: var(--color-ink-muted);
    white-space: nowrap;
}

.method-badge {
    font-family: var(--font-mono);
    font-size: .75rem;
    border-radius: 3px;
    padding: .1rem .45rem;
    display: inline-block;
}
.method-badge-manual           { background: #d4edda; color: var(--color-manual); }
.method-badge-manual_empty     { background: #f8d7da; color: #721c24; }
.method-badge-auto_source_pivot{ background: #d4e5f5; color: var(--color-auto-pivot); }
.method-badge-auto_sequence    { background: #d4edda; color: var(--color-auto-sequence); opacity: .8; }
.method-badge-auto_positional  { background: #fff3cd; color: var(--color-auto-positional); }

.confidence-badge {
    font-family: var(--font-mono);
    font-size: .8rem;
    border-radius: 3px;
    padding: .1rem .4rem;
}
.conf-high   { background: #d4edda; color: var(--color-manual); }
.conf-mid    { background: #fff3cd; color: var(--color-auto-positional); }
.conf-low    { background: #f8d7da; color: #721c24; }
.conf-manual { background: #d4edda; color: var(--color-manual); 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-size: 2rem; font-weight: 500; }
.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: #fff;
    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-size: 1.3rem; font-weight: 500; margin-bottom: .5rem; }
.method-card p { color: var(--color-ink-light); font-size: .95rem; 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: .95rem;
    background: #fdfaf5;
    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: .75rem; 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-size: 1.8rem; margin-bottom: 1.5rem; }
.profile-card {
    background: #fff;
    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-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;
}
.btn-submit {
    padding: .55rem 1.5rem;
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-family: var(--font-serif);
    font-size: .95rem;
    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: .9rem; }

/* ── Strong's home search card ────────────────────────────────────────────── */
.page-strongs-home h1 { font-size: 1.8rem; margin-bottom: .5rem; }
.page-strongs-home > p { color: var(--color-ink-muted); margin-bottom: 2rem; font-style: italic; }
.strongs-home-card {
    background: #fff;
    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; }
.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: 4px;
    font-family: var(--font-serif);
    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; }

/* ── 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-size: 1.6rem; font-weight: 500; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.admin-table thead tr { border-bottom: 2px solid var(--color-border); }
.admin-table th { text-align: left; padding: .5rem .75rem; }
.admin-table tbody tr { border-bottom: 1px solid var(--color-border); }
.admin-table td { padding: .5rem .75rem; }
.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: .1rem .4rem;
    background: var(--color-accent-muted, #eee);
    border-radius: 3px;
    font-size: .8rem;
    margin: .1rem;
}
.btn-danger-inline { background: none; border: none; color: var(--color-error, #922); cursor: pointer; padding: 0; margin-left: .75rem; }
.form-inline { display: inline; }

/* ── 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: 1.02rem;
    color: var(--text);
    line-height: 1.35;
}
.institutio-toc-title-latin {
    font-style: italic;
    color: var(--col-label);
}

.institutio-toc-book-title {
    font-family: var(--font-ui);
    font-size: .75rem;
    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; }
.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; }
.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;
}
.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: .75rem;
    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; }
}
.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);
}

@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: .68rem;
    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: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: .68rem;
    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;
    }
}

/* ── 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: .88rem; 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: .82rem;
    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: var(--color-manual); }

.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: .7rem;
    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: .82rem; color: var(--color-ink-light); }
.institutio-proposal-step-meta time { color: var(--color-ink-muted); margin-left: .3em; }
.institutio-proposal-step-text {
    font-size: .88rem;
    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: .88rem;
    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: .9rem; }
.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: 1.05rem; }
.lemma-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 1.5rem 0;
}
.lemma-pagination-current { color: var(--color-ink-muted); font-size: .9rem; }

.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-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: .95rem; }
.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: .68rem;
    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: .9rem;
}
.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: .78rem;
    color: var(--color-ink-muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.lemma-occurrence-context {
    font-family: var(--font-serif);
    font-size: .92rem;
    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; }
}

/* ── 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: .9rem;
}
.alignment-help {
    font-size: .88rem;
    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: .75rem;
    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: .92rem; 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: .95rem; }
.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); }
.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); }
.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: .82rem; }
/* .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 { margin: 0 0 .4rem; font-size: 1.3rem; }
.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: .75rem;
}

/* ── 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; }
.blog-publish-form { display: flex; gap: .75rem; align-items: center; margin-bottom: 1.5rem; }
.blog-editor-form .form-control { width: 100%; }
.blog-editor-textarea { font-family: var(--font-mono); font-size: .9rem; 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: .9rem; }

/* ── Blog: weergave (gerenderde Markdown) ───────────────────────────────── */
.blog-post-container { max-width: 720px; }
.blog-post-header { margin-bottom: 1.5rem; position: relative; }
.blog-post-header h1 { 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: .9rem; color: var(--color-ink-muted); }
.blog-post-back { margin-top: 2.5rem; }
.blog-content { font-size: 1.05rem; line-height: 1.75; }
.blog-content h1, .blog-content h2, .blog-content h3 { 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; }

/* ── 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: .9rem;
}
.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: 1.05rem; 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: .7rem;
    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 ─────────────────────────── */
.blog-editor-toolbar { display: flex; 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.2rem; }
.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: 1.05rem;
    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: .9rem;
    line-height: 1.6;
    user-select: text;
    cursor: text;
}
.lemma-variant-form { font-family: var(--font-serif); font-style: italic; }