/* ══════════════════════════════════════════════════════════════
   NORDRIFT v8.1 — Design system
   Spec: docs/design/v8.1/DESIGN-v8.1.md · Bron: styles-v8.1.css

   Twee tokenblokken, dezelfde namen: `:root` is licht, `[data-theme="dark"]`
   herbindt. Onder het tokenblok staat geen enkele kleurwaarde — dat is wat
   het donkere thema mogelijk maakt zonder een tweede stylesheet, en wat
   tests/unit/test_css_tokens.py bewaakt.

   De namen zijn die van de repo: elke regel hieronder consumeert ze en het
   tokenblok mag er geen kwijtraken. De wáárden komen letterlijk uit het
   tokenblok van styles-v8.1.css. Waar het prototype een naam toevoegt
   (--drift, --brand, --ink-accent-rgb, --shadow-frame, de severity-paren)
   staat die erbij; waar de repo een naam heeft die het prototype niet kent
   (--app-max, --desk-pad, --safe-*) blijft die staan, met de
   nieuwe palet-waarde.

   De letterfamilies worden geladen door de <link> in base.html; een
   fontwissel raakt die regel en --display/--sans hieronder.
   ══════════════════════════════════════════════════════════════ */

/* ═══ TOKENS · LICHT (basis) ══════════════════════════════════ */
:root{
  /* Type */
  --display:'Manrope','Schibsted Grotesk',system-ui,sans-serif;
  --sans:'Schibsted Grotesk',system-ui,-apple-system,sans-serif;

  /* Neutrale basis · Snow · Frost · Ice · Ink · Muted Slate */
  --bg:#FAFBFC;
  --bg-2:#F4F7F8;
  --text:#101820;
  --text-2:#71818A;
  --text-3:#93A1A8;
  --line:#E1E9EC;
  --line-inset:rgba(16,24,32,.07);
  --desk:#E4EBEE;

  /* Palet · Ink · Deep Navy · Drift Blue · Ice */
  --fill:#172A3A;
  --on-fill:#FAFBFC;
  --ink-accent:#101820;
  /* Het prototype zet dit triplet niet op --ink-accent maar op de focusring-
     kleur; letterlijk overgenomen, zie docs/_prd-design-v8/slice-1.md. */
  --ink-accent-rgb:57,123,145;
  --drift:#789EAB;
  --brand:#172A3A;
  --soft:#F4F7F8;
  --soft-2:#E8F1F4;
  --hi:#E8F1F4;
  --on-hi:#101820;
  --signal:#172A3A;

  /* Glas & overlay */
  --glass:rgba(250,251,252,.90);
  --glass-nav:rgba(250,251,252,.92);
  --blur:blur(14px);
  --ovl-btn:rgba(16,24,32,.44);
  --ovl-btn-hov:rgba(16,24,32,.66);
  --ovl-btn-on:rgba(250,251,252,.92);
  --ovl-btn-on-ink:#101820;
  --ovl-ink:#FFFFFF;

  /* Scrim (kop-in-beeld) — getuned op worst case "Fel" */
  --scrim-rgb:16,24,32;
  --scrim-a1:.92; --scrim-a2:.80; --scrim-a3:.46; --scrim-a4:.10;
  --scrim-shadow:0 1px 12px rgba(16,24,32,.45);
  --top-fade:rgba(250,251,252,.82);

  /* Controls */
  --track-off:#D3DDE1;
  --knob:#FFFFFF;
  --focus:0 0 0 3px rgba(57,123,145,.24);
  --shadow-menu:0 14px 38px rgba(16,24,32,.14);
  --shadow-frame:0 12px 34px rgba(16,24,32,.09);
  --shadow-mark:0 2px 10px rgba(16,24,32,.26);
  --shadow-knob:0 1px 3px rgba(16,24,32,.18);
  /* Vaste lichte plaat onder merken met een eigen lichte achtergrond;
     blijft licht in beide thema's, want het logo eist het. */
  --brand-plate:#FFFFFF;

  /* Adminpaneel · severity (§15.3). Neutraal krijgt bewust geen token:
     grijs is de afwezigheid van een oordeel en gebruikt --track-off/--soft. */
  --ok:#3A8A5F;   --ok-soft:#E3F0E8;
  --warn:#A97A1C; --warn-soft:#F6EDD8;
  --bad:#BE4B3C;  --bad-soft:#F8E7E3;

  /* Geometrie & ruimte */
  --r:14px;         /* alle beelden, kaarten, platen, velden */
  --r-s:10px;       /* uitsluitend elementen < 56px (thumbs, chips) */
  --pill:999px;
  --gutter:20px;
  --app-max:520px;
  /* Desktop (≥1000px). Sinds v8.1 (§17.2) is er nog één breedte: de leeskolom
     die élke container krijgt. --desk-wide (1200px, het oude Vandaag-raster)
     is vervallen met `.n7.wide`. 680 inclusief padding, dus 640 tekst — exact
     de kolom uit styles-web-v8.1.css. */
  --desk-col:680px;
  --desk-pad:20px;

  /* Merkassets — vervang het bestand, alles volgt */
  --logo-lockup:url('/static/img/brand/nordrift_horizontal_light.png');
  --logo-ratio:5.883;
  /* Het vierkante geplate merkteken. Het X-blok bindt --logo-icon aan
     nordrift_logo.png, maar dat bestand is 184x79 en zou in een vierkant
     vak met `contain` letterboxen; §14.5 en --logo-icon-ratio:1 vragen
     beide een vierkant. Zie docs/_prd-design-v8/slice-1.md. */
  --logo-icon:url('/static/img/brand/nordrift_app_icon.png');
  --logo-icon-ratio:1;

  /* Veilige zones */
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bot:env(safe-area-inset-bottom,0px);
}

/* ═══ TOKENS · DONKER ═════════════════════════════════════════ */
[data-theme="dark"]{
  --bg:#101820;
  --bg-2:#172A3A;
  --text:#FAFBFC;
  --text-2:#A6B6BE;
  --text-3:#84949C;
  --line:#263B4A;
  --line-inset:rgba(250,251,252,.10);
  --desk:#080D12;

  --fill:#E8F1F4;
  --on-fill:#101820;
  --ink-accent:#789EAB;
  --ink-accent-rgb:120,158,171;
  --drift:#789EAB;
  --brand:#172A3A;
  --soft:#172A3A;
  --soft-2:#1D3B4C;
  --hi:#E8F1F4;
  --on-hi:#101820;
  --signal:#FAFBFC;

  --glass:rgba(16,24,32,.88);
  --glass-nav:rgba(16,24,32,.90);
  --ovl-btn:rgba(8,13,18,.56);
  --ovl-btn-hov:rgba(8,13,18,.74);
  --ovl-btn-on:rgba(232,241,244,.94);
  --ovl-btn-on-ink:#101820;

  --scrim-a1:.94; --scrim-a2:.84; --scrim-a3:.52; --scrim-a4:.16;
  --scrim-shadow:0 1px 12px rgba(4,8,12,.55);
  --top-fade:rgba(16,24,32,.80);

  --track-off:#2B4453;
  --knob:#FAFBFC;
  --focus:0 0 0 3px rgba(120,158,171,.32);
  --shadow-menu:0 14px 38px rgba(0,0,0,.55);
  --shadow-frame:0 12px 34px rgba(0,0,0,.45);
  --shadow-mark:0 2px 10px rgba(0,0,0,.45);
  --shadow-knob:0 1px 3px rgba(0,0,0,.5);

  --ok:#7FC49E;   --ok-soft:#16301F;
  --warn:#D9AC55; --warn-soft:#332A12;
  --bad:#E28B7C;  --bad-soft:#3A1D17;

  --logo-lockup:url('/static/img/brand/nordrift_horizontal_dark.png');
  --logo-icon:url('/static/img/brand/nordrift_app_icon.png');
}

