/* Opifera - ontwerpsysteem
 *
 * Opgebouwd uit tokens: de --namen hieronder. Wil je de huisstijl wijzigen, dan
 * pas je dit blok aan en volgt de rest vanzelf.
 *
 * Indeling van dit bestand:
 *   1. Tokens          kleuren, ruimte, typografie
 *   2. Basis           reset, body, koppen
 *   3. Schil           zijbalk en paginakader
 *   4. Componenten     kaarten, tabellen, knoppen, labels, formulieren
 *   5. Schermen        dossier, agenda, doelen, introductiepagina
 *   6. Grafiek         weekoverzicht op het startscherm
 */

/* === 1. Tokens ==================================================== */

:root {
    /* Vlakken, van achtergrond naar voorgrond */
    --bg: #f4f6f9;
    --surface: #ffffff;
    --surface-alt: #f7f9fb;
    --surface-sunken: #edf1f5;

    --border: #e1e7ee;
    --border-strong: #c8d2dd;

    --text: #0f2233;
    --text-secondary: #40566b;
    --text-muted: #5f7183;

    /* Zijbalk in het diepblauw van het logo. Donker in beide standen: het
       geeft de applicatie een rustig middelpunt en laat de inhoud oplichten. */
    --nav-bg: #102437;
    --nav-text: #a8bed2;
    --nav-text-active: #ffffff;
    --nav-hover: rgba(255, 255, 255, .08);
    --nav-active: rgba(120, 172, 214, .20);

    /* Accent: het diepblauw uit het logo. Alle combinaties zijn doorgerekend
       op contrast; witte tekst hierop haalt 9,1 waar 4,5 de eis is. */
    --accent: #1c4b73;
    --accent-hover: #163c5d;
    --accent-soft: #e7eef5;
    --accent-text: #17456b;

    /* Betekeniskleuren */
    --green: #17724a;
    --green-soft: #e3f3ea;
    --blue: #1a5ca6;
    --blue-soft: #e6effa;
    --amber: #8f5d06;
    --amber-soft: #fdf1da;
    --rose: #a72740;
    --rose-soft: #fbe7ea;

    /* Grafiek. Deze twee zijn gevalideerd op kleurenblindheid en contrast
       tegen de vlakken hierboven - niet zomaar vervangen. */
    --viz-1: #2a78d6;
    --viz-2: #eb6834;
    --viz-3: #1baf7a;
    --viz-grid: #e6eaee;

    /* Ruimte: alles is een veelvoud van 4px */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;

    --radius: 12px;
    --radius-sm: 8px;
    --radius-xs: 6px;

    --shadow-sm: 0 1px 2px rgba(16, 29, 37, .05);
    --shadow: 0 1px 2px rgba(16, 29, 37, .05), 0 6px 16px -6px rgba(16, 29, 37, .10);
    --shadow-lg: 0 2px 4px rgba(16, 29, 37, .05), 0 12px 32px -8px rgba(16, 29, 37, .16);

    /* De letter van de koppen: dezelfde schreefletter als het woordmerk in de
       zijbalk. Daarmee gaat de rest van de site bij het logo horen, zonder een
       extra bestand mee te sturen. Een systeemschreefletter, dus altijd
       aanwezig; wil je hem terug, dan zet je hier system-ui neer en de hele
       site volgt. */
    --font-display: Georgia, "Times New Roman", serif;

    /* Een warme tweede kleur naast het blauw. Spaarzaam gebruikt: het streepje
       boven een sectiekop, de kleine kopjes en de cijfers in het uitstalvak.
       NIET op knoppen, meldingen of statuslabels - die kleuren betekenen iets
       en die betekenis wil je niet verwateren. */
    --warm: #9a5a22;
    --warm-bright: #e0a45f;

    --nav-width: 232px;
    --ease: cubic-bezier(.2, .7, .3, 1);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0b131c;
        --surface: #141e28;
        --surface-alt: #1a2632;
        --surface-sunken: #101a23;

        --border: #253340;
        --border-strong: #37485a;

        --text: #e8eef4;
        --text-secondary: #a7b8c8;
        --text-muted: #8496a7;

        --nav-bg: #0a1725;
        --nav-text: #8ba3ba;
        --nav-active: rgba(120, 172, 214, .22);

        --accent: #5b9bc9;
        --accent-hover: #74aed6;
        --accent-soft: #16324a;
        --accent-text: #8fbde0;

        --green: #5cc48c;
        --green-soft: #102e22;
        --blue: #79b0e8;
        --blue-soft: #12253a;
        --amber: #e0ab52;
        --amber-soft: #2e2410;
        --rose: #ef8397;
        --rose-soft: #331520;

        --warm: #e0a45f;
        --warm-bright: #e8b878;

        --viz-1: #3987e5;
        --viz-2: #d95926;
        --viz-3: #199e70;
        --viz-grid: #22303a;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
        --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 16px -6px rgba(0, 0, 0, .5);
        --shadow-lg: 0 2px 4px rgba(0, 0, 0, .4), 0 12px 32px -8px rgba(0, 0, 0, .6);
    }
}

/* === 2. Basis ===================================================== */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: var(--accent-text);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

h1, h2, h3 {
    letter-spacing: -.02em;
    line-height: 1.25;
}

h1 {
    font-size: 25px;
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -.015em;
}

/* Doorstaplink: uit beeld tot iemand er met tab op komt (D-132). Niet
   display:none - dat haalt hem ook bij het toetsenbord weg. */
.doorstap {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--accent);
    color: #fff;
    padding: 10px 16px;
    border-radius: 0 0 8px 0;
    text-decoration: none;
    font-size: 14px;
}

.doorstap:focus {
    left: 0;
}

/* Het doel van de doorstaplink krijgt zelf geen omlijning; de focus gaat
   erheen zodat de volgende tab in de inhoud verdergaat. */
main:focus {
    outline: none;
}

/* Zichtbare focus voor wie met het toetsenbord werkt. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* === 3. Schil ===================================================== */

.shell {
    display: flex;
    min-height: 100vh;
}

.nav {
    width: var(--nav-width);
    flex: 0 0 var(--nav-width);
    background: var(--nav-bg);
    color: var(--nav-text);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    padding: var(--sp-5) var(--sp-3);

    /* Meeschuiven als het menu niet past. Zonder dit vielen de onderste items
       van het scherm: `height: 100vh` knipt af en er kwam geen scrollbalk. Dat
       merk je niet bij het bouwen op een groot scherm, en wel bij de eerste
       gebruiker met een 13-inch laptop. Het menu groeide van 17 naar 22 items;
       daar ging het overheen. */
    overflow-y: auto;

    /* Een dunne, meelopende scrollbalk; de standaard grijze vloekt op een
       donkere zijbalk. */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .25) transparent;
}


/* Het woordmerk volgt het logo: een schreefletter met ruime letterafstand,
   in hoofdletters. Bewust een systeemschreefletter en geen webfont: dat scheelt
   een externe bron en een laadmoment. */
.wordmark {
    font-family: Georgia, "Times New Roman", serif;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-weight: 600;
}

.nav__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 var(--sp-2) var(--sp-5);
    color: #fff;
    text-decoration: none;
    font-size: 15px;
}

