/* ============================================================
   STYLES.CSS — alle CSS voor Scrivener 1894 / Griekse Bijbel Studie
   Bestaat uit twee delen:
   1. Utility-classes (vervangt Tailwind CDN, automatisch gegenereerd
      op basis van de daadwerkelijk gebruikte classes in HTML/JS)
   2. Eigen component-CSS (bladwijzers, notities, toetsenbord, etc.)
   ============================================================ */

/* ============================================================
   PREFLIGHT — Tailwind's basis-reset
   KRITIEK: dit ontbrak volledig. Zonder deze reset behouden browsers hun
   eigen default-styling op button/input/etc. (zoals de 2px outset zwarte
   rand op alle knoppen), wat compleet anders oogt dan met Tailwind actief.
   ============================================================ */
*, ::before, ::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: currentColor;
}
html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;
    font-family: ui-sans-serif, system-ui, sans-serif;
	scrollbar-gutter: stable; /* FIX: voorkomt verspringing van de gecentreerde bovenbalk */
}
body {
    margin: 0;
    line-height: inherit;
}
hr { height: 0; color: inherit; border-top-width: 1px; }
abbr:where([title]) { text-decoration: underline dotted; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
b, strong { font-weight: bolder; }
code, kbd, samp, pre { font-family: ui-monospace, monospace; font-size: 1em; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
table { text-indent: 0; border-color: inherit; border-collapse: collapse; }
button, input, optgroup, select, textarea {
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
}
button, select { text-transform: none; }
button, [type='button'], [type='reset'], [type='submit'] {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none;
}
:-moz-focusring { outline: auto; }
:-moz-ui-invalid { box-shadow: none; }
progress { vertical-align: baseline; }
::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; }
[type='search'] { -webkit-appearance: textfield; outline-offset: -2px; }
::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
summary { display: list-item; }
blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; }
fieldset { margin: 0; padding: 0; }
legend { padding: 0; }
ol, ul, menu { list-style: none; margin: 0; padding: 0; }
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { opacity: 1; color: #667085; } /* 4,75:1 op wit; zie .text-slate-400 */
.dark input::placeholder, .dark textarea::placeholder { color: #9098AC; }
button, [role="button"] { cursor: pointer; }
:disabled { cursor: default; }
img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
}
img, video { max-width: 100%; height: auto; }
[hidden]:where(:not([hidden="until-found"])) { display: none; }

/* ============================================================ */



/* --- Basis utility-classes --- */
.-right-1 {
    right: -0.25rem;
}

.-top-1 {
    top: -0.25rem;
}

.-translate-y-1\/2 {
    transform: translateY(-50%);
}

.absolute {
    position: absolute;
}

.animate-spin {
    animation: tw-spin 1s linear infinite;
}

.appearance-none {
    appearance: none;
}

.backdrop-blur-sm {
    backdrop-filter: blur(4px);
}

.bg-black\/40 {
    background-color: rgba(0,0,0,0.4);
}

.bg-blue-100 {
    background-color: #D5DBE6;
}

.bg-blue-100\/40 {
    background-color: rgba(213,219,230,0.4);
}

.bg-blue-50 {
    background-color: #EAEDF3;
}

.bg-blue-50\/30 {
    background-color: rgba(234,237,243,0.3);
}

.bg-blue-500 {
    background-color: #4A6190;
}

.bg-blue-600 {
    background-color: #1B2A4A;
}

.bg-emerald-50 {
    background-color: #ecfdf5;
}

.bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-from), var(--tw-gradient-to));
}

.bg-green-50 {
    background-color: #f0fdf4;
}

.bg-gray-400 {
    background-color: #898989;
}

.bg-gray-600 {
    background-color: #666666;
}

.bg-red-50 {
    background-color: #fef2f2;
}
.bg-red-600 {
    /* Ontbrak volledig in de gecompileerde stylesheet (nooit eerder in de app
       gebruikt) — precies dezelfde categorie bug als de eerder gevonden
       z-index-bracket-classes: een doodgewone Tailwind-utility die zonder
       waarschuwing gewoon niets doet als 'ie niet al gecompileerd is. Ontdekt
       doordat de "Verwijderen"-knop in het tag-inzicht-modal witte tekst op
       een transparante achtergrond had (onzichtbaar tegen de witte modal). */
    background-color: rgb(220 38 38);
}
.hover\:bg-red-700:hover {
    background-color: rgb(185 28 28);
}

.bg-seal-600 {
    background-color: #7A2E2E;
}

.bg-slate-100 {
    background-color: #EFEFEC;
}

.bg-slate-200 {
    background-color: #E2E4E8;
}

.bg-slate-300 {
    background-color: #C7CAD1;
}

.bg-slate-50 {
    background-color: #F7F7F5;
}

.bg-slate-50\/50 {
    background-color: rgba(247,247,245,0.5);
}

.bg-slate-50\/60 {
    background-color: rgba(247,247,245,0.6);
}

.bg-slate-600 {
    background-color: #4A515C;
}

.bg-slate-900\/60 {
    background-color: rgba(28,33,46,0.6);
}

.bg-slate-950 {
    background-color: #14171F;
}

.bg-transparent {
    background-color: transparent;
}

.bg-white {
    background-color: #ffffff;
}

.block {
    display: block;
}

.border {
    border-width: 1px;
}

.border-2 {
    border-width: 2px;
}

.border-\[1\.5px\] {
    border-width: 1.5px;
}

.border-b {
    border-bottom-width: 1px;
}

.border-b-2 {
    border-bottom-width: 2px;
}

.border-blue-200 {
    border-color: #B6C0D6;
}

.border-blue-200\/40 {
    border-color: rgba(182,192,214,0.4);
}

.border-blue-200\/60 {
    border-color: rgba(182,192,214,0.6);
}

.border-blue-300 {
    border-color: #8FA0BF;
}

.border-blue-400 {
    border-color: #6B80A8;
}

.border-blue-500\/40 {
    border-color: rgba(74,97,144,0.4);
}

.border-blue-500\/60 {
    border-color: rgba(74,97,144,0.6);
}

.border-blue-600 {
    border-color: #1B2A4A;
}

.border-dashed {
    border-style: dashed;
}

.border-emerald-200 {
    border-color: #a7f3d0;
}

.border-green-200 {
    border-color: #bbf7d0;
}

.border-l {
    border-left-width: 1px;
}

.border-l-2 {
    border-left-width: 2px;
}

.border-l-4 {
    border-left-width: 4px;
}

.border-red-200 {
    border-color: #fecaca;
}

.border-slate-100 {
    border-color: #EFEFEC;
}

.border-slate-200 {
    border-color: #E2E4E8;
}

.border-slate-200\/50 {
    border-color: rgba(226,228,232,0.5);
}

.border-slate-200\/80 {
    border-color: rgba(226,228,232,0.8);
}

.border-slate-300 {
    border-color: #C7CAD1;
}

.border-slate-600 {
    border-color: #4A515C;
}

.border-slate-800 {
    border-color: #272B33;
}

.border-t {
    border-top-width: 1px;
}

.bottom-0 {
    bottom: 0rem;
}

.cursor-col-resize {
    cursor: col-resize;
}

.cursor-pointer {
    cursor: pointer;
}

.divide-slate-200 {
    border-color: #E2E4E8;
}

.duration-150 {
    transition-duration: 150ms;
}

.duration-200 {
    transition-duration: 200ms;
}

.duration-300 {
    transition-duration: 300ms;
}

.first\:mt-0:first-child {
    margin-top: 0rem;
}

.fixed {
    position: fixed;
}

.flex {
    display: flex;
}

.flex-1 {
    flex: 1 1 0%;
}