/* ──────────────────────────────────────────────────────────────
   Geen kleurwaarde onder deze regel. Wie er één nodig heeft,
   heeft een token nodig — anders bestaat hij maar in één thema.
   ────────────────────────────────────────────────────────────── */

*{box-sizing:border-box;-webkit-font-smoothing:antialiased}
body{margin:0;font-family:var(--sans);background:var(--desk);color:var(--text);min-height:100vh}
a{color:var(--ink-accent);text-decoration:none}
button{font-family:inherit;color:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:none;box-shadow:var(--focus)}
img{max-width:100%}
.tnum{font-variant-numeric:tabular-nums}

/* ── App-root ────────────────────────────────────────────── */
.n7{position:relative;max-width:var(--app-max);margin:0 auto;background:var(--bg);min-height:100vh;padding-bottom:calc(71px + var(--safe-bot))}
.n7.nonav{padding-bottom:40px}
.body{padding:0 var(--gutter)}
.hidden{display:none}

/* Typografie & regelafbreking (DESIGN-v7.3 §3). `overflow-wrap` staat niet
   in §3 en is toegevoegd op grond van probe 0017: zonder die eigenschap
   steekt `vaargeulverdiepingswerkzaamheden` 55px buiten zijn kaart op 390px,
   want `hyphens:manual` breekt alleen op een zacht afbreekstreepje en dat
   staat niet in een kop die uit de pipeline komt. `hyphens:auto` hieronder
   is woordenboekafhankelijk: in een engine zonder nl-woordenboek doet hij
   niets, gemeten en gewenst — hij degradeert, hij breekt niet. */
.n7 h1,.n7 h2,.n7 h3,.n7 h4,.n7 h5{font-family:var(--display);margin:0;font-weight:600;letter-spacing:-0.01em;text-wrap:balance;hyphens:manual;overflow-wrap:break-word}
.n7 p,.n7 .k{text-wrap:pretty;hyphens:auto;-webkit-hyphens:auto}

/* ── Merkassets ──────────────────────────────────────────── */
.logo-lockup{display:block;background:var(--logo-lockup) center/contain no-repeat}
.logo-icon{display:block;background:var(--logo-icon) center/contain no-repeat;flex:0 0 auto}

/* ── Kop: lockup links · zoeken rechts ───────────────────── */
/* Het omhulsel plakt, niet de kop: `.hdr` draagt een backdrop-filter en zou
   daarmee het bevattende blok worden van de `position:fixed` onderbalk. */
.topbar{position:sticky;top:0;z-index:30}
.hdr{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(14px + var(--safe-top)) var(--gutter) 10px;background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.hdr-mark{display:flex;align-items:center}
.hdr-right{display:flex;align-items:center;gap:8px}
.hdr-act{width:40px;height:40px;border:0;border-radius:var(--pill);background:var(--soft);color:var(--text);display:grid;place-items:center;cursor:pointer;transition:background .15s}
.hdr-act:hover{background:var(--hi);color:var(--on-hi)}

/* ── Paginakop — één patroon (DESIGN-v8.1 §17.1) ──────────────
   Vandaag, Rapporten en Profiel openen identiek: titel 28/700 op vaste
   positie, daaronder waar relevant de sectorpills. Op Vandaag staat er
   tussen titel en pills de stille datumregel met chevron — dat is de
   dagkiezer.

   Vervangt `.daypick` (v7.3) én `.sectitle` (v8.0). De sectorwissel loopt
   weer via de pills, dus het gecombineerde sector-/dagmenu is vervallen;
   `.day-menu` hieronder draagt nu weer alleen dagen.

   Geen z-index hier. Boven de topbar (30) schuift de titel bij het scrollen
   óver het glas in plaats van eronder door; `position:relative` is genoeg,
   want het menu draagt zijn eigen 40 en de klikvanger zit op 29. */
.pagehead{position:relative;padding:2px var(--gutter) 0}
.pagehead h1{font-family:var(--display);font-size:28px;line-height:1.08;font-weight:700;letter-spacing:-0.026em;color:var(--text)}
.pagehead .ph-day{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:7px 0 0;font-size:12.5px;font-weight:500;color:var(--text-3);cursor:pointer;border-radius:var(--r-s)}
.pagehead .ph-day svg{opacity:.7;transition:transform .18s;display:block}
/* De open/sluit-JS in base.html zet alleen `aria-expanded`; het prototype
   gebruikt een `.on`-klasse die hier geen equivalent heeft. */
.pagehead .ph-day[aria-expanded="true"] svg{transform:rotate(180deg)}
.pagehead .ph-day:hover{color:var(--ink-accent)}
/* Zonder pills eronder (Profiel) draagt de kop zelf de onderruimte. De macro
   zet de klasse; `:has()` zou hetzelfde doen maar maakt de regel afhankelijk
   van markup die een template later verplaatst. */
.pagehead.solo{padding-bottom:14px}
.day-menu{position:absolute;top:calc(100% + 4px);left:var(--gutter);z-index:40;min-width:232px;background:var(--bg);border-radius:var(--r);padding:6px;box-shadow:0 0 0 1px var(--line),var(--shadow-menu)}
.day-opt{display:flex;align-items:center;gap:10px;width:100%;border-radius:var(--r-s);padding:10px 12px;text-align:left}
.day-opt .d{flex:1;font-size:14px;font-weight:600;color:var(--text)}
.day-opt .d small{display:block;font-size:11.5px;font-weight:500;color:var(--text-3);padding-top:2px}
.day-opt .tag{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-accent);background:var(--soft-2);border-radius:var(--pill);padding:3px 8px}
.day-opt:hover{background:var(--soft)}
.day-opt.on{background:var(--hi)}
.day-opt.on .d,.day-opt.on .d small{color:var(--on-hi)}
.day-scrim{position:fixed;inset:0;z-index:29}