/* Licht vlak achter het beeldmerk: het logo is donkerblauw en zou anders
   wegvallen tegen de donkere zijbalk. */
.nav__mark {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
    flex: 0 0 32px;
}

.nav__mark img {
    display: block;
    width: 24px;
    height: 24px;
}

.brand__logo {
    display: block;
    width: 30px;
    height: 30px;
}

.nav__section {
    padding: var(--sp-4) var(--sp-2) var(--sp-2);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .35);
}

.nav__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px var(--sp-3);
    border-radius: var(--radius-sm);
    color: var(--nav-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background .15s var(--ease), color .15s var(--ease);
}

.nav__link:hover {
    background: var(--nav-hover);
    color: #fff;
}

.nav__link.is-active {
    background: var(--nav-active);
    color: var(--nav-text-active);
    font-weight: 600;
}

.nav__link svg {
    flex: 0 0 18px;
    opacity: .85;
}

.nav__foot {
    margin-top: auto;
    padding-top: var(--sp-4);
    border-top: 1px solid rgba(255, 255, 255, .08);
}

/* Op een laag scherm telt elke regel. Deze blokken staan bewust NA de gewone
   regels van .nav__link en .nav__foot: bij gelijke specificiteit wint wat er
   het laatst staat, en andersom deed de media query niets. */
@media (max-height: 820px) {
    .nav {
        padding-top: var(--sp-3);
        padding-bottom: var(--sp-3);
    }

    .nav__link {
        padding-top: 7px;
        padding-bottom: 7px;
    }

    .nav__section {
        margin-top: var(--sp-3);
    }
}

.nav__user {
    display: block;
    padding: 0 var(--sp-3) var(--sp-1);
    font-size: 13px;
    color: #fff;
    font-weight: 550;
}

.nav__role {
    display: block;
    padding: 0 var(--sp-3) var(--sp-2);
    font-size: 11.5px;
    color: rgba(255, 255, 255, .45);
}

.nav__logout {
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    padding: 8px var(--sp-3);
    border-radius: var(--radius-sm);
    color: var(--nav-text);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.nav__logout:hover {
    background: var(--nav-hover);
    color: #fff;
}

.content {
    flex: 1 1 auto;
    min-width: 0;
}

main {
    max-width: 1120px;
    margin: 0 auto;
    padding: var(--sp-8) var(--sp-6) 72px;
}

/* Zonder zijbalk (uitgelogd) staat de inhoud gewoon gecentreerd. */
.shell--bare main {
    max-width: 940px;
}

.topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.topbar__inner {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 var(--sp-6);
    height: 62px;
    display: flex;
    align-items: center;
    gap: var(--sp-6);
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    text-decoration: none;
    font-size: 16px;
    margin-right: auto;
}

.brand__mark {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: linear-gradient(140deg, #1c4b73 0%, #5b8db0 100%);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 14px;
    font-weight: 700;
}

.topbar__user {
    color: var(--text-muted);
    font-size: 13px;
}

.topbar__form {
    margin: 0;
}

.topbar__link {
    background: none;
    border: none;
    padding: 7px 12px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    cursor: pointer;
    border-radius: var(--radius-xs);
}

.topbar__link:hover {
    background: var(--surface-alt);
    color: var(--text);
}

/* Smal scherm: de zijbalk wordt een strook bovenaan. */
@media (max-width: 900px) {
    .shell {
        flex-direction: column;
    }

    .nav {
        width: 100%;
        flex: none;
        height: auto;
        position: static;
        flex-direction: row;
        align-items: center;
        gap: var(--sp-1);
        padding: var(--sp-2) var(--sp-3);
        overflow-x: auto;
    }

    .nav__brand,
    .nav__section,
    .nav__role {
        display: none;
    }

    .nav__foot {
        margin: 0 0 0 auto;
        padding: 0;
        border: none;
        display: flex;
        align-items: center;
    }

    .nav__user {
        padding: 0 var(--sp-2);
        white-space: nowrap;
    }

    .nav__link {
        white-space: nowrap;
    }

    main {
        padding: var(--sp-5) var(--sp-4) 56px;
    }
}

/* === 4. Componenten =============================================== */

.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-5);
    margin-bottom: var(--sp-5);
    flex-wrap: wrap;
}

.page-head p {
    margin: var(--sp-1) 0 0;
    color: var(--text-muted);
    font-size: 14px;
}

.backlink {
    display: inline-block;
    margin-bottom: var(--sp-3);
    color: var(--text-muted);
    text-decoration: none;
    font-size: 13.5px;
}

.backlink:hover {
    color: var(--text);
}

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

.card__head {
    padding: var(--sp-5);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
}

.card__title {
    font-family: var(--font-display);
    font-size: 16.5px;
    font-weight: 600;
    margin: 0;
}

.card__body {
    padding: var(--sp-5);
}

/* Rechts in de kop: een stand, geen titel. Bijvoorbeeld "3 van 5 klaar". */
.card__meta {
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* --- Tabel --- */

table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

thead th {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
    padding: 11px var(--sp-5);
    background: var(--surface-alt);
    border-bottom: 1px solid var(--border);
}

tbody td {
    padding: 15px var(--sp-5);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

tbody tr:last-child td {
    border-bottom: none;
}

tbody tr {
    transition: background .12s var(--ease);
}

tbody tr:hover {
    background: var(--surface-alt);
}

td.num {
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

.name-link {
    font-weight: 550;
    color: var(--text);
    text-decoration: none;
}

.name-link:hover {
    color: var(--accent-text);
    text-decoration: underline;
}

/* --- Knoppen --- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 15px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-size: 13.5px;
    font-weight: 550;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s var(--ease), transform .1s var(--ease);
}

.btn:hover {
    background: var(--accent-hover);
}

.btn:active {
    transform: translateY(1px);
}

.btn--ghost {
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--text-secondary);
}

.btn--ghost:hover {
    background: var(--surface-alt);
    color: var(--text);
}

.btn--small {
    padding: 5px 11px;
    font-size: 12.5px;
}

.rowactions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.rowactions form {
    margin: 0;
}

/* Een menu zonder JavaScript. <details> klapt zelf open; wij tekenen alleen
   de knop en het paneel. Nog een keer klikken sluit hem. Buiten klikken sluit
   hem niet - dat kan niet zonder script, en dat is de prijs van U-01. */
.menu {
    position: relative;
}

.menu__knop {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-xs);
    border: 1px solid transparent;
    color: var(--text-muted);
    cursor: pointer;
    list-style: none;
    font-size: 15px;
    line-height: 1;
    transition: background .12s var(--ease), color .12s var(--ease);
}

.menu__knop::-webkit-details-marker {
    display: none;
}

.menu__knop:hover {
    background: var(--surface-sunken);
    color: var(--text);
}

.menu[open] .menu__knop {
    background: var(--surface-sunken);
    border-color: var(--border);
    color: var(--text);
}

.menu__paneel {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 20;
    min-width: 220px;
    padding: var(--sp-1);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
}

.menu__paneel form {
    margin: 0;
}

/* Een kopje in het menu. Elf regels zonder indeling is ook een lijst waarin
   je zoekt (D-119).

   Met een streepje erboven en in de gewone tekstkleur: als een kopje net zo
   grijs is als de regels eronder, scheidt het niets. */
.menu__kop {
    /* Loopt door tot de rand van het paneel; de negatieve marges halen de
       padding van het paneel eraf. Een balkje over de volle breedte leest als
       een kop, een regel tekst leest als nog een menu-item. */
    margin: var(--sp-2) calc(var(--sp-1) * -1) var(--sp-1);
    padding: 5px 14px;
    background: var(--surface-sunken);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--accent-text);
}

/* Het eerste kopje sluit aan op de bovenkant van het paneel. */
.menu__kop:first-child {
    margin-top: calc(var(--sp-1) * -1);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.menu__item {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: var(--radius-xs);
    background: none;
    font: inherit;
    font-size: 13.5px;
    text-align: left;
    color: var(--text-secondary);
    text-decoration: none;
    cursor: pointer;
}

.menu__item:hover {
    background: var(--surface-alt);
    color: var(--text);
}

/* Voor wie met een schermlezer werkt: wel voorgelezen, niet in beeld. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.daynav {
    display: flex;
    gap: var(--sp-2);
}

/* --- Zoekveld --- */

.search {
    display: flex;
    gap: var(--sp-2);
}

.search input {
    width: 262px;
    padding: 8px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 14px;
}

/* --- Labels --- */

.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
}

.badge--basisverzekering,
.badge--uitgevoerd {
    background: var(--green-soft);
    color: var(--green);
}

.badge--aanvullend,
.badge--gepland {
    background: var(--blue-soft);
    color: var(--blue);
}

.badge--eigen-rekening {
    background: var(--amber-soft);
    color: var(--amber);
}

.badge--particulier,
.badge--niet-verschenen,
.badge--geannuleerd-laat {
    background: var(--rose-soft);
    color: var(--rose);
}

.badge--neutral,
.badge--geannuleerd-tijdig {
    background: var(--surface-alt);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 550;
    color: var(--rose);
}

.chip::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 6px;
}

