/*
 * ONT CodeLab - stylesheet
 *
 * Handgeschreven, geen buildstap, geen Tailwind, geen externe fonts.
 * Rustig en educatief (FO §8.1): het moet niet voelen als een facturatiepakket.
 * Tablet-first, maar laptop is evengoed goed. Alleen lichte modus.
 *
 * Huisstijl: afgeleid van ont.nl (Organisatie Nederlandse Tandprothetici),
 * herkenbaar maar geen kopie. Blauw is de hoofdkleur, donkerblauw voor koppen
 * en hover, cyaan en aqua alleen als accent, limoen alleen als markering met
 * donkere tekst erop. Lettertypen Roboto (tekst) en Roboto Slab (koppen),
 * zelf gehost uit assets/fonts/ (zie NOTICE.md daar).
 *
 * Alle kleuren komen uit de tokens hieronder. Wie een token aanpast, rekent het
 * contrast opnieuw uit (WCAG 2.x, relatieve luminantie) en werkt het commentaar bij.
 */

/* ------------------------------------------------------------------ lettertypen */

/*
 * Variabele fonts (as wght 100-900), latin-subset. AssetMapper herschrijft de
 * relatieve url() naar het gehashte pad. font-display: swap, zodat de tekst
 * meteen in het systeemlettertype verschijnt en daarna omslaat.
 */