/* ── Sectorpills — zacht, horizontaal scrollend ──────────── */
.pills{display:flex;gap:8px;padding:10px var(--gutter) 6px;overflow-x:auto;scrollbar-width:none}
.pills::-webkit-scrollbar{display:none}
/* §17.1: ruime marge tussen kop en pills, en de pills dragen de onderruimte. */
.pagehead+.pills{padding-top:14px;padding-bottom:10px}
.pill{flex:0 0 auto;border:1px solid var(--line);background:var(--bg);color:var(--text-2);font-family:var(--sans);font-size:14px;font-weight:600;padding:9px 16px;border-radius:var(--pill);cursor:pointer;transition:all .15s;white-space:nowrap}
.pill:hover{border-color:var(--ink-accent);color:var(--ink-accent)}
.pill.on{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
.packone{padding:10px var(--gutter) 4px;font-size:13.5px;font-weight:600;color:var(--text-2)}

/* D4 — zondagsbanner: informatief, kalm, --soft, geen signaalkleur */
.day-banner{display:flex;gap:10px;align-items:flex-start;background:var(--soft);border-radius:var(--r);padding:13px 14px;margin:2px 0 16px;font-size:13.5px;line-height:1.5;color:var(--text-2)}
.day-banner svg{flex:0 0 auto;color:var(--text-3);margin-top:1px}

/* ── Beeld · scrim · bronmerk ────────────────────────────── */
.ph{position:relative;display:block;width:100%;overflow:hidden;border-radius:var(--r);background:var(--soft)}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph.stand{background:var(--soft-2);display:grid;place-items:center;color:var(--ink-accent)}
/* De glyphplaat staat altijd in de DOM en is verborgen zolang er een afbeelding
   naast staat; faalt die, dan zet het script in base.html `stand` aan en haalt
   het de <img> weg. Een klassewissel en geen gelaagdheid: een persfoto met
   alfakanaal zou de glyph anders overal doorheen laten schijnen. */
.ph:not(.stand)>svg,.art-hero:not(.stand)>svg{display:none}
.scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(var(--scrim-rgb),var(--scrim-a1)) 0%,rgba(var(--scrim-rgb),var(--scrim-a2)) 20%,rgba(var(--scrim-rgb),var(--scrim-a3)) 46%,rgba(var(--scrim-rgb),var(--scrim-a4)) 74%,rgba(var(--scrim-rgb),0) 100%)}
.ovl{position:absolute;left:0;right:0;bottom:0;padding:16px 16px 15px;color:var(--ovl-ink)}
.ovl h1,.ovl h2{color:var(--ovl-ink);text-shadow:var(--scrim-shadow)}
/* B (DESIGN-v8.0 §5): het zwevende bronmerk linksboven het beeld (.srcmk) is
   vervallen — de bron staat nu onder het beeld in .hero-meta .src, zie
   verderop in dit bestand. */
.hero-meta .src{display:inline-flex;align-items:center;gap:7px;color:var(--text-2);font-weight:600}

/* Bronmerk-tegel — --mk zet de maat (18/22/30/34 per §7) */
.srcmark{width:var(--mk,18px);height:var(--mk,18px);border-radius:var(--r-s);background:var(--soft-2);color:var(--ink-accent);display:grid;place-items:center;flex:0 0 auto;overflow:hidden}
/* 14.6% = (1 − 1/√2)/2: het vlak binnen de padding is het grootste vierkant dat
   in de ronde tegel past, dus elk logo valt er heel in — ook in de hoeken. */
.srcmark img{width:100%;height:100%;object-fit:contain;padding:14.6%}

/* Bedrijfsmerk — anders dan een bronmerk geen ronde tegel maar een slot van
   vaste breedte. De geleverde merken lopen van 1:1 (Shell) tot 5,5:1 (EnBW);
   in een vierkant van 26px valt zo'n woordmerk terug op een streep van vier
   pixel en verdwijnt. Vaste breedte houdt bovendien één linkerlijn onder de
   namen over twaalf rijen. `plate` houdt de achtergrond licht in beide thema's
   voor merken die hun eigen contrast niet dragen (§2). */
.comark{width:52px;height:19px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;overflow:hidden}
.comark img{width:100%;height:100%;object-fit:contain}
.comark.plate{height:23px;padding:2px 4px;border-radius:5px;background:var(--brand-plate);box-shadow:inset 0 0 0 1px var(--line)}
/* Het monogram krijgt geen slot: twee letters vullen hun eigen breedte. */
.comono{flex:0 0 auto;padding:2px 7px;border-radius:var(--r-s);background:var(--soft-2);color:var(--ink-accent);font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:-0.01em}

/* ── Vandaag: hero ───────────────────────────────────────── */
/* Beeld en kop liggen in dezelfde rastercel, dus de kop staat over het beeld
   zonder dat hij erin genest zit — op desktop schuift diezelfde cel naar de
   tweede kolom. Vandaar het raster en niet `position:absolute`. */
.hero{display:grid;grid-template-columns:minmax(0,1fr);width:100%;text-align:left}
.hero>.ph{grid-area:1/1;aspect-ratio:4/3.05}
/* `relative` en niet `static`: `.ph` is gepositioneerd en zou een statische
   broer in dezelfde rastercel overschilderen, hoe laat hij ook in de DOM staat. */
.hero>.ovl{grid-area:1/1;position:relative;align-self:end}
.hero>.hero-meta{grid-area:2/1}
.hero .sum{display:none}
.hero h2{font-size:22px;line-height:1.2;font-weight:600}
.hero-meta{display:flex;align-items:center;gap:8px;padding:10px 2px 0;font-size:12.5px;font-weight:500;color:var(--text-3)}
.dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.6;flex:0 0 auto}

/* ── Compacte rijen (Vandaag, Gerelateerd, resultaten) ───── */
.rel{display:flex;flex-direction:column}
.rel-row{display:grid;grid-template-columns:84px 1fr;gap:14px;align-items:center;padding:10px 0;text-align:left;border-radius:var(--r-s)}
.rel-row .ph{aspect-ratio:4/3;border-radius:var(--r-s)}
.rel-row h3{font-family:var(--display);font-size:14.5px;line-height:1.32;font-weight:600;margin:0}
.rel-row .m{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding-top:6px;font-size:11.5px;font-weight:500;color:var(--text-3)}
.rel-row .m .src{display:inline-flex;align-items:center;gap:6px;color:var(--text-2);font-weight:600}
.rel-row:hover h3{color:var(--ink-accent)}

/* Vandaag-lijst en zoekresultaten: bredere thumb, scheidingslijn */
.today-res,.res{padding-top:16px}
.today-res .rel-row,.res .rel-row{grid-template-columns:92px 1fr;padding:14px 0;border-bottom:1px solid var(--line);border-radius:0}
.today-res .rel-row:last-child,.res .rel-row:last-child{border-bottom:0}
.today-res .rel-row h3,.res .rel-row h3{font-size:15.5px}

/* ── Sectielabel ─────────────────────────────────────────── */
.sec{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:34px 0 14px}
.sec h4{font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:0}
.sec .m{font-size:12px;font-weight:500;color:var(--text-3)}

/* ── Bronnenblok (W3, DESIGN-v8.0 §16.3) ─────────────────────
   Vervangt de vroegere `.allsrc`-uitklaprij + de ghost-knop "Lees het
   originele artikel": één blok, de representatieve bron als rij, de andere
   bronnen (waar aanwezig) achter een stille, standaard ingeklapte uitklaprij.
   De expander is een native <details>/<summary> — geen JS, dicht standaard —
   dus de rand-tussen-rijen wordt hier op de afstammeling toegepast in plaats
   van op de aangrenzende-broer-selector van het prototype (die geen rekening
   hield met de nesting van <details>). */