/* --- Signalen --- */

.signals {
    list-style: none;
    margin: var(--sp-3) 0 0;
    padding: 0;
    display: grid;
    gap: var(--sp-1);
}

.signal {
    padding: 7px 12px;
    border-left: 3px solid var(--border-strong);
    border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
    background: var(--surface-alt);
    color: var(--text-muted);
    font-size: 13.5px;
}

.signal--blocker {
    border-left-color: var(--rose);
    background: var(--rose-soft);
    color: var(--rose);
    font-weight: 500;
}

.signal--warning {
    border-left-color: var(--amber);
    background: var(--amber-soft);
    color: var(--amber);
}

/* --- Meldingsbalk --- */

.notice {
    padding: 12px var(--sp-4);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    margin-bottom: var(--sp-4);
    font-size: 14px;
    box-shadow: var(--shadow-sm);
}

.notice--relationship,
.notice--warning {
    border-color: var(--amber);
    background: var(--amber-soft);
    color: var(--amber);
}

.notice--success {
    border-color: var(--green);
    background: var(--green-soft);
    color: var(--green);
}

.notice--error {
    border-color: var(--rose);
    background: var(--rose-soft);
    color: var(--rose);
}

/* --- Gegevensraster --- */

.datagrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--sp-5);
}

.datagrid dt {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
    margin-bottom: 3px;
}

.datagrid dd {
    margin: 0;
    font-weight: 500;
}

.is-missing,
.datagrid dd.is-missing {
    color: var(--rose);
}

/* --- Voortgangsbalk --- */

.meter {
    height: 7px;
    border-radius: 100px;
    background: var(--surface-sunken);
    overflow: hidden;
    margin-top: var(--sp-2);
}

.meter__fill {
    height: 100%;
    background: var(--blue);
    border-radius: 100px;
    transition: width .4s var(--ease);
}

.meter__fill.is-full {
    background: var(--rose);
}

/* --- Formulieren --- */

.form__row {
    margin-bottom: var(--sp-4);
}

.form__row label {
    display: block;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
    margin-bottom: 5px;
    font-weight: 600;
}

/* Alle invoertypes die we gebruiken staan hier. Ontbreekt er een, dan valt dat
   veld terug op de standaard van de browser en staat het scheef tussen de
   rest - zo ontdekt bij het wachtwoordveld op het inlogscherm.

   Deze opmaak hing eerst aan `.form`. Elk formulier dat ergens tussen de
   inhoud staat - een taak toevoegen, een doel afsluiten - kreeg daardoor de
   kale velden van de browser. Nu is dit de basis voor elk veld, waar het ook
   staat, en voegt `.form` alleen de volle breedte toe (D-112). */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
select,
textarea {
    padding: 9px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 14px;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}

/* In een formulier vullen velden de kolom; los tussen de inhoud niet, want dan
   wordt een datumveld zo breed als de pagina. */
.form input[type="text"],
.form input[type="password"],
.form input[type="email"],
.form input[type="tel"],
.form input[type="url"],
.form input[type="search"],
.form input[type="number"],
.form input[type="date"],
.form input[type="time"],
.form input[type="datetime-local"],
.form select,
.form textarea {
    width: 100%;
}

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

/* Een keuzelijst met het pijltje van de browser verraadt meteen dat er weinig
   aandacht aan besteed is: het is grijs, het staat overal net iets anders en
   in donkere modus klopt het niet. Wij tekenen er zelf een, als achtergrond,
   en houden ruimte vrij zodat lange tekst er niet onder loopt. */
select {
    appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%235f7183' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

@media (prefers-color-scheme: dark) {
    select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%238496a7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
    }
}

/* Meerdere keuzes tegelijk: daar hoort geen pijltje bij. */
select[multiple] {
    appearance: auto;
    background-image: none;
    padding-right: 12px;
}

/* Het kalendericoon van de browser is in donkere modus zwart op donker en dan
   onvindbaar. Omkeren maakt er wit van. */
@media (prefers-color-scheme: dark) {
    input[type="date"]::-webkit-calendar-picker-indicator,
    input[type="time"]::-webkit-calendar-picker-indicator,
    input[type="datetime-local"]::-webkit-calendar-picker-indicator {
        filter: invert(1) opacity(.65);
    }
}

/* Een tekstvak dat je kunt uitrekken, maar niet in de breedte: dat breekt de
   kolom waar het in staat. */
.form textarea {
    resize: vertical;
    min-height: 90px;
    line-height: 1.6;
}

/* Placeholdertekst hoort duidelijk lichter te zijn dan ingevulde tekst.
   Anders lijkt een leeg veld ingevuld. */
::placeholder {
    color: var(--text-muted);
    opacity: .75;
}

.form__help {
    margin: 5px 0 0;
    font-size: 12.5px;
    color: var(--text-muted);
}

.form__error {
    margin: 5px 0 0;
    font-size: 13px;
    color: var(--rose);
    font-weight: 500;
}

.form__actions {
    display: flex;
    gap: var(--sp-2);
    margin-top: var(--sp-6);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--border);
}

