/* ToetsBuddy — mobile-first */

:root {
    --bg: #f5f4fb;
    --surface: #ffffff;
    --surface-2: #efedfa;
    --text: #1d1b2e;
    --muted: #6b6883;
    --border: #e3e0f0;
    --primary: #5b4cf0;
    --primary-strong: #4536d6;
    --primary-soft: #e9e6ff;
    --on-primary: #ffffff;
    --good: #12805c;
    --good-soft: #e0f5ec;
    --partial: #a45f00;
    --partial-soft: #fff1d6;
    --bad: #c8363f;
    --bad-soft: #fde7e8;
    --shadow: 0 1px 2px rgb(29 27 46 / 6%), 0 4px 16px rgb(29 27 46 / 6%);
    --radius: 18px;
    --radius-sm: 12px;
    --tabbar-h: 68px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #12111c;
        --surface: #1c1b2a;
        --surface-2: #262439;
        --text: #eeedf7;
        --muted: #a3a0bb;
        --border: #302e45;
        --primary: #8b80ff;
        --primary-strong: #a49bff;
        --primary-soft: #2c2852;
        --on-primary: #12111c;
        --good: #4cd19f;
        --good-soft: #143528;
        --partial: #f3b24b;
        --partial-soft: #3a2c12;
        --bad: #ff7a82;
        --bad-soft: #3d1c21;
        --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 4px 16px rgb(0 0 0 / 25%);
        color-scheme: dark;
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

h1, h2, h3 {
    line-height: 1.2;
    margin: 0 0 .5rem;
    letter-spacing: -.01em;
}

h1 { font-size: 1.65rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 .75rem; }

a {
    color: var(--primary);
}

img {
    max-width: 100%;
}

.icon {
    width: 1.25em;
    height: 1.25em;
    flex: none;
    vertical-align: -.25em;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

[hidden] {
    display: none !important;
}

/* ---------- Layout ---------- */

.page {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: 16px 16px calc(32px + var(--safe-bottom));
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.has-nav:not(.focus-mode) .page {
    padding-bottom: calc(var(--tabbar-h) + 32px + var(--safe-bottom));
}

.page > h1 {
    margin-bottom: 0;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 16px;
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    background: color-mix(in srgb, var(--bg) 85%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}

.brand {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
    font-weight: 800;
    font-size: 1.1rem;
    text-decoration: none;
}

.topnav {
    display: none;
    gap: 4px;
}

.topnav a {
    padding: 8px 12px;
    border-radius: 999px;
    color: var(--muted);
    font-weight: 600;
    text-decoration: none;
}

.topnav a[aria-current="page"] {
    background: var(--primary-soft);
    color: var(--primary);
}

.tabbar {
    position: fixed;
    inset: auto 0 0;
    z-index: 30;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    height: calc(var(--tabbar-h) + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    background: var(--surface);
    border-top: 1px solid var(--border);
}

.tabbar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--muted);
    font-size: .75rem;
    font-weight: 600;
    text-decoration: none;
}

.tabbar a .icon {
    width: 24px;
    height: 24px;
}

.tabbar a[aria-current="page"] {
    color: var(--primary);
}

.tabbar-bubble {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-top: -22px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--on-primary);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 40%, transparent);
}

@media (min-width: 720px) {
    .topnav { display: flex; }
    .tabbar { display: none; }
    .has-nav:not(.focus-mode) .page { padding-bottom: 48px; }
    .page { padding-top: 32px; }
}

/* ---------- Components ---------- */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: var(--shadow);
}

.stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.eyebrow {
    margin: 0 0 4px;
    color: var(--primary);
    font-weight: 700;
    font-size: .9rem;
}

.meta,
.hint {
    color: var(--muted);
    font-size: .9rem;
}

.hint {
    display: block;
    margin: 4px 0 0;
}

.section-title {
    margin: 8px 0 10px;
    font-size: 1.05rem;
}

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    margin: -4px 0 -8px -4px;
    padding: 6px 4px;
    color: var(--muted);
    font-weight: 600;
    text-decoration: none;
}

.alert {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    font-weight: 500;
}

.alert-error { background: var(--bad-soft); color: var(--bad); }
.alert-success { background: var(--good-soft); color: var(--good); }
.alert-warning { background: var(--partial-soft); color: var(--partial); }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 14px;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform .08s ease, background-color .15s ease;
    touch-action: manipulation;
}

.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .6; cursor: progress; }
.btn-block { width: 100%; }
.btn-lg { min-height: 56px; font-size: 1.05rem; }