.srcblk{background:var(--soft);border-radius:var(--r);overflow:hidden;margin-top:8px}
.srcblk .srow{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:14px 16px;background:none;border:0;text-align:left;cursor:pointer;color:var(--text);text-decoration:none;font-family:var(--sans);border-top:1px solid var(--line-inset)}
.srcblk>.srow:first-child{border-top:0}
.srcblk summary{list-style:none}
.srcblk summary::-webkit-details-marker{display:none}
.srcblk a.srow:hover,.srcblk summary.srow:hover{background:var(--hi);color:var(--on-hi)}
.srcblk .k{flex:1;min-width:0;font-size:14.5px;font-weight:600;line-height:1.3}
.srcblk .k small{display:block;font-size:12.5px;font-weight:500;color:var(--text-3);padding-top:2px}
.srcblk .ic{color:var(--text-3);flex:0 0 auto;display:grid;place-items:center}
.srcblk .stack{display:flex;flex:0 0 auto}
.srcblk .stack>span{margin-left:-6px;outline:2px solid var(--soft)}
.srcblk .stack>span:first-child{margin-left:0}
.srcblk .more .k{font-size:13.5px;font-weight:600;color:var(--text-2)}
.srcblk .more .ic svg{transition:transform .18s ease}
.srcblk details[open]>summary.more .ic svg{transform:rotate(180deg)}

/* ── Knoppen ─────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;border:0;border-radius:var(--r);font-family:var(--sans);font-size:15px;font-weight:600;padding:15px 18px;cursor:pointer;transition:all .15s}
.btn-fill{background:var(--fill);color:var(--on-fill)}
.btn-fill:hover{filter:brightness(1.08)}
.btn-ghost{background:var(--bg);color:var(--ink-accent);box-shadow:inset 0 0 0 1.5px var(--ink-accent)}
.btn-ghost:hover{background:var(--soft-2)}
.btn-quiet{background:var(--hi);color:var(--on-hi)}
.btn-quiet:hover{filter:brightness(.96)}
.btn-row{padding:30px 0 8px}

/* ── Onderbalk: Vandaag · Rapporten · Profiel ────────────── */
.botnav{position:fixed;left:50%;transform:translateX(-50%);bottom:0;z-index:25;width:100%;max-width:var(--app-max);display:grid;grid-template-columns:repeat(3,1fr);background:var(--glass-nav);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border-top:1px solid var(--line);padding:8px 8px calc(6px + var(--safe-bot))}
.botnav-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0 4px;color:var(--text-3);border-radius:var(--r);min-height:52px}
.botnav-item .ic{display:grid;place-items:center;width:52px;height:28px;border-radius:var(--pill);transition:background .15s}
.botnav-item .lbl{font-size:11px;font-weight:600}
.botnav-item.active{color:var(--ink-accent)}
.botnav-item.active .ic{background:var(--soft-2);color:var(--ink-accent)}

/* ── Artikelpagina ───────────────────────────────────────── */
.art-hero{position:relative;width:100%;aspect-ratio:4/3.4;overflow:hidden;background:var(--soft)}
.art-hero::before{content:'';position:absolute;top:0;left:0;right:0;height:76px;background:linear-gradient(to bottom,var(--top-fade),rgba(var(--scrim-rgb),0));z-index:1}
.art-hero img{width:100%;height:100%;object-fit:cover;display:block}
.art-hero.stand{background:var(--soft-2);display:grid;place-items:center;color:var(--ink-accent)}
.art-hero .ovl{padding:20px var(--gutter) 22px}
.art-hero h1{font-size:22px;line-height:1.22;font-weight:600}
.art-nav{position:absolute;top:calc(12px + var(--safe-top));left:0;right:0;display:flex;align-items:center;gap:10px;padding:0 14px;z-index:2}
.art-nav a,.art-nav button{width:38px;height:38px;border:0;padding:0;cursor:pointer;border-radius:var(--pill);background:var(--ovl-btn);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--ovl-ink);display:grid;place-items:center}
.art-nav a:hover,.art-nav button:hover{background:var(--ovl-btn-hov)}
.art-nav button[aria-pressed="true"]{background:var(--ovl-btn-on);color:var(--ovl-btn-on-ink)}
.art-nav .acts{margin-left:auto;display:flex;align-items:center;gap:10px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:88px;z-index:20;background:var(--fill);color:var(--on-fill);font-size:13px;font-weight:600;padding:10px 16px;border-radius:var(--pill)}
.saved-row{display:grid;grid-template-columns:1fr 32px;align-items:center;gap:6px}
.saved-row .rel-row{min-width:0}
/* De scheidingslijn hoort TUSSEN de rijen. `.res .rel-row:last-child` regelt
   dat overal elders, maar hier zit de rij in een `.saved-row`-wikkel met de
   verwijderknop erachter — de `.rel-row` is dus nooit het laatste kind en de
   regel greep niet. Gevolg: een afsluitende lijn onder de lijst, vlak boven
   de lijn die de voet al meebrengt. */
.saved-row:last-child .rel-row{border-bottom:0}
.saved-del{width:32px;height:32px;border:0;padding:0;cursor:pointer;background:none;color:var(--text-3);display:grid;place-items:center}
.saved-del:hover{color:var(--ink-accent)}
/* D1 — selectiemodus. Het vakje krijgt zijn kolom pas in die modus; daarbuiten
   is de rij precies wat hij was, en de bladwijzerknop staat waar hij stond. */
.cbx{width:22px;height:22px;border-radius:7px;box-shadow:inset 0 0 0 1.5px var(--text-3);display:grid;place-items:center;flex:0 0 auto;color:transparent;align-self:center}
.cbx.on{background:var(--fill);box-shadow:none;color:var(--on-fill)}
.saved-row .cbx{display:none}
.res.selecting .saved-row{grid-template-columns:22px 1fr}
.res.selecting .saved-row .cbx{display:grid}
.res.selecting .saved-del{display:none}
.sel-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:0;z-index:45;width:100%;max-width:var(--app-max);padding:12px var(--gutter) 30px;background:var(--glass-nav);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border-top:1px solid var(--line)}
.btn-danger{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:var(--bg);color:var(--signal);border:0;box-shadow:inset 0 0 0 1.5px var(--signal);border-radius:var(--r);padding:14px;font-family:var(--sans);font-size:15px;font-weight:600;cursor:pointer}
.btn-danger:disabled{opacity:.4;cursor:default}
/* De balk staat in het ontwerp `absolute` binnen een telefoonframe; hier scrollt
   de hele pagina, dus is het `fixed` — zoals `.botnav`, die hij afdekt. */
@keyframes fu{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* Gecentreerd met `margin:0 auto` en niet met `translateX(-50%)`: de animatie
   hieronder eindigt op `transform:none` en zou die verschuiving wegvegen. */
.snackbar{position:fixed;left:0;right:0;bottom:102px;z-index:60;width:calc(100% - 28px);max-width:calc(var(--app-max) - 28px);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--fill);color:var(--on-fill);border-radius:var(--r);padding:14px 16px;font-size:14px;font-weight:500;box-shadow:var(--shadow-menu);animation:fu .22s cubic-bezier(.2,.7,.3,1) both}
.snackbar button{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--on-fill);cursor:pointer;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.sel-bar[hidden],.snackbar[hidden]{display:none}
.art-src{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:16px 0 0;font-size:12.5px;font-weight:500;color:var(--text-3)}
.art-src .name{display:inline-flex;align-items:center;gap:7px;color:var(--text);font-weight:600;font-size:13px}
.art-orig{font-size:12.5px;line-height:1.5;color:var(--text-3);margin:8px 0 0}
.art-sum{font-size:16px;line-height:1.62;color:var(--text);margin:16px 0 0}
.art-sum:first-of-type{margin-top:18px}
.art-sum a{font-weight:600;text-decoration:underline;text-underline-offset:3px}
.art-note{font-size:13px;line-height:1.5;color:var(--text-3);font-style:italic;margin:18px 0 0}

