/* ============================================================================
   BRW Design System v0.1
   Eén stylesheet voor alle rapportages en portalen van Brandweer Kennemerland.

   Herkomst: geëxtraheerd uit natuurbranden_vrk_rapport.html en gemeten uit de
   portaalmockups (kleuren met een pixelmeting vastgesteld, niet geschat).

   Gebruik: zet een profiel op <html> of op de wrapper.
     <html class="brw brw-report">   vaste lichte huisstijl, geen donkere modus
     <html class="brw brw-app">      applicatie/portaal, volgt systeemthema,
                                     of forceer met data-theme="light|dark"
   ============================================================================ */

/* ----------------------------------------------------------------------------
   0. LETTERTYPE -- Open Sans 400/600/700/800, ZELF GEHOST (SIL Open Font License 1.1, fonts/OFL-Open-Sans.txt). Geen CDN.
   ---------------------------------------------------------------------------- */
@font-face{ font-family:'Open Sans'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/open-sans-latin-400-normal.woff2') format('woff2'); 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'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/open-sans-latin-ext-400-normal.woff2') format('woff2'); 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; }
@font-face{ font-family:'Open Sans'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/open-sans-latin-600-normal.woff2') format('woff2'); 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'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/open-sans-latin-ext-600-normal.woff2') format('woff2'); 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; }
@font-face{ font-family:'Open Sans'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/open-sans-latin-700-normal.woff2') format('woff2'); 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'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/open-sans-latin-ext-700-normal.woff2') format('woff2'); 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; }
@font-face{ font-family:'Open Sans'; font-style:normal; font-weight:800; font-display:swap;
  src:url('fonts/open-sans-latin-800-normal.woff2') format('woff2'); 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'; font-style:normal; font-weight:800; font-display:swap;
  src:url('fonts/open-sans-latin-ext-800-normal.woff2') format('woff2'); 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; }

/* ----------------------------------------------------------------------------
   1. HUISSTIJLKLEUREN — absoluut, identiek in elk profiel en elk thema.
      Deze waarden staan vast. Verwijs er nooit rechtstreeks naar in componenten;
      gebruik de rolvariabelen uit sectie 2.
   ---------------------------------------------------------------------------- */
.brw{
  --brw-red-900:#7A0B11;
  --brw-red-800:#970E15;   /* gemeten: logobalk portaal */
  --brw-red-600:#C0392B;   /* rapport, lichtere toepassing */

  --brw-navy-900:#021D32;  /* gemeten: zijbalk portaal */
  --brw-navy-700:#0E2744;
  --brw-navy-600:#1B3358;  /* rapport: KPI-hero, koppen, links */
  --brw-navy-300:#3D6B8C;

  --brw-gold-600:#C6A335;  /* accent: logo, nadruk, maxima */
  --brw-gold-100:rgba(198,163,53,.22);

  /* Categoriekleuren natuurbrandtypen — semantisch vast, niet hergebruiken
     voor andere dimensies zonder nieuwe afspraak. */
  --brw-duin:#03876F;
  --brw-bos:#7B4FA0;
  --brw-riet:#A6501E;
  --brw-akker:#A6811A;
  --brw-onbekend:#8A8578;
  --brw-duin-fill:rgba(3,135,111,.14);
  --brw-bos-fill:rgba(123,79,160,.14);
  --brw-riet-fill:rgba(166,80,30,.14);
  --brw-akker-fill:rgba(166,129,26,.14);

  /* HUISSTIJL brandweer.nl/kennemerland, gemeten 2026-10-15 (absoluut; componenten gebruiken de rolvariabelen) */
  --brw-rood-brandweer:#D0021B;
  --brw-zwart:#0A0A0A;
  --brw-vlak:#F2F2F2;
  --brw-lijn:#E6E6E6;
  --brw-footer:#2B2B2B;
  --wit:#FFFFFF;                       /* vast wit: tekst op merkvlakken, foto's en de afdrukversie; geen themarol */
  --beeld-donker:#05070F;              /* achtergrond achter foto's en het heelal */
  --sluier:rgba(0,0,0,.62);            /* titelvlak op een foto */
  --op-merk-1:rgba(255,255,255,.45); --op-merk-2:rgba(255,255,255,.72); /* gedempte tekst op een donker merkvlak */

  /* Typografie */
  --font-display:'Open Sans', Arial, Helvetica, sans-serif;
  --font-body:'Open Sans', Arial, Helvetica, sans-serif;
  --font-mono:'IBM Plex Mono','Consolas',ui-monospace,monospace;

  /* Maatvoering */
  --radius:4px;
  --radius-pill:100px;
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-12:52px;
  --content-max:1170px;
  --radius-kaart:20px;
}

/* ----------------------------------------------------------------------------
   2. ROLVARIABELEN — hier schakelt het profiel en het thema.
      Componenten gebruiken UITSLUITEND deze namen.
   ---------------------------------------------------------------------------- */

/* 2a. Rapportprofiel — vaste lichte huisstijl.
       Bewuste keuze uit het bronrapport: een rapport is een vastgelegd document
       en schakelt niet mee met het systeemthema. Let op de omkering ten opzichte
       van het appprofiel: het paginavlak is wit, de kaarten zijn lichtgrijs. */
.brw-report{
  --page:#FFFFFF;
  --panel:#EAEAEA;
  --panel-2:#FFFFFF;
  --ink:#1A1A1A;
  --ink-secondary:#4A4A4A;
  --ink-muted:#767676;
  --border:#D6D6D6;
  --border-strong:#BEBEBE;

  --brand:var(--brw-navy-600);
  --brand-ink:#FFFFFF;
  --accent:var(--brw-gold-600);
  --accent-fill:var(--brw-gold-100);

  --status-critical:#B0293D;  --status-critical-bg:rgba(176,41,61,.10);
  --status-warning:#A6811A;   --status-warning-bg:rgba(166,129,26,.12);
  --status-ok:#03876F;        --status-ok-bg:rgba(3,135,111,.12);
  --status-normal:#3D6B8C;    --status-normal-bg:rgba(61,107,140,.10);
  --status-idle:#8A8578;      --status-idle-bg:rgba(138,133,120,.12);

  --shadow:0 1px 2px rgba(20,20,20,.05), 0 4px 14px rgba(20,20,20,.06);
}

/* 2b. Appprofiel — portaal en dashboards. Lichtgrijs paginavlak, witte kaarten. */
.brw-app{
  --page:var(--brw-vlak);
  --panel:#FFFFFF;
  --panel-2:#FAFAFA;
  --ink:var(--brw-zwart);
  --ink-secondary:#3A3A3A;
  --ink-muted:#5E5E5E;
  --border:var(--brw-lijn);
  --border-strong:#C9C9C9;

  --brand:var(--brw-rood-brandweer);  /* de rode merkbalk */
  --brand-ink:#FFFFFF;
  --topbar:#F2F2F2;                   /* de grijze topbalk (gelijk aan brandweer.nl, OC-31) */
  --footer-bg:var(--brw-footer);
  --footer-ink:#E6E6E6;
  --nav-bg:var(--brw-navy-900);      /* de donkere zijbalk van het rapportageportaal */
  --nav-ink:#C9D3DE;
  --nav-ink-active:#FFFFFF;
  --nav-active-bar:var(--brw-rood-brandweer);
  --nav-hover:rgba(255,255,255,.06);

  --accent:var(--brw-rood-brandweer);
  --accent-fill:rgba(208,2,27,.08);

  --status-critical:#B0021A;  --status-critical-bg:rgba(176,2,26,.10);
  --status-warning:#B7791F;   --status-warning-bg:rgba(183,121,31,.12);
  --status-ok:#1B8A5A;        --status-ok-bg:rgba(27,138,90,.12);
  --status-normal:#3D6B8C;    --status-normal-bg:rgba(61,107,140,.10);
  --status-idle:#8A94A0;      --status-idle-bg:rgba(138,148,160,.14);

  --shadow:none;
}

/* 2c. Donkere modus — alleen voor het appprofiel (PORTAAL-THEMA 2026-10-18; waarden en contrasttoets: tokens.json "portaal", scripts/toets_kleuren.py).
       Drie standen, gekozen in de themaschakelaar en bewaard door brw-thema.js als data-theme op <html>: Systeem (geen attribuut; volgt prefers-color-scheme), Licht, Donker.
       Het attribuut op het .brw-app-element zelf blijft werken (data-theme="light|dark"). */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brw-app:not([data-theme="light"]){
      --page:#1E2024;
    --panel:#26282E;
    --panel-2:#2D3037;
    --ink:#F1F2F4;
    --ink-secondary:#C9CCD2;
    --ink-muted:#9BA1AC;
    --border:#3A3D45;
    --border-strong:#4B4E56;
    --accent:#6DA7EC;
    --accent-fill:rgba(109,167,236,.16);
    --status-critical:#E5544E;  --status-critical-bg:rgba(229,84,78,.16);
    --status-warning:#E3AC3E;   --status-warning-bg:rgba(227,172,62,.16);
    --status-ok:#3FC98C;        --status-ok-bg:rgba(63,201,140,.16);
    --status-normal:#7FAFD0;    --status-normal-bg:rgba(127,175,208,.16);
    --status-idle:#9BA1AC;      --status-idle-bg:rgba(155,161,172,.18);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 2px 10px rgba(0,0,0,.35);
    --topbar:#2D3037; --footer-bg:#16181B; --footer-ink:#C9CCD2; --brand:#B0021A;
  }
}
:root[data-theme="dark"] .brw-app, .brw-app[data-theme="dark"]{
    --page:#1E2024;
    --panel:#26282E;
    --panel-2:#2D3037;
    --ink:#F1F2F4;
    --ink-secondary:#C9CCD2;
    --ink-muted:#9BA1AC;
    --border:#3A3D45;
    --border-strong:#4B4E56;
    --accent:#6DA7EC;
    --accent-fill:rgba(109,167,236,.16);
    --status-critical:#E5544E;  --status-critical-bg:rgba(229,84,78,.16);
    --status-warning:#E3AC3E;   --status-warning-bg:rgba(227,172,62,.16);
    --status-ok:#3FC98C;        --status-ok-bg:rgba(63,201,140,.16);
    --status-normal:#7FAFD0;    --status-normal-bg:rgba(127,175,208,.16);
    --status-idle:#9BA1AC;      --status-idle-bg:rgba(155,161,172,.18);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 2px 10px rgba(0,0,0,.35);
    --topbar:#2D3037; --footer-bg:#16181B; --footer-ink:#C9CCD2; --brand:#B0021A;
}
/* Native bedieningselementen en schuifbalken volgen de gekozen stand. */
:root[data-theme="light"]{ color-scheme:light; }
:root[data-theme="dark"]{ color-scheme:dark; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ color-scheme:dark; } }

/* ----------------------------------------------------------------------------
   3. BASIS
   ---------------------------------------------------------------------------- */
.brw *,.brw *::before,.brw *::after{ box-sizing:border-box; }
.brw{
  margin:0; padding:0;
  background:var(--page); color:var(--ink);
  font-family:var(--font-body); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.brw ::selection{ background:var(--accent-fill); }
.brw a{ color:var(--accent); }
.brw img{ max-width:100%; }
.brw [hidden]{ display:none !important; }
.brw :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.brw .wrap{ max-width:var(--content-max); margin:0 auto; padding:0 var(--space-6) 80px; }
.brw .mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

/* ----------------------------------------------------------------------------
   4. TYPOGRAFIE
   ---------------------------------------------------------------------------- */
.brw .eyebrow{
  font-weight:600; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-muted); display:flex; gap:10px; align-items:center;
  margin-bottom:14px;
}
.brw .eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none; }
.brw h1{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(30px,4.2vw,46px); line-height:1.08; letter-spacing:-.005em;
  margin:0 0 14px; text-wrap:balance; color:var(--ink);
}
.brw h1 em{ font-style:normal; color:var(--brw-navy-600); }
.brw .lede{ max-width:640px; color:var(--ink-secondary); font-size:16px; line-height:1.6; margin:0 0 6px; }
.brw .scope-line{
  font-family:var(--font-mono); font-size:12.5px; color:var(--ink-muted);
  margin-top:18px; display:flex; flex-wrap:wrap; gap:6px 0;
}
.brw .scope-line b{ color:var(--ink-secondary); font-weight:600; }
.brw .scope-line .sep{ margin:0 10px; color:var(--border-strong); }
.brw .label{
  font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-muted); font-weight:600;
}

