@import url('/fonts/fonts.css');
@import url('/themes.css');

/* ==========================================================================
   Gezenda — wandweergave
   ==========================================================================

   Ontworpen voor 1920×1080 liggend, 1080×1920 staand, en dezelfde pagina in
   een hand. Kijkafstand aan de muur: ongeveer twee meter. Geen hover, geen
   scrollbalken, raakvlakken van minstens 56 pixels.

   ---------------------------------------------------------------------
   De maatvoering
   ---------------------------------------------------------------------
   Geen enkel getal hieronder is geraden. Alles komt uit vier reeksen, en
   waar in het bestand een los getal staat is dat een fout die nog niet is
   opgeruimd.

     ruimte      4 · 8 · 12 · 16 · 24 · 32 · 48
     tekst       12 · 14 · 17 · 22 · 30 · 44 · 58
     hoeken      per thema (--radius, --radius-sm) — een Japandi-kaart hoort
                 rechtere hoeken te hebben dan een Scandi-kaart
     schaduw     twee niveaus, ook per thema

   Waarom dit uitmaakt: als elk element zijn eigen padding kiest, ontstaan
   er onderlinge afstanden van 13, 15 en 18 pixels die je niet los kunt
   aanwijzen maar samen wel rommelig zijn. Eén reeks maakt dat je van vier
   meter afstand ziet dat dingen bij elkaar horen.

   Kleuren en letters staan niet hier maar in themes.css: elk interieurthema
   heeft een dag- en een avondvariant. Dit bestand kiest nooit zelf een
   kleur, het verwijst alleen.
   ========================================================================== */

:root{
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --t1:12px; --t2:14px; --t3:17px; --t4:22px; --t5:30px; --t6:44px; --t7:58px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{
  margin:0;padding:0;height:100%;overflow:hidden;
  background:var(--bg);color:var(--text);
  font-family:var(--font-body,'Nunito'),ui-rounded,system-ui,-apple-system,sans-serif;
  font-variant-numeric:tabular-nums;
  user-select:none;
  transition:background .6s,color .6s;
}

/* Papierstructuur: nauwelijks zichtbaar, haalt de digitale vlakheid eraf. */
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:1;opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Vier rijen: kop, lijf, week, voet. De week is een strook onderaan en geen
   kolommenraster — daarover gaat de hele herindeling. Wat vandaag speelt
   krijgt het grote vlak; de rest van de week is een blik waard, geen kwart
   scherm. */
/* `grid-template-columns:minmax(0,1fr)` en niet gewoon één kolom: een
   rasterkolom is standaard `auto`, en die weigert smaller te worden dan de
   min-content van zijn kinderen. Op een telefoon groeide het hele scherm
   daardoor tot 418 pixels breed terwijl er 390 was — met alles aan de
   rechterkant net buiten beeld. */
/* De oude rasterversie van .app stond hier nog. Die zette gap en padding
   van twaalf pixels om het hele paneel — en omdat de nieuwe .app hieronder
   alleen display en richting overschrijft, bleven die twaalf pixels staan.
   Elke marge in het herontwerp rekent vanaf --rand (52), dus alles stond
   stelselmatig een centimeter naar binnen. */
.app{position:relative;z-index:2}

/* Iconen. Twee rasters: Phosphor tekent op 256, Meteocons op 512. De
   viewBox staat dus bij het gebruik, niet hier. */
.ic{width:1em;height:1em;fill:currentColor;flex:none;display:inline-block;vertical-align:-.13em}
/* De bewegende iconen tekenen met een lijn in plaats van een vlak. Ze
   staan inline in de pagina en niet in de sprite — zie beweging.js. */
.bw{width:1em;height:1em;flex:none;display:block}
.weer-ic{flex:none;display:block}

/* ==========================================================================
   Het wandpaneel — herontwerp 2026
   ==========================================================================
   Ontworpen voor 1080 × 1920 staand, bekeken vanaf één tot twee meter.

   Alle maten hieronder zijn de ontwerpmaten van dat paneel, vermenigvuldigd
   met --sc. Op het paneel is --sc gelijk aan 1 en klopt elk getal met het
   ontwerp; op een smaller scherm krimpt alles evenredig mee in plaats van
   te breken. Eén schaalfactor is genoeg omdat de indeling verder in
   verhoudingen werkt.
   ========================================================================== */

.app{
  /* Eén ontwerp-pixel. Op het paneel van 1080 breed is dit precies 1px en
     klopt elk getal hieronder met het ontwerp; op een smaller scherm krimpt
     alles evenredig mee in plaats van te breken. */
  --sc:calc(min(100vw, 1080px) / 1080);
  --rand:calc(52 * var(--sc));
  height:100vh;display:flex;flex-direction:column;overflow:hidden;
  background:var(--bg);color:var(--text);
  font-family:var(--font-body,'Instrument Sans'),system-ui,sans-serif;
}
.thuisstage{flex:1;min-height:0;display:flex;flex-direction:column}
.thuisstage[hidden]{display:none}

/* ---------------------------------------------------------------- kop --- */
.kop{display:flex;align-items:center;gap:calc(20 * var(--sc));
  padding:calc(24 * var(--sc)) var(--rand) 0;flex:none}
.klok{font-family:var(--font-display,'Space Grotesk'),sans-serif;
  font-size:calc(96 * var(--sc));font-weight:700;letter-spacing:calc(-4 * var(--sc));
  line-height:.95;flex:none;font-variant-numeric:tabular-nums}
.datum{min-width:0;flex:none}
.dagnaam{font-family:var(--font-display,'Space Grotesk'),sans-serif;
  font-size:calc(29 * var(--sc));font-weight:700;line-height:1.05}
.datumregel{font-size:calc(18 * var(--sc));color:var(--muted);font-weight:600;
  margin-top:calc(5 * var(--sc))}

/* De ring loopt vol naar het volgende gebed toe: leeg vlak na het vorige,
   vol als het zover is. */
.gebedkop{margin-left:auto;display:flex;align-items:center;gap:calc(13 * var(--sc));
  flex:0 1 auto;min-width:0;overflow:hidden}
.gtekst{min-width:0}
.gsub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(260 * var(--sc))}
.gring{width:calc(54 * var(--sc));height:calc(54 * var(--sc));border-radius:50%;
  background:conic-gradient(var(--accent) var(--pct,0%), var(--chip) 0);
  display:grid;place-items:center;flex:none}
.gring i{width:calc(40 * var(--sc));height:calc(40 * var(--sc));border-radius:50%;
  background:var(--bg);display:block}
.gregel{display:flex;align-items:baseline;gap:calc(8 * var(--sc))}
.gregel b{font-family:var(--font-display,'Space Grotesk'),sans-serif;
  font-size:calc(24 * var(--sc));font-weight:700}
.gregel i{font-family:var(--font-display,'Space Grotesk'),sans-serif;font-style:normal;
  font-size:calc(24 * var(--sc));font-weight:700;color:var(--accent)}
.gsub{display:block;font-size:calc(15 * var(--sc));font-weight:600;color:var(--muted);
  margin-top:calc(3 * var(--sc))}
.gsub.waarschuwing{color:var(--warn)}

/* Vaste breedte, geen krimpend blok meer. Toen hier alleen tekst stond mocht
   dit meegeven met de kop; nu er een grafiek met kloktijden in zit niet meer:
   bij 130 pixels schoven "15:30" en "16:00" over elkaar heen. 300 is genoeg
   voor vier tijden naast elkaar en laat de gebedsregel links nog ruimte. */
.weer{flex:0 0 calc(300 * var(--sc));text-align:right;border-left:2px solid var(--line);
  padding-left:calc(20 * var(--sc));min-width:0}
.wtop{display:flex;align-items:center;justify-content:flex-end;gap:calc(10 * var(--sc));min-width:0}
/* Was 34. De Meteocons bewegen uit zichzelf — de zon draait, de druppels
   vallen, de bliksem flitst — maar op 34 pixels zie je daar niets van en
   moest een regel tekst het werk doen. Op 62 is het plaatje het bericht. */
.weer-ic{width:calc(62 * var(--sc));height:calc(62 * var(--sc));flex:none;align-self:center}
.wtemp{font-family:var(--font-display,'Space Grotesk'),sans-serif;
  font-size:calc(34 * var(--sc));font-weight:700;line-height:1;flex:none}
/* Windkracht: icoon plus getal, alleen vanaf 4 Bft (zie WIND_VANAF). Het
   getal moet erbij — een waaiend icoontje vertelt dát het waait, niet hoe
   hard, en dat verschil is nou net waar je je jas op kiest. */
.wwind{display:flex;align-items:center;gap:calc(2 * var(--sc));flex:none}
.wwind[hidden]{display:none}
.wind-ic{width:calc(38 * var(--sc));height:calc(38 * var(--sc));flex:none}
.wwind b{font-size:calc(17 * var(--sc));font-weight:700;color:var(--muted)}
/* Was een rijtje staafjes; Soufian wilde een golvende lijn. Dezelfde
   logaritmische schaal, dezelfde data (w.regen), alleen nu één vloeiende
   curve met een lichtgevuld vlak eronder — zie gladdePad() in app.js.
   overflow:visible omdat de curve, net als de staafjes vroeger, best over
   de nominale hoogte heen mag pieken bij een fikse bui. Staat er sinds
   7 september altijd, ook bij droog weer: dan een vlakke lijn op de bodem,
   want het zinnetje dat "droog" zei is weg. */
.rainbar{margin-top:calc(8 * var(--sc))}
.rainbar[hidden]{display:none}
.rainbar svg{display:block;width:100%;height:calc(22 * var(--sc));overflow:visible}
/* Kloktijden onder de grafiek, zoals Buienradar ze zet. Absoluut geplaatst
   op het percentage van hun meetpunt; de eerste en laatste worden naar
   binnen gedraaid zodat ze niet buiten het blok steken. */