/* Vlakke plaat — Context (n1-model: geen rand, geen icoon) */
.plate{background:var(--soft-2);border-radius:var(--r);padding:18px 18px 19px;margin-top:26px}
.plate h3{font-family:var(--display);font-size:16px;font-weight:600;line-height:1.3;margin:0}
.plate p{font-size:15.5px;line-height:1.56;color:var(--text-2);margin:8px 0 0}

/* ── Zoeken ──────────────────────────────────────────────── */
.srch-top{display:flex;align-items:center;gap:12px;padding:calc(14px + var(--safe-top)) var(--gutter) 8px}
.srch-form{flex:1;min-width:0;display:flex}
.srch-field{flex:1;min-width:0;display:flex;align-items:center;gap:9px;background:var(--soft);border-radius:var(--r);padding:12px 14px;color:var(--text-3);transition:box-shadow .15s,background .15s}
.srch-field:focus-within{background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--ink-accent);color:var(--ink-accent)}
.srch-field input{flex:1;border:0;outline:0;background:none;font-family:var(--sans);font-size:16px;font-weight:500;color:var(--text);min-width:0;-webkit-appearance:none;appearance:none}
.srch-field input::-webkit-search-cancel-button{display:none}
.srch-field input::placeholder{color:var(--text-3);font-weight:400}
.srch-cancel{flex:0 0 auto;white-space:nowrap;background:none;border:0;font-size:14.5px;font-weight:600;color:var(--ink-accent);cursor:pointer;padding:0}
.srch-clear{background:none;border:0;color:var(--text-3);display:grid;place-items:center;cursor:pointer;padding:0}
/* §17.6: de sorteerrij (relevantie · nieuwste · oudste). De sectorpills die
   hier stonden zijn vervallen — zoeken loopt al binnen de sector van de URL,
   dus ze boden een keuze die de pagina zelf niet kende. */
.sort-row{display:flex;gap:8px;padding:12px 0 4px;flex-wrap:wrap}
.pill.sm{padding:7px 13px;font-size:12.5px}
.rec-hd{display:flex;align-items:baseline;justify-content:space-between;padding:18px 0 4px}
.rec-hd h4{font-family:var(--display);font-size:15px;font-weight:600}
.rec-hd button{background:none;border:0;font-size:13px;font-weight:600;color:var(--ink-accent);cursor:pointer;padding:0}
.rec-row{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--text)}
.rec-row:last-child{border-bottom:0}
.rec-row .q{flex:1;text-align:left;background:none;border:0;font-family:var(--sans);font-size:15px;color:inherit;cursor:pointer;padding:0}
.rec-row .ic{color:var(--text-3);display:grid;place-items:center}
.rec-row .x{background:none;border:0;color:var(--text-3);cursor:pointer;display:grid;place-items:center;padding:0}
.rec-row .x:hover{color:var(--text)}
.srch-count{font-size:12.5px;font-weight:500;color:var(--text-3);padding:18px 0 6px;margin:0}
.srch-hint{font-size:15px;line-height:1.58;color:var(--text-2);padding:26px 0 0;margin:0}
.srch-hint strong,.srch-hint b{font-weight:600;color:var(--text)}

/* ── Al het nieuws — filterbalk ──────────────────────────── */

/* ── MidEmpty — lege staat, gedeeld door Rapporten en Opgeslagen ──── */
.rep-empty,.saved-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:90px 28px 0;gap:22px}
.rep-empty .badge,.saved-empty .badge{width:78px;height:78px;border-radius:28%;background:var(--soft-2);color:var(--ink-accent);display:grid;place-items:center}
.rep-empty h2,.saved-empty h2{font-size:22px;font-weight:600}
.rep-empty p,.saved-empty p{font-size:15px;line-height:1.55;color:var(--text-2);margin:0;max-width:26ch}

/* ── Rapporten — archief ─────────────────────────────────── */
.arch{display:flex;flex-direction:column}
.arch-row{display:flex;align-items:center;gap:14px;width:100%;padding:16px 0;text-align:left;border-bottom:1px solid var(--line);color:var(--text)}
.arch-row:last-child{border-bottom:0}
.arch-row .wk{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--ink-accent);background:var(--soft-2);border-radius:var(--r-s);padding:7px 9px;font-variant-numeric:tabular-nums;flex:0 0 auto}
.arch-row h3{font-family:var(--display);font-size:15.5px;line-height:1.3;font-weight:600;margin:0}
.arch-row .m{display:block;padding-top:4px;font-size:12px;font-weight:500;color:var(--text-3)}
.arch-row .ic{color:var(--text-3);display:grid;place-items:center;flex:0 0 auto;margin-left:auto}
.arch-row:hover h3{color:var(--ink-accent)}
/* §4.3 — de archiefrij op slot: dezelfde rij, alleen het slot in plaats van de
   chevron. De titel licht niet op bij hover, want er gaat geen rapport open. */
.arch-row.locked .ic{color:var(--text-3)}
.arch-row.locked:hover h3{color:var(--text)}

/* ── Weekbriefing ────────────────────────────────────────── */
/* Eén beeld bovenaan, van het hoogst geplaatste item van de tien dat er een
   heeft. Vlakker dan de dagelijkse hero (4/3.05): daaronder staat een kop van
   drie regels plus de synthese, en een staand beeld duwt die van het scherm.
   `.wk-shot`, niet `.wk-hero`: die laatste naam is sinds v8.0.4 de
   `MondayReportCard` (verderop in dit bestand) en zou anders met deze
   plaatklasse botsen — beide gelden op hetzelfde thumb-formaat, niet op
   dezelfde kaart. */
.wk-shot{aspect-ratio:16/8.4;margin:2px 0 4px}
.wk-head{padding:10px 0 0}
.wk-head .kick{font-family:var(--display);font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-accent)}
.wk-head h1{font-size:28px;line-height:1.12;font-weight:700;letter-spacing:-0.026em;padding-top:9px;margin:0}
.wk-head .range{font-size:13px;font-weight:500;color:var(--text-3);padding-top:8px;display:block}
.wk-syn p{font-size:16px;line-height:1.62;color:var(--text);margin:16px 0 0}
.wk-syn p:first-child{margin-top:20px}
.co{display:flex;flex-direction:column}
.co-row{display:flex;flex-direction:column;gap:6px;padding:13px 0;border-bottom:1px solid var(--line)}
.co-row:last-child{border-bottom:0}
/* D2 — line-height gelijk aan de merkhoogte, anders staat het vakje een pixel
   of twee naast het midden van de eerste tekstregel. */