/* ----------------------------------------------------------------------------
   5. LAYOUT — rapport
   ---------------------------------------------------------------------------- */
.brw .report-header{ padding:52px var(--space-6) 0; }
.brw .wordmark{ display:flex; align-items:center; margin-bottom:26px; }
.brw .wordmark img{ height:44px; width:auto; display:block; }
.brw section{ margin-top:var(--space-12); }
.brw .section-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--space-4); margin-bottom:18px; flex-wrap:wrap;
}
.brw .section-head h2{
  font-family:var(--font-display); font-weight:700; font-size:19px; margin:0; color:var(--ink);
}
.brw .section-head .hint{ font-size:13px; color:var(--ink-muted); }
.brw footer{
  margin-top:64px; padding-top:var(--space-6); border-top:1px solid var(--border);
  font-size:12.5px; color:var(--ink-muted);
  display:flex; justify-content:space-between; gap:var(--space-5); flex-wrap:wrap;
}
.brw footer .methodology{ max-width:640px; line-height:1.6; }
.brw footer .methodology b{ color:var(--ink-secondary); }

/* ----------------------------------------------------------------------------
   6. LAYOUT — portaal (shell)
   ---------------------------------------------------------------------------- */
.brw .app-shell{ display:grid; grid-template-columns:228px 1fr; min-height:100vh; }
.brw .app-nav{
  background:var(--nav-bg); color:var(--nav-ink);
  padding-top:env(safe-area-inset-top,0px); display:flex; flex-direction:column;
}
.brw .app-nav .brandbar{
  background:var(--brand); color:var(--brand-ink);
  padding:var(--space-4) var(--space-5); display:flex; align-items:center; gap:10px;
}
.brw .app-nav .brandbar img{ height:34px; width:auto; }
.brw .nav-group{ padding:var(--space-5) 0 var(--space-2); }
.brw .nav-group > .label{ padding:0 var(--space-5) var(--space-2); color:var(--op-merk-1); }
.brw .nav-item{
  display:flex; align-items:center; gap:10px;
  padding:10px var(--space-5); color:var(--nav-ink);
  font-size:14px; text-decoration:none; border-left:3px solid transparent;
}
.brw .nav-item:hover{ background:var(--nav-hover); color:var(--nav-ink-active); }
.brw .nav-item[aria-current="page"]{
  background:var(--nav-hover); color:var(--nav-ink-active);
  border-left-color:var(--nav-active-bar); font-weight:600;
}
.brw .app-main{ min-width:0; display:flex; flex-direction:column; }
.brw .app-topbar{
  background:var(--panel); border-bottom:1px solid var(--border);
  padding:var(--space-4) var(--space-6); display:flex; align-items:center;
  justify-content:space-between; gap:var(--space-4); flex-wrap:wrap;
}
.brw .app-topbar h1{ font-size:26px; margin:0; }
.brw .breadcrumb{ font-size:12.5px; color:var(--ink-muted); display:flex; gap:6px; flex-wrap:wrap; }
.brw .tabs{
  display:flex; gap:var(--space-6); padding:0 var(--space-6);
  background:var(--panel); border-bottom:1px solid var(--border);
  overflow-x:auto; scrollbar-width:thin;
}
.brw .tab{
  padding:14px 0; font-size:14px; color:var(--ink-secondary); text-decoration:none;
  border-bottom:2px solid transparent; white-space:nowrap;
}
.brw .tab[aria-selected="true"]{ color:var(--status-critical); border-bottom-color:var(--status-critical); font-weight:600; }
.brw .app-body{ padding:var(--space-6); display:grid; gap:var(--space-5); }
.brw .widget-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:var(--space-5); }
@media (max-width:900px){
  .brw .app-shell{ grid-template-columns:1fr; }
  .brw .app-nav{ display:none; }
  .brw .app-nav.open{ display:flex; }
}

/* ----------------------------------------------------------------------------
   7. COMPONENTEN
   ---------------------------------------------------------------------------- */

/* 7.1 Kaart / widget */
.brw .card{
  background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius); padding:var(--space-6); box-shadow:var(--shadow);
}
.brw .widget{
  background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow);
  display:flex; flex-direction:column; min-width:0;
}
.brw .widget-head{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
  padding:var(--space-4) var(--space-5); border-bottom:1px solid var(--border);
}
.brw .widget-head h3{ font-size:15px; font-weight:700; margin:0; display:flex; align-items:center; gap:8px; }
.brw .widget-body{ padding:var(--space-5); flex:1; min-width:0; }
.brw .widget-foot{
  padding:var(--space-3) var(--space-5); border-top:1px solid var(--border);
  font-size:13px; display:flex; justify-content:space-between; gap:var(--space-3);
}

/* 7.2 Disclaimer / bronblok */
.brw .disclaimer{
  margin:26px 0 0; padding:14px 18px; background:var(--panel);
  border:1px solid var(--border-strong); border-left:3px solid var(--ink-muted);
  border-radius:6px;
}
.brw .disclaimer p{ margin:0; font-size:12.5px; line-height:1.6; color:var(--ink-secondary); max-width:820px; }

/* 7.3 KPI-band */
.brw .kpis{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--border); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden; margin:26px 0 var(--space-2);
}
.brw .kpi{ background:var(--panel); padding:var(--space-5) 22px; min-width:0; }
.brw .kpi.hero{ background:var(--brw-navy-600); }
.brw .kpi.hero .k-label,.brw .kpi.hero .k-sub{ color:var(--op-merk-2); }
.brw .kpi.hero .k-value{ color:var(--wit); }
.brw .kpi .k-label{
  font-size:11.5px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--ink-muted); font-weight:600; margin-bottom:10px; display:block;
}
.brw .kpi .k-value{
  font-family:var(--font-display); font-weight:700; font-size:44px; line-height:1;
  font-variant-numeric:tabular-nums; display:flex; align-items:baseline; gap:var(--space-2); flex-wrap:wrap;
}
.brw .kpi .k-value small{ font-family:var(--font-body); font-size:14px; font-weight:500; color:var(--ink-muted); }
.brw .kpi .k-sub{ font-size:12.5px; color:var(--ink-muted); margin-top:6px; }
.brw .kpi.critical .k-value{ color:var(--status-critical); }
.brw .kpi.normal  .k-value{ color:var(--status-normal); }
.brw .kpi.max     .k-value{ color:var(--brw-gold-600); }
@media (max-width:760px){ .brw .kpis{ grid-template-columns:repeat(2,1fr); } }

/* 7.4 Chip / status */
.brw .chip{
  display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600;
  padding:3px 9px; border-radius:var(--radius-pill); white-space:nowrap;
}
.brw .chip.critical{ background:var(--status-critical-bg); color:var(--status-critical); }
.brw .chip.warning { background:var(--status-warning-bg);  color:var(--status-warning); }
.brw .chip.ok      { background:var(--status-ok-bg);       color:var(--status-ok); }
.brw .chip.normal  { background:var(--status-normal-bg);   color:var(--status-normal); }
.brw .chip.idle    { background:var(--status-idle-bg);     color:var(--status-idle); }
.brw .status{ display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--ink-secondary); }
.brw .status::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--status-idle); flex:none; }
.brw .status.ok::before      { background:var(--status-ok); }
.brw .status.warning::before { background:var(--status-warning); }
.brw .status.critical::before{ background:var(--status-critical); }
.brw .status.idle::before    { background:var(--status-idle); }

/* 7.5 Meter / voortgangsbalk */
.brw .meter{ display:flex; align-items:center; gap:var(--space-2); }
/* display:block is nodig — als <span> gebruikt negeert een inline element height. */
.brw .meter .track{ display:block; flex:1; height:6px; border-radius:3px; background:var(--border); overflow:hidden; min-width:60px; }
.brw .meter .fill{ display:block; height:100%; border-radius:3px; background:var(--status-ok); }
.brw .meter .fill.warning { background:var(--status-warning); }
.brw .meter .fill.critical{ background:var(--status-critical); }
.brw .meter .n{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-weight:600; min-width:36px; text-align:right; font-size:13px; }

/* 7.6 Legenda */
.brw .legend{ display:flex; gap:var(--space-5); flex-wrap:wrap; font-size:13px; color:var(--ink-secondary); }
.brw .legend .item{ display:flex; align-items:center; gap:var(--space-2); }
.brw .legend .swatch{ width:11px; height:11px; border-radius:3px; flex:none; }

