/* Filterbalk, tijdschuif en hitte-laag (assets/map-tools.js) en de knoppen naar de meldformulieren (WDK.renderReportCta).
   Gebruikt de kleurvariabelen van de pagina's. */
/* #explorer is leeg tot WDK.mountExplorer 'm vult; zonder gereserveerde hoogte springt de kaart eronder omlaag zodra dat
   gebeurt (een layout shift). De hoogtes hieronder zijn gemeten (dichtgeklapt op mobiel, open op desktop; de homepage heeft
   een extra rij door het soortfilter en overschrijft dit in assets/home.css). */
#explorer{ min-height:208px; }
@media (max-width:640px){
  #explorer{ min-height:44px; }
}
.wdk-ex{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:10px;
  padding:12px;
  background:var(--map-surface);
  border:1px solid var(--border);
  border-radius:10px;
}
.wdk-panel{ display:block; }
.wdk-head{
  display:flex;
  align-items:center;
  gap:8px 10px;
  list-style:none;
  cursor:pointer;
  user-select:none;
}
.wdk-head::-webkit-details-marker{ display:none; }
.wdk-head::before{
  content:"";
  width:7px;
  height:7px;
  flex:none;
  border-right:2px solid var(--ink-2);
  border-bottom:2px solid var(--ink-2);
  transform:rotate(-45deg);
  transition:transform .15s;
}
.wdk-panel[open] > .wdk-head::before{ transform:rotate(45deg); }
.wdk-title{ font-weight:600; font-size:13.5px; color:var(--ink); white-space:nowrap; }
.wdk-badge{
  font-family:Arial, Helvetica, sans-serif;
  font-size:9.5px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.04em;
  background:var(--accent);
  color:var(--accent-ink);
  padding:2px 7px;
  border-radius:99px;
}
.wdk-badge[hidden]{ display:none; }
.wdk-head-sum{ margin-left:auto; font-size:12px; color:var(--muted); text-align:right; }
.wdk-panel[open] > .wdk-head .wdk-head-sum{ display:none; } /* open: de samenvatting staat al onderaan */
.wdk-head:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }
.wdk-body{ display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.wdk-row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; }
.wdk-label{
  font-family:Arial, Helvetica, sans-serif;
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--muted);
  min-width:56px;
}
.wdk-chip{
  appearance:none;
  border:1px solid var(--border-strong);
  background:var(--surface);
  color:var(--ink);
  font:inherit;
  font-family:Arial, Helvetica, sans-serif;
  font-size:12.5px;
  padding:5px 12px 5px 10px;
  border-radius:99px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.wdk-chip[aria-pressed="false"]{ background:transparent; color:var(--muted); }
.wdk-chip[aria-pressed="false"] .swatch{ opacity:.35; }
.wdk-field, .wdk-check{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12.5px;
  color:var(--ink-2);
}
.wdk-check{ cursor:pointer; }
.wdk-check input{ accent-color:var(--ink); margin:0; cursor:pointer; }
.wdk-date{
  font:inherit;
  font-family:Arial, Helvetica, sans-serif;
  font-size:13px;
  padding:5px 8px;
  border:1px solid var(--border-strong);
  border-radius:8px;
  background:var(--surface);
  color:var(--ink);
}
.wdk-btn{
  appearance:none;
  border:1px solid var(--border-strong);
  background:var(--surface);
  color:var(--ink);
  font:inherit;
  font-family:Arial, Helvetica, sans-serif;
  font-size:12.5px;
  font-weight:600;
  padding:5px 12px;
  border-radius:8px;
  cursor:pointer;
}
.wdk-btn:hover:not(:disabled){ background:var(--tab-bg); }
.wdk-btn:disabled{ opacity:.4; cursor:default; }
.wdk-play{
  appearance:none;
  width:34px;
  height:34px;
  flex:none;
  border:none;
  border-radius:50%;
  background:var(--accent);
  color:var(--accent-ink);
  font-size:12px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.wdk-play:disabled{ opacity:.4; cursor:default; }
.wdk-slider{ flex:1 1 160px; min-width:120px; accent-color:var(--accent); cursor:pointer; }
.wdk-month{
  min-width:92px;
  font-family:Arial, Helvetica, sans-serif;
  font-size:12px;
  font-weight:500;
  color:var(--ink);
}
.wdk-foot{ justify-content:space-between; }
.wdk-summary{ flex:1; min-width:140px; font-size:12.5px; color:var(--ink-2); text-align:center; }
.wdk-chip:focus-visible, .wdk-btn:focus-visible, .wdk-play:focus-visible,
.wdk-date:focus-visible, .wdk-slider:focus-visible, .wdk-check input:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
@media (max-width:640px){
  .wdk-label{ min-width:52px; }
  .wdk-summary{ order:3; flex-basis:100%; text-align:left; }
  .wdk-chip, .wdk-btn{ padding-block:8px; }
  .wdk-date{ padding-block:8px; }
}

/* Knoppen naar de meldformulieren */
.rc-actions{ display:flex; flex-wrap:wrap; gap:10px; }
.rc-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 18px;
  border-radius:10px;
  border:1px solid var(--border-strong);
  background:var(--surface);
  color:var(--ink);
  font-family:Arial, Helvetica, sans-serif;
  font-size:14px;
  font-weight:600;
  text-decoration:none;
}
.rc-btn:hover{ background:var(--tab-bg); }
.rc-btn.is-primary{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.rc-btn.is-primary:hover{ filter:brightness(1.15); background:var(--accent); }
.rc-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.rc-arrow{ opacity:.7; font-size:13px; }
@media (max-width:520px){ .rc-btn{ flex:1 1 100%; justify-content:center; } }

/* Links in lopende tekst: de kleur van de pagina in plaats van het standaardblauw van de browser */
.sub a, .card-foot a, .notice a{ color:var(--ink); text-underline-offset:2px; }
.sub a:hover, .card-foot a:hover, .notice a:hover{ text-decoration-thickness:2px; }

/* Regel onder de cijfers: wat er buiten het getoonde gebied is gemeld */
.stats-note{ margin:-10px 4px 0; font-size:12.5px; line-height:1.5; color:var(--muted); }
.stats-note:empty{ display:none; }

/* Clusters op de kaart (WDK.clusterLayer in assets/map-tools.js): één bolletje met het aantal meldingen */
.wdk-cluster-icon{ background:none; border:none; }
.wdk-cluster{
  position:relative;
  width:100%;
  height:100%;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  border:2px solid var(--map-surface);
  background:var(--c);
  color:#fff;
  font-family:Arial, Helvetica, sans-serif;
  font-weight:600;
  font-size:13px;
  text-shadow:0 1px 2px rgba(0,0,0,.55);
  box-shadow:0 1px 4px rgba(0,0,0,.3);
  cursor:pointer;
}
.wdk-cluster::before{ content:""; position:absolute; inset:-6px; border-radius:50%; background:var(--c); opacity:.28; z-index:-1; }
.wdk-cluster-icon:focus-visible .wdk-cluster{ outline:2px solid var(--accent); outline-offset:3px; }