.co-row .nm{display:flex;align-items:center;gap:8px;line-height:20px;font-family:var(--display);font-size:14px;font-weight:700;color:var(--text)}
.co-row .tx{font-size:13.5px;line-height:1.5;color:var(--text-2)}
/* §17.6: de top 10 is dezelfde rij als de dagstroom en de zoekresultaten —
   92px beeld, scheidingslijn tussen de rijen. Hij stond op 84px omdat de
   rangcijferkolom (`.rank`, geschrapt in v8.0.6) hier ooit vóór het beeld
   stond; die kolom is weg en de breedte volgde niet mee. `.rank` zelf is
   hiermee ook zonder aanroeper en vervalt. */
.wk-top .rel-row{grid-template-columns:92px 1fr;padding:12px 0;border-bottom:1px solid var(--line);border-radius:0}
.wk-top .rel-row:last-child{border-bottom:0}
.wk-top .rel-row h3{font-size:15px}

/* MondayReportCard — maandag op Vandaag (DESIGN-v8.0 §16.2, W2, v8.0.4).
   `--soft-2` in plaats van de donkere `--fill`-kaart uit de eerste v8.0-ronde
   (trok te veel aandacht); het fotokatern bovenaan is de drie
   beeldsterkste artikelen van de week. */
.wk-hero{display:block;width:100%;text-align:left;background:var(--soft-2);color:var(--text);border:0;border-radius:var(--r);padding:0;cursor:pointer;overflow:hidden;transition:background .15s}
.wk-hero .in{display:block;padding:18px 20px 20px}
.wk-hero .kick{font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-accent)}
.wk-hero h2{font-family:var(--display);font-size:22px;line-height:1.18;font-weight:600;letter-spacing:-0.02em;padding-top:12px;margin:0;text-wrap:pretty}
.wk-hero .range{display:block;font-size:12.5px;font-weight:500;color:var(--text-3);padding-top:9px}
.wk-hero .lead{font-size:14.5px;line-height:1.55;color:var(--text-2);margin:14px 0 0}
.wk-hero .toc{display:flex;align-items:center;gap:11px;margin-top:18px;padding-top:15px;border-top:1px solid var(--line)}
.wk-hero .stack{display:flex;flex:0 0 auto}
.wk-hero .stack>span{margin-left:-6px;outline:2px solid var(--soft-2)}
.wk-hero .stack>span:first-child{margin-left:0}
.wk-hero .toc .tx{font-size:12.5px;font-weight:500;color:var(--text-3);line-height:1.4}
.wk-hero .go{display:inline-flex;align-items:center;gap:7px;padding-top:16px;font-size:14px;font-weight:600;color:var(--ink-accent)}
.wk-hero .go svg{transition:transform .18s ease}
.wk-hero:hover{background:var(--soft)}
.wk-hero:hover .go svg{transform:translateX(3px)}
.mon-note{font-size:13px;line-height:1.55;color:var(--text-3);margin:16px 0 0}

/* WeekReportCard — het weekrapport meldt zich ná de dagstroom, als afsluiting
   (H3, DESIGN-v8.0 §5). */
.endcard{display:flex;align-items:center;gap:13px;width:100%;background:var(--soft);border:0;border-radius:var(--r);padding:15px 16px;margin-top:26px;text-align:left;cursor:pointer;color:var(--text);transition:background .15s}
.endcard:hover{background:var(--soft-2)}
.endcard .wkn{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--ink-accent);background:var(--bg);border-radius:var(--r-s);padding:8px 10px;flex:0 0 auto}
.endcard .k{flex:1;font-size:14.5px;font-weight:600;line-height:1.3}
.endcard .k small{display:block;font-size:12.5px;font-weight:500;color:var(--text-3);padding-top:3px}
.endcard .ch{color:var(--text-3);display:grid;place-items:center;flex:0 0 auto}

/* ── Profiel ─────────────────────────────────────────────── */
.prof-card{display:flex;align-items:center;gap:14px;background:var(--soft);border-radius:var(--r);padding:14px}
.prof-av{width:48px;height:48px;border-radius:var(--pill);background:var(--fill);color:var(--on-fill);display:grid;place-items:center;font-family:var(--display);font-size:16px;font-weight:600;flex:0 0 auto}
.prof-name{font-family:var(--display);font-size:16px;font-weight:600;margin:0}
.prof-email{font-size:13px;color:var(--text-2);margin:3px 0 0}
.grp{margin-top:26px}
.grp>.glbl{display:block;font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);padding:0 2px 8px}
.grp-body{background:var(--soft);border-radius:var(--r);overflow:hidden}
.fld{display:flex;align-items:center;gap:14px;padding:14px 16px;min-height:56px}
.fld+.fld{box-shadow:inset 0 1px 0 var(--line-inset)}
.fld .k{flex:1;font-size:14.5px;font-weight:500;color:var(--text)}
.fld .k small{display:block;font-size:12px;font-weight:400;color:var(--text-3);padding-top:3px}

/* v8.0.5 — instellingen per sector (§16.5): introregel + inspringende
   e-mailrijen onder de volgtoggle, blokken met wat ruimte ertussen. */
.grp-note{font-size:13px;line-height:1.5;color:var(--text-3);margin:-2px 2px 10px}
.grp-body+.grp-body{margin-top:10px}
.fld.sub{padding-left:32px;min-height:52px}
.fld.sub .k{font-weight:500;color:var(--text-2)}

.tgl{-webkit-appearance:none;appearance:none;margin:0;width:46px;height:28px;border-radius:var(--pill);border:0;background:var(--track-off);position:relative;cursor:pointer;flex:0 0 auto;transition:background .18s}
.tgl::after{content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--knob);box-shadow:var(--shadow-knob);transition:transform .18s}
.tgl:checked{background:var(--fill)}
.tgl:checked::after{transform:translateX(18px);background:var(--on-fill)}
.tgl:disabled{opacity:.5;cursor:default}

.fld-col{flex-direction:column;align-items:stretch;gap:10px}
.welcome-form{width:100%;text-align:left}
.welcome-form .fld{background:var(--soft);border-radius:var(--r);margin-bottom:10px}
.welcome-form .btn{margin-top:12px}
.segmented{display:flex;gap:6px}
.seg{flex:1;position:relative}
.seg input{position:absolute;inset:0;opacity:0;cursor:pointer}
.seg span{display:block;text-align:center;padding:8px 4px;border-radius:var(--pill);font-size:12.5px;font-weight:600;color:var(--text-2);box-shadow:inset 0 0 0 1.5px var(--line)}
.seg input:checked+span{background:var(--fill);color:var(--on-fill);box-shadow:none}
.seg input:focus-visible+span{box-shadow:inset 0 0 0 2px var(--ink-accent)}

.prof-notice{background:var(--soft);border-radius:var(--r);padding:14px 16px;margin-top:22px;box-shadow:inset 0 0 0 1.5px var(--signal)}
.prof-notice p{font-size:13.5px;line-height:1.5;color:var(--text-2);margin:0}
.prof-notice button{margin-top:10px;background:none;border:0;padding:0;font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--ink-accent);cursor:pointer}

.sel{border:0;background:none;font-family:var(--sans);font-size:14.5px;font-weight:600;color:var(--ink-accent);cursor:pointer;text-align:right}