/* 7.7 Filters */
.brw .filters{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:18px; }
.brw select,.brw .filters select{
  font-family:var(--font-body); font-size:13.5px; color:var(--ink);
  background:var(--panel-2); border:1px solid var(--border-strong); border-radius:7px;
  padding:8px 30px 8px 12px; appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238A8578'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
}
.brw .filters .reset{
  font-family:var(--font-body); font-size:13px; color:var(--ink-muted);
  background:none; border:1px solid transparent; cursor:pointer;
  padding:8px 4px; text-decoration:underline; text-underline-offset:3px;
}
.brw .filters .reset:hover{ color:var(--ink); }
.brw .result-count{ font-size:13px; color:var(--ink-muted); margin-left:auto; font-variant-numeric:tabular-nums; }

/* 7.8 Tabel */
.brw .table-scroll{
  overflow-x:auto; border:1px solid var(--border);
  border-radius:var(--radius); background:var(--panel);
}
.brw table{ border-collapse:collapse; width:100%; }
.brw thead th{
  position:sticky; top:0; background:var(--panel); text-align:left; font-size:11px;
  text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted); font-weight:600;
  padding:12px 14px; border-bottom:1px solid var(--border); white-space:nowrap; user-select:none;
}
.brw thead th[aria-sort]{ cursor:pointer; }
.brw thead th[aria-sort]:hover,.brw thead th[aria-sort]:not([aria-sort="none"]){ color:var(--ink); }
.brw tbody td{ padding:12px 14px; border-bottom:1px solid var(--border); vertical-align:middle; font-size:13.5px; }
.brw tbody tr.row{ cursor:pointer; }
.brw tbody tr.row:hover,.brw tbody tr.row.open{ background:var(--panel-2); }
.brw .place{ font-weight:600; }
.brw .street{ color:var(--ink-muted); font-size:12.5px; }
.brw tr.detail-row td{ padding:0; border-bottom:1px solid var(--border); }
.brw .detail-inner{ padding:16px 14px 20px 40px; background:var(--panel-2); }
.brw .detail-inner h4{
  font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-muted); margin:0 0 10px; font-weight:600;
}

/* 7.9 AI-oppervlakken — twee vormen, visueel uit elkaar gehouden.
       ai-panel  = paginascope-assistent (zijpaneel)
       ai-insight = widgetscope-analyse (inline kaart binnen één widget) */
.brw .ai-panel{
  background:var(--panel); border-left:1px solid var(--border);
  display:flex; flex-direction:column; width:280px; min-width:0;
}
.brw .ai-panel-head{
  display:flex; align-items:center; gap:var(--space-2);
  padding:var(--space-4) var(--space-5); border-bottom:1px solid var(--border);
  font-weight:700; font-size:15px;
}
.brw .ai-badge{
  font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:2px 6px; border-radius:var(--radius-pill);
  background:var(--accent-fill); color:var(--accent);
}
.brw .ai-suggestion{
  display:block; width:100%; text-align:left; font-family:var(--font-body); font-size:13px;
  color:var(--ink-secondary); background:var(--panel-2);
  border:1px solid var(--border); border-radius:var(--radius);
  padding:10px 12px; margin-bottom:var(--space-2); cursor:pointer;
}
.brw .ai-suggestion:hover{ border-color:var(--border-strong); color:var(--ink); }
.brw .ai-insight{
  border:1px solid var(--border); border-left:3px solid var(--accent);
  border-radius:var(--radius); background:var(--panel-2);
  padding:var(--space-4) var(--space-5); margin-top:var(--space-4);
}
.brw .ai-insight h4{ display:flex; align-items:center; gap:var(--space-2); font-size:13.5px; margin:0 0 var(--space-3); }
.brw .ai-insight ul{ margin:0 0 var(--space-3); padding-left:18px; font-size:13px; color:var(--ink-secondary); line-height:1.6; }
/* Herkomst is verplicht bij elk AI-oppervlak. */
.brw .ai-sources{ font-size:11.5px; color:var(--ink-muted); border-top:1px solid var(--border); padding-top:var(--space-2); margin-top:var(--space-3); }
.brw .ai-disclaimer{ font-size:11px; color:var(--ink-muted); line-height:1.5; padding:var(--space-3) var(--space-5); }

/* 7.10 Lege en foutstaat */
.brw .empty-state{ padding:60px 20px; text-align:center; color:var(--ink-muted); }
.brw .error-state{
  padding:var(--space-5); text-align:left; color:var(--status-critical);
  background:var(--status-critical-bg); border-radius:var(--radius); font-size:13.5px;
}
.brw .stale-note{ font-size:11.5px; color:var(--status-warning); }

/* 7.11 Tooltip */
.brw .tooltip{
  position:fixed; pointer-events:none; z-index:60;
  background:var(--ink); color:var(--page);
  font-size:12.5px; padding:9px 12px; border-radius:7px; box-shadow:var(--shadow);
  max-width:240px; line-height:1.45; opacity:0;
  transition:opacity .08s ease; transform:translate(-50%,-100%);
}
.brw .tooltip b{ display:block; margin-bottom:3px; }
.brw .tooltip .t-row{ display:flex; justify-content:space-between; gap:14px; }
.brw .tooltip .t-row + .t-row{ margin-top:2px; }

/* ----------------------------------------------------------------------------
   8. GRAFIEKEN (inline SVG, geen bibliotheek)
   ---------------------------------------------------------------------------- */
.brw .chart-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:var(--space-5); align-items:stretch; }
@media (max-width:860px){ .brw .chart-grid{ grid-template-columns:1fr; } }
.brw .side-charts{ display:flex; flex-direction:column; gap:var(--space-5); }
.brw svg text{ font-family:var(--font-mono); }
.brw .bar{ cursor:pointer; }
.brw .bar:hover,.brw .hbar:hover rect{ filter:brightness(1.08); }
.brw .axis-label{ fill:var(--ink-muted); font-size:11px; }
.brw .value-label{ fill:var(--ink); font-size:12px; font-weight:600; }
.brw .value-label.dim{ fill:var(--ink-muted); font-weight:500; }
.brw .hbar-label{ fill:var(--ink-secondary); font-size:12px; }
.brw .hbar-value{ fill:var(--ink); font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; }
.brw .partial-tag{ fill:var(--ink-muted); font-size:9.5px; font-style:italic; }
.brw .chart-filter{
  display:flex; align-items:center; gap:var(--space-2);
  margin-top:14px; padding-top:var(--space-3); border-top:1px solid var(--border);
}
.brw .chart-filter label{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted); font-weight:600; }

/* ----------------------------------------------------------------------------
   10. HUISSTIJL-SHELL (2026-10-15) -- header, subnav, tegels, chat, inlog en footer in de stijl van brandweer.nl/kennemerland.
       Alleen rolvariabelen (--brand, --topbar, --ink, --border, --panel, --page, --footer-bg ...); nooit --brw-* in een component.
       Gemeten maten: topbalk 38px, rode balk 70px met schuine afsnijding rechts en wit logo, sticky subnav 54px (items 15px/700),
       grid max 1170px, 3 kolommen, gap 32px, 1 kolom op mobiel; kaarten wit, radius 20px, zonder schaduw; lijnen #E6E6E6.
       Typografie: h1 42/52 700, h2 28/40 700, h3 20/28 800, body 16/24 (Open Sans, zelf gehost).
   ---------------------------------------------------------------------------- */
.brw-app.hs, .brw-app .hs{ font-size:16px; line-height:24px; }
.hs-skip{ position:absolute; left:-9999px; top:0; background:var(--brand); color:var(--brand-ink); padding:10px 16px; z-index:100; font-weight:700; }
.hs-skip:focus{ left:8px; top:8px; }

.hs-topbar{ background:var(--topbar); height:38px; border-bottom:1px solid var(--border); }
.hs-topbar .hs-in{ height:38px; display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:13px; color:var(--ink-secondary); }
.hs-topbar a, .hs-topbar button{ color:var(--ink); font-weight:600; font-size:13px; background:none; border:0; cursor:pointer; padding:4px 0; text-decoration:none; font-family:inherit; }
.hs-topbar a:hover, .hs-topbar button:hover{ text-decoration:underline; }
/* Themaschakelaar (PORTAAL-THEMA): drie knoppen Systeem / Licht / Donker in de topbalk; aria-pressed draagt de keuze, niet alleen de kleur. Alleen rolvariabelen. */
.thema-schakelaar{ margin-left:auto; display:inline-flex; gap:2px; padding:2px; border:1px solid var(--border-strong); border-radius:var(--radius-pill); background:var(--panel); }
.thema-schakelaar button{ border:0; cursor:pointer; font-family:inherit; background:none; min-height:26px; padding:0 12px; border-radius:var(--radius-pill); font-weight:600; font-size:12px; color:var(--ink-secondary); text-decoration:none; }
.thema-schakelaar button:hover{ text-decoration:none; color:var(--ink); }
.thema-schakelaar button[aria-pressed="true"]{ background:var(--ink); color:var(--panel); }
.thema-schakelaar button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.hs-header{ background:var(--brand); height:70px; position:relative; overflow:hidden; }
.hs-header::after{ /* de schuine afsnijding rechts: een vlak in de topbalkkleur dat de rechterrand diagonaal wegsnijdt */
  content:""; position:absolute; top:0; right:0; width:min(34vw,420px); height:100%; background:var(--page);
  clip-path:polygon(100% 0, 100% 100%, 0 100%, 72px 0); }
.hs-header .hs-in{ height:70px; display:flex; align-items:center; position:relative; z-index:1; }
.hs-logo{ display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--brand-ink); }
.hs-logo img{ height:46px; width:auto; filter:brightness(0) invert(1); display:block; }
.hs-logo .hs-naam{ font-weight:800; font-size:18px; line-height:22px; }

.hs-subnav{ background:var(--panel); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:20; height:54px; }
.hs-subnav .hs-in{ height:54px; display:flex; align-items:stretch; gap:8px; overflow-x:auto; scrollbar-width:none; }
.hs-subnav a{ display:flex; align-items:center; padding:0 16px; font-size:15px; font-weight:700; color:var(--ink); text-decoration:none;
  border-bottom:4px solid transparent; white-space:nowrap; }
.hs-subnav a:hover{ color:var(--brand); }
.hs-subnav a[aria-current="page"]{ border-bottom-color:var(--brand); color:var(--brand); }

.hs-in{ max-width:var(--content-max); margin:0 auto; padding:0 24px; width:100%; }
.hs-main{ max-width:var(--content-max); margin:0 auto; padding:40px 24px 64px; min-height:60vh; }
.hs-main h1{ font-size:42px; line-height:52px; font-weight:700; margin:0 0 16px; letter-spacing:0; text-wrap:balance; }
.hs-main h2{ font-size:28px; line-height:40px; font-weight:700; margin:40px 0 16px; }
.hs-main h3{ font-size:20px; line-height:28px; font-weight:800; margin:0 0 8px; }
.hs-main p{ margin:0 0 16px; }
.hs-lede{ font-size:18px; line-height:28px; color:var(--ink-secondary); max-width:720px; margin-bottom:32px; }