.form__row--check {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.form__row--check label {
    margin: 0;
    text-transform: none;
    letter-spacing: 0;
    font-size: 14px;
    color: var(--text);
    font-weight: 400;
}

.form__row--check input {
    width: auto;
}

.fieldset {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-4) var(--sp-5) var(--sp-1);
    margin: 0 0 var(--sp-5);
}

.fieldset legend {
    padding: 0 var(--sp-2);
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
}

/* Een leeg scherm is een kans, geen mededeling. "Geen resultaten" laat iemand
   achter met de vraag of er iets stuk is; een zin die vertelt wat hij nu kan
   doen, niet. Vandaar de tweede regel. */
.empty {
    padding: 44px var(--sp-5);
    text-align: center;
    color: var(--text-secondary);
    font-size: 14.5px;
}

.empty__hint {
    display: block;
    max-width: 420px;
    margin: 6px auto 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-muted);
}

/* === 5. Schermen ================================================== */

/* --- Kerncijfers --- */

.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
}

.tile {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-4) var(--sp-5);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    display: block;
    transition: box-shadow .18s var(--ease), transform .18s var(--ease);
}

a.tile:hover {
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}

.tile__label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
    font-weight: 600;
}

.tile__value {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.15;
    margin-top: var(--sp-2);
    font-variant-numeric: tabular-nums;
}

.tile__note {
    font-size: 12.5px;
    color: var(--text-muted);
    margin-top: 2px;
}

.tile--alert .tile__value {
    color: var(--rose);
}

.tile--good .tile__value {
    color: var(--green);
}

/* --- Actielijst --- */

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

.action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: 13px var(--sp-5);
    border-bottom: 1px solid var(--border);
}

.action:last-child {
    border-bottom: none;
}

.action__who {
    font-weight: 550;
    color: var(--text);
    text-decoration: none;
}

.action__who:hover {
    color: var(--accent-text);
}

.action__what {
    font-size: 13.5px;
    color: var(--text-muted);
    margin: 2px 0 0;
}

.action__mark {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 8px;
    margin-right: var(--sp-3);
    background: var(--amber);
}

.action__mark--blocker {
    background: var(--rose);
}

.action__row {
    display: flex;
    align-items: center;
    min-width: 0;
}

.grid-2 {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: var(--sp-4);
    align-items: start;
}

@media (max-width: 940px) {
    .grid-2 {
        grid-template-columns: 1fr;
    }
}

/* --- Episodes --- */

.episodes {
    display: grid;
    gap: var(--sp-4);
    margin-top: var(--sp-4);
}

.episode {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: var(--sp-4) var(--sp-5);
}

.episode.is-closed {
    background: var(--surface-alt);
    box-shadow: none;
}

.episode__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
}

.episode__title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.episode__meta {
    margin: 3px 0 0;
    color: var(--text-muted);
    font-size: 13px;
}

.episode__payer {
    text-align: right;
}

.episode__payer-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
    margin-bottom: var(--sp-1);
}