/* Hubrij — de rij die naar een dieper scherm gaat (§8). */
.hub{display:flex;flex-direction:column;gap:2px;padding-top:22px}
.hub-row{display:flex;align-items:center;gap:13px;width:100%;min-height:56px;background:var(--soft);border:0;border-radius:var(--r);padding:14px 16px;text-align:left;color:var(--text);transition:background .15s}
.hub-row:hover{background:var(--soft-2)}
.hub-row .ic,.hub-row .ch{display:grid;place-items:center;flex:0 0 auto}
.hub-row .ic{color:var(--ink-accent)}
.hub-row .ch{color:var(--text-3)}
.hub-row .k{flex:1;font-size:15px;font-weight:600}
.hub-row .k small{display:block;font-size:12.5px;font-weight:400;color:var(--text-3);padding-top:3px}

/* Weergaveschakelaar: drie knoppen in één formulier, elk met een eigen
   formaction naar POST /thema/… — zo werkt hij ook zonder JavaScript. */
.swch{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:12px 14px;background:var(--bg);border-radius:var(--pill);padding:4px}
.swch-2{grid-template-columns:repeat(2,1fr)}
.fld .swch{margin:0}
.swch button{border:0;background:none;border-radius:var(--pill);padding:9px 6px;font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--text-2);cursor:pointer;transition:all .15s}
.swch button:hover{color:var(--ink-accent)}
.swch button[aria-pressed="true"]{background:var(--fill);color:var(--on-fill)}

.signout{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:var(--bg);color:var(--signal);border:0;box-shadow:inset 0 0 0 1.5px var(--line);border-radius:var(--r);padding:15px;font-family:var(--sans);font-size:15px;font-weight:600;cursor:pointer;margin-top:6px}
.signout:hover{box-shadow:inset 0 0 0 1.5px var(--signal)}
.footnote{text-align:center;font-size:11.5px;color:var(--text-3);padding:22px 0 0;margin:0}

/* Kop van een subpagina: terugknop naast de titel (§8). */
.subhead{display:flex;align-items:center;gap:11px;padding:6px var(--gutter) 16px}
.subhead h1{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-0.012em;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;min-width:0}
.subhead .bk{width:34px;height:34px;border-radius:var(--pill);background:var(--soft);color:var(--text);display:grid;place-items:center;flex:0 0 auto}
.subhead .bk:hover{background:var(--hi);color:var(--on-hi)}
.subhead button.subact,.subhead button.subact:hover{width:auto;height:auto;border-radius:0;background:none;border:0;padding:6px 2px;margin-left:auto;font-family:var(--sans);font-size:14.5px;font-weight:600;color:var(--ink-accent);cursor:pointer;flex:0 0 auto}

/* ── Account: de Profiel-tab uitgelogd (§4.2) ────────────── */
.acct{padding:0 var(--gutter) 40px}
.acct .mark{display:block;height:52px}
.acct h2{font-family:var(--display);font-size:24px;line-height:1.2;font-weight:600;letter-spacing:-0.015em;padding-top:20px;margin:0}
.acct .lead{font-size:15px;line-height:1.55;color:var(--text-2);margin:10px 0 0}
/* Contextplaat: waarom de lezer hier staat in plaats van op het artikel. */
.acct .ctx{display:flex;gap:10px;align-items:flex-start;background:var(--soft-2);border-radius:var(--r);padding:13px 14px;margin-top:18px;font-size:13.5px;line-height:1.5;color:var(--text)}
.acct .ctx svg{flex:0 0 auto;color:var(--ink-accent);margin-top:1px}
.acct .vals{list-style:none;display:flex;flex-direction:column;gap:11px;padding:20px 0 0;margin:0}
.acct .vals li{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:500;color:var(--text)}
.acct .vals svg{flex:0 0 auto;color:var(--ink-accent)}
.acct form{padding-top:24px}
.acct .btn{margin-top:14px}

/* ── Lege staten (dag) ───────────────────────────────────── */
.empty{padding:44px 2px 0}
.empty .kick{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-accent)}
.empty h2{font-size:22px;line-height:1.24;font-weight:600;padding-top:10px}
.empty p{font-size:15px;line-height:1.58;color:var(--text-2);margin:12px 0 0}
.empty-rows{background:var(--soft);border-radius:var(--r);padding:4px 16px;margin-top:22px}
.empty-rows .nrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;font-size:13.5px}
.empty-rows .nrow+.nrow{box-shadow:inset 0 1px 0 var(--line-inset)}
.empty-rows .k{color:var(--text-2)}
.empty-rows .v{font-weight:600;font-variant-numeric:tabular-nums}

/* ── Sectorkiezer ────────────────────────────────────────── */
/* Sectorkiezer (§17.3) — logo + taalschakelaar, één zin, twee rijen, voet. */
.choose{padding:calc(26px + var(--safe-top)) var(--gutter) 32px;min-height:100%;display:flex;flex-direction:column}
.ch-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ch-lang{display:inline-grid;grid-template-columns:repeat(2,46px);padding:3px;background:var(--soft);border-radius:var(--pill);gap:3px}
.ch-lang a{padding:7px 0;font-size:12px;font-weight:600;text-align:center;color:var(--text-2);border-radius:var(--pill)}
.ch-lang a.on{background:var(--bg);color:var(--text)}
.choose h1{font-size:22px;line-height:1.3;font-weight:600;padding-top:30px;max-width:26ch}
.ch-cards{display:flex;flex-direction:column;gap:10px;padding-top:20px}
.ch-card{display:flex;align-items:center;gap:13px;width:100%;text-align:left;background:var(--soft);border-radius:var(--r);padding:16px;color:var(--text);transition:background .15s}
.ch-card:hover{background:var(--soft-2)}
.ch-card .glyph{width:38px;height:38px;border-radius:var(--r-s);background:var(--bg);color:var(--ink-accent);display:grid;place-items:center;flex:0 0 auto}
.ch-card .k{flex:1;min-width:0}
.ch-card h2{font-size:16px;font-weight:600;line-height:1.25;margin:0}
.ch-card .k p{font-size:12.5px;line-height:1.45;color:var(--text-3);margin:3px 0 0}
.ch-card .ch{color:var(--text-3);display:grid;place-items:center;flex:0 0 auto}
.ch-foot{padding-top:24px;font-size:12.5px;line-height:1.6;color:var(--text-3);margin:0}
.ch-foot a{font-weight:600;color:var(--ink-accent)}

/* ── Login / code invoeren ───────────────────────────────── */
.solo{min-height:100vh;display:flex;align-items:center;padding:var(--safe-top) 26px 60px;background:var(--bg)}
.solo-in{width:100%}
.solo-in h1{font-size:30px;font-weight:600;letter-spacing:-0.02em;padding-top:26px}
.solo-icon{display:block;height:60px}
.solo-tag{font-size:15px;line-height:1.55;color:var(--text-2);margin:10px 0 30px}
.fldlbl{display:block;font-size:12.5px;font-weight:600;color:var(--text-2);padding-bottom:7px}
.field+.field{padding-top:14px}
.txtin{width:100%;border:0;background:var(--soft);border-radius:var(--r);padding:15px 14px;font-family:var(--sans);font-size:16px;color:var(--text);outline:0}
.txtin:focus{background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--ink-accent)}
.solo .btn{margin-top:14px}
.help{font-size:12.5px;line-height:1.6;color:var(--text-3);margin:18px 0 0}
.help a,.help b{font-weight:600;color:var(--text-2)}
.flash{font-size:13.5px;line-height:1.5;color:var(--signal);background:var(--soft);border-radius:var(--r);padding:12px 14px;margin:0 0 18px}