@font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto-P5vfNz3.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Roboto Slab";
    src: url("../fonts/RobotoSlab-m1AiMUI.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    color-scheme: light;

    /*
     * Kleuren, met berekend contrast (WCAG AA: 4,5:1 voor tekst, 3:1 voor
     * niet-tekst zoals randen van bedieningselementen en de focusring).
     *
     * Palet van ont.nl en wat we ermee doen:
     *   #0074b6 blauw        -> --primary (links, knoppen)
     *   #003e93 donkerblauw  -> --primary-dark (h1, hover, huidige stap, focusring)
     *   #22a1d1 cyaan        -> --accent, alleen decoratief (zie onder)
     *   #31a68e aqua         -> --aqua, alleen randen; tekst in --aqua-dark
     *   #d2d91e limoen       -> --lime, alleen als markering met --text erop
     *   #d6e5ed lichtblauw   -> --brand-light (footer, kopbalk, hover knop .secondary)
     *
     *   --text      #1d2a2e op --bg #eef5f9    13,40:1   op --panel #ffffff 14,76:1
     *   --muted     #4f5f66 op --bg #eef5f9     6,03:1   op --panel #ffffff  6,64:1
     *               op --brand-light #d6e5ed    5,15:1   (footer)
     *   --primary   #0074b6 als tekst/link op --panel 5,03:1, op --bg 4,57:1
     *       (NIET op --brand-light #d6e5ed: 3,90:1, en niet op --primary-soft: 4,39:1)
     *   wit op --primary #0074b6                5,03:1   (knop .btn, gekozen chip)
     *   wit op --primary-dark #003e93           9,95:1   (hover .btn, cijfer huidige stap)
     *   --primary-dark als tekst: op --panel 9,95:1, op --bg 9,03:1,
     *       op --brand-light 7,72:1, op --primary-soft #e6f1f8 8,67:1
     *   --text op --primary-soft #e6f1f8       12,86:1   (toelichting, flash-info, hover)
     *   --text op --secondary-bg #e1ecf2       12,29:1   (knop .btn.secondary)
     *   --text op --secondary-bg-hover #d6e5ed 11,45:1
     *   --muted op --secondary-bg #e1ecf2       5,53:1   (nog niet bereikbare stap)
     *   wit op --success #1d6b5b                6,35:1   hover #165548 8,65:1
     *   wit op --warning #a8541a                5,32:1   hover #9a4a12 6,25:1
     *   wit op --danger  #b3261e                6,54:1
     *   --text op flash-achtergronden (#e3f3ef, #fdf3e6, #fbe9e7, #e6f1f8) 12,6-13,5:1
     *   --focus-ring #003e93 op --panel 9,95:1, op --bg 9,03:1, op --primary-soft 8,67:1
     *   --focus-ring #003e93 naast --primary #0074b6 (knop) 1,98:1, maar de ring
     *       ligt met 2px offset op --bg/--panel (9,03:1 / 9,95:1); daar wordt hij gezien.
     *
     *   Accenten die de toets NIET halen en daarom nooit tekst of enige aanduiding zijn:
     *   --accent #22a1d1 op wit 2,96:1, wit erop 2,96:1: alleen een extra streep onder
     *       de huidige stap (die ook een gevulde cirkel, dikke rand en aria-current heeft)
     *       en de kopbalk. --text erop zou 4,98:1 zijn, maar dat gebruiken we niet.
     *   --aqua #31a68e op wit 3,01:1, wit erop 3,01:1 (geen tekst!): alleen
     *       linkerranden van meldingen en de rand van de badge.
     *   --lime #d2d91e met --text erop 9,62:1 (markering titel lopende oefening).
     *
     *   --border #c9dbe5 op wit is 1,42:1: alleen decoratief (paneelranden), nooit
     *   de enige aanduiding van een bedieningselement.
     *   --input-border = --muted #4f5f66 op wit 6,64:1 (rand van invoervelden; 3:1 vereist)
     *
     *   Badges in de oefenflow (tekst op achtergrond, rand in currentColor):
     *   --aqua-dark #1d6b5b op --aqua-soft #e3f3ef             5,54:1  (techniekkosten toegestaan,
     *                                                                    gelijk aan basisrecept)
     *   --text #1d2a2e op --secondary-bg #e1ecf2               12,29:1 (geen aanvullende techniekkosten)
     *   --warning-dark #9a4a12 op --flash-warning-bg #fdf3e6   5,69:1  (aangepaste versie)
     *
     *   Overig:
     *   --text #1d2a2e op --primary-soft #e6f1f8               12,86:1 (blok "Doorgaan met je oefening")
     *   --primary-dark #003e93 op --panel #ffffff                9,95:1 (statuscode foutpagina, balk "Mijn nota")
     *   favicon/beeldmerk: #82d0f5 op #004b83 5,27:1, wit op #004b83 9,00:1
     *   theme-color = --primary-dark #003e93
     *   Print: #000000 op #ffffff                               21,00:1 (alle tekst en badges;
     *       badges hebben in print tekst, icoon en zwarte rand, geen achtergrondkleur)
     */
    --bg: #eef5f9;
    --panel: #ffffff;
    --text: #1d2a2e;
    --muted: #4f5f66;
    --border: #c9dbe5;
    --brand-light: #d6e5ed;

    --primary: #0074b6;
    --primary-dark: #003e93;
    --primary-soft: #e6f1f8;
    --accent: #22a1d1;
    --aqua: #31a68e;
    --aqua-dark: #1d6b5b;
    --aqua-soft: #e3f3ef;
    --lime: #d2d91e;
    --secondary-bg: #e1ecf2;
    --secondary-bg-hover: #d6e5ed;
    --success: #1d6b5b;
    --success-dark: #165548;
    --warning: #a8541a;
    --warning-dark: #9a4a12;
    /* Rood is uitsluitend voor verwijderen: "definitief weg" houdt zo een eigen look. */
    --danger: #b3261e;
    --danger-dark: #8f1e18;

    --flash-success-bg: #e3f3ef;
    --flash-warning-bg: #fdf3e6;
    --flash-danger-bg: #fbe9e7;
    --flash-info-bg: #e6f1f8;

    --focus-ring: #003e93;

    /* Ruimte */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;

    /* Vorm */
    --radius: 10px;
    --radius-sm: 6px;
    --shadow-sm: 0 1px 2px rgba(29, 42, 46, 0.06);
    --shadow-md: 0 8px 24px rgba(29, 42, 46, 0.16);

    /* Touchvlakken: minimaal 44px hoog (tablet). */
    --touch: 44px;

    /*
     * Hoogte van wat sticky boven- en onderaan staat, zodat een anker of een
     * element met focus er niet achter verdwijnt (scroll-padding op html).
     * Ruim genomen: een stap kan op tabletbreedte over twee regels lopen.
     * De waarden worden per breakpoint gezet; 0 waar niets sticky is.
     */
    --sticky-top: 0px;
    --sticky-bottom: 0px;

    --container: 960px;
    --container-wide: 1280px;
    --input-border: #4f5f66;
    --aside-width: 340px;

    --font: "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --font-heading: "Roboto Slab", "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* ------------------------------------------------------------------ basis */

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

html {
    -webkit-text-size-adjust: 100%;
    /* Ankers (#code-12 na een redirect) en focus vallen niet onder de sticky
       stappenbalk of achter de balk "Mijn nota". */
    scroll-padding-top: var(--sticky-top);
    scroll-padding-bottom: var(--sticky-bottom);
}

/* Sprongdoelen van redirects en fragmentvervanging: een beetje lucht boven. */
.code-card,
.note-panel,
.workpiece-editor,
.drawer,
.overview-block {
    scroll-margin-top: var(--space-3);
    scroll-margin-bottom: var(--space-3);
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 1.0625rem;
    line-height: 1.55;
}

/* Koppen in Roboto Slab, zoals op ont.nl; h1 in donkerblauw (9,95:1 op wit, 9,03:1 op --bg). */
h1, h2, h3 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.25;
    margin: 0 0 var(--space-3);
}
h1 { font-size: 1.75rem; color: var(--primary-dark); }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }

p { margin: 0 0 var(--space-3); }

a { color: var(--primary); text-underline-offset: 2px; }
a:hover { color: var(--primary-dark); }

/* Duidelijke focusring, alleen bij toetsenbordnavigatie. */
:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: 4px;
}

.icon { width: 20px; height: 20px; flex-shrink: 0; }

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

@media (min-width: 768px) {
    .container { padding: 0 var(--space-5); }
}

.skip-link {
    position: absolute;
    left: var(--space-4);
    top: -100px;
    z-index: 300;
    background: var(--panel);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
}
.skip-link:focus { top: var(--space-3); }

/* ------------------------------------------------------------------ kop */

/* Witte kop met een lichtblauwe balk eronder en een dun cyaan accent erboven
   (beide decoratief). */
.site-header {
    background: var(--panel);
    border-top: 4px solid var(--accent);
    border-bottom: 4px solid var(--brand-light);
}

.site-header-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-5);
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
}

/* Beeldmerk links, productnaam en tagline ernaast. */
.brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.brand-mark {
    display: block;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
}

.brand-name {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary-dark);
    text-decoration: none;
    letter-spacing: -0.01em;
}
.brand-name:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }

.brand-tagline {
    margin: 0;
    color: var(--muted);
    font-size: 0.95rem;
}

.site-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.site-nav a {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch);
    padding: 0 var(--space-4);
    border-radius: var(--radius);
    color: var(--text);
    font-weight: 500;
    text-decoration: none;
}
.site-nav a:hover { background: var(--primary-soft); color: var(--primary-dark); }

/* ------------------------------------------------------------------ inhoud */

.site-main {
    flex: 1;
    padding: var(--space-6) 0 var(--space-7);
}

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

@media (min-width: 768px) {
    .panel { padding: var(--space-6); }
}

.lead { font-size: 1.15rem; }

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

/* Rustige toelichting: geen waarschuwing, wel goed leesbaar. */
.note {
    margin-top: var(--space-5);
    padding: var(--space-4) var(--space-5);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius-sm);
    background: var(--primary-soft);
    color: var(--text);
}
.note p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ meldingen */

.flash {
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    border-left: 4px solid var(--primary);
    background: var(--flash-info-bg);
    color: var(--text);
}
.flash-success { border-left-color: var(--aqua); background: var(--flash-success-bg); }
.flash-warning { border-left-color: var(--warning); background: var(--flash-warning-bg); }
.flash-danger,
.flash-error   { border-left-color: var(--danger);  background: var(--flash-danger-bg); }

/* ------------------------------------------------------------------ knoppen */

/*
 * Knopkleur draagt betekenis:
 *   .btn            primaire actie
 *   .btn.secondary  neutrale actie (annuleren, terug)
 *   .btn.success    afronden/bevestigen
 *   .btn.warning    omkeerbaar, maar eerst nadenken (reset, wijzigingen loslaten)
 *   .btn.danger     uitsluitend verwijderen
 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--touch);
    padding: 0 var(--space-5);
    border: 0;
    border-radius: var(--radius);
    background: var(--primary);
    color: #ffffff;
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}
.btn:hover { background: var(--primary-dark); color: #ffffff; }

.btn.secondary { background: var(--secondary-bg); color: var(--text); }
.btn.secondary:hover { background: var(--secondary-bg-hover); color: var(--text); }
.btn.success { background: var(--success); }
.btn.success:hover { background: var(--success-dark); }
.btn.warning { background: var(--warning); }
.btn.warning:hover { background: var(--warning-dark); }
.btn.danger { background: var(--danger); }
.btn.danger:hover { background: var(--danger-dark); }

.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.btn-large {
    min-height: 52px;
    padding: 0 var(--space-6);
    font-size: 1.1rem;
}

/* Icoonknop zonder tekst: altijd een aria-label meegeven. */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--touch);
    height: var(--touch);
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--primary);
    cursor: pointer;
}
.btn-icon:hover { background: var(--primary-soft); color: var(--primary-dark); }

