/* ==========================================================================
   Prototype accent blue replaces Bootstrap's default primary (#0d6efd).
   Overriding the root vars restyles every var(--bs-primary*) usage below;
   .btn-primary and links bake in compiled values, so they get their own
   overrides. Hover/active shades follow Bootstrap's shade-color() (15%/20%).
   ========================================================================== */
:root {
    --bs-primary: #2a64a8;
    --bs-primary-rgb: 42, 100, 168;
    --bs-primary-bg-subtle: #e8f0f8;
    --bs-primary-border-subtle: #c2d6ea;
    --bs-link-color: #2a64a8;
    --bs-link-color-rgb: 42, 100, 168;
    --bs-link-hover-color: #225086;
    --bs-link-hover-color-rgb: 34, 80, 134;

    /* Answer palette: --nee for text/icons, --nee-soft for the tint behind them. */
    --nee: #a8492f;
    --nee-soft: #f6e7e2;
}
.btn-primary {
    --bs-btn-bg: #2a64a8;
    --bs-btn-border-color: #2a64a8;
    --bs-btn-hover-bg: #24558f;
    --bs-btn-hover-border-color: #225086;
    --bs-btn-active-bg: #225086;
    --bs-btn-active-border-color: #204b7e;
    --bs-btn-disabled-bg: #2a64a8;
    --bs-btn-disabled-border-color: #2a64a8;
    --bs-btn-focus-shadow-rgb: 74, 123, 181;
}
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: #95b2d4;
    box-shadow: 0 0 0 .25rem rgba(42, 100, 168, .25);
}
.form-check-input:checked { background-color: #2a64a8; border-color: #2a64a8; }

.assessment-answers .question-row.text-body-tertiary label { color: inherit; }
/* Skipped questions grey out entirely, controls included (prototype vl-qrow.dim). */
.assessment-answers .question-row.text-body-tertiary { background: #f6f9fc; }
.question-row.text-body-tertiary .answer-toggle-btn { background: #f6f9fc; color: #9ca3af; }
.question-row.text-body-tertiary .btn-check:checked + .answer-toggle-btn {
    background: #dbe3ec;
    border-color: #d1d5db;
    color: #6b7280;
}
.question-row.text-body-tertiary .evidence-btn { background: #f6f9fc; opacity: .6; }
.question-row.text-body-tertiary .answer-clear { opacity: .6; }

/* ==========================================================================
   Projectteam wireframe (templates/assessment/team.html.twig)
   Greyscale, neutral chrome — colours are placeholders, tuned later.
   ========================================================================== */
.app {
    --app-border: #e5e7eb;
    --app-bg: #e6ebf1; /* matches the prototype page background */
    --app-muted: #6b7280;
    --app-card-bg: #f9fafb;
    --app-active: #f1f3f5;
    --ok: #2f6f3b;
    --nee: #a8492f;
    min-height: 100vh;
    background: var(--app-bg);
    color: #1f2937;
}

/* Top bar */
.app-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--app-border, #e5e7eb);
    background: #fff;
}
.app-brand { font-weight: 600; font-size: 1.1rem; }
.app-avatar {
    display: inline-block;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: #e9ecef;
}

/* Sub bar */
.app-subbar {
    padding: .75rem 1.5rem;
    border-bottom: 1px solid var(--app-border);
}
.app-scheme {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 0;
    background: transparent;
    font-size: 1.4rem;
    font-weight: 600;
    color: inherit;
}

/* Content + right rail layout */
.app-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
    gap: 2rem;
    padding: 2rem 1.5rem;
}
.app-layout--1col { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 992px) {
    .app-layout { grid-template-columns: 1fr; }
    .app-rail { order: 3; }
}

/* Top nav (in the topbar, next to the brand) */
.app-nav { display: flex; align-items: center; gap: .25rem; }
.app-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .55rem .75rem;
    border: 0;
    border-radius: .5rem;
    background: transparent;
    color: #374151;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
}
.app-nav-link:hover { background: var(--app-active); }
.app-nav-link.active { background: var(--app-active); }

/* Placeholder (first/empty) option in the form selects: a touch greyer. */
.app select option[value=""] { color: var(--app-muted); }

/* Full-width page header above the layout grid (title + action buttons). */
.app-header { padding: 2rem 1.5rem 0; }
.app-header + .app-layout { padding-top: 1.25rem; }

/* Center content */
.app-title { font-size: 1.6rem; font-weight: 600; margin: 0 0 .5rem; }

/* Auto-save indicator next to the topic title (assessment edit). */
.autosave-status {
    margin-left: 1rem;
    font-size: .85rem;
    font-weight: 400;
    color: var(--app-muted);
    white-space: nowrap;
    opacity: 1;
    transition: opacity .25s ease;
}
.autosave-status.is-fading { opacity: 0; }
/* Slow fade for "Opgeslagen" disappearing on its own. */
.autosave-status.is-fading--slow { opacity: 0; transition-duration: 1s; }
/* Invisible but not display:none, so a first status can fade in. */
.autosave-status:empty { opacity: 0; }
.autosave-status::before {
    content: '';
    display: inline-block;
    width: .6em;
    height: .6em;
    margin-right: .4em;
    border-radius: 50%;
    background: currentColor;
}
.autosave-status--saving::before { background: #f59e0b; }
.autosave-status--saved::before { background: #198754; }
.autosave-status--failed::before { background: #dc3545; }
.app-lede { color: var(--app-muted); max-width: 60ch; margin-bottom: 1.5rem; }

/* Cards */
.app-card {
    background: var(--app-card-bg);
    border: 1px solid var(--app-border);
    border-radius: .75rem;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1rem;
}
.app-card-head { display: flex; align-items: flex-start; gap: .85rem; }
.app-card-title { font-size: 1rem; font-weight: 600; margin: 0; }
.app-card-desc { color: var(--app-muted); font-size: .9rem; margin: .15rem 0 0; }
/* Align the body with the title: indent past the icon (width) + head gap. */
.app-card-body { margin-top: .9rem; margin-left: calc(2.25rem + .85rem); }
.app-card-body:empty { margin-top: 0; }
@media (max-width: 576px) {
    .app-card-body { margin-left: 0; }
}

/* Icons */
.app-icon {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    padding: .45rem;
    border-radius: .5rem;
    background: #fff;
    border: 1px solid var(--app-border);
    color: #374151;
}
.app-chevron { width: .8rem; height: .8rem; color: var(--app-muted); }

/* Right rail */
.app-rail-title { font-size: 1rem; font-weight: 600; margin: 0 0 .75rem; }
.app-rail-card {
    background: #fff;
    border: 1px solid var(--app-border);
    border-radius: .75rem;
    height: 120px;
    margin-bottom: 1rem;
}
.app-rail-card--lg { height: 260px; }

.app-actions { margin-top: 1.5rem; }

/* Multiselect dropdown: search + checkboxes inside a Bootstrap dropdown.
   `data-bs-auto-close="outside"` keeps it open while ticking boxes. */
.ms-multiselect .ms-menu { max-height: 320px; overflow: hidden; }
.ms-multiselect .ms-options { max-height: 220px; overflow-y: auto; }
.ms-multiselect .ms-options .form-check { padding-block: .15rem; }

/* "Geselecteerd" list rendered beneath a multiselect dropdown. */
.ms-selected:empty { display: none; }
.ms-selected-head {
    margin: 1rem 0 0;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--app-border);
    color: var(--bs-primary, #2a64a8);
    font-weight: 600;
}
.ms-selected-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding-block: .6rem;
}
.ms-selected-item + .ms-selected-item { border-top: 1px solid var(--app-border); }
.ms-selected-avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--app-border);
    color: var(--bs-primary, #2a64a8);
    font-size: .8rem;
    font-weight: 600;
}
.ms-selected-name { display: block; }
.ms-selected-sub { display: block; color: var(--bs-primary, #2a64a8); font-size: .9rem; }

/* ==========================================================================
   Assessment topic sidebar (templates/assessment/_topic_menu.html.twig)
   ========================================================================== */
.app-layout--sidebar-left { grid-template-columns: 320px minmax(0, 1fr); }
.app-layout--sidebar-left.app-layout--has-rail { grid-template-columns: 320px minmax(0, 1fr) 240px; }
@media (max-width: 1200px) {
    .app-layout--sidebar-left.app-layout--has-rail { grid-template-columns: 320px minmax(0, 1fr); }
    .app-layout--sidebar-left.app-layout--has-rail .app-rail { display: none; }
}
@media (max-width: 992px) {
    .app-layout--sidebar-left { grid-template-columns: 1fr; }
}

/* White sticky card with its own scrollbar, like the prototype sidebar. */
.app-topic-menu {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    padding: .5rem;
    background: #fff;
    border: 1px solid var(--app-border);
    border-radius: .75rem;
}

/* Progress block: flat soft surface with a thin pill-shaped bar (prototype). */
.topic-progress {
    margin: .25rem .25rem .6rem;
    padding: .75rem .75rem .85rem;
    background: #eef2f7;
    border-radius: .5rem;
}
.topic-progress-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: .5rem;
    font-size: .75rem;
    font-weight: 600;
    color: #4b5563;
}
.topic-progress-head strong { font-size: .875rem; color: #1f2937; }
.topic-progress-bar {
    height: .375rem;
    border-radius: 999px;
    background: #dbe3ec;
}
.topic-progress-bar .progress-bar { border-radius: 999px; background-color: var(--bs-primary, #2a64a8); }
.topic-progress-note { display: block; margin-top: .45rem; font-size: .72rem; color: var(--app-muted); }
/* Like .evidence-btn, but hovers to a neutral grey: #eef2f7 is the progress
   panel's own background, so this button would vanish into it. */
.btn-white {
    border: 1px solid #d1d5db;
    background: #fff;
    color: #4b5563;
    font-weight: 500;
}
.btn-white:hover { background: #f3f4f6; border-color: #9ca3af; color: #111827; }

/* Once released, the same button only opens the modal to navigate. */
.btn-done {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 1px solid #bcdcc8;
    background: #eaf5ee;
    color: #2f7d4f;
    font-weight: 500;
}
.btn-done:hover { background: #dcede3; border-color: #9ac9ac; color: #276840; }
.btn-done-icon { width: 13px; height: 13px; }

/* Completion modal. Everything below keys off data-step on the modal root,
   which assets/completion-modal.js moves. */
.completion-modal-header { align-items: flex-start; padding-bottom: 1rem; }
.completion-modal-header .modal-title { font-size: 1.35rem; font-weight: 700; color: #1f2937; }
.completion-modal-subtitle { margin: .35rem 0 0; font-size: .9rem; color: var(--app-muted); }

.completion-stepper {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.1rem 1.5rem;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}
.completion-step {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
}
.completion-step-num {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid #cbd5e1;
    border-radius: 50%;
    background: #fff;
    color: #9ca3af;
    font-weight: 600;
}
.completion-step-text { display: flex; flex-direction: column; }
.completion-step-title { font-size: 1rem; font-weight: 600; color: #9ca3af; }
.completion-step-sub { font-size: .82rem; color: var(--app-muted); }
.completion-step-line { flex: 1 1 auto; height: 2px; background: #dbe3ec; }

.completion-modal[data-step="1"] [data-completion-step="1"] .completion-step-num,
.completion-modal[data-step="2"] [data-completion-step="2"] .completion-step-num {
    border-color: #2a64a8;
    background: #2a64a8;
    color: #fff;
}
.completion-modal[data-step="1"] [data-completion-step="1"] .completion-step-title,
.completion-modal[data-step="2"] [data-completion-step="2"] .completion-step-title {
    color: #1f2937;
}

.completion-modal-body { max-height: 55vh; overflow-y: auto; padding: 1.25rem 1.5rem; }

.completion-modal-footer { justify-content: space-between; }
.completion-footer-actions { display: flex; gap: .5rem; margin: 0; }
.completion-btn-icon { width: 14px; height: 14px; }
.completion-next .completion-btn-icon { margin-left: .4rem; }
.completion-prev .completion-btn-icon { margin-right: .4rem; }

.completion-notice {
    display: flex;
    gap: .85rem;
    margin-bottom: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid #f0e2b6;
    border-radius: .6rem;
    background: #fcf6e2;
}
.completion-notice-badge {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: #6b4f16;
    color: #fff;
}
.completion-notice-icon { width: 18px; height: 18px; }
.completion-notice strong { display: block; color: #8a6a1a; }
.completion-notice-text { color: #7a6a4d; font-size: .9rem; }

.completion-question-list { margin: 0; padding: 0; list-style: none; }
.completion-question-list li + li { margin-top: .5rem; }
.completion-question {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .7rem .9rem;
    border: 1px solid #e5e7eb;
    border-radius: .6rem;
    background: #fff;
    color: inherit;
    text-decoration: none;
}
.completion-question:hover { border-color: #cbd5e1; background: #f9fafb; color: inherit; }
.completion-question-nr {
    flex: 0 0 auto;
    font-family: var(--bs-font-monospace, monospace);
    font-size: .78rem;
    color: #6b7280;
}
.completion-question-text {
    flex: 1 1 auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* Shape only; every reason brings its own colours via a modifier. */
.completion-question-pill {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .3rem;
    padding: .25rem .6rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 500;
}
.completion-question-pill-icon { width: 12px; height: 12px; }
.completion-question-pill--unanswered { background: var(--bs-primary-bg-subtle); color: var(--bs-primary); }
.completion-question-pill--no-evidence { border: 1px solid #d1d5db; background: #fff; color: #4b5563; }
.completion-question-pill--not-evaluated { background: var(--nee-soft); color: var(--nee); }

.completion-criteria-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1rem;
}
.completion-criteria-title { margin: 0; font-size: 1.05rem; font-weight: 700; color: #1f2937; }
.completion-criteria-lede { margin: .3rem 0 0; font-size: .9rem; color: var(--app-muted); }
.completion-criteria-meter { display: flex; flex: 0 0 auto; align-items: center; gap: .75rem; }
.completion-criteria-count { font-size: .85rem; color: var(--app-muted); }
.completion-criteria-bar {
    display: block;
    width: 6rem;
    height: .4rem;
    border-radius: 999px;
    background: #e9edf2;
    overflow: hidden;
}
.completion-criteria-bar span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: #2f7d4f;
    transition: width .2s ease;
}
.completion-criteria-all {
    padding: .3rem .6rem;
    border: 0;
    border-radius: .4rem;
    background: none;
    color: var(--bs-link-color, #2a64a8);
    font-size: .9rem;
    font-weight: 500;
    white-space: nowrap;
}
.completion-criteria-all:hover { background: var(--bs-primary-bg-subtle, #e8f0f8); }

.completion-criteria-list { margin: 0; padding: 0; list-style: none; }
.completion-criteria-list li + li { margin-top: .5rem; }
.completion-criterion {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    width: 100%;
    margin: 0;
    padding: .85rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: .6rem;
    background: #fff;
}
.completion-criterion:hover { border-color: #cbd5e1; }
.completion-criterion.is-checked { border-color: #bcdcc8; background: #f3f9f5; }
/* Bootstrap floats .form-check-input and pulls it left by the wrapper's padding,
   which hangs it outside the card. .form-check is in the selector to outweigh it. */
.completion-criterion .form-check { flex: 0 0 auto; min-height: 0; margin: 0; padding: 0; }
.completion-criterion .form-check .form-check-input {
    float: none;
    width: 1.25rem;
    height: 1.25rem;
    margin: .1rem 0 0;
}
.completion-criterion .form-check-label { display: none; }
/* Green rather than the app's blue: this is a confirmation, not a selection. */
.completion-criterion .form-check-input:checked { background-color: #2f7d4f; border-color: #2f7d4f; }
.completion-criterion .form-check-input:focus { border-color: #8ec2a3; box-shadow: 0 0 0 .25rem rgba(47, 125, 79, .25); }
.completion-criterion-text { display: flex; flex-direction: column; margin: 0; }
.completion-criterion-title { font-weight: 600; color: #1f2937; }
.completion-criterion-desc { font-size: .88rem; color: var(--app-muted); }

.completion-modal[data-step="1"] [data-completion-pane="2"],
.completion-modal[data-step="1"] [data-completion-actions="2"],
.completion-modal[data-step="2"] [data-completion-pane="1"],
.completion-modal[data-step="2"] [data-completion-actions="1"] {
    display: none;
}

.topic-group { margin-top: 1.25rem; }
.topic-group-head { display: flex; align-items: center; gap: .5rem; padding: 0 .5rem .4rem; }
.topic-group-dot { flex: 0 0 auto; width: .5rem; height: .5rem; border-radius: 50%; }
.topic-group-dot--sb { background: var(--bs-success, #198754); }
.topic-group-dot--dnsh { background: #fd7e14; }
.topic-group-title { flex: 1 1 auto; font-weight: 600; font-size: .75rem; }
.topic-badge { background: var(--app-active); color: var(--app-muted); }
.topic-badge--filled { background: var(--bs-primary-bg-subtle, #e8f0f8); color: var(--bs-primary, #2a64a8); }

.topic-list { list-style: none; margin: 0; padding: 0; }
.topic-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem;
    border-radius: .5rem;
    color: inherit;
    text-decoration: none;
}
.topic-item:hover, .topic-item.active { background: var(--app-active); }
.topic-item.active .topic-title { font-weight: 600; }
.topic-chip {
    flex: 0 0 auto;
    font-size: .75rem;
    font-weight: 600;
    padding: .1rem .45rem;
    border-radius: .35rem;
    background: #fff;
    border: 1px solid var(--app-border);
    color: var(--app-muted);
}
/* In the menu the code is plain small text, not a pill (prototype vl-cat-code). */
.topic-item .topic-chip {
    width: 52px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: .72rem;
    font-weight: 400;
    color: var(--app-muted);
}
.topic-item.active .topic-chip { color: inherit; }
.topic-title { flex: 1 1 auto; min-width: 0; font-size: .8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topic-status { flex: 0 0 auto; display: inline-flex; align-items: center; }
.topic-status-icon { width: 1.1rem; height: 1.1rem; }
/* Wider-than-round pill around the status icon, like the count pill. */
.topic-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .1rem .45rem;
    border-radius: 999px;
}
.topic-status-pill .topic-status-icon { width: .85rem; height: .85rem; }
/* Blue = filled in; green/red follow once the auditor approves/rejects. */
.topic-status-pill--pending { background: var(--bs-primary-bg-subtle, #e8f0f8); color: var(--bs-primary, #2a64a8); }
.topic-status-pill--approved { background: var(--bs-success-bg-subtle, #d1e7dd); color: var(--bs-success, #198754); }
.topic-status-pill--rejected { background: var(--bs-danger-bg-subtle, #f8d7da); color: var(--bs-danger, #dc3545); }
.topic-status-icon--empty { color: var(--app-border); }
.topic-count-pill {
    font-size: .72rem;
    font-weight: 600;
    color: var(--app-muted);
    background: var(--app-active);
    border-radius: 999px;
    padding: .1rem .45rem;
}

/* ==========================================================================
   Question rail: jump menu for the current topic (prototype vl-rail).
   ========================================================================== */
.question-rail {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    padding-left: 2px;
}
.question-rail-head {
    margin: 0 0 .5rem;
    padding-left: .75rem;
    font-size: .69rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--app-muted);
}
.question-rail-list { display: flex; flex-direction: column; border-left: 1px solid var(--app-border); }
.rail-item {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-left: -1px;
    padding: .375rem .5rem .375rem .75rem;
    border-left: 2px solid transparent;
    color: inherit;
    text-decoration: none;
}
.rail-item:hover { background: #eef2f7; }
.rail-item.active { border-left-color: var(--bs-primary, #2a64a8); background: var(--bs-primary-bg-subtle, #e8f0f8); }
.rail-item-nr { flex-shrink: 0; font-size: .66rem; font-weight: 600; color: var(--app-muted); white-space: nowrap; }
.rail-item-text {
    flex: 1;
    min-width: 0;
    font-size: .72rem;
    line-height: 1.35;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rail-item-text.dim { color: #9ca3af; }
/* Skipped questions grey out here too, matching the question rows. */
.rail-item--skipped { background: #f6f9fc; }
.rail-item--skipped .rail-item-nr { color: #9ca3af; }
.rail-item.active .rail-item-nr, .rail-item.active .rail-item-text { color: var(--bs-primary, #2a64a8); font-weight: 500; }
.rail-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
}
.rail-dot--ok { background: var(--bs-success-bg-subtle, #d1e7dd); color: var(--bs-success, #198754); }
.rail-dot--open { border: 1.5px solid var(--app-border); }
.rail-dot--skipped { background: #e6ecf3; color: #9ca3af; }
.rail-dot-icon { width: 9px; height: 9px; }

/* ==========================================================================
   Topic block: the questions table in a white card (prototype vl-qtable).
   ========================================================================== */
.topic-block {
    padding: 0;
    background: #fff;
    border: 1px solid var(--app-border);
    border-radius: .625rem;
    box-shadow: 0 1px 2px rgba(24, 24, 27, .04), 0 1px 1px rgba(24, 24, 27, .03);
    font-size: .875rem;
}
/* Full-width question text; answer and evidence wrap to the line below. */
.question-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--app-border);
}
.question-row:first-child { border-radius: .625rem .625rem 0 0; }
.question-row:last-child { border-bottom: 0; border-radius: 0 0 .625rem .625rem; }
.question-cell { flex: 1 1 100%; min-width: 0; }
.evidence-cell { flex: none; }
/* Prototype question-row typography. */
.assessment-answers .form-control { width: 110px; font-size: .84rem; }
.assessment-answers .btn-sm { font-size: .78rem; }
.answer-unit { font-size: .72rem; }
.question-nr { display: block; margin-bottom: .15rem; font-size: .72rem; font-weight: 600; color: var(--app-muted); }
.question-text { display: block; line-height: 1.5; }
/* Note under a skipped question (prototype vl-dim-note). */
.dim-note { display: block; margin-top: .25rem; font-size: .72rem; font-style: italic; color: #9aa3af; }
.evidence-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 1px solid #d1d5db;
    border-radius: .5rem;
    background: #fff;
    color: #4b5563;
    font-weight: 500;
}
.evidence-btn:hover { background: #eef2f7; border-color: #9ca3af; }
.evidence-btn--empty { color: var(--app-muted); border-style: dashed; }
.evidence-btn-icon { width: 12px; height: 12px; }

/* Title row with the topic status pill on the right (prototype vl-tstat). */
.topic-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.topic-state {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .75rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 500;
    white-space: nowrap;
    background: var(--app-active);
    color: var(--app-muted);
}
.topic-state--pending { background: var(--bs-primary-bg-subtle, #e8f0f8); color: var(--bs-primary, #2a64a8); font-weight: 600; }
.topic-state-icon { width: .8rem; height: .8rem; }

/* Green banner when an aligns-question completes the topic (prototype vl-aligns-note). */
.aligns-note {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .875rem;
    padding: .625rem .8rem;
    border-radius: .5rem;
    font-size: .78rem;
    font-weight: 500;
    background: #e2efe2;
    color: #2f6f3b;
}
.aligns-note-icon { flex-shrink: 0; width: .875rem; height: .875rem; }

/* Category-tinted title chip (prototype h2 code chip). */
.topic-chip--sb, .topic-chip--dnsh {
    padding: .25rem .7rem;
    border: 0;
    border-radius: .4375rem;
    font-size: .8125rem;
    font-weight: 500;
}
.topic-chip--sb { color: #1f6f3a; background: rgba(31, 111, 58, .08); }
.topic-chip--dnsh { color: #a35a1a; background: rgba(163, 90, 26, .08); }

/* ==========================================================================
   Yes/no segmented buttons (boolean answers, assessment edit)
   btn-check radios; the hidden placeholder is the "unanswered" state.
   ========================================================================== */
/* Keep the toggle, clear button and unit on one line. */
.answer-cell { display: flex; align-items: center; gap: .45rem; white-space: nowrap; }
.answer-toggle { display: inline-flex; vertical-align: middle; }
.answer-toggle input[value=""], .answer-toggle input[value=""] + label { display: none; }
.answer-toggle .answer-toggle-btn,
.evaluation-status-toggle .answer-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-width: 3.6rem;
    padding: .4rem .9rem;
    font-size: .8125rem;
    font-weight: 500;
    border: 1px solid var(--app-border);
    border-radius: 0;
    background: #fff;
    color: #374151;
}
.answer-toggle input[value="1"] + .answer-toggle-btn { border-radius: .5rem 0 0 .5rem; }
.answer-toggle input[value="0"] + .answer-toggle-btn { border-radius: 0 .5rem .5rem 0; margin-left: -1px; }
.answer-toggle .answer-toggle-btn:hover,
.evaluation-status-toggle .answer-toggle-btn:not(.active):not(:disabled):hover { position: relative; z-index: 1; border-color: #9ca3af; color: #111827; }
/* One colour for both: the fill means "selected", not a verdict — a "no" answer is not negative. */
.answer-toggle .btn-check:checked + .answer-toggle-btn {
    position: relative;
    z-index: 2;
    font-weight: 600;
    color: #fff;
    background: var(--bs-primary, #2a64a8);
    border-color: var(--bs-primary, #2a64a8);
}
.answer-toggle .btn-check:checked + .answer-toggle-btn::before,
.evaluation-status-toggle .answer-toggle-btn.active::before {
    content: "";
    width: .75em;
    height: .75em;
    background: center / contain no-repeat;
}
.answer-toggle .btn-check[value="1"]:checked + .answer-toggle-btn::before,
.evaluation-status-toggle [data-status="compliant"].active::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M2.5 8.5 6 12l7.5-8'/%3E%3C/svg%3E");
}
.answer-toggle .btn-check[value="0"]:checked + .answer-toggle-btn::before,
.evaluation-status-toggle [data-status="non_compliant"].active::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' d='m4 4 8 8m0-8-8 8'/%3E%3C/svg%3E");
}
/* "Antwoord wissen" ghost button, injected by answer-toggle.js (prototype vl-clear). */
.answer-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: #9ca3af;
    vertical-align: middle;
}
.answer-clear[hidden] { display: none; }
.answer-clear:hover { background: #e6ecf3; color: #1f2937; }
.answer-clear-icon { width: 11px; height: 11px; }

/* ==========================================================================
   Previous/next topic navigation (templates/assessment/_topic_nav.html.twig)
   Sticky at the bottom while the content is taller than the viewport.
   ========================================================================== */
.topic-nav {
    position: sticky;
    bottom: 0;
    z-index: 12;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 1.5rem;
    padding: .75rem;
    border-top: 1px solid var(--app-border);
    border-radius: .75rem;
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(8px);
    box-shadow: 0 -1px 0 var(--app-border), 0 8px 24px -14px rgba(24, 24, 27, .25);
}
.topic-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    max-width: 44%;
    padding: .6rem 1rem;
}
.topic-nav-chevron { flex: 0 0 auto; width: .9rem; height: .9rem; }
.topic-nav-label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    line-height: 1.25;
    text-align: left;
}
.topic-nav-label small { font-size: .85rem; font-weight: 600; }
.topic-nav-label b {
    max-width: 100%;
    font-size: .72rem;
    font-weight: 500;
    opacity: .7;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.topic-nav-btn--next .topic-nav-label { align-items: flex-end; text-align: right; }

.popover-body {
    white-space: pre-line;
}

/* Small circular help indicator: outlined "?" (prototype vl-pop-btn). */
.help-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    margin-left: .25rem;
    border: 1px solid #d1d5db;
    border-radius: 50%;
    background: #fff;
    color: var(--app-muted);
    font-size: .66rem;
    font-weight: 600;
    line-height: 1;
    cursor: help;
    vertical-align: 1px;
    text-decoration: none;
}
.help-badge:hover, .help-badge:focus { border-color: var(--bs-primary, #2a64a8); color: var(--bs-primary, #2a64a8); }

/* ==========================================================================
   Answer comment cards (assessment/_answer_comment_card.html.twig)
   Two cards per question row answer and evaluation, full-width below
   the answer/evidence cells.
   ========================================================================== */
.answer-comment-cell {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding-top: .1rem;
}
.evaluation-block {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}
/* Verdict buttons plus their save status on one line. */
.evaluation-status-row {
    display: flex;
    align-items: center;
    align-self: flex-start;
    padding-top: .5rem;
}
.evaluation-status-toggle {
    display: inline-flex;
}
.evaluation-status-toggle .answer-toggle-btn:first-child {
    border-radius: .5rem 0 0 .5rem;
}
.evaluation-status-toggle .answer-toggle-btn:last-child {
    border-radius: 0 .5rem .5rem 0;
    margin-left: -1px;
}
.evaluation-status-toggle .answer-toggle-btn:disabled {
    cursor: default;
    opacity: .7;
}
/* The selected one keeps full opacity, so a read-only verdict stays legible. */
.evaluation-status-toggle .answer-toggle-btn.active:disabled {
    opacity: 1;
}
/* Unlike the ja/nee answer, the fill here IS a verdict, so it carries colour. */
.evaluation-status-toggle .answer-toggle-btn.active {
    position: relative;
    z-index: 2;
    font-weight: 600;
    color: #fff;
}
.evaluation-status-toggle [data-status="compliant"].active {
    background: var(--ok);
    border-color: var(--ok);
}
.evaluation-status-toggle [data-status="non_compliant"].active {
    background: var(--nee);
    border-color: var(--nee);
}
.answer-comment {
    border: 1px solid var(--app-border);
    border-radius: .5rem;
    background: var(--app-card-bg);
    overflow: hidden;
    font-size: .8125rem;
}
/* Answer text: matches .topic-progress / .topic-progress-bar palette */
.answer-comment[data-type="answer-comment"] {
    background: #eef2f7;
    border-color: #dbe3ec;
    border-left: 3px solid #2a64a8;
}
.answer-comment[data-type="answer-comment"] .answer-comment-author {
    color: #2a64a8;
    background: #dbe3ec;
}
/* Evaluation text: light purple with purple border */
.answer-comment[data-type="evaluation-comment"] {
    background: #f5f3fb;
    border-color: #e6e1f6;
    border-left: 3px solid #7b6fb8;
}
.answer-comment[data-type="evaluation-comment"] .answer-comment-author {
    color: #7b6fb8;
    background: #e6e1f6;
}
.answer-comment-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .3rem .625rem;
}
.answer-comment-header-left {
    display: flex;
    align-items: center;
    gap: .9rem;
    min-width: 0;
    flex: 1;
}
.answer-comment-header-right {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-shrink: 0;
}
.answer-comment-author {
    display: inline-flex;
    align-items: center;
    padding: .15rem .5rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
}
.answer-comment-type-label {
    color: var(--app-muted);
}
.answer-comment[data-type="answer-comment"] .answer-comment-type-label {
    font-weight: 700;
    text-transform: uppercase;
    color: #453a86;
}
.answer-comment[data-type="evaluation-comment"] .answer-comment-type-label {
    font-weight: 700;
    text-transform: uppercase;
    color: #1c4d84;
}
.answer-comment-date {
    color: var(--app-muted);
    font-size: .75rem;
}
.answer-comment-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    padding: .1rem .3rem;
    background: none;
    border: none;
    border-radius: .3rem;
    color: var(--bs-link-color, #2a64a8);
    cursor: pointer;
    text-decoration: none;
    font-size: .78rem;
    font-weight: 600;
}
.answer-comment-edit-btn:hover {
    color: var(--bs-link-hover-color, #1a4a80);
    text-decoration: none;
    background: rgba(0,0,0,.06);
}
.answer-comment-edit-icon {
    width: .72rem;
    height: .72rem;
    flex-shrink: 0;
}
.answer-comment-body {
    padding: .35rem .625rem;
    line-height: 1.5;
}
.answer-comment-text.is-collapsed {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.answer-comment-read-more {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    padding: .1rem 0;
    margin-top: .15rem;
    color: var(--bs-link-color, #2a64a8);
    cursor: pointer;
    font-size: .78rem;
    font-weight: 600;
}
.answer-comment-read-more:hover {
    color: var(--bs-link-hover-color, #1a4a80);
    text-decoration: underline;
}
.answer-comment-empty {
    font-style: italic;
    color: var(--app-muted);
}
.answer-comment-editor {
    padding: .5rem .625rem .625rem;
    border-top: 1px solid var(--app-border);
    background: #fff;
}
.answer-comment-editor-label {
    font-size: .75rem;
    font-weight: 600;
    margin-bottom: .35rem;
    color: var(--app-muted);
}
.answer-comment-editor-actions {
    margin-top: .5rem;
    display: flex;
    gap: .25rem;
    align-items: center;
}