.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-strong); }
.btn-secondary { background: var(--primary-soft); color: var(--primary); }
.btn-ghost { background: transparent; color: var(--muted); }
.btn-danger { color: var(--bad); }
.btn.btn-danger:not(.btn-ghost) { background: var(--bad); color: #fff; }

.icon-btn {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: var(--muted);
}

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
}

.badge-wait { background: var(--primary-soft); color: var(--primary); }
.badge-bad { background: var(--bad-soft); color: var(--bad); }
.badge-shared { margin-right: 4px; background: var(--surface-2); color: var(--muted); }

.center { text-align: center; }

/* ---------- Delen ---------- */

.card-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 1.05rem;
}

.share-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.share-card .hint { margin: 0; }

.share-link {
    display: flex;
    gap: 8px;
}

.share-link input {
    flex: 1;
    min-width: 0;
    font-size: .9rem;
    color: var(--muted);
}

.share-link .btn { flex: none; }

.share-apps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.share-app {
    display: grid;
    place-items: center;
    min-height: 44px;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    font-weight: 700;
    font-size: .9rem;
    text-decoration: none;
}

.share-app:active { background: var(--primary-soft); }

.shared-by {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    color: var(--muted);
    font-weight: 600;
}

.shared-by .icon { width: 16px; height: 16px; }

.others-summary { margin: 0 0 8px; }

.others-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.others-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid var(--border);
}

.others-list .grade-pill { height: 32px; min-width: 44px; font-size: .95rem; }

/* ---------- Profielfoto ---------- */

.avatar {
    display: inline-grid;
    place-items: center;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
    background: var(--primary-soft);
    color: var(--primary);
    font-weight: 800;
}

.avatar-sm { width: 26px; height: 26px; font-size: .8rem; }
.avatar-lg { width: 88px; height: 88px; font-size: 2.2rem; }

.tabbar .avatar-sm { width: 24px; height: 24px; }
.tabbar a[aria-current="page"] .avatar { box-shadow: 0 0 0 2px var(--primary); }

.topnav-account {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.profile-head {
    display: flex;
    align-items: center;
    gap: 16px;
}

.profile-head h1 { margin: 0; }
.profile-head .meta { margin: 2px 0 0; }

.avatar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.avatar-actions .btn-sm { min-height: 36px; padding: 4px 12px; font-size: .88rem; }

/* ---------- School kiezen ---------- */

.school-card h2 { margin-bottom: 4px; }
.school-card > .hint { margin-bottom: 12px; }

.school-current {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.school-current small { display: block; }

.school-current-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--surface);
    color: var(--primary);
}

.school-current-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.school-current-actions .btn-sm { min-height: 36px; padding: 4px 12px; font-size: .88rem; }

.school-picker {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 12px;
}

.school-step label,
.school-step legend {
    display: flex;
    align-items: center;
    gap: 8px;
}

.school-step .step-number { width: 24px; height: 24px; font-size: .8rem; }
.school-step:not(.has-filter) [data-school-filter] { display: none; }

.suggestions,
.school-list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.school-list { max-height: 360px; overflow-y: auto; }

.suggestions li + li,
.school-list li + li { border-top: 1px solid var(--border); }

.suggestions button,
.school-list button {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    min-height: 48px;
    padding: 8px 12px;
    border: 0;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.suggestions button:hover,
.school-list button:hover,
.suggestions button:focus-visible,
.school-list button:focus-visible { background: var(--primary-soft); }

.suggestions small,
.school-list small { color: var(--muted); font-size: .82rem; }

.suggestions-empty { padding: 10px 12px; color: var(--muted); }

.guest-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.guest-card p { margin: 0; }

.shared-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding-top: 3vh;
    text-align: center;
}

.shared-intro .eyebrow { margin: 0; font-size: 1rem; }

.shared-quiz {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.shared-quiz h1,
.shared-quiz .meta,
.shared-quiz .eyebrow { margin: 0; }

.shared-account {
    color: var(--muted);
    text-align: center;
}

.grade-pill {
    display: grid;
    place-items: center;
    min-width: 48px;
    height: 40px;
    padding: 0 10px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}

.grade-pill.is-pass { background: var(--good-soft); color: var(--good); }
.grade-pill.is-fail { background: var(--bad-soft); color: var(--bad); }

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag {
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: .88rem;
}

.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 16px;
}

.empty-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary);
}

.empty-icon .icon { width: 30px; height: 30px; }
.empty-icon.is-bad { background: var(--bad-soft); color: var(--bad); }

