/* Huisstijl Buienbeeld, uitgekleed tot wat deze app nodig heeft: navy balk,
   blauw accent, en de stoplichtkleuren voor de buienintensiteit. */
:root {
  --bg: oklch(0.965 0.01 240);
  --card: #fff;
  --text: oklch(0.25 0.03 255);
  --text-muted: oklch(0.5 0.02 250);
  --accent: oklch(0.55 0.14 250);
  --navy: oklch(0.28 0.08 255);
  --navy-tekst: oklch(0.85 0.06 230);
  --navy-tekst-zacht: oklch(0.75 0.1 230);
  --accent-licht: oklch(0.68 0.13 245);
  --border-strong: oklch(0.85 0.02 250);
  --border: oklch(0.92 0.01 250);
  --chip: oklch(0.955 0.01 245);
  --shadow: 0 4px 24px rgba(7, 41, 79, 0.07);
  --radius: 14px;
  --groen: oklch(0.7 0.14 150);
  --geel: oklch(0.78 0.12 105);
  --oranje: oklch(0.68 0.16 45);
  --rood: oklch(0.6 0.19 25);
  --groen-bg: oklch(0.93 0.07 150);
  --groen-text: oklch(0.45 0.11 150);
  --geel-bg: oklch(0.95 0.08 105);
  --geel-text: oklch(0.5 0.1 90);
  --oranje-bg: oklch(0.93 0.05 45);
  --oranje-text: oklch(0.5 0.14 45);
  --rood-bg: oklch(0.92 0.05 25);
  --rood-text: oklch(0.45 0.15 25);
  --zee: oklch(0.89 0.045 232);
  --land: oklch(0.975 0.012 120);
  --landlijn: oklch(0.78 0.03 240);
  --stip: oklch(0.45 0.16 255);
  --sfeer-groen: oklch(0.88 0.09 150 / 0.55);
  --sfeer-geel: oklch(0.9 0.1 105 / 0.5);
  --sfeer-oranje: oklch(0.85 0.11 45 / 0.5);
  --sfeer-rood: oklch(0.82 0.12 25 / 0.45);
  color-scheme: light;
}

:root[data-theme='dark'] {
  --bg: oklch(0.21 0.04 255);
  --card: oklch(0.26 0.05 254);
  --text: oklch(0.93 0.01 240);
  --text-muted: oklch(0.72 0.04 245);
  --accent: oklch(0.75 0.1 230);
  --navy: oklch(0.24 0.06 255);
  --navy-tekst: oklch(0.85 0.06 230);
  --navy-tekst-zacht: oklch(0.75 0.1 230);
  --accent-licht: oklch(0.7 0.12 240);
  --border: oklch(0.34 0.05 253);
  --border-strong: oklch(0.42 0.05 252);
  --chip: oklch(0.31 0.05 253);
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
  --groen-bg: oklch(0.32 0.06 150);
  --groen-text: oklch(0.8 0.13 150);
  --geel-bg: oklch(0.33 0.05 100);
  --geel-text: oklch(0.85 0.11 100);
  --oranje-bg: oklch(0.32 0.06 45);
  --oranje-text: oklch(0.78 0.13 50);
  --rood-bg: oklch(0.3 0.07 25);
  --rood-text: oklch(0.75 0.12 25);
  --zee: oklch(0.17 0.045 250);
  --land: oklch(0.31 0.035 230);
  --landlijn: oklch(0.45 0.05 245);
  --stip: oklch(0.8 0.12 240);
  --sfeer-groen: oklch(0.45 0.12 150 / 0.4);
  --sfeer-geel: oklch(0.5 0.1 100 / 0.35);
  --sfeer-oranje: oklch(0.5 0.13 45 / 0.4);
  --sfeer-rood: oklch(0.45 0.15 25 / 0.4);
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* Drie browsergewoontes die een pagina meteen als "website" verraden: tekst
   die je per ongeluk selecteert, het blauwe blokje bij een tik, en de pagina
   die meeveert als je voorbij het einde scrollt. Uit. */
html {
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--text);
  line-height: 1.5;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  /* De sfeerkleur komt van het oordeel: bij regen kleurt het hele scherm mee,
     niet alleen het bovenste blok. Zie --sfeer, gezet door app.js. */
  background:
    radial-gradient(120% 70% at 50% 0%, var(--sfeer, transparent) 0%, transparent 68%),
    var(--bg);
  background-attachment: fixed;
  transition: background-color 0.5s ease;
}

/* Cijfers en tijden mogen niet verspringen bij het verversen: elk cijfer even
   breed. */
.kans-cijfer, .as, .oordeel-kop { font-variant-numeric: tabular-nums; }

a { color: var(--accent); text-decoration: none; }

button { appearance: none; font: inherit; color: inherit; background: none; border: 0; }

.ic { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* Balk */
.balk {
  background: var(--navy);
  color: var(--navy-tekst);
  position: sticky;
  top: 0;
  z-index: 10;
}

.balk-boven {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: max(0.6rem, env(safe-area-inset-top)) 1rem 0.6rem;
}

.balk-knoppen { display: flex; gap: 0.5rem; }

.rond {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
}
.rond:active { background: rgba(255, 255, 255, 0.25); }
.rond[data-bezig='1'] { animation: pols 1s ease-in-out infinite; }
@keyframes pols { 50% { opacity: 0.4; } }

main { flex: 1; width: 100%; max-width: 32rem; margin: 0 auto; padding: 1rem 1rem 2rem; }

/* Zoeken */
.zoek { position: relative; margin-bottom: 1rem; }
#zoekveld {
  width: 100%;
  padding: 0.85rem 1rem;
  font-size: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--text);
}
#zoekveld:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.suggesties {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 0.35rem);
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 5;
}
.suggesties li a {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.7rem 0.75rem;
  border-radius: 10px;
  color: var(--text);
}
.suggesties li a:active { background: var(--chip); }
.suggesties small { color: var(--text-muted); }

/* Oordeel */
.oordeel {
  padding: 1.5rem 1.25rem;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
  text-align: center;
}
.oordeel-plaats { margin: 0; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.75; }
.oordeel-kop { margin: 0.35rem 0 0.5rem; font-size: clamp(1.75rem, 8vw, 2.4rem); line-height: 1.1; font-weight: 800; letter-spacing: -0.03em; }
.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; }
.kans { padding: 0.9rem 0.5rem; text-align: center; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); }
.kans-cijfer { display: block; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
.kans-label { font-size: 0.75rem; 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; }
}