.hs-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; }
@media (max-width:900px){ .hs-grid{ grid-template-columns:1fr; } .hs-main h1{ font-size:32px; line-height:40px; } .hs-main h2{ font-size:24px; line-height:32px; }
  .hs-header::after{ width:90px; } .hs-logo .hs-naam{ display:none; } }
.hs-tegel{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-kaart); padding:28px; display:flex; flex-direction:column; gap:8px;
  text-decoration:none; color:var(--ink); box-shadow:none; min-height:190px; }
a.hs-tegel:hover{ border-color:var(--brand); }
a.hs-tegel:focus-visible{ outline:3px solid var(--brand); outline-offset:3px; }
.hs-tegel .hs-pijl{ margin-top:auto; font-weight:700; color:var(--brand); }
.hs-tegel p{ margin:0; color:var(--ink-secondary); }
.hs-tegel.hs-info{ background:var(--panel-2); }
.hs-tegel .hs-binnenkort{ font-size:13px; font-weight:700; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.06em; }

.hs-knop{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 22px; border-radius:999px; background:var(--brand);
  color:var(--brand-ink); font-weight:700; font-size:16px; border:2px solid var(--brand); cursor:pointer; font-family:inherit; text-decoration:none; }
.hs-knop:hover{ filter:brightness(.92); }
.hs-knop:disabled{ opacity:.55; cursor:default; }
.hs-knop.hs-licht{ background:var(--wit); color:var(--brand); }
.hs-voorbeeld{ display:inline-flex; align-items:center; min-height:40px; padding:0 18px; border-radius:999px; background:var(--panel); color:var(--ink);
  border:1px solid var(--border-strong); font-size:15px; font-weight:600; cursor:pointer; font-family:inherit; text-align:left; }
.hs-voorbeeld:hover{ border-color:var(--brand); color:var(--brand); }

/* `.brw footer` (rapportage) heeft specificiteit 0,1,1; deze regel moet er bovenop */
.brw footer.hs-footer{ background:var(--footer-bg); color:var(--footer-ink); font-size:14px; line-height:22px; margin-top:0; padding-top:0; border-top:0; display:block; }
.hs-footer .hs-in{ padding-top:28px; padding-bottom:28px; display:flex; flex-wrap:wrap; gap:8px 32px; justify-content:space-between; }
.brw footer.hs-footer a{ color:var(--footer-ink); }
.hs-versie{ font-family:var(--font-mono); font-size:13px; }

/* chat */
.hs-chat{ display:grid; grid-template-columns:minmax(0,1fr); gap:24px; max-width:860px; }
.hs-vraagrij{ display:flex; gap:12px; align-items:flex-end; }
.hs-vraagrij textarea{ flex:1; min-height:56px; max-height:200px; resize:vertical; border:1px solid var(--border-strong); border-radius:16px; padding:14px 16px;
  font:inherit; color:var(--ink); background:var(--panel); }
.hs-vraagrij textarea:focus-visible{ outline:3px solid var(--brand); outline-offset:1px; border-color:var(--brand); }
.hs-voorbeelden{ display:flex; flex-wrap:wrap; gap:10px; }
.hs-bericht{ border:1px solid var(--border); border-radius:var(--radius-kaart); padding:20px 24px; background:var(--panel); }
.hs-bericht.hs-vraag{ background:var(--panel-2); border-color:transparent; font-weight:600; }
.hs-bericht .hs-tekst{ white-space:pre-wrap; overflow-wrap:anywhere; }
.hs-bronnen{ margin-top:14px; padding-top:12px; border-top:1px solid var(--border); font-size:14px; color:var(--ink-secondary); }
.hs-bronnen .hs-chip{ display:inline-block; background:var(--panel-2); border:1px solid var(--border); border-radius:999px; padding:2px 12px; margin:4px 8px 0 0; font-size:13px; }
.hs-bronnen a.hs-chip{ color:var(--brand); font-weight:600; text-decoration:none; }
.hs-bronnen a.hs-chip:hover{ text-decoration:underline; }
.hs-melding{ color:var(--status-critical); font-weight:600; }
.hs-bezig{ color:var(--ink-muted); }

/* inloggen in huisstijl */
.hs-inlog{ max-width:520px; margin:48px auto; }
.hs-inlog label{ display:block; font-weight:700; margin:16px 0 6px; }
.hs-inlog input[type=email]{ width:100%; min-height:48px; border:1px solid var(--border-strong); border-radius:12px; padding:0 14px; font:inherit; }
.hs-inlog input:focus-visible{ outline:3px solid var(--brand); outline-offset:1px; border-color:var(--brand); }

/* portaalshell (ADR-0205, 2026-10-16): impersonatiebanner, widgetplaatshouder, kiosk en 403. Alleen rolvariabelen. */
.hs-impersonatie{ position:sticky; top:0; z-index:50; display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:10px 16px;
  background:var(--status-warning-bg); color:var(--ink); border-bottom:3px solid var(--status-warning); font-weight:700; }
.hs-impersonatie button{ margin-left:auto; min-height:36px; padding:0 16px; border-radius:999px; border:2px solid currentColor;
  background:transparent; color:inherit; font:inherit; cursor:pointer; }
