:root{
  /* 1338-merkkleur: vervang deze ene waarde door de officiele huisstijlkleur */
  --c1338:#E4572E;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --sans:'IBM Plex Sans',system-ui,sans-serif;
  --cond:'IBM Plex Sans Condensed',var(--sans);
}
html[data-theme="dark"]{
  --void:#0A0C10; --panel:rgba(15,19,26,.94); --edge:rgba(234,230,223,.10);
  --ink:#EAE6DF; --dim:#8792A2; --faint:#59637244;
  --ember:#E4572E; --heat:#FFB13D; --deep:#8C1D18; --hot:#FFF2CF;
  --ok:#5DBB7B; --warn:#E8A33D; --fade:#0A0C10d9;
}
html[data-theme="light"]{
  --void:#F4F2ED; --panel:rgba(255,255,255,.93); --edge:rgba(24,28,35,.14);
  --ink:#1D2129; --dim:#5C6572; --faint:#9AA3AF55;
  --ember:#C6381B; --heat:#A25E00; --deep:#7A1712; --hot:#F0A11C;
  --ok:#2E7D4F; --warn:#9A6A00; --fade:#F4F2EDe8;
}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{background:var(--void);color:var(--ink);font:400 14px/1.45 var(--sans);overflow:hidden}
#map{position:fixed;inset:0;background:var(--void)}
.leaflet-container{background:var(--void);font:inherit}
/* Bronvermelding inklapbaar. De OSM-richtlijn staat dit toe mits hij bij het
   laden volledig zichtbaar is en daarna inklapt bij een kaartinteractie, en
   mits de licentie altijd terugvindbaar blijft via een (i) in een hoek. Hij
   staat dus NIET standaard ingeklapt; dat zou wel in strijd zijn. */
.leaflet-control-attribution{max-width:min(92vw,760px)}
/* Ingeklapt: het tekstblok weg, het (i)-knopje ervoor in de plaats. De klasse
   staat op de kaartcontainer omdat Leaflet de innerHTML van het attributieblok
   zelf beheert en er dus niets in mag blijven staan. */
#map.attr-in .leaflet-control-attribution{display:none}
.attr-toggle{display:none;width:24px;height:24px;line-height:22px;text-align:center;
  border:1px solid var(--edge);border-radius:99px;background:var(--panel);color:var(--dim);
  font:600 12px var(--sans);font-style:italic;cursor:pointer;padding:0;
  box-shadow:0 1px 4px rgba(0,0,0,.15)}
