/* =========================================================================
   zenthros.io — design tokens + basiscomponenten
   Fase 1. Deze tokens zijn de basis voor fase 2 (portaalschil). Niet
   improviseren in paginabestanden: nieuwe waarden horen hier.
   ========================================================================= */

:root{
  /* --- kleur: licht --- */
  --paper:#EDEBE4;        /* warm haver, bewust niet de standaard AI-creme */
  --paper-2:#E4E1D8;      /* verdiept vlak: records, kaarten */
  --ink:#15161B;
  --slate:#63666F;        /* bijschrift, label */
  --rule:#CFCBBE;

  /* betekenisdragende accenten - geen decoratie, ze zijn de uitkomst */
  --moss:#3F5C3E;         /* toegewezen / gelukt / ja */
  --rust:#8E3525;         /* geweigerd / fout / nee */
  --indigo:#3B3FA8;       /* aandacht, focus, link-hover */

  /* --- ruimte: 4px-raster --- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:88px;

  --radius:3px;
  --maxw:1080px;
  --maxw-tekst:66ch;

  --mono: ui-monospace,"Cascadia Mono","SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --sans: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#14151A; --paper-2:#1B1D23; --ink:#E7E5DE; --slate:#9A9DA6;
    --rule:#2C2F37; --moss:#8FB58C; --rust:#E08A76; --indigo:#9296F0;
  }
}
:root[data-theme="dark"]{
  --paper:#14151A; --paper-2:#1B1D23; --ink:#E7E5DE; --slate:#9A9DA6;
  --rule:#2C2F37; --moss:#8FB58C; --rust:#E08A76; --indigo:#9296F0;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s5)}

/* ---------------- kop ---------------- */
header{position:sticky;top:0;z-index:10;background:var(--paper);border-bottom:1px solid var(--rule)}
.bar{display:flex;align-items:center;gap:var(--s5);height:64px}
.mark{font-family:var(--mono);font-size:15px;letter-spacing:.06em;font-weight:600;
      text-decoration:none;color:var(--ink);white-space:nowrap}
.mark span{color:var(--slate)}
nav{margin-left:auto;display:flex;align-items:center;gap:22px}
.chapters{display:flex;gap:22px}
.chapters a{font-size:14px;color:var(--slate);text-decoration:none;
            border-bottom:1px solid transparent;padding-bottom:2px}
.chapters a:hover{color:var(--ink);border-bottom-color:var(--rule)}
.chapters a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)}
.login{font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--ink);
       text-decoration:none;border:1px solid var(--rule);border-radius:var(--radius);
       padding:7px 14px;white-space:nowrap}
.login:hover{border-color:var(--ink)}
/* Fase 1: het portaal bestaat nog niet. Geen inlogformulier op een vers domein -
   dat is precies wat vault.steemers.online binnen 3 uur op de Safe Browsing-lijst zette.
   Weghalen zodra fase 2 live gaat; inloggen.html staat klaar in de repo. */
.login-soon{color:var(--slate);cursor:default}
/* Gemeten op 2026-08-20: "Portaal - binnenkort" is 192px breed waar "Inloggen"
   er ~90 was. Onder 920px zijn de hoofdstuklinks al verborgen, dus er geeft niets
   meer mee: op 360px stak de knop 16px buiten de balk, op 320px 56px. Het achtervoegsel
   valt daarom weg op smalle schermen; er blijft "Portaal" staan. */
.soon-suffix{white-space:nowrap}
.login-soon:hover{border-color:var(--rule)}
.themebtn{background:none;border:1px solid var(--rule);border-radius:var(--radius);
          color:var(--slate);font-family:var(--mono);font-size:12px;padding:7px 9px;
          cursor:pointer;line-height:1}
.themebtn:hover{color:var(--ink);border-color:var(--ink)}

/* ---------------- typografie ---------------- */
.lede{font-family:var(--mono);font-size:clamp(27px,5.2vw,46px);line-height:1.22;
      letter-spacing:-.02em;font-weight:500;margin:0 0 var(--s6);max-width:19ch}
.sub{font-size:18px;color:var(--slate);max-width:56ch;margin:0}
.sub b{color:var(--ink);font-weight:600}
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
         color:var(--slate);margin:0 0 var(--s6)}
.tekst{max-width:var(--maxw-tekst)}
.tekst p{margin:0 0 var(--s5)}
.tekst h2{font-family:var(--mono);font-size:20px;letter-spacing:.01em;font-weight:600;
          margin:var(--s8) 0 var(--s4)}
.tekst em{color:var(--ink);font-style:italic}
.hero{padding:var(--s9) 0 var(--s8)}

/* ---------------- besluitrecord (signatuur) ---------------- */
.record{border:1px solid var(--rule);background:var(--paper-2);border-radius:var(--radius);
        overflow:hidden}
.record-head{display:flex;align-items:center;gap:10px;padding:11px var(--s5);
             border-bottom:1px solid var(--rule);font-family:var(--mono);font-size:11.5px;
             letter-spacing:.11em;text-transform:uppercase;color:var(--slate)}
.record-head .dot{width:7px;height:7px;border-radius:50%;background:var(--slate)}
.record-head .swap{margin-left:auto;background:none;border:0;cursor:pointer;font:inherit;
                   letter-spacing:.11em;text-transform:uppercase;color:var(--slate);padding:0}