.hs-widgets{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; margin:24px 0; }
.hs-plaatshouder{ border:2px dashed var(--border-strong); border-radius:var(--radius-kaart); padding:20px; background:var(--panel); }
.hs-plaatshouder h3{ margin:0 0 8px; }
.hs-plaatshouder .hs-scope{ font-family:var(--font-mono, monospace); color:var(--ink-muted); word-break:break-all; }
.hs-plaatshouder .hs-ai{ display:inline-block; margin-top:12px; color:var(--ink-muted); font-style:italic; }
.hs-kiosk{ min-height:100vh; padding:24px; background:var(--page); color:var(--ink); box-sizing:border-box; }
.hs-kiosk h1{ margin:0 0 8px; }
.hs-kiosk .hs-widgets{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.hs-verboden{ max-width:640px; margin:48px auto; }
.hs-beheer section{ margin:32px 0; }
.hs-beheer .hs-tabel{ overflow-x:auto; }
.hs-beheer table{ width:100%; border-collapse:collapse; }
.hs-beheer th, .hs-beheer td{ text-align:left; padding:8px; border-bottom:1px solid var(--border); vertical-align:top; }
.hs-beheer input[type=email], .hs-beheer input[type=text]{ min-height:44px; border:1px solid var(--border-strong); border-radius:12px; padding:0 12px; font:inherit; min-width:260px; }
/* Mission Control (OC-96): lijsten als kaarten zodat er op 390 px geen horizontale scroll ontstaat; alleen rolvariabelen */
.hs-mc-lijst{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.hs-mc-lijst li{ border:1px solid var(--border); border-radius:12px; padding:10px 12px; background:var(--panel); overflow-wrap:anywhere; }
.hs-mc-filter{ max-width:360px; margin:16px 0; }
.hs-mc-filter select{ min-height:44px; width:100%; border:1px solid var(--border-strong); border-radius:12px; padding:0 12px; font:inherit; background:var(--panel); color:var(--ink); }
.hs-mc-filter select:focus-visible, .hs-mc .hs-knop:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
.hs-mc-band{ border:1px solid var(--border-strong); border-left:6px solid var(--brand); border-radius:12px; padding:10px 12px; background:var(--panel); overflow-wrap:anywhere; }
@media (max-width:640px){ .hs-kiosk .hs-widgets{ grid-template-columns:1fr; } .hs-beheer input[type=email], .hs-beheer input[type=text]{ min-width:0; width:100%; } }

@media (prefers-reduced-motion:reduce){ .hs-knop, .hs-tegel{ transition:none; } }

/* ----------------------------------------------------------------------------
   9. PRINT — een rapport moet op papier kloppen.
   ---------------------------------------------------------------------------- */
@media print{
  .brw{ background:var(--wit); font-size:11pt; }
  .brw .app-nav,.brw .ai-panel,.brw .filters,.brw .tooltip{ display:none !important; }
  .brw .card,.brw .widget,.brw .kpi{ box-shadow:none; }
  .brw section{ break-inside:avoid; margin-top:24pt; }
  .brw .table-scroll{ overflow:visible; }
}

@media (prefers-reduced-motion:reduce){ .brw *{ transition:none !important; animation:none !important; } }

/* 10b. Mobiel en lange inhoud (2026-10-15): niets mag de pagina breder maken dan het scherm. */
.hs-main, .hs-chat, .hs-bericht{ min-width:0; max-width:100%; }
.hs-bericht, .hs-bronnen, .hs-chip{ overflow-wrap:anywhere; }
.hs-bronnen .hs-chip{ max-width:100%; white-space:normal; }
.hs-vraagrij{ flex-wrap:wrap; }
.hs-vraagrij textarea{ min-width:220px; }
.hs .vocab-zoek{ flex-wrap:wrap; max-width:none; }
.hs .vocab-zoek input[type=search]{ min-width:240px; }
.brw.hs{ overflow-x:clip; }

/* 10c. Tabbladen onder de subnav (ontologiebrowser: "Heelal en assistent" | "Begrippen en verantwoording") */
.hs-tabs{ background:var(--panel-2); border-bottom:1px solid var(--border); }
.hs-tabs .hs-in{ display:flex; gap:8px; height:48px; align-items:stretch; }
.hs-tabs a{ display:flex; align-items:center; padding:0 18px; font-size:15px; font-weight:600; color:var(--ink); text-decoration:none; border-bottom:3px solid transparent; }
.hs-tabs a:hover{ color:var(--brand); }
.hs-tabs a[aria-current="page"]{ border-bottom-color:var(--brand); color:var(--brand); font-weight:700; }

/* 10d. Startpagina in de vorm van brandweer.nl/kennemerland (2026-10-16): een beeldband over de volle breedte met een donker titelvlak,
   daaronder de tekst links en een rode kaart rechts. Het beeld is het heelal zelf (design/heelal-hero.webp, een opname van /ontologie);
   het heelal is in elk thema donker, dus het titelvlak is dat ook. */
.hs-beeld{ position:relative; height:clamp(260px,38vw,540px); background:var(--beeld-donker); overflow:hidden; }
.hs-beeld img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 45%; display:block; }
.hs-beeld .hs-in{ position:relative; height:100%; display:flex; align-items:flex-end; justify-content:center; padding-bottom:clamp(24px,6vw,72px); }
.hs-titelvlak{ background:var(--sluier); color:var(--wit); border-radius:var(--radius-kaart); padding:24px 32px; text-align:center; max-width:640px;
  backdrop-filter:blur(2px); }
.hs-titelvlak h1{ color:var(--wit); margin:0; font-size:42px; line-height:52px; font-weight:700; }
.hs-titelvlak p{ margin:6px 0 0; font-size:16px; line-height:24px; color:var(--wit); opacity:.85; }
.hs-start{ display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:48px; align-items:start; }
.hs-start article h2:first-child{ margin-top:0; }
.hs-kaart-rood{ background:var(--brand); color:var(--brand-ink); border-radius:var(--radius-kaart); padding:28px; }
.hs-main .hs-kaart-rood h2{ color:var(--brand-ink); font-size:20px; line-height:28px; font-weight:800; margin:0 0 16px; }
.hs-kaart-rood ul{ list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.hs-kaart-rood a{ color:var(--brand-ink); font-weight:700; text-decoration:underline; text-underline-offset:3px; display:block; padding:8px 0; }
.hs-kaart-rood a:hover{ text-decoration-thickness:2px; }
.hs-kaart-rood a:focus-visible{ outline:3px solid var(--brand-ink); outline-offset:2px; }
.hs-kaart-rood .hs-klein{ margin:16px 0 0; font-size:14px; line-height:22px; opacity:.9; }
@media (max-width:900px){ .hs-start{ grid-template-columns:1fr; gap:32px; } .hs-titelvlak{ padding:16px 20px; }
  .hs-titelvlak h1{ font-size:28px; line-height:36px; } }


/* 10e. Widget LiveOp x VP-deltakaart (N61, 2026-10-16): alleen rolvariabelen. De zes banden van de deltaschaal gebruiken de statusrollen: dat is een
   betekenisschaal (VP-status eerder of later dan de GPS-beweging), geen merkkleur. */
.hs-dk{ border:1px solid var(--border); border-radius:var(--radius-kaart); padding:20px; background:var(--panel); grid-column:1 / -1; }
.hs-dk h3{ margin:0 0 8px; }
.hs-dk-filters{ display:flex; flex-wrap:wrap; gap:8px 20px; border:1px solid var(--border); border-radius:12px; padding:10px 14px; margin:12px 0; }
.hs-dk-filters legend{ font-weight:700; padding:0 6px; }
.hs-dk-filters label{ display:inline-flex; align-items:center; gap:6px; }
.hs-dk-legenda{ display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }
.hs-dk-chip{ display:inline-block; padding:2px 10px; border-radius:999px; font-weight:700; font-size:13px; border:1px solid var(--border); background:var(--panel-2); color:var(--ink); }
.hs-dk-chip.dk-b0{ background:var(--status-normal-bg); color:var(--status-normal); border-color:var(--status-normal); }
.hs-dk-chip.dk-b1{ background:var(--status-idle-bg); color:var(--ink); border-color:var(--status-idle); }
.hs-dk-chip.dk-b2{ background:var(--status-ok-bg); color:var(--status-ok); border-color:var(--status-ok); }
.hs-dk-chip.dk-b3{ background:var(--status-warning-bg); color:var(--ink); border-color:var(--status-warning); }
.hs-dk-chip.dk-b4{ background:var(--status-critical-bg); color:var(--status-critical); border-color:var(--status-critical); }
.hs-dk-chip.dk-b5{ background:var(--status-critical); color:var(--brand-ink); border-color:var(--status-critical); }
.hs-dk-tabelwrap{ overflow-x:auto; margin:8px 0; }
.hs-dk-tabel{ width:100%; border-collapse:collapse; font-size:15px; }
.hs-dk-tabel caption{ text-align:left; padding-bottom:6px; }
.hs-dk-tabel th, .hs-dk-tabel td{ padding:8px 10px; border-bottom:1px solid var(--border); text-align:left; }
.hs-dk-tabel thead th{ font-weight:700; white-space:nowrap; }
.hs-dk-tabel .hs-getal{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.hs-dk-tabel tbody tr{ cursor:pointer; }
.hs-dk-tabel tbody tr:hover, .hs-dk-tabel tbody tr[aria-selected="true"]{ background:var(--panel-2); }
.hs-dk-tabel tbody tr:focus-visible{ outline:3px solid var(--brand); outline-offset:-3px; }
.hs-dk-fx{ color:var(--ink-muted); cursor:help; }
.hs-dk-detail{ background:var(--panel-2); border-radius:12px; padding:10px 14px; margin:8px 0; }
.hs-dk-bron{ color:var(--ink-muted); }

/* 10f. Formulieren in /beheer (2026-10-16): label boven het veld, velden naast elkaar op breed scherm, onder elkaar op smal. */
.hs-formraster{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px 20px; align-items:end; max-width:900px; margin-top:16px; }
.hs-veld{ display:flex; flex-direction:column; gap:6px; }
.hs-veld label{ font-weight:700; }
.hs-formraster .hs-veld input{ width:100%; min-width:0; }
.hs-veld-knop{ justify-content:flex-end; }
.hs-main section + .hs-start{ margin-top:48px; }
.hs-dk-kaart{ height:420px; border:1px solid var(--border); border-radius:12px; margin:8px 0; background:var(--panel-2); z-index:0; }
.hs-dk-linkknop{ background:none; border:0; padding:0; color:var(--brand); font:inherit; font-weight:700; text-decoration:underline; cursor:pointer; }
@media (max-width:640px){ .hs-dk-kaart{ height:320px; } }
.hs-dk-laag{ display:inline-flex; gap:4px; margin:8px 0 4px; padding:3px; border:1px solid var(--border); border-radius:999px; background:var(--panel-2); }
.hs-dk-tab{ border:0; background:none; color:var(--ink); font:inherit; font-weight:700; padding:6px 16px; border-radius:999px; cursor:pointer; }
.hs-dk-tab[aria-pressed="true"]{ background:var(--ink); color:var(--page); }
.hs-dk-tab:focus-visible{ outline:3px solid var(--brand); outline-offset:2px; }

/* 10g. Menutegels met beeld op de startpagina (2026-10-16), naar brandweer.nl/kennemerland: beeld boven, tekst eronder, witte kaart met ronde hoeken. Alleen rolvariabelen. */
.hs-beeldtegel{ padding:0; overflow:hidden; gap:0; text-decoration:none; color:inherit; transition:transform .15s ease, border-color .15s ease; }
a.hs-beeldtegel:hover{ transform:translateY(-3px); }
.hs-tegel-beeld{ height:200px; background:var(--panel-2); overflow:hidden; border-bottom:1px solid var(--border); }
.hs-tegel-beeld .pl-svg, .hs-tegel-foto{ display:block; width:100%; height:100%; object-fit:cover; }
.hs-tegel-foto{ object-position:55% 45%; background:var(--beeld-donker); }
.hs-beeldtegel .hs-tegel-tekst{ padding:22px 28px 26px; display:flex; flex-direction:column; gap:8px; flex:1; }
.hs-beeldtegel .hs-tegel-tekst h3{ margin:0; }
.hs-beeldtegel .hs-tegel-tekst .hs-pijl{ margin-top:auto; padding-top:6px; }
.pl-achter{ fill:var(--panel-2); }
.pl-paneel{ fill:var(--panel); stroke:var(--border-strong); stroke-width:1.5; }
.pl-lijnvlak{ fill:var(--border-strong); }
.pl-lijn{ stroke:var(--border-strong); stroke-width:3; fill:none; stroke-linecap:round; }
.pl-pijl{ stroke:var(--ink-muted); stroke-width:3; fill:none; stroke-linecap:round; }
.pl-trend{ stroke:var(--ink); stroke-width:4; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.pl-land{ fill:var(--panel); stroke:var(--border-strong); stroke-width:2; }
.pl-merk{ fill:var(--brand); }
.pl-normaal{ fill:var(--status-normal); }
.pl-ok{ fill:var(--status-ok); }
.pl-waarschuwing{ fill:var(--status-warning); }
.pl-kritiek{ fill:var(--status-critical); }
.pl-leeg{ fill:var(--status-idle); }
.pl-bol{ fill-opacity:.8; stroke:var(--panel); stroke-width:2; }
@media (prefers-reduced-motion:reduce){ .hs-beeldtegel{ transition:none; } a.hs-beeldtegel:hover{ transform:none; } }
.pl-trend-vul{ fill:var(--ink); }
/* 10h. Donker thema voor de shell (2026-10-16): de subnav had een letterlijk wit vlak (onleesbaar met lichte letters) en de pijlen en actieve items gebruikten het merkrood,
   dat op donker te weinig contrast geeft. Rolvariabelen: --panel en --accent (licht: rood, donker: blauw). */
.hs-subnav{ background:var(--panel); }
.hs-subnav a:hover{ color:var(--accent); }
.hs-subnav a[aria-current="page"]{ border-bottom-color:var(--accent); color:var(--accent); }
.hs-tegel .hs-pijl, a.hs-tegel:hover{ color:var(--accent); }
a.hs-tegel:hover{ border-color:var(--accent); }

/* ===========================================================================================================================
   10i. HUISSTIJL DATAPAGINAS (ADR-0207, docs/ontwerp/huisstijl-data.md). Eén ontwerp voor elke datapagina op brandweerdashboard.nl.
   Tokens: frontend/src/shell/huisstijl-data/tokens.json (getoetst op contrast en kleurenblindheid, scripts/toets_kleuren.py).
   Signaalrood (--hd-rood) alleen voor norm, drempel en "nu"; nooit voor een reeks. Postkleuren in vaste volgorde, een post houdt zijn kleur.
   Donker: volgt het systeemthema, tenzij data-theme="light" is gezet; data-theme="dark" forceert donker. Componenten gebruiken UITSLUITEND deze variabelen.
   =========================================================================================================================== */
.hd{
  --hd-antraciet:#2B2D33; --hd-rood:#C11A1A; --hd-context:#C9CCD2; --hd-lijn:#E1E4EA; --hd-ondergrond:#F5F6F8; --hd-kaart:#FFFFFF;
  --hd-inkt:#2B2D33; --hd-inkt2:#4B4E56; --hd-inkt3:#6B707B; --hd-goed:#0E8A5C; --hd-waarschuwing:#9A6300; --hd-kritiek:#C11A1A;
  --hd-post-nvp:#0072B2; --hd-post-hlw:#D55E00; --hd-post-hlo:#009E73; --hd-post-hfd:#C4870A; --hd-post-vls:#B85C8C;
  --hd-band-rand:#4B4E56; --hd-band-tekst:#FFFFFF; --hd-band-tekst2:#D7D9DD; --hd-band-tekst3:#B7BBC3; --hd-band-rood:#E5544E; --hd-rood-zacht:#F6E4E4; --hd-goed-op-band:#3FC98C;
  --hd-kop:Bahnschrift,"Barlow Semi Condensed","Arial Narrow",sans-serif; --hd-tekst:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  --hd-delta-1:#CDE2FB; --hd-delta-2:#9CC3F2; --hd-delta-3:#5E98DB; --hd-delta-4:#3478C4; --hd-delta-5:#1C5CAB;
  --hd-afw-1:#2f6fed; --hd-afw-2:#5fa8f5; --hd-afw-3:#6e7b8a; --hd-afw-4:#e3b341; --hd-afw-5:#f0883e; --hd-afw-6:#e5484d;
  --hd-punt-rand:#1b2430;
  --hd-risico-laag:#E39A94; --hd-risico-middel:#D25A52; --hd-risico-hoog:#B3201C; --hd-risico-zeerhoog:#6E0F0F;
  --hd-div-verhogend:#B3201C; --hd-div-midden:#C9CCD2; --hd-div-verlagend:#2A6FB5;
  --hd-kaart-filter:none;
  background:var(--hd-ondergrond); color:var(--hd-inkt); font-family:var(--hd-tekst);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hd:not([data-theme="light"]), :root:not([data-theme="light"]) .brw-app:not([data-theme="light"]) .hd:not([data-theme="light"]){
    --hd-rood:#E5544E; --hd-context:#6B707B; --hd-lijn:#3A3D45; --hd-ondergrond:#26282E; --hd-kaart:#1E2024; --hd-inkt:#F1F2F4; --hd-inkt2:#C9CCD2; --hd-inkt3:#9BA1AC;
    --hd-goed:#3FC98C; --hd-waarschuwing:#E3AC3E; --hd-kritiek:#E5544E; --hd-rood-zacht:#3A2426;
    --hd-post-nvp:#3D93D4; --hd-post-hlw:#D96A28; --hd-post-hlo:#00A67D; --hd-post-hfd:#B88000; --hd-post-vls:#C2639A;
  --hd-kaart-filter:invert(1) hue-rotate(180deg) brightness(.8) contrast(.92);
  --hd-delta-1:#3E6FA8; --hd-delta-2:#5B8FCB; --hd-delta-3:#82AEE0; --hd-delta-4:#AECBEE; --hd-delta-5:#D7E6F8;
  --hd-afw-1:#2f6fed; --hd-afw-2:#5fa8f5; --hd-afw-3:#6e7b8a; --hd-afw-4:#e3b341; --hd-afw-5:#f0883e; --hd-afw-6:#e5484d;
  --hd-punt-rand:#1b2430;
  --hd-risico-laag:#F6CBC7; --hd-risico-middel:#EC918A; --hd-risico-hoog:#DF645C; --hd-risico-zeerhoog:#C73A33;
  --hd-div-verhogend:#E5544E; --hd-div-midden:#8A8F99; --hd-div-verlagend:#4C93DC;
  }
}
:root[data-theme="dark"] .hd, .brw-app[data-theme="dark"] .hd, .hd[data-theme="dark"]{
  --hd-rood:#E5544E; --hd-context:#6B707B; --hd-lijn:#3A3D45; --hd-ondergrond:#26282E; --hd-kaart:#1E2024; --hd-inkt:#F1F2F4; --hd-inkt2:#C9CCD2; --hd-inkt3:#9BA1AC;
  --hd-goed:#3FC98C; --hd-waarschuwing:#E3AC3E; --hd-kritiek:#E5544E; --hd-rood-zacht:#3A2426;
  --hd-post-nvp:#3D93D4; --hd-post-hlw:#D96A28; --hd-post-hlo:#00A67D; --hd-post-hfd:#B88000; --hd-post-vls:#C2639A;
  --hd-kaart-filter:invert(1) hue-rotate(180deg) brightness(.8) contrast(.92);
  --hd-delta-1:#3E6FA8; --hd-delta-2:#5B8FCB; --hd-delta-3:#82AEE0; --hd-delta-4:#AECBEE; --hd-delta-5:#D7E6F8;
  --hd-afw-1:#2f6fed; --hd-afw-2:#5fa8f5; --hd-afw-3:#6e7b8a; --hd-afw-4:#e3b341; --hd-afw-5:#f0883e; --hd-afw-6:#e5484d;
  --hd-punt-rand:#1b2430;
  --hd-risico-laag:#F6CBC7; --hd-risico-middel:#EC918A; --hd-risico-hoog:#DF645C; --hd-risico-zeerhoog:#C73A33;
  --hd-div-verhogend:#E5544E; --hd-div-midden:#8A8F99; --hd-div-verlagend:#4C93DC;
}
.hd *{box-sizing:border-box}
.hd .hd-getal{font-variant-numeric:tabular-nums; font-feature-settings:"tnum"}
/* Band */
.hd-band{background:var(--hd-antraciet); border-bottom:4px solid var(--hd-rood); color:var(--hd-band-tekst)}
.hd-band-in{max-width:1200px; margin:0 auto; padding:28px 32px 0; display:flex; flex-direction:column; gap:18px}
.hd-band-kop{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:20px}
.hd-band-oog{font-family:var(--hd-kop); font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--hd-band-tekst3)}
.hd-band h1{margin:6px 0 0; font-family:var(--hd-kop); font-size:44px; line-height:1.05; font-weight:600; color:var(--hd-band-tekst)}
.hd-band-sub{font-size:15px; color:var(--hd-band-tekst2); max-width:620px; margin-top:6px}
.hd-band-meta{display:flex; flex-wrap:wrap; gap:8px}
.hd-band-meta > div{border:1px solid var(--hd-band-rand); border-radius:8px; padding:8px 12px; display:flex; flex-direction:column; gap:2px}
.hd-band-meta span:first-child{font-size:11px; color:var(--hd-band-tekst3); text-transform:uppercase; letter-spacing:.08em}
.hd-band-meta span:last-child{font-size:14px; font-weight:600}
.hd-tabs{display:flex; gap:4px; flex-wrap:wrap}
.hd-tab{background:transparent; border:0; border-bottom:3px solid transparent; color:var(--hd-band-tekst3); font:inherit; font-size:15px; padding:10px 14px; min-height:44px; cursor:pointer}
.hd-tab[aria-selected="true"]{border-bottom-color:var(--hd-band-tekst); color:var(--hd-band-tekst); font-weight:600}
.hd-tab:focus-visible{outline:2px solid var(--hd-band-tekst); outline-offset:-2px}
.hd-main{max-width:1200px; margin:0 auto; padding:24px 32px 48px; display:flex; flex-direction:column; gap:20px}
/* Tegels */
.hd-tegels{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px}
.hd-tegel{background:var(--hd-kaart); border:1px solid var(--hd-lijn); border-radius:14px; padding:18px 20px; display:flex; flex-direction:column; gap:6px}
.hd-tegel-label{font-size:13px; color:var(--hd-inkt3)}
.hd-tegel-waarde{font-family:var(--hd-kop); font-size:36px; font-weight:600; line-height:1; color:var(--hd-inkt)}
.hd-tegel-voet{font-size:12px; color:var(--hd-inkt3)}
.hd-tegel-rij{display:flex; justify-content:space-between; align-items:flex-end; gap:10px}
.hd-hoofd{background:var(--hd-antraciet); border-color:var(--hd-antraciet); color:var(--hd-band-tekst); padding:20px 22px}
.hd-hoofd .hd-tegel-label{color:var(--hd-band-tekst2)}
.hd-hoofd .hd-tegel-waarde{font-size:64px; color:var(--hd-band-tekst)}
.hd-hoofd .hd-tegel-voet{color:var(--hd-band-tekst3); font-size:13px}
.hd-delta{font-weight:600; color:var(--hd-inkt2)}
.hd-delta-pijl{margin-right:2px}
.hd-delta[data-goed="ja"] .hd-delta-pijl{color:var(--hd-goed)} .hd-delta[data-goed="nee"] .hd-delta-pijl{color:var(--hd-kritiek)}
.hd-hoofd .hd-delta{color:var(--hd-band-tekst2)} .hd-hoofd .hd-delta[data-goed="ja"] .hd-delta-pijl{color:var(--hd-goed-op-band)} .hd-hoofd .hd-delta[data-goed="nee"] .hd-delta-pijl{color:var(--hd-band-rood)}
.hd-spark{flex:none}
.hd-spark polyline{fill:none; stroke:var(--hd-context); stroke-width:2; stroke-linejoin:round; stroke-linecap:round}
.hd-spark circle{fill:var(--hd-rood); stroke:var(--hd-kaart); stroke-width:2}
.hd-balk{height:8px; border-radius:4px; background:var(--hd-rood-zacht); overflow:hidden}
.hd-balk > div{height:8px; background:var(--hd-rood); border-radius:4px}
/* Postkiezer */
.hd-kiezer{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.hd-kiezer-label{font-size:13px; color:var(--hd-inkt3); margin-right:4px}
.hd-post{display:flex; align-items:center; gap:8px; min-height:40px; padding:0 14px; border-radius:20px; border:1px solid var(--hd-lijn); background:var(--hd-kaart); font:inherit; font-size:14px; color:var(--hd-inkt); cursor:pointer}
.hd-post[aria-pressed="true"]{border:2px solid var(--hd-inkt); font-weight:600}
.hd-post:focus-visible{outline:2px solid var(--hd-inkt); outline-offset:2px}
.hd-post-dot{width:10px; height:10px; border-radius:5px; flex:none}
/* Grafiekkaart */
.hd-rij{display:flex; flex-wrap:wrap; gap:16px}
.hd-rij > .hd-groot{flex:2 1 560px; min-width:0} .hd-rij > .hd-klein{flex:1 1 280px; min-width:0}
.hd-duo{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr)); gap:16px}
.hd-kaart{margin:0; background:var(--hd-kaart); border:1px solid var(--hd-lijn); border-radius:14px; padding:20px 22px 14px; display:flex; flex-direction:column; gap:10px; min-width:0}
.hd-kaart h2{margin:0; font-family:var(--hd-kop); font-size:22px; font-weight:600; color:var(--hd-inkt)}
.hd-kaart-sub{font-size:13px; color:var(--hd-inkt3)}
.hd-kaart svg{width:100%; height:auto; display:block; overflow:visible}
.hd-as text{font-size:11px; fill:var(--hd-inkt3)}
.hd-raster line{stroke:var(--hd-lijn); stroke-width:1}
.hd-norm line{stroke:var(--hd-rood); stroke-width:1} .hd-norm text{font-size:11px; font-weight:600; fill:var(--hd-rood)}
.hd-reeks-grijs{fill:none; stroke:var(--hd-context); stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round}
.hd-reeks{fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round}
.hd-eindlabel{font-size:12px; fill:var(--hd-inkt3)} .hd-eindlabel[data-uitgelicht="ja"]{font-size:13px; font-weight:700; fill:var(--hd-inkt)}
.hd-stip{stroke:var(--hd-kaart); stroke-width:2}
.hd-staaf-label{font-size:13px; font-weight:600; fill:var(--hd-inkt)} .hd-staaf-waarde{font-size:12px; fill:var(--hd-inkt)}
.hd-legenda{display:flex; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--hd-inkt2)}
.hd-legenda span{display:flex; align-items:center; gap:6px} .hd-legenda i{width:12px; height:12px; border-radius:3px; display:inline-block}
.hd-tabel-knop{align-self:flex-start; background:none; border:0; padding:0; font:inherit; font-size:12px; color:var(--hd-rood); text-decoration:underline; cursor:pointer; min-height:24px}
.hd-tabel-knop:focus-visible{outline:2px solid var(--hd-inkt); outline-offset:2px}
.hd-tabel{width:100%; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums}
.hd-tabel th,.hd-tabel td{padding:6px 8px; border-bottom:1px solid var(--hd-lijn); text-align:right} .hd-tabel th:first-child,.hd-tabel td:first-child{text-align:left}
.hd-tabel caption{text-align:left; font-size:12px; color:var(--hd-inkt3); padding-bottom:4px}
/* Wat valt op */
.hd-opvallend{background:var(--hd-kaart); border:1px solid var(--hd-lijn); border-radius:14px; padding:20px 22px; display:flex; flex-direction:column; gap:14px}
.hd-opvallend-kop{display:flex; justify-content:space-between; align-items:center; gap:8px}
.hd-opvallend h2{margin:0; font-family:var(--hd-kop); font-size:20px; font-weight:600}
.hd-ai{font-size:11px; color:var(--hd-inkt3); border:1px solid var(--hd-lijn); border-radius:10px; padding:3px 8px}
.hd-punt{display:flex; gap:12px; font-size:14px; line-height:1.45}
.hd-punt b{flex:none; width:28px; height:28px; border-radius:14px; background:var(--hd-rood-zacht); color:var(--hd-rood); font-weight:700; display:flex; align-items:center; justify-content:center}
/* Tijdnormstroom en herkomst */
.hd-stroom{background:var(--hd-kaart); border:1px solid var(--hd-lijn); border-radius:14px; padding:22px; display:flex; flex-direction:column; gap:16px}
.hd-stroom h2{margin:0; font-family:var(--hd-kop); font-size:22px; font-weight:600}
.hd-stroom-rij{display:flex; flex-wrap:wrap; align-items:stretch; gap:10px}
.hd-stap{flex:1 1 200px; background:var(--hd-ondergrond); border-radius:12px; padding:14px 16px; display:flex; flex-direction:column; gap:6px; font-weight:600}
.hd-stap small{font-weight:400; font-size:13px; color:var(--hd-inkt2)}
.hd-stap-nr{font-family:var(--hd-kop); font-size:13px; font-weight:700; color:var(--hd-rood); letter-spacing:.08em}
.hd-stap[data-uitkomst="ja"]{background:var(--hd-antraciet); color:var(--hd-band-tekst)} .hd-stap[data-uitkomst="ja"] small{color:var(--hd-band-tekst2)} .hd-stap[data-uitkomst="ja"] .hd-stap-nr{color:var(--hd-band-rood)}
.hd-pijl{display:flex; align-items:center; color:var(--hd-inkt3); font-size:20px}
.hd-herkomst{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font-size:12px; color:var(--hd-inkt3); border-top:1px solid var(--hd-lijn); padding-top:14px}
.hd-status{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--hd-inkt)}
.hd-status[data-soort="goed"] span:first-child{color:var(--hd-goed)} .hd-status[data-soort="waarschuwing"] span:first-child{color:var(--hd-waarschuwing)} .hd-status[data-soort="kritiek"] span:first-child{color:var(--hd-kritiek)}
.hd-melding{background:var(--hd-rood-zacht); color:var(--hd-inkt); border-radius:10px; padding:10px 14px; font-size:13px}
@media (max-width:640px){ .hd-band-in,.hd-main{padding-left:16px; padding-right:16px} .hd-band h1{font-size:32px} .hd-hoofd .hd-tegel-waarde{font-size:52px} }