.list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.list li + li { border-top: 1px solid var(--border); }

.list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    color: inherit;
    text-decoration: none;
}

.list-item small { display: block; }

/* ---------- Forms ---------- */

.form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.field + .field { margin-top: 14px; }
.form > .field + .field { margin-top: 0; }

.field-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 12px;
    margin-top: 14px;
}

.form > .field-row { margin-top: 0; }

label,
legend {
    font-weight: 600;
    font-size: .95rem;
}

legend { margin-bottom: 8px; padding: 0; }

.optional {
    color: var(--muted);
    font-weight: 400;
}

input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="password"],
select,
textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 16px; /* voorkomt inzoomen op iOS */
}

textarea {
    resize: vertical;
    line-height: 1.45;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--primary) 60%, transparent);
    outline-offset: 2px;
}

.step-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
}

.step-number {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--on-primary);
    font-size: .9rem;
}

.choice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.choice {
    position: relative;
    display: block;
    cursor: pointer;
}

.choice input,
.segmented input,
.chip input,
.option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.choice-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.choice-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 100%;
    padding: 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-weight: 400;
}

.choice-body small {
    color: var(--muted);
    font-size: .8rem;
    line-height: 1.3;
}

.choice input:checked + .choice-body {
    border-color: var(--primary);
    background: var(--primary-soft);
}

.choice input:focus-visible + .choice-body,
.segmented input:focus-visible + span,
.chip input:focus-visible + span,
.option input:focus-visible ~ .option-text {
    outline: 3px solid color-mix(in srgb, var(--primary) 60%, transparent);
    outline-offset: 2px;
}

.segmented {
    display: flex;
    padding: 4px;
    border-radius: 14px;
    background: var(--surface-2);
}

.segmented label {
    flex: 1;
    position: relative;
    cursor: pointer;
}

.segmented span {
    display: grid;
    place-items: center;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 10px;
    font-weight: 700;
    color: var(--muted);
}

.segmented input:checked + span {
    background: var(--surface);
    color: var(--primary);
    box-shadow: var(--shadow);
}

.segmented-sm span { min-height: 32px; font-size: .85rem; }

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chip {
    position: relative;
    cursor: pointer;
}

.chip span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 6px 14px;
    border: 1.5px solid var(--border);
    border-radius: 999px;
    font-weight: 600;
}

.chip-check { display: none; width: 16px; height: 16px; }

.chip input:checked + span {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary);
}

.chip input:checked + span .chip-check { display: inline; }

.more summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--primary);
}

.more textarea { margin-top: 8px; }

.sticky-actions {
    position: sticky;
    bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 8px);
    z-index: 10;
}

@media (min-width: 720px) {
    .sticky-actions { bottom: 16px; }
}

.form-errors {
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: var(--bad-soft);
    color: var(--bad);
    font-weight: 500;
}

.form-errors p { margin: 0; }

/* ---------- Auth ---------- */

.auth {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 4vh;
}

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

.auth-hero h1 {
    margin: 8px 0 4px;
    font-size: 2rem;
}

.auth-hero p {
    color: var(--muted);
}

.auth-switch {
    text-align: center;
    color: var(--muted);
}

/* ---------- Dashboard ---------- */

.hero h1 {
    font-size: 1.9rem;
    margin-bottom: 14px;
}

.hero-cta {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border-radius: 22px;
    background: linear-gradient(135deg, #6a5cff, #4a3be0 60%, #3b2fc2);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 10px 24px rgb(74 59 224 / 30%);
}

.hero-cta strong { display: block; font-size: 1.1rem; }
.hero-cta small { display: block; opacity: .85; line-height: 1.35; }
.hero-cta > .icon { margin-left: auto; }

.hero-cta-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: rgb(255 255 255 / 18%);
}

.hero-cta-icon .icon { width: 28px; height: 28px; }

/* Groepen per vak en archief */
.subject-groups {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.subject-group summary,
.archive summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 4px 2px;
    list-style: none;
    cursor: pointer;
    touch-action: manipulation;
}

.subject-group summary::-webkit-details-marker,
.archive summary::-webkit-details-marker { display: none; }

.subject-name {
    font-size: 1.05rem;
    font-weight: 800;
}

.subject-count {
    min-width: 24px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: .8rem;
    font-weight: 700;
    text-align: center;
}

.subject-chevron {
    margin-left: auto;
    color: var(--muted);
    transition: transform .15s ease;
}

.subject-group[open] .subject-chevron,
.archive[open] .subject-chevron { transform: rotate(90deg); }