/* Lijst met aanvinkbare rollen. Django zet er een ul omheen; die strippen we. */
.checklist ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.checklist li {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.checklist label {
    display: inline;
    margin: 0;
    text-transform: none;
    letter-spacing: 0;
    font-size: 14px;
    font-weight: 400;
    color: var(--text);
}

.checklist input {
    width: auto;
}

/* --- Rollenoverzicht --- */

.tick {
    font-size: 14px;
    line-height: 1;
}

.tick--yes {
    color: var(--green);
    font-weight: 700;
}

.tick--no {
    color: var(--border-strong);
}

/* --- Weekagenda --- */

.weekfilter {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
    font-size: 13.5px;
}

.weekfilter label {
    color: var(--text-muted);
}

.weekfilter select {
    padding: 6px 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 13.5px;
}

.week {
    display: flex;
    padding: var(--sp-4) var(--sp-4) var(--sp-5);
    gap: var(--sp-2);
}

/* Vaste hoogte voor het hele raster; de blokken staan er in procenten in. */
.week__hours {
    position: relative;
    width: 46px;
    flex: 0 0 46px;
    height: 620px;
    margin-top: 34px;
}

.week__hour {
    position: absolute;
    right: 6px;
    transform: translateY(-50%);
    font-size: 11px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.week__days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
}

.week__day {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.week__day.is-today .week__daylabel {
    background: var(--accent-soft);
    color: var(--accent-text);
    font-weight: 700;
}

.week__daylabel {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 5px;
    padding: 6px 4px;
    border-radius: var(--radius-xs);
    text-decoration: none;
    color: var(--text-muted);
    font-size: 12px;
    margin-bottom: var(--sp-2);
}

.week__daylabel:hover {
    background: var(--surface-alt);
    color: var(--text);
}

.week__dayname {
    text-transform: capitalize;
}

.week__daynum {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.week__grid {
    position: relative;
    height: 620px;
    background: var(--surface-alt);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.week__line {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px solid var(--border);
}

.week__block {
    position: absolute;
    padding: 3px 5px;
    border-radius: 5px;
    overflow: hidden;
    text-decoration: none;
    font-size: 11px;
    line-height: 1.3;
    /* Randje in de kleur van het vlak, zodat aangrenzende blokken los ogen. */
    border: 1px solid var(--surface-alt);
    transition: filter .12s var(--ease);
}

.week__block:hover {
    filter: brightness(.94);
}

.week__time {
    display: block;
    font-variant-numeric: tabular-nums;
    opacity: .8;
}

.week__who {
    display: block;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.week__block--gepland,
.week__swatch--gepland {
    background: var(--blue-soft);
    color: var(--blue);
}

.week__block--uitgevoerd,
.week__swatch--uitgevoerd {
    background: var(--green-soft);
    color: var(--green);
}

.week__block--niet-verschenen,
.week__block--geannuleerd-laat,
.week__swatch--verzuim {
    background: var(--rose-soft);
    color: var(--rose);
}

.week__block--geannuleerd-tijdig,
.week__swatch--geannuleerd {
    background: var(--surface-sunken);
    color: var(--text-muted);
    text-decoration: line-through;
}

@media (max-width: 900px) {
    /* Zeven kolommen passen niet op een telefoon; laat het raster schuiven. */
    .week {
        overflow-x: auto;
    }

    .week__days {
        min-width: 640px;
    }
}

/* --- Toegangslog --- */

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

.loglist li {
    display: flex;
    gap: var(--sp-4);
    padding: 10px var(--sp-5);
    border-bottom: 1px solid var(--border);
    font-size: 13.5px;
}

.loglist li:last-child {
    border-bottom: none;
}

.loglist__time {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    min-width: 118px;
}

.loglist__who {
    font-weight: 550;
    min-width: 110px;
}

.loglist__what {
    color: var(--text-muted);
}

tbody tr.row--flagged {
    background: var(--amber-soft);
}

/* --- Dossier --- */

.soep {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: var(--accent-soft);
    color: var(--accent-text);
    font-size: 11px;
    font-weight: 700;
    margin-right: var(--sp-1);
}

.soeplist {
    margin: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 10px var(--sp-4);
    align-items: start;
}

.soeplist dt {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

.soeplist dd {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
}

.soeplist--compact dd {
    font-size: 14px;
    color: var(--text-muted);
}

.dossier-entry {
    margin-bottom: var(--sp-4);
}

.section-title {
    font-size: 15px;
    margin: var(--sp-6) 0 var(--sp-3);
}

.addendum {
    max-width: 760px;
    margin-bottom: 10px;
    border-left: 3px solid var(--amber);
}

.signature {
    margin: var(--sp-4) 0 0;
    padding-top: var(--sp-3);
    border-top: 1px solid var(--border);
    font-size: 12.5px;
    color: var(--text-muted);
}

.missing {
    margin: var(--sp-2) 0 0;
    padding-left: 18px;
}

/* --- Behandeldoelen --- */

.goals {
    list-style: none;
    margin: 0 0 var(--sp-4);
    padding: 0;
}

.goal {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--sp-4);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.goal:last-child {
    border-bottom: none;
}

.goal--closed .goal__text {
    color: var(--text-muted);
}

.goal__text {
    margin: 0;
    font-weight: 550;
}

.goal__close {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.goal__close select,
.goal__close input {
    padding: 5px 9px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-xs);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 12.5px;
}

.goalform {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
    flex-wrap: wrap;
    padding-top: var(--sp-3);
    border-top: 1px solid var(--border);
}

.goalform input[type="text"] {
    flex: 1 1 260px;
}

.goalform input[type="date"] {
    width: auto;
}

/* --- Facturen --- */

.invoice-total {
    margin: var(--sp-4) 0 var(--sp-5);
    padding-top: var(--sp-3);
    border-top: 2px solid var(--border-strong);
    text-align: right;
    font-size: 16px;
}

.invoice-total strong {
    font-size: 20px;
    letter-spacing: -.02em;
    margin-left: var(--sp-3);
    font-variant-numeric: tabular-nums;
}

/* --- Brieven --- */

.letter {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 48px 56px;
    max-width: 720px;
    line-height: 1.65;
}

.letter__head {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-6);
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: var(--sp-8);
}

.letter__to {
    margin-bottom: var(--sp-6);
    font-size: 14.5px;
}

.letter__subject {
    font-size: 16px;
    margin: 0 0 var(--sp-5);
}

.letter__body {
    font-size: 14.5px;
    white-space: normal;
}

.letter__foot {
    margin: var(--sp-8) 0 0;
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border);
    font-size: 12.5px;
    color: var(--text-muted);
}

/* Afdrukken: alleen de brief, zonder schil, knoppen of meldingen. */
/* Afdrukken.
 *
 * De factuur en de brief aan de huisarts zijn het enige van Opifera dat de
 * praktijk uit handen geeft. Een client beoordeelt de praktijk mede op dat
 * velletje papier, en een huisarts beoordeelt de fysiotherapeut erop. Dit is
 * dus geen bijzaak (D-96).
 *
 * Alles wat op papier niets doet, gaat eruit: menu, knoppen, meldingen,
 * kaartranden. Wat overblijft is zwarte tekst op wit, met de schreefletter van
 * het merk in de koppen.
 */
@media print {
    @page {
        margin: 18mm 16mm;
    }

    .noprint,
    .nav,
    .topbar,
    .backlink,
    .demobalk,
    .menu,
    .rowactions,
    .btn {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
        font-size: 11pt;
        line-height: 1.5;
    }

    main {
        padding: 0;
        max-width: none;
    }

    /* Kaarten zijn op het scherm een middel om dingen te scheiden. Op papier
       doet een kader met schaduw dat niet; daar doet witruimte het. */
    .card,
    .letter {
        border: none;
        box-shadow: none;
        padding: 0;
        max-width: none;
        background: none;
    }

    .card__head {
        padding: 0 0 6pt;
        border-bottom: 1px solid #ccc;
    }

    .card__body {
        padding: 0;
    }

    thead th {
        background: none;
        border-bottom: 1px solid #000;
        color: #000;
        padding: 4pt 0;
    }

    tbody td {
        padding: 5pt 0;
        border-bottom: 1px solid #ddd;
    }

    /* Een tabelrij hoort niet halverwege over twee bladzijden te vallen. */
    tr,
    .datagrid > div {
        break-inside: avoid;
    }

    a {
        color: #000;
        text-decoration: none;
    }

    /* Alleen op papier: het briefhoofd met de praktijkgegevens en de
       geadresseerde. Op het scherm staat dat allemaal al ergens anders. */
    .printonly {
        display: block !important;
    }
}

/* Het briefhoofd op de afgedrukte factuur: afzender links, geadresseerde
   rechts, zoals op elke Nederlandse brief. */
@media print {
    .printhead {
        display: flex !important;
        justify-content: space-between;
        gap: 20mm;
        margin-bottom: 14mm;
    }

    .printhead p {
        margin: 0;
        font-size: 10pt;
        line-height: 1.45;
    }

    .printhead__naam {
        font-weight: 700;
    }

    .printhead__aan {
        text-align: right;
    }

    .printtitel {
        font-family: var(--font-display);
        font-size: 18pt;
        margin: 0 0 6mm;
    }

    .printmeta {
        display: flex !important;
        gap: 12mm;
        margin: 0 0 8mm;
    }

    .printmeta div {
        display: block;
    }

    .printmeta dt {
        font-size: 8.5pt;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: #555;
        margin: 0;
    }

    .printmeta dd {
        margin: 1mm 0 0;
        font-size: 11pt;
    }
}

/* Buiten het afdrukken bestaat het briefhoofd niet. */
.printonly {
    display: none;
}

/* --- Inloggen --- */

.login {
    position: relative;
    max-width: 400px;
    margin: 64px auto 0;
}

/* Een zacht schijnsel achter de kaart in de accentkleur. Het is bijna niet te
   zien en juist daarom werkt het: de kaart lijkt te zweven in plaats van op
   een vlakke grijze plaat te liggen. */
.login::before {
    content: "";
    position: absolute;
    inset: -60px -40px 40px;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--accent-soft), transparent);
    opacity: .7;
}

.login__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: var(--sp-6);
    font-size: 19px;
    color: var(--text);
}

.login__brand img {
    display: block;
}

.login__card {
    box-shadow: var(--shadow-lg);
}

.login__card .card__body {
    padding: var(--sp-6);
}

.login__title {
    font-family: var(--font-display);
    font-size: 23px;
    font-weight: 600;
    margin: 0 0 var(--sp-1);
}

.login__intro {
    margin: 0 0 var(--sp-5);
    color: var(--text-muted);
    font-size: 14px;
}

.login__button {
    width: 100%;
    justify-content: center;
    margin-top: var(--sp-2);
}

.login__foot {
    margin-top: var(--sp-5);
    text-align: center;
    font-size: 12.5px;
    color: var(--text-muted);
}

/* Wat de client zelf heeft ingevuld, in het dossier. Bewust een eigen vlak met
   een streep ernaast: dit is geen dossiertekst maar een voorstel, en dat moet
   je kunnen zien zonder de toelichting te lezen (D-97). */
.inzending {
    margin-top: var(--sp-5);
    padding: var(--sp-4) var(--sp-5);
    border-left: 3px solid var(--warm);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--surface-alt);
}

.inzending__kop {
    margin: 0 0 var(--sp-3);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--warm);
}

.inzending__voet {
    margin: var(--sp-3) 0 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text-muted);
}