/* ------------------------------------------------------------------ voet */

/* Lichtblauwe voet zoals op ont.nl: --muted 5,15:1, --primary-dark 7,72:1 op --brand-light. */
.site-footer {
    background: var(--brand-light);
    color: var(--muted);
    font-size: 0.9rem;
}

.site-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
}

/* Een <button> omdat hij de versiepopup opent, maar hij moet lezen als een
   bescheiden versieregel, niet als een actieknop. */
.footer-version {
    min-height: var(--touch);
    padding: 0 var(--space-2);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--muted);
    font: inherit;
    cursor: pointer;
}
.footer-version:hover { color: var(--primary-dark); text-decoration: underline; text-underline-offset: 2px; }

.footer-credits {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
}
.footer-credit a { color: var(--muted); }
.footer-credit a:hover { color: var(--primary-dark); }

/* ------------------------------------------------------------------ versiepopup */

.version-modal { display: none; }
.version-modal.open {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    inset: 0;
    z-index: 210;
    padding: var(--space-5);
    background: rgba(29, 42, 46, 0.5);
}

.version-modal-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
    max-width: 480px;
    /* Gelijk aan de 1.5rem padding van de backdrop aan elke kant, zodat de
       popup nooit hoger wordt dan het scherm. */
    max-height: calc(100vh - 3rem);
    padding: var(--space-5);
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}

.version-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-shrink: 0;
}
.version-modal-header h2 { margin: 0; font-size: 1.1rem; color: var(--primary-dark); }

/* Staand ONT-logo naast de versiegegevens; klein genoeg om niet op te schalen. */
.version-modal-brand {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}
.version-modal-logo { flex-shrink: 0; width: 80px; height: auto; }

.version-modal-body { overflow-y: auto; }

.version-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    flex-shrink: 0;
}

/* .version-modal-close zelf is alleen de JS-haak, gedeeld door de icoonknop
   en de tekstknop "Sluiten"; hij krijgt daarom geen eigen opmaak. */
.version-modal-close-x { margin: calc(var(--space-2) * -1) calc(var(--space-2) * -1) 0 0; }

.version-number { margin: 0; font-family: var(--font-heading); font-size: 1.5rem; font-weight: 600; color: var(--primary-dark); }
.version-released { margin: var(--space-1) 0 0; color: var(--muted); font-size: 0.95rem; }
.version-blurb { margin: var(--space-3) 0 0; color: var(--muted); font-size: 0.95rem; line-height: 1.5; }


/* ------------------------------------------------------------------ hulpklassen */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.muted { color: var(--muted); }
.small { font-size: 0.92rem; }
.empty { color: var(--muted); margin: var(--space-3) 0; }

.container-wide { max-width: var(--container-wide); }

[hidden] { display: none !important; }

/* ------------------------------------------------------------------ formulieren */

.form-row { margin-bottom: var(--space-4); }
.form-row label { display: block; margin-bottom: var(--space-1); font-weight: 600; }
.form-row .optional { font-weight: 400; color: var(--muted); }
.form-row .help { margin: var(--space-1) 0 0; color: var(--muted); font-size: 0.92rem; }

input[type="text"],
input[type="search"],
input[type="number"] {
    width: 100%;
    min-height: var(--touch);
    padding: 0 var(--space-3);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm);
    background: var(--panel);
    color: var(--text);
    font: inherit;
}

.btn-small {
    min-height: var(--touch);
    padding: 0 var(--space-3);
    font-size: 0.95rem;
}

.btn .icon { width: 18px; height: 18px; }

/* ------------------------------------------------------------------ oefenflow: stappenbalk */

.steps { margin-bottom: var(--space-4); }

/*
 * Vanaf tabletbreedte blijft de stappenbalk bovenaan staan (FO §8.2: stappen
 * permanent zichtbaar). Op een telefoon niet: daar zou hij in twee rijen een
 * te groot deel van het scherm innemen.
 */
@media (min-width: 768px) {
    :root { --sticky-top: 5.75rem; }
    .steps {
        position: sticky;
        top: 0;
        z-index: 60;
        margin-left: calc(var(--space-2) * -1);
        margin-right: calc(var(--space-2) * -1);
        padding: var(--space-2);
        background: var(--bg);
    }
}