/* 10i (vervolg). Deltaschaal van de LiveOP x VP-deltakaart (N67): sequentieel blauw, licht naar donker, voor het mediane verschil per kazerne; DATA, geen designsysteemkleur van de huisstijl. */
.hd-kaartvak{width:100%; height:460px; border-radius:10px; overflow:hidden; background:var(--hd-ondergrond)}
.hd-filters{display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; background:var(--hd-kaart); border:1px solid var(--hd-lijn); border-radius:14px; padding:14px 18px}
.hd-filters label{display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--hd-inkt3)}
.hd-filters select,.hd-filters input{min-height:40px; min-width:140px; border:1px solid var(--hd-lijn); border-radius:8px; padding:0 10px; font:inherit; font-size:14px; color:var(--hd-inkt); background:var(--hd-kaart)}
.hd-filters .hd-teller{margin-left:auto; font-size:13px; color:var(--hd-inkt2)}
.hd-schakel{display:flex; background:var(--hd-lijn); border-radius:10px; padding:3px; gap:2px}
.hd-schakel button{border:0; background:transparent; font:inherit; font-size:14px; min-height:36px; padding:0 14px; border-radius:8px; color:var(--hd-inkt2); cursor:pointer}
.hd-schakel button[aria-pressed="true"]{background:var(--hd-kaart); color:var(--hd-inkt); font-weight:600}
.hd-schakel button:focus-visible{outline:2px solid var(--hd-inkt); outline-offset:2px}
.hd-kaartkop{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:12px}
.hd-lagen{margin:0; background:var(--hd-kaart); border:1px solid var(--hd-lijn); border-radius:14px; padding:18px 20px; display:flex; flex-direction:column; gap:10px}
.hd-lagen legend{font-family:var(--hd-kop); font-size:18px; font-weight:600; padding:0 4px}
.hd-lagen label{display:flex; align-items:center; gap:10px; min-height:40px; font-size:14px}
.hd-lagen input{width:18px; height:18px; accent-color:var(--hd-inkt)}
.hd-schaal{display:flex; flex-wrap:wrap; gap:10px; font-size:12px; color:var(--hd-inkt2)}
.hd-schaal span{display:flex; align-items:center; gap:6px} .hd-schaal i{width:14px; height:14px; border-radius:3px; display:inline-block}
.hd-zijkolom{flex:1 1 280px; display:flex; flex-direction:column; gap:16px; min-width:0}
.hd-letop{background:var(--hd-rood-zacht); border-radius:14px; padding:18px 20px; display:flex; flex-direction:column; gap:8px; font-size:14px; line-height:1.5}
.hd-letop h2{margin:0; font-family:var(--hd-kop); font-size:18px; font-weight:600}
.hd-tabelkaart{background:var(--hd-kaart); border:1px solid var(--hd-lijn); border-radius:14px; padding:20px 22px; display:flex; flex-direction:column; gap:10px; min-width:0}
.hd-tabelkaart h2{margin:0; font-family:var(--hd-kop); font-size:22px; font-weight:600}
.hd-tabelkaart table{width:100%; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums}
.hd-tabelkaart th,.hd-tabelkaart td{padding:6px 8px; border-bottom:1px solid var(--hd-lijn); text-align:left; white-space:nowrap}
.hd-tabelkaart tr[aria-selected="true"]{background:var(--hd-ondergrond); font-weight:600}
.hd-tabelkaart tbody tr{cursor:pointer}
.hd-tabelscroll{overflow-x:auto}
.hd-paginering{display:flex; gap:10px; align-items:center; font-size:13px; color:var(--hd-inkt2)}
.hd-paginering button{min-height:36px; padding:0 12px; border:1px solid var(--hd-lijn); border-radius:8px; background:var(--hd-kaart); color:var(--hd-inkt); font:inherit; cursor:pointer}
.hd-geen-toegang{color:var(--hd-inkt3); font-style:italic}
/* Aantal in een cluster op de kaart: Leaflet tekent standaard een wit tooltipvak; hier alleen het getal, in de kaartkleur op de donkere cirkel. */
.leaflet-tooltip.hd-kaart-aantal{background:transparent; border:0; box-shadow:none; color:var(--hd-kaart); font-weight:700; font-size:12px; padding:0}
.leaflet-tooltip.hd-kaart-aantal::before{display:none}