/* Taken bij een client. Een regel per taak met de knop rechts, want dat is de
   enige handeling die er is. Dezelfde vorm als een signaal op het startscherm:
   een streep links, verder rustig. */
.taken {
    list-style: none;
    margin: 0 0 var(--sp-4);
    padding: 0;
    display: grid;
    gap: var(--sp-2);
}

.taak {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: 10px var(--sp-4);
    border-left: 3px solid var(--border-strong);
    border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
    background: var(--surface-alt);
}

/* Over de uiterste datum heen: dan mag hij opvallen. */
.taak--verlopen {
    border-left-color: var(--amber);
}

.taak__wat {
    margin: 0;
    font-size: 14.5px;
    font-weight: 600;
}

.taak__bij {
    margin: 2px 0 0;
    font-size: 12.5px;
    color: var(--text-muted);
}

.taak__actie {
    margin: 0;
    flex: none;
}

/* De beheerpagina (D-118). Per onderwerp een groepje links met een zin erbij,
   zodat je niet hoeft te raden wat er achter een naam zit. */
.beheer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: var(--sp-6);
    align-items: start;
}

.beheer__kop {
    margin: 0 0 var(--sp-3);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--warm);
}

.beheer__lijst {
    display: grid;
    gap: var(--sp-2);
}

.beheerlink {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s var(--ease), transform .15s var(--ease);
}

.beheerlink:hover {
    border-color: var(--border-strong);
    transform: translateY(-1px);
}

/* Het icoon in een zacht vlak, zodat het een aanknopingspunt wordt en niet
   een streepje naast de tekst. */
.beheerlink__icoon {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-xs);
    background: var(--accent-soft);
    color: var(--accent-text);
}

.beheerlink__tekst {
    display: block;
    min-width: 0;
}

.beheerlink__naam {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}

/* Ruimte voor twee regels, ook als de tekst er maar een vult. Zonder dit is
   de ene tegel een regel hoger dan de andere, en dan staat een net raster er
   rommelig bij. De teksten zijn zo gekozen dat ze binnen twee regels blijven. */
.beheerlink__uitleg {
    display: block;
    margin-top: 3px;
    min-height: 3em;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-muted);
}

/* --- De clientpagina --- */

/* Wat een client ziet als hij op een link uit zijn mail klikt. Smal, rustig en
   zonder menu: hij is hier voor een ding en gaat daarna weg. */
.clientpagina {
    max-width: 620px;
    margin: 40px auto 0;
}

/* Het overzicht heeft meer nodig dan een formulier: lijsten met een actie
   ernaast. */
.clientpagina--breed {
    max-width: 720px;
}

.portaallijst {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--sp-3);
}

.portaalregel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-alt);
}

.portaalregel__kop {
    margin: 0;
    font-size: 15.5px;
    font-weight: 600;
}

.portaalregel__bij {
    margin: 3px 0 0;
    font-size: 13px;
    color: var(--text-muted);
}

.portaalregel__acties {
    display: flex;
    gap: var(--sp-2);
    margin: 0;
}

.clientpagina__praktijk {
    margin: 0 0 var(--sp-3);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--warm);
}

.clientpagina__titel {
    font-family: var(--font-display);
    font-size: clamp(24px, 4vw, 32px);
    font-weight: 600;
    letter-spacing: -.02em;
    margin: 0 0 var(--sp-4);
}

.clientpagina__intro {
    margin: 0 0 var(--sp-6);
    font-size: 16px;
    line-height: 1.65;
    color: var(--text-secondary);
}

/* Een schaal van 0 tot 10 als rij knoppen. Op een telefoon moet je erop kunnen
   tikken zonder te mikken; een keuzelijst met elf regels is daar te fijn voor
   en verbergt bovendien de schaal. */
.schaal {
    margin: 0 0 var(--sp-6);
    padding: 0;
    border: none;
}

.schaal legend {
    padding: 0;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.5;
}

.schaal .form__help {
    margin-bottom: var(--sp-3);
}

.schaal__keuzes ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
}

.schaal__keuzes label {
    display: grid;
    place-items: center;
    min-width: 42px;
    padding: 10px 4px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-size: 15px;
    cursor: pointer;
    transition: background .12s var(--ease), border-color .12s var(--ease);
}

.schaal__keuzes label:hover {
    border-color: var(--accent);
}

/* Het bolletje zelf is weg; het vakje eromheen is de knop. */
.schaal__keuzes input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.schaal__keuzes input:checked + span,
.schaal__keuzes label:has(input:checked) {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    font-weight: 600;
}

/* Wie met het toetsenbord werkt moet zien waar hij is; het bolletje is weg. */
.schaal__keuzes label:has(input:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.afspraakregel {
    margin: 0 0 var(--sp-5);
    font-size: 18px;
    line-height: 1.6;
}

.afspraakregel strong {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 600;
}

/* Twee knoppen naast elkaar, groot genoeg om op een telefoon te raken zonder
   te mikken. Dit is het enige wat er op deze pagina te doen valt. */
.afspraakkeuze {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-top: var(--sp-5);
}

.afspraakkeuze .btn {
    flex: 1 1 160px;
    justify-content: center;
    padding: 12px 18px;
}

.clientpagina__voet {
    margin: var(--sp-5) 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-muted);
}

/* --- Introductiepagina --- */

/* De kop van de introductiepagina: tekst links, een fragment van het product
   rechts. Onder de 960px staat het onder elkaar; op een telefoon is een kolom
   het enige dat werkt. */
.hero {
    padding: 52px 0 38px;
    display: grid;
    gap: var(--sp-8);
    align-items: center;
}

@media (min-width: 960px) {
    .hero {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
        gap: 48px;
    }
}

.hero__copy {
    max-width: 640px;
}

/* De disciplines als losse woorden. Sneller te zien dan in een zin, en het is
   het eerste dat een logopedist of dietist wil weten: hoor ik hier ook bij? */
.hero__tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin: var(--sp-6) 0 0;
    padding: 0;
}

.hero__tags li {
    padding: 4px 11px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    font-size: 12.5px;
    color: var(--text-secondary);
}

/* Een fragment van het product in plaats van een zin erover. Geen
   schermafbeelding maar dezelfde bouwstenen als de applicatie zelf: dat blijft
   kloppen als de huisstijl verandert, en het weegt niets. */
.peek {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.peek__bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 11px var(--sp-4);
    background: var(--surface-alt);
    border-bottom: 1px solid var(--border);
}

.peek__dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-strong);
}

.peek__title {
    margin: 0 0 0 var(--sp-2);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
}

.peek__body {
    padding: var(--sp-4);
    display: grid;
    gap: 6px;
}

.peek__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: 10px var(--sp-3);
    border-radius: var(--radius-xs);
    background: var(--surface-alt);
    font-size: 13.5px;
    color: var(--text-secondary);
}

/* De regel waar het om draait: hier kantelt de betaler. */
.peek__row--now {
    background: var(--accent-soft);
    color: var(--accent-text);
    font-weight: 600;
}

.peek__pill {
    flex: none;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

.peek__pill--ok {
    border-color: transparent;
    background: var(--green-soft);
    color: var(--green);
}

.peek__note {
    margin: var(--sp-3) 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-muted);
}