.steps-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.step { flex: 1 1 10rem; }

.step-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 52px;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--panel);
    color: var(--text);
    font-weight: 600;
    text-decoration: none;
}
a.step-link:hover { background: var(--primary-soft); color: var(--primary-dark); }

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--primary);
    border-radius: 50%;
    color: var(--primary);
    font-weight: 700;
}

.step-label { font-family: var(--font-heading); }

/* Huidige stap: gevulde donkerblauwe cirkel én dikke onderrand, niet alleen een
   kleur. De onderrand is cyaan (het "actieve stap"-accent van ont.nl); die haalt
   zelf geen 3:1, maar is nooit de enige aanduiding. */
.step.is-current .step-link {
    border-color: var(--primary-dark);
    border-bottom: 4px solid var(--accent);
    background: var(--primary-soft);
    color: var(--primary-dark);
}
.step.is-current .step-number { border-color: var(--primary-dark); background: var(--primary-dark); color: #ffffff; }

.step-link.is-disabled {
    background: var(--secondary-bg);
    color: var(--muted);
    cursor: not-allowed;
}
.step-link.is-disabled .step-number { border-color: var(--muted); border-style: dashed; color: var(--muted); }

.exercise-status:empty { display: none; }
.exercise-status {
    margin: 0 0 var(--space-4);
    padding: var(--space-2) var(--space-4);
    border-left: 4px solid var(--aqua);
    border-radius: var(--radius-sm);
    background: var(--flash-success-bg);
}

/* ------------------------------------------------------------------ oefenflow: opmaak */

.page-head { margin-bottom: var(--space-5); }
.page-head .lead { max-width: 60rem; }

.exercise-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
}

@media (min-width: 1024px) {
    .exercise-layout { grid-template-columns: minmax(0, 1fr) var(--aside-width); }
    /* Onder de sticky stappenbalk, niet erachter. */
    .exercise-aside {
        position: sticky;
        top: var(--sticky-top);
        max-height: calc(100vh - var(--sticky-top) - var(--space-4));
        overflow-y: auto;
    }
    .note-toggle { display: none !important; }
}

/* Liggende tablet (1024-1199px): een smaller paneel laat de codekaarten in
   twee kolommen van leesbare breedte staan. */
@media (min-width: 1024px) and (max-width: 1199.98px) {
    :root { --aside-width: 300px; }
}

/* Smal scherm met JavaScript: ruimte voor de balk "Mijn nota" onderaan. */
@media (max-width: 1023.98px) {
    html:has(.exercise-aside.is-collapsible) { --sticky-bottom: 4.5rem; }
}

.step-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

/* Smal scherm met JavaScript: Mijn nota als balk onderaan, inklapbaar. */
.exercise-aside.is-collapsible {
    position: sticky;
    bottom: 0;
    z-index: 50;
    margin: 0 calc(var(--space-4) * -1);
    background: var(--panel);
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 18px rgba(29, 42, 46, 0.12);
}
/* Gelijk aan de bredere containerpadding vanaf 768px, zodat de balk de volle breedte houdt. */
@media (min-width: 768px) {
    .exercise-aside.is-collapsible { margin: 0 calc(var(--space-5) * -1); }
}
.exercise-aside.is-collapsible .note-panel-body {
    max-height: 60vh;
    overflow-y: auto;
}
.exercise-aside.is-collapsible .note-panel {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.note-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    min-height: 52px;
    padding: 0 var(--space-4);
    border: 0;
    background: var(--panel);
    color: var(--primary-dark);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.note-toggle:hover { background: var(--primary-soft); }
/* Ring binnen de balk: buiten de balk valt hij weg tegen de schermrand. */
.note-toggle:focus-visible { outline-offset: -4px; }
.note-toggle[aria-expanded="true"] .note-toggle-icon { transform: rotate(180deg); }
.note-toggle.is-updated { animation: note-pulse 0.9s ease-out; }

@keyframes note-pulse {
    0% { background: var(--flash-success-bg); }
    100% { background: var(--panel); }
}

/* Geen animaties of vloeiend scrollen voor wie dat heeft uitgezet; geldt voor de hele site. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* ------------------------------------------------------------------ Mijn nota */

.note-panel {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4);
}
.note-panel:focus { outline: none; }
.note-panel:focus-visible { outline: 3px solid var(--focus-ring); }