.flex-col {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.focus\:ring-blue-500:focus {
    --tw-ring-color: #4A6190;
    box-shadow: 0 0 0 1px var(--tw-ring-color);
}

.focus\:ring-seal-500:focus {
    --tw-ring-color: #A04A47;
    box-shadow: 0 0 0 1px var(--tw-ring-color);
}

.font-bold {
    font-weight: 700;
}

.font-extrabold {
    font-weight: 800;
}

.font-medium {
    font-weight: 500;
}

.font-mono {
    font-family: ui-monospace, monospace;
}

.font-normal {
    font-weight: 400;
}

.font-semibold {
    font-weight: 600;
}

.font-serif {
    font-family: 'Gentium Plus', 'Playfair Display', serif;
}

.from-blue-50\/50 {
    --tw-gradient-from: rgba(234,237,243,0.5);
}

.gap-0 {
    gap: 0rem;
}

.gap-0\.5 {
    gap: 0.125rem;
}

.gap-1 {
    gap: 0.25rem;
}

.gap-1\.5 {
    gap: 0.375rem;
}

.gap-2 {
    gap: 0.5rem;
}

.gap-2\.5 {
    gap: 0.625rem;
}

.gap-3 {
    gap: 0.75rem;
}

.gap-4 {
    gap: 1rem;
}

.gap-6 {
    gap: 1.5rem;
}

.gap-x-6 {
    column-gap: 1.5rem;
}

.gap-y-1\.5 {
    row-gap: 0.375rem;
}

.grid {
    display: grid;
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
}

.group:hover .group-hover\:bg-blue-400 {
    background-color: #6B80A8;
}

.group:hover .group-hover\:bg-blue-600 {
    background-color: #1B2A4A;
}

.group:hover .group-hover\:opacity-100 {
    opacity: 1.0;
}

.h-10 {
    height: 2.5rem;
}

.h-12 {
    height: 3rem;
}

.h-3 {
    height: 0.75rem;
}

.h-3\.5 {
    height: 0.875rem;
}

.h-4 {
    height: 1rem;
}

.h-48 {
    height: 12rem;
}

.h-5 {
    height: 1.25rem;
}

.h-6 {
    height: 1.5rem;
}

.h-8 {
    height: 2rem;
}

.h-full {
    height: 100%;
}

.hover\:bg-blue-100:hover {
    background-color: #D5DBE6;
}

.hover\:bg-blue-400\/40:hover {
    background-color: rgba(107,128,168,0.4);
}

.hover\:bg-blue-50:hover {
    background-color: #EAEDF3;
}

.hover\:bg-blue-700:hover {
    background-color: #16223C;
}

.hover\:bg-red-100:hover {
    background-color: #fee2e2;
}

.hover\:bg-seal-50:hover {
    background-color: #FBEFEF;
}

.hover\:bg-slate-100:hover {
    background-color: #EFEFEC;
}

.hover\:bg-slate-200:hover {
    background-color: #E2E4E8;
}

.hover\:bg-slate-200\/60:hover {
    background-color: rgba(226,228,232,0.6);
}

.hover\:bg-slate-700:hover {
    background-color: #383D47;
}

.hover\:bg-white:hover {
    background-color: #ffffff;
}

.hover\:border-blue-200:hover {
    border-color: #B6C0D6;
}

.hover\:border-blue-300:hover {
    border-color: #8FA0BF;
}

.hover\:border-blue-400:hover {
    border-color: #6B80A8;
}

.hover\:border-blue-600:hover {
    border-color: #1B2A4A;
}

.hover\:border-seal-200:hover {
    border-color: #E0ADAD;
}

.hover\:ring-blue-300:hover {
    --tw-ring-color: #8FA0BF;
    box-shadow: 0 0 0 1px var(--tw-ring-color);
}

.hover\:text-blue-600:hover {
    color: #1B2A4A;
}

.hover\:text-blue-700:hover {
    color: #16223C;
}

.hover\:text-red-400:hover {
    color: #f87171;
}

.hover\:text-red-500:hover {
    color: #ef4444;
}

.hover\:text-slate-600:hover {
    color: #4A515C;
}

.hover\:underline:hover {
    text-decoration: underline;
}

.inline-block {
    display: inline-block;
}

.inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.inset-y-0 {
    top: 0;
    bottom: 0;
}

.italic {
    font-style: italic;
}

.items-baseline {
    align-items: baseline;
}

.items-center {
    align-items: center;
}

.items-start {
    align-items: flex-start;
}

.items-stretch {
    align-items: stretch;
}

.justify-between {
    justify-content: space-between;
}

.justify-center {
    justify-content: center;
}

.leading-relaxed {
    line-height: 1.625;
}

.left-0 {
    left: 0rem;
}

.list-disc {
    list-style-type: disc;
}

.list-inside {
    list-style-position: inside;
}

.max-h-\[80vh\] {
    max-height: 80vh;
}

.max-h-\[90vh\] {
    max-height: 90vh;
}

.max-w-2xl {
    max-width: 42rem;
}

.max-w-7xl {
    max-width: 80rem;
}

.max-w-full {
    max-width: 100%;
}

.max-w-lg {
    max-width: 32rem;
}

.max-w-md {
    max-width: 28rem;
}

.max-w-xs {
    max-width: 20rem;
}

.mb-0\.5 {
    margin-bottom: 0.125rem;
}

.mb-1 {
    margin-bottom: 0.25rem;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

.mb-3 {
    margin-bottom: 0.75rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.mb-6 {
    margin-bottom: 1.5rem;
}

.min-h-\[40px\] {
    min-height: 40px;
}

.min-h-\[500px\] {
    min-height: 500px;
}

.min-h-screen {
    min-height: 100vh;
}

.min-w-0 {
    min-width: 0;
}

.ml-1 {
    margin-left: 0.25rem;
}

.mr-0\.5 {
    margin-right: 0.125rem;
}

.mr-1 {
    margin-right: 0.25rem;
}

.mt-0\.5 {
    margin-top: 0.125rem;
}

.mt-1 {
    margin-top: 0.25rem;
}

.mt-1\.5 {
    margin-top: 0.375rem;
}

.mt-10 {
    margin-top: 2.5rem;
}

.mt-2 {
    margin-top: 0.5rem;
}

.mt-3 {
    margin-top: 0.75rem;
}

.mt-4 {
    margin-top: 1rem;
}

.mt-6 {
    margin-top: 1.5rem;
}

.mt-8 {
    margin-top: 2rem;
}

.mx-1 {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.my-1\.5 {
    margin-top: 0.375rem;
    margin-bottom: 0.375rem;
}

.opacity-0 {
    opacity: 0.0;
}

.opacity-40 {
    opacity: 0.4;
}

.opacity-60 {
    opacity: 0.6;
}

.overflow-y-auto {
    overflow-y: auto;
}

.p-1 {
    padding: 0.25rem;
}

.p-1\.5 {
    padding: 0.375rem;
}

.p-2 {
    padding: 0.5rem;
}

.p-3 {
    padding: 0.75rem;
}

.p-3\.5 {
    padding: 0.875rem;
}

.p-4 {
    padding: 1rem;
}

.p-5 {
    padding: 1.25rem;
}

.p-6 {
    padding: 1.5rem;
}

.pb-3 {
    padding-bottom: 0.75rem;
}

.pl-1\.5 {
    padding-left: 0.375rem;
}

.pl-3 {
    padding-left: 0.75rem;
}

.pl-3\.5 {
    padding-left: 0.875rem;
}

.pl-9 {
    padding-left: 2.25rem;
}

.pointer-events-none {
    pointer-events: none;
}

.pr-14 {
    padding-right: 3.5rem;
}

.pr-3 {
    padding-right: 0.75rem;
}

.pr-6 {
    padding-right: 1.5rem;
}

.pt-1 {
    padding-top: 0.25rem;
}

.pt-2 {
    padding-top: 0.5rem;
}

.pt-4 {
    padding-top: 1rem;
}

.pt-6 {
    padding-top: 1.5rem;
}

.px-0\.5 {
    padding-left: 0.125rem;
    padding-right: 0.125rem;
}

.px-1\.5 {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
}

.px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.px-2\.5 {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
}

.px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.px-3\.5 {
    padding-left: 0.875rem;
    padding-right: 0.875rem;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}
.px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
}

.px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.py-0\.5 {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
}

.py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.py-1\.5 {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

.py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.py-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}

.py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

.relative {
    position: relative;
}

.right-0 {
    right: 0rem;
}

.right-3 {
    right: 0.75rem;
}

.right-4 {
    right: 1rem;
}

.ring-blue-400 {
    --tw-ring-color: #6B80A8;
    box-shadow: 0 0 0 1px var(--tw-ring-color);
}

.ring-blue-500\/50 {
    --tw-ring-color: rgba(74,97,144,0.5);
    box-shadow: 0 0 0 1px var(--tw-ring-color);
}

.ring-transparent {
    --tw-ring-color: transparent;
}

.rounded {
    border-radius: 0.25rem;
}

.rounded-2xl {
    border-radius: 1rem;
}

.rounded-full {
    border-radius: 9999px;
}

.rounded-lg {
    border-radius: 0.5rem;
}

.rounded-md {
    border-radius: 0.375rem;
}

.rounded-r-xl {
    border-top-right-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
}

.rounded-sm {
    border-radius: 0.125rem;
}

.rounded-t-2xl {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

.rounded-xl {
    border-radius: 0.75rem;
}
.rounded-t-xl {
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
}
.rounded-t-none {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.border-b-0 {
    border-bottom-width: 0;
}

.select-none {
    user-select: none;
}

.select-text {
    user-select: text;
}

.self-center {
    align-self: center;
}

.shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
}

.shadow-2xs {
    box-shadow: 0 1px rgba(0,0,0,0.05);
}

.shadow-sm {
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.06);
}

.shadow-xs {
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
}

.shrink-0 {
    flex-shrink: 0;
}

.space-x-0\.5 > * + * {
    margin-left: 0.125rem;
}

.space-x-1 > * + * {
    margin-left: 0.25rem;
}

.space-x-1\.5 > * + * {
    margin-left: 0.375rem;
}

.space-x-2 > * + * {
    margin-left: 0.5rem;
}

.space-x-2\.5 > * + * {
    margin-left: 0.625rem;
}

.space-x-3 > * + * {
    margin-left: 0.75rem;
}

.space-y-1 > * + * {
    margin-top: 0.25rem;
}

.space-y-1\.5 > * + * {
    margin-top: 0.375rem;
}

.space-y-2 > * + * {
    margin-top: 0.5rem;
}

.space-y-3 > * + * {
    margin-top: 0.75rem;
}

.space-y-4 > * + * {
    margin-top: 1rem;
}

.space-y-5 > * + * {
    margin-top: 1.25rem;
}

.space-y-6 > * + * {
    margin-top: 1.5rem;
}

.space-y-8 > * + * {
    margin-top: 2rem;
}

.sticky {
    position: sticky;
    will-change: transform;
}

.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}

.text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
}

.text-\[10px\] {
    font-size: 10px;
}

.text-\[11px\] {
    font-size: 11px;
}

.text-\[8px\] {
    font-size: 8px;
}

.text-\[9px\] {
    font-size: 9px;
}

.text-base {
    font-size: 1rem;
    line-height: 1.5rem;
}

.text-blue-400 {
    color: #6B80A8;
}

.text-blue-500 {
    color: #4A6190;
}

.text-blue-600 {
    color: #1B2A4A;
}

.text-blue-700 {
    color: #16223C;
}

.text-blue-800 {
    color: #121C30;
}

.text-blue-900 {
    color: #0D1424;
}

.text-center {
    text-align: center;
}

.text-emerald-600 {
    color: #059669;
}

.text-green-700 {
    color: #15803d;
}

.text-left {
    text-align: left;
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.text-red-600 {
    color: #dc2626;
}

.text-red-700 {
    color: #b91c1c;
}

.text-right {
    text-align: right;
}

.text-seal-600 {
    color: #7A2E2E;
}

.text-slate-300 {
    color: #C7CAD1;
}

.text-slate-400 {
    /* Toegankelijkheid (WCAG 1.4.3): #9098AC haalt op wit 2,89:1 waar 4,5:1 nodig
       is, en deze klasse draagt juist de tekst die iets uitlegt ("Laatst opgeslagen
       op…", "Nog geen geschiedenis"). #667085 haalt 4,75:1 en ziet er hetzelfde uit.
       In de donkere modus mag #9098AC blijven — daar haalt hij 6,6:1 — vandaar de
       regel hieronder. Die staat bewust vóór het blok met .dark .dark\:-regels,
       zodat een expliciete dark:text-…-variant op een element nog steeds wint. */
    color: #667085;
}

.dark .text-slate-400 {
    color: #9098AC;
}

.text-slate-50 {
    color: #F7F7F5;
}

.text-slate-500 {
    color: #5C6470;
}

.text-slate-600 {
    color: #4A515C;
}

.text-slate-700 {
    color: #383D47;
}

.text-slate-800 {
    color: #272B33;
}

.text-slate-900 {
    color: #1C212E;
}

.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.text-white {
    color: #ffffff;
}

.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}

.to-slate-50\/30 {
    --tw-gradient-to: rgba(247,247,245,0.3);
}

.top-0 {
    top: 0rem;
}

.top-1\/2 {
    top: 50%;
}

.top-24 {
    top: 6rem;
}

.top-4 {
    top: 1rem;
}

.tracking-tight {
    letter-spacing: -0.025em;
}

.tracking-wide {
    letter-spacing: 0.025em;
}

.tracking-wider {
    letter-spacing: 0.05em;
}

.tracking-widest {
    letter-spacing: 0.1em;
}

.transition-all {
    transition-property: all;
    transition-duration: 150ms;
}

.transition-colors {
    transition-property: color, background-color, border-color;
    transition-duration: 150ms;
}

.transition-opacity {
    transition-property: opacity;
    transition-duration: 150ms;
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.underline {
    text-decoration: underline;
}

.uppercase {
    text-transform: uppercase;
}

.w-1 {
    width: 0.25rem;
}

.w-1\.5 {
    width: 0.375rem;
}

.w-10 {
    width: 2.5rem;
}

.w-12 {
    width: 3rem;
}

.w-3 {
    width: 0.75rem;
}

.w-3\.5 {
    width: 0.875rem;
}

.w-4 {
    width: 1rem;
}

.w-5 {
    width: 1.25rem;
}

.w-6 {
    width: 1.5rem;
}

.w-8 {
    width: 2rem;
}

.w-80 {
    width: 20rem;
}

.w-\[3px\] {
    width: 3px;
}

.w-\[420px\] {
    width: 420px;
}

.w-full {
    width: 100%;
}

.whitespace-pre-line {
    white-space: pre-line;
}

.z-10 {
    z-index: 10;
}

.z-30 {
    z-index: 30;
}

.z-39 {
    z-index: 39;
}

.z-40 {
    z-index: 40;
}

.z-50 {
    z-index: 50;
}

.z-\[100\] {
    z-index: 100;
}

.w-px {
    width: 1px;
}

.align-top {
    vertical-align: top;
}

.align-bottom {
    vertical-align: bottom;
}

.focus\:outline-none:focus {
    outline: none;
}

.focus\:ring-2:focus {
    box-shadow: 0 0 0 2px var(--tw-ring-color, rgba(74,97,144,0.5));
}

.hover\:scale-105:hover {
    transform: scale(1.05);
}

.ring-1 {
    box-shadow: 0 0 0 1px var(--tw-ring-color, rgba(0,0,0,0.05));
}

.ring-2 {
    box-shadow: 0 0 0 2px var(--tw-ring-color, rgba(0,0,0,0.05));
}

/* KRITIEKE PLAATSING: .hidden moet na alle losse display-utilities (.flex, .block,
   .grid, .inline-block) staan, zodat hij bij gelijke specificiteit wint wanneer
   beide op één element voorkomen (bv. class="hidden flex ..." voor modals).
   Responsive varianten (lg:flex e.d.) staan in de media-query-sectie hierna,
   en winnen op hun beurt weer van deze regel zodra hun breakpoint actief is. */
.hidden {
    display: none !important;
}

/* --- Donkere modus (.dark op <html>) --- */
.dark .dark\:bg-blue-400\/20 {
    background-color: rgba(107,128,168,0.2);
}

.dark .dark\:bg-blue-900\/40 {
    background-color: rgba(13,20,36,0.4);
}

.dark .dark\:bg-blue-950\/10 {
    background-color: rgba(8,12,21,0.1);
}

.dark .dark\:bg-blue-950\/20 {
    background-color: rgba(8,12,21,0.2);
}

.dark .dark\:bg-blue-950\/30 {
    background-color: rgba(8,12,21,0.3);
}

.dark .dark\:bg-blue-950\/40 {
    background-color: rgba(8,12,21,0.4);
}

.dark .dark\:bg-blue-950\/50 {
    background-color: rgba(8,12,21,0.5);
}

.dark .dark\:bg-emerald-950\/20 {
    background-color: rgba(2,44,34,0.2);
}

.dark .dark\:bg-green-950\/20 {
    background-color: rgba(5,46,22,0.2);
}

.dark .dark\:bg-red-950\/20 {
    background-color: rgba(69,10,10,0.2);
}

.dark .dark\:bg-red-950\/40 {
    background-color: rgba(69,10,10,0.4);
}

.dark .dark\:bg-slate-600 {
    background-color: #4A515C;
}

.dark .dark\:bg-slate-700 {
    background-color: #383D47;
}

.dark .dark\:bg-slate-800\/60 {
    background-color: rgba(39,43,51,0.6);
}

.dark .dark\:bg-slate-900 {
    background-color: #1C212E;
}

.dark .dark\:bg-slate-900\/30 {
    background-color: rgba(28,33,46,0.3);
}

.dark .dark\:bg-slate-900\/40 {
    background-color: rgba(28,33,46,0.4);
}

.dark .dark\:bg-slate-900\/50 {
    background-color: rgba(28,33,46,0.5);
}

.dark .dark\:bg-slate-950 {
    background-color: #14171F;
}

.dark .dark\:bg-slate-950\/40 {
    background-color: rgba(20,23,31,0.4);
}

.dark .dark\:border-blue-700 {
    border-color: #16223C;
}

.dark .dark\:border-blue-900\/40 {
    border-color: rgba(13,20,36,0.4);
}

.dark .dark\:border-blue-900\/60 {
    border-color: rgba(13,20,36,0.6);
}

.dark .dark\:border-emerald-900\/60 {
    border-color: rgba(6,78,59,0.6);
}

.dark .dark\:border-green-900\/60 {
    border-color: rgba(20,83,45,0.6);
}

.dark .dark\:border-red-900 {
    border-color: #7f1d1d;
}

.dark .dark\:border-red-900\/60 {
    border-color: rgba(127,29,29,0.6);
}

.dark .dark\:border-slate-600 {
    border-color: #4A515C;
}

.dark .dark\:border-slate-700 {
    border-color: #383D47;
}

.dark .dark\:border-slate-700\/40 {
    border-color: rgba(56,61,71,0.4);
}

.dark .dark\:border-slate-700\/50 {
    border-color: rgba(56,61,71,0.5);
}

.dark .dark\:border-slate-700\/60 {
    border-color: rgba(56,61,71,0.6);
}

.dark .dark\:border-slate-800 {
    border-color: #272B33;
}

.dark .dark\:border-slate-800\/50 {
    border-color: rgba(39,43,51,0.5);
}

.dark .dark\:border-slate-800\/60 {
    border-color: rgba(39,43,51,0.6);
}

.dark .dark\:border-slate-800\/80 {
    border-color: rgba(39,43,51,0.8);
}

.dark .dark\:divide-slate-800 {
    border-color: #272B33;
}

.dark .dark\:from-blue-950\/10 {
    --tw-gradient-from: rgba(8,12,21,0.1);
}

.dark .group:hover .dark\:group-hover\:bg-blue-400 {
    background-color: #6B80A8;
}

.dark .dark\:hover\:bg-blue-500\/30:hover {
    background-color: rgba(74,97,144,0.3);
}

.dark .dark\:hover\:bg-blue-900:hover {
    background-color: #0D1424;
}

.dark .dark\:hover\:bg-blue-900\/50:hover {
    background-color: rgba(13,20,36,0.5);
}

.dark .dark\:hover\:bg-blue-950\/30:hover {
    background-color: rgba(8,12,21,0.3);
}

.dark .dark\:hover\:bg-red-900:hover {
    background-color: #7f1d1d;
}

.dark .dark\:hover\:bg-seal-950\/30:hover {
    background-color: rgba(34,12,12,0.3);
}

.dark .dark\:hover\:bg-slate-800:hover {
    background-color: #272B33;
}

.dark .dark\:hover\:bg-slate-900:hover {
    background-color: #1C212E;
}

.dark .dark\:hover\:border-blue-400:hover {
    border-color: #6B80A8;
}

.dark .dark\:hover\:border-blue-600:hover {
    border-color: #1B2A4A;
}

.dark .dark\:hover\:border-blue-800:hover {
    border-color: #121C30;
}

.dark .dark\:hover\:border-seal-800:hover {
    border-color: #491B1B;
}

.dark .dark\:hover\:text-blue-400:hover {
    color: #6B80A8;
}

.dark .dark\:hover\:text-red-400:hover {
    color: #f87171;
}

.dark .dark\:hover\:text-red-500:hover {
    color: #ef4444;
}

.dark .dark\:hover\:text-slate-200:hover {
    color: #E2E4E8;
}

.dark .dark\:hover\:text-slate-300:hover {
    color: #C7CAD1;
}

.dark .dark\:ring-blue-400\/60 {
    --tw-ring-color: rgba(107,128,168,0.6);
    box-shadow: 0 0 0 1px var(--tw-ring-color);
}

.dark .dark\:text-blue-100 {
    color: #D5DBE6;
}

.dark .dark\:text-blue-300 {
    color: #8FA0BF;
}

.dark .dark\:text-blue-400 {
    color: #6B80A8;
}

.dark .dark\:text-emerald-400 {
    color: #34d399;
}

.dark .dark\:text-green-400 {
    color: #4ade80;
}

.dark .dark\:text-red-400 {
    color: #f87171;
}

.dark .dark\:text-seal-400 {
    color: #C2726E;
}

.dark .dark\:text-slate-100 {
    color: #EFEFEC;
}

.dark .dark\:text-slate-200 {
    color: #E2E4E8;
}

.dark .dark\:text-slate-300 {
    color: #C7CAD1;
}

.dark .dark\:text-slate-400 {
    color: #9098AC;
}

.dark .dark\:text-slate-50 {
    color: #F7F7F5;
}

.dark .dark\:text-slate-500 {
    /* Stond op #5C6470 -- exact dezelfde waarde als de lichte .text-slate-500.
       In de donkere modus is dat donkergrijs op donker: 3,00:1 op #14171F,
       2,69:1 op een kaart, 2,37:1 op een paneel. Alle drieenzestig plekken die
       deze klasse gebruiken waren daarmee onleesbaar (bevinding 19e).

       #8A93A6 haalt 5,81 / 5,21 / 4,60 en blijft gedempter dan
       dark:text-slate-400 (#9098AC). Veel ruimte is er niet: onder deze waarde
       zakt de tekst op een paneel door de 4,5:1. In een donker thema is het
       gedempte bereik nu eenmaal smal. */
    color: #8A93A6;
}

.dark .dark\:text-slate-700 {
    color: #383D47;
}

.dark .dark\:text-white {
    color: #ffffff;
}

.dark .dark\:to-slate-900\/30 {
    --tw-gradient-to: rgba(28,33,46,0.3);
}

/* --- Responsive breakpoints --- */
@media (min-width: 1024px) {
    .lg\:flex {
        display: flex;
    }
    .lg\:flex-row {
        flex-direction: row;
    }
    .lg\:items-center {
        align-items: center;
    }
    .lg\:max-w-4xl {
        max-width: 56rem;
    }
    .lg\:max-w-3xl {
        max-width: 48rem;
    }
    .lg\:mt-0 {
        margin-top: 0rem;
    }
    .lg\:w-64 {
        width: 16rem;
    }
    .lg\:w-\[360px\] {
        width: 360px;
    }
    .lg\:w-auto {
        width: auto;
    }
}

@media (min-width: 768px) {
    .md\:flex-row {
        flex-direction: row;
    }
    .md\:items-center {
        align-items: center;
    }
    .md\:max-h-\[80vh\] {
        max-height: 80vh;
    }
    .md\:max-h-\[85vh\] {
        max-height: 85vh;
    }
    .md\:max-w-2xl {
        max-width: 42rem;
    }
    .md\:p-8 {
        padding: 2rem;
    }
}

@media (min-width: 640px) {
    .sm\:text-sm {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
}

@media (min-width: 1280px) {
    .xl\:w-80 {
        width: 20rem;
    }
}

/* --- Speciale gevallen (number-input spinner) --- */

/* Verberg de standaard spinner-knoppen op number-inputs (lettergrootte-invoerveld) */
input[type="number"].no-spinner {
    appearance: textfield;
    -moz-appearance: textfield;
}
input[type="number"].no-spinner::-webkit-outer-spin-button,
input[type="number"].no-spinner::-webkit-inner-spin-button {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
}

/* Keyframes voor de laad-spinner (animate-spin) */
@keyframes tw-spin {
    to { transform: rotate(360deg); }
}

/* divide-x: verticale scheidingslijn tussen directe kind-elementen in een grid/flex */
.divide-x > * + * {
    border-left-width: 1px;
}
.divide-slate-200 > * + * {
    border-left-color: #E2E4E8;
}
.dark .divide-slate-800 > * + * {
    border-left-color: #272B33;
}

/* ============================================================
   EIGEN COMPONENT-CSS
   ============================================================ */

        /* Actieve staat van de interlineaire laag-toggles (Translit / NL / Gram) */
        .il-layer-btn.il-layer-on {
            background-color: #EAEDF3;
            color: #1B2A4A;
            border-color: #8FA0BF;
        }
        .dark .il-layer-btn.il-layer-on {
            background-color: rgba(91,127,196,0.22);
            color: #5B7FC4;
            border-color: rgba(91,127,196,0.4);
        }

        body {
            font-family: 'Inter', sans-serif;
        }
        .greek-text {
            font-family: 'Gentium Plus', 'Playfair Display', serif;
        }
        /* Schermafbeeldingen in de handleiding-modal */
        .help-screenshot {
            width: 100%;
            height: auto;
            border-radius: 0.75rem;
            border: 1px solid rgba(148, 163, 184, 0.3);
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
            margin-top: 0.5rem;
            display: block;
        }
        .dark .help-screenshot {
            border-color: rgba(51, 65, 85, 0.6);
        }
        /* Kleine schermafbeelding: een uitsnede van één paneel of venster, geen
           volledig scherm. .help-screenshot hierboven rekt met width:100% op tot
           de kolombreedte (598 px gemeten); bij een uitsnede van 224 px breed is
           dat een uitvergroting van bijna drie keer en dan is de tekst ín de
           afbeelding niet meer te lezen. Hier dus de eigen grootte aanhouden, en
           pas krimpen als de kolom smaller is dan de afbeelding zelf. */
        .help-screenshot.help-screenshot-klein {
            width: auto;
            max-width: 100%;
        }
        /* Bijschrift onder een schermafbeelding. Nodig sinds één onderwerp meer
           dan één afbeelding heeft: zonder bijschrift is niet te zien welk
           venster je voor je hebt. */
        .help-figuur {
            margin: 0.75rem 0 0;
        }
        /* Subtiele indicator onder een Grieks woord waarvan het lemma (Strong-code)
           een eigen woordnotitie heeft (zie ook getLemmaNoteKey() in app.js).
           Bewust een stippellijn i.p.v. een volle rand, zodat het niet concurreert
           met de kleurmarkering-onderstreping. */
        .has-lemma-note {
            border-bottom: 2px dotted #a855f7;
            padding-bottom: 1px;
        }
        /* Flexibele dynamische tekstgrootte voor de Griekse woorden (nu comfortabel kleiner ingesteld) */
        .greek-word-size {
            font-size: calc(1.5rem * var(--greek-size-factor, 1.0));
            line-height: calc(1.6 * var(--greek-size-factor, 1.0));
        }
        @media (max-width: 768px) {
            .greek-word-size {
                font-size: calc(1.25rem * var(--greek-size-factor, 1.0));
            }
        }
        /* Verluchte eerste letter van het hoofdstuk (drop-cap), schaalt mee met de Griekse tekstgrootte */
        .drop-cap-letter {
            font-family: 'Gentium Plus', 'Playfair Display', serif;
            font-size: calc(3.2rem * var(--greek-size-factor, 1.0));
            font-weight: 700;
            color: #1B2A4A;
            float: left;
            line-height: 0.78;
            margin-right: 0.12rem;
            margin-top: 0.1rem;
        }
        .dark .drop-cap-letter {
            color: #5B7FC4;
        }
        @media (max-width: 768px) {
            .drop-cap-letter {
                font-size: calc(2.4rem * var(--greek-size-factor, 1.0));
            }
        }
        /* Custom scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        .dark ::-webkit-scrollbar-track {
            background: #1f2937;
        }
        ::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 4px;
        }
        .dark ::-webkit-scrollbar-thumb {
            background: #4b5563;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

        /* Voorkom dat hover-effecten de stijl van geselecteerde of gemarkeerde woorden verpesten */
        .greek-word-selected {
            background-color: #EAEDF3 !important; /* navy-soft */
            color: #1B2A4A !important; /* navy text on highlight */
        }
        .dark .greek-word-selected {
            background-color: rgba(91,127,196,0.28) !important; /* navy-soft dark */
            color: #E8E9ED !important; /* licht op donkere highlight */
        }
        /* Subtiele hover-schaal of effect voor het geselecteerde woord zonder kleurverlies */
        .greek-word-selected:hover {
            opacity: 0.95;
            background-color: #EAEDF3 !important;
            color: #1B2A4A !important;
        }
        .dark .greek-word-selected:hover {
            opacity: 0.95;
            background-color: rgba(91,127,196,0.28) !important;
            color: #E8E9ED !important;
        }

        /* Bladwijzer icoontje per vers */
        .verse-bookmark-btn {
            opacity: 1;
            color: #667085; /* altijd zichtbaar; 4,75:1 op wit (WCAG 1.4.11) */
            transition: color 0.15s;
            flex-shrink: 0;
        }
        .verse-bookmark-btn:hover {
            color: #7A2E2E; /* seal-red bookmark */
        }
        .verse-bookmark-btn.bookmarked {
            color: #7A2E2E; /* seal-red bookmark */
        }
        .dark .verse-bookmark-btn {
            color: #5C6470; /* slate-500 */
        }
        .dark .verse-bookmark-btn:hover {
            color: #C2726E; /* seal-red bookmark dark */
        }
        .dark .verse-bookmark-btn.bookmarked {
            color: #C2726E; /* seal-red bookmark dark */
        }

        /* === NOTITIES EDITOR === */
        .note-toolbar-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 1.75rem;
            height: 1.75rem;
            padding: 0 0.25rem;
            border-radius: 0.375rem;
            font-size: 0.8rem;
            color: #5C6470;
            transition: background 0.15s, color 0.15s;
            cursor: pointer;
            border: none;
            background: transparent;
        }
        .note-toolbar-btn:hover { background: #EFEFEC; color: #272B33; }
        .note-toolbar-btn.active { background: #EAEDF3; color: #1B2A4A; }
        .dark .note-toolbar-btn { color: #9098AC; }
        .dark .note-toolbar-btn:hover { background: #272B33; color: #EFEFEC; }
        .dark .note-toolbar-btn.active { background: rgba(91,127,196,0.22); color: #5B7FC4; }
        .note-editor-content:empty:before { content: attr(placeholder); color: #667085; pointer-events: none; }
        .dark .note-editor-content:empty:before { color: #4A515C; }
        .note-editor-content ul { list-style: disc; padding-left: 1.25rem; margin: 0.25rem 0; }
        .note-editor-content ol { list-style: decimal; padding-left: 1.25rem; margin: 0.25rem 0; }
        .note-editor-content li { margin: 0.125rem 0; }
        .note-editor-content b, .note-editor-content strong { font-weight: 700; }
        .note-editor-content i, .note-editor-content em { font-style: italic; }
        .note-editor-content u { text-decoration: underline; }
        .note-editor-content.greek-active { font-family: 'Gentium Plus', serif; }

        /* "Zie ook"-verwijzing (chip) in notities. Bewust ongevuld/neutraal (geen
           kleur uit het 7-kleuren-markeringssysteem, zie ontwerpbeslissing 8) —
           alleen een dunne rand, passend bij de rest van de interface. */
        a.note-ref {
            display: inline;
            padding: 0 0.4rem;
            margin: 0 0.05rem;
            border: 1px solid #B9BFCC;
            border-radius: 4px;
            font-size: 0.85em;
            font-family: 'Inter', system-ui, sans-serif;
            color: #4A5468;
            text-decoration: none;
            white-space: nowrap;
            cursor: pointer;
            vertical-align: baseline;
        }
        a.note-ref:hover { border-color: #8891A3; color: #1B2A4A; }
        .note-ref-icon { display: inline-block; width: 0.85em; height: 0.85em; vertical-align: -0.1em; margin-right: 0.2em; }
        .note-ref-icon:hover { color: #7A2E2E; }
        .dark a.note-ref { border-color: #454E60; color: #A9B1C2; }
        .dark a.note-ref:hover { border-color: #6C7690; color: #E4E7EE; }
        .dark .note-ref-icon:hover { color: #C97B7B; }

        /* Picker voor "Verwijzing invoegen" (Fase 2). Dit project draait op een
           precompiled Tailwind-stylesheet zonder live JIT, dus arbitrary-value
           klassen (w-[360px], top-1/2 e.d.) hebben geen effect — vandaar hier
           gewone CSS in plaats van die utility-klassen, zelfde aanpak als bij
           a.note-ref hierboven. */
        .note-ref-picker-modal {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 360px;
            max-width: 92vw;
            max-height: 80vh;
        }
        .note-ref-verse-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0.5rem;
        }
        .note-ref-confirm-btn {
            width: 100%;
            font-size: 0.875rem;
            font-weight: 500;
            background: #0F172A;
            color: #fff;
            border-radius: 0.5rem;
            padding: 0.5rem 0;
            transition: opacity 0.15s;
        }
        .note-ref-confirm-btn:hover { opacity: 0.9; }
        .dark .note-ref-confirm-btn { background: #F1F5F9; color: #0F172A; }
        #noteRefLemmaResults { min-height: 80px; }

        /* Vinkjes "Bijbeltekst meenemen" onder in het Vers-tabblad van de picker. */
        .note-ref-text-options {
            border-top: 1px solid rgba(148, 163, 184, 0.25);
            padding-top: 0.6rem;
            display: flex;
            flex-direction: column;
            gap: 0.3rem;
        }
        .dark .note-ref-text-options { border-top-color: rgba(148, 163, 184, 0.18); }
        .note-ref-text-options-title {
            font-size: 0.7rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: #667085;
            margin-bottom: 0.1rem;
        }
        .note-ref-text-option {
            display: flex;
            align-items: center;
            gap: 0.45rem;
            font-size: 0.8rem;
            color: #1B2A4A;
            cursor: pointer;
        }
        .dark .note-ref-text-option { color: #C7D2E3; }
        .note-ref-text-option input { cursor: pointer; }
        .note-ref-text-option-sub { color: #667085; }
        /* Uitgegrijsd: het boek heeft geen Griekse tekst (Oude Testament). Bewust
           óók het label dof, niet alleen het vakje — anders lijkt de keuze nog
           beschikbaar en klikt de lezer zich suf op de tekst ernaast. */
        .note-ref-text-option--disabled,
        .note-ref-text-option--disabled input {
            cursor: not-allowed;
            opacity: 0.45;
        }
        .note-ref-text-options-hint {
            font-size: 0.7rem;
            font-style: italic;
            color: #667085;
        }

        /* Ingevoegde bijbeltekst in een notitie of studie, direct achter de
           verwijzing. Zelfde navy/serif-familie als de leeskolommen, met een
           streep in de kantlijn zodat het als citaat leest en niet als jouw
           eigen tekst. Gewone, bewerkbare inhoud — geen contenteditable="false"
           zoals de chip zelf: je moet er een zin uit kunnen halen of iets bij
           kunnen schrijven. */
        .note-bible-text {
            margin: 0.35rem 0 0.45rem 0;
            padding: 0.1rem 0 0.1rem 0.7rem;
            border-left: 2px solid rgba(27, 42, 74, 0.18);
            font-family: Georgia, 'Times New Roman', serif;
            color: #1B2A4A;
            line-height: 1.65;
        }
        .dark .note-bible-text {
            color: #C7D2E3;
            border-left-color: rgba(199, 210, 227, 0.22);
        }
        .note-bible-text--greek {
            font-family: 'Gentium Plus', 'Playfair Display', serif;
        }
        /* Op donkere achtergrond mag het grijs lichter blijven: #9098AC haalt
           daar 6,6:1, ruim boven de eis. Alleen op licht was het te bleek. */
        .dark .note-ref-text-options-title { color: #9098AC; }
        .dark .note-ref-text-option-sub { color: #9098AC; }
        .dark .note-ref-text-options-hint { color: #9098AC; }
        .dark .note-bible-vs { color: #9098AC; }
        .dark .note-bible-sv-boek { color: #9098AC; }

        /* Inline hoofdstuknotitie onder de hoofdstuktitel: standaard vier regels.
           Bewust een max-height in em en geen -webkit-line-clamp: de notitie is
           opgemaakte HTML (lijsten, ingevoegde bijbeltekst met een eigen regelhoogte)
           en line-clamp gedraagt zich daar per browser anders. 6.5em is vier regels
           bij de leading van dit blok (text-sm/leading-relaxed). */
        .chapter-note-inhoud--ingeklapt {
            max-height: 6.5em;
            overflow: hidden;
            position: relative;
        }
        /* Vervagen naar de achtergrond van het kader, zodat zichtbaar is dát er
           meer staat — een harde afsnijding leest als het einde van de notitie. */
        .chapter-note-inhoud--ingeklapt::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 1.4em; /* alleen de onderrand van de vierde regel, niet de hele regel */
            background: linear-gradient(to bottom, rgba(248, 250, 252, 0), #F8FAFC);
            pointer-events: none;
        }
        /* De gecompileerde utility-set kent geen bg-slate-900/50 (een
           opacity-modifier), waardoor de inline hoofdstuknotitie in donkere modus
           een lichte doos bleef staan — dezelfde valkuil als bij de picker-CSS
           hierboven. #090F21 is wat slate-900/50 boven de leeskaart (slate-950)
           zou opleveren, maar dan dekkend, zodat de vervaging hieronder er exact
           op kan aansluiten. */
        .dark #chapterNoteDisplay { background-color: #090F21; }
        .dark .chapter-note-inhoud--ingeklapt::after {
            background: linear-gradient(to bottom, rgba(9, 15, 33, 0), #090F21);
        }
        .chapter-note-meer {
            margin-top: 0.35rem;
            font-size: 0.75rem;
            font-weight: 600;
            color: #2563EB;
            background: none;
            padding: 0;
            cursor: pointer;
        }
        .chapter-note-meer:hover { text-decoration: underline; }
        .dark .chapter-note-meer { color: #60A5FA; }


        /* Geplakte tabellen en webadressen in een notitie. De werkbalk maakt ze niet,
           maar je kunt ze plakken, en dan horen ze er leesbaar uit te zien. */
        .note-editor-content table,
        .note-bible-text table {
            border-collapse: collapse;
            margin: 0.4rem 0;
            font-size: 0.95em;
        }
        .note-editor-content th,
        .note-editor-content td {
            border: 1px solid rgba(27, 42, 74, 0.18);
            padding: 0.2rem 0.45rem;
            text-align: left;
            vertical-align: top;
        }
        .dark .note-editor-content th,
        .dark .note-editor-content td { border-color: rgba(199, 210, 227, 0.22); }
        .note-editor-content th { font-weight: 700; background: rgba(27, 42, 74, 0.04); }
        .dark .note-editor-content th { background: rgba(199, 210, 227, 0.06); }
        .note-editor-content a[href^="http"] {
            color: #2563EB;
            text-decoration: underline;
        }
        .dark .note-editor-content a[href^="http"] { color: #60A5FA; }

        /* Opmaak binnen notities en studies, als klasse in plaats van als
           inline stijl (variant b uit ontwerp/filter-bij-import.md, 9 september
           2026). Reden: met klassen hoeft het filter het style-attribuut niet
           meer toe te laten, en dat scheelt de enige plek waar nog vrije tekst
           in een attribuut terechtkwam. De maten komen uit NOTE_FONT_SIZES in
           app.js — die twee lijsten horen gelijk te blijven. */
        .note-tekst-10 { font-size: 10px; }
        .note-tekst-12 { font-size: 12px; }
        .note-tekst-14 { font-size: 14px; }
        .note-tekst-16 { font-size: 16px; }
        .note-tekst-18 { font-size: 18px; }
        .note-tekst-22 { font-size: 22px; }
        .note-tekst-26 { font-size: 26px; }
        .note-grieks { font-family: 'Gentium Plus', serif; }
        .note-erfelijk { font-family: inherit; }

        /* Boeknaam zoals de Statenvertaling die schrijft, waar die afwijkt van de
           HSV-naam die de app toont — bv. "(SV: Rechters)" bij Richteren. */
        .note-bible-sv-boek {
            font-family: 'Inter', system-ui, sans-serif;
            font-size: 0.72em;
            font-style: italic;
            color: #667085;
            margin-right: 0.15em;
        }

        /* Versnummer vóór elk vers; alleen bij een bereik of een heel hoofdstuk
           (bij één vers staat het nummer al in de verwijzing ernaast). */
        .note-bible-vs {
            font-family: 'Inter', system-ui, sans-serif;
            font-size: 0.7em;
            font-weight: 600;
            color: #667085;
            margin-right: 0.15em;
            vertical-align: 0.35em;
        }

        /* Backlinks-popover ("genoemd in notitie bij...") — Fase 5 */
        .backlinks-popover {
            width: 288px;
            max-width: 90vw;
            max-height: 320px;
            overflow-y: auto;
            /* Expliciete z-index i.p.v. te vertrouwen op de Tailwind-bracket-klasse
               (z-[200]) in de HTML — die bleek in deze opzet geen CSS te genereren
               (computed z-index bleef 'auto'). Ontdekt bij het bouwen van de
               tags-multiselect-popup, die daar wél zichtbaar door brak (klikken
               kwamen door de popover heen bij de Griekse tekst eronder terecht). */
            z-index: 200;
        }
        .backlinks-popover-header {
            padding: 0.5rem 0.75rem;
            font-size: 0.75rem;
            font-weight: 600;
            color: #6B7488;
            border-bottom: 1px solid #EDEFF3;
        }
        .dark .backlinks-popover-header { color: #A9B1C2; border-bottom-color: #2A3140; }
        .backlinks-popover-row {
            display: flex;
            align-items: flex-start;
            gap: 0.5rem;
            width: 100%;
            text-align: left;
            padding: 0.5rem 0.75rem;
            cursor: pointer;
        }
        .backlinks-popover-row:hover { background: #F5F6F8; }
        .dark .backlinks-popover-row:hover { background: #1A2030; }
        .backlinks-popover-row-icon {
            width: 0.9rem;
            height: 0.9rem;
            flex-shrink: 0;
            margin-top: 0.1rem;
            color: #667085;
        }
        .dark .backlinks-popover-row-icon { color: #6C7690; }
        .backlinks-popover-row-text { min-width: 0; flex: 1; }
        .backlinks-popover-row-label { font-size: 0.75rem; font-weight: 600; color: #3A4256; }
        .dark .backlinks-popover-row-label { color: #D3D8E2; }
        .backlinks-popover-row-preview {
            font-size: 0.75rem;
            color: #667085;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .dark .backlinks-popover-row-preview { color: #6C7690; }
        /* Bijbelstudie-rijen springen er iets uit tussen de notitie-rijen —
           zelfde blauwe accent als elders in de app voor studies (header-icoon,
           overzichtspaneel). */
        .backlinks-popover-row-study { background: #EFF3FB; border-radius: 0.5rem; }
        .backlinks-popover-row-study:hover { background: #E0E9F9; }
        .backlinks-popover-row-study .backlinks-popover-row-icon { color: #3B5A8C; }
        .backlinks-popover-row-study .backlinks-popover-row-label { color: #3B5A8C; }
        .dark .backlinks-popover-row-study { background: rgba(91,127,196,0.12); }
        .dark .backlinks-popover-row-study:hover { background: rgba(91,127,196,0.2); }
        .dark .backlinks-popover-row-study .backlinks-popover-row-icon { color: #9DB6E8; }
        .dark .backlinks-popover-row-study .backlinks-popover-row-label { color: #9DB6E8; }
        .backlinks-popover-divider { height: 1px; background: #EDEFF3; margin: 0.25rem 0.5rem; }
        .dark .backlinks-popover-divider { background: #2A3140; }

        /* Tags-multiselect-popup ("Alle tags…", zie tagsPickerOverlay/Popup) —
           expliciete z-index om dezelfde reden als .backlinks-popover hierboven. */
        #tagsPickerOverlay { z-index: 210; }
        #tagsPickerPopup { z-index: 211; }
        #tagsManagePanel { z-index: 45; }
        #tagDeleteImpactOverlay { z-index: 220; }
        #tagDeleteImpactModal { z-index: 221; }
        /* Zelfde correctie voor de bestaande verwijzingspicker (notities/studies)
           — bleek preventief nodig, ook al was dit nooit expliciet fout gemeten;
           het risico is identiek aan wat de tags-popup liet zien. */
        #noteRefPickerOverlay { z-index: 200; }
        #noteRefPickerModal { z-index: 200; }
        /* Uitgebreid-zoeken-modal (zie openAdvancedSearchModal) — zelfde
           correctie, en bewust 230/231 (niet 220/221, die al bezet zijn door
           tagDeleteImpactModal hierboven). */
        #advSearchOverlay { z-index: 230; }
        #advSearchModal { z-index: 231; }
        /* Grieks toetsenbord moet altijd boven élke modal kunnen renderen —
           gevonden via echt testen (24 aug): met alleen de standaard
           Tailwind-klasse "z-50" in de HTML zat het toetsenbord ACHTER
           #advSearchOverlay (230) en was onklikbaar zodra dat venster open
           stond. Blijft onder de opslaan-toast (300). */
        #virtualKeyboard { z-index: 240; }

        /* Eigen grid-klasse i.p.v. Tailwinds grid-cols-[...]-bracketsyntax: dit
           project draait op een precompiled stylesheet zonder live JIT, dus een
           nieuwe bracketwaarde die nog nooit eerder gebruikt is heeft gewoon
           geen effect (leverde een volledig verkeerde, uiteenvallende layout op). */
        .verse-row-grid {
            display: grid;
            grid-template-columns: 3.1rem 1fr 3.4rem;
        }

        /* Statenvertaling-kolom (parallelle vertaling, zie
           plan-statenvertaling-parallel.md). Extra grid-kolom naast de bestaande
           drie; rijhoogte volgt automatisch de langste kolom, dus Grieks en SV
           staan altijd op gelijke hoogte zonder scroll-synchronisatie. */
        .verse-row-grid.has-sv {
            grid-template-columns: 3.1rem 1fr 1fr 3.4rem;
        }
        .sv-verse-col {
            font-family: Georgia, 'Times New Roman', serif;
            /* Schaalt mee met dezelfde --greek-size-factor als de Griekse tekst
               (zie updateFontSizeStyles() in app.js) — één A-/A+ bediening voor
               beide kolommen, zoals gevraagd. Basiswaarde verhoogd van 0.95rem
               naar 1.15rem: bij 100% stond de SV-tekst nu merkbaar kleiner dan
               nodig was voor een prettige leesbalans naast het Grieks. */
            font-size: calc(1.15rem * var(--greek-size-factor, 1.0));
            line-height: 1.7;
            color: #1B2A4A;
            padding-left: 0.75rem;
            border-left: 1px solid rgba(27, 42, 74, 0.12);
        }
        .dark .sv-verse-col {
            color: #C7D2E3;
            border-left-color: rgba(199, 210, 227, 0.15);
        }
        .sv-verse-col--loading,
        .sv-verse-col--unavailable {
            font-family: inherit;
            font-style: italic;
            font-size: 0.8rem;
            color: #667085;
        }
        .dark .sv-verse-col--loading,
        .dark .sv-verse-col--unavailable {
            color: #5C6470;
        }
        /* Wat de SV-kolom sinds de overstap naar STV (oktober 2026) meer toont dan
           platte tekst: ontwerp/sv-weergave.md §4. Grijs is #5F6B7E en niet het
           lichtere #7A8AA0 van de placeholders: dit is inhoud, en klein grijs moet
           dan 4,5:1 halen (WCAG 1.4.3). */

        /* Door de vertalers toegevoegde woorden: cursief, zoals in de druk. */
        .sv-toegevoegd { font-style: italic; }
        /* De acrostische letter (Aleph, Beth …) op zijn plek in het vers, cursief zoals
           in de druk. Iets lichter dan de tekst: anders leest hij als een woord dat de
           vertalers toevoegden, want die staan ook cursief. */
        .sv-letter { font-style: italic; color: #5F6B7E; }
        .dark .sv-letter { color: #9AA4B8; }
        /* De Godsnaam: de tekst blijft "HEERE" (kopiëren en zoeken), alleen
           "EERE" staat kleiner, zodat het oogt als kleinkapitaal (besloten
           13-10-2026). Geen font-variant: dan zou de onderliggende tekst "Heere"
           moeten zijn. */
        .sv-kk { font-size: 0.8em; }
        /* De letter boven een vers van een acrostische psalm (Aleph, Beth …). */
        .sv-kopje {
            font-size: 0.75em;
            letter-spacing: 0.04em;
            color: #5F6B7E;
            margin-bottom: 0.1rem;
        }
        /* Het SV-versnummer waar de SV in het NT anders nummert dan Scrivener. */
        .sv-versnr-label {
            font-family: ui-sans-serif, system-ui, sans-serif;
            font-size: 0.7em;
            font-weight: 600;
            color: #5F6B7E;
            white-space: nowrap;
        }
        /* 1 Joh. 2:23b: niet in de SV-tekst. Eigen regel, zodat hij nooit voor
           SV-tekst wordt aangezien. */
        .sv-aanvulling {
            font-style: italic;
            font-size: 0.85em;
            line-height: 1.5;
            color: #5F6B7E;
            margin-top: 0.3rem;
        }
        .dark .sv-kopje,
        .dark .sv-versnr-label,
        .dark .sv-aanvulling { color: #9AA4B8; }

        /* Rijen met alleen iets in de SV-kolom (waarschuwing boven, onderschrift
           onder): het vak komt in de derde kolom, recht boven/onder de SV-tekst. */
        .sv-extra-rij-inhoud { grid-column: 3; }
        .sv-waarschuwing {
            text-align: left;
            font-size: 0.8rem;
            line-height: 1.4;
            color: #1D4ED8;
            padding-left: 0.75rem;
            text-decoration: underline;
            text-decoration-color: rgba(29, 78, 216, 0.35);
            text-underline-offset: 2px;
        }
        .sv-waarschuwing:hover { text-decoration-color: currentColor; }
        .dark .sv-waarschuwing {
            color: #93B4F5;
            text-decoration-color: rgba(147, 180, 245, 0.4);
        }
        /* Het onderschrift van een brief: klein en cursief onder het laatste vers. */
        .sv-onderschrift {
            font-family: Georgia, 'Times New Roman', serif;
            font-style: italic;
            font-size: calc(0.95rem * var(--greek-size-factor, 1.0));
            line-height: 1.6;
            color: #5F6B7E;
            padding-left: 0.75rem;
            border-left: 1px solid rgba(27, 42, 74, 0.12);
        }
        .dark .sv-onderschrift {
            color: #9AA4B8;
            border-left-color: rgba(199, 210, 227, 0.15);
        }

        /* Mobiel: geen ruimte voor 4 kolommen naast elkaar (zelfde breekpunt als
           de rest van de app, zie o.a. de bestaande @media (max-width: 768px)-
           regels elders in dit bestand). SV-tekst valt terug naar een eigen volle-
           breedte rij, direct onder de Griekse tekst binnen dezelfde vers-rij. */
        @media (max-width: 767px) {
            .verse-row-grid.has-sv {
                grid-template-columns: 3.1rem 1fr 3.4rem;
            }
            .verse-row-grid.has-sv .verse-num-wrapper {
                grid-column: 1;
                grid-row: 1 / span 2;
            }
            .verse-row-grid.has-sv .verse-greek-col {
                grid-column: 2;
                grid-row: 1;
            }
            .verse-row-grid.has-sv .verse-actions-col {
                grid-column: 3;
                grid-row: 1 / span 2;
            }
            .verse-row-grid.has-sv .sv-verse-col {
                grid-column: 2 / span 2;
                grid-row: 2;
                border-left: none;
                border-top: 1px solid rgba(27, 42, 74, 0.12);
                padding-left: 0;
                padding-top: 0.4rem;
                margin-top: 0.3rem;
            }
            .dark .verse-row-grid.has-sv .sv-verse-col {
                border-top-color: rgba(199, 210, 227, 0.15);
            }
            /* Op een smal scherm staat de SV onder het Grieks, over twee kolommen;
               de extra rijen dus ook. */
            .sv-extra-rij-inhoud { grid-column: 2 / span 2; }
            .sv-waarschuwing,
            .sv-onderschrift { padding-left: 0; border-left: none; }
        }
        /* Combineert het backlink-icoon en het versnummer in één kolom, met een
           kleine eigen tussenruimte — los van de grotere gap-4 tussen de overige
           kolommen, zodat er geen onnodige lege ruimte naast het versnummer
           ontstaat en de tekstkolom er iets van overhoudt. */
        .verse-num-wrapper {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 0.15rem;
        }

        /* Vers-backlink-knop: toont alleen wanneer ANDERE notities naar dit vers
           verwijzen (los van of dit vers zelf een notitie heeft). */
        .verse-backlink-btn {
            opacity: 1;
            color: #7A8AA0;
            transition: color 0.15s;
            flex-shrink: 0;
        }
        .verse-backlink-btn:hover { color: #1B2A4A; }
        .dark .verse-backlink-btn { color: #5C6470; }
        .dark .verse-backlink-btn:hover { color: #8FA3C7; }

        /* Vers-notitie icoon */
        .verse-note-btn {
            opacity: 0;
            color: #667085;
            transition: opacity 0.15s, color 0.15s;
            flex-shrink: 0;
        }
        .verse-note-btn.has-note { opacity: 1; color: #1B2A4A; }
        .verse-row:hover .verse-note-btn { opacity: 1; }
        .verse-note-btn:hover { color: #1B2A4A; }
        .dark .verse-note-btn { color: #5C6470; }
        .dark .verse-note-btn.has-note { color: #5B7FC4; }
        .dark .verse-note-btn:hover { color: #5B7FC4; }

        /* Hoofdstuk-notitieknop (stap 3.6-fix): staat buiten een .verse-row, dus de
           hover-reveal-regel hierboven (.verse-row:hover .verse-note-btn) heeft geen
           effect. Zonder deze regel bleef het icoon daardoor onzichtbaar totdat er
           al een notitie bestond. Nu altijd zichtbaar (subtiel), voller op hover. */
        /* 0,8 in plaats van 0,55, en in het donker een lichtere grijs: in rust haalde
           het potloodje maar 2,17:1 (licht) en 1,75:1 (donker), onder de 3:1 die een
           knop nodig heeft (WCAG 1.4.11). Gevonden op 23 september bij het bouwen van
           het boekje ernaast, dat een spiegelbeeld van dit potloodje is; nu 3,34:1 en
           4,16:1. Een potlood met een notitie (.has-note) was al vol en blijft dat. */
        .chapter-note-btn { opacity: 0.8; }
        .dark .chapter-note-btn:not(.has-note):not(:hover) { color: #8A93A6; }
        .chapter-note-btn:hover { opacity: 1; }
        .chapter-note-btn.has-note { opacity: 1; }

        .interlinear-verse {
            display: flex;
            flex-wrap: wrap;
            gap: 2px 10px;
            align-items: flex-end;
            line-height: 1;
        }
        .il-word-block {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            cursor: pointer;
            padding: 4px 5px 5px;
            border-radius: 6px;
            transition: background 0.12s;
            vertical-align: bottom;
        }
        .il-word-block:hover {
            background: rgba(0,0,0,0.05);
        }
        .dark .il-word-block:hover {
            background: rgba(255,255,255,0.06);
        }
        .il-word-block.greek-word-selected {
            background-color: #EAEDF3 !important;
        }
        .dark .il-word-block.greek-word-selected {
            background-color: rgba(91,127,196,0.18) !important;
        }
        .il-greek {
            font-family: 'Gentium Plus', 'Playfair Display', serif;
            font-size: calc(1.5rem * var(--greek-size-factor, 1.0));
            color: #1c1917;
            line-height: 1.2;
        }
        .dark .il-greek {
            color: #EFEFEC;
        }
        .il-translit {
            font-size: calc(0.82rem * var(--greek-size-factor, 1.0));
            color: #5C6470;
            font-style: italic;
            line-height: 1;
        }
        .dark .il-translit {
            color: #9098AC;
        }
        .il-dutch {
            font-size: calc(0.88rem * var(--greek-size-factor, 1.0));
            color: #0f6e56;
            font-weight: 600;
            background: #e1f5ee;
            padding: 1px 6px;
            border-radius: 10px;
            line-height: 1.3;
            /* Was white-space: nowrap — bij een lange vertaling (meerdere
               betekenissen, komma-gescheiden) werd het woordblok daardoor zo
               breed als die ene regel, waarna het Griekse woord er middenin
               gecentreerd kwam te staan i.p.v. netjes op zijn plek (zie
               plan-statenvertaling-parallel.md-achtige overleg met Benny,
               19/20 aug). Nu: normaal woordafbreken, met een maximumbreedte
               zodat lange vertalingen over 2-3 regels vallen in plaats van
               het hele blok op te rekken. text-align: center houdt de pil er
               bij meerdere regels nog verzorgd uit zien zien.
               Let op: max-width in rem, niet px — schaalt daardoor vanzelf
               een beetje mee met --ui-size-factor/browserzoom, en is een
               vaste tekstbreedte-grens, geen viewport-breedte, dus dit heeft
               geen enkele invloed op de mobiele/tablet-layout die nog apart
               beoordeeld wordt. */
            white-space: normal;
            max-width: 9rem;
            text-align: center;
            word-break: normal;
            overflow-wrap: break-word;
        }
        .dark .il-dutch {
            color: #5dcaa5;
            background: rgba(29,158,117,0.15);
        }
        .dark .il-grammar { color: #9098AC; }
        .il-grammar {
            font-size: calc(0.75rem * var(--greek-size-factor, 1.0));
            color: #667085; /* zie .text-slate-400 */
            font-family: monospace;
            line-height: 1;
        }

        /* Interlineaire toggle knop actief-state */
        .il-mode-active {
            background-color: #EAEDF3 !important;
            color: #1B2A4A !important;
            border-color: #5B7FC4 !important;
        }
        .dark .il-mode-active {
            background-color: rgba(91,127,196,0.2) !important;
            color: #5B7FC4 !important;
            border-color: rgba(91,127,196,0.4) !important;
        }

        /* Zoekresultaat-highlight op Griekse woorden (zoekbalk-matches in de tekst) */
        .search-match-highlight {
            background-color: #D5DBE6; /* blue-100 equivalent */
            color: #16223C; /* blue-700 equivalent */
            box-shadow: 0 0 0 1px #8FA0BF; /* ring-blue-300 equivalent */
        }
        .dark .search-match-highlight {
            background-color: rgba(91,127,196,0.35);
            color: #EAEDF3;
            box-shadow: 0 0 0 1px rgba(91,127,196,0.5);
        }

/* === MARKEREN (highlight-feature, Word-stijl tekstmarkering) === */
/* v2: geen aparte modus meer -- de knop toont altijd de actieve kleur (icoon +
   kleurbalkje eronder, zoals in Word) en past die toe op de huidige
   tekstselectie. Kleur kiezen gaat alleen via het dropdown-paletje. */

.mark-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}
.mark-color-bar {
    display: block;
    width: 1.15rem;
    height: 0.3rem;
    border-radius: 0.15rem;
    background-color: #eab308;
}

/* Kleurenpaletje voor de markeer-toolbar. Bewust plain CSS i.p.v. Tailwind-
   arbitrary-classes (zelfde reden als bij .note-ref-picker-modal: dit project
   draait op een precompiled stylesheet zonder live JIT). */
.mark-color-dropdown {
    position: fixed;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem;
    background: #fff;
    border: 1px solid #E2E4E8;
    border-radius: 0.625rem;
    box-shadow: 0 8px 24px rgba(15,23,42,0.14);
    z-index: 200;
}
.dark .mark-color-dropdown {
    background: #171B26;
    border-color: #2A3140;
    box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}

/* Vaste afmetingen -- geen hover-vergroting, op uitdrukkelijk verzoek */
.mark-swatch {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    border: 2px solid transparent;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    transition: border-color 0.1s, box-shadow 0.1s;
}
.mark-swatch:hover { box-shadow: 0 0 0 2px rgba(15,23,42,0.12); }
.dark .mark-swatch:hover { box-shadow: 0 0 0 2px rgba(255,255,255,0.18); }
.mark-swatch.mark-swatch-active { border-color: #1B2A4A; }
.dark .mark-swatch.mark-swatch-active { border-color: #E8E9ED; }

.mark-swatch-eraser {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    border: 2px dashed #667085; /* 4,75:1 op wit — de rand is hier de enige drager (WCAG 1.4.11) */
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6B7488;
    background: #fff;
    padding: 0;
    transition: border-color 0.1s, box-shadow 0.1s;
}
.mark-swatch-eraser:hover { box-shadow: 0 0 0 2px rgba(15,23,42,0.12); }
.dark .mark-swatch-eraser:hover { box-shadow: 0 0 0 2px rgba(255,255,255,0.18); }
.mark-swatch-eraser.mark-swatch-active { border-color: #1B2A4A; border-style: solid; }
.dark .mark-swatch-eraser { background: #171B26; color: #A9B1C2; border-color: #454E60; }
.dark .mark-swatch-eraser.mark-swatch-active { border-color: #E8E9ED; }

/* === AANVULLENDE FIX: gemiste classes uit grondigere herextractie === */

.border-slate-200\/60 {
    border-color: rgba(226,228,232,0.6);
}

.dark .dark\:bg-blue-400 {
    background-color: #6B80A8;
}

.dark .dark\:hover\:bg-blue-900\/20:hover {
    background-color: rgba(13,20,36,0.2);
}

.dark .dark\:hover\:bg-slate-800\/50:hover {
    background-color: rgba(39,43,51,0.5);
}

.dark .dark\:hover\:text-slate-100:hover {
    color: #EFEFEC;
}

.dark .dark\:text-emerald-300 {
    color: #6ee7b7;
}

.dark .dark\:text-red-300 {
    color: #fca5a5;
}

.dark .dark\:text-slate-950 {
    color: #14171F;
}

.grid-cols-\[2\.4rem_1fr_1\.5rem_1\.5rem\] {
    grid-template-columns: 2.4rem 1fr 1.5rem 1.5rem;
}

.hover\:bg-blue-100\/50:hover {
    background-color: rgba(213,219,230,0.5);
}

.hover\:text-slate-900:hover {
    color: #1C212E;
}

.last\:border-b-0:last-child {
    border-bottom-width: 0;
}

.leading-\[1\.8\] {
    line-height: 1.8;
}

.mb-10 {
    margin-bottom: 2.5rem;
}

.pb-6 {
    padding-bottom: 1.5rem;
}

.pr-2 {
    padding-right: 0.5rem;
}

.ring-blue-500\/30 {
    --tw-ring-color: rgba(74,97,144,0.3);
    box-shadow: 0 0 0 1px var(--tw-ring-color);
}

.scale-105 {
    transform: scale(1.05);
}

.text-emerald-800 {
    color: #065f46;
}

.text-emerald-900 {
    color: #064e3b;
}

.text-red-800 {
    color: #991b1b;
}

.text-red-900 {
    color: #7f1d1d;
}

.text-slate-950 {
    color: #14171F;
}

/* Prullenbak Styles */
.trash-item {
    border-left: 3px solid #ef4444; 
    background-color: #fef2f2;
}
.dark .trash-item {
    background-color: rgba(127, 29, 29, 0.15);
    border-left-color: #b91c1c;
}
/* ============================================================
   CONCORDANTIE PANEEL (Stap 2.2)
   ============================================================ */

/* Breedte wordt bestuurd via inline style (JS, sleepbaar + onthouden).
   max-width voorkomt overflow op kleine schermen. */
#concordancePanel {
    max-width: 100vw;
    position: fixed; /* positioneringscontext voor de resize-handle */
}

/* Tot 13 september 2026 stond hier: onder 480px het handvat verbergen en het
   paneel naar 100vw dwingen. Dat werkte, maar was de enige van de negen sleepbare
   panelen met zo'n regel — en het gaf de lezer geen keuze, terwijl de andere acht
   inmiddels allemaal wél sleepbaar zijn op een telefoon (zie app.js,
   initRightPanelResize() en concordanceEffectiveMax()). Vervangen: het minimum ging
   naar 220px (was 320) en de bovengrens klemt in app.js al op window.innerWidth, dus
   het handvat kan niet meer voorbij het scherm terechtkomen. Geen aparte regel hier
   meer nodig. */

/* Slide-in animatie */
#concordancePanel:not(.hidden) {
    animation: concordanceSlideIn 0.2s ease-out both;
}

@keyframes concordanceSlideIn {
    from { transform: translateX(-100%); opacity: 0.6; }
    to   { transform: translateX(0);    opacity: 1; }
}

/* Resize-handle aan de rechterrand van het concordantiepaneel */
#concordanceResizeHandle {
    z-index: 5;
}

/* Concordantie item hover */
.concordance-item {
    border-radius: 0.5rem;
}

/* Uitklapchevron rotatie */
.concordance-chevron {
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

/* Vormen-paneel scheiding */
.concordance-forms-panel {
    border-top: 1px solid;
    border-color: rgb(226 232 240 / 0.8); /* slate-200/80 */
    margin-top: 0;
    padding-top: 0.5rem;
}

.dark .concordance-forms-panel {
    border-color: rgb(51 65 85 / 0.6); /* slate-700/60 */
}

/* Resultatenscrollen — smooth */
#concordanceResultsContainer {
    scroll-behavior: smooth;
}

/* Zoekveld: Griekse tekst ook mooi weergeven */
#concordanceSearch {
    font-family: 'Gentium Plus', 'Inter', ui-sans-serif, system-ui, sans-serif;
}


/* --- Extra utility-classes voor concordantie-paneel --- */
.w-\[420px\] { width: 420px; }
.max-w-full { max-width: 100%; }
.border-r { border-right-width: 1px; }
.min-h-\[16px\] { min-height: 16px; }
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.125rem; }
.py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.basis-auto { flex-basis: auto; }
.duration-150 { transition-duration: 150ms; }
.opacity-25 { opacity: 0.25; }
.opacity-75 { opacity: 0.75; }


/* --- Toggle-switch (donkere modus in instellingenpaneel) --- */
.w-11 { width: 2.75rem; }
.translate-x-1 { --tw-translate-x: 0.25rem; transform: translateX(var(--tw-translate-x)); }
.translate-x-6 { --tw-translate-x: 1.5rem; }
.dark .dark\:translate-x-6 { --tw-translate-x: 1.5rem; transform: translateX(var(--tw-translate-x)); }
#settingsThemeToggle { border: none; cursor: pointer; }
#settingsThemeToggleKnob { transition: transform 0.2s ease; }


/* --- Aanvullende utility-classes: resize-handle & toggle --- */
.w-1\.5 { width: 0.375rem; }
.active\:bg-blue-500\/50:active { background-color: rgb(59 130 246 / 0.5); }
.hover\:bg-blue-400\/40:hover { background-color: rgb(96 165 250 / 0.4); }


/* --- Aanvullende utility-classes: concordantie-beginscherm --- */
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.aspect-square { aspect-ratio: 1 / 1; }
.gap-1\.5 { gap: 0.375rem; }
.ml-auto { margin-left: auto; }

/* Beginscherm-tabs: horizontaal scrollbaar op smalle schermen zonder wrap */
#concordanceHomeTabs {
    overflow-x: auto;
    scrollbar-width: none;
}
#concordanceHomeTabs::-webkit-scrollbar { display: none; }


/* --- Aanvullende utility-classes: rijke contextweergave (stap 2.3) --- */
.max-w-\[4\.5rem\] { max-width: 4.5rem; }
.gap-x-2\.5 { column-gap: 0.625rem; }
.gap-y-2 { row-gap: 0.5rem; }
.decoration-dotted { text-decoration-style: dotted; }

/* Zachte intro-animatie voor de context-preview */
.concordance-context-preview {
    animation: concordanceContextFadeIn 0.15s ease-out both;
}
@keyframes concordanceContextFadeIn {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* --- Aanvullende utility-classes: statistieken-tab (stap 2.4) --- */
.h-28 { height: 7rem; }
.h-3\.5 { height: 0.875rem; }
.w-7 { width: 1.75rem; }
.w-16 { width: 4rem; }
.items-end { align-items: flex-end; }
.justify-end { justify-content: flex-end; }
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.375rem; }


/* --- w-[4.5rem] voor de boeknaam-kolom in het staafdiagram --- */
.w-\[4\.5rem\] { width: 4.5rem; }


/* --- Correctie: ontbrekende staafdiagram-kleuren (statistieken/boekverdeling) --- */
.bg-blue-300 { background-color: rgb(147 197 253); }
.bg-blue-400 { background-color: rgb(96 165 250); }
.dark .dark\:bg-blue-700 { background-color: rgb(29 78 216); }
.dark .dark\:bg-blue-800 { background-color: rgb(30 64 175); }
.dark .group:hover .dark\:group-hover\:bg-blue-500 { background-color: rgb(59 130 246); }
.dark .group:hover .dark\:group-hover\:bg-blue-700 { background-color: rgb(29 78 216); }


/* --- Correctie: ontbrekende utility-classes na herziening statistieken-tab --- */
.dark .dark\:hover\:border-blue-900:hover { border-color: rgb(30 58 138); }
.bg-slate-200\/70 { background-color: rgb(226 232 240 / 0.7); }
.bg-blue-50\/60 { background-color: rgb(239 246 255 / 0.6); }
.border-blue-100 { border-color: rgb(219 234 254); }
.pb-2\.5 { padding-bottom: 0.625rem; }
.h-24 { height: 6rem; }
.group:hover .group-hover\:bg-blue-500 { background-color: rgb(59 130 246); }
.whitespace-nowrap { white-space: nowrap; }
.cursor-default { cursor: default; }
.pt-1\.5 { padding-top: 0.375rem; }


/* --- dark:group-hover voor histogram-staven --- */
.dark .group:hover .dark\:group-hover\:bg-blue-600 { background-color: rgb(37 99 235); }


/* --- Laatste ontbrekende utility-classes (statistieken-tab) --- */
.overflow-hidden { overflow: hidden; }
.top-1\.5 { top: 0.375rem; }
.right-1\.5 { right: 0.375rem; }
.dark .dark\:bg-slate-900\/60 { background-color: rgb(15 23 42 / 0.6); }


/* --- Correctie: gemiste utility-classes uit eerdere stappen (2.2b/2.3) --- */
.mb-1\.5 { margin-bottom: 0.375rem; }
.mb-2\.5 { margin-bottom: 0.625rem; }
.mt-2\.5 { margin-top: 0.625rem; }
.p-0\.5 { padding: 0.125rem; }
.p-2\.5 { padding: 0.625rem; }
.dark .dark\:text-slate-600 { color: rgb(71 85 105); }
.hover\:text-blue-900:hover { color: rgb(30 58 138); }
.dark .dark\:hover\:text-blue-200:hover { color: rgb(191 219 254); }
.dark .dark\:hover\:bg-blue-900\/40:hover { background-color: rgb(30 58 138 / 0.4); }


/* --- Correctie: laatste gemiste utility-classes (volledige sweep) --- */
.border-transparent { border-color: transparent; }
.hover\:bg-slate-50:hover { background-color: rgb(248 250 252); }
.hover\:border-slate-200:hover { border-color: rgb(226 232 240); }
.dark .dark\:hover\:bg-slate-900\/50:hover { background-color: rgb(15 23 42 / 0.5); }
.dark .dark\:hover\:border-slate-700:hover { border-color: rgb(51 65 85); }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }


/* --- ml-2 voor de "Wis filter"-knop in de frequentie-tab --- */
.ml-2 { margin-left: 0.5rem; }

/* --- Opslaan-terugkoppeling (toast), vooral bedoeld voor mobiel waar een
   console-foutmelding onzichtbaar is --- */
.save-toast {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 300;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    /* #16a34a haalt met witte tekst 3,30:1 waar 4,5:1 nodig is (WCAG 1.4.3);
       #15803d haalt 5,01:1 bij hetzelfde groen. */
    background-color: #15803d;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    max-width: calc(100vw - 2rem);
}
.save-toast.save-toast-visible {
    opacity: 1;
    transform: translateY(0);
}
.save-toast.save-toast-error {
    background-color: #dc2626;
    pointer-events: auto;
}



/* --- Correctie: ontbrekende utility-classes (stap 2.5 filters) --- */
.bg-amber-500 { background-color: rgb(245 158 11); }

/* Amber — gebruikt voor de back-up-herinneringsbalk. Alleen amber-500 bestond
   al; de rest ontbrak, waardoor de balk (en met name de "Nu exporteren"-knop:
   witte tekst zonder achtergrondkleur) onleesbaar was. */
.bg-amber-50 { background-color: rgb(255 251 235); }
.bg-amber-100 { background-color: rgb(254 243 199); }
.bg-amber-600 { background-color: rgb(217 119 6); }
.hover\:bg-amber-200:hover { background-color: rgb(253 230 138); }
.hover\:bg-amber-700:hover { background-color: rgb(180 83 9); }
.border-amber-200 { border-color: rgb(253 230 138); }
.text-amber-400 { color: rgb(251 191 36); }
.text-amber-600 { color: rgb(217 119 6); }
.text-amber-800 { color: rgb(146 64 14); }
.text-amber-900 { color: rgb(120 53 15); }
.hover\:text-amber-600:hover { color: rgb(217 119 6); }
.dark .dark\:bg-amber-950\/20 { background-color: rgb(69 26 3 / 0.2); }
.dark .dark\:bg-amber-900\/40 { background-color: rgb(120 53 15 / 0.4); }
.dark .dark\:hover\:bg-amber-900\/70:hover { background-color: rgb(120 53 15 / 0.7); }
.dark .dark\:border-amber-900\/60 { border-color: rgb(120 53 15 / 0.6); }
.dark .dark\:text-amber-300 { color: rgb(252 211 77); }
.dark .dark\:text-amber-400 { color: rgb(251 191 36); }

/* Violet — gebruikt voor de woordnotitie-UI (woordanalyse, concordantie, Mijn
   notities). Deze ontbraken nog als losse utility-klassen. */
.text-violet-500 { color: rgb(139 92 246); }
.text-violet-600 { color: rgb(124 58 237); }
.text-violet-700 { color: rgb(109 40 217); }
.hover\:text-violet-700:hover { color: rgb(109 40 217); }
.border-violet-200 { border-color: rgb(221 214 254); }
.border-violet-200\/60 { border-color: rgb(221 214 254 / 0.6); }
.bg-violet-50\/40 { background-color: rgb(245 243 255 / 0.4); }
.bg-violet-50\/60 { background-color: rgb(245 243 255 / 0.6); }
.dark .dark\:text-violet-400 { color: rgb(167 139 250); }
.dark .dark\:hover\:text-violet-300:hover { color: rgb(196 181 253); }
.dark .dark\:border-violet-900\/40 { border-color: rgba(45,25,80,0.4); }
.dark .dark\:bg-violet-950\/10 { background-color: rgba(30,20,50,0.1); }
.dark .dark\:bg-violet-950\/20 { background-color: rgba(30,20,50,0.2); }

/* Deze twee formaatklassen (2.5 = 0.625rem) werden al op meerdere plekken
   gebruikt voor kleurstippen (bladwijzers, notities) maar bestonden nog niet,
   waardoor zo'n stip altijd onzichtbaar bleef (0×0). */
.w-2\.5 { width: 0.625rem; }
.h-2\.5 { height: 0.625rem; }

.h-1\.5 { height: 0.375rem; }
.inline-flex { display: inline-flex; }
.ml-1\.5 { margin-left: 0.375rem; }


/* ============================================================
   STAP 3.3: UI-TEKSTGROOTTE (concordantie + toetsenbord)
   ============================================================
   We gebruiken CSS `zoom` in plaats van font-size, omdat de
   concordantie tientallen losse text-xs/text-[Npx]-utilityklassen
   gebruikt die niet allemaal om te bouwen zijn naar een relatieve
   eenheid zonder een enorme herschrijving. `zoom` schaalt tekst,
   marges en paddings gezamenlijk, zonder de bestaande klassen aan
   te hoeven passen. De buitenste #concordancePanel (met zijn
   sleepbare breedte) blijft zelf ongeschaald — alleen de
   binnenste #concordanceZoomWrapper wordt geschaald, zodat het
   verslepen van de paneelbreedte er niet door verstoord raakt. */
#concordanceZoomWrapper {
    zoom: var(--ui-size-factor, 1);
}

#virtualKeyboard {
    zoom: var(--ui-size-factor, 1);
}


/* --- Correctie: ontbrekende utility-classes (stap 3.3 UI-tekstgrootte) --- */
.dark .dark\:hover\:bg-slate-700:hover { background-color: rgb(51 65 85); }
.min-h-0 { min-height: 0; }


/* --- Correctie: volledige HTML-sweep, laatste gemiste utility-classes --- */
.dark .dark\:bg-blue-600 { background-color: rgb(37 99 235); }
.dark .dark\:bg-slate-800\/50 { background-color: rgb(30 41 59 / 0.5); }
.h-7 { height: 1.75rem; }
.hover\:text-red-700:hover { color: rgb(185 28 28); }
.opacity-30 { opacity: 0.3; }
.opacity-70 { opacity: 0.7; }
.pb-4 { padding-bottom: 1rem; }
.pr-16 { padding-right: 4rem; }
.pt-3 { padding-top: 0.75rem; }
.transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.z-20 { z-index: 20; }


/* --- Correctie: max-height calc voor sticky woordanalyse-sidebar --- */
.max-h-\[calc\(100vh-120px\)\] { max-height: calc(100vh - 120px); }


/* --- Correctie: prullenbak-modal miste backdrop-verduistering + icoonkleur --- */
.bg-slate-900\/50 { background-color: rgb(15 23 42 / 0.5); }
.text-red-500 { color: rgb(239 68 68); }
.transform { transform: translateX(var(--tw-translate-x, 0)) translateY(var(--tw-translate-y, 0)); }


/* --- Correctie: ontbrekende utility-classes (stap 3.4 handleiding) --- */
.divide-y > :not([hidden]) ~ :not([hidden]) { border-top-width: 1px; }
.divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: rgb(241 245 249); }
.dark .dark\:divide-slate-800 > :not([hidden]) ~ :not([hidden]) { border-color: rgb(30 41 59); }
.h-4\.5 { height: 1.125rem; }
.w-4\.5 { width: 1.125rem; }
.mb-5 { margin-bottom: 1.25rem; }
.pl-5 { padding-left: 1.25rem; }
.py-3\.5 { padding-top: 0.875rem; padding-bottom: 0.875rem; }
.list-disc { list-style-type: disc; }


/* --- Correctie: ontbrekende kleur voor kopieer-bevestiging (stap 3.5) --- */
.text-green-600 { color: rgb(22 163 74); }


/* --- Correctie: ontbrekende utility-classes (kleurenfeature, JS-gegenereerd) --- */
.border-0 { border-width: 0; }
.hover\:scale-110:hover { transform: scale(1.1); }
.max-w-\[190px\] { max-width: 190px; }
.w-56 { width: 14rem; }
.z-\[200\] { z-index: 200; }


/* --- Correctie: ontbrekende hover-klassen (klikbaar grammatica-blok) --- */
.hover\:bg-blue-50\/40:hover { background-color: rgb(239 246 255 / 0.4); }
.dark .dark\:hover\:bg-blue-950\/20:hover { background-color: rgb(23 37 84 / 0.2); }


/* --- cursor-help voor het uitlegicoontje bij de hoofdstuknotitie-toggle ---
   Niet meer in gebruik sinds de uitleg-knopjes openklappers werden (BACKLOG 19d);
   blijft staan omdat deze set met de hand wordt onderhouden. */
.cursor-help { cursor: help; }

/* De zes uitleg-knopjes (?) naast een instelling in het instellingenpaneel. Ze
   klappen een alinea open in plaats van een tooltip te tonen, dus een wijzende hand
   en geen vraagteken-cursor. De maat van 24px staat hieronder bij #colorLegendBtn. */
.uitlegknop { cursor: pointer; }


/* ============================================================
   STICKY HEADER / NAVIGATIEBALK (instelbaar via schakelaars)
   ============================================================ */
#appHeader.js-header-sticky {
    position: sticky;
    top: 0;
    z-index: 20;
}
#navigationStrip.js-nav-sticky {
    position: sticky;
    z-index: 15;
}

/* Rond de vastgezette navigatiebalk zit 8px lucht: de pt-2 van de container
   erboven (tussen kopbalk en balk) en de mb-2 eronder. Door die lucht, en langs
   de afgeronde hoeken van de balk, schemerde gescrolde inhoud heen: op een
   telefoon (waar de pagina scrolt, want de woordanalyse staat onder de tekst)
   zag je de rand en de kop van de tekstkaart tussen kopbalk en balk, en naast
   de hoeken.

   Eerst stond hier een ::after-strook in de paginakleur, alleen voor de lucht
   eronder, en binnen de rand. Een schaduw zonder vervaging in de paginakleur
   dekt in één keer alle 8px rondom af, en volgt de afronding naar buiten, dus
   ook de hoeken. De eerste twee schaduwen zijn gewoon shadow-sm van de balk
   zelf, die anders verloren zou gaan (box-shadow overschrijft).

   LET OP: 0.5rem moet gelijk zijn aan die lucht (pt-2 op de container en mb-2
   op #navigationStrip in index.html). Is de schaduw breder, dan valt hij over
   de bovenrand van de tekstkaart en de woordanalyse heen; is hij smaller, dan
   schemert er weer iets door. */
#navigationStrip.js-nav-sticky {
    box-shadow:
        0 1px 3px 0 rgba(0,0,0,0.1),
        0 1px 2px -1px rgba(0,0,0,0.06),
        0 0 0 0.5rem #F7F7F5;
}
.dark #navigationStrip.js-nav-sticky {
    box-shadow:
        0 1px 3px 0 rgba(0,0,0,0.1),
        0 1px 2px -1px rgba(0,0,0,0.06),
        0 0 0 0.5rem #1C212E;
}

/* --- Tekstweergave-balk vastzetten: los, pagina-niveau sticky element,
   net als navigationStrip hierboven (top wordt via JS gezet). --- */
#textToolbarRow.js-toolbar-sticky {
    position: sticky;
    z-index: 12;
}

/* Genestelde stand (niet vastgezet): de balk zit binnen de kaart, die zelf
   een p-4 (1rem) padding heeft. Zonder correctie zou de scheidingslijn
   daardoor 1rem binnen de kaartrand blijven steken -- terwijl de balk in de
   vastgezette stand (hierboven) juist naadloos van links naar rechts over de
   volle kaartbreedte loopt. Deze regel laat de balk "doorbloeden" tot de
   werkelijke kaartrand, zodat de lijn er in beide standen identiek uitziet. */
#textToolbarRow.js-toolbar-bleed-x {
    margin-left: -1rem;
    margin-right: -1rem;
    width: calc(100% + 2rem);
}


/* --- min-w voor badges die nu tot 99+ moeten kunnen tonen --- */
.min-w-\[16px\] { min-width: 16px; }


/* --- Acties-kolom: bladwijzer- en notitie-icoon + eventuele thema-chip(s)
   samen in één grid-kolom, natuurlijk onder elkaar gestapeld. Dit vervangt de
   eerdere opzet met een aparte, volle-breedte chip-rij: de hoogte van die rij
   werd bepaald door de (soms 2- of 3-regelige) verstekst, waardoor een vaste
   correctie de chip nooit precies onder de iconen kreeg. Nu schuift de chip
   vanzelf net onder de iconen, hoe lang het vers ook is. */
.verse-actions-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}
.verse-actions-icons-row {
    display: flex;
    align-items: center;
    gap: 4px;
}
.theme-chips-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
    max-width: 9rem; /* voorkomt dat een lang themawoord de acties-kolom te
                         breed maakt; wrapt gewoon naar een tweede regel */
}
.theme-chip {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    padding: 3px 8px;
    border-radius: 999px;
    background: #EFF3FB;
    color: #3B5A8C;
    border: 1px solid #DCE4F2;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    white-space: nowrap;
}
.theme-chip:hover {
    background: #E0E9F9;
    border-color: #B9CBEA;
}
.dark .theme-chip {
    background: rgba(91,127,196,0.12);
    color: #9DB6E8;
    border: 1px solid rgba(91,127,196,0.25);
}
.dark .theme-chip:hover {
    background: rgba(91,127,196,0.22);
    border-color: rgba(91,127,196,0.4);
}

/* ---------------------------------------------------------------------------
   Zichtbare focus voor de hele app (WCAG 2.4.7)
   ---------------------------------------------------------------------------
   Twaalf elementen in index.html zetten focus:outline-none zonder er iets voor
   terug te geven — de boekkeuze liet met het toetsenbord aantoonbaar niets zien.
   Twee daarvan bedoelden het wél goed met focus:border-blue-400, maar die klasse
   bestaat niet in dit bestand (dezelfde familie als punt 4 in CLAUDE.md).

   Waarom :focus-visible en niet :focus — dan krijgt een muisklik geen ring, en
   dat is precies het gedrag dat je wilt.
   Waarom !important — .focus\:outline-none:focus zet dezelfde eigenschap uit en
   heeft dezelfde specificiteit; zonder !important zou de volgorde beslissen en
   dat is te broos om op te leunen.
   Waarom twee kleuren — #2C5FA8 haalt 6,34:1 op wit maar 2,49:1 op de donkere
   achtergrond; #7FA9E8 haalt daar 6,56:1. Beide ruim boven de 3:1 die 1.4.11 voor
   een focusaanduiding vraagt. */
:focus-visible {
    outline: 2px solid #2C5FA8 !important;
    outline-offset: 2px;
}
.dark :focus-visible {
    outline-color: #7FA9E8 !important;
}

/* ---------------------------------------------------------------------------
   Overslaan-link (WCAG 2.4.1)
   ---------------------------------------------------------------------------
   Buiten beeld tot hij focus krijgt. Geen display:none of visibility:hidden —
   dan slaat de browser hem over bij het tabben en doet hij dus niets. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    padding: .6rem 1rem;
    background: #FFFFFF;
    color: #1B2A4A;
    border: 1px solid #C7CAD1;
    border-radius: 0 0 .5rem 0;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
}
.skip-link:focus {
    left: 0;
}
.dark .skip-link {
    background: #1C212E;
    color: #E2E4E8;
    border-color: #383D47;
}
/* Het doel van de link heeft tabindex="-1" zodat de focus er echt heen gaat. De
   focusring om de tekstkolom blijft bewust staan: dat is juist de bevestiging dat
   je bent geland, en zonder die bevestiging weet je met een toetsenbord niet of de
   link iets deed. */

/* ---------------------------------------------------------------------------
   Klikdoelen van minstens 24 px (WCAG 2.5.8)
   ---------------------------------------------------------------------------
   Alleen op de knopjes die het écht nodig hebben. Van de 32 bedieningselementen
   die kleiner zijn dan 24 x 24 px vallen er 26 onder de ruimte-uitzondering van
   2.5.8 — die staan ver genoeg van hun buren. Deze vier niet: ze plakken tegen
   een zoekveld of tegen de knop ernaast. Het icoon blijft even klein; alleen het
   raakvlak groeit, dus het beeld verandert niet merkbaar. */
.klikdoel-24 {
    min-width: 24px;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* De "Aan"/"Uit"-tekst achter de tooltip-schakelaar staat op een lichtgrijs vlak,
   waar #059669 (text-emerald-600) 3,27:1 haalt. #047857 haalt daar 4,76:1. In de
   donkere modus hoort #34D399 te blijven — een id-selector wint het anders van
   dark:text-emerald-400, dus die staat hier expliciet naast. */
#hoverStatusText { color: #047857; }
.dark #hoverStatusText { color: #34D399; }

/* ---------------------------------------------------------------------------
   Knoppenrijen die op een smal scherm afbreken
   ---------------------------------------------------------------------------
   Twee rijen vouwden niet mee: de bediening in de kopbalk (501 px) en de
   knoppen in de tekstweergave-werkbalk (728 px). Op een telefoon van 375 px
   maakte dat het document 517 px breed — de rechterhelft van de kopbalk en de
   halve werkbalk vielen buiten beeld, en je moest de hele pagina opzij schuiven
   om bij de markeerknop of de tekstgrootte te komen. Dat is bevinding T13
   (WCAG 1.4.10, reflow) en het was in de praktijk het grootste ongemak op een
   telefoon.

   Waarom gewone CSS en geen utility-klasse: de gegenereerde set in dit bestand
   kent geen flex-wrap-varianten per breekpunt (punt 4 in CLAUDE.md).
   Waarom 767 px: hetzelfde breekpunt dat de rest van de app al gebruikt, zodat
   er niet nóg een grens bij komt.
   Op breedere schermen verandert er niets — daar paste alles al. */
@media (max-width: 767px) {
    .vouwrij {
        flex-wrap: wrap;
        row-gap: 0.5rem;
        justify-content: flex-start;
        /* min-width: 0 is hier het werkende deel. Een flex-item wil standaard
           niet smaller worden dan zijn inhoud (min-width: auto), dus alleen
           flex-wrap erop zetten hielp niets: de rij bleef 501 px in een vak van
           375 px. Pas met min-width: 0 mag hij krimpen, en dán vouwt hij. */
        min-width: 0;
        max-width: 100%;
    }
    /* De rij waarin deze knoppen hangen moet zelf ook mogen afbreken, anders
       schuift hij de knoppenrij als geheel naar rechts het beeld uit. */
    #appHeader .max-w-7xl > .flex {
        flex-wrap: wrap;
        row-gap: 0.75rem;
    }
    /* De scheidingsstreepjes tussen de groepen kloppen niet meer zodra een groep
       op een nieuwe regel begint; ze zijn decoratie, dus ze gaan weg. */
    .vouwrij > .border-r,
    .vouwrij > .border-l {
        border-right: 0;
        border-left: 0;
        padding-right: 0.5rem;
    }
}

/* ---------------------------------------------------------------------------
   Klassen die de markup gebruikt maar deze stylesheet niet kende
   ---------------------------------------------------------------------------
   Opgeschreven 10 september 2026, na een volledige telling: van de 683 klassen
   in index.html en app.js stonden er 47 niet in dit bestand. Ze zijn hier met
   de hand aangevuld — de weg die punt 4 van CLAUDE.md al voorstelde ("ze per
   geval als gewone CSS opschrijven, zoals de rest van dit bestand doet"), en
   niet de utility-set opnieuw genereren, want dan gaat elke met de hand
   toegevoegde regel in dit bestand eraan.

   De waarden komen uit dit bestand zelf waar er een verwante tint bestond
   (slate en blue zijn hier warmer getoond dan de standaard), en uit de
   standaardtinten waar dit bestand die al gebruikt (emerald en red — zie
   .bg-emerald-50 en .text-red-700 hierboven).

   Vier klassen die ook ontbraken zijn bewust NIET aangevuld: z-[210], z-[211],
   z-[230] en z-[231]. Die vensters krijgen hun stapelvolgorde al van expliciete
   id-regels verderop in dit bestand; een tweede bron daarvoor is vragen om
   verwarring. */

/* Het meest zichtbare geval: de knoppen "Herstellen" en "Definitief wissen" in
   de prullenbak stonden zonder achtergrond, in beide modi. */
.bg-emerald-100 { background-color: #d1fae5; }
.bg-red-100 { background-color: #fee2e2; }
.text-emerald-700 { color: #047857; }
.hover\:bg-emerald-200:hover { background-color: #a7f3d0; }
.hover\:bg-red-200:hover { background-color: #fecaca; }
.dark .dark\:bg-emerald-900\/40 { background-color: rgba(6,78,59,0.4); }
.dark .dark\:bg-red-900\/40 { background-color: rgba(127,29,29,0.4); }
.dark .dark\:hover\:bg-red-900\/70:hover { background-color: rgba(127,29,29,0.7); }
.dark .dark\:hover\:bg-blue-950\/40:hover { background-color: rgba(8,12,21,0.4); }
.dark .dark\:hover\:bg-slate-600:hover { background-color: #4A515C; }

/* Overige kleuren */
.hover\:bg-slate-300:hover { background-color: #C7CAD1; }
.hover\:text-blue-500:hover { color: #4A6190; }
.hover\:text-blue-200:hover { color: #A9BCDB; }
.focus\:border-blue-400:focus { border-color: #6B80A8; }
.placeholder\:text-slate-400::placeholder { color: #667085; }
.dark .placeholder\:text-slate-400::placeholder { color: #9098AC; }

/* Uitlijning, hoogtes en tussenruimte — dezelfde maatschaal als de rest van dit
   bestand (0,25rem per stap). */
.align-middle { vertical-align: middle; }
.align-text-bottom { vertical-align: text-bottom; }
.leading-none { line-height: 1; }
.leading-snug { line-height: 1.375; }
.list-decimal { list-style-type: decimal; }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.overflow-x-auto { overflow-x: auto; }
.top-full { top: 100%; }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(15,23,42,0.1), 0 4px 6px -4px rgba(15,23,42,0.1); }
.text-\[10\.5px\] { font-size: 10.5px; }
.first\:pt-0:first-child { padding-top: 0; }

.max-h-28 { max-height: 7rem; }
.max-h-40 { max-height: 10rem; }
.max-h-80 { max-height: 20rem; }
.max-w-xl { max-width: 36rem; }
.min-h-\[2\.25rem\] { min-height: 2.25rem; }

.ml-0\.5 { margin-left: 0.125rem; }
.ml-3 { margin-left: 0.75rem; }
.mx-0\.5 { margin-left: 0.125rem; margin-right: 0.125rem; }
.mx-4 { margin-left: 1rem; margin-right: 1rem; }

.pb-1 { padding-bottom: 0.25rem; }
.pl-2 { padding-left: 0.5rem; }
.pl-2\.5 { padding-left: 0.625rem; }
.pr-1\.5 { padding-right: 0.375rem; }
.pr-4 { padding-right: 1rem; }
.pr-8 { padding-right: 2rem; }
.pr-9 { padding-right: 2.25rem; }
.pt-5 { padding-top: 1.25rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }

/* ---------------------------------------------------------------------------
   T12 — de rand van een invoerveld (WCAG 1.4.11)
   ---------------------------------------------------------------------------
   1.4.11 vraagt 3:1 voor de zichtbare begrenzing van een bedieningselement. De
   randen in deze app komen uit twee klassen: border-slate-200 (#E2E4E8) en
   border-slate-300 (#C7CAD1). Gemeten op het hoofdzoekveld haalde die laatste
   1,64:1 op wit — en het veld heeft geen eigen vlakkleur, dus die rand is de
   enige aanwijzing dát je er kunt typen.

   Waarom alleen invoervelden en niet die twee klassen zelf: ze staan samen 120
   keer in de app, en verreweg de meeste keren om een kaart of een paneel. Dat is
   decoratie, en daar gaat 1.4.11 niet over. Alleen waar de rand een
   bedieningselement begrenst, moet hij zichtbaar zijn — vandaar dat deze regels
   op input/select/textarea staan en niet op de klasse.

   #7C8391 haalt 3,81:1 op wit en 3,31:1 op het lichtste paneelgrijs (#EFEFEC),
   dus overal boven de eis. In de donkere modus is #383D47 juist te donker
   (1,45:1 op #1C212E); #667085 haalt daar 3,24:1. */
input.border-slate-200, input.border-slate-300,
select.border-slate-200, select.border-slate-300,
textarea.border-slate-200, textarea.border-slate-300 {
    border-color: #7C8391;
}
.dark input.border-slate-200, .dark input.border-slate-300,
.dark select.border-slate-200, .dark select.border-slate-300,
.dark textarea.border-slate-200, .dark textarea.border-slate-300 {
    border-color: #667085;
}

/* ---------------------------------------------------------------------------
   T18 — minder beweging voor wie daarom vraagt
   ---------------------------------------------------------------------------
   Geen AA-eis (2.3.3 is AAA), maar dit bestand heeft 29 overgangen en animaties
   en de panelen schuiven flink. Wie in zijn systeem heeft ingesteld minder
   beweging te willen, krijgt hier hetzelfde beeld zonder de beweging ernaartoe.
   Bewust niet op 0s maar op 0,01s: sommige code wacht op transitionend, en die
   gebeurtenis komt bij 0s niet. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =====================================================================
   T14 — klikdoelen van 24 px (WCAG 2.5.8), gebouwd 9 september 2026
   =====================================================================
   Drieënvijftig bedieningselementen waren kleiner dan 24 px. Vijftig daarvan
   waren de bladwijzer- en notitieknopjes naast een vers: 16 x 16, twintig pixels
   hart-op-hart. Twee keer per vers, dus in een hoofdstuk van vijftig verzen
   honderd keer.

   Dit stond bewust op de wachtlijst omdat "groter maken" het beeld van elke regel
   zou veranderen. Dat hoeft niet: het ícoontje blijft 16 px, alleen het
   aanraakvlak eromheen groeit naar 24. Wat je ziet blijft hetzelfde, wat je raakt
   wordt groter — precies wat 2.5.8 vraagt.

   Geen nieuwe utility-klassen (CLAUDE.md punt 4): gewone CSS op de bestaande
   klassen, met de reden erbij. */

.verse-bookmark-btn,
.verse-note-btn {
    /* De knop wordt een vierkant van 24; de SVG erin houdt zijn w-4 h-4 (16 px). */
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Zonder dit rekt de SVG mee in een flex-context. */
    flex-shrink: 0;
}

.verse-bookmark-btn > svg,
.verse-note-btn > svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* De rij eromheen stond op gap: 4px met knoppen van 16, dus 20 px hart-op-hart.
   Met knoppen van 24 wordt dat 28 en zijn de vlakken bovendien aaneengesloten. */
.verse-actions-icons-row {
    align-items: center;
}

/* Het percentageveld en de Reset-knop in de tekstgrootte-balk waren 32 x 17 en
   28 x 15. Alleen de hoogte hoefde erbij; de breedte was al genoeg. */
#fontSizeInput,
#resetFontSize {
    min-height: 24px;
}

#resetFontSize {
    /* min-height op een inline-element doet niets. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Dezelfde 24 px-eis in de panelen. Met de panelen open bleken er nog 35 doelen
   onder de maat te zitten — de bevinding T14 was op het hoofdscherm geteld.

   Ook hier: het icoontje houdt zijn maat, alleen het vlak eromheen groeit. Daarom
   min-width/min-height en geen grotere svg. */

/* De uitleg-knopjes (?) naast een instelling, en de kleurlegenda. */
.cursor-help,
.uitlegknop,
#colorLegendBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
}

/* Het percentageveld en de reset in de interface-tekstgrootte, tegenhangers van
   #fontSizeInput en #resetFontSize hierboven. */
#uiFontSizeInput,
#uiFontReset {
    min-height: 24px;
}

#uiFontReset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* De kleurkiezer en de wisknop per rij in het kleurenpalet: 28 x 28 en 14 x 14.
   Het kleurvlakje zelf blijft 28, de wisknop krijgt een vlak van 24. */
#colorPaletteList button,
#tagsManageList button {
    min-width: 24px;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* De laatste groep uit dezelfde telling. Alle drie zijn het bedieningselementen met
   zichtbare tekst die op 16 of 21 px hoog stonden; alleen de hoogte hoefde erbij. */
#colorPaletteList input[type="text"],
#addColorBtn,
#resetColorPaletteBtn,
#openTagsManagePanelBtn,
#themeHomeList button {
    min-height: 24px;
}

#addColorBtn,
#resetColorPaletteBtn,
#openTagsManagePanelBtn,
#themeHomeList button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Bewust NIET aangeraakt: de acht selectievakjes in het exportvenster
   (exportBookmarks en de rest). Die zijn 16 x 16 omdat de browser ze zo tekent en
   de app er niets aan verandert — dat is de uitzondering "user agent control" in
   WCAG 2.5.8. Ze hebben bovendien een gekoppeld <label>, dus het aanklikbare vlak
   is in de praktijk de hele regel. Ze groter maken zou ze juist laten afwijken van
   elk ander selectievakje dat de lezer kent. */

/* De zweefstanden van de twee beginscherm-links in de kopbalk (9 september 2026).
   Ik had ze als utility-klassen geschreven — hover:bg-blue-200,
   dark:hover:bg-blue-900/70 en dark:hover:text-blue-300 — en geen van drieën
   bestond in dit bestand, dus de zweefstand deed niets. Precies de val uit
   CLAUDE.md punt 4: de utility-set loopt achter op de markup.

   Daarom hier gewone CSS op de id's, met dezelfde tinten die de rest van het
   bestand gebruikt. */

#beginIcoonLink:hover {
    background-color: #C7D2E3;   /* bg-blue-200 */
}

.dark #beginIcoonLink:hover {
    background-color: rgba(13, 20, 36, 0.7);   /* blue-900/70 */
}

#beginTitelLink:hover {
    color: #16223C;   /* text-blue-700 */
}

.dark #beginTitelLink:hover {
    color: #8FA0BF;   /* dark:text-blue-300 — 6,96:1 op de donkere kopbalk.
                         text-blue-400 (#6B80A8) haalde daar maar 4,04:1. */
}

/* =====================================================================
   Twee klassen die de markup gebruikt en dit bestand niet kende (19e)
   =====================================================================
   Zelfde soort gat als de 47 uit punt 1 van de backlog. Ze staan hier en niet
   als gewone CSS bij een id, omdat het om acht respectievelijk vier plekken
   gaat -- die allemaal omschrijven zou de klassen alleen maar verder uit de
   pas laten lopen met de markup.

   Let op bij het naslaan: .dark\:bg-slate-800 leek aanwezig omdat
   .dark\:bg-slate-800\/60 bestaat. Een controle op klassenamen moet dus op
   het einde van de naam letten, anders meldt hij ten onrechte "aanwezig". */

.dark .dark\:bg-slate-800 {
    /* Waarde afgeleid van de wel bestaande /60-variant: rgba(39,43,51,0.6). */
    background-color: #272B33;
}

.border-blue-500 {
    /* Markeert onder meer welk kleurvakje in de kleurenkiezer gekozen is
       (app.js). Zonder deze regel was dat alleen te zien aan scale-110 -- een
       verschil in grootte en verder niets, en dus onzichtbaar voor wie het
       verschil niet ziet.

       #6B80A8 haalt 3,98:1 op wit en 4,04:1 op de donkere kaart; een rand heeft
       3:1 nodig (WCAG 1.4.11). Geen enkele blauwtint uit dit bestand haalt dat in
       beide modi behalve deze -- #4A6190 zakt in het donker naar 2,61. */
    border-color: #6B80A8;
}

/* =====================================================================
   Sleephandvatten van de negen versleepbare panelen — 13 september 2026
   =====================================================================
   Gemeld: op een iPad is de 6px-brede strook (w-1.5) moeilijk raak te tikken;
   op Android lukt het meestal wel, maar niet altijd in één keer.

   Nagemeten hoever de dichtstbijzijnde knop in elk paneel van de rand af staat
   (bladwijzers, notities, instellingen, Bijbelstudies, concordantie, thema's):
   overal minstens 17px. Het handvat kon dus veilig naar 16px (w-4) zonder ooit
   een knop te overlappen — geverifieerd, niet aangenomen. Verder omhoog kon
   niet zonder dat risico: op vijf van de zes panelen begint daar de eerste rij
   met knoppen of filterchips.

   touch-action: none is de reden voor het tweede deel van de melding. Zonder
   deze regel mag de browser een sleepbeweging op dit element ook als scrollen
   opvatten; besluit hij daartoe halverwege, dan breekt hij de aanraaksessie af
   en komt er geen touchend meer — precies "lukt niet altijd in één keer". */
.sleephandvat {
    touch-action: none;
}

/* De zichtbare greep in het midden van elk handvat, nu ook op de zes panelen
   die er tot vandaag geen hadden (alleen kleur bij :hover, en hover bestaat
   niet op een aanraakscherm — dus was er voor een vinger niets te zien). Eén
   centrerende regel, links of rechts geankerd maakt voor het middelpunt niets
   uit. */
.sleephandvat-greep {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 3rem;
    /* #C7CAD1 (bg-slate-300, de oorspronkelijke kleur van de twee bestaande
       grepen) haalde maar 1,64:1 op wit en 2,24:1 in de donkere modus -- ver
       onder de 3:1 die WCAG 1.4.11 vraagt voor een bedieningselement dat je
       moet kunnen zien. Gevonden tijdens dit werk, niet de aanleiding ervoor;
       meteen meegenomen. #667085 haalt 4,97:1 op wit; #9098AC haalt 6,20:1 op
       de donkere paneelachtergrond (#14171F) -- allebei al elders in de app in
       gebruik voor gedempte tekst, dus geen nieuwe kleur erbij. */
    background-color: #667085;
}

.dark .sleephandvat-greep {
    background-color: #9098AC;
}

/* =====================================================================
   Tagrij in de notitie- en studiepanelen — 13 september 2026
   =====================================================================
   Gemeld: met een gevulde taglijst zie je je notities en studies niet meer,
   en je kunt er ook niet naartoe scrollen.

   Nagemeten met de echte basislijst (tags_basis.json, 42 tags) bij de
   standaardbreedte van 320px:

       kop 65 + zoekveld 46 + typefilter 40 + kleurfilter 40 + tagrij 446
       = 637px vaste ruimte, vóór er ook maar één notitie getoond wordt.

   Op een venster van 800px bleef er 163px over; daaronder niets. Het paneel
   zelf staat op overflow: visible, dus er viel ook niets terug te scrollen.

   De eigenlijke oplossing zit in app.js (renderTagFilterRow klapt de rij in).
   Dit hier is het vangnet: ook uitgeklapt, en ook als er ooit een vierde
   filterrij bij komt, mag de lijst nooit meer tot nul geknepen worden. */

#notesTagFilter,
#studiesTagFilter {
    /* shrink-0 staat in de markup; hier bewust teruggedraaid. Juist dát die rij
       niet mocht krimpen was de oorzaak: flexbox kon alleen de lijst wegdrukken. */
    flex-shrink: 1;
    /* Zonder min-height: 0 weigert een flex-item kleiner te worden dan zijn
       inhoud, en dan doet flex-shrink alsnog niets. Zelfde valkuil als bij
       .vouwrij hierboven. */
    min-height: 0;
    /* 30vh schaalt mee met het scherm: 240px op een bureaublad van 800px, 108px
       op een liggende telefoon van 360px. Een vast aantal pixels zou op het ene
       scherm te krap en op het andere te ruim zijn. */
    max-height: 30vh;
    overflow-y: auto;
    /* Voorkomt dat je bij het doorscrollen van de tags per ongeluk de pagina
       eronder meeneemt — dat is op een aanraakscherm het bezwaar tegen een
       scrollgebied binnen een scrollgebied. */
    overscroll-behavior: contain;
}

#notesListContent,
#studiesListContent {
    /* De garantie: wat er boven ook gebeurt, hier past altijd minstens één
       notitie of studie. Flexbox krimpt nu eerst de tagrij hierboven. */
    min-height: 6rem;
}

/* De filterchips waren 23px hoog — één pixel onder de 24 van WCAG 2.5.8. Ze
   voldeden formeel wél, via de afstandsuitzondering (nagemeten: 29px hart-op-hart
   in de tagrij, 45px in de typerij), dus dit is geen reparatie maar een kleine
   verbetering voor de vinger. De ronde kleurvakjes blijven 20x20: die halen hun
   26px afstand ruim, en ze groter maken zou de rij anders laten ogen.

   Waarom dit niet eerder opviel: de telling bij punt 19 (T14) draaide op een lege
   installatie, en dan zijn deze drie rijen leeg. Zelfde soort blinde vlek als
   "geteld met de panelen dicht" — zie 19f. */
#notesTypeFilter > button,
#notesTagFilter > button,
#studiesTagFilter > button {
    min-height: 24px;
}

/* --- Acht utility-klassen die de markup gebruikte en deze set niet kende ---
   Gevonden op 15 september 2026 door tools/controle.py, het script uit BACKLOG 7.
   De twee eerdere handtellingen zaten ernaast (19f): de laatste zocht de klassenaam
   als déél van de stylesheet en vond `.px-1` binnen `.px-1\.5`, `.pb-2` binnen
   `.pb-2\.5` en `.rounded-t` binnen `.rounded-t-xl`. Precies die drie stonden er dus
   niet, terwijl ze als aanwezig werden gemeld.

   Wat er in de browser werkelijk misging, nagemeten vóór deze toevoeging:
     .px-1  de vier telbadges in de kopbalk (bookmarksBadge e.a.) hadden 0 in plaats
            van 4px zijruimte, waardoor het cijfer tegen de rand van het bolletje stond
     .pb-2  drie filterrijen misten hun 8px onderruimte
     .pr-1  importPerItemList had geen ruimte tussen de tekst en de schuifbalk
     .placeholder:font-normal  de tijdelijke tekst in het studietitelveld werd vet
            meegetekend met het veld zelf

   .p-0 stond er ook niet, maar geeft hetzelfde als de standaardwaarde; meegenomen
   omdat de markup hem noemt en een volgende telling er anders over blijft vallen. */
.inline { display: inline; }
.p-0 { padding: 0; }
.pb-2 { padding-bottom: 0.5rem; }
.pl-1 { padding-left: 0.25rem; }
.pr-1 { padding-right: 0.25rem; }
.px-1 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}
.rounded-t {
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
}
.placeholder\:font-normal::placeholder { font-weight: 400; }


/* =====================================================================
   DE UITGAVE VAN 1894 ALS SCAN (ontwerp/scan-1894.md)
   =====================================================================
   Het boekje links van "HOOFDSTUK X" is het spiegelbeeld van het potloodje
   rechts ervan: 24 px, dezelfde gedempte kleur, voller bij aanwijzen. Daardoor
   staat de regel weer in het midden, en kost hij geen hoogte -- de knop staat
   op een regel die er al was. Gewone CSS en geen utility-klassen (CLAUDE.md 4). */
.scan-knop {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 6px;
    color: #667085;
    /* 0,8 en niet de 0,55 van het potloodje: een knop moet in rust 3:1 halen
       tegen zijn ondergrond (WCAG 1.4.11). Uitgerekend: 0,55 gaf 2,17:1 (licht) en
       1,75:1 (donker); dit geeft 3,34:1 en, met de lichtere grijs hieronder,
       4,16:1. Het potloodje is meteen meegenomen, zie .chapter-note-btn. */
    opacity: 0.8;
    transition: opacity 0.15s, color 0.15s;
}
.scan-knop svg { width: 14px; height: 14px; }
.scan-knop:hover,
.scan-knop[aria-expanded="true"] { opacity: 1; color: #1B2A4A; }
.dark .scan-knop { color: #8A93A6; }
.dark .scan-knop:hover,
.dark .scan-knop[aria-expanded="true"] { color: #5B7FC4; }

/* Het uitgeklapte vak staat in de gewone volgorde onder de kop, niet zwevend:
   dan bedekt het nooit de tekst en hoeft het niet te passen tussen de randen van
   een smal scherm. Het duwt de tekst alleen omlaag zolang het open is.

   In de HTML staat het vak direct ná het boekje en vóór "HOOFDSTUK X" en het
   potloodje, zodat Tab vanaf het boekje meteen de links in gaat. Eerst stond het
   achter de hele regel; Tab ging toen van het boekje naar het potloodje en pas
   daarna het vak in (nagemeten 23 september). Met flex-wrap en order komt het
   vak op het scherm tóch onder de regel te staan. */
.scan-rij { flex-wrap: wrap; }
/* Het vak zelf is een onzichtbare volle regel; de kaart staat erin. Een
   max-width op het flex-item zelf remt de flex-basis van 100% af, en dan paste
   het vak op een brede kolom náást "HOOFDSTUK X" in plaats van eronder
   (gezien in de browser, 23 september). */
.scan-uitgave {
    order: 1;
    flex-basis: 100%;
}
.scan-uitgave-kaart {
    max-width: 24rem;
    margin: 0.1rem auto 0;
    padding: 0.75rem 0.9rem;
    text-align: left;
    background: #F7F7F5;
    border: 1px solid #E2E4E8;
    border-radius: 0.6rem;
    font-size: 0.8rem;
    line-height: 1.45;
}
.scan-uitgave.hidden { display: none; }
.scan-uitgave-titel { font-weight: 600; color: #1C212E; margin: 0; }
.scan-uitgave-uitleg { color: #4A515C; margin: 0.15rem 0 0.5rem; }
.scan-uitgave-uitleg:only-child { margin: 0; }
.scan-uitgave-lijst { list-style: none; margin: 0; padding: 0; }
/* Elke regel is in zijn geheel de link: een groter klikdoel dan alleen de naam,
   en een schermlezer leest naam, bladzijden en grootte in één keer voor. */
.scan-uitgave-link {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0 0.75rem;
    min-height: 32px;
    align-items: center;
    padding: 0.25rem 0.4rem;
    margin: 0 -0.4rem;
    border-radius: 0.4rem;
    color: #1B2A4A;
    text-decoration: none;
}
.scan-uitgave-link:hover { background: #ECEEF2; }
.scan-uitgave-link:hover .scan-uitgave-naam { text-decoration: underline; }
.scan-uitgave-naam { font-weight: 600; }
.scan-uitgave-detail { color: #4A515C; }
.dark .scan-uitgave-kaart { background: #1C212E; border-color: #383D47; }
.dark .scan-uitgave-titel { color: #F7F7F5; }
.dark .scan-uitgave-uitleg,
.dark .scan-uitgave-detail { color: #9098AC; }
.dark .scan-uitgave-link { color: #9DB6E8; }
.dark .scan-uitgave-link:hover { background: #272B33; }
/* Alleen voor een schermlezer: dat de link een pdf is en een nieuw tabblad opent.
   Wie kijkt, ziet "pdf" al in de regel staan. */
.scan-onzichtbaar {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =====================================================================
   Woordanalyse: breder te slepen, over de tekst heen
   ---------------------------------------------------------------------
   De kolom rechts blijft 360px; alleen de kaart erin wordt breder en
   steekt dan naar links over de tekst uit. Zo springt de Griekse tekst
   niet bij elke sleepbeweging opnieuw om, en is de huidige breedte meteen
   de ondergrens. De breedte zelf zet app.js (initAnalysisResize) als
   inline width op de kaart.

   Het handvat stond op "hidden lg:flex", maar .hidden is !important en
   won dus ook boven 1024px: het handvat is nooit zichtbaar geweest. Daarom
   hier een eigen regel op het id.
   ===================================================================== */
#analysisResizeHandle {
    display: none;
}
@media (min-width: 1024px) {
    /* Het handvat was zo hoog als het hele hoofdstuk, met de greep ergens
       halverwege de tekst, ver buiten beeld. Nu staat het precies naast de
       kaart en schuift het net zo mee: app.js neemt top en hoogte van de
       kaart over, en schuift het met een transform naar de linkerrand van de
       kaart, hoe breed die ook is. Anders lag er onder een verbrede kaart een
       onzichtbare sleepstrook over de tekst, die daar de klikken opving. */
    #analysisResizeHandle {
        display: flex;
        position: sticky;
        align-self: flex-start;
        z-index: 14;          /* net boven de kaart */
        /* 16px om vast te pakken, maar maar 8px ruimte tussen tekst en kaart:
           voorheen stonden de kaarten tegen elkaar (het handvat was onzichtbaar),
           een volle 16px oogde te los. */
        margin-left: -4px;
        margin-right: -4px;
    }
    #analysisPaneColumn {
        /* De kaart mag naar links over de rand van de kolom uitsteken:
           flex-end legt hem tegen de rechterrand, en wat breder is dan de
           kolom komt dan links uit. */
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }
    #analysisStickyCard {
        position: sticky;
        /* Boven de tekst én boven de vastgezette tekstweergave-balk (12):
           wie de kaart breed trekt, wil hem helemaal zien. Wel onder de
           navigatiestrip (15) en de kopbalk (20), want die horen bovenaan
           te blijven staan. */
        z-index: 13;
        width: 100%;
        min-width: 100%;
        flex-shrink: 0;
    }
    /* Een schaduw alleen als hij echt over de tekst ligt, anders valt de
       kaart in zijn gewone stand ineens op. */
    #analysisStickyCard.analyse-over-tekst {
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.16);
    }
}
/* Onder 1024px staan de kolommen onder elkaar en is de kaart gewoon
   schermbreed; een opgeslagen breedte van een groot scherm mag daar niets
   aan veranderen. */
@media (max-width: 1023.98px) {
    #analysisStickyCard {
        width: auto !important;
    }
}

/* =====================================================================
   Knoppen van de Tekstweergave-balk: afbreken op elke breedte
   ---------------------------------------------------------------------
   Deze rij hing aan .vouwrij, en die breekt pas af onder 768px ("op
   bredere schermen paste alles al"). Maar naast de woordanalyse is de
   tekstkolom smaller dan het scherm: rond 790px bij een venster van
   1280, en dan staken de knoppen uit, met een schuifbalk eronder.

   En space-x-2.5 zette een linkermarge op elke knop behalve de eerste,
   ook op de eerste knop van een nieuwe regel: daardoor sprongen de
   tweede en derde regel op de telefoon in. gap zet alleen ruimte
   tússen knoppen op dezelfde regel.

   min-width: 0 is nodig om te mogen krimpen; zie .vouwrij hierboven.
   ===================================================================== */
#tekstweergaveKnoppen {
    flex-wrap: wrap;
    column-gap: 0.625rem;
    row-gap: 0.5rem;
    min-width: 0;
    max-width: 100%;
}

/* =====================================================================
   Conceptbalk (17 oktober 2026)
   ---------------------------------------------------------------------
   Boven de kopbalk, op elke bladzijde, niet weg te klikken: de site is
   live, maar tekst en vertaling zijn nog niet af. Amber in plaats van
   rood: het is een mededeling, geen fout. Contrast gemeten: licht
   #713F12 op #FEF3C7 = 7,8:1, donker #FDE68A op #3A2A08 = 11:1.
   Dezelfde kleuren staan in tools/bladzijden_bouwen.py (STIJL) voor de
   hoofdstukbladzijden.
   ===================================================================== */
.concept-balk {
    background: #FEF3C7;
    color: #713F12;
    border-bottom: 1px solid #F2D27A;
    padding: .5rem 1rem;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: .875rem;
    line-height: 1.45;
    text-align: center;
}
.concept-balk strong {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.dark .concept-balk {
    background: #3A2A08;
    color: #FDE68A;
    border-bottom-color: #5C4410;
}