/* ── Weer · zonder ballast ── app.css ─────────────────────────
   Editorial stijl: warm inkt + crème + oker, papier-grain,
   hairlines, vlakke illustratie. Geen externe fonts of imports. */

:root{
  /* palet */
  --ink:#16181A;
  --ink-2:#1D2024;
  --cream:#EAE2CE;
  --cream-dim:rgba(234,226,206,.58);
  --ochre:#D9A441;
  --blue:#7E96A6;
  --brick:#C4604F;
  --line:rgba(234,226,206,.16);
  --card:rgba(234,226,206,.045);
  --card-line:rgba(234,226,206,.14);

  --bg-top:#15191C;
  --bg-bot:#101316;
  --fg:var(--cream);
  --fg-dim:var(--cream-dim);

  /* scene (dag-standaard; .t-dusk/.t-night overschrijven) */
  --sc-sky:#E7DDC4;
  --sc-sun:#D9A441;
  --sc-back:#B4A88B;
  --sc-front:#21262A;
  --sc-water:#4E6E72;
  --sc-cloud1:#F4EEDC;
  --sc-cloud2:#D8CCAE;
  --sc-rain:#7E96A6;
  --sc-snow:#F4EEDC;
  --tb:#1D2226;            /* topbar-kleur op de scene */

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;

  --r:16px;
  --pad:clamp(16px,4.5vw,28px);
  --maxw:680px;
}

body.t-dusk{
  --sc-sky:#E3C79E;
  --sc-sun:#C97B4A;
  --sc-back:#AE8E6C;
  --sc-front:#241F22;
  --sc-water:#4A4650;
  --sc-cloud1:#F2E3C6;
  --sc-cloud2:#CDB28C;
  --sc-rain:#8A8DA0;
  --tb:#241F22;
}
body.t-night{
  --sc-sky:#1C2733;
  --sc-back:#2A3540;
  --sc-front:#0D1115;
  --sc-water:#121C24;
  --sc-cloud1:#2B3744;
  --sc-cloud2:#232E3A;
  --sc-rain:#5E7585;
  --sc-snow:#C9CDC2;
  --tb:#EAE2CE;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  color:var(--fg);
  background:var(--ink);
  min-height:100dvh;
  line-height:1.45;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* rustige inkt-gradient achter alles */
#sky{
  position:fixed;inset:0;z-index:-2;
  background:linear-gradient(170deg,var(--bg-top) 0%,var(--bg-bot) 80%,var(--bg-bot) 100%);
  transition:background 1.2s ease;
}
/* papier-grain over de hele pagina (ook over de scene) */
#grain{
  position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   radial-gradient(rgba(0,0,0,.05) 1px,transparent 1px);
  background-size:3px 3px,5px 5px;
  background-position:0 0,1px 2px;
  mix-blend-mode:overlay;
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) 56px;position:relative}