.note-panel-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    color: var(--primary-dark);
}
.note-panel-subtitle { font-weight: 600; }
.note-panel-section {
    margin: var(--space-4) 0 var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
    font-size: 1rem;
}

.note-lines { margin: 0; padding: 0; list-style: none; }
.note-line { padding: var(--space-2) 0; }
.note-line + .note-line { border-top: 1px dashed var(--border); }
.note-line-text { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); }
.note-line-description { font-size: 0.95rem; }
.note-line-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-top: var(--space-1);
}
.note-workpiece-name { margin-bottom: var(--space-1); font-weight: 600; }

.note-totals { margin: var(--space-4) 0 var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.note-totals > div { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-1) 0; }
.note-totals dt,
.note-totals dd { margin: 0; }
.note-totals-total { margin-top: var(--space-1); border-top: 1px solid var(--border); font-size: 1.1rem; font-weight: 700; }

.note-panel-footer { margin: var(--space-4) 0 0; }
.note-panel-footer .btn { width: 100%; }

.code-number {
    color: var(--primary-dark);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.price {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
}
.price-missing { color: var(--muted); font-weight: 400; }

/* ------------------------------------------------------------------ aantallen */

.qty-controls {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    /* 8px tussen de knoppen: op een tablet tik je anders makkelijk de buurknop (bijv. Verwijderen naast +). */
    gap: var(--space-2);
}
.qty-controls form { margin: 0; }
.qty-btn { border: 1px solid var(--input-border); }
/* Verwijderen is alleen een prullenbak met rode achtergrond (wit op --danger: 6,54:1). */
.qty-remove { border: 1px solid var(--danger); background: var(--danger); color: #fff; }
.qty-remove:hover { background: var(--danger-dark); border-color: var(--danger-dark); color: #fff; }
/* Met JavaScript dient het aantalveld zichzelf in; de knop "Wijzig" is dan overbodig. */
.js .qty-set { display: none; }
.qty-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.qty-value { min-width: 2.5rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.qty-input-form { display: inline-flex; align-items: center; gap: var(--space-1); }
.qty-input-form .qty-input { width: 4.5rem; text-align: center; }

/* ------------------------------------------------------------------ badges */

/* Altijd met tekst en icoon; de kleur ondersteunt alleen. Rand in currentColor. */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.2rem 0.6rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.4;
}
.badge .icon { width: 16px; height: 16px; }
/* Aqua (ont.nl) als steunkleur: tekst en rand in --aqua-dark, want --aqua zelf haalt op wit maar 3,01:1. */
.badge-tc-allowed { background: var(--aqua-soft); color: var(--aqua-dark); }
.badge-tc-none { background: var(--secondary-bg); color: var(--text); }
.badge-modified { background: var(--flash-warning-bg); color: var(--warning-dark); }
.badge-original { background: var(--aqua-soft); color: var(--aqua-dark); }

/* ------------------------------------------------------------------ zoeken en filters */

.code-filters { margin-bottom: var(--space-3); }

.search-field { display: flex; gap: var(--space-2); }
.search-field input { flex: 1; }

.chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    padding: 0;
    border: 0;
}
.chip-group legend { width: 100%; margin-bottom: var(--space-2); padding: 0; font-weight: 600; }

.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.chip span {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch);
    padding: 0 var(--space-4);
    border: 1px solid var(--input-border);
    border-radius: 999px;
    background: var(--panel);
    cursor: pointer;
}
.chip span:hover { background: var(--primary-soft); }
/* Gekozen filter: gevuld, vet en een vinkje, niet alleen een kleur. */
.chip input:checked + span { background: var(--primary); border-color: var(--primary); color: #ffffff; font-weight: 700; }
.chip input:checked + span::before { content: "\2713"; margin-right: var(--space-2); }
.chip input:focus-visible + span { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

.search-status { min-height: 1.5em; margin: 0 0 var(--space-3); color: var(--muted); }
.search-status.is-error { color: var(--danger); font-weight: 600; }

.code-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-3);
}
.code-grid > .empty { grid-column: 1 / -1; }

.code-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: var(--shadow-sm);
}
.code-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.code-card-head .code-number { font-size: 1.15rem; }
.code-description { flex: 1; margin: 0; }
.code-card .badge { align-self: flex-start; }
.code-card-form { margin-top: var(--space-2); }
.code-card-form .btn { width: 100%; }