.subject-group[open] > .quiz-list { margin-top: 4px; }

.archive {
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.archive summary { color: var(--muted); font-weight: 700; }
.archive-hint { margin: 0 0 10px; }
.archive .quiz-item { opacity: .85; }

.quiz-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.quiz-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    color: inherit;
    text-decoration: none;
}

.quiz-thumb {
    display: grid;
    place-items: center;
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    object-fit: cover;
    background: var(--surface-2);
    color: var(--muted);
}

.quiz-item-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.quiz-item-body strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quiz-item-subject {
    color: var(--primary);
    font-size: .8rem;
    font-weight: 700;
}

.quiz-item-meta {
    color: var(--muted);
    font-size: .85rem;
}

/* ---------- Photos ---------- */

.photo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 12px 0 4px;
}

.photo,
.photo-add {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: var(--surface-2);
}

.photo-number {
    position: absolute;
    left: 6px;
    top: 6px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgb(0 0 0 / 55%);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
}

.photo-remove {
    position: absolute;
    right: 4px;
    top: 4px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgb(0 0 0 / 60%);
    color: #fff;
    cursor: pointer;
}

.photo-add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 2px dashed color-mix(in srgb, var(--primary) 45%, var(--border));
    background: var(--primary-soft);
    color: var(--primary);
    font-weight: 700;
    font-size: .9rem;
    text-align: center;
    cursor: pointer;
}

.photo-add .icon { width: 30px; height: 30px; }

.photo-add-alt {
    background: transparent;
    border-color: var(--border);
    color: var(--muted);
}

.photo-add:focus-within {
    outline: 3px solid color-mix(in srgb, var(--primary) 60%, transparent);
    outline-offset: 2px;
}

.photo.is-loading img { opacity: .4; }

/* ---------- Quiz detail ---------- */

.quiz-head h1 { margin-bottom: 4px; }
.quiz-head .meta { margin-bottom: 16px; }
.quiz-head .notice { margin-bottom: 12px; }

.summary-card summary {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    cursor: pointer;
}

.summary-list {
    margin: 12px 0 0;
    padding-left: 20px;
}

.summary-list li + li { margin-top: 6px; }

.actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.actions-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.actions-row .btn {
    padding-inline: 12px;
    white-space: nowrap;
}

/* ---------- Processing ---------- */

.processing {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 6vh 8px 0;
    text-align: center;
}

.processing form,
.processing .btn { width: 100%; }

.buddy {
    position: relative;
    display: grid;
    place-items: center;
    width: 140px;
    height: 140px;
    margin-bottom: 12px;
}

.buddy img {
    animation: bob 2.4s ease-in-out infinite;
}

.buddy-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 4px solid var(--primary-soft);
    border-top-color: var(--primary);
    animation: spin 1.1s linear infinite;
}

.steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 16px 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.steps li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    transition: color .3s;
}

.steps-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--border);
}