.record-head .swap:hover{color:var(--ink)}
.row{display:grid;grid-template-columns:112px 1fr}
.row + .row{border-top:1px solid var(--rule)}
.k{font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
   color:var(--slate);padding:var(--s4) 0 var(--s4) var(--s5)}
.v{padding:15px var(--s5) 15px 0;font-size:15.5px}
.v.q{font-family:var(--mono);font-size:15px}
.verdict{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);
         font-size:15px;font-weight:600;letter-spacing:.02em}
.verdict::before{content:"";width:3px;height:17px;background:currentColor;border-radius:1px}
.ok{color:var(--moss)} .no{color:var(--rust)}
.note{padding:13px var(--s5);border-top:1px solid var(--rule);font-size:13.5px;color:var(--slate)}

/* ---------------- rooster met cellen ---------------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);
      border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden}
.cell{background:var(--paper);padding:26px 22px 30px}
.cell h3{font-family:var(--mono);font-size:14px;letter-spacing:.06em;text-transform:uppercase;
         margin:0 0 var(--s1);font-weight:600}
.cell .en{font-family:var(--mono);font-size:12px;color:var(--slate);margin:0 0 var(--s3)}
.cell p{margin:0;font-size:15.5px}

/* ---------------- media met vangnet ---------------- */
.media{border:1px solid var(--rule);border-radius:var(--radius);background:var(--paper-2);
       margin:var(--s6) 0;overflow:hidden}
.media .frame{aspect-ratio:16/9;display:grid;place-items:center;color:var(--slate);
              font-family:var(--mono);font-size:13px;border-bottom:1px solid var(--rule)}
.media figcaption{padding:12px var(--s4);font-size:14px;color:var(--slate);margin:0}

/* ---------------- volgende hoofdstuk ---------------- */
.next{padding:var(--s8) 0 var(--s9);border-top:1px solid var(--rule);margin-top:var(--s9)}
.next p{font-size:19px;max-width:52ch;margin:0 0 26px}
.nextlink{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:15px;
          color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:5px}
.nextlink:hover{color:var(--indigo);border-bottom-color:var(--indigo)}
.stepper{display:flex;gap:7px;align-items:center;margin-bottom:30px;font-family:var(--mono);
         font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--slate)}
.stepper i{width:22px;height:2px;background:var(--rule);display:block;font-style:normal}
.stepper i.on{background:var(--ink)}

footer{border-top:1px solid var(--rule);padding:26px 0 40px;font-size:13.5px;color:var(--slate);
       display:flex;gap:18px;flex-wrap:wrap}
footer a{color:var(--slate);text-decoration:none;border-bottom:1px solid var(--rule)}
footer a:hover{color:var(--ink)}

a:focus-visible,button:focus-visible{outline:2px solid var(--indigo);outline-offset:3px}

/* ---------------- toestandsscherm (inlog, fout, leeg) ---------------- */
.state{min-height:74vh;display:grid;place-items:center;padding:var(--s8) 0}
.state-inner{max-width:46ch;text-align:left}
.state .badge{font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;
              text-transform:uppercase;color:var(--rust);margin:0 0 var(--s4);
              display:inline-flex;align-items:center;gap:9px}
.state .badge::before{content:"";width:3px;height:15px;background:currentColor;border-radius:1px}
.state h1{font-family:var(--mono);font-size:clamp(23px,4vw,32px);line-height:1.28;
          font-weight:500;margin:0 0 var(--s4);letter-spacing:-.01em}
.state p{margin:0 0 var(--s5);color:var(--slate);font-size:17px}
.state p b{color:var(--ink);font-weight:600}
.actions{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s6)}
.btn{font-family:var(--mono);font-size:14px;text-decoration:none;border-radius:var(--radius);
     padding:10px 18px;border:1px solid var(--rule);color:var(--ink)}
.btn:hover{border-color:var(--ink)}
.btn-primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-primary:hover{background:var(--indigo);border-color:var(--indigo);color:#fff}

/* ---------------- breekpunten ---------------- */
@media (max-width:860px){ .grid{grid-template-columns:1fr} }
/* Gemeten op 2026-08-19: bij 768px pasten hoofdstuklinks + inlogknop niet
   naast elkaar en liep "Inloggen" van het scherm af. Het breekpunt stond op
   760 en moest hoger. Gevonden door drie echte breedtes naast elkaar te
   zetten, niet door de CSS te lezen. */
@media (max-width:920px){
  .chapters{display:none}
  .bar{gap:var(--s3)}
}
@media (max-width:760px){
  .hero{padding:var(--s7) 0 var(--s6)}
  body{font-size:16px}
}
@media (max-width:620px){
  .soon-suffix{display:none}
  .row{grid-template-columns:1fr}
  .k{padding:14px var(--s4) 0}
  .v{padding:var(--s1) var(--s4) 14px}
  .wrap{padding:0 var(--s4)}
  .record-head{padding:11px var(--s4)}
  .note{padding:13px var(--s4)}
}
@media (prefers-reduced-motion:no-preference){
  .record{transition:opacity .18s ease}
}