/* ------------------------------------------------------------------ recepten */

.recipe-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
}

.recipe-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: var(--shadow-sm);
}
.recipe-card.is-current { border: 2px solid var(--primary); }
.recipe-card-title { margin: 0; color: var(--primary-dark); }
.recipe-card-description { margin: 0; }
.recipe-meta { margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: 0.95rem; }
.recipe-meta .price { color: var(--text); }
.recipe-card-form { margin-top: auto; padding-top: var(--space-2); }
.recipe-card-form .btn { width: 100%; }

.blank-option {
    margin-top: var(--space-5);
    padding: var(--space-4) var(--space-5);
    border: 1px dashed var(--input-border);
    border-radius: var(--radius);
}
.blank-option p { margin-bottom: var(--space-2); color: var(--muted); }

/* ------------------------------------------------------------------ werkstuk */

.workpiece-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-3);
}
.workpiece-head h2,
.workpiece-head h3 { margin-bottom: var(--space-1); }
.workpiece-base { color: var(--muted); }
.workpiece-editor:focus { outline: none; }
.workpiece-editor:focus-visible { outline: 3px solid var(--focus-ring); }

.line-list { margin: var(--space-3) 0 0; padding: 0; list-style: none; }

.line-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
    padding: var(--space-3) 0;
    border-top: 1px solid var(--border);
}
.line-item:last-child { border-bottom: 1px solid var(--border); }
.line-item-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); }
.line-item-description { flex: 1 1 14rem; }
.line-item-note {
    display: flex;
    gap: var(--space-2);
    width: 100%;
    margin: var(--space-1) 0 0;
    color: var(--muted);
    font-size: 0.92rem;
    font-style: italic;
}
.line-item-note .icon { width: 16px; height: 16px; margin-top: 0.2em; }
.line-item-quantity { font-variant-numeric: tabular-nums; }
.line-prices { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-1) var(--space-4); }
.price-unit { color: var(--muted); }
.price-unit .price { color: var(--text); font-weight: 400; }
.price-line { font-size: 1.05rem; }

@media (min-width: 768px) {
    .line-item {
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
        column-gap: var(--space-4);
    }
    .line-prices { flex-direction: column; align-items: flex-end; gap: 0; min-width: 9rem; }
}

.block-subtotal {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    margin: var(--space-3) 0 0;
    font-weight: 600;
}

/* Drawer "Q-code toevoegen". Zonder JavaScript een gewone sectie onderaan. */
.drawer {
    margin-top: var(--space-5);
    padding: var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--panel);
}
.drawer-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.drawer-head h2 { margin: 0; }

.drawer.is-enhanced:not(.open) { display: none; }
.drawer.is-enhanced.open {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 150;
    width: min(460px, 100%);
    margin: 0;
    overflow-y: auto;
    border-width: 0 0 0 1px;
    border-radius: 0;
    box-shadow: var(--shadow-md);
}
.drawer.is-enhanced .code-grid { grid-template-columns: minmax(0, 1fr); }

/* ------------------------------------------------------------------ overzicht */

.overview-block,
.overview-totals { margin-bottom: var(--space-5); }
.overview-block > h2 { margin-bottom: 0; color: var(--primary-dark); }
.overview-totals .note-totals { margin-top: 0; padding-top: 0; border-top: 0; }
.disclaimer { margin-top: 0; }
.overview-actions form { margin: 0; }

/* ------------------------------------------------------------------ start */

.start-panel { max-width: 46rem; }
.start-panel .actions form { margin: 0; }
.start-form { margin-top: var(--space-5); }

/* ------------------------------------------------------------------ bevestigingsdialoog */

.confirm-dialog {
    width: min(460px, calc(100% - 2rem));
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--panel);
    color: var(--text);
    box-shadow: var(--shadow-md);
}
.confirm-dialog::backdrop { background: rgba(29, 42, 46, 0.5); }
.confirm-dialog-inner { padding: var(--space-5); }
.confirm-dialog-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

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

/* ------------------------------------------------------------------ losse tekstlinks */

/*
 * Een tekstlink die als eigen actie op een regel staat ("Werkstuk bewerken",
 * "Terug naar je werkstuk", "Codes kiezen") krijgt een touchvlak van 44px
 * hoog. Links midden in lopende tekst blijven gewoon inline.
 */
