@font-face{
  font-family:"Open Sans";
  src:url("fonts/open-sans-latin.woff2") format("woff2");
  font-weight:300 800; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Open Sans";
  src:url("fonts/open-sans-latin-ext.woff2") format("woff2");
  font-weight:300 800; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  color-scheme:light;
  --navy:#2C3F5A;
  --navy-vlak:#2C3F5A;    /* navy als vlak (kopbalk); zelfde tint als --navy, andere rol —
                             op donker lopen die twee uiteen, zie het blok onderaan */
  --navy-licht:#3D5473;
  --blauw:#1863DC;
  --blauw-donker:#0056A7;
  --accent:#FFFFFF;       /* het lichte tint op de kopbalk (tekst, actieve tab, focus) */
  --inkt:#212121;
  --gedempt:#606D75;
  --lijn:#E2E7ED;    /* scheidingslijnen */
  --rand:#78889A;    /* rand om bedienbare elementen: WCAG 1.4.11 eist 3:1, --lijn haalt 1,2:1 */
  --vlak:#F4F4F4;
  --wit:#fff;
  --r:8px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  color:var(--inkt);
  background:var(--vlak);
  line-height:1.5;
  -webkit-text-size-adjust:100%;
}
.vh{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
:focus-visible{outline:3px solid var(--blauw);outline-offset:2px;border-radius:2px}
.app-kop :focus-visible{outline-color:var(--accent)}

/* ---------- de applicatie: vult het venster ---------- */
.app{
  display:flex;flex-direction:column;background:var(--wit);
  height:100vh;height:100dvh;
}
.app-kop{
  background:var(--navy-vlak);color:var(--accent);
  padding:12px 16px;display:flex;flex-wrap:wrap;gap:12px;
  align-items:center;justify-content:space-between;
}
.merk{font-weight:700;letter-spacing:.01em}
.kop-rechts{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.beveiliging-link{color:var(--accent);font-size:.8125rem;font-weight:600;text-decoration:underline}
.terug{
  font:inherit;font-size:.875rem;font-weight:600;color:var(--accent);
  background:none;border:0;text-decoration:underline;cursor:pointer;padding:8px 4px;
}

.weergave{display:flex;gap:4px;background:var(--navy-licht);border-radius:999px}
.weergave a{
  display:block;padding:6px 14px;border-radius:999px;
  font-size:.875rem;font-weight:600;color:var(--accent);white-space:nowrap;text-decoration:none;
}
.weergave a[aria-current="page"]{background:var(--accent);color:var(--navy-vlak)}

.romp{flex:1;display:flex;flex-direction:column;min-height:0}

.lijst-vak{flex:1;overflow-y:auto;padding:8px 12px 16px}

/* ---------- M2: groepskoppen dragen de urgentie in woorden ---------- */
.antwoord{
  margin:12px 4px 4px;padding:0;color:var(--inkt);font-weight:600;font-size:.9375rem;
}
.groep{
  margin:20px 4px 4px;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;
  font-weight:700;color:var(--navy);
}
.lijst-vak > .groep:first-child,.lijst-vak > .antwoord + .groep{margin-top:8px}

.lijst{list-style:none;margin:0;padding:0}
/* R-13: het afvinkvlak (de hele regel) en de knop "Verwerk" mogen elkaar niet raken.
   4px hield ze formeel uit elkaar maar niet in duimmaat; 12px is een derde van de
   24px die SC 2.5.8 als tussenruimte voor kleine doelen hanteert, bij doelen die
   allebei al 44px zijn. Zie ontwerpnotitie-m2.md. */
.lijst li{border-bottom:1px solid var(--lijn);display:flex;align-items:stretch;gap:12px}
.lijst li:last-child{border-bottom:0}
/* Kleur is nooit de enige aanduiding (SC 1.4.1): de balk herhaalt alleen wat
   de groepskop en de regeltekst al zeggen. Twee standen, geen kleurenwaaier. */
.nu{border-left:4px solid var(--navy);padding-left:8px}
.straks{border-left:4px solid var(--rand);padding-left:8px}

.regel{
  flex:1;min-width:0;display:flex;gap:12px;align-items:flex-start;padding:14px 4px;min-height:44px;
  background:none;border:0;font:inherit;color:inherit;text-align:left;cursor:pointer;
}
.regel:hover{background:var(--vlak)}
/* Gedaan: alleen het vinkje zet terug. Tikvlak 24px vinkje + 2x10px padding = 44px */
.regel.gedaan{align-items:center;padding:4px;cursor:default}
.regel.gedaan:hover{background:none}
.vinkvlak{display:inline-flex;padding:10px;border-radius:var(--r);cursor:pointer;background:none;border:0}

.vink{width:24px;height:24px;flex:none;border:2px solid var(--rand);border-radius:6px}
.vink.aan{background:var(--blauw);border-color:var(--blauw);position:relative}
.vink.aan::after{
  content:"\2713";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--wit);font-size:16px;font-weight:700;line-height:1;
}
/* US-14 AC 4: losgelaten is geen vinkje. Vorm verschilt, niet alleen kleur; het woord
   "losgelaten" staat bovendien op de regel zelf. */
.vink.aan.los::after{content:"\2013"}
.regel.los .tekst{text-decoration:none;color:var(--gedempt)}

.romp-tekst{flex:1;min-width:0}
.regel .tekst{display:block;overflow-wrap:anywhere}
.regel .meta{display:block;font-size:.8125rem;color:var(--gedempt);margin-top:2px}
.regel .klok{color:var(--navy);font-weight:700}
/* US-15 AC 11: "nog te verwerken" is een aanduiding op het item zelf en nadrukkelijk
   geen vierde urgentiestand. Het is een woord (SC 1.4.1), staat in de grijstint van
   de metaregel en gebruikt de nadruk van de drie standen niet: geen navy, geen balk,
   geen eigen plaats in de volgorde. */
.regel .onverwerkt{font-weight:600}
.gedaan .tekst{text-decoration:line-through;color:var(--gedempt)}
.leeg{color:var(--gedempt);padding:32px 4px;margin:0;text-align:center}

/* tweede doel op de regel: opent het verwerk-/bewerkscherm */
.bewerk{
  flex:none;align-self:center;display:inline-flex;align-items:center;gap:6px;
  min-height:44px;padding:10px 12px;margin-right:4px;
  font:inherit;font-size:.8125rem;font-weight:600;color:var(--blauw);text-decoration:none;
  background:var(--wit);border:1px solid var(--rand);border-radius:var(--r);cursor:pointer;
}
.bewerk:hover{background:var(--vlak);color:var(--blauw-donker)}

/* ---------- M2: verwerk-/bewerkscherm ---------- */
.verwerk{flex:1;overflow-y:auto;padding:16px 12px 24px}
.verwerk-binnen{max-width:640px;margin:0 auto}
.verwerk h2{font-size:1.125rem;margin:0 0 4px;color:var(--navy)}
.verwerk .uitleg{margin:0 0 16px;color:var(--gedempt);font-size:.875rem}
.velden{display:grid;gap:16px}
.velden label{display:block;font-size:.8125rem;font-weight:600;color:var(--gedempt);margin-bottom:4px}
/* DL-35/BR-15: de ruwe notitie is zichtbaar maar geen invoerveld. Geen kader, geen
   invoervlak — cursief en een dunne inspringlijn houden dat verschil ook zonder
   kleur zichtbaar (rand blijft --lijn: alleen decoratief, nooit rand van een
   bedienbaar element, dus SC 1.4.11 is hier niet van toepassing). */
.notitie-label{display:block;font-size:.8125rem;font-weight:600;color:var(--gedempt);margin-bottom:4px}
.notitie-tekst{
  margin:0;padding:6px 0 6px 12px;border-left:3px solid var(--lijn);
  font-style:italic;color:var(--inkt);overflow-wrap:anywhere;
}
.velden input,.velden textarea,.velden select,
.extra input,.extra textarea,.extra select{
  width:100%;font:inherit;font-size:1rem;padding:10px;background:var(--wit);
  border:1px solid var(--rand);border-radius:var(--r);color:var(--inkt);
}
.velden select,.extra select{height:50px}  /* native select is 46px, tekstvelden zijn 50px */
.velden textarea,.extra textarea{resize:vertical;min-height:72px}
.velden .hint{display:block;font-size:.8125rem;color:var(--gedempt);margin-top:4px}
.acties{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:8px}
/* US-14: de tweede uitweg staat apart van opslaan en annuleren, met de reden ernaast.
   Geen verplichte reden, geen tussenscherm, geen bevestigingsvraag (AC 3). */
.uitweg{
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  margin-top:4px;padding-top:16px;border-top:1px solid var(--lijn);
}
.uitweg p{margin:0;flex:1 1 200px;font-size:.8125rem;color:var(--gedempt)}
/* De meldregel in het verwerkscherm neemt alleen ruimte in wanneer er iets staat. */
.velden > .melding{min-height:0;margin-top:0}
.velden > .melding:empty{display:none}
/* Geen <dialog>: dat vraagt showModal() en dus JavaScript (ADR-001 besluit 4). De
   waarschuwing staat in plaats daarvan boven het formulier, met de ingevulde
   waarden nog in de velden — zie verwerk.html en het bouwcontract §4. */
.waarschuw{
  max-width:22rem;padding:20px;margin:0 0 16px;color:var(--inkt);background:var(--wit);
  border:1px solid var(--rand);border-radius:var(--r);
}
.waarschuw h2{font-size:1rem;margin:0 0 8px;color:var(--navy)}
.waarschuw p{margin:0 0 8px}
.knop-stil{
  font:inherit;font-weight:600;font-size:1rem;padding:12px 16px;min-height:48px;
  background:var(--wit);border:1px solid var(--rand);border-radius:var(--r);
  color:var(--blauw);cursor:pointer;
}
.knop-stil:hover{background:var(--vlak);color:var(--blauw-donker)}

/* ---------- vangbalk: ongewijzigd t.o.v. M1, op elk scherm (BR-13) ---------- */
.vang{border-top:1px solid var(--lijn);background:var(--vlak);padding:12px 12px 16px}
.vang > label{display:block;font-size:.8125rem;font-weight:600;color:var(--gedempt);margin-bottom:6px}
.balk{display:flex;gap:8px}
.vang input[type=text]{
  flex:1;min-width:0;font:inherit;font-size:1rem;padding:12px;
  border:1px solid var(--rand);border-radius:var(--r);background:var(--wit);color:var(--inkt);
}
.vang input[type=text]::placeholder{color:var(--gedempt)}
.knop{
  font:inherit;font-weight:600;font-size:1rem;padding:12px 20px;min-height:48px;
  background:var(--blauw);color:var(--wit);border:0;border-radius:var(--r);cursor:pointer;
  text-decoration:none;display:inline-block;
}
.knop:hover{background:var(--blauw-donker)}

details{margin-top:10px}
summary{
  display:inline-flex;align-items:center;gap:8px;list-style:none;cursor:pointer;
  font-size:.875rem;font-weight:600;color:var(--blauw);padding:8px 4px;min-height:44px;
}
summary::-webkit-details-marker{display:none}
summary::before{content:"+";font-size:1.125rem;line-height:1;width:1em;text-align:center}
details[open] summary::before{content:"\2013"}
details .s-open,details[open] .s-dicht{display:none}
details[open] .s-open{display:inline}
.extra{display:grid;gap:12px;padding:4px 4px 8px}
.extra label{display:block;font-size:.8125rem;font-weight:600;color:var(--gedempt);margin-bottom:4px}
.melding{display:block;min-height:1.25rem;margin-top:8px;font-size:.8125rem;color:var(--navy);font-weight:600}

/* ---------- M2: rubriektabbladen (DL-42) ----------
   Onder het breekpunt bestaat het filter niet (US-15 AC 22): geen strip, geen
   teller, geen filtermelding. De strip staat altijd in de HTML zodra er iets te
   kiezen valt — de server kent de vensterbreedte niet — maar wordt hieronder
   verborgen; geen link die op mobiel zichtbaar is draagt een rubriek (§6.7 van
   het bouwcontract). Zonder rol "tablist": dat patroon vraagt pijltjesafhandeling
   en dus JavaScript. Gewone links met aria-current zijn met Tab en Enter te
   bedienen (§6, bouwcontract). */
.rubrieken{display:none}
.buiten{display:none}
/* Aanduiding dat er achter dit tabblad iets te laat is of vandaag speelt. Het getal
   zelf is de drager, niet de kleur; ernaast staat het woord "dringend" voor de
   schermlezer. Wit op navy: 10.7:1. */
.telpil{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  background:var(--navy);color:var(--wit);font-size:.75rem;font-weight:700;line-height:1;
}

/* ---------- schermen buiten de app: aanmelden, code, beveiliging ---------- */
.scherm{padding:24px 16px;max-width:400px;margin:0 auto;display:grid;gap:16px;width:100%}
.scherm form{display:grid;gap:12px}
.scherm label{display:block;font-size:.875rem;font-weight:600;color:var(--gedempt);margin-bottom:6px}
.scherm input[type=password],.scherm input[type=text]{
  width:100%;font:inherit;font-size:1rem;padding:12px;min-height:48px;
  border:1px solid var(--rand);border-radius:var(--r);background:var(--wit);color:var(--inkt);
}
.scherm p{margin:0;color:var(--gedempt)}
.scherm code{background:var(--vlak);padding:2px 6px;border-radius:4px}
.fout{color:var(--inkt);font-weight:700;margin:0}

/* ---------- breder dan een telefoon (DL-42) ----------
   Twee kolommen: links de lijst over de volle hoogte met de eigen schuifbalk,
   rechts een kolom van 380px met de rubriekstrip bovenin en het registreerblok
   onderin. Alleen de lijst schuift, dus registreren blijft in beeld (BR-13).
   DOM-volgorde is strip → lijst → registreerblok, dus ook met het toetsenbord
   komt de keuze vóór wat zij bepaalt. Overgenomen uit het goedgekeurde
   prototype-m2-desktop.html; @container is hier @media, want het product heeft
   geen omhullende container (bouwcontract §0.1). */
@media (min-width:640px){
  .romp{
    display:grid;
    grid-template-columns:minmax(0,1fr) 380px;
    grid-template-rows:auto minmax(0,1fr);
  }
  .rubrieken{
    display:flex;flex-direction:column;align-items:stretch;gap:2px;
    padding:16px 24px 0 0;
    grid-column:2;grid-row:1;
  }
  .rubrieken a{
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    min-height:44px;padding:8px 12px;font:inherit;font-size:.875rem;font-weight:600;
    color:var(--navy);                       /* 10.7:1 op wit, 9.7:1 op het actieve vlak */
    text-decoration:none;border-left:3px solid transparent;
    border-radius:0 var(--r) var(--r) 0;cursor:pointer;
  }
  .rubrieken a:hover{background:var(--vlak)}
  /* SC 1.4.1: het actieve tabblad verschilt niet alleen in kleur. Het draagt een
     balk aan de zijkant (vorm en plaats), een zwaardere letter en een eigen vlak —
     en programmatisch aria-current. Balk navy op wit is 10.7:1. */
  .rubrieken a[aria-current="page"]{
    background:var(--vlak);border-left-color:var(--navy);font-weight:700;
  }
  /* De regel die vertelt wat het filter buiten beeld houdt. Staat bovenaan de
     lijst, vóór het antwoord en vóór de eerste groep. Inkt op --vlak is 14.6:1. */
  .buiten{
    display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;
    margin:12px 4px 4px;padding:10px 12px;
    border-left:4px solid var(--navy);border-radius:0 var(--r) var(--r) 0;background:var(--vlak);
  }
  .buiten p{margin:0;flex:1 1 240px;font-size:.875rem;color:var(--inkt)}
  .buiten a{
    flex:none;min-height:44px;display:inline-flex;align-items:center;padding:10px 12px;
    font:inherit;font-size:.8125rem;font-weight:600;text-decoration:none;
    color:var(--blauw);background:var(--wit);border:1px solid var(--rand);
    border-radius:var(--r);cursor:pointer;
  }
  .buiten a:hover{background:var(--vlak);color:var(--blauw-donker)}
  .lijst-vak,.verwerk{grid-column:1;grid-row:1 / 3;min-height:0}
  /* Eén lijn over de volle hoogte scheidt de twee kolommen; de kolom zelf heeft
     verder geen eigen vlak nodig. */
  .lijst-vak{padding:8px 24px 24px;border-right:1px solid var(--lijn)}
  .verwerk{padding:24px;border-right:1px solid var(--lijn)}
  /* Het registreerblok zakt naar de onderkant van de rechterkolom. Verder is er niets
     aan veranderd — zelfde veld, zelfde knop, zelfde uitklapper (DL-10, DL-17, DL-20). */
  .vang{
    grid-column:2;grid-row:2;align-self:end;
    margin:0 24px 24px 0;padding:16px 20px;
    /* Als volle balk droeg de bandbreedte de begrenzing; als paneel in een kolom moet
       de rand dat doen. --rand is 3.7:1 op wit, waar --lijn op 1.2:1 wegvalt. */
    border:1px solid var(--rand);border-radius:var(--r);
  }
  /* De lijst houdt zijn leesbare regellengte en staat links tegen de rand. */
  .lijst,.leeg,.groep,.antwoord,.buiten{
    width:100%;max-width:640px;margin-left:0;margin-right:auto;
  }
  .groep{margin-top:20px}
  .app-kop{padding:16px 24px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- DONKERE WEERGAVE (DL-59, DL-63) ----------------------------------
   Eén blok, negen overschreven kleurwaarden plus color-scheme. Geen tweede
   stylesheet, geen klasse, geen schakelaar, geen instelling, geen opgeslagen
   voorkeur (DL-59). Het apparaat bepaalt via prefers-color-scheme.

   --navy-vlak, --navy-licht en --accent ontbreken met opzet: de kopbalk stond
   al op een donkere ondergrond, dus daar valt niets aan af te leiden (DL-63). */
@media (prefers-color-scheme: dark){
  :root{
    color-scheme:dark;
    --wit:#1B212A;          /* het dragende vlak. Donkergrijs met een navy-zweem,
                               geen zwart: #000 onder een gebroken wit vermoeit */
    --vlak:#13181F;         /* dezelfde rol als in de lichte weergave: de laag
                               onder het vlak. Achtergrond, hover, actieve tab */
    --inkt:#E8ECF2;         /* gebroken wit, geen #fff */
    --gedempt:#A7B3C1;      /* meta, labels, hints */
    --navy:#A3BEDC;         /* navy in de inkt-rol, opgelicht: #2C3F5A haalt op
                               #1B212A 1,5:1 en is als tekst onleesbaar */
    --blauw:#7CB0F0;        /* #1863DC haalt op #1B212A 2,97:1: te weinig voor tekst
                               (4,5:1) en net te weinig voor een knopvlak of focusrand
                               (3:1). Zelfde tint, opgelicht tot 7,2:1.
                               Het opschrift op de knop is nu --wit, dat wil zeggen
                               het donkere vlak: wit op #7CB0F0 haalt 2,3:1 */
    --blauw-donker:#A9CCF9; /* de hover-tint gaat mee naar boven: op donker is
                               "dieper" niet meer de richting van nadruk */
    --rand:#7E8C9C;         /* rand om bedienbare elementen, SC 1.4.11: 4,7:1 */
    --lijn:#2C333D;         /* scheidingslijn, decoratief, zoals in de lichte weergave */
  }
}