.steps li.is-done { color: var(--text); }
.steps li.is-done .steps-dot { background: var(--good); border-color: var(--good); }
.steps li.is-active { color: var(--text); font-weight: 700; }
.steps li.is-active .steps-dot { border-color: var(--primary); background: var(--primary-soft); animation: pulse 1s ease-in-out infinite; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bob { 50% { transform: translateY(-6px); } }
@keyframes pulse { 50% { transform: scale(1.3); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Quiz runner ---------- */

.runner {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.runner-head {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: -16px -16px 0;
    padding: 8px 16px;
    padding-top: calc(8px + env(safe-area-inset-top, 0px));
    background: var(--bg);
}

.progress {
    flex: 1;
    height: 10px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden;
}

.progress-bar {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--primary);
    transition: width .25s ease;
}

.runner-counter {
    min-width: 3.5em;
    color: var(--muted);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.question {
    margin: 0;
    min-width: 0;
}

.question-meta {
    float: left;
    width: 100%;
    margin-bottom: 8px;
    color: var(--primary);
    font-size: .85rem;
    font-weight: 700;
}

.question-meta span { color: var(--muted); font-weight: 500; }
.question-meta + * { clear: both; }

.question-text {
    font-size: 1.12rem;
    font-weight: 600;
    line-height: 1.45;
    white-space: normal;
    overflow-wrap: anywhere;
}

.blank {
    display: inline-block;
    width: 4.5em;
    height: 1em;
    border-bottom: 2.5px solid var(--primary);
    vertical-align: -.15em;
}

.options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 10px 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-weight: 500;
    cursor: pointer;
}

.option-letter {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--muted);
    font-weight: 800;
}

.option-letter .icon { width: 18px; height: 18px; }
.option-text { flex: 1; overflow-wrap: anywhere; }

.option:has(input:checked) {
    border-color: var(--primary);
    background: var(--primary-soft);
}

.option input:checked + .option-letter {
    background: var(--primary);
    color: var(--on-primary);
}

.answer-input { font-size: 1.05rem; }

/* Speciale tekens bij taalvakken */
.char-bar { margin-top: 8px; }

.char-bar summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 4px 12px;
    border: 1.5px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    font-size: .9rem;
    font-weight: 700;
    list-style: none;
    cursor: pointer;
    touch-action: manipulation;
}

.char-bar summary::-webkit-details-marker { display: none; }
.char-bar summary span { font-weight: 500; }
.char-bar[open] summary { border-color: var(--primary); color: var(--primary); }

.char-keys {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.char-key {
    min-width: 44px;
    min-height: 44px;
    padding: 0 8px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 1.15rem;
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
}

.char-key:active { background: var(--primary-soft); }

.char-shift[aria-pressed="true"] {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--on-primary);
}

.runner-nav {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: 8px;
    margin: 0 -16px;
    padding: 10px 16px calc(10px + var(--safe-bottom));
    background: linear-gradient(to top, var(--bg) 75%, transparent);
}

.runner-nav .btn { flex: 1; }

.dots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

.dots button {
    width: 34px;
    height: 34px;
    border: 1.5px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    color: var(--muted);
    font: inherit;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
}

.dots button.is-answered { background: var(--primary-soft); border-color: transparent; color: var(--primary); }
.dots button[aria-current="step"] { border-color: var(--primary); color: var(--primary); }

.runner.is-stepper .question:not(.is-current) { display: none; }
.runner.is-stepper .question.is-current { animation: fade-in .2s ease; }

@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } }

/* ---------- Result ---------- */

.result-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 16px;
}

.grade-ring {
    --pct: 0;
    --ring: var(--good);
    display: grid;
    place-items: center;
    align-content: center;
    width: 140px;
    height: 140px;
    margin-bottom: 12px;
    border-radius: 50%;
    background:
        radial-gradient(closest-side, var(--surface) 80%, transparent 81%),
        conic-gradient(var(--ring) calc(var(--pct) * 1%), var(--surface-2) 0);
}

.is-fail .grade-ring { --ring: var(--bad); }

.grade-value {
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.grade-label {
    color: var(--muted);
    font-size: .85rem;
    font-weight: 600;
}

.result-score {
    font-weight: 700;
}

.trend {
    display: block;
    font-size: .85rem;
    font-weight: 600;
}

.trend.is-up { color: var(--good); }
.trend.is-down { color: var(--bad); }

.result-summary {
    max-width: 44ch;
    margin: 0;
    color: var(--muted);
}

.tips h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.05rem;
    color: var(--partial);
}

.tips ul {
    margin: 0;
    padding-left: 20px;
}

.tips li + li { margin-top: 6px; }

.review {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
    border-left: 5px solid var(--bad);
}

.review.is-correct { border-left-color: var(--good); }
.review.is-partial { border-left-color: var(--partial); }

.review .question-text { margin: 0; font-size: 1.02rem; }

.review-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.verdict {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px 3px 6px;
    border-radius: 999px;
    background: var(--bad-soft);
    color: var(--bad);
    font-size: .85rem;
    font-weight: 700;
}

.is-correct .verdict { background: var(--good-soft); color: var(--good); }
.is-partial .verdict { background: var(--partial-soft); color: var(--partial); }
.verdict .icon { width: 18px; height: 18px; }

.options-review .option {
    min-height: 48px;
    cursor: default;
}

.options-review .option.is-correct {
    border-color: var(--good);
    background: var(--good-soft);
}