/* ── Editorial scene ─────────────────────────────────────── */
.scene{
  position:relative;
  height:clamp(170px,38vw,250px);
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.scene > svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.s-sky{fill:var(--sc-sky);transition:fill 1.2s ease}
.s-sun circle{fill:var(--sc-sun)}
.s-rays line{stroke:var(--sc-sun)}
.s-moon{display:none}
.s-moon circle{fill:#E8E0CC}
.s-moon .s-moon-bite{fill:var(--sc-sky)}
.s-cloud{fill:var(--sc-cloud1)}
.s-c2{fill:var(--sc-cloud2)}
.s-c3{fill:var(--sc-cloud2)}
.s-back{fill:var(--sc-back)}
.s-front{fill:var(--sc-front)}
.s-mill line{stroke:var(--sc-front)}
.s-water{fill:var(--sc-water)}
.s-rain{stroke:var(--sc-rain);display:none}
.s-snow{fill:var(--sc-snow);display:none}
.s-lights{fill:var(--ochre);display:none}

/* tijd van de dag */
body.t-night .s-sun{display:none}
body.t-night .s-moon{display:block}
body.t-night .s-lights{display:block}

/* weertype */
body.w-clear .s-cloud{display:none}
body.w-some .s-c2{display:none}
body.w-some .s-c3{display:none}
body.w-cloud .s-sun .s-rays,
body.w-rain .s-sun .s-rays,
body.w-snow .s-sun .s-rays,
body.w-storm .s-sun .s-rays{display:none}
body.w-cloud .s-sun circle{opacity:.45}
body.w-rain .s-sun circle,body.w-storm .s-sun circle{opacity:.3}
body.w-snow .s-sun circle{opacity:.4}
body.w-rain .s-rain,body.w-storm .s-rain{display:block}
body.w-snow .s-snow{display:block}

/* ── Top bar (op de scene) ───────────────────────────────── */
.scene header{
  position:absolute;top:0;left:0;right:0;
  max-width:var(--maxw);margin:0 auto;
  display:flex;align-items:center;gap:12px;
  padding:max(14px,env(safe-area-inset-top)) var(--pad) 0;
  color:var(--tb);
}
.mark{
  display:flex;align-items:center;gap:9px;font-weight:650;font-size:15px;
  letter-spacing:-.01em;color:var(--tb);text-decoration:none;
}
.mark .dot{width:9px;height:9px;border-radius:50%;background:var(--ochre);box-shadow:0 0 0 4px rgba(217,164,65,.2)}
.mark small{opacity:.65;font-weight:400}
header .spacer{flex:1}
.iconbtn{
  appearance:none;
  border:1px solid color-mix(in srgb,var(--tb) 32%,transparent);
  background:color-mix(in srgb,var(--tb) 8%,transparent);
  color:var(--tb);width:40px;height:40px;border-radius:11px;cursor:pointer;
  display:grid;place-items:center;transition:background .15s,border-color .15s;
}
.iconbtn:hover{background:color-mix(in srgb,var(--tb) 16%,transparent)}
.iconbtn:focus-visible{outline:2px solid var(--ochre);outline-offset:2px}
.iconbtn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.unit-lbl{font-family:var(--mono);font-size:13px;font-weight:600}

/* ── Search ──────────────────────────────────────────────── */
.search{position:relative;margin-top:18px}
.search-row{display:flex;gap:9px}
.search input{
  flex:1;appearance:none;font-family:var(--sans);font-size:16px;color:var(--fg);
  background:var(--card);border:1px solid var(--card-line);border-radius:12px;
  padding:13px 15px;outline:none;transition:border-color .15s,background .15s;
}
.search input::placeholder{color:var(--fg-dim)}
.search input:focus{border-color:var(--ochre);background:rgba(234,226,206,.08)}
.geo{
  flex:0 0 auto;display:flex;align-items:center;gap:7px;padding:0 15px;
  border:1px solid var(--card-line);background:var(--card);border-radius:12px;
  color:var(--fg);font-size:14px;font-weight:500;cursor:pointer;white-space:nowrap;
  transition:background .15s,border-color .15s;
}
.geo:hover{background:rgba(234,226,206,.1)}
.geo:focus-visible{outline:2px solid var(--ochre);outline-offset:2px}
.geo svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}
.results{
  position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:30;
  background:#1E2226;border:1px solid var(--card-line);border-radius:12px;
  overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.5);display:none;
}
.results.show{display:block}
.results button{
  display:block;width:100%;text-align:left;padding:12px 15px;background:none;border:0;
  color:var(--fg);font-size:15px;cursor:pointer;border-bottom:1px solid var(--line);
}
.results button:last-child{border-bottom:0}
.results button:hover,.results button.active{background:rgba(234,226,206,.07)}
.results button small{color:var(--fg-dim);font-size:13px}
.note{display:none;margin-top:9px;font-size:13px;color:var(--ochre)}
.note.show{display:block}

/* ── Meldingen ───────────────────────────────────────────── */
.msg{padding:18px;border-radius:12px;background:var(--card);border:1px solid var(--card-line);font-size:14px;color:var(--fg-dim)}
.msg b{color:var(--fg)}
#errBox{margin-top:16px}
#errBox[hidden]{display:none}
.noscript-msg{margin-top:16px}