.hero__eyebrow {
    margin: 0 0 10px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--warm);
}

.section {
    max-width: 700px;
    margin: 0 0 var(--sp-8);
    padding-top: var(--sp-6);
    border-top: 1px solid var(--border);
}

.section--tint {
    max-width: none;
    padding: var(--sp-6) var(--sp-6) var(--sp-5);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-alt);
}

.section__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 21px;
    margin: 0 0 var(--sp-4);
}

.section__title::before {
    content: "";
    display: block;
    width: 28px;
    height: 3px;
    border-radius: 2px;
    margin-bottom: var(--sp-3);
    background: var(--warm);
}

.section__lead {
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin: 0 0 var(--sp-4);
    max-width: 660px;
}

.section__lead strong {
    color: var(--text);
}

.hero__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(30px, 5vw, 46px);
    line-height: 1.14;
    letter-spacing: -.02em;
    margin: 0 0 var(--sp-4);
}

.hero__text {
    font-size: 17px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
}

.hero__actions {
    display: flex;
    gap: 10px;
    margin-top: var(--sp-6);
    flex-wrap: wrap;
}

.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--sp-4);
    margin-top: var(--sp-3);
}

.feature {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: var(--sp-5);
}

.feature h2 {
    font-size: 15.5px;
    margin: 0 0 var(--sp-2);
}

.feature p {
    margin: 0;
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
}

/* Het uitstalvak op de introductiepagina.
 *
 * Een donker vlak in het blauw van de zijbalk, midden op een lichte pagina. Dat
 * is het enige element dat om aandacht vraagt, en daarom werkt het: wie de
 * pagina langsscrollt, stopt hier.
 *
 * De tegels zijn <details>: aanklikbaar zonder een regel JavaScript. Dicht is
 * het een naam met drie woorden eronder, open zijn het vier korte regels. Zo
 * past negentien schermen aan functionaliteit op een halve pagina, en bepaalt
 * de lezer zelf waar hij meer van wil weten (U-01 blijft dus staan).
 */
.showcase {
    margin: var(--sp-8) 0;
    padding: var(--sp-8) var(--sp-6);
    border-radius: var(--radius);
    background: var(--nav-bg);
    color: #fff;
}

.showcase__eyebrow {
    margin: 0 0 var(--sp-2);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--warm-bright);
}

.showcase__title {
    margin: 0 0 var(--sp-3);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(22px, 3vw, 29px);
    letter-spacing: -.015em;
    color: #fff;
}

.showcase__lead {
    margin: 0;
    max-width: 560px;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .62);
}

/* Schermafbeeldingen, in het donkere vlak. Dat is met opzet: de applicatie
   staat op het scherm van de gebruiker in donkere modus, en die platen komen
   op een donkere ondergrond tot hun recht in plaats van als losse zwarte
   blokken op een lichte pagina te zweven. */
.shots {
    margin-top: var(--sp-6);
    display: grid;
    gap: var(--sp-4);
}

.shots figure {
    margin: 0;
}

.shots img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, .14);
    /* Een diepe schaduw tilt de plaat van het vlak; zonder dit lopen het
       donkere vlak en de donkere schermafbeelding in elkaar over. */
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7);
}

.shots figcaption {
    margin-top: var(--sp-2);
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .55);
}

.shots__pair {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: var(--sp-4);
}

/* De twee kleine platen hebben verschillende verhoudingen. Op dezelfde hoogte
   afsnijden vanaf de bovenkant staat rustiger dan twee ongelijke blokken. */
.shots__pair img {
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top left;
}

/* Drie cijfers die iemand kan natellen. Geen "marktleider" of "razendsnel":
   wie software koopt van een onbekende partij heeft iets nodig dat hij zelf
   kan controleren. */
.showcase__stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-6) var(--sp-8);
    margin: var(--sp-6) 0 var(--sp-8);
    padding-top: var(--sp-6);
    border-top: 1px solid rgba(255, 255, 255, .10);
}

.stat__value {
    font-family: var(--font-display);
    font-size: 31px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--warm-bright);
}

.stat__label {
    margin: 6px 0 0;
    font-size: 13px;
    color: rgba(255, 255, 255, .55);
}

.modtiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
    gap: var(--sp-3);
    /* De tegels zijn verschillend hoog zodra er een openstaat; bovenaan
       uitlijnen ziet er dan rustiger uit dan uitrekken. */
    align-items: start;
}

.modtile {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: var(--radius-sm);
    transition: background .15s var(--ease), border-color .15s var(--ease);
}

.modtile:hover {
    background: rgba(255, 255, 255, .09);
    border-color: rgba(255, 255, 255, .20);
}

.modtile[open] {
    background: rgba(255, 255, 255, .09);
    border-color: rgba(120, 172, 214, .45);
}

/* Het driehoekje dat een browser standaard voor een <summary> zet, past niet
   bij de rest; we tekenen zelf een plusje. */
.modtile__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--sp-4);
    cursor: pointer;
    list-style: none;
    font-size: 14.5px;
    font-weight: 600;
}

.modtile__head::-webkit-details-marker {
    display: none;
}

.modtile__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-xs);
    background: rgba(120, 172, 214, .18);
    color: #a8c9e6;
}

.modtile__name {
    flex: 1;
}

.modtile__hint {
    display: block;
    margin-top: 1px;
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, .48);
}

/* Een plusje dat bij het openen een minnetje wordt. Alleen de verticale streep
   draait weg; dat leest als "dit klapt open" zonder animatiedrukte. */
.modtile__plus {
    flex: none;
    position: relative;
    width: 14px;
    height: 14px;
    opacity: .55;
}

.modtile__plus::before,
.modtile__plus::after {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 14px;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transition: transform .18s var(--ease);
}

.modtile__plus::after {
    transform: rotate(90deg);
}

.modtile[open] .modtile__plus::after {
    transform: rotate(0deg);
}

.modtile__list {
    list-style: none;
    margin: 0;
    padding: 0 var(--sp-4) var(--sp-4) 52px;
    display: grid;
    gap: 6px;
}

.modtile__list li {
    position: relative;
    padding-left: 14px;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .62);
}

.modtile__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #78acd6;
    opacity: .7;
}

/* Wat er nog niet is, staat in hetzelfde rijtje als wat er wel is. Anders
   leest iemand alleen de mooie helft. */
.modtile__soon {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    background: rgba(224, 171, 82, .18);
    color: #e6b96b;
}

@media (max-width: 620px) {
    .showcase {
        padding: var(--sp-6) var(--sp-5);
    }
}

/* Vier beloftes, twee bij twee. Elke belofte begint met een vinkje dat we
   zelf tekenen; een lijstje met bolletjes leest als een opsomming, een lijstje
   met vinkjes leest als een garantie. */
.beloftes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: var(--sp-5) var(--sp-6);
}

.belofte {
    position: relative;
    padding-left: 30px;
}

.belofte::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--warm);
    /* Het vinkje zelf, als masker. Zo volgt hij de kleur van het vlak eronder
       en klopt hij in beide standen. */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat,
            linear-gradient(#000, #000);
    -webkit-mask-composite: xor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat,
          linear-gradient(#000, #000);
    mask-composite: exclude;
}

.belofte h3 {
    margin: 0 0 var(--sp-2);
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
}

.belofte p {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-muted);
}