.options-review .option.is-correct .option-letter { background: var(--good); color: #fff; }

.options-review .option.is-wrong {
    border-color: var(--bad);
    background: var(--bad-soft);
}

.options-review .option.is-wrong .option-letter { background: var(--bad); color: #fff; }

.option-tag {
    flex: none;
    font-size: .75rem;
    font-weight: 700;
    color: var(--muted);
}

.answer-block {
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.answer-block p { margin: 0; overflow-wrap: anywhere; }
.answer-block.is-empty { color: var(--muted); font-style: italic; }
.answer-block.is-model { background: var(--good-soft); }

.answer-label {
    display: block;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.feedback {
    display: flex;
    gap: 10px;
    padding: 12px;
    border-radius: var(--radius-sm);
    background: var(--primary-soft);
}

.feedback .icon { color: var(--primary); margin-top: 2px; }
.feedback p { margin: 0; }

.review-foot {
    margin: 0;
    color: var(--muted);
    font-size: .8rem;
}

/* Meer uitleg */

.tutor {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tutor-toggle { align-self: flex-start; }
.tutor-toggle[aria-expanded="true"] { background: var(--surface-2); color: var(--text); }

.tutor-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.tutor-log {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tutor-msg {
    max-width: 88%;
    padding: 9px 13px;
    border-radius: 16px;
    line-height: 1.45;
}

.tutor-msg p {
    margin: 0;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.tutor-msg.is-bot {
    align-self: flex-start;
    border-bottom-left-radius: 6px;
    background: var(--surface);
}

.tutor-msg.is-user {
    align-self: flex-end;
    border-bottom-right-radius: 6px;
    background: var(--primary);
    color: var(--on-primary);
}

.tutor-msg.is-typing p {
    display: flex;
    gap: 5px;
    padding: 6px 2px;
}

.typing-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--muted);
    animation: typing 1.2s infinite ease-in-out;
}

.typing-dot:nth-child(2) { animation-delay: .15s; }
.typing-dot:nth-child(3) { animation-delay: .3s; }

@keyframes typing { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

.tutor-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tutor-chip {
    min-height: 36px;
    padding: 6px 12px;
    border: 1.5px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--primary);
    font: inherit;
    font-size: .88rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.tutor-chip:hover { border-color: var(--primary); }
.tutor-chip:disabled { opacity: .5; cursor: default; }

.tutor-form {
    display: flex;
    gap: 8px;
}

.tutor-form input { flex: 1; min-width: 0; }

.tutor-send {
    flex: none;
    width: 48px;
    padding: 0;
}

.tutor-status {
    margin: 0;
    color: var(--bad);
    font-size: .88rem;
    font-weight: 500;
}

.tutor-status:empty { display: none; }

.tutor-note {
    margin: 0;
    color: var(--muted);
    font-size: .78rem;
}

/* ---------- Profile ---------- */

.stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px;
    text-align: center;
}

.stat strong { font-size: 1.5rem; line-height: 1.2; }
.stat span { color: var(--muted); font-size: .8rem; }

.danger-zone summary {
    color: var(--bad);
    font-weight: 700;
    cursor: pointer;
}

.danger-zone .form { margin-top: 12px; }

/* ---------- Loading overlay ---------- */

.overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 16px;
    padding: 24px;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    text-align: center;
    font-weight: 700;
}

.spinner {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 4px solid var(--primary-soft);
    border-top-color: var(--primary);
    animation: spin 1s linear infinite;
}

/* ---------- Toets aanpassen ---------- */

.notice {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: var(--primary-soft);
    color: var(--text);
    font-size: .92rem;
}

.notice .icon { color: var(--primary); margin-top: 2px; }

/* ---------- Vrienden ---------- */

.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.page-head h1 { margin: 0; }
.page-head .btn-sm,
.person-actions .btn-sm { min-height: 36px; padding: 4px 12px; font-size: .88rem; }

.avatar-md { width: 44px; height: 44px; font-size: 1.15rem; }

.people .person,
.person {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 8px 16px;
}

.person-main {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.person-text { min-width: 0; }
.person-text strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-text small { display: block; }

.person-actions {
    display: flex;
    flex: none;
    align-items: center;
    gap: 6px;
}

.person-state {
    color: var(--muted);
    font-size: .85rem;
    font-weight: 600;
}

.add-friend,
.respond-friend {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    touch-action: manipulation;
}

.add-friend .icon,
.respond-friend .icon { width: 22px; height: 22px; stroke-width: 2.6; }

.add-friend,
.respond-friend.is-accept { background: var(--good); color: var(--on-primary); }
.add-friend:hover,
.respond-friend.is-accept:hover { background: color-mix(in srgb, var(--good) 85%, #000); }
.respond-friend.is-decline { background: var(--surface-2); color: var(--muted); }

.person-chevron { display: grid; place-items: center; width: 32px; height: 44px; color: var(--muted); }

.people-inline { margin: 12px -16px -16px; border-top: 1px solid var(--border); }

.search-row {
    display: flex;
    gap: 8px;
}

.search-row input { flex: 1; min-width: 0; }

.search-empty { margin: 12px 0 0; color: var(--muted); }

.section-sub { margin: -6px 0 10px; }

.count-badge,
.nav-badge {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--bad);
    color: var(--on-primary);
    font-size: .72rem;
    font-weight: 800;
    line-height: 1;
    vertical-align: middle;
}

.topnav-friends .nav-badge { margin-left: 6px; }

.tabbar-4 { grid-template-columns: repeat(4, 1fr); }
.tabbar-icon { position: relative; display: inline-flex; }
.tabbar-icon .nav-badge { position: absolute; top: -6px; right: -12px; box-shadow: 0 0 0 2px var(--surface); }

.friend-quiz-grade {
    display: flex;
    flex: none;
    align-items: center;
    gap: 6px;
}

.friend-quiz-cta {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 4px;
    color: var(--primary);
    font-size: .9rem;
    font-weight: 700;
}

.friend-quiz-cta .icon { width: 18px; height: 18px; }

.others-name { color: var(--text); }

.form-title { margin: 0; font-size: 1.35rem; }

.toggles { gap: 0; }

.toggle {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    cursor: pointer;
}

.toggle + .toggle { border-top: 1px solid var(--border); }

.toggle input {
    flex: none;
    width: 22px;
    height: 22px;
    margin: 2px 0 0;
    accent-color: var(--primary);
}

.toggle-text strong { display: block; font-weight: 700; }
.toggle-text small { font-weight: 400; }
.toggle-text small { display: block; }

/* ---------- Badges ---------- */

:root {
    --bronze-ring: #b8692e;
    --bronze-face: #fbeadb;
    --bronze-ink: #7a3f14;
    --silver-ring: #8f99a9;
    --silver-face: #eef1f5;
    --silver-ink: #3e4959;
    --gold-ring: #d79a1c;
    --gold-face: #fff2cf;
    --gold-ink: #7a5000;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bronze-ring: #c9824a;
        --bronze-face: #3a2616;
        --bronze-ink: #f2bd90;
        --silver-ring: #a3adbd;
        --silver-face: #2a2f38;
        --silver-ink: #d8dee8;
        --gold-ring: #e3aa33;
        --gold-face: #3a2d0f;
        --gold-ink: #f7d27a;
    }
}

.medal { flex: none; display: block; }
.medal-sm { width: 32px; height: 32px; }
.medal-md { width: 56px; height: 56px; }
.medal-lg { width: 88px; height: 88px; }

.medal-ring { fill: var(--medal-ring); }
.medal-face { fill: var(--medal-face); }
.medal-shine { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; opacity: .55; }
.medal-icon { stroke: var(--medal-ink); }

.medal.tier-1 { --medal-ring: var(--bronze-ring); --medal-face: var(--bronze-face); --medal-ink: var(--bronze-ink); }
.medal.tier-2 { --medal-ring: var(--silver-ring); --medal-face: var(--silver-face); --medal-ink: var(--silver-ink); }
.medal.tier-3 { --medal-ring: var(--gold-ring); --medal-face: var(--gold-face); --medal-ink: var(--gold-ink); }
.medal.tier-special { --medal-ring: var(--primary); --medal-face: var(--primary-soft); --medal-ink: var(--primary); }
.medal.is-locked { --medal-ring: var(--border); --medal-face: var(--surface-2); --medal-ink: var(--muted); }
.medal.is-locked .medal-shine { display: none; }
.medal.is-locked .medal-icon { opacity: .6; }

@media (prefers-color-scheme: dark) {
    .medal-shine { opacity: .18; }
}

.intro-text { margin: -4px 0 0; }

.badge-privacy {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: -8px 0 0;
}

.badge-list {
    margin: 0;
    padding: 14px 16px;
    list-style: none;
}

.badge-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 0;
}

.badge-row:first-child { padding-top: 0; }
.badge-row:last-child { padding-bottom: 0; }
.badge-row + .badge-row { border-top: 1px solid var(--border); }

.badge-body { flex: 1; min-width: 0; }

.badge-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.badge-row.is-locked .badge-title strong { color: var(--muted); }

.badge-text {
    margin: 2px 0 0;
    font-size: .92rem;
}

.badge-row.is-locked .badge-text { color: var(--muted); }

.tier-pips { display: inline-flex; gap: 4px; }

.tier-pip {
    width: 10px;
    height: 10px;
    border: 2px solid var(--border);
    border-radius: 50%;
}

.tier-pip.tier-1 { border-color: var(--bronze-ring); background: var(--bronze-ring); }
.tier-pip.tier-2 { border-color: var(--silver-ring); background: var(--silver-ring); }
.tier-pip.tier-3 { border-color: var(--gold-ring); background: var(--gold-ring); }

.badge-new {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--good-soft);
    color: var(--good);
    font-size: .75rem;
    font-weight: 800;
}

.badge-progress {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
}

.badge-progress .meta { font-size: .82rem; }

.goal-progress { display: block; width: 100%; height: 8px; }
.goal-progress-track { fill: var(--surface-2); }
.goal-progress-fill { fill: var(--primary); }

.hero .badge-link { margin-top: 12px; }

.badge-link {
    display: flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    text-decoration: none;
}

.badge-link-medals { display: flex; }
.badge-link-medals .medal + .medal { margin-left: -8px; }
.badge-link-text { flex: 1; min-width: 0; }
.badge-link-text strong,
.badge-link-text small { display: block; }
.badge-link > .icon { color: var(--muted); }

.new-badges {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-color: var(--gold-ring);
}

.new-badges .card-heading { margin: 0; }

.new-badge-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.new-badge-list li {
    display: flex;
    align-items: center;
    gap: 12px;
}

.new-badge-list strong,
.new-badge-list small { display: block; }

.badge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 14px 8px;
    margin: 0;
    padding: 16px;
    list-style: none;
}

.badge-grid li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.25;
}

.tutor-badge {
    align-self: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--good-soft);
    font-size: .88rem;
    font-weight: 700;
}