/* Tekst in grafieken volgt het lettertype van de huisstijl (SVG-tekst valt anders terug op een standaardfont). */
.hd svg text{font-family:var(--hd-tekst)}
/* Aandeelbalk voor DATA (geen norm): deltaschaal in plaats van signaalrood; rood blijft alleen voor norm, drempel en nu. */
.hd-balk-data{background:var(--hd-delta-1)} .hd-balk-data > div{background:var(--hd-delta-5)}
.hd .leaflet-tile-pane{ filter:var(--hd-kaart-filter); }
.hd .leaflet-container{ background:var(--hd-ondergrond); }

/* DELTAKAART-WEERGAVE (Demo N67-kaart.md par. 11): paneel en legenda volgens het prototype; alleen rolvariabelen */
.hd-dkpaneel{display:flex; flex-direction:column; gap:10px}
.hd-dkpaneel h3{margin:6px 0 0; font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--hd-inkt2)}
.hd-dkkpi{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.hd-dkkpi div{background:var(--hd-ondergrond); border:1px solid var(--hd-lijn); border-radius:12px; padding:10px 12px}
.hd-dkkpi b{display:block; font-size:20px; font-weight:700; line-height:1.2; font-variant-numeric:tabular-nums}
.hd-dkkpi span{font-size:11px; color:var(--hd-inkt2); text-transform:uppercase; letter-spacing:.05em}
.hd-dkknop{display:flex; flex-wrap:wrap; gap:6px}
.hd-dkknop button{border:1px solid var(--hd-lijn); background:var(--hd-kaart); color:var(--hd-inkt); font:inherit; font-size:13px; min-height:36px; padding:0 12px; border-radius:8px; cursor:pointer}
.hd-dkknop button[aria-pressed="true"]{background:var(--hd-inkt); color:var(--hd-kaart); border-color:var(--hd-inkt)}
.hd-dkknop button:focus-visible{outline:2px solid var(--hd-inkt); outline-offset:2px}
.hd-dkleg{display:flex; flex-direction:column; gap:4px; font-size:13px}
.hd-dkleg div{display:flex; align-items:center; gap:8px}
.hd-dkleg i{margin-left:auto; font-style:normal; font-variant-numeric:tabular-nums; color:var(--hd-inkt2)}
.hd-dkbol{width:12px; height:12px; border-radius:50%; flex:none; border:1px solid var(--hd-kaart)}
.hd-dkpaneel label{font-size:13px}
.hd-dkpaneel select, .hd-dkpaneel input[type=range]{width:100%}
.hd-dkgeen{display:flex; align-items:center; justify-content:center; min-height:320px; padding:24px; text-align:center; background:var(--hd-ondergrond); border-radius:12px}
.hd-dkgetal{display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; color:var(--hd-inkt); text-shadow:0 0 3px var(--hd-kaart), 0 0 3px var(--hd-kaart); pointer-events:none}

/* ===========================================================================================================================
   10j. KOP GELIJK AAN brandweer.nl/kennemerland (OC-31, besluit Bernie 2026-10-21). Gemeten op de site (computed styles 2026-10-21): grijze topbalk 38px #f2f2f2;
   menubalk 70px wit met links een rood blok (Menu in wit, 16px, en het woordmerk) dat eindigt in een ronding van 20x70px, rechts "zoeken" met rood vergrootglas;
   daaronder de tabbalk (wit, items 15px/700 zwart, 54px, actieve tab met een zwarte onderstreep van 3px); pagina #f2f2f2 met witte rechthoekige kaarten;
   uitlichtblokken rood met radius 20px. Alleen rolvariabelen. Woordmerk en ronding zijn eigen bestanden/CSS, niets is van de site gehaald.
   Bewuste afwijkingen: "Menu" is op breed scherm niet zichtbaar (de tabbalk staat er al); de ronding is CSS in plaats van de SVG van de site; geen kruimelpad.
   =========================================================================================================================== */
.brw-app.hs{ --radius-kaart:0; --scrim:rgba(0,0,0,.45); }
.hs-topbar .hs-in > span:first-child{ font-weight:600; color:var(--ink); }
.hs-rechts{ display:inline-flex; align-items:center; gap:16px; }
.hs-omgeving{ font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--status-warning); border:1px solid currentColor; padding:1px 8px; white-space:nowrap; }
.hs-omgeving[data-omgeving="kritiek"]{ color:var(--status-critical); }
body:has(.hs-topbar) .omgeving-vol{ display:none; }

