/* Het hoofdoordeel op de voorpagina, de tijdlijn met blokjes, de
   cijfervakjes en de tekstpagina's. Apart bestand omdat buienkans.css over
   de grens van 300 regels ging; daar staan nu alleen nog de tokens, de
   basisregels en de balk. */

/* Oordeel */
.oordeel {
  padding: 1.5rem 1.25rem;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
  text-align: center;
}
/* Geen kapitalen met spatiëring: dat is het snelste teken van een
   standaardsjabloon. Gewone schrijfwijze, klein en zacht, doet hetzelfde werk. */
.oordeel-plaats { margin: 0; font-size: 0.85rem; font-weight: 500; opacity: 0.7; }
.oordeel-kop { font-family: var(--kop); margin: 0.3rem 0 0.5rem; font-size: clamp(1.75rem, 8vw, 2.4rem); line-height: 1.08; font-weight: 800; letter-spacing: -0.035em; text-shadow: var(--tekstschaduw); }
.oordeel-sub { margin: 0; font-size: 1rem; opacity: 0.85; }

.oordeel.k-groen { background: var(--groen-bg); color: var(--groen-text); }
.oordeel.k-geel { background: var(--geel-bg); color: var(--geel-text); }
.oordeel.k-oranje { background: var(--oranje-bg); color: var(--oranje-text); }
.oordeel.k-rood { background: var(--rood-bg); color: var(--rood-text); }

/* Tijdlijn */
.tijdlijn { margin-top: 1rem; padding: 1rem; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); }
.balken {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 6.5rem;
  padding-bottom: 2px;
  border-bottom: 2px solid var(--border);
}
.staaf {
  flex: 1;
  min-height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--groen);
  transition: height 0.3s ease;
}
.staaf.k-geel { background: var(--geel); }
.staaf.k-oranje { background: var(--oranje); }
.staaf.k-rood { background: var(--rood); }
.staaf.leeg { background: var(--border); }

/* Bij een volledig droge twee uur is de grafiek per definitie vlak; het
   onderschrift zegt dan wat de vlakke lijn betekent. */
.tijdlijn .as span:first-child { font-weight: 600; color: var(--text); }
.as { display: flex; justify-content: space-between; margin-top: 0.5rem; font-size: 0.75rem; color: var(--text-muted); }

/* Kaartje met radar */
.kaartje { margin: 1rem 0 0; padding: 0; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow); background: var(--card); }
.kaartvlak { position: relative; }
.kaartje svg { display: block; width: 100%; height: auto; aspect-ratio: 1; }
/* De wolkenlaag ligt exact over de kaart; de shader tekent er de neerslag op. */
.kaartje .wolken { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.kaartje .wolken[hidden] { display: none; }
/* Randen van de radartegels zijn hard; een zweem onscherpte laat ze in elkaar
   overlopen zonder dat de bui van plek verandert. */
.kaartje .radarlaag { opacity: 0.85; }
.kaartje .radarlaag image { image-rendering: auto; }
.kaartje-bij { margin: 0; padding: 0.5rem 0.75rem; font-size: 0.75rem; color: var(--text-muted); text-align: center; }

/* Kansen */
.kansen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-top: 1rem; }
/* Tweede oppervlakteniveau: hairline in plaats van schaduw. Twaalf kaarten met
   dezelfde zachte schaduw laten alles even zwaar wegen, en dan is er geen
   hiërarchie meer. De schaduw blijft voor het hoofdoordeel. */
.kans { padding: 0.85rem 0.6rem; text-align: left; background: var(--card); border-radius: var(--radius-klein); }
.kans-cijfer { display: block; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.035em; line-height: 1.1; text-shadow: var(--tekstschaduw); }
.kans-label { font-size: 0.72rem; color: var(--text-muted); }

.snelkeuze { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; justify-content: center; }
.snelkeuze a { padding: 0.45rem 0.8rem; border-radius: 999px; background: var(--chip); color: var(--text); font-size: 0.9rem; }

/* Voet en tekstpagina's */
.voet { display: flex; justify-content: center; gap: 1.25rem; padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom)); font-size: 0.85rem; color: var(--text-muted); }
.tekstknop { color: var(--accent); cursor: pointer; }
.tekstpagina { max-width: 34rem; }
.tekstpagina h1 { font-size: 1.6rem; letter-spacing: -0.02em; }
.tekstpagina h2 { font-size: 1.1rem; margin-top: 1.75rem; }
.terug { margin-top: 2rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Satellietondergrond: zodra de tegels er zijn wordt het land doorzichtig en
   blijft alleen de provincielijn over. In het donkere thema ligt er een waas
   overheen, want een dagfoto knalt anders uit een donkere pagina. */
.kaartje svg .ondergrond-dim { fill: #07294f; opacity: 0; pointer-events: none; }
.kaartje svg.met-ondergrond .land { fill: transparent; stroke: rgba(255, 255, 255, 0.55); }
[data-theme='dark'] .kaartje svg.met-ondergrond .ondergrond-dim { opacity: 0.45; }
.kaartje svg:not(.met-ondergrond) .ondergrond { display: none; }
.tekstpagina .bronnen { padding-left: 1.1rem; font-size: 0.9rem; color: var(--text-muted); }
.tekstpagina .bronnen li { margin: 0.25rem 0; }

/* Keuzescherm bij gelijknamige plaatsen: kaartje zegt in één oogopslag wélke
   Zevenhuizen dit is, de tekst noemt provincie en gemeente. */
.keuze { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: 0.5rem; }
.keuze a { display: flex; align-items: center; gap: 0.9rem; padding: 0.6rem 0.75rem; border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); color: inherit; text-decoration: none; }
.keuze a:hover { outline: 2px solid var(--accent); }
.minikaart { flex-shrink: 0; width: 3.4rem; height: auto; }
.minikaart path { fill: var(--land); stroke: var(--landlijn); stroke-width: 6; }
.minikaart .halo { fill: var(--accent); opacity: 0.25; }
.minikaart .stip { fill: var(--accent); stroke: #fff; stroke-width: 14; }
.keuze-tekst { display: flex; flex-direction: column; }
.keuze-naam { font-weight: 600; }
.keuze-sub { font-size: 0.8rem; color: var(--text-muted); }