.tutor-badge a { color: var(--good); text-decoration: none; }

/* ---------- Melden en blokkeren ---------- */

.person-more {
    display: grid;
    place-items: center;
    width: 36px;
    height: 44px;
    color: var(--muted);
}

.review-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 12px;
}

.report-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--muted);
    font-weight: 600;
    text-decoration: none;
}

.report-link .icon { width: 14px; height: 14px; }
.report-link:hover { color: var(--primary); }

.report-subject {
    margin: 0;
    padding: 10px 14px;
    border-left: 4px solid var(--border);
    border-radius: 4px;
    background: var(--surface-2);
    color: var(--muted);
    overflow-wrap: anywhere;
}

.report-reasons { gap: 0; }
.report-reasons legend { margin-bottom: 4px; }
.report-reasons .toggle { padding: 10px 0; }

.help-card { border-color: var(--primary-soft); }
.help-card p { margin: 0 0 8px; }

.help-lines {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding-left: 18px;
}

/* ---------- Hulp en informatie ---------- */

.photo-tips {
    margin: 4px 0 12px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.photo-tips summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    color: var(--primary);
    font-weight: 700;
    cursor: pointer;
}

.photo-tips summary .icon { width: 18px; height: 18px; }

.photo-tips ul {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0 14px 12px 32px;
    font-size: .92rem;
}