#map.attr-in .attr-toggle{display:block}
.attr-toggle:hover,.attr-toggle:focus-visible{color:var(--ink);border-color:var(--dim)}
.leaflet-control-attribution{background:var(--panel)!important;color:var(--dim)!important;font:400 10px var(--sans)}
.leaflet-tooltip{background:var(--panel);color:var(--ink);border:1px solid var(--edge);
  font:400 11px var(--mono);box-shadow:0 2px 8px #0003}
.leaflet-tooltip-top:before{border-top-color:var(--edge)}
.leaflet-control-attribution a{color:var(--dim)!important}
.leaflet-control-zoom a{background:var(--panel)!important;color:var(--ink)!important;border:1px solid var(--edge)!important}
.leaflet-bar{border:none!important;box-shadow:0 2px 12px #0008!important}

/* ---------- linkerrail ---------- */
.rail{
  position:fixed;z-index:1000;top:14px;left:14px;width:296px;max-height:calc(100% - 28px);
  display:flex;flex-direction:column;gap:10px;overflow-y:auto;scrollbar-width:thin;
  padding-right:2px;
}
.card{background:var(--panel);border:1px solid var(--edge);border-radius:10px;
  padding:14px 16px;backdrop-filter:blur(8px)}
/* Plaatszoeker. Standaard alleen een icoon in de kopregel, dus nul extra
   hoogte op mobiel; het veld klapt eronder open en de resultatenlijst zweeft
   erboven zodat ook die niets wegduwt. Op desktop staat het veld altijd open,
   want daar is de ruimte er wel en wordt een zichtbaar veld vaker gebruikt. */
/* Tip voor wie een andere browsertaal heeft dan deze URL. Sinds de URL de
   taal bepaalt ziet een Engelse bezoeker op / gewoon Nederlands; dit wijst
   hem eenmalig de weg zonder hem ongevraagd te verplaatsen. */
.langhint[hidden]{display:none}   /* zonder dit wint display:flex van het
     hidden-attribuut en staat het balkje er altijd, leeg en wel */
.langhint{display:flex;align-items:center;gap:8px;background:var(--panel);
  border:1px solid var(--edge);border-radius:9px;padding:7px 8px 7px 11px;margin-bottom:10px}
.langhint a{flex:1;color:var(--heat);text-decoration:none;font:400 12px var(--sans);line-height:1.3}
.langhint a:hover{text-decoration:underline}
.langhint button{background:none;border:0;color:var(--dim);font-size:16px;line-height:1;
  padding:0 2px;cursor:pointer;flex:none}
.langhint button:hover{color:var(--ink)}

.findbox{position:relative;margin-top:10px}
.findbox input{width:100%;box-sizing:border-box;background:var(--panel2, #fff);
  border:1px solid var(--edge);border-radius:8px;padding:8px 30px 8px 10px;
  font:400 13px var(--sans);color:var(--ink);outline:none}
.findbox input:focus{border-color:var(--heat)}
.findbox input::-webkit-search-cancel-button{display:none}
.findclr{position:absolute;right:6px;top:6px;width:22px;height:22px;line-height:20px;
  background:none;border:0;border-radius:5px;color:var(--dim);font-size:16px;cursor:pointer}
.findclr:hover{color:var(--ink);background:var(--edge)}
.findres{position:absolute;z-index:1200;left:0;right:0;top:calc(100% + 4px);margin:0;padding:4px;
  list-style:none;max-height:min(46vh,320px);overflow-y:auto;background:var(--panel);
  border:1px solid var(--edge);border-radius:9px;box-shadow:0 8px 26px rgba(0,0,0,.28)}
.findres li{padding:7px 9px;border-radius:6px;cursor:pointer;display:flex;align-items:baseline;gap:7px}
.findres li[aria-selected="true"],.findres li:hover{background:var(--edge)}
.findres b{font:500 13px var(--sans);color:var(--ink)}
.findres small{font:400 10.5px var(--mono);color:var(--dim);margin-left:auto;white-space:nowrap}
.findres .leeg{color:var(--dim);cursor:default;font-size:12.5px}
.findres .leeg:hover{background:none}
/* Twee vaste regels: naam en knoppen boven, tagline en talen eronder. Met
   vier taalknoppen paste alles niet meer op twee regels en waaierde het uit
   naar drie, wat de kaart onnodig omlaag duwde. brandbreak forceert de knik
   op een voorspelbare plek. */
.brand{display:flex;align-items:center;gap:7px;flex-wrap:wrap;row-gap:7px}
.brandbreak{flex:1 0 100%;height:0;margin:0}
.brand .helpbtn:first-of-type{margin-left:auto}
/* Het woordmerk was een <h1>. Voor zoekmachines is dat de kop die het
   ONDERWERP van de pagina aangeeft; daarmee stond er dat het onderwerp de
   merknaam was in plaats van 'live kaart van bosbranden in Europa'. Nu een
   div met identieke opmaak, en de echte h1 staat visueel verborgen. */
.brand .logo{font:600 19px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;transition:opacity .15s;align-self:baseline}
.brand a.logo:hover{opacity:.75}
.brand a.logo:focus-visible{outline:2px solid var(--heat);outline-offset:3px;border-radius:3px}
.brand .logo em{font-style:normal;color:var(--ember)}
/* Kop voor zoekmachines en schermlezers, zonder de opmaak te raken. Geen
   display:none of visibility:hidden: die worden door schermlezers
   overgeslagen en door Google als verbergen gezien. */
.srt{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.byline{font:500 10px var(--mono);color:var(--dim);text-decoration:none;white-space:nowrap;
  align-self:baseline}
.byline b{font:600 12.5px var(--cond);letter-spacing:.1em;color:var(--c1338)}
.byline:hover b{text-decoration:underline}
.sitelogo{width:34px;height:34px;border-radius:8px;border:2px solid #fff;
  box-shadow:0 1px 6px rgba(0,0,0,.35);background:#fff;object-fit:contain;display:block}
.custbadge{display:inline-flex;align-items:center;gap:6px;font:600 10.5px var(--cond);
  letter-spacing:.12em;text-transform:uppercase;color:var(--gold, #B98A2F);
  border:1px solid var(--edge);border-radius:99px;padding:3px 9px;margin-left:8px}
.custbadge img{width:14px;height:14px;border-radius:3px;object-fit:contain}
.custbadge .al{color:#C0392B;font-weight:700}
.sitelogo.watch{border-color:#B98A2F}
.sitelogo.alarm{border-color:#C0392B;animation:sitepulse 1.6s ease-out infinite}
@keyframes sitepulse{0%{box-shadow:0 0 0 0 rgba(192,57,43,.55)}70%{box-shadow:0 0 0 12px rgba(192,57,43,0)}100%{box-shadow:0 0 0 0 rgba(192,57,43,0)}}
.sitepop{font:400 12.5px var(--sans);min-width:220px}
.sitepop h3{font:600 13.5px var(--sans);margin:0 0 4px}
.sitepop .stchip{display:inline-block;font:600 10px var(--cond);letter-spacing:.1em;text-transform:uppercase;
  border-radius:99px;padding:2px 8px;margin-bottom:6px}
.sitepop .st-ok{background:#E7F2EA;color:#2E7D4F}
.sitepop .st-watch{background:#F5EEDC;color:#B98A2F}
.sitepop .st-alarm{background:#F6E3E0;color:#C0392B}
.sitepop .frow{display:block;padding:4px 0;border-top:1px solid var(--edge);color:inherit;text-decoration:none;cursor:pointer}
.sitepop .frow b{color:var(--heat)}
.sitepop .frow small{color:var(--dim);font-family:var(--mono);font-size:10.5px}
.sitepop .wind{margin-top:6px;font-family:var(--mono);font-size:11.5px;color:var(--dim)}
.brand .sub{font:400 10.5px var(--mono);color:var(--dim);letter-spacing:.04em;
  margin-right:auto}
/* Taalkeuze: met zeven talen paste de oude knoppenrij niet meer in de kop;
   de keuzelijst (die mobiel al deed) is nu overal het taalelement. */
/* Op mobiel passen vier losse taalknoppen niet naast de merknaam en de drie
   ronde knoppen: samen 353px terwijl een telefoon er 310 tot 340 heeft. Ze
   kregen daardoor een eigen regel, wat een hele regel kostte voor vier
   knopjes. Daar staat een compacte keuzelijst, die de systeemkiezer opent. */
.langsel{display:block;margin-left:auto;background:none;border:1px solid var(--edge);border-radius:6px;
  color:var(--ink);font:500 11px var(--mono);padding:2px 4px;cursor:pointer;
  margin-left:auto;flex:none}
.helpbtn{background:none;border:1px solid var(--edge);border-radius:50%;width:20px;height:20px;
  color:var(--dim);font:500 11px var(--mono);cursor:pointer;line-height:1;flex:none}
.helpbtn:hover{color:var(--ink);border-color:var(--dim)}
.helpbtn:focus-visible{outline:2px solid var(--heat);outline-offset:2px}

.kpis{display:grid;grid-template-columns:1fr 1fr;gap:2px 14px;margin-top:2px}
.kpi b{display:block;font:500 22px/1.15 var(--mono);font-variant-numeric:tabular-nums}
.kpi span{font:400 10.5px var(--sans);color:var(--dim)}
.kpi b.ember{color:var(--ember)}
/* Vier tegels in twee kolommen in plaats van vier volle regels: die namen
   samen bijna een derde van het paneel in, terwijl de kaart de hoofdzaak is.
   De zakelijke knop blijft vol breed - dat is de enige met een doel. */
.navgrid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:12px}
.navgrid .navlink{margin-top:0;padding:8px 6px;font-size:11.5px}
.navlink{display:block;margin-top:12px;text-align:center;font:500 12px var(--sans);
  color:var(--ink);text-decoration:none;border:1px solid var(--edge);border-radius:7px;
  padding:8px 10px;transition:border-color .15s}
.navlink:hover{border-color:var(--heat);color:var(--heat)}
.navlink:focus-visible{outline:2px solid var(--heat);outline-offset:2px}
.navlink b{color:var(--heat);font-weight:500}
/* De zakelijke ingang mag iets meer opvallen dan de drie informatieve links
   erboven: dit is de enige die ergens toe leidt. Subtiel gehouden - een
   randje in de accentkleur en een vleugje achtergrond, geen gevulde knop.
   Een felle knop zou de kaart overstemmen en op een advertentie lijken,
   precies wat een publieke dienst niet moet uitstralen.
   color-mix houdt het in beide thema's automatisch kloppend. */
.navlink.biz{border-color:color-mix(in srgb, var(--heat) 45%, var(--edge));
  background:color-mix(in srgb, var(--heat) 7%, transparent)}
.navlink.biz:hover{border-color:var(--heat);
  background:color-mix(in srgb, var(--heat) 13%, transparent)}
/* Inloglink voor klanten: bewust klein en stil. Wie hem zoekt vindt hem;
   voor de rest van de bezoekers is het ruis. */
.navlink.login{font-size:11px;color:var(--dim);border-style:dashed;justify-content:center;padding:4px 8px}
.navlink.login:hover{color:var(--ink);border-color:var(--dim)}
.hotgrp{margin-bottom:6px}
.hotgrp h3{font:500 10px var(--mono);color:var(--dim);letter-spacing:.08em;margin:6px 0 2px}
.hotrow{display:flex;align-items:center;gap:8px;width:100%;background:none;border:none;
  color:var(--ink);font:400 12px var(--mono);font-variant-numeric:tabular-nums;
  padding:4px 2px;cursor:pointer;text-align:left;border-radius:5px}
.hotrow:hover{background:var(--faint)}
.hotrow:focus-visible{outline:2px solid var(--heat);outline-offset:1px}
.hotrow .hid{color:var(--heat);min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
/* Het vlaggetje mag niet meekrimpen als de plaatsnaam lang is. */
.hotrow .hid img{flex:none}
.hotrow .meta{margin-left:auto;color:var(--dim);font-size:11px;white-space:nowrap}
.hotempty{font:400 11px var(--mono);color:var(--dim);padding:2px}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.chip{font:500 10.5px var(--mono);border:1px solid var(--edge);border-radius:20px;
  padding:2px 9px;color:var(--dim)}
.chip.geo{border-color:var(--warn);color:var(--warn)}
.chip.new{color:var(--ember);border-color:var(--ember)}
.chip.up{color:var(--heat);border-color:var(--heat)}
.chip.down{color:var(--ok);border-color:var(--ok)}

/* passage-ticker: het signatuurelement */
.ticker h2, .card h2{font:600 11px var(--cond);letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);margin-bottom:8px}
.pass{display:flex;align-items:center;gap:8px;padding:3px 0;font:400 12.5px var(--mono);
  font-variant-numeric:tabular-nums}
.pass .dot{width:7px;height:7px;border-radius:50%;flex:none}
.pass .sat{width:52px;color:var(--ink)}
.pass .age{margin-left:auto;color:var(--dim)}
.dot.ok{background:var(--ok)}
.dot.warn{background:var(--warn)}
.dot.old{background:var(--ember)}
.dot.none{background:var(--faint)}
.ticker .note{margin-top:8px;font-size:11px;color:var(--dim);line-height:1.5}

/* tijdschuif */
.timebox output{display:block;font:500 12.5px var(--mono);margin-bottom:6px;
  font-variant-numeric:tabular-nums}
.timebox output .live{color:var(--ok)}
/* Hint bij het einde van de schuif. Bewust geen modaal venster: die
   onderbreekt en dwingt tot wegklikken. Dit schuift open onder de schuif, op
   de plek waar de aandacht toch al is, en verdwijnt zodra je terugschuift. */
.tmore{margin-top:10px;padding:10px 12px;border:1px solid var(--edge);border-radius:8px;
  background:var(--panel);font:400 11.5px/1.55 var(--sans);color:var(--dim);
  animation:tmorein .18s ease-out}
.tmore b{display:block;color:var(--ink);font:600 12px var(--cond);letter-spacing:.05em;
  text-transform:uppercase;margin-bottom:3px}
.tmore a{display:inline-block;margin-top:6px;color:var(--heat);text-decoration:none;font-weight:500}
.tmore a:hover{text-decoration:underline}
@keyframes tmorein{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tmore{animation:none}}
input[type=range]{width:100%;appearance:none;height:4px;border-radius:2px;
  background:linear-gradient(90deg,#59637255,var(--ember));outline:none}
input[type=range]::-webkit-slider-thumb{appearance:none;width:16px;height:16px;border-radius:50%;
  background:var(--ink);border:3px solid var(--ember);cursor:pointer}
input[type=range]::-moz-range-thumb{width:10px;height:10px;border-radius:50%;
  background:var(--ink);border:3px solid var(--ember);cursor:pointer}
input[type=range]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--heat);outline-offset:2px}
.timebox .marks{display:flex;justify-content:space-between;font:400 10px var(--mono);
  color:var(--dim);margin-top:4px}


/* ================= eenvoudige en gedetailleerde weergave =================
   Aanleiding: testfeedback augustus 2026. "Wat zijn al die knoppen", het
   detailpaneel werd te veel, de detectiepuntjes werden niet begrepen, en wat
   men wel belangrijk vond was wind en rook. Daarom een eenvoudige stand die
   verbergt en herschikt - dezelfde DOM, dezelfde data, alleen minder tegelijk.
   Gedetailleerd is de kaart zoals hij altijd was. */
.wgsel{display:flex;gap:0;margin-top:10px;border:1px solid var(--edge);
  border-radius:8px;overflow:hidden}
.wgsel button{flex:1;border:0;background:none;font:500 12px var(--sans);
  padding:7px 4px;cursor:pointer;color:var(--dim)}
.wgsel button[aria-pressed="true"]{background:var(--ember);color:#fff}
/* Op mobiel is het paneel smal en telt elke rij: dan een regelknopje dat de
   ANDERE stand noemt. Een schakelaar hoeft niet permanent beide opties te
   tonen als de huidige stand al uit het scherm blijkt. */
.wgmini{display:none;width:100%;border:0;background:none;text-align:right;
  font:500 12px var(--sans);color:var(--heat);padding:2px 0 0;cursor:pointer}
@media (max-width:700px){ .wgsel{display:none} .wgmini{display:block} }

.tijdknop{display:none;gap:0;margin-top:10px;border:1px solid var(--edge);
  border-radius:8px;overflow:hidden}
body.simpel .tijdknop{display:flex}
.tijdknop button{flex:1;border:0;background:none;font:500 12px var(--sans);
  padding:7px 4px;cursor:pointer;color:var(--dim)}
.tijdknop button[aria-pressed="true"]{background:var(--ember);color:#fff}

.lochint{display:none;font:400 12.5px/1.5 var(--sans);color:var(--dim);margin-top:10px}
body.simpel .lochint{display:block}
body.simpel.heeftloc .lochint{display:none}

/* Luchtfoto mag in eenvoudig: een foto van het gebied begrijpt iedereen
   zonder uitleg, anders dan satellietbeeld en brandlitteken. */
body.simpel .actions.layers .grp.grp-ortho{display:inline-flex !important}

/* ---------- wat de eenvoudige stand verbergt ---------- */
body.simpel .kpis,
body.simpel .legendcard .ramp,
body.simpel .legendcard .ramplbl,
body.simpel .legendcard .legrow,
body.simpel .legendcard .filterrow,
body.simpel .legendcard h2,
body.simpel .lyrh,
body.simpel #b-det,
body.simpel .actions.layers .grp:not(.grp-rook):not(.grp-ortho),
body.simpel .actions.layers .act.mini,
body.simpel .note-inline,
body.simpel .ticker,
body.simpel .timebox,
body.simpel .promo,
body.simpel #hotcard .hotgrp:nth-of-type(2),
body.simpel #hot-new > *:nth-child(n+4),
body.simpel #d-coord,
body.simpel #d-chips,
body.simpel #d-spark,
body.simpel .sparklbl,
body.simpel #d-src,
body.simpel #d-firms,
body.simpel .lag,
body.simpel .detail h2,
body.simpel .grid2,
body.simpel #d-scale,
body.simpel #d-wind,
body.simpel #d-id{display:none !important}

/* Op een telefoon is het paneel een bottom sheet en concurreert elke pixel
   met de kaart - en de kaart is de hoofdzaak. In de eenvoudige stand daarom
   strakkere kaders, lagere knoppen en het schakelregeltje op dezelfde regel
   als het woordmerk in plaats van eronder. Levert ruwweg 90 px kaart op. */
@media (max-width:700px){
  body.simpel .card{padding:10px 12px;margin-bottom:8px}
  body.simpel .brandcard{padding-bottom:8px}
  /* De schakelaar op een EIGEN regel onder de merkregel, maar strak: de
     rechterkant van die merkregel is al bezet door zoek-, thema- en helpknop
     en de taalkiezer, dus daar past niets meer naast. Een eerdere poging met
     een negatieve marge trok hem over het woordmerk heen zodra de merkregel
     anders uitviel; opmaak hoort niet van toevallige hoogtes af te hangen.
     Zo kost hij 16 px in plaats van 40. */
  body.simpel .brand{margin-bottom:2px}
  body.simpel .wgmini{margin-top:0;padding:0;font-size:11.5px;line-height:1.35}
  body.simpel .lochint{margin-top:8px;font-size:12px;line-height:1.4}
  body.simpel .tijdknop button,
  body.simpel .actions.layers .act{padding:9px 6px;font-size:12px}
  body.simpel .tijdknop{margin-top:8px}
  body.simpel .actions.layers{gap:6px;margin-top:8px}
  body.simpel #b-loc{padding:9px 6px}
}

/* antwoordenblok: vier vragen met antwoorden in woorden */
#bsimp{display:none}
body.simpel #bsimp{display:block}
#bsimp .bt{font:600 16px var(--sans);margin-bottom:2px}
#bsimp .rij{margin-top:12px;padding-top:10px;border-top:1px solid var(--edge)}
#bsimp .rij .l{font:600 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
#bsimp .rij .a{font:500 14px/1.4 var(--sans);margin-top:3px}
#bsimp .rij .a small{font:400 12px var(--sans);color:var(--dim);font-weight:400}
#bsimp .rij .a .op{color:var(--ember);font-weight:600}
#bsimp .rij .a .af{color:var(--ok);font-weight:600}
#bsimp .rij.dimrij .a{font-weight:400;color:var(--dim);font-size:12.5px}
#bs-locbtn{display:inline-flex;align-items:center;gap:7px;margin-top:9px;
  border:0;border-radius:9px;background:var(--ember);color:#fff;
  font:600 13px var(--sans);padding:9px 15px;cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.18)}
#bs-locbtn:hover{filter:brightness(1.08)}
#bs-locbtn svg{width:15px;height:15px;flex:none}

/* rookschuif in beide standen; vervangt de mini-pijltjes */
#bsmoke{display:none;margin-top:8px}
body.rookaan #bsmoke{display:block}
body.rookaan #b-smoke-prev, body.rookaan #b-smoke-next{display:none !important}
#bsmoke .rijk{display:flex;align-items:center;gap:8px}
#bsmoke button{border:1px solid var(--edge);border-radius:7px;background:none;
  color:var(--ink);font:500 11.5px var(--sans);padding:5px 10px;cursor:pointer;flex:none}
#bsmoke button:hover{border-color:var(--heat)}
#bsmoke input[type=range]{flex:1;min-width:0}
#bsmoke .lbl{font:400 10.5px var(--mono);color:var(--dim);text-align:center;margin-top:3px}

/* legenda + acties */
/* --hot ONTBRAK, en in CSS maakt een ongeldige waarde de hele
   linear-gradient ongeldig: de balk viel terug op transparant. De legenda
   toonde daardoor drie losse woorden ("smeulend  FRP →  zeer intens") zonder
   de kleurschaal waar ze bij horen. De waarden komen uit RAMP_ in de JS, zodat
   de balk exact de schaal toont waarmee de stippen worden ingekleurd. */
.lyrh{font:600 10.5px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;
  color:var(--dim);margin:12px 0 -2px}
.ramp{height:8px;border-radius:4px;margin:4px 0 4px;
  background:linear-gradient(90deg,var(--deep),var(--ember),var(--heat),var(--hot))}
/* gap zodat de drie labels niet tegen elkaar plakken; het middelste mag
   krimpen en centreert, de buitenste blijven heel. Zonder dit liep bij smalle
   panelen "smeulend" vast tegen "stralingsvermogen (FRP)". */
.ramplbl{display:flex;justify-content:space-between;gap:8px;align-items:baseline;
  font:400 10px var(--mono);color:var(--dim)}
.ramplbl span:nth-child(2){flex:1 1 auto;text-align:center;min-width:0}
.ramplbl span:first-child,.ramplbl span:last-child{flex:0 0 auto}
.legrow{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--dim);margin-top:7px}
.legrow .sw{width:12px;height:12px;border-radius:50%;flex:none;border:1px solid var(--edge)}
.actions{display:flex;gap:8px;margin-top:10px}
.actions.layers{flex-wrap:wrap}
.actions.layers .grp{display:flex;gap:6px;flex:1 1 auto;min-width:0}
.actions.layers .grp button.act{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden}
.actions.layers .grp button.act.mini{flex:0 0 30px}
.actions.layers button.act.mini{flex:0 0 34px;min-width:0}
/* De satellietknop draagt ook de datum. Op één regel past dat niet in de
   296px-rail zodra er drie miniknoppen naast staan, dus naam boven, datum
   eronder. De ellipsis is een vangnet voor langere vertalingen. */
button.act.satbtn{display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:1px;line-height:1.2}
button.act.satbtn .l1{max-width:100%;overflow:hidden;text-overflow:ellipsis}
button.act.satbtn .l2{max-width:100%;overflow:hidden;text-overflow:ellipsis;
  font:500 10px var(--mono);color:var(--dim);letter-spacing:.02em}
button.act.satbtn .l2:empty{display:none}
button.act.satbtn[aria-pressed="true"] .l2{color:var(--heat)}
.note-inline{flex:1 0 100%;font:400 10.5px var(--mono);margin-top:-2px}
.note-inline:empty{display:none}
/* Waarschuwende variant: gebruikt wanneer er wel een opname geladen is maar
   er weinig of niets te zien valt (bewolking, of beeld van voor de brand).
   Zonder dit onderscheid las de melding als gewone bijschriftinformatie. */
.note-inline.warn{color:var(--warn);border-left:2px solid var(--warn);
  padding-left:7px;line-height:1.5}
@media (min-width:701px){
  .findbox{display:block!important}
  #b-search{display:none}
}
@media (max-width:700px){
  button.act{font-size:11.5px;padding:6px 7px}
  .actions{gap:6px;margin-top:8px}
  .actions.layers button.act{padding:6px 9px}
  button.act.mini,.actions.layers button.act.mini{flex:0 0 30px}
}
button.act{flex:1;background:none;border:1px solid var(--edge);border-radius:7px;color:var(--ink);
  font:500 12px var(--sans);padding:7px 8px;cursor:pointer;transition:border-color .15s}
button.act:hover{border-color:var(--dim)}
button.act[aria-pressed="true"]{border-color:var(--ember);color:var(--heat)}
button.act.mini{flex:0 0 34px;padding:7px 0;font:500 14px var(--mono)}
button.act.mini[disabled]{opacity:.35;cursor:default}
button.act:focus-visible{outline:2px solid var(--heat);outline-offset:2px}
.caveat{font-size:11px;color:var(--dim);line-height:1.55}
.caveat b{color:var(--ink);font-weight:500}
.promo{font:400 11px var(--sans);color:var(--dim);line-height:1.6}
.promo a{color:var(--heat);text-decoration:none;font-weight:500}
.promo a:hover{text-decoration:underline}
.promo .mark{font:600 12px var(--cond);letter-spacing:.12em;color:var(--ink)}
.filterrow{display:flex;align-items:flex-start;gap:8px;margin-top:10px;font-size:11.5px;
  color:var(--ink);cursor:pointer;user-select:none}
.filterrow input{accent-color:var(--ember);margin-top:1px;cursor:pointer}
.filterrow input:focus-visible{outline:2px solid var(--heat);outline-offset:2px}
.filterrow small{display:block;color:var(--dim);font-size:10.5px}

/* helpvenster */
.helpwrap{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;
  background:rgba(6,8,11,.72);backdrop-filter:blur(3px);padding:18px}
.helpwrap.open{display:flex}
.help{background:var(--panel);border:1px solid var(--edge);border-radius:12px;max-width:560px;
  width:100%;max-height:calc(100% - 24px);overflow-y:auto;padding:26px 28px;position:relative}
.help h2{font:600 13px var(--cond);letter-spacing:.16em;text-transform:uppercase;color:var(--heat);
  margin:20px 0 6px}
.help h2:first-of-type{margin-top:0}
.help p{font-size:13px;color:var(--ink);margin-bottom:8px;line-height:1.6}
.help p.dim{color:var(--dim);font-size:12px}
.help a{color:var(--heat);text-decoration:none}
.help a:hover{text-decoration:underline}
.help .close{position:absolute;top:10px;right:10px;background:none;border:none;color:var(--dim);
  font:400 20px/1 var(--sans);cursor:pointer;padding:6px 10px}
.help .close:hover{color:var(--ink)}
.help .maker{margin-top:22px;padding-top:14px;border-top:1px solid var(--edge);
  font:400 11.5px var(--mono);color:var(--dim)}

/* ---------- detailpaneel ---------- */
.detail{position:fixed;z-index:1001;top:14px;right:14px;width:320px;max-height:calc(100% - 28px);
  overflow-y:auto;background:var(--panel);border:1px solid var(--edge);border-radius:10px;
  padding:16px 18px;backdrop-filter:blur(8px);transform:translateX(16px);opacity:0;
  pointer-events:none;transition:transform .2s,opacity .2s}
.detail.open{transform:none;opacity:1;pointer-events:auto}
.detail .close{position:absolute;top:8px;right:8px;background:none;border:none;color:var(--dim);
  font:400 18px/1 var(--sans);cursor:pointer;padding:4px 8px}
.detail .close:hover{color:var(--ink)}
/* Deelknop naast het kruisje in plaats van onderaan het paneel. In de
   eenvoudige stand staat hij anders onder vier uitklapbare blokken en moet je
   ervoor scrollen - terwijl delen juist het eerste is wat iemand wil die net
   heeft gezien dat er brand is. Alleen het icoon: naast een kruisje is een
   woord te veel, en het pictogram is bekend genoeg. */
body.simpel #d-share{position:absolute;top:6px;right:42px;z-index:2;
  padding:6px 8px;background:none;border:1px solid transparent;
  box-shadow:none;color:var(--dim)}
body.simpel #d-share svg{width:17px;height:17px;color:currentColor}
body.simpel #d-share:hover{color:var(--heat);background:none;border-color:transparent}
body.simpel #d-share > span{display:none}
/* Het kopieerbericht heeft geen label om in te tonen: even als tekstballon. */
body.simpel #d-share[data-melding]::after{content:attr(data-melding);
  position:absolute;top:100%;right:0;white-space:nowrap;
  font:500 11px var(--sans);color:var(--heat);padding-top:2px}
.detail h3{font:500 15px var(--mono);margin-bottom:2px}
.detail .place{font:500 13px var(--sans);color:var(--ink);margin:2px 0 2px}
.detail .place small{color:var(--dim);font:400 11px var(--mono)}
.detail .scale{font:400 11px var(--mono);color:var(--dim);margin:-6px 0 12px}
.detail .scale.warn{font:400 11px var(--sans);line-height:1.45;color:var(--dim);
  border-left:2px solid var(--edge);padding-left:8px;margin:-2px 0 12px}
/* Coördinaten: klikbaar om te kopiëren. Decimale graden met 5 decimalen is
   ongeveer een meter, en dat is het formaat dat navigatie en meldkamers
   verwachten. Ruime raakvlakken, want dit wordt ook op de telefoon gebruikt. */
.detail .coord[hidden]{display:none}   /* idem: anders staat de regel er ook
     bij een brand zonder coordinaat */
.detail .coord{display:flex;align-items:center;gap:8px;width:100%;margin:4px 0 6px;
  background:none;border:1px solid transparent;border-radius:6px;padding:3px 6px 3px 0;
  color:var(--dim);font:400 11.5px var(--mono);cursor:pointer;text-align:left;
  transition:color .15s,border-color .15s}
.detail .coord:hover{color:var(--ink);border-color:var(--edge);padding-left:6px}
.detail .coord b{margin-left:auto;font-weight:400;font-size:12px;opacity:.55}
.detail .coord:hover b{opacity:1;color:var(--heat)}
.detail .coord.ok{color:var(--heat);border-color:var(--ember)}
.detail .coord:focus-visible{outline:2px solid var(--heat);outline-offset:2px}
.windbox{margin-bottom:12px}
.windnow{display:flex;align-items:center;gap:10px;font:500 14px var(--mono);
  font-variant-numeric:tabular-nums;margin-bottom:4px}
.windnow .arr{display:inline-block;font-size:17px;color:var(--heat)}
.windnow small{color:var(--dim);font-size:11px;font-weight:400}
.winddrift{font:400 12px var(--sans);margin-bottom:6px}
.winddrift b{font-weight:500;color:var(--heat)}
.windstrip{display:flex;gap:2px}
.windstrip .wh{flex:1;text-align:center}
.windstrip .wh .arr{display:inline-block;font-size:14px;color:var(--ink)}
.windstrip .wh small{display:block;font:400 9px var(--mono);color:var(--dim);margin-top:1px}
.windcaveat{font:400 10px var(--mono);color:var(--dim);margin-top:6px;line-height:1.5}
.detail .stat{font:400 11px var(--sans);color:var(--dim);margin-bottom:12px}
.detail .stat .b-active{color:var(--ember)}
.detail .stat .b-waning{color:var(--warn)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin-bottom:12px}
.grid2 b{display:block;font:500 15px var(--mono);font-variant-numeric:tabular-nums}
.nextpass{font:400 11.5px/1.5 var(--mono);color:var(--dim);margin:6px 0 2px;
padding-left:9px;border-left:2px solid var(--edge)}
.archnote{background:#F5EEDC;border-left:3px solid var(--gold);border-radius:0 8px 8px 0;
padding:8px 10px;margin:8px 0 2px;font:400 12px/1.45 var(--sans);color:var(--ink)}
:root[data-theme=dark] .archnote{background:#2A2415}
/* Zelfde valkuil als bij .afspeel: display:block wint van het
   hidden-attribuut, en deze regel wordt in de code op hidden gezet. */
.grid2 .lag[hidden]{display:none}
.grid2 .lag{display:block;font:400 10.5px var(--mono);color:var(--faint);margin-top:1px}
.grid2 span{font-size:10.5px;color:var(--dim)}
.spark{width:100%;height:70px;display:block;margin:2px 0 4px}
/* [hidden] EERST, en met !important. Het hidden-attribuut werkt via een
   stijlregel met de laagste voorrang, dus elke eigen display-regel overschrijft
   hem stilzwijgend. Gevolg: de afspeelbalk stond ALTIJD zichtbaar, ook bij
   branden zonder puntenbestand, hoe vaak de JavaScript hem ook op hidden
   zette. Zelfde valkuil geldt voor de knop hieronder. */
.afspeel[hidden], .afspeelknop[hidden]{display:none !important}
/* Stip bij de statuslink. Grijs tot stats.json binnen is: liever niets
   beweren dan groen tonen terwijl je het niet weet. */
.statusbol{display:inline-block;width:7px;height:7px;border-radius:50%;
  margin-right:5px;vertical-align:1px;background:var(--faint)}
.statusbol.ok{background:#3F8F5B}
.statusbol.traag{background:#C9902E}
.statusbol.uit{background:#C0392B}
.afspeel{display:flex;align-items:center;gap:8px;margin:8px 0 2px}
.afspeelknop{width:26px;height:26px;flex:0 0 26px;border:1px solid var(--edge);
  border-radius:50%;background:var(--card);color:var(--heat);cursor:pointer;
  font:12px/1 var(--mono);display:flex;align-items:center;justify-content:center}
.afspeelknop:hover{border-color:var(--heat)}
.afspeelknop[disabled]{opacity:.45;cursor:default}
.afspeelbalk{flex:1;min-width:0;accent-color:var(--heat);height:18px}
.afspeeltijd{font:400 10.5px var(--mono);color:var(--dim);white-space:nowrap;
  min-width:132px;text-align:right}
.afspeelnoot{font:400 10.5px var(--mono);color:var(--dim);line-height:1.45;margin:2px 0 4px}
.sparklbl{display:flex;justify-content:space-between;font:400 10px var(--mono);color:var(--dim);
  margin-bottom:12px}
.detail a{color:var(--heat);font-size:12px;text-decoration:none}
.detail a:hover{text-decoration:underline}
.srcs{font:400 11px var(--mono);color:var(--dim);margin-bottom:12px}
.dlinks{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
/* Deelknop: hier is een deel-icoon WEL op zijn plaats - anders dan bij de
   locatieknop gaat er echt iets naar buiten (een link naar deze brand). De
   knop stond eerder als kale omlijning naast een tekstlink en werd daardoor
   over het hoofd gezien; nu met icoon, iets meer gewicht en de accentkleur. */
button.share{display:inline-flex;align-items:center;gap:6px;
  background:var(--faint);border:1px solid var(--edge);border-radius:8px;
  color:var(--ink);font:600 12px var(--sans);padding:7px 13px;cursor:pointer;
  transition:border-color .15s,background .15s}
button.share svg{width:14px;height:14px;flex:none;color:var(--heat)}
button.share:hover{border-color:var(--heat);color:var(--heat);
  background:color-mix(in srgb, var(--heat) 10%, transparent)}
button.share:hover svg{color:currentColor}
button.share:focus-visible{outline:2px solid var(--heat);outline-offset:2px}

/* ---------- mobiel ---------- */
.sheettoggle{display:none}
@media (max-width:680px){
  .rail{top:auto;bottom:0;left:0;width:100%;max-height:74%;padding:8px 10px
    calc(10px + env(safe-area-inset-bottom));gap:8px;background:linear-gradient(transparent,var(--fade) 18%)}
  .card{padding:12px 14px}
  /* compact: tagline weg en de vier taalknoppen worden één keuzelijst, zodat
     alles op één regel past en de tweede regel helemaal vervalt */
  .brand .sub{display:none}
  .brand .logo{font-size:17px}
  .brandbreak{display:none}
  .brand .helpbtn{width:18px;height:18px;font-size:10px}
  .brand{gap:6px}
  /* ingeklapt: kleinere KPI's, statistiekenknop pas bij Meer opties */
  .rail:not(.expanded) .brandcard{padding:10px 14px}
  .rail:not(.expanded) .navlink{display:none}
  .rail:not(.expanded) .kpis{margin-top:6px}
  .rail:not(.expanded) .kpis .kpi b{font-size:17px}
  .rail:not(.expanded) .kpis .kpi span{font-size:10px}
  .rail:not(.expanded) button.act{padding:9px 8px}
  .rail:not(.expanded) .sheettoggle{padding:5px 0 8px}
  .rail:not(.expanded) .legendcard .actions{margin-top:5px}
  /* standaard ingeklapt: merkkaart plus de bedieningsknoppen */
  .rail:not(.expanded) .card:not(.brandcard):not(.legendcard){display:none}
  .rail:not(.expanded) .legendcard h2,
  .rail:not(.expanded) .legendcard .ramp,
  .rail:not(.expanded) .legendcard .ramplbl,
  .rail:not(.expanded) .legendcard .legrow,
  .rail:not(.expanded) .legendcard .filterrow{display:none}
  .rail:not(.expanded) .legendcard{padding:8px 14px}
  .rail:not(.expanded) .legendcard .actions{margin-top:6px}
  .sheettoggle{display:block;width:100%;background:var(--panel);border:1px solid var(--edge);
    border-radius:10px;color:var(--ink);font:500 13px var(--sans);
    padding:8px 0 11px;cursor:pointer;backdrop-filter:blur(8px)}
  .sheettoggle span{color:var(--heat)}
  .sheettoggle::before{content:'';display:block;width:40px;height:4px;border-radius:2px;
    background:var(--dim);opacity:.55;margin:0 auto 7px}
  .sheettoggle:active{border-color:var(--heat)}
  .detail{top:auto;bottom:0;right:0;width:100%;max-height:64%;border-radius:14px 14px 0 0;
    transform:translateY(20px);padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  .detail.open{transform:none}
  .kpis .kpi:nth-child(n+3){display:none}
  .leaflet-control-zoom{display:none}
}
@media (pointer:coarse){
  input[type=range]{height:6px}
  input[type=range]::-webkit-slider-thumb{width:24px;height:24px}
  input[type=range]::-moz-range-thumb{width:16px;height:16px}
  .helpbtn{width:28px;height:28px}
  button.act{padding:11px 8px}
  .filterrow{padding:4px 0}
}
@media (prefers-reduced-motion:reduce){
  .detail{transition:none}
}
.leaflet-interactive:focus{outline:2px solid var(--heat)}

/* Beeldmerk voor het woordmerk. Als CSS-achtergrond en niet als <img>, zodat
   het thema hem kan omwisselen: de pin in logo.png is bijna zo donker als het
   donkere doek, dus daar is de lichte variant nodig. */
.logo::before,.brand>em:first-child{content:""}
a.logo{color:inherit;text-decoration:none}
.logo::before{display:inline-block;width:1.5em;height:1.5em;margin-right:.4em;
  vertical-align:-.42em;background:url(/logo.png) center/contain no-repeat}
html[data-theme="dark"] .logo::before{background-image:url(/logo-dark.png)}
/* Op de kaart zit het woordmerk in het zijpaneel van 260 px, samen met "by
   1338" en drie knoppen. Daar is 1.5em te veel en klapt de regel om; elders is
   er ruimte. Verkleinen en niet weglaten, want het beeldmerk hoort ook hier
   linksboven te staan. */
.brand a.logo::before{width:1.15em;height:1.15em;margin-right:.3em;
  vertical-align:-.28em}
/* De regelbreuk zat op order:-1. Een flexitem met flex-basis:100% dat als
   EERSTE staat, pakt zelf een lege regel en breekt daarna niets meer: de
   knoppen braken dus gewoon af waar ze toevallig niet meer pasten, en op het
   paneel van 260 px viel het vraagtekenknopje alleen op regel twee, links
   naast de ondertitel. Nu staat de breuk op zijn natuurlijke plek, direct na
   "by 1338", en is de indeling vast: regel 1 het woordmerk, regel 2 de
   ondertitel met de knoppen en de taalkeuze rechts.
   De DOM-volgorde blijft logo, byline, knoppen, keuzelijst - de ondertitel
   ertussen is een span zonder focus, dus de toetsenbordroute verandert niet. */
/* Onder 400 px moet het paneel de zoekbalk kwijt kunnen; dan valt het
   beeldmerk weg en blijft het woordmerk staan. */
@media (max-width:400px){.brand a.logo::before{display:none}}