/* Oproep onderaan de introductiepagina: wie tot hier heeft gelezen, is
   geinteresseerd. */
.cta {
    max-width: 700px;
    margin: var(--sp-8) 0 0;
    padding: var(--sp-6);
    border-radius: var(--radius);
    background: var(--accent-soft);
    border: 1px solid var(--border);
}

.cta__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 22px;
    margin: 0 0 var(--sp-3);
    color: var(--accent-text);
}

.cta__text {
    margin: 0 0 var(--sp-5);
    font-size: 15px;
    line-height: 1.65;
    color: var(--text-secondary);
}

/* De demobalk staat op elk scherm van de demo-omgeving. Amber en niet rood:
   er is niets mis, er is alleen iets om te weten. */
.demobalk {
    margin: 0 0 var(--sp-5);
    padding: 10px var(--sp-4);
    border-radius: var(--radius-sm);
    background: var(--amber-soft);
    border: 1px solid rgba(143, 93, 6, .22);
    color: var(--amber);
    font-size: 13px;
    line-height: 1.55;
}

/* Valstrik tegen automatische invullers: onzichtbaar voor mensen, maar wel
   aanwezig in de pagina. display:none zou door sommige programma's worden
   herkend en overgeslagen. */
.honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.disclaimer {
    margin: var(--sp-8) 0 0;
    padding-top: var(--sp-5);
    border-top: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-muted);
    max-width: 700px;
}

/* === 6. Grafiek =================================================== */

.chart {
    padding: var(--sp-2) 0 0;
}

/* Gestapelde staven per dag. De hoogtes komen als procenten uit de view; de
   drukste dag is 100%. */
.weekbars {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    height: 156px;
    border-bottom: 1px solid var(--border-strong);
    padding-bottom: 0;
}

/* Zelfde raster, twaalf maanden in plaats van zeven dagen. */
.weekbars--year {
    grid-template-columns: repeat(12, 1fr);
    gap: 6px;
    height: 180px;
}

.weekbar {
    display: grid;
    /* getal boven, staaf ertussen, dagnaam onder */
    grid-template-rows: auto 1fr auto;
    justify-items: center;
    gap: 5px;
    min-width: 0;
}

.weekbar__value {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

/* column-reverse zet het eerste kind onderaan: het afgehandelde deel staat
   daarmee op de nullijn, precies waar een staaf hoort te beginnen. */
.weekbar__track {
    width: 100%;
    max-width: 34px;
    height: 100%;
    display: flex;
    flex-direction: column-reverse;
    gap: 2px;
    align-self: end;
}

.weekbar__seg {
    width: 100%;
    min-height: 3px;
    border-radius: 0;
    transition: height .4s var(--ease);
}

/* Alleen de bovenste segmentkop is afgerond; de onderkant blijft vlak tegen
   de nullijn liggen. */
.weekbar__seg:last-child {
    border-radius: 4px 4px 0 0;
}

.weekbar__seg--done {
    background: var(--viz-1);
}

.weekbar__seg--open {
    background: var(--viz-2);
}

.weekbar__label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: capitalize;
}

/* De dag van vandaag krijgt zwaardere tekst, geen andere kleur: kleur is in
   deze grafiek al bezet door de twee reeksen. */
.chart__today {
    color: var(--text);
    font-weight: 700;
}

/* --- Verloopgrafiek (klinimetrie) --- */

.chart svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.viz-grid {
    stroke: var(--viz-grid);
    stroke-width: 1;
}

.viz-axis {
    fill: var(--text-muted);
    font-size: 11px;
    font-family: inherit;
}

.viz-line {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.viz-dot {
    /* Een randje in de kleur van het vlak houdt overlappende punten los. */
    stroke: var(--surface);
    stroke-width: 2;
}

.viz-endlabel {
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
}

/* Drie reeksen, in vaste volgorde toegekend. Deze kleuren zijn door de
   validator gehaald op kleurenblindheid en contrast, tegen de vlakken van deze
   app. Het groen haalt in lichte stand net geen 3:1; daarom heeft elke lijn een
   zichtbaar eindlabel en staat er een tabel onder. */
.viz-1 { stroke: var(--viz-1); fill: var(--viz-1); }
.viz-2 { stroke: var(--viz-2); fill: var(--viz-2); }
.viz-3 { stroke: var(--viz-3); fill: var(--viz-3); }

.legend__swatch--1 { background: var(--viz-1); }
.legend__swatch--2 { background: var(--viz-2); }
.legend__swatch--3 { background: var(--viz-3); }

.activity-list {
    margin: 0 0 var(--sp-3);
    padding-left: 20px;
    font-size: 14px;
}

.measureform {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
    flex-wrap: wrap;
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border);
    margin-top: var(--sp-4);
}

.measureform input {
    width: auto;
}

.legend {
    display: flex;
    gap: var(--sp-4);
    margin-top: var(--sp-3);
    flex-wrap: wrap;
}

.legend__item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--text-secondary);
}

.legend__swatch {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex: 0 0 10px;
}

.legend__swatch--done {
    background: var(--viz-1);
}

.legend__swatch--open {
    background: var(--viz-2);
}

.chart-table {
    margin-top: var(--sp-3);
    font-size: 13px;
    color: var(--text-muted);
}

.chart-table summary {
    cursor: pointer;
    color: var(--text-secondary);
}

.chart-table table {
    margin-top: var(--sp-2);
}

.chart-table td,
.chart-table th {
    padding: 6px 10px;
    font-size: 12.5px;
}

/* ---------------------------------------------------------------------------
   Handleiding
   Lopende tekst vraagt om andere maten dan een scherm met tabellen. Een
   regellengte van ongeveer 70 tekens leest het prettigst; breder en het oog
   verliest de volgende regel.
   --------------------------------------------------------------------------- */

.manual {
    max-width: 68ch;
}

.manual h2 {
    font-size: 20px;
    margin: 36px 0 10px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.manual h2:first-of-type {
    border-top: none;
    padding-top: 0;
    margin-top: 8px;
}

.manual h3 {
    font-size: 15.5px;
    margin: 24px 0 6px;
}

.manual p,
.manual li {
    line-height: 1.65;
    color: var(--text-secondary);
}

.manual li {
    margin-bottom: 6px;
}

.manual ul,
.manual ol {
    padding-left: 20px;
    margin: 10px 0 14px;
}

.manual strong {
    color: var(--text);
}

.manual table {
    margin: 14px 0 20px;
}

/* Een kader om iets dat je niet over het hoofd mag zien. */
.manual__note {
    border-left: 3px solid var(--accent, #1c4b73);
    background: var(--surface-alt);
    padding: 12px 16px;
    margin: 16px 0;
    border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
}

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

/* Inhoudsopgave: twee kolommen zodat een lange lijst niet de halve pagina vult. */
.manual__toc {
    columns: 2;
    column-gap: 32px;
    padding-left: 20px;
}

@media (max-width: 700px) {
    .manual__toc {
        columns: 1;
    }
}