.page-intro { display: flex; flex-direction: column; gap: 8px; }
.page-intro h1 { margin: 0; }
.page-intro p { margin: 0; }

.faq-list { padding: 0 16px; }

.faq + .faq { border-top: 1px solid var(--border); }

.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    padding: 12px 0;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
    content: "+";
    flex: none;
    color: var(--primary);
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1;
}

.faq[open] summary::after { content: "−"; }

.faq-answer { padding: 0 0 14px; }
.faq-answer p { margin: 0 0 8px; }
.faq-answer p:last-child { margin-bottom: 0; }

.info-card p:last-child { margin-bottom: 0; }

.info-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding-left: 18px;
}

.site-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    color: var(--muted);
    font-size: .85rem;
}

.site-footer a { color: var(--muted); }

.forgot-link {
    align-self: center;
    color: var(--muted);
    font-size: .9rem;
    font-weight: 600;
}

/* ---------- Privacyverklaring en voorwaarden ---------- */

.legal { display: flex; flex-direction: column; gap: 20px; }
.legal section > h2 { margin: 0 0 8px; font-size: 1.1rem; }
.legal section p { margin: 0 0 10px; }
.legal ul { margin: 0 0 10px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.legal-summary { border-color: var(--primary-soft); }
.legal-summary h2 { margin-top: 0; }
.legal-summary p:last-child { margin-bottom: 0; }

.legal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
}

.legal-table th,
.legal-table td {
    padding: 8px 10px 8px 0;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

.legal-table th { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }

.legal-todo {
    padding: 0 4px;
    border-radius: 4px;
    background: var(--partial-soft);
    color: var(--partial);
    font-weight: 700;
}

.legal .table-wrap { overflow-x: auto; margin: 0 0 10px; }