/* ── Privacy & sitevoet ──────────────────────────────────── */
/* D7 — één voet voor elke publieke pagina. flex-wrap is speling: een vierde of
   vijfde link breekt naar een tweede gecentreerde regel (§14.4). */
.site-foot{border-top:1px solid var(--line);margin-top:44px;padding:18px var(--gutter) 30px;text-align:center}
.site-foot .brand{display:block;font-size:11.5px;color:var(--text-3)}
.site-foot .links{display:flex;justify-content:center;flex-wrap:wrap;gap:18px;padding-top:10px;font-size:12px;font-weight:600}
.site-foot .links a{color:var(--text-2);text-decoration:none}
.site-foot .links a:hover{color:var(--ink-accent);text-decoration:none}
/* D8 — meldingsplaat (uitleg vóór prompt · iOS-installatie · geweigerd) */
.push-plate{display:flex;gap:12px;align-items:flex-start;background:var(--soft-2);border-radius:var(--r);padding:16px;margin-top:10px}
.push-plate .ic{color:var(--ink-accent);display:grid;place-items:center;flex:0 0 auto;margin-top:1px}
.push-plate h3{font-family:var(--display);font-size:14.5px;font-weight:600;line-height:1.3;margin:0}
.push-plate p{font-size:13px;line-height:1.55;color:var(--text-2);margin:6px 0 0}
.push-plate ol{margin:8px 0 0;padding-left:18px;font-size:13px;line-height:1.7;color:var(--text-2)}
.push-plate .btn{width:auto;margin-top:12px;padding:10px 16px;font-size:13.5px;border-radius:var(--r-s)}
.priv{padding:26px 20px 10px}
.priv h1{font-family:var(--display);font-size:26px;font-weight:600;letter-spacing:-0.02em;margin:0}
.priv h2{font-family:var(--display);font-size:16px;font-weight:600;margin:26px 0 8px}
.priv p{font-size:14.5px;line-height:1.65;color:var(--text-2);margin:0}
.priv .lead{font-size:15.5px;color:var(--text);margin-top:10px}
.priv dl{margin:0}
.priv dt{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--text);margin-top:14px}
.priv dd{font-size:14px;line-height:1.6;color:var(--text-2);margin:3px 0 0}
.priv code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;background:var(--soft-2);border-radius:var(--r-s);padding:2px 6px}
/* Uitgeversblok en wettelijke voetnoot van de transparantiepagina (§14.2). De
   ontworpen `.tp`-regels zijn hier niet overgenomen: ze verschillen een punt of
   twee van `.priv` en zouden een tweede tekstkolom naast deze zetten. */
.priv .pub{background:var(--soft);border-radius:var(--r);padding:16px 18px;margin-top:34px}
.priv .pub .glbl{display:block;font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3)}
.priv .pub p{font-size:14.5px;line-height:1.55;color:var(--text);margin:8px 0 0}
.priv .pub a{color:var(--ink-accent);font-weight:600;text-decoration:none}
.priv .pub a:hover{text-decoration:underline}
.priv .note{font-size:12.5px;line-height:1.55;color:var(--text-3);margin:20px 0 0}

/* De AI-markering heeft sinds v8.1 (§17.4) geen eigen CSS meer: ze is gewone
   metatekst in `.art-src` en `.wk-head .range`, in dezelfde kleur en grootte
   als de datum ernaast. Wat hier stond — de plaat, het EU-merkteken, de
   bevestigknop en de ingeklapte staat — is vervallen met het apparaat zelf. */

/* ── Web = telefoon (DESIGN-v8.1 §17.2) ──────────────────────
   De site ís de app: één leeskolom van 680px met exact dezelfde schermen,
   componenten en maten als de telefoon. Web-eigen is alleen de navigatie —
   de drie tabs staan bovenin in plaats van onderin, met het zoekicoon rechts
   — en de voet, die op één regel gaat staan.

   Wat hier tot v8.0 stond was een tweede ontwerp van dezelfde pagina's: een
   1200px-raster (`.n7.wide`) met drie kolommen op Vandaag, een tweekoloms
   hero waarin de samenvatting náást het beeld stond in plaats van eronder,
   en eigen kopmaten (30px hero, 29px artikel). Dezelfde pagina toonde op
   desktop dus andere inhoud in andere maten dan op de telefoon. Dat is
   precies wat v8.1 opheft; er verandert nu geen enkele component van vorm,
   alleen de kolombreedte en waar de tabs staan.

   `.hdr{display:contents}` blijft de techniek: merk, tabs en zoekknop worden
   één flexrij van `.topbar`, zodat de markup en de drie aria-current-takken
   niet gedupliceerd hoeven te worden. */
@media (min-width:1000px){
  .n7{max-width:none;padding-bottom:0}
  .n7.nonav{padding-bottom:0}
  .body,.priv,.site-foot,.pagehead,.pills,.packone,.srch-top,
  .subhead,.acct,.choose,.solo,.topbar{
    max-width:var(--desk-col);margin-left:auto;margin-right:auto;
    padding-left:var(--desk-pad);padding-right:var(--desk-pad)}
  .topbar{display:flex;align-items:center;gap:22px;background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border-bottom:1px solid var(--line)}
  .hdr{display:contents}
  .hdr-mark{order:1;padding:12px 0}
  .hdr-right{order:3;margin-left:auto}
  .botnav{order:2;position:static;transform:none;width:auto;max-width:none;display:flex;gap:4px;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-top:0;padding:0}
  .botnav-item{flex-direction:row;gap:8px;min-height:0;padding:9px 14px;border-radius:var(--pill)}
  .botnav-item .lbl{font-size:14.5px}
  .botnav-item .ic{width:auto;height:auto}
  .botnav-item.active{background:var(--soft-2)}
  .botnav-item.active .ic{background:none}
  .day-menu{left:var(--desk-pad)}
  /* §7 splitst bewaard-artikelen over app en web; met één DOM is dat breekpunt
     de splitsing. Hierboven blijft alleen de rijknop met "ongedaan maken". */
  .subhead button.subact,.sel-bar{display:none}
  .snackbar{bottom:28px;min-width:360px;max-width:520px}
  /* Alleen de navigatieknoprij; een formulierknop blijft kolombreed. */
  .btn-row{display:flex;justify-content:center;padding-top:44px}
  .btn-row .btn{width:auto}
  /* Buiten de gedeelde padding-lijst: de plaat is full-bleed binnen de kolom,
     met dezelfde verhouding als op de telefoon. */
  .art-hero{max-width:calc(var(--desk-col) - var(--desk-pad) * 2);margin:24px auto 0;border-radius:var(--r);overflow:hidden}
  .art-hero .ovl{padding:22px 26px}
  /* Web-variant van D7: merkregel links, links rechts op één regel. */
  .site-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:44px;padding-top:20px;padding-bottom:20px;text-align:left}
  .site-foot .links{padding-top:0;font-size:12.5px}
}