/* ═══════════════════════════════════════════════════════════════════════════
   Schermspecifieke stijl: status

   Op 26 juli 2026 uit het inline `<style>`-blok van de template gehaald. WAAROM dit
   een EIGEN bestand is en niet in een gedeeld bestand: tussen de schermblokken zijn
   **39 echte botsingen** gemeten -- `.top` had zes verschillende definities, `.wrap`
   vijf, en `.chip`/`.taalwissel` betekenden per scherm iets anders. Ze samenvoegen zou
   schermen slopen; het samenvoegen VEILIG maken vraagt eerst een scope-prefix over 672
   selectors. Een eigen bestand maakt de schermspecifieke aard juist expliciet, is
   cachebaar en wordt op inhoud gestempeld (css_version).

   De ECHT gedeelde delen zijn er wél uit: `.taalwissel` (vier bijna identieke kopieen,
   een met een hardgecodeerde kleur), `.hint` -> `.veld-hulp`, `.statusdot` ->
   `.statuschip`, de veldstyling -> `.invoer`. Die staan in componenten.css.

   Dit bestand wordt als LAATSTE geladen, net zoals het inline blok dat stond -- zo
   blijft de cascade-orde identiek.
   ═══════════════════════════════════════════════════════════════════════════ */
.st-wrap{max-width:820px;margin:0 auto;padding:32px 18px 60px;}
    .st-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:22px;}
    .st-logo{font-size:19px;font-weight:800;color:#fff;text-decoration:none;}
    .st-banner{border-radius:14px;padding:20px 22px;display:flex;align-items:center;gap:14px;margin-bottom:26px;}
    .st-banner .dot{width:14px;height:14px;border-radius:50%;flex-shrink:0;}
    .st-banner h1{font-size:19px;margin:0;font-weight:800;}
    .st-banner p{margin:3px 0 0;font-size:13px;color:var(--muted);}
    .st-ok{background:rgba(16,185,129,.10);border:1px solid rgba(16,185,129,.35);}
    .st-ok .dot{background:var(--green);box-shadow:0 0 10px rgba(16,185,129,.7);}
    .st-ok h1{color:#34d399;}
    .st-deg{background:rgba(234,179,8,.10);border:1px solid rgba(234,179,8,.35);}
    .st-deg .dot{background:#eab308;} .st-deg h1{color:#fde047;}
    .st-down{background:rgba(240,89,79,.10);border:1px solid rgba(240,89,79,.4);}
    .st-down .dot{background:var(--red);} .st-down h1{color:var(--red);}
    .st-unk{background:rgba(255,255,255,.04);border:1px solid var(--border);}
    .st-unk .dot{background:#8a90a2;} .st-unk h1{color:var(--muted);}
    .st-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px 18px;margin-bottom:12px;}
    .st-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
    .st-name{font-weight:700;font-size:14.5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
    /* `.st-name .d` (het kleur-alleen bolletje) is 27 juli 2026 vervallen: de status per
       onderdeel staat nu in de gedeelde `.statuschip` uit componenten.css — kleur, vorm
       én tekst, zoals WCAG 1.4.1 vraagt. Geen tweede bron voor hetzelfde statuslabel. */
    .st-up{font-size:12px;color:var(--muted);}
    .st-up strong{color:var(--text);}
    .st-strip{display:flex;gap:2px;margin-top:12px;}
    .st-bar{flex:1;height:26px;border-radius:3px;background:#2c3040;}
    .st-bar.ok{background:var(--green);} .st-bar.degraded{background:#eab308;} .st-bar.down{background:var(--red);}
    .st-legend{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:6px;}
    .st-foot{text-align:center;color:var(--muted);font-size:12px;margin-top:26px;}
    .st-foot a{color:var(--accent2);}
    .lang-switch{background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--text);
      border-radius:8px;padding:6px 10px;font-size:12.5px;cursor:pointer;}