.note-panel p > a:only-child,
.page-head p > a:only-child,
.intro-more > a,
.empty > a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--touch);
}
.page-head p > a:only-child .icon,
.intro-more > a .icon { width: 18px; height: 18px; }

/* ------------------------------------------------------------------ startpagina */

.resume {
    margin-top: var(--space-5);
    padding: var(--space-3) var(--space-4);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius-sm);
    background: var(--primary-soft);
}
.resume p { margin: 0; }
/* Limoen als markering achter de titel, zoals ont.nl een naam markeert (--text erop 9,62:1). */
.resume-title {
    display: inline-block;
    font-weight: 700;
    font-size: 1.1rem;
    margin-top: var(--space-1);
    padding: 0 var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--lime);
    color: var(--text);
}
.resume + .actions { margin-top: var(--space-4); }

.intro-more { margin: var(--space-4) 0 0; }

/* ------------------------------------------------------------------ uitlegpagina */

.about { max-width: 52rem; }

/* Kop van de uitlegpagina met het staande ONT-logo op zijn natuurlijke 133px. */
.about-head {
    display: flex;
    flex-wrap: wrap-reverse;
    align-items: flex-start;
    gap: var(--space-4) var(--space-5);
}
.about-head-text { flex: 1 1 24rem; }
.about-logo { flex-shrink: 0; width: 133px; height: auto; }
.about-section { margin-bottom: var(--space-5); }
.about-section > h2 { color: var(--primary-dark); }
.about-section > :last-child { margin-bottom: 0; }

.about-parts {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-4);
}
@media (min-width: 768px) {
    .about-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.about-part {
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.about-part p { margin: 0; }

.about-badges { margin: 0 0 var(--space-3); }
.about-badges > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
    padding: var(--space-3) 0;
    border-top: 1px solid var(--border);
}
.about-badges > div:last-child { border-bottom: 1px solid var(--border); }
.about-badges dt,
.about-badges dd { margin: 0; }
@media (min-width: 768px) {
    .about-badges > div { grid-template-columns: 19rem minmax(0, 1fr); align-items: center; }
}

.about-steps { margin: 0 0 var(--space-3); padding-left: 1.4rem; }
.about-steps li { margin-bottom: var(--space-2); }
.about-sources { margin: 0 0 var(--space-3); padding-left: 1.4rem; }

/* ------------------------------------------------------------------ foutpagina's */

.error-page { max-width: 42rem; }
.error-code {
    margin: 0 0 var(--space-2);
    color: var(--primary-dark);
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ print */

/*
 * Een masterclass print het overzicht misschien uit. Alleen de inhoud:
 * geen kop-navigatie, stappenbalk, knoppen, formulieren of Mijn nota-paneel.
 * Zwart op wit (21:1); badges houden tekst en icoon en krijgen een zwarte
 * rand, zodat kleur ook op papier niet de enige drager is.
 */
@media print {
    :root { --sticky-top: 0px; --sticky-bottom: 0px; }

    body {
        display: block;
        background: #ffffff;
        color: #000000;
        font-size: 11pt;
    }

    .skip-link,
    .site-nav,
    .site-footer,
    .steps,
    .step-nav,
    .exercise-status,
    .exercise-aside,
    .actions,
    .flash,
    .version-modal,
    .confirm-dialog,
    .drawer,
    form,
    .note-toggle {
        display: none !important;
    }

    .site-header { border: 0; }
    .brand-mark { width: 32px; height: 32px; }
    .resume-title { background: none; padding: 0; }
    h1, h2, h3, .error-code { color: #000000 !important; }
    .site-header-inner,
    .container { padding: 0; max-width: none; }
    .site-main { padding: var(--space-4) 0 0; }
    .brand-name,
    .brand-tagline,
    .muted,
    .workpiece-base,
    .price-unit,
    .line-item-note,
    .code-number,
    .overview-block > h2 { color: #000000; }

    .exercise-layout { display: block; }

    .panel,
    .note {
        border: 1px solid #000000;
        box-shadow: none;
        background: #ffffff;
        padding: var(--space-4);
    }
    .note { border-left-width: 4px; }

    .overview-block,
    .overview-totals { break-inside: auto; margin-bottom: var(--space-4); }
    .overview-block > h2,
    .workpiece-head { break-after: avoid; }
    .line-item { break-inside: avoid; border-color: #000000; }

    .badge {
        background: none !important;
        color: #000000 !important;
        border: 1px solid #000000;
    }

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