/* ── Hero (now) ──────────────────────────────────────────── */
.now{padding:26px 2px 14px;position:relative}
.place{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.place h1{
  font-size:clamp(17px,4.6vw,21px);font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;
}
.place .sub{color:var(--fg-dim);font-size:13px;letter-spacing:.02em}
.now-main{display:flex;align-items:flex-start;gap:clamp(10px,4vw,26px);margin-top:10px}
.temp{
  font-family:var(--mono);font-feature-settings:"tnum" 1;
  font-size:clamp(74px,22vw,118px);font-weight:450;line-height:.86;letter-spacing:-.045em;
}
.temp .deg{font-size:.4em;vertical-align:top;color:var(--fg-dim)}
.now-side{padding-top:8px;flex:1;min-width:0}
.now-icon{width:clamp(56px,16vw,84px);height:clamp(56px,16vw,84px);margin-bottom:4px}
.desc{font-size:clamp(16px,4.5vw,19px);font-weight:500;letter-spacing:-.01em}
.feels{color:var(--fg-dim);font-size:14px;margin-top:2px}
.hi-lo{display:flex;gap:14px;margin-top:10px;font-family:var(--mono);font-size:14px;font-feature-settings:"tnum" 1}
.hi-lo span{color:var(--fg-dim)}
.hi-lo b{font-weight:600;color:var(--fg)}

/* quick stats: één hairline-kader met scheidingslijnen */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:22px;
  border:1px solid var(--card-line);border-radius:12px;overflow:hidden;
  background:var(--card);
}
.stat{padding:12px 12px;border-left:1px solid var(--line)}
.stat:first-child{border-left:0}
.stat .k{display:flex;align-items:center;gap:6px;color:var(--fg-dim);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.07em}
.stat .k svg{width:13px;height:13px;stroke:var(--ochre);fill:none;stroke-width:1.8}
.stat .v{font-family:var(--mono);font-feature-settings:"tnum" 1;font-size:18px;font-weight:600;margin-top:6px;letter-spacing:-.01em}
.stat .v small{font-size:11px;color:var(--fg-dim);font-weight:400}

/* ── Section scaffolding ─────────────────────────────────── */
section{margin-top:30px}
.eyebrow{
  display:flex;align-items:center;gap:10px;color:var(--fg-dim);
  font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;margin-bottom:13px;
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--line)}

/* ── Signature: scrubbable 24h band ──────────────────────── */
.band-card{
  background:var(--card);border:1px solid var(--card-line);border-radius:var(--r);
  padding:16px 0 6px;overflow:hidden;
}
.band-readout{
  display:flex;align-items:baseline;justify-content:space-between;
  padding:0 18px 14px;gap:12px;
}
.band-readout .left{display:flex;align-items:baseline;gap:12px}
.band-readout .bt{font-family:var(--mono);font-feature-settings:"tnum" 1;font-size:30px;font-weight:600;letter-spacing:-.02em}
.band-readout .blabel{color:var(--fg-dim);font-size:13px}
.band-readout .bp{font-family:var(--mono);font-feature-settings:"tnum" 1;font-size:13px;color:var(--blue);font-weight:600}
.band-scroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:0 18px}
.band-scroll::-webkit-scrollbar{display:none}
.band{display:flex;gap:0;min-width:min-content;position:relative;touch-action:pan-x}
.hour{
  flex:0 0 auto;width:52px;display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:6px 0 8px;cursor:pointer;border-radius:9px;position:relative;
}
.hour .ht{font-family:var(--mono);font-size:12px;color:var(--fg-dim);font-feature-settings:"tnum" 1}
.hour .hi{width:24px;height:24px}
.hour .hv{font-family:var(--mono);font-size:13px;font-weight:600;font-feature-settings:"tnum" 1}
.hour .hp{font-family:var(--mono);font-size:10px;color:var(--blue);height:12px;font-feature-settings:"tnum" 1}
.hour.sel{background:rgba(217,164,65,.16)}
.hour.sel .ht{color:var(--ochre)}
.hour.now-mark::before{content:"";position:absolute;top:2px;width:5px;height:5px;border-radius:50%;background:var(--ochre)}

/* ── 7-day ───────────────────────────────────────────────── */
.days{display:flex;flex-direction:column;gap:2px}
.day{
  display:grid;grid-template-columns:56px 30px 1fr auto;align-items:center;gap:12px;
  padding:11px 6px;border-bottom:1px solid var(--line);
}
.day:last-child{border-bottom:0}
.day .dn{font-size:14px;font-weight:500}
.day .di{width:26px;height:26px}
.day .dp{font-family:var(--mono);font-size:12px;color:var(--blue);font-feature-settings:"tnum" 1;text-align:right;min-width:36px}
.bar-wrap{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-feature-settings:"tnum" 1;font-size:13px}
.bar-wrap .lo{color:var(--fg-dim);width:26px;text-align:right}
.bar-wrap .hi{width:26px}
.track{position:relative;width:clamp(60px,26vw,120px);height:3px;background:rgba(234,226,206,.13);border-radius:2px}
.track .fill{
  position:absolute;top:0;height:100%;border-radius:2px;
  background:linear-gradient(90deg,var(--blue),var(--ochre));
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 7px,transparent 7px 11px);
  mask:repeating-linear-gradient(90deg,#000 0 7px,transparent 7px 11px);
}