.hs-header{ background:var(--panel); height:70px; display:flex; align-items:stretch; overflow:visible; position:relative; border-bottom:1px solid var(--border); }
.hs-header::after{ display:none; }
.hs-rood{ flex:0 0 60%; background:var(--brand); position:relative; display:flex; align-items:center;
  padding-left:max(24px, calc((100vw - var(--content-max)) / 2 + 24px)); }
.hs-rood::after{ /* de ronding van de site: boven het breedst (20px), onderaan op nul, een bolle schuine rand (geen halve cirkel) */
  content:""; position:absolute; top:0; right:-20px; width:20px; height:100%; background:var(--brand); border-bottom-right-radius:100% 100%; }
.hs-rood-in{ display:flex; align-items:center; justify-content:space-between; width:100%; padding-right:40px; gap:16px; }
.hs-menuknop{ display:none; align-items:center; gap:12px; background:none; border:0; color:var(--brand-ink); font:inherit; font-size:16px; font-weight:600; cursor:pointer; min-height:44px; padding:0; }
.hs-menuknop:focus-visible{ outline:2px solid var(--brand-ink); outline-offset:3px; }
.hs-hamburger{ display:inline-block; width:22px; height:2px; background:currentColor; box-shadow:0 -7px 0 currentColor, 0 7px 0 currentColor; }
.hs-header .hs-logo{ margin-left:auto; color:var(--brand-ink); text-decoration:none; }
.hs-header .hs-logo:visited, .hs-header .hs-logo:hover{ color:var(--brand-ink); text-decoration:none; }
.hs-header .hs-logo:focus-visible{ outline:2px solid var(--brand-ink); outline-offset:4px; }
.hs-zoekvak{ flex:1; display:flex; align-items:center; justify-content:flex-end; padding-left:40px; padding-right:max(24px, calc((100vw - var(--content-max)) / 2 + 24px)); }
.hs-zoek{ display:inline-flex; align-items:center; gap:8px; color:var(--ink); font-weight:600; font-size:16px; text-decoration:none; }
.hs-zoek svg{ color:var(--accent); }
.hs-zoek:hover span{ text-decoration:underline; }

.hs-subnav .hs-in{ gap:0; }
.hs-subnav a{ border-bottom:3px solid transparent; color:var(--ink); }
.hs-subnav a:hover{ color:var(--ink); border-bottom-color:var(--border-strong); }
.hs-subnav a[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--ink); }

.hs-uitlicht{ background:var(--brand); color:var(--brand-ink); border-radius:20px; padding:28px; }
.hs-uitlicht a, .hs-uitlicht h2, .hs-uitlicht h3, .hs-uitlicht p{ color:var(--brand-ink); }

@media (max-width:900px){
  .hs-rood{ flex:1 1 auto; padding-left:16px; }
  .hs-rood::after{ right:-14px; width:14px; }
  .hs-rood-in{ padding-right:24px; }
  .hs-menuknop{ display:inline-flex; }
  .hs-zoekvak{ flex:0 0 auto; padding:0 16px 0 28px; }
  .hs-zoek span{ display:none; }
  .hs-topbar .hs-in > span:first-child{ display:none; }
  .hs-topbar .hs-rechts{ margin-left:auto; }
  .hs-subnav{ display:none; position:fixed; left:0; top:0; bottom:0; height:auto; width:min(320px, 86vw); z-index:60; overflow-y:auto; border-bottom:0; box-shadow:var(--shadow); }
  .hs-subnav .hs-in{ flex-direction:column; height:auto; padding:0 0 24px; overflow:visible; }
  .hs-subnav a{ padding:16px 24px; border-bottom:1px solid var(--border); }
  .hs-subnav a[aria-current="page"]{ border-bottom-color:var(--border); box-shadow:inset 4px 0 0 var(--ink); }
  .hs.hs-menu-open .hs-subnav{ display:block; }
  .hs.hs-menu-open::before{ content:""; position:fixed; inset:0; background:var(--scrim); z-index:50; }
}

/* ===========================================================================================================================
   10j. RADIAAL KENMERKENSCHEMA (OC-399, frontend/src/shell/KenmerkenRadiaal.tsx). Vaste kleur per domein; alleen --hd-* voor tekst en vlak.
   =========================================================================================================================== */
.kr{--kr-mens:#C11A1A; --kr-brand:#7A1010; --kr-gebouw:#4B4E56; --kr-omgeving:#6B707B; --kr-interventie:#2B2D33; display:flex; flex-direction:column; gap:12px; min-width:0}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .kr{--kr-mens:#E5544E; --kr-brand:#F08A84; --kr-gebouw:#C9CCD2; --kr-omgeving:#9BA1AC; --kr-interventie:#F1F2F4}
}
:root[data-theme="dark"] .kr, .brw-app[data-theme="dark"] .kr{--kr-mens:#E5544E; --kr-brand:#F08A84; --kr-gebouw:#C9CCD2; --kr-omgeving:#9BA1AC; --kr-interventie:#F1F2F4}
.kr-svg{max-width:720px; margin:0 auto}
.kr-mens{--kr-dom:var(--kr-mens)} .kr-brand{--kr-dom:var(--kr-brand)} .kr-gebouw{--kr-dom:var(--kr-gebouw)} .kr-omgeving{--kr-dom:var(--kr-omgeving)} .kr-interventie{--kr-dom:var(--kr-interventie)}
.kr-vak rect{fill:var(--hd-kaart); stroke:var(--kr-dom); stroke-width:3}
.kr-vak{cursor:pointer} .kr-vak:hover rect{stroke-width:5} .kr-vak:focus-visible{outline:none} .kr-vak:focus-visible rect{stroke:var(--hd-inkt); stroke-width:5}
.kr-naam{fill:var(--hd-inkt); font:700 14px var(--hd-tekst)}
.kr-kop rect{fill:var(--hd-kaart); stroke:var(--hd-inkt2); stroke-width:2}
.kr-kop-t{fill:var(--hd-inkt); font:700 15px var(--hd-tekst)} .kr-kop-s{fill:var(--hd-inkt2); font:12px var(--hd-tekst)}
.kr-lijn{stroke:var(--hd-inkt2); stroke-width:2; stroke-dasharray:4 4}
.kr-pijl-lijn{stroke:var(--hd-inkt2); stroke-width:2.5; fill:none} .kr-punt{fill:var(--hd-inkt2)}
.kr-pijl-raak{stroke:transparent; stroke-width:16; fill:none} .kr-pijl:focus-visible{outline:none} .kr-pijl:focus-visible .kr-pijl-lijn,.kr-pijl:hover .kr-pijl-lijn{stroke:var(--hd-inkt); stroke-width:4}
.kr-vakken{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px}
.kr-kaart{border:1px solid var(--hd-lijn); border-top:4px solid var(--kr-dom); border-radius:10px; padding:10px 12px; background:var(--hd-kaart); min-width:0}
.kr-kaart h4{margin:0; font-size:13px; letter-spacing:.04em; color:var(--hd-inkt)}
.kr-uitruk{margin:2px 0 6px; font-size:12px; color:var(--hd-inkt3)}
.kr-kaart ul{list-style:none; margin:0 0 6px; padding:0; display:flex; flex-direction:column; gap:4px}
.kr-kaart li{display:flex; flex-direction:column; font-size:12px; border-left:3px solid var(--hd-lijn); padding-left:6px}
.kr-kaart li[data-status="uit-bron"]{border-left-color:var(--hd-goed)} .kr-kaart li[data-status="in-aanbouw"]{border-left-color:var(--hd-waarschuwing)}
.kr-vraag{color:var(--hd-inkt)} .kr-st{color:var(--hd-inkt3)}