.regenschaal{position:relative;height:calc(17 * var(--sc));margin-top:calc(3 * var(--sc))}
.regenschaal .rt{position:absolute;top:0;transform:translateX(-50%);
  font-size:calc(13 * var(--sc));font-weight:600;color:var(--dim);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.regenschaal .rt.begin{transform:none}
.regenschaal .rt.eind{transform:translateX(-100%)}
/* Het hele blok is aantikbaar en opent het weervenster; zie de handler
   onderaan app.js. */
.weer{cursor:pointer}
.weer:active{opacity:.75}

/* Een donkere schijf achter elk weericoon. De Meteocons zijn ontworpen
   voor een donkere app: witte wolken, lichtblauwe druppels. Op de lichte
   paneelkleur verdween een wolk gewoon in de achtergrond — dat, en niet de
   tekenstijl, was waarom Soufian ze onduidelijk vond (7 september; zie
   CLAUDE.md 13q). Op leisteen komen ze los. Vaste kleur, geen thema-
   variabele: in het avondthema mag deze schijf gerust iets lichter dan de
   achtergrond zijn, het gaat erom dat wit erop leest. De padding is de
   ademruimte tussen icoon en rand; de iconen hebben zelf ook al wat lucht. */
.weer-ic,.wind-ic,.wp-ic-groot,.wp-ic{background:#2b3350;border-radius:50%;box-sizing:border-box}
/* Vaste padding per maat, géén procenten: die rekenen vanaf de breedte van
   de omliggende rij, en in het brede weervenster werd dat groter dan het
   icoon zelf — leeg rondje. */
.weer-ic{padding:calc(6 * var(--sc))}
.wind-ic{padding:calc(4 * var(--sc))}
.wp-ic-groot{padding:calc(9 * var(--sc))}
.wp-ic{padding:calc(4 * var(--sc))}

/* ---- Het weervenster (toonWeerPaneel) ---------------------------------
   Wat niet in de kop past: hoe het voelt, de wind, en vijf dagen vooruit.
   Dezelfde bouwstenen als de andere vensters, alleen de inhoud verschilt. */
.wp{padding:0 calc(4 * var(--sc))}
.wp-nu{display:flex;align-items:center;gap:calc(18 * var(--sc))}
.wp-ic-groot{width:calc(96 * var(--sc));height:calc(96 * var(--sc));flex:none}
.wp-nu-tekst{min-width:0}
.wp-nu-tekst b{display:block;font-family:var(--font-display,'Space Grotesk'),sans-serif;
  font-size:calc(52 * var(--sc));font-weight:700;line-height:1}
.wp-nu-tekst span{display:block;font-size:calc(18 * var(--sc));font-weight:600;
  color:var(--muted);margin-top:calc(4 * var(--sc))}
/* Vier kerngetallen naast elkaar; bij een smal venster vallen ze om. */
.wp-cijfers{display:flex;flex-wrap:wrap;gap:calc(10 * var(--sc));
  margin-top:calc(18 * var(--sc))}
.wc{flex:1 1 calc(120 * var(--sc));background:var(--panel-2,rgba(128,120,140,.10));
  border-radius:calc(16 * var(--sc));padding:calc(12 * var(--sc)) calc(14 * var(--sc))}
.wc b{display:block;font-family:var(--font-display,'Space Grotesk'),sans-serif;
  font-size:calc(24 * var(--sc));font-weight:700;line-height:1.1}
.wc i{display:block;font-style:normal;font-size:calc(13 * var(--sc));font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-top:calc(4 * var(--sc))}
.wp-lijst{margin-top:calc(20 * var(--sc));border-top:1px solid var(--line);
  padding-top:calc(6 * var(--sc))}
.wp-dag{display:flex;align-items:center;gap:calc(14 * var(--sc));
  padding:calc(10 * var(--sc)) 0;border-bottom:1px solid var(--line)}
.wp-dag:last-child{border-bottom:0}
.wp-dagnaam{flex:1;min-width:0;font-size:calc(20 * var(--sc));font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:capitalize}
/* Was 44; op die maat zijn de druppels en vlokken nauwelijks te zien. */
.wp-ic{width:calc(56 * var(--sc));height:calc(56 * var(--sc));flex:none}
.wp-regen{flex:none;width:calc(60 * var(--sc));text-align:right;
  font-size:calc(17 * var(--sc));font-weight:700;color:var(--accent);
  font-variant-numeric:tabular-nums}
/* Hoog vet, laag dun: je leest de dagtemperatuur, de nacht is bijvangst. */
.wp-temp{flex:none;width:calc(96 * var(--sc));text-align:right;
  font-family:var(--font-display,'Space Grotesk'),sans-serif;font-variant-numeric:tabular-nums}
.wp-temp b{font-size:calc(22 * var(--sc));font-weight:700}
.wp-temp i{font-style:normal;font-size:calc(19 * var(--sc));font-weight:600;
  color:var(--dim);margin-left:calc(8 * var(--sc))}
.rainbar .regenvlak{fill:var(--accent);opacity:.16;stroke:none}
.rainbar .regenlijn{fill:none;stroke:var(--accent);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}

.dokknoppen{display:flex;align-items:center;gap:calc(10 * var(--sc));flex:none;
  padding-left:calc(20 * var(--sc))}
.btn{width:calc(48 * var(--sc));height:calc(48 * var(--sc));display:grid;place-items:center;
  background:rgba(128,120,140,.18);border:0;border-radius:calc(15 * var(--sc));
  color:var(--dock-dim);cursor:pointer}
.btn .ic{width:calc(24 * var(--sc));height:calc(24 * var(--sc));fill:currentColor}
.btn:active{transform:scale(.94)}
.status{display:flex;gap:calc(5 * var(--sc));align-items:center}

/* ------------------------------------------------------------ stroom --- */
.stage{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;
  gap:calc(10 * var(--sc));padding:calc(26 * var(--sc)) var(--rand) 0}
.stage[hidden]{display:none}
.stroomkop{display:flex;align-items:baseline;gap:calc(12 * var(--sc));flex:none}
.stroomtitel{font-family:var(--font-display,'Space Grotesk'),sans-serif;
  font-size:calc(19 * var(--sc));font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.stroomtel{font-size:calc(18 * var(--sc));font-weight:700;color:var(--dim)}
.stroom{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;
  gap:calc(10 * var(--sc))}

/* Hele dag: één balk in de kleur van de bron, over de volle breedte. */
.heledag{display:flex;align-items:center;gap:calc(14 * var(--sc));
  background:var(--kl,#8B5CF6);color:#fff;border-radius:calc(18 * var(--sc));
  padding:calc(12 * var(--sc)) calc(24 * var(--sc));flex:none}
.heledag b{font-size:calc(16 * var(--sc));font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;opacity:.75}
.heledag span{font-size:calc(22 * var(--sc));font-weight:700;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Geweest: dun, grijs, afgevinkt. Het staat er om te laten zien hoe ver de
   dag is, niet om gelezen te worden. */
.geweest{display:flex;flex-direction:column;gap:calc(4 * var(--sc));flex:none}
.gw{display:flex;align-items:center;gap:calc(18 * var(--sc));
  padding:calc(4 * var(--sc)) calc(20 * var(--sc));min-height:calc(40 * var(--sc));opacity:.6}
.gw .vink{width:calc(26 * var(--sc));height:calc(26 * var(--sc));border-radius:50%;
  background:var(--chip);display:grid;place-items:center;font-size:calc(14 * var(--sc));
  font-weight:800;color:var(--muted);flex:none}
.gw .t{width:calc(74 * var(--sc));flex:none;font-size:calc(19 * var(--sc));
  font-weight:700;color:var(--muted)}
.gw .titel{font-size:calc(21 * var(--sc));font-weight:600;color:var(--muted);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gw .wie{margin-left:auto;display:flex;gap:calc(5 * var(--sc));flex:none}
.gw .wie .f{width:calc(28 * var(--sc));height:calc(28 * var(--sc));font-size:calc(14 * var(--sc))}

.nulijn{display:flex;align-items:center;gap:calc(16 * var(--sc));margin:calc(2 * var(--sc)) 0;flex:none}
.nulijn b{background:var(--text);color:var(--bg);font-family:var(--font-display,'Space Grotesk'),sans-serif;
  font-weight:700;font-size:calc(17 * var(--sc));letter-spacing:.08em;text-transform:uppercase;
  padding:calc(8 * var(--sc)) calc(20 * var(--sc));border-radius:999px;flex:none}
/* Was 3px gestippeld. Op het 32"-paneel las die stippellijn als een rij
   flikkerende witte puntjes vlak boven het eerstvolgende item — precies waar
   je oog naartoe moet. Eén dunne lijn die naar rechts uitdooft doet hetzelfde
   werk zonder te trillen. */
.nulijn i{flex:1;height:1px;border:0;
  background:linear-gradient(90deg, var(--line), transparent)}

/* Het eerstvolgende, groot en in de kleur van wie het aangaat. */
.hero{background:linear-gradient(135deg, var(--kl), color-mix(in srgb, var(--kl) 55%, #070B14));
  color:#fff;border-radius:calc(28 * var(--sc));box-shadow:var(--shadow);
  padding:calc(28 * var(--sc)) calc(34 * var(--sc));display:flex;align-items:center;
  gap:calc(28 * var(--sc));flex:none;cursor:pointer}
.hero:active{transform:scale(.99)}
.hero .wie{display:flex;flex:none}
.hero .wie .f{width:calc(72 * var(--sc));height:calc(72 * var(--sc));border-radius:50%;
  display:grid;place-items:center;font-size:calc(36 * var(--sc));background:rgba(255,255,255,.92);
  margin-right:calc(-12 * var(--sc));box-shadow:0 0 0 3px rgba(7,11,20,.22);overflow:hidden}
.hero .wie .f img{width:100%;height:100%;object-fit:cover}
.hero .mid{min-width:0;flex:1;padding-left:calc(12 * var(--sc))}
.hero .titel{display:block;font-family:var(--font-display,'Space Grotesk'),sans-serif;
  font-size:calc(40 * var(--sc));font-weight:700;letter-spacing:calc(-.5 * var(--sc));
  line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hero .onder{display:flex;align-items:center;gap:calc(12 * var(--sc));margin-top:calc(10 * var(--sc))}
.hero .bezig{background:rgba(255,255,255,.25);font-size:calc(17 * var(--sc));font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;padding:calc(7 * var(--sc)) calc(16 * var(--sc));
  border-radius:999px;flex:none}
.hero .sub{font-size:calc(20 * var(--sc));font-weight:600;opacity:.85;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hero .tijd{flex:none;text-align:right}
.hero .tijd b{display:block;font-family:var(--font-display,'Space Grotesk'),sans-serif;
  font-size:calc(46 * var(--sc));font-weight:800;line-height:1}
.hero .tijd span{display:block;font-size:calc(19 * var(--sc));font-weight:700;opacity:.75;
  margin-top:calc(4 * var(--sc))}

/* Daarna: kaarten met een tijdblok in de kleur van het gezinslid. */
.komt{display:flex;align-items:center;gap:calc(24 * var(--sc));background:var(--panel);
  border:1px solid var(--cardline);border-radius:calc(24 * var(--sc));box-shadow:var(--shadow);
  padding:calc(14 * var(--sc)) calc(22 * var(--sc)) calc(14 * var(--sc)) calc(14 * var(--sc));
  min-height:calc(88 * var(--sc));flex:none;cursor:pointer}
.komt:active{transform:scale(.99)}
.komt .blok{width:calc(92 * var(--sc));height:calc(76 * var(--sc));
  border-radius:calc(18 * var(--sc));background:var(--kl);color:#fff;display:grid;
  place-content:center;text-align:center;flex:none}
.komt .blok b{font-family:var(--font-display,'Space Grotesk'),sans-serif;
  font-size:calc(26 * var(--sc));font-weight:800;line-height:1}
.komt .blok span{font-size:calc(14 * var(--sc));font-weight:700;opacity:.8;margin-top:calc(3 * var(--sc))}
/* Twee of meer gezichtjes overlappen elkaar licht (zoals in de grote kaart):
   dat scheelt breedte voor de titel. Een ring in de kaartkleur houdt ze
   uit elkaar. `outline`, geen box-shadow — zie 13g. */
.komt .wie{display:flex;flex:none}
.komt .wie .f + .f{margin-left:calc(-10 * var(--sc))}
.komt .wie .f{outline:calc(2 * var(--sc)) solid var(--panel);background:color-mix(in srgb, var(--kl) 18%, var(--panel))}
.komt .mid{min-width:0;flex:1}
.komt .titel{display:block;font-family:var(--font-display,'Space Grotesk'),sans-serif;
  font-size:calc(28 * var(--sc));font-weight:700;line-height:1.15;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.komt .sub{display:block;font-size:calc(18 * var(--sc));color:var(--muted);font-weight:600;
  margin-top:calc(3 * var(--sc));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Gezichtjes: emoji of foto, in de zachte variant van de eigen kleur. */
.f{width:calc(44 * var(--sc));height:calc(44 * var(--sc));border-radius:50%;display:grid;
  place-items:center;font-size:calc(21 * var(--sc));background:color-mix(in srgb, var(--kl) 18%, transparent);
  overflow:hidden;flex:none}
.f img{width:100%;height:100%;object-fit:cover;display:block}

.stroomdag{font-family:var(--font-display,'Space Grotesk'),sans-serif;
  font-size:calc(16 * var(--sc));font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);margin-top:calc(8 * var(--sc));flex:none}
.later{display:flex;align-items:center;gap:calc(20 * var(--sc));background:var(--chip);
  border-radius:calc(20 * var(--sc));padding:calc(10 * var(--sc)) calc(22 * var(--sc));
  min-height:calc(54 * var(--sc));flex:none;cursor:pointer}
.later .t{width:calc(76 * var(--sc));flex:none;font-family:var(--font-display,'Space Grotesk'),sans-serif;
  font-size:calc(23 * var(--sc));font-weight:700;color:var(--kl,var(--accent))}
.later .wie{display:flex;flex:none}
.later .wie .f{width:calc(38 * var(--sc));height:calc(38 * var(--sc));font-size:calc(18 * var(--sc));
  outline:calc(2 * var(--sc)) solid var(--bg);background:color-mix(in srgb, var(--kl) 18%, var(--bg))}
.later .wie .f + .f{margin-left:calc(-9 * var(--sc))}
/* De titel wint van de locatie. Eerst had de locatie flex:none — een adres
   van vijftig tekens ("V.V. De Meern Loenenseboslaan 2, 3454 NT…") weigerde
   dan te krimpen en drukte de titel, die wél mocht krimpen, tot nul pixels:
   er stond een rij met alleen een adres erin. Nu is het andersom: de titel
   houdt zijn ruimte, het adres kapt af. */
.later .titel{min-width:0;flex:1 1 auto;font-size:calc(24 * var(--sc));font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.later .sub{margin-left:auto;font-size:calc(18 * var(--sc));font-weight:600;color:var(--muted);
  flex:0 1 auto;min-width:0;max-width:38%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Een lege dag is geen fout maar een mededeling. */
/* Op een stille dag is dit blok het enige dat mag rekken. Zonder dat valt
   de hele stroom naar boven en blijft er onderaan een handbreed zwart over —
   het gapende gat waar het bij de vorige versie ook al om ging. Nu duwt het
   bericht wat er nog komt naar de onderkant van het vak, en staat het
   eerstvolgende pal boven de avondkaart. */
.rustig{padding:calc(34 * var(--sc)) calc(4 * var(--sc)) calc(12 * var(--sc));flex:1 1 auto}
.rustig b{display:block;font-family:var(--font-display,'Space Grotesk'),sans-serif;
  font-size:calc(48 * var(--sc));font-weight:700;letter-spacing:calc(-1 * var(--sc));
  line-height:1.15;max-width:calc(840 * var(--sc))}
.rustig span{display:block;font-size:calc(23 * var(--sc));color:var(--muted);font-weight:600;
  margin-top:calc(16 * var(--sc))}

/* ------------------------------------------------------- eten en lijstjes --- */
/* Vanavond en het huisdier delen deze rij zodra ze er allebei zijn — vandaar
   dat .maalkaart hier kleiner is dan zijn oude, volle-breedte zelf (grotere
   foto, grotere titel). Is er geen huisdierkaart (leeg of uitgezet, dus
   [hidden]), dan pakt :has() de rij terug tot één kolom en mag Vanavond weer
   de volle breedte. */
.rij-onder{display:flex;align-items:stretch;gap:calc(18 * var(--sc));
  margin:calc(20 * var(--sc)) var(--rand) 0}
.rij-onder:has(.katkaart[hidden]){display:block}
.maalkaart{margin:0;background:var(--panel);flex:1 1 0;min-width:0;
  border:1px solid var(--cardline);border-radius:calc(24 * var(--sc));box-shadow:var(--shadow);
  padding:calc(12 * var(--sc));display:flex;align-items:center;gap:calc(16 * var(--sc));
  cursor:pointer}
.maalkaart:active{transform:scale(.995)}
.maalkaart img{width:calc(104 * var(--sc));height:calc(104 * var(--sc));
  border-radius:calc(16 * var(--sc));object-fit:cover;flex:none;background:var(--panel-2)}
.maalkaart .mid{min-width:0}
.maalkaart .kopje{font-family:var(--font-display,'Space Grotesk'),sans-serif;
  font-size:calc(14 * var(--sc));font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.maalkaart .titel{font-family:var(--font-display,'Space Grotesk'),sans-serif;
  font-size:calc(24 * var(--sc));font-weight:700;letter-spacing:calc(-.5 * var(--sc));
  line-height:1.15;margin-top:calc(6 * var(--sc));
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.maalkaart .meta{font-size:calc(16 * var(--sc));color:var(--muted);font-weight:600;margin-top:calc(6 * var(--sc))}

.bento{margin:calc(18 * var(--sc)) var(--rand) 0;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:calc(18 * var(--sc));flex:none}
.kaart{background:var(--panel);border:1px solid var(--cardline);border-radius:calc(28 * var(--sc));
  box-shadow:var(--shadow);padding:calc(20 * var(--sc)) calc(26 * var(--sc));min-width:0}
/* De lijstkaarten krijgen een vaste hoogte. Zonder die hoogte groeit de
   kaart met de lijst mee, meet fitToBox een doos die per definitie past en
   pelt hij niets af — dan staan er twintig boodschappen op de muur en
   schuift de dagstroom eruit. Dit is precies de kaart uit het ontwerp:
   kop, drie regels, "+ n meer". */
.bento .kaart{height:calc(254 * var(--sc));display:flex;flex-direction:column}
.bento .listitems{flex:1;min-height:0}
.kaart h3{margin:0;display:flex;align-items:center;gap:calc(12 * var(--sc));
  font-family:var(--font-display,'Space Grotesk'),sans-serif;font-size:calc(17 * var(--sc));
  font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.telbol{margin-left:auto;background:var(--kaart,var(--accent));color:var(--kaart-ink,var(--bg));
  font-size:calc(16 * var(--sc));font-weight:800;padding:calc(4 * var(--sc)) calc(14 * var(--sc));
  border-radius:999px;min-width:calc(34 * var(--sc));text-align:center}
.lijstkaart[data-kaart="boodschappen"]{--kaart:var(--k1);--kaart-ink:var(--k1-ink)}
.lijstkaart[data-kaart="todo"]{--kaart:var(--k2);--kaart-ink:var(--k2-ink)}
.kluskaart{--kaart:var(--k3);--kaart-ink:var(--k3-ink);margin:calc(18 * var(--sc)) var(--rand) 0;flex:none}

/* -------------------------------------- stroom links, lijstjes rechts ---
   Boodschappen en to-do stonden als brede band ónder de stroom. Die band
   pakte verticale ruimte, en precies díe ruimte haalde snoeiStroom()
   daarna weg bij de agenda — vandaar dat er zo weinig afspraken in beeld
   pasten. Naast elkaar geeft dat de hoogte terug: de stroom krijgt de
   volle kolom, de twee lijstjes staan er rechts naast, onder elkaar.
   60/40, op verzoek van Soufian (7 september).

   De rij zit met opzet ín .stage, ónder .stroomkop: zo begint de zijbalk
   op de hoogte van de eerste afspraak en niet naast de profielfoto's, en
   houden "Vandaag" en de gezichtjes hun volle breedte (in een eerdere
   versie stond de hele .thuisstage in twee kolommen en brak die kop over
   twee regels). Alles onder de stroom — Vanavond, de kat, klusjes, de
   week — loopt onveranderd over de volle breedte door.

   Alleen vanaf 701px; op de telefoon (max-width:700px, verderop) valt
   .stroomrij terug op onder elkaar, want naast elkaar is daar
   onleesbaar. */
.stroomrij{flex:1;min-height:0;display:grid;
  grid-template-columns:minmax(0,60fr) minmax(0,40fr);
  column-gap:calc(28 * var(--sc));align-items:stretch}
/* De kaarten onder elkaar: 40% is te smal voor twee naast elkaar. Geen
   eigen marges meer — de rand van .stage en de kolomafstand hierboven doen
   dat werk al. align-self:start houdt ze bovenaan, zodat ze niet meerekken
   met de veel hogere stroom ernaast. */
.stroomrij .bento{margin:var(--zijbalk-top,0) 0 0;align-self:start;
  grid-template-columns:minmax(0,1fr);row-gap:calc(18 * var(--sc))}
/* --zijbalk-top wordt na elk renderen gezet door lijnZijbalkUit() in
   app.js: de hoogte van wat er vóór het eerste kaartje staat (meestal de
   nu-lijn). Zonder die duw begint de zijbalk op de hoogte van dat streepje
   in plaats van op die van het eerste blok, en dat ziet er scheef uit. */

/* Vanavond én de kat staan sinds 7 september in de zijbalk, dus .rij-onder
   is leeg en valt weg. De regel blijft staan voor het geval er ooit weer
   iets in die rij komt: een lege div houdt anders zijn bovenmarge, en dat
   is precies een gat van niets. */
.rij-onder:not(:has(> :not([hidden]))){display:none}

/* Veertig ontwerp-pixels titel is gemaakt voor de volle breedte. In de
   kolom van 60% breekt "Straatvoetbal Nas" daarmee af tot "Straatvoet…",
   dus hier een maatje kleiner. */
.stroomrij .hero .titel{font-size:calc(34 * var(--sc))}
/* De kattenkaart is óók een .kaart en pakt daarmee de vaste hoogte van de
   lijstkaarten. Die hoort daar niet bij: zijn inhoud wisselt (bak, grind,
   allebei) en moet niet afgeknipt worden. */
.stroomrij .bento > .katkaart{height:auto}

.listitems{display:flex;flex-direction:column;margin-top:calc(8 * var(--sc));overflow:hidden}
.li{display:flex;align-items:center;gap:calc(16 * var(--sc));min-height:calc(46 * var(--sc));
  flex:none;cursor:pointer}
.li:active{opacity:.7}
.li .box{width:calc(28 * var(--sc));height:calc(28 * var(--sc));border-radius:calc(10 * var(--sc));
  border:2.5px solid var(--line);flex:none;display:grid;place-items:center;
  font-size:calc(16 * var(--sc));font-weight:800;color:var(--ok)}
.li .tx{font-size:calc(21 * var(--sc));font-weight:600;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.li .by{margin-left:auto;font-size:calc(15 * var(--sc));font-weight:600;color:var(--dim);flex:none}
.li.done{opacity:.45}
.li.done .tx{text-decoration:line-through}
.li-more{font-size:calc(17 * var(--sc));font-weight:700;color:var(--dim);
  padding:calc(8 * var(--sc)) 0 0 calc(44 * var(--sc))}

/* Klusjes: een ring per kind, geen lijst met regels. */
.ringen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:calc(32 * var(--sc));
  margin-top:calc(14 * var(--sc))}
.kid{display:flex;align-items:center;gap:calc(20 * var(--sc));min-width:0}
.kid .ring{width:calc(78 * var(--sc));height:calc(78 * var(--sc));border-radius:50%;
  background:conic-gradient(var(--kl) var(--pct,0%), var(--chip) 0);display:grid;place-items:center;flex:none}
.kid .ring i{width:calc(60 * var(--sc));height:calc(60 * var(--sc));border-radius:50%;
  background:var(--panel);display:grid;place-items:center;font-size:calc(29 * var(--sc));
  overflow:hidden;font-style:normal}
.kid .ring i img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.kid .mid{min-width:0;flex:1}
.kid .bovenregel{display:flex;align-items:baseline;gap:calc(10 * var(--sc))}
.kid .naam{font-family:var(--font-display,'Space Grotesk'),sans-serif;font-size:calc(23 * var(--sc));font-weight:700}
.kid .ptn{font-family:var(--font-display,'Space Grotesk'),sans-serif;font-size:calc(26 * var(--sc));
  font-weight:800;color:var(--kl);margin-left:auto}
.kid .ptn em{font-style:normal;font-size:calc(15 * var(--sc));font-weight:700;color:var(--dim)}
.kid .doel{display:block;font-size:calc(18 * var(--sc));font-weight:600;color:var(--muted);
  margin-top:calc(4 * var(--sc));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kid .doel b{color:var(--text)}
.kid .vandaag{display:block;font-size:calc(16 * var(--sc));font-weight:600;color:var(--dim);
  margin-top:calc(3 * var(--sc));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kid .vandaag b{color:var(--kl);font-weight:800}

/* ------------------------------------------------------------ de week --- */
.weektegels{margin:calc(18 * var(--sc)) var(--rand) 0;display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));gap:calc(14 * var(--sc));flex:none}
.wd{background:var(--chip);border-radius:calc(20 * var(--sc));
  padding:calc(14 * var(--sc)) calc(16 * var(--sc));min-width:0}
.wd-kop{display:flex;align-items:baseline;gap:calc(7 * var(--sc))}
.wd-naam{font-size:calc(14 * var(--sc));font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.wd-nr{font-family:var(--font-display,'Space Grotesk'),sans-serif;font-size:calc(24 * var(--sc));font-weight:800}
.wd-weekend .wd-nr{color:var(--accent)}
.wd-evs{display:flex;flex-direction:column;gap:2px;margin-top:calc(6 * var(--sc));
  min-height:calc(38 * var(--sc))}
.wd-ev{font-size:calc(15 * var(--sc));font-weight:600;color:var(--kl,var(--muted));
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wd-maal{font-size:calc(14 * var(--sc));font-weight:600;color:var(--dim);
  margin-top:calc(4 * var(--sc));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.wd-leeg{font-size:calc(15 * var(--sc));color:var(--dim);font-weight:600}

/* -------------------------------------------------------------- dok --- */
.dok{margin:calc(20 * var(--sc)) calc(32 * var(--sc)) calc(28 * var(--sc));
  background:var(--dock);color:var(--dock-tekst);border:1px solid var(--cardline);
  border-radius:calc(30 * var(--sc));padding:calc(16 * var(--sc)) calc(26 * var(--sc));
  display:flex;align-items:center;gap:calc(12 * var(--sc));flex:none}
.schermen{display:flex;gap:4px;background:rgba(128,120,140,.18);padding:5px;border-radius:999px;
  margin-right:calc(20 * var(--sc));flex:none}
.schermen[hidden]{display:none}
/* Iconen in plaats van de woorden "Thuis" en "Licht": een huis en een lamp
   lees je van vier meter sneller dan twee woorden van gelijke lengte, en het
   scheelt breedte voor de gebedstrip ernaast. */
.schermen button{border-radius:999px;border:0;background:none;color:var(--dock-dim);
  cursor:pointer;display:grid;place-items:center;
  width:calc(58 * var(--sc));height:calc(46 * var(--sc));padding:0}
.schermen button .ic{width:calc(26 * var(--sc));height:calc(26 * var(--sc));fill:currentColor}
.schermen button.aan{background:var(--dock-tekst);color:var(--dock)}
.gebedstrip{flex:1;display:flex;justify-content:space-between;align-items:center;min-width:0}
/* flex:none en nowrap: anders knijpt de strook de kaart van het eerstvolgende
   gebed samen tot "over 3u\A41m" op twee regels, en wordt die kaart hoger dan
   de vijf ernaast. */
.geb{text-align:center;padding:calc(8 * var(--sc)) calc(15 * var(--sc));
  border-radius:calc(16 * var(--sc));flex:none;white-space:nowrap}
.geb b{display:block;font-size:calc(13 * var(--sc));font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dock-dim)}
.geb i{display:block;font-style:normal;font-family:var(--font-display,'Space Grotesk'),sans-serif;
  font-size:calc(22 * var(--sc));font-weight:700;color:var(--dock-tekst);margin-top:2px}
.geb span{display:block;font-size:calc(13 * var(--sc));font-weight:700;color:var(--dock-dim)}
.geb.nu{background:rgba(128,120,140,.22)}
/* In het ontwerp is de tijd zelf altijd gewoon leesbaar wit; alleen het
   "over 1u 14m" eronder krijgt de accentkleur. Een cyaan tijd tussen vijf
   witte tijden leest als een andere soort tijd. */
.geb.nu b{color:var(--dock-tekst)}
.geb.nu span{color:var(--accent)}

.updated{display:none}

/* ==========================================================================
   Verlichting — de plattegrond
   ==========================================================================
   Kamers op hun eigen plek in plaats van in een raster. Twee redenen.

   De eerste: dit scherm staat het grootste deel van de dag op "alles uit".
   Een tegel die de kleur van de lamp toont is dan een leeg vlak, en tien
   daarvan naast elkaar zijn tien lege vlakken. Een plattegrond leest ook
   als er niets brandt, want de vórmen veranderen niet.

   De tweede: je hoeft de naam niet te lezen om te weten waar je kijkt.

   De bediening blijft zoals hij was — de kamer ís de knop, tikken schakelt,
   verticaal slepen dimt. In de bewerkstand betekent slepen iets anders:
   dan verzet je de kamer zelf.
   ========================================================================== */
.lichtstage{display:flex;flex-direction:column;gap:calc(14 * var(--sc));min-height:0;
  overflow:hidden;padding:calc(26 * var(--sc)) var(--rand) 0;flex:1}
.lichtstage[hidden]{display:none}

/* De kop van de lichtpagina spiegelt die van de stroom: een kort etiket in
   kapitalen met daarachter, dun, wat er nu aan de hand is. */
.lichttop{display:flex;align-items:center;gap:calc(14 * var(--sc));flex:none;
  margin-bottom:calc(10 * var(--sc))}
.lichttop h2{margin:0;font-family:var(--font-display,'Space Grotesk'),sans-serif;
  font-size:calc(19 * var(--sc));font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.lichttop .tel{font-size:calc(18 * var(--sc));color:var(--dim);font-weight:700}
.allesuit{display:flex;align-items:center;gap:calc(10 * var(--sc));
  border:1px solid var(--cardline);background:var(--panel);color:var(--text);
  font-family:var(--font-body,'Instrument Sans'),sans-serif;font-size:calc(21 * var(--sc));
  font-weight:700;padding:calc(18 * var(--sc)) calc(30 * var(--sc));
  border-radius:calc(26 * var(--sc));cursor:pointer;box-shadow:var(--shadow)}
.allesuit .ic{width:calc(22 * var(--sc));height:calc(22 * var(--sc));color:var(--muted)}
.allesuit:active{transform:scale(.97)}
.allesuit[hidden]{display:none}
#indeling{margin-left:auto}
#indeling.aan{background:var(--accent);color:var(--bg);border-color:transparent}
#indeling.aan .ic{color:var(--bg)}
.lichthulp{margin:0;padding:0 calc(8 * var(--sc));font-size:calc(16 * var(--sc));
  color:var(--muted);font-weight:600;line-height:1.45;flex:none}
.lichthulp[hidden]{display:none}

/* --------------------------------------------------------------------------
   De kamertegels
   --------------------------------------------------------------------------
   Een kamer die aan is, gloeit. Niet als versiering: het is de enige manier
   waarop je van vier meter afstand in één oogopslag ziet wélke kamers
   branden — sneller dan zes percentages lezen. De gloed volgt de dimstand,
   dus een kamer op 15% is zichtbaar zwakker dan een kamer op 100%.

   Rechts in elke tegel staat een staafje: dat is de dimstand, en het is
   tegelijk het bedieningsvlak. Verticaal slepen over de tegel dimt.
   -------------------------------------------------------------------------- */
.tegel{container-type:inline-size;position:relative;border-radius:calc(22 * var(--sc));overflow:hidden;
  padding:calc(20 * var(--sc)) calc(24 * var(--sc));display:flex;flex-direction:column;
  justify-content:flex-end;gap:calc(10 * var(--sc));cursor:pointer;touch-action:none;
  background:var(--panel);border:1px solid var(--cardline);min-width:0;min-height:0;
  transition:background .35s,border-color .35s}
.tegel:active{transform:scale(.995)}

/* --dim loopt van 0 tot 100 en stuurt zowel de gloed als het staafje aan.
   De gloed zit in een eigen laag zodat de tekst er altijd bovenop staat en
   leesbaar blijft, ook bij honderd procent. */
.tegel::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(155deg,
    color-mix(in srgb, var(--kl, #F0B23A) calc(1% * var(--dim, 0) * .42), transparent),
    color-mix(in srgb, var(--kl, #F0B23A) calc(1% * var(--dim, 0) * .07), transparent) 72%);
  transition:background .35s}
.tegel:not(.uit){border-color:color-mix(in srgb, var(--kl, #F0B23A) 42%, transparent)}
.tegel > *{position:relative;z-index:1}

.tkop{display:flex;align-items:center;gap:calc(10 * var(--sc));
  position:absolute;left:calc(24 * var(--sc));right:calc(24 * var(--sc));
  top:calc(18 * var(--sc));z-index:1}
.tlampen{font-size:calc(16 * var(--sc));font-weight:700;color:var(--dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tegel:not(.uit) .tlampen{color:color-mix(in srgb, var(--kl, #F0B23A) 70%, var(--text))}
.tegelstaat{margin-left:auto;font-family:var(--font-display,'Space Grotesk'),sans-serif;
  font-size:calc(26 * var(--sc));font-weight:700;color:var(--muted);flex:none}
.tegel:not(.uit) .tegelstaat{color:color-mix(in srgb, var(--kl, #F0B23A) 62%, #fff)}

/* De lampjes: één stipje per lamp, in de kleur van die lamp. Ze staan naast
   het aantal en niet in plaats daarvan — zo blijft één lamp los aantikbaar
   zonder dat de tegel een knoppenrij wordt. */
.lampjes{display:flex;gap:calc(5 * var(--sc));flex:none}
.lampje{width:calc(13 * var(--sc));height:calc(13 * var(--sc));border-radius:50%;
  border:none;padding:0;cursor:pointer;background:var(--line)}
.lampje.aan{background:var(--lkleur,#F0B23A);
  box-shadow:0 0 calc(10 * var(--sc)) color-mix(in srgb, var(--lkleur,#F0B23A) 60%, transparent)}
.lampje.weg{background:none;border:1.5px dashed var(--line)}

/* Het icoon vóór de naam. Het ontwerp heeft het niet, maar het is de reden
   dat je van vier meter weet welke tegel de keuken is zonder te lezen. */
.tegelnaam{display:flex;align-items:center;gap:calc(10 * var(--sc));min-width:0}
.tegelnaam .ic{width:calc(22 * var(--sc));height:calc(22 * var(--sc));flex:none;
  color:var(--dim)}
.tegel:not(.uit) .tegelnaam .ic{color:color-mix(in srgb, var(--kl, #F0B23A) 70%, var(--text))}
@container (max-width: 130px){ .tegelnaam .ic{display:none} }
.tegelnaam h3{margin:0;min-width:0;font-family:var(--font-display,'Space Grotesk'),sans-serif;
  font-size:calc(26 * var(--sc));font-weight:700;line-height:1.1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tegel.uit .tegelnaam h3{color:var(--muted)}

/* Standen: alleen in een tegel die groot genoeg is om ze te dragen. */
.scenes{display:flex;flex-wrap:wrap;gap:calc(10 * var(--sc))}
.scenes:empty{display:none}
.scene{display:flex;align-items:center;gap:calc(8 * var(--sc));border:1px solid var(--cardline);
  background:rgba(10,14,24,.55);color:var(--text);border-radius:999px;cursor:pointer;
  padding:calc(9 * var(--sc)) calc(18 * var(--sc));font-family:var(--font-body,'Instrument Sans'),sans-serif;
  font-size:calc(17 * var(--sc));font-weight:700}
.scene:active{transform:scale(.96)}
.sbol{width:calc(12 * var(--sc));height:calc(12 * var(--sc));border-radius:50%;
  background:var(--sverloop,#F0B23A);flex:none}

/* In een smalle tegel botsen de stipjes, het aantal lampen en de dimstand
   op elkaar en wordt "3 lampen" afgekapt tot "3 la…". Dan wint de dimstand:
   die is het antwoord op de vraag waarvoor je kijkt. Hoeveel lampen het er
   zijn zie je nog steeds aan de stipjes. */
/* Let op: een container query meet de inhoudsmaat, niet de tegelbreedte.
   Een tegel van 232 breed met 24 padding meet hier 184 — de eerste drempels
   die ik koos (250 en 150) verstopten daardoor het aantal lampen én het
   icoon in tegels waar ze prima pasten.

   In een smalle tegel krimpt eerst de tekst, dan pas verdwijnt hij. */
@container (max-width: 200px){
  .tegel .tlampen{font-size:calc(14 * var(--sc))}
  .tegel .tegelstaat{font-size:calc(22 * var(--sc))}
  .tegel .lampjes{gap:calc(4 * var(--sc))}
  .tegel .lampje{width:calc(11 * var(--sc));height:calc(11 * var(--sc))}
}
@container (max-width: 150px){ .tegel .tlampen{display:none} }
@container (max-width: 95px){ .tegel .lampjes{display:none} }

/* Het staafje rechts: baan altijd zichtbaar, vulling naar de dimstand. */
.niveau{position:absolute;right:calc(16 * var(--sc));top:calc(58 * var(--sc));
  bottom:calc(20 * var(--sc));width:calc(8 * var(--sc));border-radius:999px;
  background:rgba(255,255,255,.07);overflow:hidden;z-index:1;pointer-events:none}
.niveau i{position:absolute;left:0;right:0;bottom:0;border-radius:999px;
  background:var(--kl,#F0B23A);height:0;transition:height .3s}
.tegel.uit .niveau i{background:var(--line)}

/* --------------------------------------------------------------------- */

.plattegrond{display:flex;flex-direction:column;gap:calc(26 * var(--sc));flex:1;min-height:0;
  overflow:hidden;justify-content:flex-start;align-content:flex-start}
.plattegrond.bewerkt{overflow:auto}
/* In de bewerkstand moet elke cel groot genoeg zijn om met een vinger te
   pakken. Dat weegt hier zwaarder dan alles tegelijk zien. */
  .plattegrond.bewerkt .plan{grid-template-rows:repeat(var(--rij),minmax(84px,1fr));
  min-height:calc(var(--rij) * 84px);max-height:none;gap:6px}
.plattegrond.bewerkt .vloer{max-height:none}
/* In de kijkstand is een verdieping geen kaart maar een kopje met tegels
   eronder — precies zoals in het ontwerp. Een kaart om een kaart heen geeft
   twee randen die niets toevoegen. In de bewerkstand blijft het paneel wél
   staan: dáár is de verdieping een vlak waar je iets naartoe sleept, en dan
   moet je zien waar dat vlak ophoudt. */
.vloer{display:flex;flex-direction:column;gap:calc(12 * var(--sc));min-height:0;
  max-height:calc(var(--rijhoogte,4) * 300px + 66px)}
/* De hoogtelimiet per verdieping bestaat om te voorkomen dat één zolder met
   één lamp een derde van het scherm krijgt als er vier verdiepingen zijn.
   Ís er maar één verdieping, dan is er niets om tegen af te wegen en mag hij
   het hele vlak hebben — anders staat er onderaan vierhonderd pixels niets. */
.plattegrond:not(.bewerkt) .vloer:only-child{max-height:none}
.plattegrond.bewerkt .vloer{background:var(--panel);border-radius:var(--radius,22px);
  box-shadow:var(--shadow);padding:var(--s3);gap:var(--s2)}
.vloerkop{display:flex;align-items:center;gap:calc(9 * var(--sc));flex:none;
  font-family:var(--font-display,'Space Grotesk'),sans-serif;
  font-size:calc(16 * var(--sc));font-weight:800;color:var(--dim);
  text-transform:uppercase;letter-spacing:.14em}
.vloerkop .ic{width:calc(18 * var(--sc));height:calc(18 * var(--sc))}
.plattegrond:not(.bewerkt) .vloerkop .ic{display:none}
.vaan{margin-left:auto;font-weight:800;color:var(--dim);letter-spacing:0;text-transform:none}
/* Een rij mag niet onbeperkt uitrekken — één verdieping met één rij zou
   anders een kamer van twaalfhonderd pixels hoog opleveren — maar ook niet
   onbeperkt krimpen. Vier verdiepingen op een liggend scherm persten de
   cellen tot streepjes van tien pixels, en dan vallen de naam, het icoon en
   de knopjes over elkaar heen. Vandaar allebei de grenzen. */
.plan{display:grid;gap:calc(14 * var(--sc));flex:1;min-height:0;
  grid-template-columns:repeat(var(--kol),1fr);
  grid-template-rows:repeat(var(--rij),minmax(56px,1fr));
  min-height:calc(var(--rij) * 56px);
  /* Was 300 per rij. Op het staande paneel van 1920 hoog levert dat bij vier
     rijen twaalfhonderd pixels tegels en driehonderd pixels niets op — de
     limiet greep in waar hij niets te beschermen had. 420 laat het raster de
     hoogte vullen en houdt nog steeds tegen dat één rij het scherm opeet. */
  max-height:calc(var(--rij) * 420px)}
/* Past het niet meer, dan is de plattegrond te groot voor dit scherm en mag
   je erlangs vegen. Beter dan inhoud die tot een streepje wordt geperst. */
/* ==========================================================================
   De bewerkstand
   ========================================================================== */
.plattegrond.bewerkt .vloer{background:var(--panel-2)}
.plan .ecel{border:1.5px dashed var(--line);border-radius:10px;pointer-events:none}

.ekamer{container-type:size;position:relative;border-radius:12px;padding:var(--s2) var(--s3);
  background:color-mix(in srgb,var(--kl) 22%,var(--panel));
  border:2px solid color-mix(in srgb,var(--kl) 55%,transparent);
  display:flex;flex-direction:column;justify-content:flex-end;gap:1px;
  cursor:grab;touch-action:none;user-select:none;overflow:hidden}
.ekamer.sleept{cursor:grabbing;z-index:5;box-shadow:var(--shadow-lift);filter:brightness(1.04)}
.ekamer.actief{box-shadow:0 0 0 3px color-mix(in srgb,var(--kl) 45%,transparent)}
.eic{position:absolute;left:var(--s2);top:var(--s2);font-size:var(--t3);
  color:color-mix(in srgb,var(--kl) 70%,var(--text));opacity:.7}
.ekamer b{font-family:var(--font-display,'Fredoka');font-size:var(--t2);font-weight:600;
  line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.emaat{font-size:var(--t1);color:var(--muted);font-weight:800}
/* Een kamer van één cel heeft geen ruimte voor een icoon linksboven én een
   naam onderaan. Dan wint de naam. */
@container (max-height: 108px){
  .ekamer .eic{display:none}
  .ekamer{padding-left:var(--s2)}
}
@container (max-width: 150px){ .ekamer .evloer{display:none} }
.eweg{position:absolute;right:2px;top:2px;width:36px;height:36px;border:none;background:none;
  color:var(--muted);font-size:var(--t2);cursor:pointer;display:grid;place-items:center;border-radius:50%}
.evloer{position:absolute;right:42px;bottom:2px;width:38px;height:38px;border:none;background:none;
  color:color-mix(in srgb,var(--kl) 75%,var(--text));font-size:var(--t2);cursor:pointer;
  display:grid;place-items:center;border-radius:50%;opacity:.75}
.eweg:active,.evloer:active{background:var(--chip)}
/* De greep rechtsonder. Het raakvlak is groter dan het pictogram — een hoek
   waar je met je vinger net naast zit voelt kapot. */
.ehoek{position:absolute;right:0;bottom:0;width:44px;height:44px;display:grid;place-items:center;
  color:color-mix(in srgb,var(--kl) 75%,var(--text));font-size:var(--t3);cursor:nwse-resize;
  opacity:.8}

.vnaam{cursor:text}
.plattegrond.bewerkt .vnaam{text-decoration:underline dotted;text-underline-offset:3px}
.eraster{margin-left:auto;display:flex;align-items:center;gap:2px;text-transform:none;letter-spacing:0}
.eraster button{min-width:36px;height:36px;border:1px solid var(--line);background:var(--panel);
  color:var(--text);border-radius:9px;cursor:pointer;font-size:var(--t3);font-weight:800;
  font-family:var(--font-body)}
.eraster button:active{background:var(--chip)}
.eraster em{font-style:normal;font-size:var(--t1);color:var(--muted);font-weight:800;
  padding:0 var(--s2);min-width:62px;text-align:center}

.ela{background:var(--panel);border:2px dashed var(--line);border-radius:var(--radius,22px);
  padding:var(--s3);display:flex;flex-direction:column;gap:var(--s2);flex:none}
.ela.leeg{opacity:.55}
.elatitel{font-size:var(--t1);font-weight:800;color:var(--muted);text-transform:uppercase;
  letter-spacing:.08em}
.elachips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.echip{display:flex;align-items:center;gap:var(--s2);border-radius:999px;cursor:pointer;
  background:var(--panel-2);border:1.5px solid var(--line);color:var(--text);
  padding:var(--s2) var(--s3);font-size:var(--t2);font-weight:700;min-height:48px}
.echip .ic{font-size:var(--t3);color:var(--muted)}

.eonder{display:flex;gap:var(--s2);flex:none}
.eonder button{flex:1;border:1px solid var(--line);background:var(--panel);color:var(--muted);
  border-radius:999px;min-height:52px;font-family:var(--font-body);font-size:var(--t2);
  font-weight:800;cursor:pointer}
.eonder button:active{background:var(--chip)}

.lichtfout{margin-top:var(--s3);padding:var(--s3) var(--s4);border-radius:var(--radius-sm,15px);
  background:color-mix(in srgb,var(--danger,#c0392b) 14%,var(--panel));
  color:var(--text);font-size:var(--t2);font-weight:700;flex:none}
.lichtfout[hidden]{display:none}

/* ==========================================================================
   Detailvenster en recept
   ========================================================================== */
.sheet[hidden]{display:none !important}
.sheet{position:fixed;inset:0;background:rgba(25,21,18,.72);z-index:50;
  display:flex;align-items:center;justify-content:center;padding:var(--s7)}
.sheet-card{background:var(--panel);border-radius:var(--radius,22px);padding:var(--s6);
  width:min(680px,92vw);border:1px solid var(--line);box-shadow:var(--shadow-lift)}
.sheet-bar{height:8px;border-radius:4px;background:var(--accent);margin-bottom:var(--s5)}
.sheet-card h2{font-family:var(--font-display,'Fredoka');font-size:var(--t5);font-weight:600;
  margin:0 0 var(--s3);line-height:1.15}
.sheet-when{font-size:var(--t4);margin:0 0 var(--s2);color:var(--accent);font-weight:700}
.sheet-where,.sheet-desc{font-size:var(--t3);color:var(--muted);margin:0 0 var(--s2);
  line-height:1.45;font-weight:600}
.sheet-src{font-size:var(--t2);color:var(--dim);margin:var(--s4) 0 0;font-weight:700}
.sheet-where:empty,.sheet-desc:empty{display:none}
.btn-big{width:100%;min-height:66px;font-size:var(--t4);margin-top:var(--s4);font-weight:800;
  font-family:var(--font-body,'Nunito')}

/* Breder dan een afspraak, want ingrediënten en stappen staan naast elkaar:
   zo kun je koken zonder te scrollen. */
.sheet-card.recept{width:min(1100px,94vw);max-height:88vh;overflow:hidden;
  padding:0 0 var(--s5);display:flex;flex-direction:column}
/* De knoppenrij en de bron blijven staan; alleen de ingrediënten en de
   bereiding scrollen. Op een wandscherm wil je niet naar beneden hoeven
   vegen om te zien waar het recept vandaan komt. */
.sheet-card.recept .rc-scroll{overflow-y:auto;flex:1 1 auto;min-height:0;padding-bottom:var(--s2)}
.sheet-card.recept .sheet-bar{margin:0;border-radius:0}
.rc-foto{width:100%;height:210px;object-fit:cover;display:block}
.sheet-card.recept h2{font-size:var(--t6);margin:var(--s5) var(--s6) var(--s2)}
.sheet-card.recept .sheet-when{margin:0 var(--s6) var(--s3);font-size:var(--t3);
  color:var(--warn);font-weight:800}
.sheet-card.recept .sheet-desc{margin:0 var(--s6) var(--s4);font-size:var(--t3);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sheet-card.recept .sheet-src{margin:var(--s4) var(--s6) 0}
.rc-kolommen{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--s5);margin:var(--s2) var(--s6) 0}
.rc-blok h3{font-family:var(--font-display,'Fredoka');font-size:var(--t4);font-weight:600;
  margin:0 0 var(--s3);padding-bottom:var(--s2);
  border-bottom:2px solid color-mix(in srgb,var(--warn) 40%,transparent);
  color:color-mix(in srgb,var(--warn) 75%,var(--text))}
.rc-ing{list-style:none;margin:0;padding:0}
.rc-ing li{font-size:var(--t3);font-weight:600;padding:var(--s2) 0 var(--s2) var(--s5);
  position:relative;line-height:1.35;border-bottom:1px solid var(--line)}
.rc-ing li::before{content:'';position:absolute;left:var(--s2);top:15px;width:8px;height:8px;
  border-radius:50%;background:var(--warn)}
.rc-stap{margin:0;padding:0;list-style:none;counter-reset:stap}
.rc-stap li{font-size:var(--t3);line-height:1.5;padding:0 0 var(--s4) var(--s7);
  position:relative;color:var(--text)}
.rc-stap li::before{counter-increment:stap;content:counter(stap);position:absolute;left:0;top:0;
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--warn) 20%,var(--panel-2));
  color:color-mix(in srgb,var(--warn) 80%,var(--text));
  font-family:var(--font-display,'Fredoka');font-weight:700;font-size:var(--t2)}
.rc-knoppen{display:flex;gap:var(--s3);margin:var(--s5) var(--s6) 0}
.rc-knoppen .btn-big{margin-top:0}

/* ==========================================================================
   Smallere schermen
   ==========================================================================
   Het paneel is 1080 breed en alles daarboven schaalt met --sc mee. Er zijn
   maar twee dingen die daarnaast nog apart moeten: op een telefoon staan de
   twee lijstkaarten onder elkaar in plaats van naast elkaar, en het dok
   verliest zijn gebedstijden — die staan daar met zes tegelijk op zes
   centimeter breedte, en dat leest niemand.
   ========================================================================== */
/* ------------------------------------------------- laag of liggend scherm ---
   Het paneel is 1080 breed en 1920 hoog; in een browservenster op een Mac is
   het scherm breder dan hoog en past dat nooit. Tot nu toe sneed
   overflow:hidden dan gewoon de onderkant van de stroom af — een halve
   "Hele dag"-balk en daaronder niets. Afsnijden is nooit het antwoord:
   op een scherm dat te laag is mag de pagina scrollen.

   Het dok blijft daarbij onderaan plakken. Schermkeuze en gebedstijden zijn
   de twee dingen die je altijd wilt kunnen zien en aanraken, hoe ver je ook
   gescrold hebt. Op het paneel zelf (1920 hoog) verandert hier niets:
   daar past alles en scrollt er niets, dus plakt er ook niets. */
@media (min-width: 701px) and (max-height: 1599px){
  html,body{overflow:auto}
  /* overflow:visible is hier geen detail: met overflow:hidden zou .app zelf
     de scrollcontainer zijn — een die niet scrolt — en dan plakt sticky aan
     niets. Het venster moet de scroller zijn. */
  .app{height:auto;min-height:100vh;overflow:visible}
  .thuisstage,.stage,.stroom,.lichtstage,.plattegrond{overflow:visible}
  .stage,.stroom{flex:none}
  .plattegrond:not(.bewerkt) .vloer{max-height:none}
  .plan{max-height:none}
  .dok{position:sticky;bottom:calc(14 * var(--sc));z-index:20}
}

/* --------------------------------------------------------------- telefoon ---
   Dezelfde pagina in een hand. Eén schaalfactor van breedte werkt hier niet:
   390 gedeeld door 1080 is 0,36, en dan wordt een regel van 21 ontwerp-pixels
   acht pixels hoog — dat is geen kleine tekst meer maar onleesbare tekst.

   Dus twee dingen tegelijk: de schaal krijgt een ondergrens, en het paneel
   mag scrollen. Aan de muur past alles in één beeld omdat het scherm hoog is;
   in een hand is het scherm dat niet, en dan is scrollen eerlijker dan
   samenpersen. Alles wat aan de muur een vaste hoogte heeft — de stroom, de
   lijstkaarten — laat die hier los.
   -------------------------------------------------------------------------- */
@media (max-width: 700px){
  html,body{overflow:auto}
  .app{--sc:calc(min(100vw, 1080px) / 1080 * 1.7);height:auto;min-height:100vh;overflow:visible}
  /* De typografie van het paneel is display-zwaar: een klok van 96 en een
     titel van 40 werken op twee meter afstand en niet in een hand. Op de
     telefoon krimpen die apart, zodat de leestekst mee omhoog kan zonder dat
     de koppen het scherm opeten. */
  .kop{gap:calc(14 * var(--sc))}
  .klok{font-size:calc(52 * var(--sc));letter-spacing:calc(-2 * var(--sc))}
  .dagnaam{font-size:calc(24 * var(--sc))}
  .gring{width:calc(42 * var(--sc));height:calc(42 * var(--sc))}
  .gring i{width:calc(31 * var(--sc));height:calc(31 * var(--sc))}
  .gtekst,.gregel{min-width:0;overflow:hidden}
  .weer{display:none}
  .gsub{max-width:calc(200 * var(--sc))}
  .hero{padding:calc(20 * var(--sc)) calc(22 * var(--sc));gap:calc(16 * var(--sc))}
  .hero .wie .f{width:calc(52 * var(--sc));height:calc(52 * var(--sc));font-size:calc(26 * var(--sc))}
  .hero .titel{font-size:calc(28 * var(--sc))}
  .hero .tijd b{font-size:calc(30 * var(--sc))}
  .hero .onder{flex-wrap:wrap;gap:calc(8 * var(--sc))}
  .komt .titel,.tegelnaam h3{font-size:calc(22 * var(--sc))}
  /* Op een smal scherm is er geen ruimte om Vanavond en het huisdier naast
     elkaar te zetten — hier altijd onder elkaar, ongeacht of ze samen
     zichtbaar zijn. */
  .rij-onder{display:block}
  .maalkaart{margin-bottom:calc(14 * var(--sc))}
  .maalkaart .titel{font-size:calc(22 * var(--sc))}
  .thuisstage,.stage,.stroom{overflow:visible;min-height:0}
  .stage,.stroom{flex:none}
  /* Naast elkaar is hier onleesbaar: de lijstjes komen weer ónder de
     stroom, met hun eigen marge terug (in .stroomrij staan ze zonder). */
  .stroomrij{display:block;flex:none}
  .stroomrij .bento{margin:calc(18 * var(--sc)) 0 0}
  .bento{grid-template-columns:minmax(0,1fr)}
  .bento .kaart{height:auto}
  .bento .listitems{flex:none}
  .ringen{grid-template-columns:minmax(0,1fr);gap:calc(18 * var(--sc))}
  .weektegels{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* Zes gebedstijden naast elkaar op 390 pixels wordt zes streepjes. In de
     kop staat de eerstvolgende al groot; hier is dat genoeg. */
  .gebedstrip{display:none}
  .lichtstage{overflow:visible}
  .plattegrond{overflow:visible}
  .plattegrond:not(.bewerkt) .vloer:only-child,.plan{max-height:none}
  .plan{grid-template-rows:repeat(var(--rij),minmax(calc(96 * var(--sc)),auto))}
  /* Ook hier: schermkeuze en knoppen blijven onderaan staan terwijl de
     rest scrolt. */
  .dok{position:sticky;bottom:calc(10 * var(--sc));z-index:20}
}

/* ==========================================================================
   Wachten
   ==========================================================================
   Alleen bij het opstarten. Daarna vervangt een verversing de inhoud in
   plaats van hem eerst weg te halen — je hebt dan al iets om naar te
   kijken, en dat is beter dan een spinner. */
.wacht{display:flex;align-items:center;gap:var(--s3);padding:var(--s6) 0;
  color:var(--dim);font-size:var(--t3);font-weight:700}
.wacht .bw{font-size:26px;color:var(--accent)}

/* ==========================================================================
   Apparaten die geen lamp zijn — herontwerp 2026
   ==========================================================================
   Stopcontacten, rolgordijnen, de luchtreiniger. Ze staan onder de
   plattegrond in één strook. Bewust klein: het zijn er weinig en je raakt
   ze zelden aan, dus ze horen geen kamertegel te lijken.
   ========================================================================== */
.apparaten{display:flex;flex-wrap:wrap;gap:calc(14 * var(--sc));flex:none;
  margin-top:calc(8 * var(--sc))}
.apparaten[hidden]{display:none}
.appgroep{display:contents}
.appgroep h4{display:none}
.apprij{display:contents}
.appkaart{position:relative;flex:1 1 calc(280 * var(--sc));min-width:calc(230 * var(--sc));
  background:var(--panel);border:1px solid var(--cardline);border-radius:calc(22 * var(--sc));
  display:flex;align-items:center}
.appkaart.weg{opacity:.45}
.appknop{flex:1;min-width:0;display:flex;align-items:center;gap:calc(12 * var(--sc));
  background:none;border:0;color:var(--text);cursor:pointer;text-align:left;
  padding:calc(20 * var(--sc)) calc(22 * var(--sc));font-family:inherit}
.appknop:active{transform:scale(.98)}
.appknop > .ic{width:calc(24 * var(--sc));height:calc(24 * var(--sc));color:var(--dim);flex:none}
.appkaart.aan .appknop > .ic{color:var(--ok,#3DD9A4)}
.apptekst{display:flex;align-items:baseline;gap:calc(10 * var(--sc));min-width:0;flex:1}
.apptekst b{font-size:calc(20 * var(--sc));font-weight:700;min-width:0;flex:1 1 auto;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* De naam eerst. Zonder flexverdeling kromp die tot nul zodra de staat wat
   langer werd — "automatisch · 4 µg/m³" duwde "Luchtreiniger" gewoon weg. */
.apptekst em{margin-left:auto;font-style:normal;font-size:calc(16 * var(--sc));
  font-weight:600;color:var(--dim);flex:0 2 auto;min-width:0;
  max-width:calc(130 * var(--sc));
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.appmeer{width:calc(52 * var(--sc));height:calc(52 * var(--sc));margin-right:calc(10 * var(--sc));
  background:none;border:0;color:var(--muted);cursor:pointer;display:grid;place-items:center;
  border-radius:50%;flex:none}
.appmeer .ic{width:calc(20 * var(--sc));height:calc(20 * var(--sc));transition:transform .25s}
.appmeer.open .ic{transform:rotate(180deg)}
.appstanden{position:absolute;left:0;right:0;top:100%;margin-top:calc(8 * var(--sc));z-index:6;
  background:var(--panel);border:1px solid var(--cardline);border-radius:calc(20 * var(--sc));
  box-shadow:var(--shadow);padding:calc(12 * var(--sc));display:flex;flex-wrap:wrap;
  gap:calc(8 * var(--sc))}
.appstanden button{flex:1 1 auto;background:var(--chip);border:0;color:var(--text);
  border-radius:calc(14 * var(--sc));padding:calc(14 * var(--sc)) calc(18 * var(--sc));
  font-family:inherit;font-size:calc(17 * var(--sc));font-weight:700;cursor:pointer}
.appstanden button.nu{background:var(--accent);color:var(--bg)}

/* ==========================================================================
   Adhaan: schermvullend bij gebedstijd
   ==========================================================================
   Donker en rustig in élk thema, dag zowel als avond — dit is geen kaart
   die met de inrichting meekleurt, het is een moment dat er even overheen
   gaat. Vandaar een eigen, vaste achtergrond in plaats van --bg/--panel.
   De naam is het grootste dat op dit scherm ooit staat: groter dan de
   klok, want dit is het enige moment waarop er maar één ding te lezen is.
   ========================================================================== */
.adhaan{
  position:fixed;inset:0;z-index:50;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--s4);
  background:#0e1210;color:#f3efe4;
  animation:adhaan-in .6s ease both;
  cursor:pointer;
}
.adhaan[hidden]{display:none}
.adhaan-naam{
  font-family:var(--font-display,'Fredoka'),ui-rounded,system-ui,sans-serif;
  font-weight:700;font-size:min(18vw,180px);line-height:1;
  letter-spacing:.01em;
}
.adhaan-tijd{font-size:var(--t6);color:#c9bfa8;font-variant-numeric:tabular-nums}
.adhaan-tik{
  position:absolute;bottom:var(--s6);font-size:var(--t3);color:#8d8372;
  opacity:.8;
}
@keyframes adhaan-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: reduce){.adhaan{animation:none}}

/* ==========================================================================
   Deurbel: schermvullend bij het aanbellen
   ==========================================================================
   Zelfde soort moment als de adhaan (schermvullend, negeerbaar met een
   tik), maar met een eigen kleur — dit is geen rustpunt maar een "kom
   nu kijken". Warme rode gloed in plaats van het rustige adhaan-donker.
   ========================================================================== */
.deurbel{
  position:fixed;inset:0;z-index:50;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--s4);
  background:#210d0d;color:#f3efe4;
  animation:deurbel-in .4s ease both, deurbel-puls 1.4s ease-in-out infinite;
  cursor:pointer;
}
.deurbel[hidden]{display:none}
.deurbel-icoon{font-size:min(14vw,120px);line-height:1}
.deurbel-naam{
  font-family:var(--font-display,'Fredoka'),ui-rounded,system-ui,sans-serif;
  font-weight:700;font-size:min(9vw,80px);line-height:1.1;text-align:center;
}
.deurbel-foto{
  max-width:min(70vw,720px);max-height:45vh;border-radius:var(--r4,18px);
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.deurbel-foto[hidden]{display:none}
.deurbel-tik{
  position:absolute;bottom:var(--s6);font-size:var(--t3);color:#e0a8a8;
  opacity:.8;
}
@keyframes deurbel-in{from{opacity:0}to{opacity:1}}
@keyframes deurbel-puls{0%,100%{background:#210d0d}50%{background:#3a1212}}
@media (prefers-reduced-motion: reduce){.deurbel{animation:deurbel-in .4s ease both}}

/* ==========================================================================
   De spraakassistent
   ==========================================================================
   Zelfde familie als de adhaan en de deurbel: een laag over alles heen,
   één tik en je bent terug. Bewust geen gezicht maar een bol — een
   pratend gezicht in een keuken is snel eng of kinderachtig, een bol die
   ademt terwijl hij luistert en pulseert als hij spreekt is meteen
   begrijpelijk en kost geen enkele extra dienst.
   ========================================================================== */
.btn[hidden]{display:none}
.assistent{
  /* Staat buiten .app, dus --sc van daar geldt hier niet — zelf zetten,
     anders is elke calc(N * var(--sc)) hieronder stilletjes nul. */
  --sc:calc(min(100vw, 1080px) / 1080);
  position:fixed;inset:0;z-index:45;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:calc(22 * var(--sc));padding:var(--rand,24px);
  background:rgba(8,10,16,.94);color:#f3efe4;
  animation:assistent-in .35s ease both;
}
.assistent[hidden]{display:none}
.assistent-bol{
  position:relative;width:calc(220 * var(--sc));height:calc(220 * var(--sc));
  display:grid;place-items:center;
}
.assistent-bol i{
  position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #9fd3ff, var(--accent,#3f6f9f) 60%, #1a2b44);
  --b:.72;opacity:.9;transform:scale(var(--b));
  transition:transform .3s ease,opacity .3s ease;
}
.assistent-bol i:nth-child(2){--b:.88;opacity:.35}
.assistent-bol i:nth-child(3){--b:1;opacity:.15}
/* luisteren: rustig ademen; spreken: sneller kloppen; bezig: draaien */
.assistent[data-modus="luistert"] .assistent-bol i{animation:bol-adem 2.6s ease-in-out infinite}
.assistent[data-modus="luistert"] .assistent-bol i:nth-child(2){animation-delay:.3s}
.assistent[data-modus="luistert"] .assistent-bol i:nth-child(3){animation-delay:.6s}
.assistent[data-modus="spreekt"] .assistent-bol i{animation:bol-puls .9s ease-in-out infinite}
.assistent[data-modus="spreekt"] .assistent-bol i:nth-child(2){animation-delay:.15s}
.assistent[data-modus="spreekt"] .assistent-bol i:nth-child(3){animation-delay:.3s}
.assistent[data-modus="bezig"] .assistent-bol i:nth-child(3){
  border:calc(3 * var(--sc)) solid transparent;border-top-color:#9fd3ff;background:none;
  animation:bol-draai 1s linear infinite;opacity:.8}
.assistent[data-modus="fout"] .assistent-bol i{background:radial-gradient(circle at 35% 35%, #ffb0a0, #8a2f24 60%, #3a1212)}
.assistent-status{
  font-family:var(--font-display,'Space Grotesk'),sans-serif;
  font-size:calc(22 * var(--sc));font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#9fd3ff;
}
.assistent[data-modus="fout"] .assistent-status{color:#ffb0a0}
.assistent-jij,.assistent-hij{
  margin:0;max-width:calc(880 * var(--sc));text-align:center;line-height:1.3;
  min-height:1.3em;
}
.assistent-jij{font-size:calc(30 * var(--sc));color:#aab4c4}
.assistent-jij:not(:empty)::before{content:"„";opacity:.6}
.assistent-jij:not(:empty)::after{content:"”";opacity:.6}
.assistent-hij{font-size:calc(40 * var(--sc));font-weight:700}
.assistent-stop{
  margin-top:calc(18 * var(--sc));width:auto;height:auto;min-height:0;
  padding:calc(16 * var(--sc)) calc(44 * var(--sc));border-radius:999px;
  font-family:inherit;font-size:calc(24 * var(--sc));font-weight:700;color:#f3efe4;
  background:rgba(255,255,255,.12);
}
@keyframes assistent-in{from{opacity:0}to{opacity:1}}
@keyframes bol-adem{0%,100%{transform:scale(var(--b))}50%{transform:scale(calc(var(--b) * 1.08))}}
@keyframes bol-puls{0%,100%{transform:scale(calc(var(--b) * .92))}50%{transform:scale(calc(var(--b) * 1.12))}}
@keyframes bol-draai{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.assistent .assistent-bol i{animation:none!important}}

/* ==========================================================================
   Het vakantiealbum
   ==========================================================================
   Het paneel hangt staand; vakantiefoto's zijn meestal liggend. Hard
   bijsnijden zou 58% van een liggende foto weggooien en 82% van een
   panorama — je houdt een verticale strook over waar het gezicht net naast
   valt. Zwarte balken zijn eerlijker maar vullen het scherm niet.

   Dus allebei niet: onderop dezelfde foto uitvergroot en onscherp, erboven
   de foto zelf op ware verhouding. Beeld tot aan de randen, niets eraf. Past
   een foto toevallig precies, dan dekt hij de waas volledig af en zie je
   gewoon een schermvullende foto.

   Twee lagen die om en om vervagen, zodat er nooit een zwart gat valt
   tussen twee foto's.
   ========================================================================== */
.album{position:fixed;inset:0;z-index:45;background:#000;cursor:pointer}
.album[hidden]{display:none}
.album-laag{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.album-laag.aan{opacity:1}
.album-waas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:blur(46px) brightness(.5) saturate(1.15);transform:scale(1.12)}
.album-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}

/* Twee andere smaken, in te stellen op de telefoon. `vullen` snijdt bij —
   prima als je album vooral staande foto's heeft. `passend` laat gewoon
   zwarte balken staan. */
.album[data-vulling="vullen"] .album-waas{display:none}
.album[data-vulling="vullen"] .album-foto{object-fit:cover}
.album[data-vulling="passend"] .album-waas{display:none}

.album-tik{position:absolute;left:0;right:0;bottom:clamp(16px, 2.2vh, 42px);text-align:center;
  font-size:clamp(13px, 1.6vh, 20px);font-weight:600;color:rgba(255,255,255,.45);
  text-shadow:0 1px 6px rgba(0,0,0,.8);pointer-events:none;z-index:2}
@media (prefers-reduced-motion: reduce){ .album-laag{transition:none} }

/* Staat er van de twee lijstkaarten maar één aan, dan krijgt die de volle
   breedte in plaats van naast een gat te staan. */
.bento.een{grid-template-columns:minmax(0,1fr)}

/* Let op: het `hidden`-attribuut is niet genoeg. De browser zet daarvoor
   `display:none` in zijn eigen stijlblad, en élke display-regel van ons wint
   daarvan — .maalkaart is flex, .bento is grid, .bento .kaart is flex. Zonder
   deze regels blijft er een lege balk staan waar het blok stond. */
.maalkaart[hidden],.bento[hidden],.kluskaart[hidden],
.weektegels[hidden],.lijstkaart[hidden]{display:none}

/* ==========================================================================
   Aantikbaar
   ==========================================================================
   Alles wat je kunt openen krijgt een raakvlak van minstens 56 pixels en
   een zichtbare reactie op een tik. Zonder die reactie tikt iemand drie keer
   omdat hij denkt dat het scherm hem niet hoorde.
   ========================================================================== */
.wiebalk{margin-left:auto;display:flex;gap:calc(12 * var(--sc));flex:none}  /* 12 en niet 8: twee ringen naast elkaar moeten elkaar niet raken */
.wieknop{width:calc(52 * var(--sc));height:calc(52 * var(--sc));border-radius:50%;border:0;
  padding:0;cursor:pointer;display:grid;place-items:center;overflow:hidden;
  font-size:calc(25 * var(--sc));background:color-mix(in srgb, var(--kl) 20%, transparent);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--kl) 45%, transparent)}
.wieknop img{width:100%;height:100%;object-fit:cover}
.wieknop:active{transform:scale(.92)}

.wd[data-dag],.kid[data-lid],.lijstkaart h3{cursor:pointer}
.wd[data-dag]:active,.kid[data-lid]:active{transform:scale(.98)}
.lijstkaart h3::after{content:'›';margin-left:calc(6 * var(--sc));opacity:.45;font-weight:700}

/* De inhoud van een geopende weergave. */
.pl-lijst{display:flex;flex-direction:column;gap:calc(6 * var(--sc))}
.pl-kopje{font-size:var(--t2);font-weight:800;color:var(--dim);text-transform:uppercase;
  letter-spacing:.1em;margin:var(--s4) 0 var(--s2)}
.pl-rij{display:flex;align-items:baseline;gap:var(--s3);padding:var(--s3) var(--s2);
  border-bottom:1px solid var(--line);min-height:56px}
.pl-dag{min-width:9em;font-weight:800;color:var(--muted)}
.pl-tijd{min-width:5em;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums}
.pl-titel{font-weight:700;flex:1;min-width:0}
.pl-waar{color:var(--dim);font-weight:600;max-width:40%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.pl-ptn{font-weight:800;color:var(--ok)}
.pl-gezicht{display:inline-grid;place-items:center;width:1.3em;height:1.3em;border-radius:50%;
  overflow:hidden;background:color-mix(in srgb, var(--kl) 20%, transparent);
  margin-right:.35em;vertical-align:-.25em}
.pl-gezicht img{width:100%;height:100%;object-fit:cover}

.pl-klus{display:flex;align-items:center;gap:var(--s3);width:100%;text-align:left;
  background:none;border:0;border-bottom:1px solid var(--line);padding:var(--s3) var(--s2);
  min-height:64px;cursor:pointer;color:var(--text);font:inherit}
.pl-klus:active{background:var(--chip)}
.pl-klus .box{width:32px;height:32px;border-radius:10px;border:2.5px solid var(--line);
  flex:none;display:grid;place-items:center;font-weight:800;color:var(--ok)}
.pl-klus.done{opacity:.5}
.pl-klus.done .pl-titel{text-decoration:line-through}

/* Zichtbaar maken dat de browser het geluid weigerde. Zonder deze regel is
   een geblokkeerde adhaan niet te onderscheiden van een kapotte. */
.adhaan-geen{position:absolute;left:0;right:0;bottom:clamp(56px, 7vh, 96px);text-align:center;
  font-size:clamp(14px, 1.7vh, 21px);font-weight:700;color:#e8b45a;padding:0 6vw;line-height:1.4}
.adhaan-geen[hidden]{display:none}

/* ==========================================================================
   Huisdier
   De kaart staat er alleen als er iets te doen is (zie renderHuisdier), dus
   ze mag opvallen: dit is per definitie een openstaand punt. Vandaar de
   accentrand links in plaats van de rustige kaartlijn van de rest.
   ========================================================================== */
.katkaart{margin:0;flex:1 1 0;min-width:0;display:flex;flex-direction:column;
  gap:calc(12 * var(--sc));border-left:calc(6 * var(--sc)) solid var(--accent)}
.katkaart[hidden]{display:none}
/* Deelt de rij met .maalkaart (zie .rij-onder hierboven); op smal scherm
   (@media max-width:700px, verderop) staat elke kaart weer op zijn eigen
   volle breedte. */
.katrij{display:flex;align-items:center;gap:calc(16 * var(--sc));width:100%;
  background:none;border:0;padding:calc(10 * var(--sc)) 0;color:inherit;
  font:inherit;text-align:left;cursor:pointer}
.kat-ic{font-size:calc(34 * var(--sc));line-height:1;flex:none}
.kat-txt{display:flex;flex-direction:column;gap:calc(2 * var(--sc));min-width:0;flex:1}
.kat-txt b{font-size:calc(26 * var(--sc));font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kat-txt em{font-style:normal;font-size:calc(17 * var(--sc));opacity:.62;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kat-vink{flex:none;font-size:calc(30 * var(--sc));opacity:.35}
.katrij:active .kat-vink{opacity:1}

/* De wie-vraag in het paneel. Grote raakvlakken: dit wordt met een duim
   op een muur aangetikt, soms door een kind van zes. */
.wiekeuzes{display:flex;flex-wrap:wrap;gap:calc(14 * var(--sc));margin-top:calc(18 * var(--sc))}
.wiekeus{display:flex;align-items:center;gap:calc(12 * var(--sc));
  background:var(--panel2,rgba(255,255,255,.06));border:1px solid var(--cardline);
  border-radius:999px;padding:calc(10 * var(--sc)) calc(22 * var(--sc)) calc(10 * var(--sc)) calc(10 * var(--sc));
  color:inherit;font:inherit;font-size:calc(22 * var(--sc));font-weight:600;cursor:pointer}
.wiekeus-bol{width:calc(52 * var(--sc));height:calc(52 * var(--sc));border-radius:50%;
  background:var(--kl,var(--accent));color:#10140f;display:grid;place-items:center;
  font-weight:800;font-size:calc(24 * var(--sc));overflow:hidden;flex:none}
.wiekeus-bol img{width:100%;height:100%;object-fit:cover}
.wiekeus:active{transform:scale(.97)}
.kat-kop{display:flex;align-items:center;gap:calc(12 * var(--sc))}
.kat-pas{width:calc(38 * var(--sc));height:calc(38 * var(--sc));border-radius:50%;
  object-fit:cover;flex:none}
.kat-pas-leeg{background:var(--kl,var(--accent));display:grid;place-items:center;
  font-size:calc(20 * var(--sc))}
/* Een melding zonder handeling: geen vinkje, geen aanraakgedrag. */
.katmelding{cursor:default}
.katmelding .kat-txt b{color:var(--accent)}

/* Het huisdierpaneel: drie getallen groot, de rest als regels eronder. Geen
   agenda — een kat heeft geen afspraken, en een lege lijst leest als een fout. */
.dierkerns{display:flex;gap:calc(18 * var(--sc));margin:calc(22 * var(--sc)) 0 calc(8 * var(--sc));
  flex-wrap:wrap}
.dierkern{flex:1 1 calc(180 * var(--sc));background:var(--chip);border-radius:calc(20 * var(--sc));
  padding:calc(18 * var(--sc)) calc(22 * var(--sc));min-width:0}
.dierkern b{display:block;font-family:var(--font-display,'Space Grotesk'),sans-serif;
  font-size:calc(52 * var(--sc));font-weight:800;line-height:1;letter-spacing:-.02em}
.dierkern b em{font-style:normal;font-size:calc(22 * var(--sc));font-weight:700;
  opacity:.55;margin-left:calc(6 * var(--sc))}
.dierkern span{display:block;margin-top:calc(8 * var(--sc));font-size:calc(17 * var(--sc));
  opacity:.6;line-height:1.25}
.dierregels{display:flex;flex-direction:column;gap:calc(12 * var(--sc));margin-top:calc(16 * var(--sc))}
.dierregel{display:flex;gap:calc(14 * var(--sc));align-items:baseline;font-size:calc(22 * var(--sc))}
.dierregel span:first-child{font-size:calc(24 * var(--sc));flex:none}

/* De papierstructuur uit op aanraakschermen.
   Het is een vaste laag over het hele scherm met een ruisplaatje erin, en
   dat is precies het soort ding waar de Android-WebView tegels van laat
   staan: kleine lichte blokjes die verspringen. Op de muur is de structuur
   toch niet te zien; op een laptop met een muis blijft hij gewoon staan. */
/* (proef: korrellaag uit — uitgesloten, hij was niet de oorzaak) */

/* PROEF (2 september, laat): haarlijnen uit op het aanraakscherm.
   De witte streepjes zitten steeds op de hoogte van de nu-lijn — eerst toen
   die gestippeld was, daarna toen hij een verloop van één pixel hoog kreeg.
   Er staat op die plek aantoonbaar géén element dat wit tekent, dus de
   verdenking valt op hoe dit paneel een lijn van één pixel rastert. Zelfde
   scherm dat de turquoise kaart met zichtbare banden tekent. Uit zetten is de
   goedkoopste manier om dat te bewijzen; de lijn is puur decoratief. */
/* (proef: haarlijn uit — hoort bij de uitsluiting hieronder) */

/* ==========================================================================
   Rustig tekenen op het wandpaneel
   ==========================================================================
   Soufian ziet op het Android-paneel witte streepjes die snel heen en weer
   schieten en zich vermenigvuldigen. Op een laptop gebeurt dat niet, en op de
   plek waar ze staan ligt aantoonbaar géén element — gemeten met een scan die
   ook lagen zonder aanrakingen en schijnelementen meeneemt. Het wordt dus
   over de pagina heen gerasterd, niet erin getekend.

   Wat dit paneel wél zichtbaar slecht doet, staat op zijn eigen foto: de
   turquoise kaart zit vol banden en ruis waar hij op een laptop glad is. Dat
   wijst op de samensteller: verlopen, schaduwen en filters op afgeronde,
   telkens opnieuw getekende vlakken.

   Dit blok haalt die hele klasse in één keer weg op aanraakschermen. Het is
   een botte bijl en met opzet: eerst moet het ophouden, daarna zoeken we uit
   welk van deze dingen het precies was. Op een donker thema kost het bijna
   niets — de schaduwen waren toch nauwelijks te zien.
   ========================================================================== */
/* ==========================================================================
   Geen slagschaduwen op het wandpaneel
   ==========================================================================
   Uitgezocht op 2 september, na vijf verkeerde vermoedens van mijn kant. Op
   het Android-paneel schoten er witte streepjes over het scherm die zich
   vermenigvuldigden; op een laptop gebeurde dat niet. Op de plek waar ze
   stonden lag aantoonbaar géén element — gemeten met een scan die álle
   elementen langsliep op kadervlak, dus óók lagen met pointer-events:none en
   schijnelementen, de twee blinde vlekken van elementsFromPoint en van een
   filter op achtergrondkleur.

   Door uitsluiting bleek het de **box-shadow** te zijn. Verlopen, filters,
   de haarlijn bij "Nu" en de korrellaag zijn allemaal apart vrijgepleit.
   Tientallen zachte schaduwen op afgeronde vlakken die elke minuut opnieuw
   getekend worden, is kennelijk te veel voor de samensteller van deze
   WebView; hij laat er stukjes van staan.

   Kost bijna niets: op een donker thema doen die schaduwen weinig, en de
   kaarten hebben al een eigen randlijn. De ring om de gezichtjes in de grote
   kaart wás een schaduw zonder vervaging en komt terug als `outline` —
   zelfde beeld, ander tekenpad.

   Wie hier ooit weer een schaduw neerzet: doe het niet voor het paneel.
   ========================================================================== */
@media (hover: none) {
  .app *, .app { box-shadow:none !important; }
  .hero .wie .f { outline:calc(3 * var(--sc)) solid rgba(7,11,20,.22); }
}

/* ==========================================================================
   De uitklapvensters (paneel-weergaven): gezinslid, dag, klusjes, lijst, kat
   ==========================================================================
   Herbouwd op 3 september. Ze waren functioneel maar kaal: kleine letters,
   een dun kleurstreepje bovenaan, tabelregels. Van een meter afstand op een
   32"-scherm is dat onleesbaar én lelijk. Nu: een kopband in de kleur van
   wie het is, met een grote foto en de naam in de letter van het paneel;
   daaronder ruime rijen met één ding groot per regel.

   Twee dingen die je moet weten voordat je hier iets aanraakt:
   - Het venster staat BUITEN .app, dus --sc van daar geldt hier niet. Daarom
     zetten we hem hier zelf. Zonder deze regel is elke calc(N * var(--sc))
     stilletjes ongeldig en valt alles terug op de kleinste letter — precies
     wat er met Leyla's venster gebeurde.
   - Geen box-shadow: zie "Geen slagschaduwen op het wandpaneel".
   ========================================================================== */
.sheet{ --sc:calc(min(100vw, 1080px) / 1080); }
.sheet-card.recept{
  width:min(1000px, 94vw);
  border:0;
  border-radius:calc(34 * var(--sc));
  background:var(--panel);
  overflow:hidden;
}
.sheet-card.recept .sheet-bar{display:none}      /* de kopband neemt het over */

/* ---- Kopband ---- */
.pl-kop{
  display:flex;align-items:center;gap:calc(26 * var(--sc));
  padding:calc(30 * var(--sc)) calc(36 * var(--sc)) calc(26 * var(--sc));
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--kl, var(--accent)) 26%, var(--panel)),
    color-mix(in srgb, var(--kl, var(--accent)) 10%, var(--panel)));
  border-bottom:1px solid color-mix(in srgb, var(--kl, var(--accent)) 25%, var(--line));
}
.pl-foto{
  width:calc(112 * var(--sc));height:calc(112 * var(--sc));border-radius:50%;flex:none;
  display:grid;place-items:center;overflow:hidden;
  background:color-mix(in srgb, var(--kl, var(--accent)) 30%, var(--panel));
  outline:calc(4 * var(--sc)) solid var(--kl, var(--accent));
  outline-offset:calc(3 * var(--sc));
  font-size:calc(52 * var(--sc));font-weight:800;color:var(--text);
}
.pl-foto img{width:100%;height:100%;object-fit:cover}
/* Aantikbaar wanneer er stories van deze persoon zijn (zie plKop()) — een
   klein badge in de hoek zegt dat, in plaats van de foto zelf iets te laten
   doen dat verrast. Werkt voor gezien én ongezien: dit is bewust de plek
   waar "nog eens bekijken" hoort, niet de melding dat er iets nieuws is. */
.pl-foto-story{cursor:pointer;position:relative}
.pl-foto-story::after{
  content:'▶';position:absolute;right:calc(-2 * var(--sc));bottom:calc(-2 * var(--sc));
  width:calc(34 * var(--sc));height:calc(34 * var(--sc));border-radius:50%;
  background:var(--kl, var(--accent));color:#fff;
  display:grid;place-items:center;font-size:calc(12 * var(--sc));
  outline:calc(3 * var(--sc)) solid var(--panel);
}
.pl-foto-story:active{transform:scale(.96)}
.pl-kopt{min-width:0;flex:1}
.sheet-card.recept .pl-kopt h2{
  margin:0;font-family:var(--font-display,'Space Grotesk'),sans-serif;
  font-size:calc(50 * var(--sc));font-weight:800;letter-spacing:-.02em;line-height:1.05;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pl-sub{
  margin:calc(8 * var(--sc)) 0 0;font-size:calc(21 * var(--sc));font-weight:700;
  color:color-mix(in srgb, var(--kl, var(--accent)) 70%, var(--text));
}
.pl-badge{
  flex:none;text-align:center;
  background:var(--kl, var(--accent));color:var(--bg);
  border-radius:calc(22 * var(--sc));padding:calc(12 * var(--sc)) calc(22 * var(--sc));
  font-family:var(--font-display,'Space Grotesk'),sans-serif;font-weight:800;
  font-size:calc(40 * var(--sc));line-height:1;
}
.pl-badge small{display:block;font-size:calc(14 * var(--sc));font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;opacity:.8;margin-top:calc(4 * var(--sc))}

/* ---- Lijf ---- */
.sheet-card.recept .rc-scroll{padding:calc(14 * var(--sc)) calc(24 * var(--sc)) calc(8 * var(--sc))}
.pl-lijst{display:flex;flex-direction:column;gap:calc(10 * var(--sc))}
.pl-kopje{font-family:var(--font-display,'Space Grotesk'),sans-serif;
  font-size:calc(15 * var(--sc));font-weight:800;color:var(--dim);
  text-transform:uppercase;letter-spacing:.14em;margin:calc(18 * var(--sc)) calc(8 * var(--sc)) calc(4 * var(--sc))}
.sheet-card.recept .sheet-desc{margin:calc(24 * var(--sc)) calc(12 * var(--sc));
  font-size:calc(24 * var(--sc));color:var(--muted);font-weight:600}

/* Een afspraakregel: tijd links als blok, titel groot, plek eronder. */
.pl-rij{
  display:flex;align-items:center;gap:calc(20 * var(--sc));
  padding:calc(14 * var(--sc)) calc(16 * var(--sc));
  background:var(--chip);border-radius:calc(20 * var(--sc));border:0;min-height:0;
}
.pl-wanneer{
  flex:none;width:calc(150 * var(--sc));text-align:center;
  background:var(--panel);border-radius:calc(14 * var(--sc));
  padding:calc(10 * var(--sc)) calc(8 * var(--sc));
  font-variant-numeric:tabular-nums;
}
.pl-wanneer b{display:block;font-family:var(--font-display,'Space Grotesk'),sans-serif;
  font-size:calc(28 * var(--sc));font-weight:800;color:var(--accent);line-height:1}
.pl-wanneer span{display:block;font-size:calc(14 * var(--sc));font-weight:800;color:var(--dim);
  text-transform:uppercase;letter-spacing:.1em;margin-top:calc(5 * var(--sc))}
.pl-tekst{flex:1;min-width:0}
.pl-titel{display:block;font-size:calc(25 * var(--sc));font-weight:700;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:none;max-width:none}
.pl-waar{display:block;font-size:calc(18 * var(--sc));color:var(--dim);font-weight:600;
  margin-top:calc(3 * var(--sc));max-width:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-rij .pl-gezicht{flex:none;width:calc(48 * var(--sc));height:calc(48 * var(--sc));margin:0}
.pl-gezicht{display:inline-grid;place-items:center;border-radius:50%;overflow:hidden;
  background:color-mix(in srgb, var(--kl) 25%, transparent);font-weight:800}
.pl-gezicht img{width:100%;height:100%;object-fit:cover}

/* Een klusje of lijstregel: groot vinkvak, icoon, tekst, punten. */
.pl-klus{
  display:flex;align-items:center;gap:calc(18 * var(--sc));width:100%;text-align:left;
  background:var(--chip);border:0;border-radius:calc(20 * var(--sc));
  padding:calc(14 * var(--sc)) calc(18 * var(--sc));min-height:calc(84 * var(--sc));
  cursor:pointer;color:var(--text);font:inherit;
}
.pl-klus:active{background:color-mix(in srgb, var(--kl, var(--accent)) 18%, var(--chip))}
.pl-klus .box{
  width:calc(48 * var(--sc));height:calc(48 * var(--sc));border-radius:50%;
  border:calc(3 * var(--sc)) solid color-mix(in srgb, var(--kl, var(--accent)) 55%, var(--line));
  flex:none;display:grid;place-items:center;font-weight:800;font-size:calc(26 * var(--sc));
  color:var(--bg);background:transparent;
}
.pl-klus.done .box{background:var(--ok);border-color:var(--ok)}
.pl-klus .pl-icoon{flex:none;font-size:calc(30 * var(--sc));line-height:1;width:calc(44 * var(--sc));
  text-align:center}
.pl-klus .pl-titel{flex:1}
.pl-ptn{flex:none;font-family:var(--font-display,'Space Grotesk'),sans-serif;
  font-weight:800;font-size:calc(22 * var(--sc));color:var(--ok);
  background:color-mix(in srgb, var(--ok) 14%, transparent);
  border-radius:999px;padding:calc(6 * var(--sc)) calc(14 * var(--sc))}
.pl-klus.done{opacity:.55}
.pl-klus.done .pl-titel{text-decoration:line-through}
.pl-klus .pl-waar{flex:none;max-width:30%}

/* ---- Terugknop: een echte knop, niet een grijze balk ---- */
.sheet-card.recept .btn-big{
  margin:calc(14 * var(--sc)) calc(24 * var(--sc)) calc(18 * var(--sc));
  width:calc(100% - 48 * var(--sc));min-height:calc(76 * var(--sc));
  border-radius:999px;font-family:var(--font-display,'Space Grotesk'),sans-serif;
  font-size:calc(24 * var(--sc));font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  background:var(--text);color:var(--bg);border:0;
}

/* ---- Leyla: grote getallen, dan regels met een icoon in een rondje ---- */
.dierkerns{display:flex;gap:calc(14 * var(--sc));margin:0 0 calc(14 * var(--sc))}
.dierkern{flex:1 1 0;background:var(--chip);border-radius:calc(22 * var(--sc));
  padding:calc(20 * var(--sc)) calc(22 * var(--sc));min-width:0;text-align:center}
.dierkern b{display:block;font-family:var(--font-display,'Space Grotesk'),sans-serif;
  font-size:calc(54 * var(--sc));font-weight:800;line-height:1;letter-spacing:-.02em;
  color:var(--kl, var(--accent))}
.dierkern b em{font-style:normal;font-size:calc(20 * var(--sc));font-weight:800;
  opacity:.6;margin-left:calc(5 * var(--sc));color:var(--text)}
.dierkern span{display:block;margin-top:calc(10 * var(--sc));font-size:calc(16 * var(--sc));
  font-weight:700;color:var(--dim);text-transform:uppercase;letter-spacing:.08em;line-height:1.25}
.dierregels{display:flex;flex-direction:column;gap:calc(10 * var(--sc));margin:0}
.dierregel{display:flex;gap:calc(18 * var(--sc));align-items:center;
  background:var(--chip);border-radius:calc(20 * var(--sc));
  padding:calc(14 * var(--sc)) calc(18 * var(--sc));font-size:calc(23 * var(--sc));font-weight:600}
.dierregel span:first-child{flex:none;width:calc(54 * var(--sc));height:calc(54 * var(--sc));
  border-radius:50%;display:grid;place-items:center;font-size:calc(26 * var(--sc));
  background:color-mix(in srgb, var(--kl, var(--accent)) 22%, var(--panel))}
.dierregel.let span:first-child{background:color-mix(in srgb, var(--warn,#e8b45a) 30%, var(--panel))}
.pl-wanneer.heeldag b{font-size:calc(20 * var(--sc));line-height:1.3;color:var(--muted)}

/* ==========================================================================
   Stories
   ==========================================================================
   De ring om een gezicht in de rij naast "Vandaag": in de kleur van de
   persoon, met een smalle lichte spleet zodat hij loskomt van de foto.
   Gezien = ring blijft, maar zacht. De rij zelf komt uit app.js. */
/* De ring is een verloop zoals iedereen hem kent (geel → oranje → roze →
   paars → blauw), niet de kleur van de persoon: die kleur zit al in de rand
   die iedereen heeft, en het verloop zegt in één oogopslag "hier is iets
   nieuws". Een box-shadow kan geen verloop, dus de knop groeit iets en het
   verloop is zijn achtergrond, met een schijf in de paneelkleur ervoor die
   alleen de buitenste rand vrijlaat. Groeien met een negatieve marge, zodat
   het gezicht zelf even groot blijft en de rij niet verspringt. */
@property --hoek{syntax:'<angle>';inherits:false;initial-value:0deg}
.wieknop.story{
  width:calc(62 * var(--sc));height:calc(62 * var(--sc));margin:calc(-5 * var(--sc));padding:calc(5.5 * var(--sc));
  box-shadow:none;
  background:
    radial-gradient(circle closest-side, color-mix(in srgb, var(--kl) 20%, var(--panel, var(--bg))) 87%, transparent calc(87% + 1px)),
    conic-gradient(from var(--hoek), #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75);
  animation:story-draai 6s linear infinite}
.wieknop.story img{border-radius:50%}
@keyframes story-draai{to{--hoek:360deg}}
/* Gezien: het verloop wordt grijs en staat stil. */
.wieknop.story.gezien{animation:none;
  background:
    radial-gradient(circle closest-side, color-mix(in srgb, var(--kl) 20%, var(--panel, var(--bg))) 87%, transparent calc(87% + 1px)),
    conic-gradient(color-mix(in srgb, var(--dim) 70%, var(--line)), color-mix(in srgb, var(--dim) 70%, var(--line)))}

/* Het venster: schermvullend, donker, het beeld in het midden. Ligt boven
   `.sheet` (z-index 50): sinds de profielfoto in iemands eigen venster ook
   stories mag openen (zie plKop()/StoriesToon in app.js), moet dit venster
   daar overheen kunnen — anders komt het onder de sheet-achtergrond te
   liggen en zie je niets. */
.stories{
  --sc:calc(min(100vw, 1080px) / 1080);
  position:fixed;inset:0;z-index:55;background:#0b0c10;color:#f3efe4;
  display:flex;flex-direction:column;overflow:hidden;cursor:pointer;
  animation:stories-in .25s ease both}
.stories[hidden]{display:none}
@keyframes stories-in{from{opacity:0;transform:scale(1.02)}to{opacity:1;transform:none}}

.st-balken{position:absolute;left:0;right:0;top:0;z-index:3;display:flex;
  gap:calc(6 * var(--sc));padding:calc(16 * var(--sc)) calc(18 * var(--sc)) 0}
.st-balken i{flex:1;height:calc(5 * var(--sc));border-radius:calc(3 * var(--sc));
  background:rgba(255,255,255,.28);overflow:hidden;position:relative}
.st-balken i::after{content:'';position:absolute;inset:0;background:#fff;transform-origin:left;transform:scaleX(0)}
.st-balken i.af::after{transform:scaleX(1)}
.st-balken i.nu::after{animation:st-loop var(--duur, 6000ms) linear both}
@keyframes st-loop{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.st-kop{position:absolute;left:0;right:0;top:calc(34 * var(--sc));z-index:3;
  display:flex;align-items:center;gap:calc(14 * var(--sc));padding:0 calc(18 * var(--sc));
  cursor:default}
.st-gezicht{width:calc(64 * var(--sc));height:calc(64 * var(--sc));border-radius:50%;overflow:hidden;
  display:grid;place-items:center;font-size:calc(30 * var(--sc));flex:none;
  background:color-mix(in srgb, var(--kl) 30%, #222);box-shadow:0 0 0 calc(3 * var(--sc)) var(--kl)}
.st-gezicht img{width:100%;height:100%;object-fit:cover}
.st-naam{font-family:var(--font-display);font-weight:700;font-size:calc(30 * var(--sc));
  text-shadow:0 1px 8px rgba(0,0,0,.7)}
.st-wanneer{font-size:calc(20 * var(--sc));opacity:.75;font-weight:600;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.st-sluit{margin-left:auto;width:calc(64 * var(--sc));height:calc(64 * var(--sc));border-radius:50%;border:0;
  background:rgba(255,255,255,.14);color:#fff;font-size:calc(34 * var(--sc));line-height:1;cursor:pointer;
  display:grid;place-items:center}

.st-beeld{position:absolute;inset:0;display:grid;place-items:center;background:#000}
/* Onder een liggende foto een uitvergrote, vervaagde kopie: dan is het
   scherm gevuld en toch is de foto zelf compleet en scherp te zien. Zelfde
   truc als het vakantiealbum. */
.st-waas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(40px) brightness(.55);
  transform:scale(1.15)}
.st-media{position:relative;z-index:1;max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain}
.st-fout{position:relative;z-index:2;font-weight:700;font-size:calc(26 * var(--sc));opacity:.85;text-align:center;padding:0 10%}
.st-geluid{position:absolute;left:50%;bottom:calc(40 * var(--sc));transform:translateX(-50%);z-index:3;
  padding:calc(10 * var(--sc)) calc(18 * var(--sc));border-radius:999px;background:rgba(0,0,0,.6);
  font-size:calc(20 * var(--sc));font-weight:700}
.st-geluid[hidden]{display:none}
.katrij.katopen .kat-txt b{color:var(--accent)}

/* ---- Een echte aan/uit-schakelaar in een dierregel (zelf schoonmaken) ----
   Zelfde vorm als de schakelaar in de telefoon-app (.kf-schakel), hier
   geschaald met --sc omdat dit venster op het wandscherm leeft. */
.dierregel .dier-schakel{margin-left:auto;flex:none;width:calc(56 * var(--sc));
  height:calc(32 * var(--sc));border-radius:999px;border:0;background:var(--line);
  position:relative;transition:background .2s;cursor:pointer}
.dierregel .dier-schakel i{position:absolute;top:calc(3 * var(--sc));left:calc(3 * var(--sc));
  width:calc(26 * var(--sc));height:calc(26 * var(--sc));border-radius:50%;background:#fff;
  transition:left .2s}
.dierregel .dier-schakel.aan{background:var(--ok,#3f9f6f)}
.dierregel .dier-schakel.aan i{left:calc(27 * var(--sc))}
.dierregel .dier-schakel:disabled{opacity:.6}
.dierregel .dier-schakel.fout{animation:dier-schakel-fout .4s}
@keyframes dier-schakel-fout{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(calc(-4 * var(--sc)))}
  75%{transform:translateX(calc(4 * var(--sc)))}
}

/* ---- Belangrijke meldingen: één balk bovenaan, vóór de dagstroom ----
   Dezelfde gedachte als de kattenkaart: leeg is onzichtbaar, en pas als er
   iets te melden is verschijnt hij. Compacte chips — één regel tekst in
   plaats van twee, dus ze kosten weinig hoogte. Voor het opvallen is dit nu
   dezelfde diagonale gradiënt als `.hero` (zie daar), met wit tekst in
   plaats van een vlakke tint: dat is al de "kijk mij aan"-behandeling van
   de app, dus geen nieuw idioom nodig — en per melding een eigen `--kl`
   (net als `.hero`/`.wieknop`/etc.), zodat weer (`--danger`, rood, alarm)
   zich meteen onderscheidt van kattenbak/grind (`--warn`, goud, "moet
   gebeuren maar is geen noodgeval"). Geen box-shadow (zie de aantekening
   bij `@media (hover:none)` verderop): de gradiënt zelf zorgt voor diepte.
   Tik opent het venster waar de melding bij hoort (bij Leyla, voor de bak
   en het grind); het weerbericht heeft geen eigen venster en is dus geen
   knop. */
/* Ronde vier: eerst boven de hele kop, over de volle breedte — dat bleek
   te veel gewicht voor een melding die er niet altijd is. Terug naar
   direct onder de klok (zie index.html), links uitgelijnd. De echte fout
   zat 'm niet in "onder de klok" maar hierin: deze regel had géén
   --rand-marge terwijl .kop en .stage die wel hebben, dus de pillen
   stonden letterlijk verder naar links dan al het andere op het scherm —
   dát was het "geplakt" gevoel, niet de plek zelf. Nu wel dezelfde --rand
   als de rest, zodat de pillen in lijn staan met klok, weer en de
   profielfoto's eronder. .meldingenbalk[hidden] is nodig omdat een eigen
   display (hier: flex) van hogere prioriteit is dan het kale
   [hidden]-attribuut — zie de valkuil in hoofdstuk 13 van CLAUDE.md. */
.meldingenbalk{display:flex;flex-wrap:wrap;gap:calc(10 * var(--sc));
  padding:0 var(--rand);margin:0 0 calc(14 * var(--sc))}
.meldingenbalk[hidden]{display:none}
.meldpil{display:flex;align-items:center;gap:calc(9 * var(--sc));max-width:calc(440 * var(--sc));
  min-width:0;background:linear-gradient(135deg, var(--kl), color-mix(in srgb, var(--kl) 55%, #070B14));
  border-radius:999px;
  padding:calc(7 * var(--sc)) calc(18 * var(--sc)) calc(7 * var(--sc)) calc(7 * var(--sc));
  font:inherit;color:#fff;text-align:left;cursor:default}
button.meldpil{cursor:pointer}
button.meldpil:active{transform:scale(.96)}
.meld-ic{flex:none;width:calc(30 * var(--sc));height:calc(30 * var(--sc));border-radius:50%;
  background:rgba(255,255,255,.25);display:grid;place-items:center;
  font-size:calc(16 * var(--sc));line-height:1}
.meld-txt{display:flex;align-items:baseline;gap:calc(6 * var(--sc));min-width:0}
.meld-txt b{flex:none;font-family:var(--font-display,'Space Grotesk'),sans-serif;
  font-size:calc(16 * var(--sc));font-weight:700;white-space:nowrap}
.meld-txt em{flex:1 1 auto;min-width:0;font-style:normal;font-weight:600;
  font-size:calc(14 * var(--sc));opacity:.82;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}