/* ── Radar ───────────────────────────────────────────────── */
.radar-card{border:1px solid var(--card-line);border-radius:var(--r);overflow:hidden;background:var(--card)}
#map{height:clamp(260px,52vw,360px);width:100%;background:#10151A;z-index:0}
.radar-ctl{display:flex;align-items:center;gap:12px;padding:12px 14px 6px}
.playbtn{
  appearance:none;border:1px solid var(--card-line);background:rgba(234,226,206,.07);color:var(--fg);
  width:38px;height:38px;border-radius:10px;cursor:pointer;display:grid;place-items:center;flex:0 0 auto;
}
.playbtn:hover{background:rgba(234,226,206,.13)}
.playbtn:focus-visible{outline:2px solid var(--ochre);outline-offset:2px}
.playbtn svg{width:16px;height:16px;fill:currentColor}
.radar-ctl input[type=range]{flex:1;accent-color:var(--ochre);height:4px}
.radar-time{font-family:var(--mono);font-size:13px;font-weight:600;font-feature-settings:"tnum" 1;min-width:74px;text-align:right}
.radar-time small{color:var(--fg-dim);font-weight:400}
.radar-legend{
  display:flex;align-items:center;gap:7px;padding:0 14px 12px;
  font-size:11px;color:var(--fg-dim);text-transform:uppercase;letter-spacing:.06em;
}
.radar-legend .ldot{width:8px;height:8px;border-radius:50%;margin-left:8px}
.radar-legend .ldot:first-child{margin-left:0}
.radar-legend .l1{background:#79C0E8}
.radar-legend .l2{background:#E8C23D}
.radar-legend .l3{background:#C4604F}
/* ondergrond-kaart gedempt naar papier-tinten; radar-overlay blijft op kleur */
.basemap-pane{filter:grayscale(.45) sepia(.22) brightness(.95) saturate(.75)}

/* ── Air quality ─────────────────────────────────────────── */
.aqi-card{
  background:var(--card);border:1px solid var(--card-line);border-radius:var(--r);padding:16px 18px;
}
.aqi-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.aqi-badge{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px}
.aqi-dot{width:11px;height:11px;border-radius:50%}
.aqi-num{font-family:var(--mono);font-size:26px;font-weight:650;font-feature-settings:"tnum" 1;letter-spacing:-.02em}
.aqi-scale{position:relative;height:5px;border-radius:3px;margin:14px 0 8px;
  background:linear-gradient(90deg,#4FB477 0%,#A8C545 20%,#E8C23D 40%,#E8893D 60%,#D9534F 80%,#9B59B6 100%)}
.aqi-needle{position:absolute;top:-4px;left:0;width:3px;height:13px;border-radius:2px;background:var(--fg);box-shadow:0 0 0 2px var(--ink);transition:left .4s ease}
.aqi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.aqi-grid .cell{background:rgba(234,226,206,.05);border-radius:10px;padding:9px 11px}
.aqi-grid .cell .ck{color:var(--fg-dim);font-size:11px;text-transform:uppercase;letter-spacing:.05em}
.aqi-grid .cell .cv{font-family:var(--mono);font-size:15px;font-weight:600;margin-top:3px;font-feature-settings:"tnum" 1}
.aqi-grid .cell .cv small{font-size:10px;color:var(--fg-dim)}

/* ── Footer ──────────────────────────────────────────────── */
footer{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);color:var(--fg-dim);font-size:12.5px;line-height:1.7}
footer b{color:var(--fg);font-weight:600}
footer a{color:var(--ochre);text-decoration:none}
footer a:hover{text-decoration:underline}
.badges{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;color:var(--fg);
  background:rgba(234,226,206,.05);border:1px solid var(--card-line);border-radius:999px;padding:5px 11px}
.badge svg{width:12px;height:12px;stroke:var(--ochre);fill:none;stroke-width:2}

/* ── States ──────────────────────────────────────────────── */
.skeleton{animation:pulse 1.4s ease-in-out infinite;background:rgba(234,226,206,.07);border-radius:8px;color:transparent!important}
@keyframes pulse{50%{opacity:.45}}

/* fade-in */
.reveal{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
.reveal.in{opacity:1;transform:none}

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

/* Leaflet dark tweaks (vendor/leaflet.css wordt eerst geladen) */
.leaflet-container{background:#10151A!important;font-family:var(--sans)!important}
.leaflet-control-attribution{background:rgba(22,24,26,.72)!important;color:var(--fg-dim)!important;font-size:10px!important}
.leaflet-control-attribution a{color:var(--ochre)!important}
.leaflet-bar a{background:#1E2226!important;color:var(--fg)!important;border-color:var(--card-line)!important}