@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('vendor/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}/* v4.771: Inter lokaal — de externe @import was de laatste render-blokkerende afhankelijkheid (zelfde faalpatroon als cdnjs v4.750: fonts.googleapis.com hapert -> first paint hangt -> donker eeuwig-ladend scherm) */
  ::selection{background:rgba(87,195,221,0.30); color:var(--text)}
button{font:inherit; color:inherit; cursor:pointer}   /* v5.365 (B7): vangnet — een class-loze knop valt nooit meer terug op native styling/pijl-cursor */
button:active{filter:brightness(.85)}   /* v5.365 (B2): subtiele pressed-staat — alleen kleur, geen beweging */   /* v5.364 (audit r2-A2): selectie in accent-wash i.p.v. OS-default-blauw */
:root{
    color-scheme:dark;   /* v5.365 (B3): native onderdelen (open dropdown-lijstjes e.d.) volgen het donkere thema */
    --bg:#07090d; --bg-soft:#0a0d13;
    --surface:#131519; --surface-2:#171a20;   /* v5.420 (Timo, tintproef 17-7): +1 lichtheidspunt op de zweeflagen (variant C, middenweg — saturatie ×0,6 zodat de app niet blauwer wordt); contrast hertoetst: laagste combinatie text-3 op surface-2 = 4,64:1, boven de 4,5-norm; was #0e1117/#12161f */
    --line:rgba(255,255,255,0.05); --line-2:rgba(255,255,255,0.07);
    --text:#e7edf4; --text-2:#94a2b3; --text-3:#778597;
    --accent:#57c3dd; --accent-2:#3f93a8; --accent-soft:rgba(87,195,221,0.10);
    --up:#6cc0a0; --down:#d28a82;
    --up-soft:rgba(108,192,160,0.13); --down-soft:rgba(210,138,130,0.13);
    --c1:#57c3dd; --c2:#6f93b0; --c3:#8d8aa8; --c4:#bf9d6a; --c5:#7e9bd1;
    --gold:#bf9d6a; --gold-soft:rgba(191,157,106,0.15);   /* v5.365 (audit K1): hét premium-goud — zelfde waarde als --c4 (data-rol); alle goud-varianten zijn hierop gevouwen. K2: --c5 was #93a3b2 = visueel identiek aan --text-2 (1,005:1) — nu de al-gesanctioneerde data-tint #7e9bd1 (was CDOT-8) */
    --r:8px; --r-sm:8px;
  }
  *{margin:0;padding:0;box-sizing:border-box; /* <- was r.18 */ scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.18) transparent}
  ::-webkit-scrollbar{width:10px; height:10px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.18); border-radius:4px; border:2px solid transparent; background-clip:padding-box}
  ::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.30); background-clip:padding-box}
  html{scrollbar-gutter:stable}   /* v5.442 (Timo: "balkjes kort iets breder na refresh"): vóór de content-hoogte er is heeft de pagina geen scrollbar -> alles ~15px breder -> zichtbare krimp-flits zodra hij verschijnt (klassieke scrollbars op zijn Mac). De goot staat nu permanent gereserveerd. */
  html,body{background:var(--bg)}
  body{font-family:'Inter',-apple-system,sans-serif; color:var(--text); -webkit-font-smoothing:antialiased; font-feature-settings:"tnum" 1,"cv01" 1; min-height:100vh; min-height:100dvh;   /* v5.377 (MB-15): dvh = de werkelijke (dynamische) viewport op iOS (adresbalk in-/uitgeschoven); de vh-declaratie ervóór blijft staan als fallback — browsers zonder dvh negeren alleen de dvh-regel */
    background:radial-gradient(1500px 760px at 74% -14%, rgba(94,198,223,0.07), transparent 55%), radial-gradient(1100px 700px at 4% 2%, rgba(120,140,180,0.045), transparent 52%), var(--bg);}
  .boot-stil .app{visibility:hidden}   /* v5.983: eerste paint uitgesteld tot de vroege snapshot-restore (zie prepaint.js) — visibility houdt de layout intact, dus de vrijgave is puur een paint, geen reflow */
  .app{width:100%; max-width:1800px; margin:0 auto; padding:83px 36px 64px; display:flex; flex-direction:column; gap:30px}   /* v5.100: padding-top = 26 + 57px fixed topbar */
  .vtag{position:fixed; bottom:9px; right:12px; font-size:9px; color:var(--text-3); opacity:0.4; letter-spacing:0.06em; pointer-events:none; z-index:210; font-variant-numeric:tabular-nums}   /* v5.048: z-index boven de calc-iframe (z:200) + het element staat buiten #app -> de dashboard-versie blijft ook in de calculator-weergave zichtbaar */
  .tnum{font-variant-numeric:tabular-nums; letter-spacing:-0.02em}
  .lbl{font-size:10px; font-weight:500;   color:var(--text-2)}

  /* header */
  .brand{display:flex; align-items:center; gap:20px}
  .mark{width:30px; height:30px; flex:0 0 auto}
  .brand .mark-logo{height:38px; width:auto; display:block; flex:0 0 auto}
  .brand .wm{font-size:16px; font-weight:600; letter-spacing:-0.02em; color:var(--text); display:flex; align-items:center; gap:7px}
  /* v6.188 (Timo 27-7: "Account knop tekst op 1 lijn met testomgeving tekst ook nog, en of dit in de laptop versie
     ook wel goed op 1 lijn staat de vraag"). Terechte vraag: NEE. Gemeten in zijn eigen Chrome op 1710px stond de
     klantnaam op middenhoogte 29,5 en de Account-knop op 28 — dezelfde 1,5px scheefstand als op de telefoon. De
     oorzaak is app-breed: .wm was geen flexbox, dus de klantnaam-<s> hing als inline-element aan de TEKSTBASELINE
     van .wm (16px) terwijl hij zelf 12px is, en een kleinere letter zakt daar zichtbaar onder het midden. v6.185
     repareerde alleen het mobiele blok; dit is dezelfde fix op de plek waar hij hoort. `align-items:baseline` en
     niet `center`, want naast de naam staat op brede schermen ook de paginatitel .wm-t, en die twee horen op één
     `align-items:center` en niet `baseline`: baseline lijnt juist de ONDERKANTEN uit, en dan zakt het midden van de
     kleinere letter er onder — precies de 1,8px die overbleef toen ik het eerst met baseline probeerde. Gemeten met
     center: titel, klantnaam, statusbolletje en de Account-knop staan alle vier op middenhoogte 28.
     De gap vervangt de margin-left:7px van <s>, anders telt die twee keer. */
  .brand .wm s{color:var(--text-3); text-decoration:none; font-weight:500; margin-left:0; font-size:12px; letter-spacing:0}   /* v6.188: de 7px zit nu in de gap van .wm hierboven */
  .sp{flex:1}
  .hd-stat{display:flex; align-items:center; gap:7px; font-size:12px; color:var(--text-2)}
  .hd-stat .d{width:6px; height:6px; border-radius:50%; background:var(--text-3)}
  .hd-stat.on .d{background:var(--up); box-shadow:0 0 6px rgba(108,192,160,.6)}
  .hd-stat b{font-weight:600}   /* v6.247 (D-06): ALTIJD 600, ook zonder .on. Zonder deze regel gold er in de UITGELOGDE stand ("offline") geen enkele gewichtsregel en erfde de <b> de browser-default 700 — het enige 700 dat de desktop-audit in de hele app vond, terwijl DESIGN.md §3 zegt dat 700 sinds v6.182 niet meer bestaat. De regel eronder houdt de kleur, die is wél standgebonden. */
  .hd-stat.on b{color:var(--up)}   /* v6.256: `font-weight:600` weg — de basisregel hierboven (v6.247) dekt beide standen, dus dit was een dubbeling. Alleen de KLEUR is standgebonden. Gemeld door de Assistent. */
  .clock{font-size:12px; color:var(--text-2); padding:0 13px; border-left:1px solid var(--line); border-right:1px solid var(--line)}
  .ico-btn.cta{background:var(--accent-soft); color:var(--accent)}   /* primaire actie = accent-wash-pill (het Planner-.tk-vg-add-idioom) */
  .ico-btn.cta:hover{background:rgba(87,195,221,0.16); color:var(--accent)}   /* v5.364 (audit r1-7c): topbar-Inloggen = dé CTA in de uitgelogde staat -> CTA-accent-rol (zelfde recept als .cfg-go) */
  .ico-btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; box-sizing:border-box; height:22px; background:transparent; border:1px solid transparent; border-radius:8px; padding:0 11px; font-size:11px; font-weight:500; line-height:1; color:var(--text-3); cursor:pointer; transition:.12s}   /* v5.441 (Timo's huisstijl-ronde): actieknoppen in dezelfde pill-taal als de standenrijen — ghost-rust, sentence case */
  .ico-btn svg{width:12px; height:12px; flex:0 0 auto}
  .ico-btn:hover{color:var(--text-2); background:rgba(255,255,255,0.04)}

  /* config */
  .cfg{display:none; position:fixed; top:66px; right:36px; z-index:350; width:min(458px, calc(100vw - 44px)); background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; box-shadow:0 16px 48px rgba(0,0,0,0.55)}   /* v5.056 (Timo): inlog-popup als overlay bovenop het dashboard (position:fixed, rechtsboven onder de Inloggen-knop) i.p.v. een in-flow blok dat de dashboard-content omlaag duwde bij het openen. v5.168: z 150->350 (de popup-laag, boven de fixed views op 200) + #cfg is nu een body-kind — samen maken die de knop op élke pagina werkend */
  .cfg.open{display:block}
  .eig-modal{display:none; position:fixed; inset:57px 0 0 0; box-sizing:border-box; z-index:200; background:var(--bg,#07090d); flex-direction:column; align-items:center; justify-content:flex-start; padding:26px 20px; overflow:auto}   /* v5.848 (Timo: "titel, begin, eind op zelfde hoogte" als de koersmonitor). GEMETEN bij 960px venster: de koersmonitor-titel staat op y=83 en zijn kaart loopt van 114 tot 918. De instellingen-titel stond op 103 en het paneel van 132 tot 899. De bovenmarge van 46 -> 26px zet de titel op exact 83. *//* v5.142 (Timo): kolom — de kop staat nu als los kind BOVEN .eig-panel (was row: flex-start/center rond alleen het panel) *//* v5.053: Instellingen is nu een volwaardige pagina (body.view-settings), geen modal-overlay meer -- z-index onder de zijbalk (250) zodat het keuzemenu eroverheen komt, dekkende bg i.p.v. dim-backdrop, en expliciete width/height:100% (zoals .calc-frame) zodat 'ie het scherm vult i.p.v. naar de inhoud te krimpen */
  body.view-settings #eigModal{display:flex}
  .eig-panel.eig-vol{height:calc(100dvh - 154px); max-height:none; margin-top:0; display:flex; flex-direction:column}   /* v5.848: 156 = 57 (koprand) + 57 (titel + de 18px eronder) + 42 (onderrand), exact de maten van de koersmonitor-kaart: begin op 114, eind op 918 bij een venster van 960. v6.009 (Timo 25-7: "wanneer je switcht tussen algemeen en categorieen, zakt het gehele vlak iets omlaag"): die margin-top:2px was de zakker -- alleen de Categorieen-tab krijgt .eig-vol, dus het vlak sprong van 112 naar 114 en terug. Nu 0, en de 156 werd 154 zodat de ONDERRAND blijft waar hij stond (2px eraf bovenaan = 2px erbij in de hoogte). Netto: top gelijk aan de andere tabs, bodem ongewijzigd. */
  .eig-panel.eig-vol > .eig-tabs{flex:0 0 auto}
  .eig-panel.eig-vol .eig-tabpane.on{flex:1 1 auto; min-height:0; display:flex; flex-direction:column}
  .eig-panel.eig-vol #classifTbl{flex:1 1 auto; min-height:0; display:flex; flex-direction:column}   /* de tabelhouder zit tussen de tabpane en de scroller; zonder deze schakel loopt de flex-keten dood en groeit .cl-scroll gewoon door */
  .eig-panel.eig-vol .cl-scroll{max-height:none; flex:1 1 auto; min-height:0}   /* de tabel vult de kaart i.p.v. zijn eigen 62vh-klem */
  .eig-panel{background:var(--surface); border:1px solid var(--line-2); border-radius:8px; padding:16px 20px 20px; box-shadow:0 30px 80px -20px rgba(0,0,0,0.82); width:min(96vw,1080px); max-height:88vh; max-height:88dvh; overflow:auto}   /* v5.377 (MB-15): dvh-variant direct na de vh-fallback (zie body-regel) */   /* v4.893: vaste breedte i.p.v. width:max-content -- met de nieuwe tabbladen zou een verborgen tabblad (display:none) niet meer meetellen voor de max-content-berekening, dus sprong de hele modal van breedte bij het wisselen van tab; nu altijd even breed, ongeacht welk tabblad actief is */
  .eig-h{display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:16px; width:min(96vw,1080px)}   /* v5.142 (Timo): kop BOVEN het vlak (uit .eig-panel getild), panel-breed uitgelijnd, 16px = de .sec-kop-tot-content-norm (was 12px binnenin) */
  .eig-modal .cl-tbl{width:100%}/* v4.981: was width:auto -> tabel werd content-breed (~1000px) en gaf een horizontaal scrollbalkje zodra het paneel (96vw) smaller was; nu vult/krimpt hij mee */
  .eig-tabs{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px}   /* v5.439: onderlijn weg — pills dragen de actieve stand */   /* v5.376 (MB-4): wrapt op smal (het .aflos-tabs-recept) — tabs + "+" + Ongedaan kapten af op 375px; .eig-undo's margin-left:auto blijft: op een gewrapte rij valt hij netjes rechts op zijn eigen rij */
  .eig-tab{background:transparent; border:0; font-family:inherit; color:var(--text-3); font-size:11px; font-weight:500; height:22px; padding:0 14px; cursor:pointer; border-radius:8px; transition:.12s; white-space:nowrap; display:inline-flex; align-items:center}   /* v6.253 (D-10, Timo 28-7): GELIJK AAN DE KNOP-FAMILIE. GEMETEN vóór op 1280: deze tabs waren 29px hoog met 12px tekst, terwijl élke andere knop in de app 22px is met 11px (`.ico-btn` r59, `.nw-b` r840). Dat is precies wat Timo "een bende, totaal niet consistent" noemde. Hoogte via `height` + inline-flex, want padding 7px zou de 22 weer oprekken. LET OP — DE TOUCH-STAND BLIJFT 44px: `.eig-tab` staat in het `@media (pointer:coarse)`-blok op `min-height:44px`, en min-height wint per CSS-definitie altijd van een vaste height. Op de telefoon verandert er dus niets aan de tapdoelen; gemeten: 44px vóór én ná. */   /* v5.439: pill i.p.v. onderstreep-tab (standenrij-taal); v5.525 (Timo, knop-consistentie): nowrap — "Eigen woning" wrapte naar 2 regels (43px i.p.v. 29px), de rij wrapt al als geheel (flex-wrap) dus een tab hoeft nooit binnenin te breken */
  .eig-tab:hover{color:var(--text-2)}
  .eig-tab.on{color:var(--accent); background:rgba(87,195,221,0.10)}
  .eig-tab-add{opacity:.8}   /* A2-01 (Timo 28-7, keuze "2"): stond op --text-3 en was daarmee in kleur, maat én vorm identiek aan een tab, dus las hij als een vijfde tab die "Vastgoed" heet — met een pand erbij zelfs pal naast de echte. Bewust zachter. Kost contrast op rgb(19,21,25): 4,86:1 -> 3,57:1 in rust, hover blijft 4,93:1. Timo heeft die prijs vóór zijn keuze gelezen (plan assistent2/PLAN_A2-01). Cascade: enige opacity-voorschrift op dit element (.eig-tab r77 zet er geen), .eig-tab:hover r78 zet alleen color en blijft werken, .eig-tab.on r79 raakt deze knop nooit, en het pointer:coarse-blok r1981 zet min-height:44px — opacity staat daar los van, dus het tapdoel blijft 44px. */
  .eig-undo{margin-left:auto; align-self:center; display:inline-flex; align-items:center; gap:6px; background:transparent; border:0; font-family:inherit; color:var(--text-3); font-size:12px; font-weight:600; padding:6px 3px; cursor:pointer; transition:color .12s,opacity .12s; white-space:nowrap}   /* v5.173 (Timo): ongedaan-knop rechts in de tabrij, naast de tabnamen; v5.525 (Timo, knop-consistentie): nowrap — "Ongedaan maken" wrapte (41px), blijft nu één regel */
  .eig-undo svg{width:15px; height:15px}
  .eig-undo:hover{color:var(--text-2)}
  .eig-undo.off{opacity:.35; cursor:default; pointer-events:none}
  .eig-tabpane{display:none}
  .eig-tabpane.on{display:block}
  /* v5.058 (Timo): Periode-tab als nette instellingen-lijst (naam+uitleg links, control rechts) i.p.v. een krappe enkele regel */
  .periode-list{display:flex; flex-direction:column}
  .periode-row{display:flex; align-items:center; justify-content:space-between; gap:24px; padding:13px 0; border-top:1px solid var(--line)}
  .periode-info{min-width:0}
  .periode-name{font-size:10px; font-weight:600; color:var(--text-2); margin-bottom:3px}   /* v6.247 (D-06): 12 -> 10/600, de kopfamilie-maat. Zie het v6.242-blok verderop: dat maakte deze familie op de telefoon één maat en hield desktop bewust buiten schot ("één woord van hem en dit gaat app-breed"). Timo 28-7 op de cross-audit: "gelijktrekken, hou ik van". */
  .periode-desc{font-size:9px; color:var(--text-3); line-height:1.4}   /* v6.247 (D-06): 11 -> 9, VERPLICHT samen met de regel hierboven. Met een kop van 10px las een uitleg van 11px groter dan zijn eigen kop — exact de val die v6.242 op de telefoon al ving en die zonder deze regel nu op desktop zou ontstaan. */
  .periode-desc b{color:var(--text-2); font-weight:600}
  .periode-ctrl{flex:0 0 auto; display:flex; gap:6px; align-items:center}
  .cl-tbl th,.cl-tbl td{text-align:left}   /* v5.833 (Timo: "knoppen zijn niet uitgelijnd met de titel naam ... geldt eigenlijk voor alles"). De oude regel centreerde vier kolommen via nth-child(4..7) — en die nummers klopten niet meer zodra er een kolom bijkwam (de Hernoemen-kolom schoof ze allemaal een plek op). Bovendien botste een gecentreerde cel per definitie met een links uitgelijnde kop. Nu staat alles links, en omdat het filtericoon in de kop ACHTER het label is gezet begint de koptekst op exact dezelfde x als de celinhoud. Geen nth-child meer, dus een volgende kolom kan dit niet opnieuw breken. */
  .cfg-grid{display:flex; flex-direction:column; gap:14px}
  .cfg-f{flex:0 0 auto; min-width:0}
  .cfg-f label{display:block; margin-bottom:7px}
  .cfg-f .sub{color:var(--text-3); text-transform:none; letter-spacing:0; font-weight:400; font-size:11px}
  .cfg .sub{margin-top:7px; line-height:1.45}   /* v6.056: BEWUST geen white-space:nowrap — de regel past op desktop ruim op één regel (gemeten 370 in 374px), en op een smal scherm valt het venster terug op calc(100vw - 44px); dan wrapt hij netjes naar twee regels in plaats van af te kappen. */
  .cfg .sub b{font-weight:600; color:var(--text-2)}   /* v6.056 (Timo: "maak eigen dikgedrukt"): nadruk op 600 — de app-brede nadrukwaarde (DESIGN.md §Typografie), niet de browser-default 700 */   /* v6.055 (Timo): hulpregel onder het Sheet ID. 7px = de spiegel van label->veld (7,5px, DESIGN.md §Inlog-popup), zodat het ritme boven en onder het veld gelijk blijft; .cfg-foot houdt zijn eigen 18px naar de knoprij. Alleen binnen #cfg gescoopt -- .set-fields deelt .cfg-f en mag deze marge niet krijgen. */
  .cfg-in{position:relative}
  .cfg-in input{width:100%; background:var(--surface-2); border:1px solid var(--line-2); border-radius:4px; color:var(--text); font-size:12px; height:22px; box-sizing:border-box; padding:0 52px 0 11px; outline:none; font-variant-numeric:tabular-nums}   /* v5.204 (Timo, "clean"): één schoon veld -- de acties (tonen/wissen) zijn kale iconen BINNEN het veld (padding-right maakt ruimte), geen geblokte knoppen meer naast de input. §Invoer-norm: surface-2/--line-2/22px; harde --accent-2-focus blijft de gedocumenteerde .cfg-in-uitzondering. */
  /* v6.185 (Timo 27-7, met screenshot van de iOS-dialoog "Sterk wachtwoord gebruiken?"): HET SHEET-ID IS GEEN
     WACHTWOORD MEER VOOR DE BROWSER. Het veld stond op type=password met autocomplete=new-password — die combinatie
     is precies het signaal waarop iOS zijn sterk-wachtwoord-dialoog opent, en dat is hinder: je vult er een Sheet-ID
     in, geen account. Timo: "hier kunnen we weinig mee denk ik? Kan dat weg?" Het veld is nu gewoon tekst met een
     MASKER via text-security, dus het ziet er identiek uit (dezelfde bolletjes) maar geen enkele wachtwoordmanager
     herkent het nog. Firefox kent -webkit-text-security niet; daar valt de app in app.js terug op het oude
     type=password, zodat het ID nooit onbedoeld leesbaar op het scherm staat. */
  #sheetId.mask{-webkit-text-security:disc; text-security:disc}
  /* v6.190 (Timo 27-7): "Zelfde geldt gewoon voor de lettergrootte van de in te vullen cel voor de sheet ID" en de
     bolletjes die "enorm groot" zijn. Die twee zijn hetzelfde ding: de bolletjes zijn de tekst van dit veld en erven
     dus zijn maat. Het veld stond op smal op 16px omdat iOS-Safari daaronder inzoomt zodra je een INVOERVELD aantikt.
     Die grens geldt nog steeds, dus de constructie is: in rust 12px (zoals op desktop), en de focus-regel hieronder
     zet hem terug op 16px vóórdat je erin typt. LET OP, EERLIJK: of iOS de zoom ook echt achterwege laat bij een
     focus-regel is browsergedrag dat ik hier niet kan meten — dat moet Timo op zijn eigen toestel zien. Zoomt hij
     tóch in, dan is de fix één regel: deze twee regels weg en het veld staat weer op 16px. */
  /* v6.198 (blok 2a van de grote ronde, Timo 27-7): KLEIN BLIJVEN TERWIJL JE TYPT. v6.190 hierboven loste de
     grootte op met een sprong (12px in rust, 16px bij focus), en die sprong wilde hij weg. De 16px moet blijven —
     dat is geen smaak maar techniek, iOS-Safari zoomt de hele pagina in zodra je een veld onder 16px aantikt.
     DE CONSTRUCTIE: het veld blijft technisch 16px (dus geen zoom), maar wordt met transform op 80% getekend.
     Safari beoordeelt de zoom op de computed font-size, niet op wat de transform ervan maakt. Zichtbaar wordt de
     tekst dus 12,8px, in rust én tijdens het typen — één maat, geen sprong.
     ALLES WAT MEE MOET, want transform schaalt het hele vakje en niet alleen de letters (elke maat gedeeld door
     0,8 zodat de ZICHTBARE maat exact blijft wat hij was): breedte 100% -> 125%, hoogte 22 -> 27,5px, padding
     0 52px 0 11px -> 0 65px 0 13,75px. `transform-origin:left top` houdt de linkerbovenhoek op zijn plek.
     DE VALKUIL, en die kostte de eerste poging: een transform verandert wat je ZIET, niet wat de layout RESERVEERT.
     De container zou dus op 27,5px blijven staan en alles eronder 5px omlaag duwen. Vandaar de vaste hoogte op
     .cfg-in: die houdt de rij op zijn oude 22px, en de twee icoonknoppen (absolute, height:100%) blijven daarmee
     precies staan waar ze stonden.
     TERUGWEG als dit op zijn toestel tegenvalt: deze regels weg en de v6.190-versie (12px rust, 16px focus) staat
     er weer; die staat hierboven in het commentaar beschreven. */
  @media (max-width:760px){
    .cfg-in{height:22px}
    #sheetId{font-size:16px; height:27.5px; width:125%; padding:0 65px 0 13.75px; transform:scale(.8); transform-origin:left top}
  }
  .cfg-in input:focus{border-color:var(--accent-2)}
  .cfg-in .cfg-act{position:absolute; top:0; height:100%; width:20px; display:flex; align-items:center; justify-content:center; background:transparent; border:0; padding:0; color:var(--text-3); cursor:pointer; opacity:.6; transition:opacity .12s,color .12s}   /* v5.205/v5.206: kaal lijn-icoon in het veld -- het .set-card-clear-idioom (transparant, geen rand, opacity .6 = exact gelijk aan set-card-clear in Instellingen) tot hover */
  .cfg-in .cfg-act svg{width:14px; height:14px; display:block}   /* v5.206: 14px = exact de set-card-clear-maat, zodat de wis-SVG op beide plekken identiek is */
  .cfg-in .cfg-eye{right:30px}
  .cfg-in .cfg-clr{right:9px}
  .cfg-in .cfg-eye:hover{opacity:1; color:var(--text)}
  .cfg-in .cfg-clr:hover{opacity:1; color:var(--down)}
  .cfg-in .cfg-eye:not(.on) .eye-slash{display:none}   /* v5.205: oog wisselt via een CLASS (.on = waarde zichtbaar -> doorgestreept), niet via innerHTML -- innerHTML-swap koppelde de aangeklikte node los, waardoor de click-outside-handler (#cfg) 'm als "buiten" zag en de popup sloot */
  .cfg-in .cfg-act:focus-visible{opacity:1; outline:1px solid var(--accent-2); outline-offset:1px; border-radius:4px}   /* zichtbare keyboard-focus */
  .cfg-foot{display:flex; align-items:center; gap:18px; margin-top:18px; flex-wrap:wrap}   /* v6.028: 15 -> 18px = de app-brede afstand content -> knoprij (v5.997 kaart-gaps, v6.009 KPI-rij -> knoprij) */
  .cfg select{appearance:none; -webkit-appearance:none; -moz-appearance:none; background-color:var(--surface-2); background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 3.5L5 6.5L8 3.5' fill='none' stroke='%238b93a3' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat:no-repeat; background-position:right 8px center; border:1px solid var(--line-2); border-radius:4px; color:var(--text); font-size:10px; font-weight:600; height:22px; box-sizing:border-box; padding:0 22px 0 9px; font-family:inherit; cursor:pointer}
  .cfg-btns{display:flex; align-items:center; gap:8px}   /* v5.056 (Timo): margin-left:auto weg -> Inloggen/Uitloggen links uitgelijnd i.p.v. rechts */
  .cfg-go,.cfg-out{display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; height:22px; border-radius:8px; padding:0 14px; font-size:11px; font-weight:500; line-height:1; cursor:pointer; font-family:inherit; transition:.12s; border:1px solid transparent}   /* v5.441: pill-taal */
  .cfg-go{background:var(--accent-soft); color:var(--accent)}
  .cfg-go:hover{background:rgba(87,195,221,0.16)}
  .cfg-out{background:rgba(255,255,255,0.04); color:var(--text-2)}
  .cfg-out:hover{color:var(--text); background:rgba(255,255,255,0.08)}   /* v5.442: wash-hover zonder rand */
  .cfg-out.on{background:rgba(87,195,221,0.10); color:var(--accent)}   /* v5.463 (Timo): actieve Aflosschema-knop randloos — volgt nu de pill-taal (v5.439/441, gelijk aan .nw-b.on) i.p.v. de harde accent-omlijning die v5.441 hier miste */
  .cfg-out.on:hover{background:rgba(87,195,221,0.16)}
  .duohyp-row2 .dh-col{min-width:0}
  .dh-empty-hint{font-size:12px; color:var(--text-3); padding:6px 2px 2px}   /* v4.919: uitleg zodra er WEL cijfers zijn ingevuld maar het vlak toch leeg blijft (bv. geen Peildatum/Startdatum) -- was voorheen een stille, verwarrende lege kaart zonder enige reden */
  .dh-view{display:grid; grid-template-columns:1fr var(--dh-kpi-w, 165px); column-gap:20px; align-items:stretch} /* v5.292 (Timo): KPI-kolom exact even breed als een Portfoliowaarde-tegel (.bal-si), MEESCHALEND -- _syncDhKpiWidth() meet die live en zet 'm als --dh-kpi-w (165px = fallback tot de eerste meting); de donut (1fr) neemt de rest */
  .dh-view .donut-stage{height:184px; width:345px; margin-bottom:0; flex:0 0 auto}
  .dh-col-donut{position:relative; min-height:270px}   /* v4.922: donut+ring+Aflosschema-knop zijn alle 3 position:absolute (dus 0 eigen intrinsieke hoogte) -- zonder deze vloer bepaalde de KPI-kolom (de enige met normale flow-inhoud) de HELE rijhoogte; met minder KPI-tegels (bv. WOZ-waarde/Bruto inkomen leeg -> nog maar 1 tegel i.p.v. 3) kromp die rij tot ver onder wat de donut nodig heeft, en overlapte de ring letterlijk de knop/kaartrand (het "verspringen" dat Timo meldde). 270px is ruim boven het minimum (ring 196px + knop + marge) nodig om dat bij elk aantal KPI-tegels te voorkomen. */
  .dh-donut-centerwrap{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:345px}
  .dh-time-progress{position:absolute; top:50%; left:50%; width:196px; height:196px; transform:translate(-50%,-50%); pointer-events:none}
  .dh-time-progress svg{display:block}
  .dh-time-progress .dh-ring-visual{pointer-events:none; transform-origin:98px 98px; transition:transform .12s ease, filter .12s ease}
  .dh-time-progress .dh-ring-hit{cursor:default}
  .dh-donut-btnwrap{position:absolute; bottom:0; left:0}
  .dh-col-kpis{display:flex; flex-direction:column; min-width:0}
  @media (max-width:880px){ .dh-view{grid-template-columns:1fr} .dh-view .donut-stage{width:100%}}
  .duohyp-kpis{display:flex; flex-direction:column; gap:14px}
  .duohyp-kpis .kpi-mini{display:flex; align-items:center; gap:14px; padding:17px 18px; border-radius:8px; min-height:85px; background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0) 55%), var(--surface-2); border:1px solid var(--line-2)}   /* v5.291 (Timo): achtergrond+rand gelijk aan .bal-si/.kpi (gradient+--surface-2+--line-2). v5.292: min-height:85px = exact de Portfoliowaarde-tegel (.bal-sum .bal-si r565), zodat de tegels onderling even hoog zijn EN gelijk aan de Portfoliowaarde-hoogte */
  .duohyp-kpis .kpi-mini.kpi-mini-click{cursor:pointer; transition:border-color 0.12s; user-select:none; -webkit-user-select:none}   /* v5.291: hover licht nu de RAND op (zoals .bal-si.pf-click), was achtergrond -- consistent met het nieuwe tegelrecept. v5.558 (Timo): user-select none — een paar keer klikken (cyclus-KPI's) selecteerde anders alle tekst */
  .duohyp-kpis .kpi-mini.kpi-mini-click:hover{border-color:rgba(255,255,255,0.18)}
  .duohyp-kpis .kpi-mini .ic{width:38px; height:38px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex:0 0 auto}
  .duohyp-kpis .kpi-mini .ic svg{width:19px; height:19px}
  .duohyp-kpis .kpi-mini .kpi-mini-st{display:flex; flex-direction:column; gap:5px; min-width:0}   /* v4.891: was 2px -- de hoofd-KPI-tegels (.kpi-st) gebruiken 5px tussen label en cijfer, hier stond het te dicht op elkaar */
  .duohyp-kpis .kpi-mini .l{font-size:10px; font-weight:500;   color:var(--text-3); white-space:nowrap; overflow:hidden}
  .duohyp-kpis .kpi-mini .v{font-size:20px; font-weight:600; color:var(--text); letter-spacing:-0.02em; line-height:1; white-space:nowrap; overflow:hidden}   /* v5.292: nowrap zoals .bal-sv -- voorkomt dat een 2-woord-waarde ("6 maanden") wrapt en die tegel hoger maakt dan de rest. v5.584 (G-6): overflow-guard + JS-shrink zoals .k-v */
  .hyp-vorm-btn.cl-sel, .afl-btn.cl-sel, .modus-btn.cl-sel{width:118px; box-sizing:border-box;   /* v5.539 (Timo): 100->118px zodat "Aflossingsvrij" (+ modus/afl-labels) VOLLEDIG past i.p.v. afgekapt met "…" (het v4.895-clip was bewust, nu ongedaan op verzoek) */ text-align:left; font-size:12px; font-weight:400; text-transform:none; letter-spacing:0; overflow:hidden; white-space:nowrap}   /* v4.894: het gedeelde .cl-sel (9.5px/uppercase/600, bedoeld voor de compacte Instellingen-tabelkolommen) oogde hier -- naast de 12px gewone-tekst-invoervelden in dezelfde kaart -- als een compleet ander lettertype; nu gelijk aan .be-in. v4.895: was width:100% (spande de hele kaart) -- nu vaste 100px zoals alle andere cellen in dit paneel; "Aflossingsvrij" wordt bij deze breedte afgekapt met "…", de volledige naam blijft zichtbaar in het openklap-lijstje (.vpop, min-width 184px). v4.897: .afl-btn/.modus-btn toegevoegd -- Aflosstelsel en Modus zijn op Timo's verzoek nu ook dropdown-knopjes zoals Vorm/Annuïtair (was een 2-segment-schuifknop), zelfde brede/lettertype-behandeling */
  .modus-btn.cl-sel{width:82px}   /* v6.009 (Timo 25-7: "heel jaar cel en datum cel hier zijn onnodig breed"): de 118px hierboven is er sinds v5.539 voor "Aflossingsvrij" (GEMETEN 76,4px tekst -> 106,4px nodig), en die blijft dus staan voor .hyp-vorm-btn/.afl-btn. De Modus-knop deelde die maat alleen omdat v4.897 hem bij die familie zette, maar MODUS_LIST heeft precies twee opties: "Heel jaar" (49,9px) en "YTD" (24,8px) -> breedste nodig = 49,9 + 8 links + 22 rechts (chevron) = 79,9px. 82 laat 2,1px lucht. Bewust wel een VASTE breedte houden (geen auto zoals .pd-tog): anders springt de knop bij het wisselen tussen de twee opties. */
  .cl-pct{color:var(--text-3); font-size:11px}
  /* Instellingen-parametersysteem (Periode/DUO/Hypotheek): geneste "set-card"-groepen op een rustig rgba(255,255,255,0.04)+--line-recept (v5.291: bewust NIET het gradient-tegelrecept van .kpi-mini/.bal-si -- dit zijn velden-groepen in de modal, geen dashboard-tegels) zodat losse velden nooit los op de modal-achtergrond zweven */
  .set-card{position:relative; background:rgba(255,255,255,0.04); border:1px solid var(--line); border-radius:8px; padding:12px 14px; width:100%; box-sizing:border-box}   /* v4.893: width:100% i.p.v. fit-content -- fit-content liet elke algemene-parameterskaart een andere breedte krijgen (Hypotheek's 2-veldenkaart 250px, DUO's 6-veldenkaart 725px, Periode's kaart 457px), terwijl de leningen-/delen-kaartjes-grid eronder altijd de volle 1003px besloeg; die botsende breedtes waren de kern van "niet uitgelijnd, schots en scheef" -- nu heeft elke kaart in het Parameters-tabblad dezelfde breedte. v4.903: position:relative toegevoegd voor de nieuwe .set-card-clear-knop (DUO/Hypotheek) */
  .set-card-clear{position:absolute; top:10px; right:10px; display:flex; align-items:center; justify-content:center; background:transparent; border:0; color:var(--text-3); cursor:pointer; padding:0; opacity:0.6; transition:opacity .12s,color .12s}   /* v4.903: maakt alle velden in de DUO-/Hypotheek-kaart in één klik leeg. v5.206 (Timo, consistentie): het ⌫ is nu dezelfde backspace-lijn-SVG als de inlog-wisknop (.cfg-clr) -- was een Unicode-glyph (11px), botste met het app-brede lijn-icoon-idioom. Zelfde SVG + opacity + hover = één canonieke wis-knop. */
  .set-card-clear svg{width:14px; height:14px; display:block}
  .set-card-clear:hover{opacity:1; color:var(--down)}
  .set-card + .set-card{margin-top:8px}
  .set-fields{display:flex; flex-wrap:wrap; align-items:flex-start; gap:10px 20px}   /* v4.889-fix: terug naar flex (CSS-Grid auto-fill botst met .set-card's width:fit-content -- de kolomberekening en de fit-content-breedte gingen elkaar in de weg, wat de hele rij tot 1 kolom liet inklappen) */
  .set-fields .cfg-f{display:flex; flex-direction:column; align-items:flex-start; gap:2px; flex:0 0 auto; max-width:140px}   /* max-width i.p.v. min-width -- een lang label (bv. "Toetsinkomen partner") wrapt nu naar 2 regels i.p.v. zijn hele veld breder te maken dan de rest */
  .set-fields .cfg-f label{margin-bottom:0}   /* v4.892: overschrijft de gedeelde .cfg-f label{margin-bottom:7px} -- die stapelde bovenop deze eigen 2px-gap (7+gap), vandaar dat het label ver boven de cel bleef zweven ondanks een kleine gap-waarde */
  .set-fields .lbl{font-size:10px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--text-3); white-space:normal; line-height:1.3}   /* v4.890: geen hoofdletters meer -- na herhaalde feedback ("schreeuwend/chaos") blijkt uppercase+letter-spacing hier gewoon te veel visueel gewicht te geven aan iets dat een rustig label hoort te zijn; gewone tekst, geen tracking (tracking is typografisch een uppercase-conventie) */
  .set-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,140px)); gap:8px; margin-top:8px; align-items:stretch}   /* v5.544 (Timo, "leningdeel-vierkanten houden hun gelijke lengte niet vast"): terug naar align-items:stretch -> alle kaartjes in een rij krijgen de hoogte van de langste (aflossingsvrij == annuïtair). De v4.888-reden om NIET te stretchen (leeg vlak onder een korter kaartje) is nu Timo's expliciete wens: gelijke hoogte weegt zwaarder dan de onderruimte. v4.893: auto-fit i.p.v. auto-fill -- met auto-fill bleven lege kolom-tracks staan (bv. 2 kaartjes in een grid die ruimte voor 3 berekende), dus een zichtbare kale kolom rechts; auto-fit laat ongebruikte tracks instorten zodat de aanwezige kaartjes de volle breedte eerlijk verdelen. v4.894: vaste max i.p.v. 1fr -- met auto-fit+1fr rekte een ENKEL kaartje (bv. 1 hypotheekdeel) alsnog uit tot de volle rijbreedte (~1000px); v4.895: max verder verkleind 320->190px -- met alle velden nu 1 per rij (single-column) en alle cellen op de gedeelde 100px-breedte (zie .be-in/.pd-today/.sw-tog/.hyp-vorm-btn) hoeft een kaartje alleen nog een 100px-cel + padding te omvatten. v4.896: nog verder verkleind 190->140px op Timo's expliciete "kunnen nog smaller" -- 100px-cel + 2×12px-padding=124px is het echte minimum, 140px laat nog een klein beetje lucht over */
  .set-item{background:rgba(255,255,255,0.04); border:1px solid var(--line); border-radius:8px; padding:10px 12px 12px}
  .set-item-h{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
  .set-item-h .t{font-size:10px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--text-3)}
  .set-item-h .set-item-name{flex:1; min-width:0; height:20px; font-size:10px; font-weight:600; letter-spacing:0; text-transform:none; text-align:left; color:var(--text-2); background:transparent; border:1px solid transparent; border-radius:6px; padding:0 5px; margin-left:-5px; font-variant-numeric:normal; transition:border-color .12s,background .12s,color .12s}   /* v5.063 (Timo): margin-left:-5px compenseert de 5px focus-box-padding -> de titeltekst lijnt exact uit met de veld-labels (Vorm/Startdatum/...) eronder, i.p.v. 5px ingesprongen; de bewerk-box behoudt zijn linker-ademruimte (schuift 5px de kaart-padding in) */   /* v5.058 (Timo): text-align:left -- de gedeelde .be-in-basis heeft text-align:right (voor de cijfervelden), maar een deel-/leningnaam hoort links uitgelijnd */   /* v5.056 (Timo): de deel-/leningtitel is nu een bewerkbaar naam-veld -- ziet er als titel uit (transparant, geen form-look) tot je 'm hovert/focust; hogere specificiteit (.set-item-h .set-item-name = 0,2,0) om de .be-in-basisstijl (0,1,0) te verslaan, want de input draagt beide classes (be-in = save-wiring + Enter-navigatie) */
  .set-item-h .set-item-name:hover{border-color:var(--line)}
  .set-item-h .set-item-name:focus{border-color:var(--accent,#57c3dd); background:rgba(255,255,255,0.04); color:var(--text); outline:none}
  .set-item-h .set-item-name::placeholder{color:var(--text-3); opacity:1}
  .set-item-del{background:transparent; border:0; color:var(--text-3); font-size:14px; line-height:1; cursor:pointer; padding:0; opacity:0.6; transition:opacity .12s,color .12s}
  .set-item-del:hover{opacity:1; color:var(--down)}
  .vg-pane .set-card>.set-item-del{position:absolute; top:10px; right:10px; z-index:1}   /* v5.336 (Timo): vastgoed-verwijderknop rechtsboven in de kaart (naamveld weg), zoals .set-card-clear bij de eigen woning */
  .set-item-fields{display:flex; flex-direction:column; gap:8px}   /* v4.889: was een 2-koloms-grid -- op een brede kaart liet dat de 2e kolom (bv. "Resterende maanden") ver van de 1e af staan met een enorme lege tussenruimte; v4.894: alle velden gewoon onder elkaar, 1 per rij, past ook beter bij de nu compactere kaartbreedte (v4.893-fix) */
  .set-item-fields .cfg-f{display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-width:0}
  .set-item-fields .cfg-f label{margin-bottom:0}   /* v4.892: zie toelichting bij .set-fields .cfg-f label hierboven -- zelfde gedeelde .cfg-f label-regel stapelde hier ook */
  .set-item-fields .lbl{font-size:10px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--text-3); white-space:normal; line-height:1.3}
  .hyp-deel-annu{font-size:10px; font-weight:600; color:var(--text-3); line-height:1.3; margin-top:-2px}   /* v5.250: lowkey afgeleide annuïteit-dubbelcheck per hypotheekdeel. v5.295 (Timo): lettertype gelijk aan de parameter-titels (.set-fields .lbl = 10px/600) — "lekker klein" */
  .hyp-deel-annu:empty{display:none}   /* geen lege ruimte zolang bedrag/looptijd nog niet zijn ingevuld */
  .set-add-tile{display:flex; align-items:center; justify-content:center; min-height:80px; border-radius:8px; border:1px dashed var(--line-2); background:transparent; color:var(--text-3); font-size:20px; font-weight:400; cursor:pointer; transition:color .12s,border-color .12s,background .12s; font-family:inherit}   /* v4.895: terug als gestippelde tegel IN de kaartjes-grid (zoals de originele v4.885-opzet) i.p.v. een los klein knopje eronder -- Timo's expliciete wens; kan nu weer zonder de v4.888/4.889-problemen (opvallend groot/breed) omdat de kaartjes-grid inmiddels smal genoeg is (190px, was 320px) en align-items:start al voorkomt dat de tegel uitrekt naar de hoogte van een groter buurkaartje */
  .set-add-tile:hover{color:var(--accent); border-color:rgba(87,195,221,0.4); background:rgba(87,195,221,0.06)}
  .hyp-extra{display:flex; flex-direction:column; gap:6px; margin-top:2px}   /* v5.305 (Timo): vrije lijst extra aflossingen per hypotheekdeel */
  .hyp-extra-row{display:flex; align-items:center; gap:6px}
  .hyp-extra-fields{display:flex; flex-direction:column; gap:4px}   /* bedrag boven, maand/jaar eronder; cellen behouden hun gewone .be-in-breedte (100px), consistent met de andere hyp-velden (v5.307) */
  .hyp-extra-del{flex:0 0 auto; background:transparent; border:0; color:var(--text-3); font-size:14px; line-height:1; cursor:pointer; padding:0 2px; opacity:0.6; transition:opacity .12s,color .12s}
  .hyp-extra-del:hover{opacity:1; color:var(--down)}
  .hyp-extra-add{align-self:flex-start; display:inline-flex; align-items:center; gap:5px; background:transparent; border:0; color:var(--text-3); font-size:10px; font-weight:600; letter-spacing:0; text-transform:none; cursor:pointer; padding:1px 0; font-family:inherit; opacity:0.85; transition:color .12s,opacity .12s}   /* lowkey plusje zoals Timo wil: klein + gedempt tot je 'm hovert */
  .hyp-extra-add:hover{color:var(--accent); opacity:1}
  .hyp-extra-plus{display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; border-radius:4px; border:1px dashed var(--line-2)}
  .hyp-extra-plus svg{width:9px; height:9px; display:block}   /* v5.307 (Timo): SVG-plus i.p.v. glyph -> perfect gecentreerd in het vierkantje */
  .hyp-extra-add:hover .hyp-extra-plus{border-color:rgba(87,195,221,0.45)}
  @media (max-width:600px){ .set-cards{grid-template-columns:1fr} }
  .duosched-wrap{margin-top:8px; max-height:380px; overflow-y:auto; border:1px solid var(--line-2); border-radius:8px; padding:0 10px}
  .duosched-specs{margin-top:10px; flex-wrap:wrap}   /* v5.567 (Timo): spec-regel (aflos-recept) boven het vlak-schema — buiten de scroll-wrap (zou anders onder de sticky totalen wegscrollen); typografie via schedet-tots/schedet-specs */
  /* v5.571 (Timo, "bij deze aflosschema's moet de informatiereeks wel in het vlak"): het DASHBOARD-vlakschema draagt nu hetzelfde
     kader-recept als de aflos-pagina — .duosched-vlak IS een .schedet-card (kader + surface + padding), de spec-regel is de kaartkop
     en de tabel-wrap wordt kaal binnenin. Zelfde 16px kop-tot-tabel als .schedet-ch (app-norm .sec{gap:16px}). */
  .duosched-vlak{margin-top:8px}   /* de 8px die de wrap zelf had (r176) verhuist naar het vlak */
  .duosched-vlak .duosched-specs{margin-top:0; margin-bottom:16px}
  .duosched-vlak .duosched-wrap{margin:0 -10px; border:none; border-radius:0; padding:0 10px}   /* het kader zit nu op .duosched-vlak; de wrap houdt alleen z'n scroll (max-height 380 uit r176). v5.577 (Timo, "bij deze aflosschema's is het nog niet"): de v5.571-`padding:0` klemde de huidige-maand-uitloop weg — die steekt 8px búíten de tabel en de wrap scrollt (overflow), dus zónder zijpadding valt hij precies buiten de clip (gemeten: uitloop x=68, wrap-rand x=76). Nu 10px padding = ruimte voor de uitloop, mét −10px marge zodat de TABEL exact op dezelfde x blijft staan als de spec-regel erboven (anders zou de tabel 10px inspringen). De aflos-pagina had dit al via de r176-padding */
  /* v5.579 (Timo, CSS-hygiëne): `.duosched-tbl{font-size:11px}` VERWIJDERD — die regel deed niets. `.rbtable{…font-size:12px}` staat later in dit bestand met gelijke specificiteit (0,1,0) en wint, dus het schema was altijd al 12px. De 11px suggereerde een norm die nooit gold (en waar v5.530 de koersmonitor wél op gelijktrok). Beeld ongewijzigd. */
  .duosched-tbl th{position:sticky; top:0; background:var(--surface); z-index:2}   /* v5.568 (Timo): terug naar top:0 — de sticky totalen-SUMROW is vervallen (Totale rente/aflossing staan nu als gekleurde paren in de spec-regel boven de tabel); de kolomkoppen zijn weer de enige sticky laag */
  .schedet-specs .schedet-tot b.sched-rente{color:var(--down)}   /* v5.568 (Timo, "de kleur houden we"): Totale rente rood in de spec-reeks — wint van de neutrale .schedet-specs-waarde-regel */
  .schedet-specs .schedet-tot b.sched-afl{color:var(--up)}   /* v5.568: Totale aflossing groen */
  /* v5.579: `.duosched-tbl tbody tr{height:28px}` VERWIJDERD — dood; `.rbtable tbody tr{height:36px}` wint (later, gelijke specificiteit). Werkelijke rijhoogte was en blijft 36/37px. */
  .duosched-tbl tbody td{padding-top:0; padding-bottom:0}   /* v5.579: `height:28px; line-height:28px` eruit — die twee waren dood (`.rbtable tbody td{height:36px; line-height:36px}` wint, later + gelijke specificiteit). De padding-nullen LEVEN wél en blijven staan. Beeld ongewijzigd. */
  .duosched-tbl tr.duosched-cur td{background:var(--accent-soft)}
  /* v5.573 (Timo, "de deze-maand gloed mist de ronde uiteinden die net iets verder gaan"): de huidige-maand-balk krijgt de vorm
     van de hover-balk (.rbtable tbody tr:hover td, r603/604) — 6px ronde uiteinden + 8px uitloop, in accent-soft i.p.v. wit-04.
     v5.574b (Timo, "onderste lijntje curved omhoog"): NIET via box-shadow. Die tekent een KOPIE van de cel 8px opzij, ACHTER de
     doorzichtige achtergrond -> in de overlap stapelen twee lagen accent-soft (0.10 op 0.10 = ~0.19) en in de 8px-uitloop ligt er
     maar één. Bij de ronde hoek loopt die dekkingsgrens diagonaal = het "curvende lijntje". De hover heeft dat artefact óók, maar
     bij wit-0.04 zie je het niet. Nu een pseudo-element dat NAAST de cel ligt (geen overlap, dus overal exact één laag 0.10) en
     dat zelf de ronding draagt; de cel houdt vierkante hoeken, samen vormen ze één doorlopende balk met ronde uiteinden. */
  .duosched-tbl tr.duosched-cur td:first-child, .duosched-tbl tr.duosched-cur td:last-child{position:relative; overflow:visible}   /* v5.575: overflow MOET hier visible — .rbtable tbody td (r591) staat op hidden en sneed het pseudo-element (8px búíten de cel) compleet weg, waardoor de ronde uiteinden verdwenen (Timo: "nu is de ronding weer weg"). Een box-shadow had daar geen last van (die valt buiten de overflow-clip van het element zélf), een pseudo-KIND wel. Alleen deze twee cellen van de huidige-maand-rij; de rest van de tabel houdt z'n clip */
  .duosched-tbl tr.duosched-cur td:first-child::before{content:""; position:absolute; left:-8px; top:0; bottom:0; width:8px; background:var(--accent-soft); border-radius:6px 0 0 6px; pointer-events:none}
  .duosched-tbl tr.duosched-cur td:last-child::after{content:""; position:absolute; right:-8px; top:0; bottom:0; width:8px; background:var(--accent-soft); border-radius:0 6px 6px 0; pointer-events:none}
  .duosched-tbl tbody tr:hover td{background:rgba(255,255,255,0.04)}   /* v5.525 (Timo, tabel-consistentie): rij-hover ook op het schema; compact-variant blijft. v5.588-kandidaat (Timo 20-7): :not(.duosched-cur) verwijderd → hover donkert nu óók de huidige-maand-rij als elke andere rij (accent-soft r190 wordt onderdrukt: deze regel (0,2,3) wint van r190 (0,2,2)). De accent-markering wijkt dus tijdens hover; de ronde uiteinden volgen hieronder */
  .duosched-tbl tr.duosched-cur:hover td:first-child::before, .duosched-tbl tr.duosched-cur:hover td:last-child::after{background:transparent}   /* v5.588-kandidaat (Timo 20-7): tijdens hover de accent-soft ronde uiteinden (r199/200) weg (deze regel (0,4,3) wint) → de gedeelde .rbtable-hover-box-shadow (r614/615, wit-0.04, 6px rond, 8px uitloop) levert dan exact dezelfde ronde uiteinden als elke andere gehoverde rij; bij wit-0.04 geen dubbellaag-artefact (de v5.574b-reden om pseudo's i.p.v. box-shadow te gebruiken gold alléén voor accent-soft) */
  .duosched-tbl .sched-rente{color:var(--down)}
  .duosched-tbl .sched-afl{color:var(--up)}
  .duosched-tbl td.sched-kwijt{color:var(--up)}   /* v5.544 (Timo): DUO-kwijtschelding heeft geen eigen kolom meer — een kwijtgescholden restschuld kleurt groen (var --up) in de Restschuld-kolom */
  /* v5.355 (Timo): Aflosschema-pagina + Koersmonitor — eigen views (zelfde mechaniek als .markets-view: fixed onder de header, z 200 onder de zijbalk 250); vervingen het v5.351/354-overlay .schedet + de "Per deel"-knop */
  .aflos-view, .kmon-view{display:none; position:fixed; inset:57px 0 0 0; box-sizing:border-box; z-index:200; background:var(--bg,#07090d); overflow:auto}
  body.view-aflos .aflos-view, body.view-kmon .kmon-view{display:block}
  /* v5.524 (Timo): Superoverzicht — één fullscreen-grafiek; overflow:hidden want scrollen zoomt de periode (geen paginascroll) */
  .overzicht-view{display:none; position:fixed; inset:57px 0 0 0; box-sizing:border-box; z-index:200; background:var(--bg,#07090d); overflow:hidden}
  body.view-overzicht .overzicht-view{display:block}
  /* A-15.1 (Timo 28-7): de zakelijke dashboardpagina — zelfde view-recept als .aflos-view/.kmon-view hierboven
     (fixed onder de header, z 200 onder de zijbalk 250), en overflow:auto want deze pagina groeit met het aantal
     blokken; het is geen vol-scherm grafiek zoals het Superoverzicht. */
  .zakelijk-view{display:none; position:fixed; inset:57px 0 0 0; box-sizing:border-box; z-index:200; background:var(--bg,#07090d); overflow:auto}
  body.view-zakelijk .zakelijk-view{display:block}
  .zak-wrap{display:flex; flex-direction:column; width:100%; box-sizing:border-box; padding:22px 36px 18px; gap:14px}   /* zelfde padding als .overzicht-wrap, dus dezelfde kantlijn als elke andere pagina */
  .zak-tabs{display:flex; gap:4px; flex-wrap:wrap}   /* .eig-tab is het bestaande tabrecept (Instellingen); hergebruikt i.p.v. een tweede tabstijl */
  .zak-leeg{font-size:12px; color:var(--text-3); max-width:60ch; line-height:1.6}
  .overzicht-wrap{display:flex; flex-direction:column; width:100%; height:100%; box-sizing:border-box; padding:22px 36px 18px}
  .ov-head{align-items:center; margin:0 0 14px}
  .ov-chips{display:flex; gap:4px}
  .ov-chip{font-family:inherit; font-size:12px; font-weight:500; color:var(--text-3); background:transparent; border:1px solid transparent; padding:5px 14px; border-radius:8px; cursor:pointer}   /* .nw-b-pilltaal (v5.439): rust = ghost, actief = accent-wash */
  .ov-chip:hover{color:var(--text-2)}
  .ov-chip.on{background:rgba(87,195,221,0.10); color:var(--accent)}
  .ov-tkpick{font-family:inherit; font-size:12px; font-weight:600; color:var(--text-2); background:rgba(255,255,255,0.04); border:1px solid var(--line-2); padding:5px 12px; border-radius:8px; cursor:pointer; margin-left:12px; white-space:nowrap; transition:color .12s,background .12s,border-color .12s}   /* v5.526: koers-kiezer in het Overzicht — pill met de kaart-hover-huid, zichtbaar als selecteerbaar (i.t.t. de vlakke chips) */
  .ov-tkpick:hover{color:var(--text); border-color:var(--line); background:rgba(255,255,255,0.06)}
  .ov-tkpick[hidden]{display:none}
  .ov-periode{margin-left:auto; font-size:11px; font-weight:600; letter-spacing:.04em; color:var(--text-3); font-variant-numeric:tabular-nums; white-space:nowrap}
  /* v6.133: het koerspercentage in die regel draagt de richting in KLEUR i.p.v. in een plus/minteken (Timo's harde regel) */
  .ov-periode .ovpc.up{color:var(--up)} .ov-periode .ovpc.down{color:var(--down)} .ov-periode .ovpc.flat{color:var(--text-3)}
  .ov-canvas-wrap{flex:1 1 auto; position:relative; min-height:0}
  .ov-canvas-wrap canvas{position:absolute; inset:0}
  .ov-hint{flex:none; text-align:center; font-size:11px; color:var(--text-3); padding-top:10px}
  .aflos-wrap{max-width:1120px; margin:0 auto; padding:26px 36px 40px}   /* v5.357 (Timo): één royaal schema i.p.v. grid-hokjes -> leesbare breedte, gecentreerd. v5.538 (Timo): 1120->980px = gelijk aan de koersmonitor (.kmon-wrap) + minder loze ruimte tussen de kolommen. v5.570 (Timo): TERUG naar 1120 — de spec-reeks in de kaartkop groeide in v5.568 met twee totaal-paren en vulde 852 van de 874px, dus er paste geen Exporteer-knop meer naast en de paar-gap kon niet ademen. **v5.572: .kmon-wrap ging weer los naar 980 — deze twee zijn NIET meer één maat (die pagina heeft ~490px kolominhoud en werd door 1120 half leeg). Breedte los, HOOGTE gelijk: klemgetal 226 + de gedeelde .schedet-ch houden beide tabellen op dezelfde start-y** */
  .aflos-cats{display:flex; flex-wrap:wrap; align-items:center; gap:8px 26px}   /* v5.561 (Timo): rij categorie-dropdowns; v5.564: de omvattende .schedet-head draagt de 18px-ondermarge (= kmon) — eigen marge weg */
  .aflos-catsel{display:inline-flex; align-items:center; gap:5px; background:none; border:0; padding:0; cursor:pointer; font-family:inherit; font-size:11px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--text-3); transition:color .12s}   /* eyebrow-tokens (= .ey/.dh-viewsel-maat); v5.564: line-height:1 weg -> regelhoogte exact gelijk aan de kmon-.ey (zelfde 11px + default line-height = kaarten beginnen op dezelfde y) */
  .aflos-catsel:hover{color:var(--text-2)}
  .aflos-catsel.on{color:var(--gold)}
  .aflos-catsel .dh-vcaret{transform:none}   /* v5.568 (Timo, "icoontjes niet goed uitgelijnd"): de dashboard-titel-shift (translateY 1px) hoort hier niet — de knop centreert al via flex; met de shift hing de ▸ onder de caps-lijn */
  .aflos-view .duosched-wrap{margin-top:0; max-height:calc(100vh - 226px); max-height:calc(100dvh - 226px); border:none}   /* v5.564 (Timo, "zelfde plek boven en onder"): ALLES = de koersmonitor — zelfde klem-getal (210, kmon .tbl-x), margin-top 0 (de dashboard-8px gold hier niet; kmon-tabel zit ook direct onder de kop) en het bovenblok deelt het schedet-head-skelet. Kaartkoppen zijn beide 22px (min-height) -> boven- én onderkant identiek */
  /* v5.561: de :has(.aflos-deelrow)-variant is vervallen — geen pill-rij meer (delen kiezen via het categorie-dropdown-menu); de −216-basisregel hierboven dekt de hele pagina. v5.535: geen eigen wrap-rand — de .schedet-card is het ene kader. v5.377 (MB-15): dvh na vh; ≤760 zet de klem op none. */
  .kmon-wrap{max-width:1060px; margin:0 auto; padding:26px 36px 40px}   /* monitor = compacte lijst; kolommen bij elkaar i.p.v. dashboard-breed uitgesmeerd. v5.570: 980->1120 meebewogen met .aflos-wrap. **v5.572 (Timo): TERUG naar 980 — die verbreding was voor de aflos-KAARTKOP (de spec-reeks paste niet meer), en de koersmonitor heeft dat probleem niet: ~490px kolominhoud in 994px tabel = 51% loos, tegen 43% bij 980. De twee wraps zijn dus BEWUST niet meer gelijk (de v5.538-gelijkstelling gold toen beide 980 waren en de aflos-kop nog geen totalen-paren droeg). Wat WEL gelijk blijft: de hoogte-pariteit (klemgetal 226 + .schedet-ch), dus beide tabellen starten nog op dezelfde y** */
  .kmon-tbl{width:100%; table-layout:auto}   /* v5.468 (Timo: "kolommen logischer qua ruimte"): vaste kolomindeling — één lange naam blies de Naam-kolom anders op tot 373px terwijl de rest krap bleef */
  .kmon-view .kmon-tbl{font-size:11px}   /* v5.530 (Timo, koersmonitor-dichtheid gelijk aan aflosschema): databreedte 12px->11px, gelijk aan .duosched-tbl (r177). MOET via de .kmon-view-prefix (0,2,0): de koersmonitor-tabel draagt óók de gedeelde .rbtable-basisklasse en .rbtable{font-size:12px} (r559, later + gelijke specificiteit) wint anders van een kale .kmon-tbl (0,1,0) — dat was precies de bug */
  .kmon-view .tbl-x{padding:0 10px; max-height:calc(100vh - 226px); max-height:calc(100dvh - 226px); overflow-y:auto}   /* v5.535 (Timo): de tabel zit nu IN de .kmon-card (.schedet-card) — die draagt het ENE kader (rand/radius/surface, vlak); .tbl-x is kaal en houdt alleen de interne scroll. Offset 170->210 want de kaartkop (.schedet-ch met de statustelling) staat er nu boven (~35 minder dan de aflos-245: geen tab-rij). winW=0 blokkeert meting -> desnoods dit ene getal bijstellen. Oude v5.416/5.533-comment vervallen */   /* v5.416: de monitor-tabel draagt het §4-kaartrecept (surface + line-2 + radius 8). v5.533 (Timo): venster VOLLEDIG gelijk aan het aflosschema — intern SCROLL-venster (max-height + overflow-y:auto, sticky kop blijft plakken) i.p.v. meescrollen met de pagina; schaduw WEG (de aflos-.schedet-card is bewust vlak, r925); padding als .duosched-wrap (0 10px). Offset 170 = topbar 57 + wrap-pad-top 26 + kop ~32 + wrap-pad-bottom 40 + marge — winW=0 blokkeert exacte meting, desnoods dit ene getal bijstellen */
  .kmon-tbl th{position:sticky; top:0; background:var(--surface); z-index:1}   /* v5.416: sticky-kop op de kaart-huid (was --bg toen de tabel nog los op de pagina stond) */
  .kmon-fth{user-select:none; -webkit-user-select:none; white-space:nowrap}   /* v5.403/v5.415: kolomkoppen dragen het app-brede .mh-f-knopje (zie de .dtable-regels, uitgebreid met .kmon-tbl) — de th zelf is geen klikdoel meer en .on/.dh-vcaret zijn vervallen (fsort kleurt het icoon) */
  .kmon-pxe{cursor:pointer}
  .kmon-pxe:hover{color:var(--accent)}   /* v5.404: bewerkbare koers-cel (bronloos, moderator) */
  .kmon-view .kmon-tbl td.kmon-pxm{color:var(--accent)}   /* v5.592 (Timo 20-7, punt 2): handmatig geprijsde koers-cel blijft vast accent — app.js rendert de klasse alléén in de moderator-weergave (_modState), klanten zien de normale kleur. Specificiteit MOET (0,3,1) via de .kmon-view-prefix: de kale .kmon-pxm (0,1,0) verloor de cascade van de latere .rbtable-tekstkleurregels (zelfde v5.530-les als de font-size) — computed bleef --text; preview-meting bevestigde accent #57c3dd na deze prefix */
  .kmon-pxin{width:90px; text-align:right}
  .kmon-tools{display:flex; align-items:center; gap:14px}
  .kmon-view .kmon-tbl td.kmon-px, .kmon-view .kmon-tbl th:nth-child(5){padding-right:30px}   /* v6.158 (Timo: "dit is echt niet goed verdeeld", en hij had gelijk). GEMETEN als VISUELE gaten tussen de tekstblokken, niet als kolombreedtes: Naam-Ticker 59px, Ticker-ISIN 59, ISIN-Koers 83, Koers-Beurs 34, Beurs-Update 61. De uitschieters komen allebei van deze ene kolom: hij is als enige RECHTS uitgelijnd, dus al zijn lucht valt aan de linkerkant en het gat erna wordt te klein. 24px extra rechts duwt de koersen naar links en verdeelt precies dat verschil. */
  .kmon-view .kmon-tbl td, .kmon-view .kmon-tbl th{text-align:left}   /* v5.409: .kmon-view-prefix — de bedoelde links-uitlijning verloor de cascade van de latere .rbtable-basisregel (rechts); viel nooit op zolang de naamkolom grotendeels leeg was */
  .kmon-view .kmon-tbl td{padding-left:24px}   /* v6.154 (Timo 27-7: "de tussenruimtes tussen kolommen gelijk verdelen gemeten op het langste punt per kolom"): EEN inspringing voor elke datacel, ook de tnum-kolommen die hier eerder buiten vielen. De kop staat 20px links daarvan (de breedte van het filtericoon), zodat data onder het kolomWOORD blijft staan - de regel van v5.467/v5.884/v5.710, nu met een getal in plaats van vier. */   /* v5.467 (Timo: "kolomtitels niet uitgelijnd"): de links-uitgelijnde data-cellen springen 20px extra in (10→30) zodat de tekst exact onder het kop-LABEL valt — de kop draagt het 20px-.mh-f-trechtertje vóór het label, de datacel niet; bij de rechts-uitgelijnde kolommen (.tnum: Koers/Update) valt dat vanzelf weg (label rechts-uitgelijnd) */
  .kmon-view .kmon-tbl td:first-child{padding-left:20px}   /* v6.158 (Timo: "status kolom staat ook nog steeds verkeerd uitgelijnd"): op de norm van 24px, gelijk aan elke andere datacel. De 10px-correctie van v5.467 was optisch bedoeld maar leest als scheef - het bolletje stond links van de S van Status. De harde regel wint: data onder het kolomwoord. */   /* WAS v5.467: */   /* v5.467: het Status-BOLLETJE zit iets anders in zijn cel dan tekst — 10px minder inspringen zodat het onder het "Status"-label valt */
  .kmon-view .kmon-tbl th.kmon-exch{text-align:left; padding-left:4px; padding-right:12px; white-space:nowrap}
  .kmon-view .kmon-tbl td.kmon-exch{text-align:left; padding-left:24px; padding-right:12px; white-space:nowrap}   /* v5.884 — UITLIJNEN OP HET WOORD, NIET OP HET FILTERICOON (Timo 23-7, nu hoofdregel in DESIGN.md §Tabellen). GEMETEN op het echte renderpad: elke andere kmon-kolom draagt td-padding = th-padding + 20px, en die 20px is exact de filterknop (.mh-f 15px + margin-right 5px) die vóór het kopwoord staat. Status 0/20, Naam 10/30, Ticker 10/30, ISIN 10/30, Update 28/48 — allemaal afwijking 0,0px tussen celinhoud en kopwoord. Alleen deze kolom stond op 12/12 en week dus 12,7px af. Nu 12/32: de eerste vlag begint exact onder de "B" van Beurs, een tweede vlag steekt naar rechts uit. */   /* v5.884 (Timo 23-7, in twee stappen: eerst "in het midden", daarna de precisering "zorg dat de vlaggetjes links uitgelijnd zijn en als er dus 2 vlaggetjes zijn, dan moet het linker vlaggetje hiervoor gepakt worden, rechter vlaggetje steekt dus uit"): LINKS. GEMETEN in de v5.883-stand met rechts uitlijnen: kolom 93,4px, een enkele vlag 15px en een FX-PAAR 36,7px, allebei tegen de rechterrand — dus begon het paar 21,7px verder naar links en liep de eerste vlag uit de lijn. Center legde de MIDDELPUNTEN gelijk, maar dan begint het paar nog steeds elders; alleen links uitlijnen legt de EERSTE vlag van elke rij op één vaste x, waarna een tweede vlag naar rechts uitsteekt. Vervangt de v5.709-rechtsstand: die dateert van vóór de FX-paren (v5.881), toen elke cel even breed was. */   /* v5.709 (Timo: "onlogisch veel ruimte tussen beurs en update"): center -> right. Gemeten gat tussen vlag en update-tijd was 100px: 31px rechts van de gecentreerde vlag + 69px links van de rechts-uitgelijnde tijd. Beide kolommen zijn KOP-gelimiteerd (kop 72 resp. 92px, inhoud 15 resp. 23px), dus smaller maken hielp niets - gemeten 0px winst. De v5.468-centrering was er om de vlag niet te laten zweven; rechts uitlijnen doet dat net zo goed en brengt hem naar zijn buur toe. */   /* v5.468 (Timo): herkomst-vlaggenkolom gecentreerd (override op de v5.467-30px-inspring) */
  .kmon-view .kmon-tbl td.kmon-exch{font-size:11px; letter-spacing:.5px; color:var(--text-3)}   /* v6.151 (Timo 27-7, "de vlaggetjes een beetje goedkoop, ik hou van minimalistisch"): landcodes i.p.v. emoji. Daarmee vervallen de twee redenen voor de oude waarden: 13px was er om de emoji leesbaar te houden (de tabelnorm is 12px, zie v6.138) en de 2px letter-lucht scheidde twee vlaggen die anders aan elkaar plakten. Nu de tabelmaat, een half puntje lucht om de hoofdletters te laten ademen, en de gedempte tekstkleur — de herkomst is naslag, geen cijfer. */   /* v5.530 (Timo, koersmonitor-dichtheid gelijk aan aflosschema): vlaggen 15px->13px zodat ze in de compacte 28px-rij passen en verticaal centreren */
  /* v5.571 (Timo, "ruimte tussen kolommen kan beter verdeeld"): herverdeeld op GEMETEN inhoud i.p.v. gevoel. Meting bij 994px tabel
     (breedste cel per kolom vs toegewezen breedte): Status 80 breed / 0 inhoud (bolletje 7px), Naam 338/296 (maar 42 lucht = de
     enige krappe), Ticker 159/79, Koers 139/82, Beurs 129/16, Update 149/16. Beurs+Update hielden samen 246px loos terwijl de
     naamkolom knelde. Ondergrens per kolom is de KOP incl. filter-icoon+padding (Status 78, Naam 84, Ticker 87, Koers 98,
     Beurs 88, Update 113) — daar blijft elke nieuwe breedte boven. */
  /* v5.705 (Timo 21-7, "ruimte tussen kolommen moet beter verdeeld worden"): herijkt op GEMETEN behoefte per kolom
     (max van kop-inhoud en breedste celinhoud, incl. padding) i.p.v. op gevoel. Meting bij de 854px-tabel:
       Status 61 · Naam 185 · Ticker 95 · ISIN 113 · Koers 76 · Beurs 72 · Update 92  = 694px
     Dat liet 160px (19%) ongelijk verdeeld liggen: Update had er 36 over en Koers 26, terwijl Naam met 20 het
     krapst zat én als enige kolom zijn inhoud afkapte. De lucht gaat nu grotendeels naar Naam (24->33%); de
     kop-gelimiteerde kolommen (Status/Koers/Beurs/Update — daar is de KOP breder dan de inhoud, niet andersom)
     leveren in tot net boven hun eigen ondergrens. */
  /* ── KOLOMRUIMTE OPNIEUW VERDEELD (v6.151, Timo 27-7: "zorg dat de tussenruimte tussen kolommen opnieuw wordt
     verdeeld want kolommen hebben nu andere breedtes" + "tussenruimte mag kleiner") ────────────────────────────
     Aanleiding: de Beurs-kolom droeg vlaggen en draagt nu landcodes, dus zijn inhoud kromp van 40+ naar 40px terwijl
     hij 93px hield. GEMETEN op 1710px vóór deze ronde (breedste inhoud + inspringing per kolom, over alle 178 rijen):
       Status 75px voor 7px bolletje · Naam 290 voor 240 · Ticker 121 voor 84 · ISIN 140 voor 123 ·
       Koers 93 voor 64 · Beurs 93 voor 72 · Update 121 voor 90.
     Twee dingen tegelijk: de INSPRINGING van elke datacel gaat met 6px omlaag (30->24, Status 20->14, Beurs 32->26,
     Update 48->42) en de kopregels schuiven met precies datzelfde bedrag mee, want data staat onder het kolomWOORD
     en het verschil van 20px is de breedte van het filtericoon — verschuif je er één, dan lopen kop en data uit de
     pas. De vrijgekomen breedte gaat naar Naam, de enige kolom waar tekst nog echt tekortkomt. */
  /* ── KOLOMBREEDTE IS DYNAMISCH GEWORDEN (v6.154, Timo 27-7: "die tussenruimte kan opzich wel dynamisch
     denk ik? Zolang het gemeten blijft op het breedste punt per kolom") ──────────────────────────────────
     WAT ER WAS: zeven handmatige percentages (v5.468 e.v.), elk ooit met de hand gemeten en daarna telkens
     nagesteld als de inhoud veranderde - vandaag nog, toen de vlaggen landcodes werden. Dat is precies het soort
     getal dat stil verkeerd gaat staan.
     WAT ER NU IS: de browser meet zelf. Elke kolom krijgt `width:1%` plus `white-space:nowrap`, en dat betekent bij
     table-layout:auto "zo smal als je breedste cel". De Naam-kolom krijgt `width:100%` en slokt alles op wat
     overblijft; die heeft de ruimte ook nodig, want daar staan de lange fondsnamen (en die dragen al hun fade).
     De TUSSENRUIMTE is daarmee overal exact gelijk: 24px inspringing plus 12px rechts, ongeacht wat er in de cel
     staat. Verandert de inhoud - een nieuwe ticker, een langere code - dan schuift alles vanzelf mee.
     table-layout:fixed kwam uit v5.468 omdat een lange naam de kolom opblies; dat kan hier niet meer gebeuren,
     want de naamkolom is nu juist degene die de rest opvangt. */
  .kmon-view .kmon-tbl th{width:1%; white-space:nowrap; padding-left:4px}   /* v6.157 (Timo 27-7: "kolommen zijn verkeerd uitgelijnd aan hun titel, is een harde regel voor"). GEMETEN: de datacellen gingen in v6.154 naar één norm van 24px, maar de KOPPEN hielden hun oude 10px, en 10 + 20px filtericoon is 30. De data stond daardoor 6px links van het kolomwoord (Koers 4px). Met 4px hier klopt de som weer: 4 + 20 = 24. */
  /* v6.157 (Timo 27-7: "dit is toch niet mooi verdeeld? Extreme open ruimte naast de namen kolom"). De Naam-kolom had width:100% en slokte daarmee ALLE restruimte op: gemeten 417px breed voor 244px aan namen, terwijl elke andere kolom exact op zijn inhoud stond. Zonder die regel verdeelt de browser het overschot gelijk over alle zeven — gemeten +25px per kolom, en Naam komt op 269px. Dat is wat hij vroeg: gelijke tussenruimte, gemeten op het breedste punt per kolom. */
  .kmon-view .kmon-tbl td{white-space:nowrap}   /* v6.155 — DIT HOORT BIJ DE REGEL HIERBOVEN EN MAG ER NOOIT VAN LOS. Bij table-layout:auto krimpt een kolom tot zijn inhoud, maar een cel die MAG afbreken laat de browser afbreken in plaats van de kolom breder maken. Gevolg, meteen zichtbaar bij de eerste render: "EUR 57.254" viel over twee regels en de rijhoogtes sprongen. Met nowrap is de breedste cel echt de ondergrens van de kolom. */
  .kmon-view .kmon-tbl td:nth-child(2){white-space:normal}   /* de Naam-kolom is de uitzondering: die vangt juist alle restruimte op en mag lange namen afkappen (met de fade van _FADE_SEL) i.p.v. de tabel op te rekken */
  .kmon-view .kmon-tbl td:nth-child(2){/* Update 11->13% (v5.740): de breedste vorm is NIET de aftelling ("13u" ~25px) maar de leeftijd-tekst "45 min" (53px, van een rij die niet ververst). Met de 48px inspringing en het 14px fase-icoon vraagt dat 115px; op 11% (103px) viel het icoonvak er net buiten. De 2% komt van Naam (33->31%), die lange namen toch al met de .nm-clip-fade afkapt. */ /* Update 11->18% (v5.739): sinds v5.732 staat hier niet meer alleen "0:09" (~30px) maar ook "over 45m" — 73px gemeten @11px, plus het 14px fase-icoon en 48px inspringing = 135px nodig. Op 11% (88px) kapte de cel af tot "over 13". De 7% komt van de Naam-kolom (33->26%); die kapte de langste namen toch al af met de .nm-clip-fade (Vanguard FTSE Emerging Markets USD (Acc) vraagt 342px, kreeg er 316) — dus daar kost het geen leesbaarheid, hier wel. */ white-space:nowrap; /* <- was r.263 */ overflow:hidden}   /* Naam: vangnet — kap een extreem lange naam af i.p.v. de kolom op te rekken */
  .kmon-view .kmon-tbl td.tnum, .kmon-view .kmon-tbl th.tnum{text-align:right}
  .kmon-tbl th:last-child, .kmon-tbl td:last-child{white-space:nowrap; padding-left:4px}   /* v6.151: 28->22px, dezelfde 6px die elke andere kolom inlevert; de 42px van de datacel hieronder schuift ermee mee zodat kop en data uitgelijnd blijven. */   /* v5.739: de width hier verwijderd — de kolombreedte staat bij de nth-child-regels hierboven. Twee plekken die hetzelfde zetten is precies hoe deze fix eerst misging: mijn 16% hier verloor stil van een nth-child(7)-regel verderop in het bestand. */
  .kmon-view .kmon-tbl td.kmon-upd, .kmon-view .kmon-tbl th:last-child{text-align:left}
  .kmon-view .kmon-tbl td.kmon-upd .kmon-tm{display:inline-block; min-width:30px;   /* v6.151: 42->30px. Dat vakje is er zodat de fase-tekst niet verspringt als de tijdvorm wisselt, maar 42px was afgestemd op "45 min" mét lucht; 30px draagt diezelfde vorm nog steeds en haalt 12px gat weg tussen de timer en pre/post. */ text-align:left; font-variant-numeric:tabular-nums}   /* v5.729 (Timo: "zorg dat de timer zelf de uitlijning mooi houdt, het zonnetje of maantje komt er dus naast te staan zonder dat de timer zelf meer naar links schuift"): de TIJD krijgt een vast vak. Zonder die vaste breedte zou het icoon direct achter een variabel brede tekst plakken ("0:39" vs "45 min" vs "—") en dus per rij op een andere x-positie staan; nu begint de icoon-kolom altijd op dezelfde plek en verschuift de timer zelf nooit. 42px = de breedste tijdvorm ("45 min") op 11px tabular-nums, gemeten in de preview. */
  .kmon-view .kmon-tbl td.kmon-upd .kmon-fase{display:inline-block; width:24px; margin-left:2px; font-size:9px; vertical-align:middle; position:relative; top:-1.5px;   /* v6.161: en dat is bewust NIET het rekenkundige optische midden. Drie standen gemeten en aan Timo getoond: op de baseline (top:-0.5) stond "pre" te laag, op het volle optische midden (top:-2.4, waar de inktmiddens exact gelijk liggen) zag hij het zweven - "nu zitten ze te hoog". De reden dat rekenen hier misleidt: het oog lijnt tekst uit op de BASELINE, en het optische midden trekt de kleinere tekst daar 2,4px vanaf. Deze -1,5px zit ertussenin: de x-hoogtes lopen gelijk, de baselines nog bijna. v6.158: GEMETEN op de inkt in plaats van op de regelbox (canvas measureText, actualBoundingBox): de timer is 11px met cijfers zonder staart, dus zijn optische midden ligt 4,01px boven de baseline; "pre" is 9px met een p-staart eronder en komt op 1,57px. Het stond daardoor 1,94px te laag. Deze -2,4px zet de twee middens gelijk. */ color:var(--text-3); letter-spacing:.3px}   /* v6.153: de eigen line-height:1 is eruit (Timo: "nu nog zorgen dat het midden op gelijke hoogte zit"). Een inline-block met een AFWIJKENDE regelhoogte legt zijn baseline elders dan de tekst ernaast, en bij 9px tegen 11px zag je dat: "pre" zweefde net boven de tijd. Zonder eigen regelhoogte erft het vakje die van de cel en vallen beide baselines samen. v6.151: "pre"/"post" i.p.v. ☀️/🌙 (zie _kmonFaseIco), op Timo's tweede ronde: "ik wil de voor en na veranderen in pre en post en het mag een wat kleiner lettertype zijn en echt dicht tegen de timer aan zitten". Vandaar 9px i.p.v. 10 en nog maar 2px lucht naar de tijd; het vakje is 24px, precies genoeg voor "post". Blijft een VAST vakje, om de reden die hieronder al stond. Eigen, gedempte kleur zodat het naast de tijd staat en er niet mee concurreert. */   /* v5.729: vast vakje voor ☀️/🌙, óók als het leeg is — zo is de kolombreedte identiek met of zonder icoon */
  .kmon-view .kmon-tbl td.kmon-upd .kmon-tm.kmon-wacht{color:var(--text-3); animation:kmon-wacht 1.4s ease-in-out infinite}   /* v5.751 (Timo: "ik wil geen streepjes zien bij de update kolom, nooit — als een update nog opgehaald wordt mag er een klein laadsymbooltje tonen"): de wachtstand "…" pulseert zacht, zodat je ziet dát er iets onderweg is i.p.v. een dood streepje. Zelfde gedempte toon als de gesloten-markt-aftelling; de class wordt in beide renderpaden én op de 1s-tik gezet (_kmonWachtSync), want een pulserende punt die blijft staan zodra de tijd binnenkomt is erger dan geen pulse. */
  @keyframes kmon-wacht{0%,100%{opacity:.3} 50%{opacity:.85}}
  .kmon-view .kmon-tbl td.kmon-upd[data-kk="off"] .kmon-tm, .kmon-view .kmon-tbl td.kmon-upd[data-kk="none"] .kmon-tm{color:var(--text-3)} /* v5.959 (Timo): de handmatige-prijs-datum in het grijs, zelfde demping als de dichte-markt-aftelling */   /* v5.733 (Timo: "maak de afteller van een gesloten beurs wel grijs, zodat het opvalt dat die nog niet open is op het moment"): de "over 3u"-aftelling is een WACHT-stand, geen live tik — die dempt naar --text-3, dezelfde toon als de ISIN- en tickerkolom. De lopende timer van een open markt houdt de gewone tekstkleur, zodat je in één blik ziet welke regels nu echt bewegen. Stuurt op data-kk (de statuscode die de cel al draagt), dus geen extra klasse-administratie in beide renderpaden. */
  .kmon-view .kmon-tbl td.kmon-upd{padding-left:24px}   /* v5.710 (Timo: "klein tikje naar rechts, uitlijnen met de titel"): de laatste kolom heeft 28px padding (v5.368), maar de KOP begint daarna nog met het filtericoon (15px) + 5px marge — het woord "Update" staat dus op 28+20. Met 28px stond de tijd onder het ICOON i.p.v. onder het label. 48 = 28 + die 20, exact dezelfde +20-regel als r246 voor de andere links-uitgelijnde kolommen. */   /* v5.709: de update-tijd stond rechts in een kolom die 4x zo breed is als zijn inhoud (de kop 'Update' is maatgevend), waardoor er 69px wit tussen Beurs en de tijd viel. Links uitgelijnd staat de tijd onder zijn eigen kop-label; het restant wit schuift naar de tabelrand, waar het als marge leest i.p.v. als gat. Kop mee, anders lijnen kop en data niet meer uit. */   /* v5.368 (V17c): STATUS-kolom tegen de data aan i.p.v. zwevend aan de rechterrand */
  /* v5.565: .kmon-sum-eigen stijl vervallen — de telling draagt het schedet-tots/schedet-specs-recept (label 11px --text-3 + waarde 600 --text-2, gap 16), identiek aan de aflos-kaartkop */
  .kmon-view .kmon-tbl tbody tr:hover td{background:rgba(255,255,255,0.04)}   /* v5.525 (Timo, tabel-consistentie): rij-hover ook op de koersmonitor — was de enige datatabel zónder hover-vulling */
  .kmon-view .kmon-tbl tbody tr{height:28px}   /* v5.530 (Timo, koersmonitor-dichtheid gelijk aan aflosschema): vaste compacte rijhoogte = de .duosched-tbl-norm (r179), was inhoud-gedreven/luchtig */
  .kmon-view .kmon-tbl tbody td{height:28px; line-height:28px; padding-top:0; padding-bottom:0; vertical-align:middle; border-bottom:none}   /* v5.530 (Timo, koersmonitor-dichtheid gelijk aan aflosschema): het .duosched-tbl td-recept (r180) + vertical-align:middle zodat vlag/bolletje/maantje/tekst centreren; de padding-left-uitlijnregels (r221-223: 30/20/28px) blijven — dit zet alleen top/bottom. v5.533 (Timo): GÉÉN rijlijnen — het aflosschema heeft geen td-border-bottom; overschrijft de gedeelde .rbtable-basis (r579, 1px rgba(255,255,255,.04)) */
  .kmon-tbl .tk-live{display:inline-block; vertical-align:middle}
  .kmon-tbl td.kmon-tk{color:var(--text-3); white-space:nowrap}   /* v6.151 (Timo 27-7: "er moeten ook 2 kleuren zijn, of wit, of de grijstint, geen andere variaties in de koersmonitor"). GEMETEN op zijn stand: de tabel droeg er DRIE — wit (Status/Naam/Koers), --text-2 (alleen deze tickerkolom) en --text-3 (ISIN, Beurs, Update). Die ene afwijker is nu ook --text-3, dus wit voor wat je leest en één grijs voor de naslag eromheen. Draait v5.409 terug, die de ticker juist een token lichter zette. */   /* v5.409 (Timo "leest niet lekker"): ticker één token lichter (text-3->text-2); de naamkolom draagt s   /* v5.409 (Timo "leest niet lekker"): ticker één token lichter (text-3→text-2); de naamkolom draagt sinds v5.409 overal een volle naam in --text — sámen de leesbaarheids-fix, geen nieuwe tinten. v5.588-kandidaat (Timo 20-7): white-space:nowrap zodat een lange mNAV-code (MNAV-ALCPB/MNAV-MSTR) niet op het koppelteken naar 2 regels wrapt (rij werd hoger) — samen met de Ticker 14%-breedte hierboven */
  .schedet-head{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; margin:0 0 18px}   /* v5.376 (MB-5): wrapt op smal — de statusregel (kmon-sum) verdrong anders de paginatitel */
  .schedet-card{background:var(--surface); border:1px solid var(--line-2); border-radius:8px; padding:16px}   /* v5.997 (Timo's symmetrieronde): was `14px 16px 16px` — 14 boven tegen 16 onder, terwijl élke andere kaart in de app boven/onder gelijk is (.card 20/20, .set-card 12/12). Geen reden gedocumenteerd; rechtgetrokken op 16. */
  .schedet-ch{display:flex; align-items:baseline; justify-content:space-between; gap:12px; min-height:22px; margin-bottom:16px}   /* v5.564 (Timo, "zelfde plek"): min-height = de 22px-.ico-btn — de kmon-kop (alleen tekst) is nu even hoog als de aflos-kop (met Exporteer-knop), dus de tabellen starten op dezelfde y. v5.571 (Timo, "staat er dicht op"): margin-bottom 0->16px = de app-norm .sec{gap:16px} voor kop-tot-content — gemeten was het gat tussen spec-blok en kolomkoppen exact 0px (alleen de 5px th-padding). Hier op de GEDEELDE kop, dus aflosschema én koersmonitor schuiven samen; de klemgetallen (210->226) volgen mee, anders loopt de tabel onderaan het scherm uit */
  .schedet-info{font-size:11px; color:var(--text-3)}
  .aflos-view .schedet-empty{display:block; text-align:center; padding:60px 0; font-size:12px; color:var(--text-3)}   /* v5.364 (audit r1-7d) lege-staat, v5.399: eigen class — stond op .schedet-info en lekte 60px padding in elke kaartkop */
  .schedet-ch .schedet-info{font-size:12px; color:var(--text-2)}   /* v5.399: de kern-info (bedrag · vorm · rente) is nu de primaire kopregel links */
  .schedet-tots{display:flex; gap:16px; align-items:baseline; white-space:nowrap; flex-shrink:0}   /* v5.570 (Timo, "ademruimte informatiereeks"): 16->24 tussen de spec-PAREN, tegen 5px binnen een paar (.schedet-tot b) — bij zes paren op één regel moest het oog bij 16px zelf de knip maken ("€ 49.776 Vorm" plakte). Ratio 5:24 laat de paren vanzelf uit elkaar vallen. Kon pas na de 1120px-verbreding: bij 980 kostte dit 40px die er niet waren. Geldt óók voor de kmon-statustelling (deelt dit recept sinds v5.565). flex-shrink:0 = de CIJFERS leveren nooit in: met een lange deelnaam (getest "Lening studiefinanciering hoofdfase 2019") liep de reeks 52px de kaart uit en werd de knop platgedrukt; nu kapt de naam af (.schedet-nm ellipsis) */   /* v5.632 (Timo, "ruimte hiertussen kan misschien kleiner"): 24 -> 16px tussen de spec-PAREN — terug op de waarde van vóór v5.570; binnen een paar blijft het 5px, dus de paren blijven als paar leesbaar */
  .schedet-csv{flex-shrink:0}   /* v5.570: de Exporteer-knop houdt z'n volle 107px — hij werd bij een lange deelnaam tot 94px samengedrukt */
  .schedet-lead{display:flex; gap:28px; align-items:baseline; min-width:0; flex-wrap:wrap; row-gap:6px}   /* v5.628: wrap-vangnet — de specs zakken naar een tweede regel zodra naam+specs niet samen passen (gemeten tekort 158px bij wrap 1120), zodat de naam altijd volledig leesbaar blijft ongeacht zijn lengte */   /* v5.562 (Timo): deelnaam + specs samen links (de export-knop houdt rechts via de ch-space-between). v5.569 (Timo): gap 18->28 — de naam heeft sinds v5.563 EXACT de spec-waarde-typografie (11px/600/text-2), dus alleen de afstand kan hem nog als kop laten lezen; 18 vs de 16px paar-gap was onzichtbaar en de regel las als acht gelijkwaardige brokjes. Meting: lead 842->852px in een kop van 874 (kaart 908 = .aflos-wrap 980 - 72 padding) */
  .schedet-nm{font-size:11px; font-weight:600; color:var(--text-2); white-space:nowrap; flex-shrink:0}   /* v5.628 (Timo, "lening naam is niet volledig zichtbaar, dit zou altijd zo moeten zijn"): de naam LEVERT NOOIT MEER IN. Hij had min-width:0 + ellipsis en was daarmee het enige krimpbare element naast de shrink:0-specs — gemeten stond hij op 0px terwijl hij er 71 nodig had, dus volledig weggedrukt. Past naam + specs niet samen, dan zakken de SPECS naar een tweede regel (.schedet-lead flex-wrap) i.p.v. de naam op te eten */   /* v5.562/563 (Timo): het getoonde leningdeel volgt EXACT de dikgedrukte spec-waarden (het "SF35"-recept: 11px/600/text-2) — niet groter/witter. v5.570: de NAAM is de enige die inlevert als de kop vol is (ellipsis) — zie de flex-shrink:0 op .schedet-tots/.schedet-csv hieronder */
  .schedet-tot{font-size:11px; color:var(--text-3)}
  .schedet-tot b{font-weight:600; margin-left:5px; font-variant-numeric:tabular-nums}   /* kleur via de bestaande .sched-rente/.sched-afl */
  .schedet-specs .schedet-tot b{color:var(--text-2)}   /* v5.408: linker kop-specs (Saldo/Hoofdsom/Vorm/Rente) — zelfde label+waarde-recept als rechts, waarden neutraal i.p.v. rente/afl-gekleurd */
  .schedet-card .duosched-tbl{width:100%; table-layout:fixed}   /* v5.538 (Timo): VASTE kolomindeling -> de kolommen verspringen niet meer bij het switchen van leningdeel (was auto = data-afhankelijk). v5.542: de kolombreedtes staan nu in een <colgroup> in de render (_schedDetCard) i.p.v. th-nth-child hier — die werden door de sumrow-colspan="2" genegeerd */
  .be-in.my-inval{border-color:var(--down)}   /* v5.419 (Timo, auditvraag K-1): geweigerde MM-JJJJ-datum (formaat/jaar buiten 1950-2100) blijft staan met een --down-rand — zelfde foutkleur-familie als .err, alleen de rand (tekst blijft leesbaar om de typefout te corrigeren) */
  /* ===== MELDINGEN — centrale popup + pil in de balk (v6.058, Timo 25-7: "ik wil dat alle meldingen in de
     center als popup komen en als je hem wegklikt moet er gewoon een klein remindertje komen in de hoofdbalk").
     De drie .err-stroken blijven de BRON (zie index.html) maar tonen zelf niets meer: .meld-bron verbergt ze.
     Huid van de box = die van .cfg/.vpop (surface + --line + var(--r) + dezelfde schaduw), zodat dit venster
     nergens uit de toon valt. ===== */
  .meld-bron{display:none !important}
  .meldpop{display:none; position:fixed; inset:0; z-index:400; background:rgba(0,0,0,0.55); align-items:center; justify-content:center; padding:20px}
  .meldpop.open{display:flex}
  .meldpop-box{position:relative; width:min(520px, calc(100vw - 44px)); background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:22px 24px; box-shadow:0 16px 48px rgba(0,0,0,0.55)}
  .meldpop-in{display:flex; align-items:center; gap:14px}   /* v6.063 (Timo: "het is een beetje een zielige popup, en niet consistent met onze opmaakkeuzes in het dashboard"). Klopt: een breed leeg vlak met alleen tekst. Het dashboard heeft overal het icoonvak-recept (.kpi-ic/.bal-ic: 38x38, radius 8, kleur op 15% als achtergrond, 19px svg) — dat geeft een vlak zijn anker en gewicht. Datzelfde recept nu hier, in de meldingskleur. */
  .meldpop-ic{flex:0 0 auto; width:38px; height:38px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--down); background:rgba(210,138,130,0.15)}
  .meldpop-ic svg{width:19px; height:19px}
  .meldpop-tx{min-width:0; flex:1 1 auto}
  /* v6.066: de kop "MELDING" is vervallen — Timo: "een nietszeggend kopje, je ziet al dat het een melding is". Het icoon en de kleur zeggen het al; en uppercase-koppen zijn in de app een PAGINA-idioom (.ey), niet iets voor een venster. */
  .meldpop-body{font-size:12px; line-height:1.55; color:var(--down)}   /* v6.067: 13 -> 12px. De 13 was mijn poging om Timo's "meer body" op te lossen, maar die body kwam uiteindelijk van het ICOON en de ruimere padding. 12px is de lopende-tekstmaat van de app (balans, maandcijfers, zijbalk); 13 bestond verder nergens en was dus precies zo'n losse waarde als de drift die we vandaag in DESIGN.md tegenkwamen. */   /* v6.061 (Timo: "het meldingpopupje mag wel wat meer body hebben"): 12 -> 13px + ruimere padding (18/20 -> 22/24) + 520 -> 560px. Blijft in dezelfde huid als .cfg/.vpop, alleen met meer gewicht — een melding mag zwaarder wegen dan een keuzemenu. */
  .meldpop-body .meld-r + .meld-r{margin-top:10px; padding-top:10px; border-top:1px solid var(--line)}   /* meerdere meldingen: gescheiden, niet aan elkaar geplakt */
  /* v6.186 (Timo 27-7): het meldingenblok in Instellingen. Alleen op smal, want daar is de pil weg (v6.185) en is dit
     de enige plek waar je een melding nog kunt lezen; op een breed scherm blijft de pil in de topbalk de weg en zou
     dit blok een dubbeling zijn. Opmaak leunt op de bestaande kaart-tokens: dezelfde --down-tint als de pil, zodat
     hij als waarschuwing leest en niet als gewone tekst. [hidden] wint van display:block via de attribuut-selector. */
  .meld-set{display:none}
  @media (max-width:760px){
    .meld-set:not([hidden]){display:block; margin-bottom:14px; padding:11px 13px; border-radius:8px;
      border:1px solid rgba(210,138,130,0.28); background:rgba(210,138,130,0.06); color:var(--text-2); font-size:12px; line-height:1.45}
    .meld-set-k{font-size:10px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--down); margin-bottom:6px}
    .meld-set .meld-r + .meld-r{margin-top:9px; padding-top:9px; border-top:1px solid var(--line)}
  }
  /* v6.135: een bedrag of percentage midden in een meldingszin draagt zijn richting in KLEUR + in woorden
     ("steeg/daalde", "erbij/eraf") — nooit in een plus- of minteken (Timo's harde regel, DESIGN.md §geen tekens) */
  .meld-pc{font-weight:600} .meld-pc.up{color:var(--up)} .meld-pc.down{color:var(--down)}   /* geldt in beide dragers: de foutbalk (.err-t) en de meldingpopup (.meld-r) */
  .pop-x{position:absolute; top:10px; right:12px; background:none; border:0; padding:0; cursor:pointer; font-family:inherit; font-size:14px; line-height:1; color:var(--text-3)}   /* v6.247 (D-06, Timo 28-7: "gelijktrekken, hou ik van"): 15 -> 14px, de maat van de KRUISJES-familie. Een kruis is een vorm, geen tekst (DESIGN.md §3, rol 14 = icoon-glyph), en dit was het zesde kruis van de app dat als enige in de rol "klein bedrag" (15 = tickerprijs, donutwaarde) stond. Op mobiel was hij al 14 via het v6.245-blok; nu is hij dat op élke breedte. */   /* v6.062: ÉÉN sluitkruisje voor élke DIALOOG (meldingvenster, account-paneel). Tekst-x = het app-brede sluit-idioom (DESIGN.md §Knoppen). Menu's uit de .vpop-familie krijgen er bewust GEEN: die horen bij een knop en sluiten met een keuze of een klik ernaast — een kruisje op een 184px-menuutje is rommel. */
  .pop-x:hover{color:var(--down)}
  .meld-pil{display:inline-flex; align-items:center; gap:6px; height:22px; position:relative; top:2px; padding:0 10px; border-radius:8px; cursor:pointer; font-family:inherit; font-size:11px; font-weight:500; background:var(--down-soft); border:1px solid rgba(210,138,130,0.25); color:var(--down)}   /* zelfde maatvoering als de knopfamilie (22px/11px/500/radius 8), in de meldingskleur */
  .meld-pil:hover{border-color:rgba(210,138,130,0.45)}   /* v6.061 (Timo: "de tekst in de pil staat niet op gelijke middenhoogte als de naam van de klant"). Klopte: gemeten met een Range op de GLYPHS stond de piltekst op 28 en de klantnaam op 30. Oorzaak: de subtitel is INLINE naast de 17px-titel en volgt dus diens BASISLIJN, terwijl de pil als flex-item op blok-midden wordt gecentreerd. `top:2px` zet de piltekst op dezelfde optische hoogte als de naam ernaast — dat is de tekst waar hij bij hoort, niet de titel. Meet dit soort dingen met een Range, niet met getBoundingClientRect op het element: de element-boxen stonden namelijk wél gelijk. */
  .meld-pil-d{width:5px; height:5px; border-radius:50%; background:var(--down); flex:0 0 auto}
  .err{display:none; background:var(--down-soft); border:1px solid rgba(210,138,130,0.25); border-radius:var(--r-sm); padding:10px 14px; font-size:12px; color:var(--down)}
  .err.show{display:block}
  .err-t{display:inline-block; max-width:100%; overflow:hidden; vertical-align:middle}   /* v5.911 (BEVINDINGEN_CREATIEF_23-7 punt 5): de meldingenbalk kapte als enige plek in de app HARD af — een melding met een onbreekbaar woord (sheet-ID, URL, API-antwoord) liep gewoon de balk uit, want `.err` heeft geen overflow-grens. Gemeten op een venster van 560px: de balk toonde 522px terwijl de tekst er 679 vroeg — 157px stak eruit. Dit is het app-brede recept van v5.754-756 (allocatietabel): de TEKST krijgt een eigen meetbaar element, zodat _fadeSweep er de zachte .nm-clip-fade op kan zetten. Waarom de tekst en niet `.err` zelf: de mask van .nm-clip werkt op het hele element inclusief kinderen, en in deze balk staat de actieknop "Begrepen" (.err-ok) — die zou dan meefaden. Nu ligt de knop buiten het fade-element en kan dat structureel niet meer gebeuren. vertical-align:middle = dezelfde uitlijning als .err-ok hieronder, zodat tekst en knop op één lijn blijven staan. */
  .err .err-ok{font-family:inherit; font-size:11px; font-weight:500; line-height:1; color:var(--down); background:transparent; border:1px solid rgba(210,138,130,0.35); border-radius:8px; height:20px; padding:0 9px; margin-left:6px; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; vertical-align:middle; cursor:pointer}   /* v5.612-kandidaat (Timo 20-7, split-verklikker): afhandel-knop ("Begrepen") ín de meldingenbalk — het .nw-b-pill-silhouet in de .err-foutkleurfamilie; recept DESIGN.md §4 Meldingenbalk-actieknop */
  .err .err-ok:hover{background:rgba(210,138,130,0.12)}   /* v5.579: `margin-left:auto` eruit — dood, de latere `.tk-live`-regel (het 7px-bolletje) zet `margin-left:0` en wint. De rest LEEFT: die drie staan niet in die andere regel. Let op: één classnaam draagt hier twee betekenissen (rij-container én bolletje) — verwarrend, maar niet stil kapot. */
  /* v5.916 (23-7): `.tk-px.up` / `.tk-px.down` + de keyframes fl-u/fl-d verwijderd — DODE CSS. Die klassen zetten een
     halve seconde kleurflits op de PRIJS-regel van een koerstegel, maar app.js schrijft "up"/"down" uitsluitend op
     `.tk-chg` (het percentage, r16706 + r16793); de prijsregel krijgt bij het bouwen `class="tk-px tnum"` en die
     className wordt daarna nergens meer overschreven. Gemeten in de draaiende app (assetharnas, 12 gevulde tegels,
     20 echte koersticks via paintTile): 0 class-mutaties op de 12 `.tk-px`-knopen, klasse bleef `tk-px tnum` — met
     een positieve controlemeting erbij, zodat 0 niet "observer kapot" kan betekenen. De bijbehorende
     prefers-reduced-motion-regel verderop is in dezelfde ronde weg. */
  .tk-chg.up{color:var(--up)} .tk-chg.down{color:var(--down)} .tk-chg.flat{color:var(--text-3)}

  /* hero: kpi | orb | kpi */

  /* cards / charts */
  .donut-c{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none}
  .lg{display:flex; align-items:center; gap:9px; font-size:12px}
  .lg .dot{width:8px; height:8px; border-radius:2px; flex:0 0 auto}
  .lg .nm{color:var(--text-2); flex:1}
  .lg .pc{color:var(--text-3); min-width:42px; text-align:right}   /* v5.579 (Timo, CSS-hygiëne): fossiel van vóór de subgrid-omzetting. `display:flex; font-size:11px; padding:1px 0` waren DOOD — de tweede `.bal-r`-regel verderop (subgrid, `display:grid`) staat later met gelijke specificiteit en wint. Behouden: `justify-content` (staat niet in de subgrid-versie) én — na een vóór/ná-meting die 30->27px rijhoogte liet zien — `gap:8px` en `line-height:1.5`. Die twee LEKEN dood omdat de computed waarde afweek (`gap:8px` vs computed `8px 16px`), maar de subgrid-regel overschrijft alleen de KOLOM-gap: de row-gap van 8px overleefde, en line-height staat daar helemaal niet. **Les: een shorthand (gap/padding/margin/font) kan gedeeltelijk overleven — vergelijk longhand, niet de shorthand-string.** */
  /* data tables */
  .dtable.dragging{cursor:grabbing}
  .dtable.dragging tbody tr{user-select:none}
  .drag-avatar{background:var(--surface); border-radius:8px; box-shadow:0 30px 80px -20px rgba(0,0,0,0.82); overflow:hidden}
  .drag-avatar .dtable td{border-bottom:none}
  .drag-avatar .rbtable td{border-bottom:none}
  .vs-src{opacity:0 !important}
  .vs-anim{transition:transform .12s cubic-bezier(.2,.7,.3,1)}
  .vs-handle{cursor:pointer; user-select:none; -webkit-user-select:none; touch-action:none}
  .dtable td.rh.rh-2r{white-space:nowrap; overflow:hidden; line-height:1.25}   /* v5.816 (Timo: "blijf wel met fade logica werken voor de naam als die te lang is"). v5.796 zette hier white-space:normal om de ticker-subregel ruimte te geven — maar daardoor BRAK een lange naam over twee regels ("iShares MSCI World USD / (Acc)"). De subregel is display:block en komt sowieso op zijn eigen regel; de naam blijft dus op één regel en krijgt de zachte fade via .mc-nm-f. */
  .dtable td.rh.rh-2r .mc-nm-f{display:block; overflow:hidden; white-space:nowrap}
  .dtable td.rh.rh-2r .grip{position:absolute; left:21px; top:50%; transform:translateY(-50%); float:none; margin-top:0}   /* v6.109 (Timo 26-7: "kleur vierkantje staat gecentreerd, maar het positie verwisselen icoontje niet, even gelijktrekken"). v5.972 zette de grip als float op de NAAMREGEL en centreerde hem daar (margin-top 2px = (regel 15px − grip 11px)/2); het kleurvierkantje ernaast staat op het midden van de hele CEL (r867: top:50% + translateY(-50%)). Bij één regel valt dat samen, bij een naam+ticker-cel niet: gemeten stond de grip 8,5px te hoog in de 47px-cel van de Aantallen-tabel en 7px in de 44px-cel van Posities Box 3 — precies (celhoogte/2 − 15). Een vaste margin kan dat niet dekken omdat de celhoogte per tabel verschilt, dus krijgt de grip nu LETTERLIJK dezelfde centrering als het vierkantje. left:21px = de padding-left van r866, zodat hij horizontaal geen millimeter verschuift. */
  .dtable td.rh.rh-2r .grip ~ .mc-nm-f{margin-left:12px}   /* v6.109: de grip is uit de flow (absolute), dus de naamspan houdt zijn inspringing nu zelf — zelfde 12px (grip 7px + 5px marge) als de subregel hieronder, zodat naam en code op dezelfde x blijven staan als vóór deze wijziging */
  .dtable td.rh.rh-2r .grip ~ .mc-tk-sub{margin-left:12px}   /* v5.972: de tickersubregel lijnt uit met de naam erboven (grip 7px + 5px marge); zonder grip (verwisselmodus uit) geen inspringing */
  .nvm-h{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
  .nvm-right{margin-left:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
  .nvm-nav{display:flex; align-items:center; gap:6px}
  .nvm-nav #nvmYr{font-size:12px; color:var(--text-2); font-weight:600; min-width:38px; text-align:center}
  .nvm-arrow{background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.10); color:var(--text-2); border-radius:4px; width:22px; height:22px; cursor:pointer; font-size:12px; line-height:1; padding:0; display:inline-flex; align-items:center; justify-content:center}
  .nvm-arrow:hover:not(:disabled){background:rgba(255,255,255,0.10); color:var(--text)}
  .nvm-arrow:disabled{opacity:.5; cursor:default}   /* v6.084 (bevinding 3.5): op de rand van het jaarbereik doet de pijl niets -> dezelfde dof-taal als elke andere uitgeschakelde knop (DESIGN.md: opacity .5 + cursor:default, vgl. .cl-add-type.cl-sel:disabled) */
  .nvmtable col.nvm-cn{width:190px}   /* v4.954: gelijk aan .dtable th:first-child (190px) zodat de Posities-tabel exact uitlijnt met de andere maandcijfers-tabellen */
  .nvmtable .rh{white-space:nowrap; overflow:hidden}
  .nvmtable td.nvm-c{cursor:text; outline:none}
  .nvmtable td.nvm-c:hover{background:rgba(255,255,255,0.04)}
  .nvmtable td.nvm-c:focus{background:rgba(87,195,221,0.12); box-shadow:inset 0 0 0 1px rgba(87,195,221,0.5)}
  .nvmtable tbody tr:not(.nvm-sec):not(.nvm-sum):not(.nvm-netto):hover td{background:rgba(255,255,255,0.04)}
  .nvmtable td.nvm-ed{color:var(--accent,#57c3dd); font-weight:600}
.nvm-c.neg{color:var(--down)}
.nvm-c.nvm-ed.neg{color:var(--accent,#57c3dd)}   /* handmatig-negatief = zelfde blauw als positief; haakjes maken het onderscheid */
.dtable tr.mc-zrow td{opacity:0.42}
.card.tbl-card{position:relative}
.mc-toon-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);z-index:6}
.card.tbl-card .card-h{padding-right:104px}
.cl-soort{text-align:center;font-size:12px;cursor:default}
.cl-soort svg{vertical-align:-2px}
.cl-soortth.cl-on .cl-hl{color:var(--accent,#57c3dd)}
.nvmtable tbody tr.nvm-zrow td{opacity:0.42}
  .nvmtable td.nvm-bc,.nvmtable th.nvm-bh{border-left:1px solid var(--line-2); border-right:1px solid var(--line-2)}
  .nvmtable tr.nvm-hdr th.nvm-bh,.nvmtable tr.nvm-hdr th.nvm-bh .mh-l{color:var(--accent)}
  .nvmtable tbody tr.nvm-sec:hover td,.nvmtable tbody tr.nvm-hdr:hover td{background:transparent}
  .nvmtable tbody tr.nvm-sum td.rh{color:var(--text-3); font-weight:400}   /* v5.214/v5.217 (Timo): grijze naam op ÁLLE Posities-totalenrijen (subtotalen + Netto vermogen), stille toelichting zoals de maandcijfers-totalenrijen — consistent, geen witte uitzondering meer */
  /* v6.235 (blok 1.5, Timo 28-7: "alle posities tabellen hebben afwijkende lettergroottes"). GEMETEN op 390px,
     élk tekstdragend element in beide positiestabellen naast de referentietabel (Mutaties assets) gelegd:
         datarijen       12/400 · vette cellen 12/600 · rijkoppen 12/500   -> IDENTIEK aan alle andere tabellen
         KOLOMKOPPEN     10/600 (26x)                                     -> elders 10/500  <- de enige afwijking
     Dus niet de lettergrootte maar het GEWICHT, en alleen in de koppenrij. Deze regel zei in haar eigen comment al
     "gelijk aan .dtable th-norm" en week op precies dat punt af (r1045 zet 500). Vandaar 600 -> 500.
     WAT HIER NIET AAN DE HAND WAS, en dat is de moeite waard om te onthouden: de meting die dit punt opende zag
     "td 10px/600" en concludeerde dat de hele tabel afweek. Die td was de SECTIERIJ (`tr.nvm-sec`, "Posities
     assets"), die sinds v6.220 bewust 10/600 is. Meet in deze tabel dus altijd een GEWONE datarij. */
  .nvmtable tr.nvm-hdr th{padding:7px 12px; font-weight:500; font-size:10px; color:var(--text-3); text-align:right; border-bottom:1px solid var(--line-2); white-space:nowrap}   /* v5.216 (Timo): gelijk aan .dtable th-norm (padding 7/7, onderlijn --line-2) */
  .nvmtable tr.nvm-hdr th.rh{text-align:left}
  .nvmtable tr.nvm-hdr .mh-f{margin-right:5px; background:none; border:0; color:var(--text-3); cursor:pointer; padding:0; width:15px; height:15px; display:inline-flex; align-items:center; justify-content:center; opacity:0.45; vertical-align:middle; transition:opacity .12s,color .12s}
  .nvmtable tr.nvm-hdr .mh-f:hover,.nvmtable tr.nvm-hdr .mh-f.on{opacity:1; color:var(--accent)}
  .nvmtable tr.nvm-hdr .mh-l{vertical-align:middle}   /* v5.660 (Timo, consistentiecontrole over alle tabellen): de margin-left:1px hier maakte het gat filtericoon->koptekst 6px terwijl de maandcijfers-tabellen op 5px staan. Weg, zodat élke kolomkop in élke tabel exact dezelfde 5px houdt (de marge zit in .mh-f). */
  .nvmtable tbody tr.nvm-off{opacity:0.4}   /* dof in balans -> niet meegeteld in netto */
  .nvmtable tbody tr.nvm-zrow:not(.nvm-sec):not(.nvm-sum):not(.nvm-netto):hover td{background:rgba(255,255,255,0.095)}   /* v5.648 (Timo): 0,095 x 0,42 = 0,04. De :not-keten staat er alleen om de basis-hoverregel (r344) op specificiteit te verslaan — zonder die keten wint die met (0,5,3). */
  .nvmtable tbody tr.nvm-off:not(.nvm-sec):not(.nvm-sum):not(.nvm-netto):hover td{background:rgba(255,255,255,0.1)}   /* v5.648 (Timo): 0,10 x 0,4 = 0,04 — een uit de balans gesloten rij hovert nu even sterk als elke andere. */
  .nvmtable tbody tr.nvm-sec td{padding:20px 0 6px; font-weight:600; font-size:10px;   color:var(--text-3); border-bottom:none}   /* v5.216 (Timo): sectiekop-afstand gelijk aan de maandcijfers .card-h-norm (20 boven / 6 onder, was 14/5) */
  /* v6.220 (typografie-audit, Timo 27-7: "de sectiekoppen ogen fors"). GEMETEN op 390px met zijn eigen data:
     de sectiekop "Posities assets" stond op 11px/500 terwijl de RIJNAMEN eronder (Pokémon, Bitcoin) op 12px/500
     staan. Een kop die kleiner is dan zijn eigen inhoud maar wel een hele regel vult — dat is precies waarom hij
     "fors" oogt zonder dat je kunt aanwijzen waarom: hij heeft de MAAT van een rij en de PLEK van een kop.
     De sectiekop onderscheidt zich daarom door GEWICHT in plaats van door grootte — één trede lager op de schaal,
     één stap zwaarder. Bewust op beide breedtes gelijk: een breedte-afhankelijk verschil erbij maken was juist wat
     de audit als probleem aanwees.
     NOOT v6.235: deze regel ankerde oorspronkelijk op "de kolomkoppen van diezelfde tabel staan óók op 10px/600".
     Dat anker is weg — die koppen zijn naar 10/500 gegaan omdat ze als enige in de app afweken (zie r465). De
     sectiekop houdt zijn 10/600 en is daarmee de énige zware kop in de tabel; dat is precies wat een sectiekop
     mag zijn, en het onderscheid met de kolomkoppen erboven is er alleen maar duidelijker op geworden. */
  .nvmtable tbody tr.nvm-sec.inv td{padding-top:0}
  .nvmtable tbody tr.nvm-sec td:first-child::before{display:none}
  .nvmtable tbody tr.nvm-sum td{border-bottom:none; /* <- was r.356 */ border-top:1px solid var(--line-2); font-weight:600; padding-top:9px}   /* v5.216 (Timo): subtotaal-lijn gelijk aan de .dtable tfoot-norm (--line-2, 9px boven); Netto vermogen houdt z'n eigen prominente 1.5px-lijn (regel eronder) */
  .nvmtable tbody tr.nvm-sum td:first-child::before{display:none}
  /* v5.217 (Timo): .nvm-netto had een eigen prominente 1.5px/700-lijn — verwijderd; Netto vermogen volgt nu de totalenrij-norm (grijze naam, 600, 1px --line-2, 9px) via de .nvm-sum-regel hierboven, consistent met álle andere totalenrijen */
  .nvmtable tbody tr.nvm-netto td:first-child::before{display:none}
  .nvmtable.b3table td.nvm-c{cursor:default}   /* v5.603-kandidaat (Timo 20-7): de "Posities box 3"-maandtabel is een afgeleide fiscale weergave zonder contenteditable — de cursor:text van .nvm-c (r339) zou bewerkbaarheid suggereren; verder erft de tabel élk .nvmtable-token ongewijzigd */
  .tk, .kpi{user-select:none; -webkit-user-select:none; touch-action:pan-y}
  body.is-dragging, body.is-dragging *{cursor:grabbing !important; user-select:none !important; -webkit-user-select:none !important}

  /* status */

  /* v6.195 (blok 1 van de grote ronde, de cross-consistentie-audit — AUDIT_CONSISTENTIE.md bevinding 1): VIER
     DECLARATIES HIER WAREN DOOD. Dit blok staat vóór de hele "professional layer" hieronder, en bij gelijke
     specificiteit wint de latere regel. Alles wat verderop app-breed of in een strikter blok opnieuw gezet wordt,
     haalde het hier dus niet. Gemeten op 375/480/600/760px met `node tools/consistentie.mjs --conflict`:
       .app padding:73px 16px 16px  verloor van @880 `padding:75px 18px 48px` (r1044) + @760 padding-bottom (r1216)
       .donut-stage height:200px    verloor van de app-brede 184px (r700)
       .bar-wrap height:200px       verloor van de app-brede 330px (r705); op <=480px zet r1450 dezelfde 200px
       .tickers grid-template       verloor van de app-brede auto-fill (r496) — de 2-koloms stand op smal komt van
                                    `#tickers` (r1102), en die id-selector wint wél
     TIMO'S KEUZE 27-7: de ZICHTBARE stand bevestigen, niet de oude bedoeling herstellen. Die 16px en 200px rustten
     nergens op — het zijn allebei erfenissen die in v5.103 alleen zijn doorgerekend voor de nieuwe fixed topbar
     (73 = 16 + 57, net zoals 75 = 18 + 57 in het 880-blok) — en hij heeft de huidige stand al op 375 en 390px
     goedgekeurd. Er verandert hier dus niets aan wat de browser rendert; bewezen met een vóór/ná-vergelijking van
     de volledige winnaarslijst op acht breedtes.
     .nw-wrap BLIJFT staan: die leeft wél, op 481-760px (op <=480px wint r1449 met 190px). */
  @media (max-width:760px){ html,body{overflow:auto; display:block} body{height:auto} .app{width:auto; height:auto; transform:none!important; overflow:visible} .nw-wrap{height:240px} }
  /* ====================== v3 — professional layer ====================== */
  .hd{position:fixed; top:0; left:0; right:0; z-index:255; height:57px; box-sizing:border-box; display:flex; align-items:center; gap:14px; padding:0 36px; border-bottom:1px solid var(--line); background:var(--bg)}   /* v5.100: topbar uit #app getild, fixed bovenaan -> op elke pagina zichtbaar */
  .ver{font-size:10px; font-weight:600; letter-spacing:0.06em; color:var(--accent); background:var(--accent-soft); border:1px solid rgba(94,198,223,0.28); padding:2px 7px; border-radius:4px; margin-left:6px; align-self:center}

  .sec{display:flex; flex-direction:column; gap:16px}
  .sec-h{display:flex; align-items:baseline; gap:13px}
  .hovlock{margin-left:-7px; border:0; background:transparent; color:var(--text-3); padding:0 2px; line-height:0; cursor:pointer; opacity:0; transition:opacity .12s, color .12s; align-self:center; display:inline-flex; align-items:center}   /* v5.659 (Timo, presentatieslot): onopvallend tot je erbij bent — zelfde verschijn-recept als de rij-verwijderknopjes (.cl-del: opacity 0 + .12s). Verschijnt bij hover over de sectiekop, en blijft in accentkleur staan zolang het slot AAN is, zodat je nooit vergeet dat hoveren uitstaat. */
  .sec-h:hover .hovlock{opacity:.4}
  /* v6.190 (Timo 27-7): "In de mobiele versie hoeven de hoveren aan/uit knopjes naast de titels er ook niet te staan,
     hoveren is niet een ding in de mobiele versie natuurlijk." Klopt, en het is meer dan cosmetiek: _hovLockApply zet
     bij "aan" ch.options.events op alleen ["click"], waarmee ook touchstart en touchmove verdwijnen. Zou je alleen het
     knopje verbergen, dan zit je op een toestel vást aan de stand die er toevallig staat én mogelijk zonder
     tap-tooltips. Daarom: knop weg én de vergrendeling niet toepassen (zie _hovUit in app.js), zodat de stand op een
     touchscherm simpelweg niet bestaat. Zijn keuze, gevraagd en gegeven. */
  @media (hover:none){ .hovlock{display:none} }
  .hovlock:hover{opacity:.75; color:var(--text-2)}
  .hovlock.on, .sec-h:hover .hovlock.on{opacity:.85; color:var(--accent-2)}   /* v5.661 (Timo: "minder fel als het aan staat"): het gedempte accent-token (--accent-2, #3f93a8) i.p.v. het volle --accent, plus opacity .85 — nog steeds onmiskenbaar aan, maar het schreeuwt niet naast de gouden titel. */
  .ey, .dh-viewsel{font-size:11px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold)}   /* v5.532 (Timo): de klikbare paneeltitel .dh-viewsel deelt nu de VOLLEDIGE eyebrow-stijl van .ey (CAPS + goud + 700 + letter-spacing), niet meer alleen de kleur — DUO/Eigen woning/Vastgoed zien er nu identiek uit aan PORTFOLIOWAARDE/WAARDE PER ASSET. Eén canonieke eyebrow-regel */
  .dh-viewsel{font-family:inherit; background:none; border:0; margin:0; padding:0; cursor:pointer; display:inline-flex; align-items:center; gap:5px; line-height:1}   /* fase D: klikbare hyp-kaarttitel = keuze-dropdown; TYPOGRAFIE via de gedeelde .ey-regel hierboven (v5.531 kleur -> v5.532 óók caps/700/spacing) — hier alleen de knop/flex-reset + caret-gap. De .dh-vcaret erft de kleur mee (eigen letter-spacing:0 houdt het pijltje strak) */
  .dh-viewsel:hover{opacity:.78}
  .dh-vcaret{font-size:9px; letter-spacing:0; opacity:.7; transform:translateY(1px)}

  .card{position:relative; background:var(--surface); border:1px solid var(--line-2); border-radius:8px; padding:20px 22px; box-shadow:0 24px 50px -32px rgba(0,0,0,0.9); display:flex; flex-direction:column}
  .card-h{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px}
  .card-h .t{font-size:10px; font-weight:600; color:var(--text-3);  }   /* v6.247 (D-06, Timo 28-7): 11/500 -> 10/600, de kopfamilie-maat app-breed. De kaarttitel was op desktop de grootste van de drie standen die één en dezelfde rol vervulden (10/500 · 10/600 · 11/500, gemeten op 1280). Kleinste maat wint, onderscheid via gewicht — zijn eigen tie-break uit DESIGN.md §3. */
  .card-h .s{font-size:10px; color:var(--text-3)}   /* v6.247 (D-06): 11 -> 10, mee met de kaarttitel hierboven. Anders leest de subtekst in dezelfde kop groter dan de titel ernaast; op de telefoon stond hij al op 10 (v6.245-lijst). */

  .tickers{display:grid; grid-template-columns:repeat(auto-fill,minmax(156px,1fr)); gap:10px}
  .tk{position:relative; display:flex; flex-direction:column; justify-content:center; background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0) 55%), var(--surface); border:1px solid var(--line-2); border-radius:8px; padding:12px; box-shadow:0 1px 0 rgba(255,255,255,0.04) inset, 0 16px 36px -30px rgba(0,0,0,0.85); cursor:pointer; transition:border-color .12s; overflow:hidden}
  .tk:hover{border-color:rgba(255,255,255,0.18)}
  .tk.dragging{z-index:60; transition:none; box-shadow:0 30px 80px -20px rgba(0,0,0,0.82); border-color:rgba(255,255,255,0.30); cursor:grabbing; opacity:0.97}
  .tk.tk-shift{transition:transform .18s cubic-bezier(.2,.7,.3,1)}
  .tickers.dragging-active{cursor:grabbing}
  .tickers.dragging-active .tk{user-select:none}
  .tickers.dragging-active .tk:not(.dragging):hover{border-color:var(--line-2)}
  .tk-top{display:flex; align-items:flex-start; gap:9px}
  .tk-mk{position:relative; width:24px; height:24px; border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; overflow:hidden; background:color-mix(in srgb, var(--mc,#57c3dd) 12%, transparent); color:var(--mc,#57c3dd)}
  .tk-mk::before{content:attr(data-l)}
  .tk-mk img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:2px; border-radius:50%}
  .tk-mk svg{width:15px; height:15px; display:block}
  .tk-mk.logo{background:transparent}
  .tk-mk.logo img{padding:4px} /* v5.278 (Timo): transparante vorm-favicons (bv. Metaplanet-M) verkleind zodat het hele merkteken binnen de CIRKEL valt i.p.v. binnen het vierkant -- anders knipt het ronde masker de hoeken van een tot-de-rand-gevuld logo weg. solid (effen bg: bijsnijden onzichtbaar) + coin (rond) blijven ongemoeid. 4px = net boven het wiskundig minimum (24px-cirkel: ingeschreven vierkant 16,97px -> pad >=3,5) */
  .tk-mk.coin img{padding:3px} /* v5.257: crypto-afbeelding op de getinte cirkel (zie applyTickers) -- iets meer inzet dan de favicon-logo's, zodat het rondje zichtbaar als rand meekomt */
  .tk-mk.solid{background:rgba(255,255,255,0.94)}
  .tk-id{min-width:0; flex:1; display:flex; flex-direction:column; overflow:hidden}
  .tk-nmline{display:flex; align-items:center; gap:6px; min-width:0}
  .tk-nm{font-size:12px; font-weight:600; color:var(--text); min-width:0; overflow:hidden; white-space:nowrap}
  #nmtip{position:fixed; z-index:9999; left:0; top:0; display:none; width:max-content; max-width:min(340px,92vw); padding:5px 9px; border-radius:6px; background:var(--surface-2); border:1px solid var(--line-2); box-shadow:0 6px 20px -8px rgba(0,0,0,.85); color:var(--text); font-family:inherit; font-size:10px; font-weight:500; line-height:1.35; letter-spacing:0; white-space:nowrap; pointer-events:none}   /* v5.844: DE naamtip. Eén vaste maat door de hele app (11px), het vlakje vormt zich naar de tekst (width:max-content) en raakt niets aan op de pagina — pointer-events:none, dus hij steelt geen hover. Vervangt de uitklap-machinerie van v5.635-843, die het naam-element zelf over zijn buren liet groeien en daarmee afhing van stapelvolgorde, overflow en tabelpainting. */
  #nmtip.on{display:block}
  @media (max-width:700px){ #nmtip{white-space:normal} }   /* op een smal scherm mag een lange fondsnaam wel afbreken, anders loopt de tip het venster uit */
  .nm-clip{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 16px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 16px),transparent)}
  .rb-nm-f.nm-clip{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 10px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 10px),transparent)}   /* v5.971 (Timo 24-7 "fade van allocatie regels mag ook nog wat later starten"): de rb-naamfamilie (allocatie-lijst + rebalance-tabel, beide bouwen .rb-nm-f) fadet pas in de laatste 10px i.p.v. de generieke 16px — meer leesbare tekens, zelfde zachte rand */   /* v5.455/v5.457 (Timo): GENERIEKE zachte fade -- JS zet .nm-clip op elk afkap-element dat echt overloopt (scrollWidth>clientWidth); vervangt app-breed de harde text-overflow:ellipsis. Een tekst die past blijft scherp. */
  /* v6.216 — VEEG-FADE: dezelfde taal als .nm-clip hierboven, maar dan voor een tabel die horizontaal verder loopt.
     Timo 27-7 over het allocatievlak: "de derde tabelkolom valt buiten beeld". Vegen kón daar al (`#rebal` heeft
     sinds v5.697 overflow-x:auto), maar op touch is dat ONZICHTBAAR: er is geen scrollbar, dus een kolom die
     halverwege wordt afgesneden ziet eruit als een fout in plaats van als een uitnodiging. GEMETEN op 390px met
     zijn eigen data: de tabel is 600px in een vak van 308px, dus 292px stond er zonder enig teken buiten beeld.
     De app kent dit gebaar al voor tekst (.nm-clip): wat niet past, vervaagt. Hier hetzelfde, alleen op de
     scroll-CONTAINER — de mask hangt aan de border-box, dus de vervaging blijft aan de rand staan terwijl de inhoud
     eronder doorschuift. `_veegSweep()` in app.js zet en haalt de klasse op scrollstand, zodat de fade weg is zodra
     je aan het einde bent: hij belooft nooit iets dat er niet meer is. 24px i.p.v. de 16px van tekst — een
     tabelkolom is breder dan een letter en heeft meer aanloop nodig om als "loopt door" te lezen. */
  .veeg-meer{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
  .cl-sel{position:relative}
  .cl-sel.nm-clip{-webkit-mask-image:none; mask-image:none}
  .cl-sel.nm-clip::after{content:""; position:absolute; top:0; bottom:0; right:0; width:52px; border-radius:0 7px 7px 0; pointer-events:none; background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 3.5L5 6.5L8 3.5' fill='none' stroke='%238b93a3' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 7px center,linear-gradient(90deg,rgba(23,26,32,0) 0%,var(--surface-2) 58%)}   /* v5.636 (Timo: "het vakje zelf moet intact blijven, maar de tekst erbinnen moet faden"): de overlay dekt nu tot de binnenrand, zodat er niets van de tekst in de chevron-zone doorpiept; de chevron wordt bovenóp het verloop opnieuw getekend (eerste background-laag = bovenste), dus rand, vlak én pijltje blijven staan terwijl alleen de tekst uitdooft. */
  .tk-sub{font-size:9px; font-weight:500; color:var(--text-3); letter-spacing:0.06em; white-space:nowrap; overflow:hidden; margin-top:1px} /* v5.269 (Timo): text-transform:uppercase eraf -- ticker-codes staan al hoofdletters in de data, maar deze regel toont sinds v5.248 (swap) / mNAV soms een ECHTE naam ("Bitcoin", "mNAV"), die niet geforceerd hoofdletters hoort te zijn */
  .tk-live{/* tickers */ display:flex; align-items:center; gap:6px; /* <- was r.301 */ position:relative; width:7px; height:7px; box-sizing:border-box; padding:0; border:0; border-radius:50%; background:var(--text-3); flex:0 0 auto; margin-left:0}  /* v5.246 (Timo): box-sizing/padding/border-reset — de rode err-staat deelt de klassenaam met de generieke foutmeldingsbalk `.err` (r.167: padding+border); zonder deze reset erfde de dot die padding en werd 'ie een ovaal i.p.v. een 7×7 stipje (zichtbaar vlak na inloggen: markt open + data nog niet binnen = err) */
  .tk-live.on{background:var(--up); box-shadow:0 0 6px rgba(108,192,160,.6)}
  .tk-live.err{background:var(--down); box-shadow:0 0 6px rgba(210,138,130,.6)}   /* v5.169 (Timo): rood = markt open maar geen live-data (storing); grijs = markt dicht, groen = open + data */
  .tk-pxw{display:flex; flex-direction:column; align-items:flex-end; gap:1px; flex:0 0 auto; margin-left:auto}
  /* v5.812 (Timo 22-7): de eenheid van een INDEX ("points") staat kleiner en zachter dan de stand zelf — een
     puntenstand is het getal, de eenheid is bijschrift. Alleen S&P 500 heeft dit vandaag (IX_EENH). */
  .ix-eh{font-size:.72em; margin-left:3px; letter-spacing:.01em}   /* v5.814 (Timo: "points toch aanpassen naar p? en hou het gewoon wit, niet grijs"): kleiner mag, doffer niet — de eenheid hoort bij het getal. */
  .tk-px{font-size:15px; font-weight:600; color:var(--text); white-space:nowrap; margin:0; line-height:1.2}
  /* v5.579 (CSS-hygiëne): tweede, LETTERLIJK identieke `tk-px`-regel verwijderd — stond dubbel in het bestand (byte-identiek geverifieerd). De eerste hierboven in de tickers-sectie blijft; geen effect op het beeld. */
  .tk-chg{font-size:11px; font-weight:600; line-height:13px; min-height:13px}   /* v5.892 (Timo 23-7, met schermopname: "bij de Strategy ticker-tegel verplaatst ALLES in die tegel, INCLUSIEF HET ICOONTJE, een beetje op en neer bij een pagina refresh" + zijn correctie "de tegel zelf niet, de inhoud"). De percentage-regel is de HOOGSTE regel van de tegel: .tk-pxw = .tk-px 18 + gap 1 + .tk-chg 13 = 32px, en dat is meer dan de naam+subregel (26px), dus .tk-top erft die 32px. paintTile maakt deze regel op de mNAV-tak LEEG zolang de feed nog niet terug is (o.chg.textContent = "", v5.494 — bewust, want een 0%-flits liegt); een lege regel had geen regelvak meer, dus .tk-pxw kromp naar 19px en .tk-top naar 26px. De tegel houdt zijn hoogte (grid-stretch), maar .tk centreert zijn inhoud (justify-content:center) en herverdeelde die 6px vrije ruimte: ALLES schoof 3,00px omlaag en bij de eerste geldige waarde weer 3,00px omhoog. GEMETEN op het echte renderpad, alle vijf mNAV-bedrijven als tegel: vóór 3,00px op elk van de vijf, ná 0,00px; de zeven gewone koerstegels schoven vóór én ná 0,00px (die zetten hun percentage nooit leeg — de koerskaart evenmin, die schrijft "—"). De regelhoogte is expliciet 13px i.p.v. de impliciete `normal`: die gaf toevallig óók 13px, maar hangt aan de fontmetriek — met een expliciete waarde kan de gereserveerde ruimte niet uit de pas lopen met de gevulde regel. Herhaalbaar: tools/tegelschuif.js. */
  /* v5.579 (CSS-hygiëne): tweede, LETTERLIJK identieke `tk-chg`-regel verwijderd — stond dubbel in het bestand (byte-identiek geverifieerd). De eerste hierboven in de tickers-sectie blijft; geen effect op het beeld. */
  .tk.stale .tk-px{color:var(--text-2)}
  /* v6.135 (Timo 27-7, keuze "lettergrootte kleiner"): op telefoonbreedte is de tickertegel ~164px breed en gaat
     bijna alles op aan het logo (24px) en de prijs (64px bij 15px letter) — de naam hield 20px over, zodat elf van
     de twaalf namen tot twee letters werden afgekapt ("iSh" voor iShares MSCI World). De prijs is hier de kolom die
     krimpen MOET: hij staat op flex:0 0 auto en neemt dus zijn volle tekstbreedte, terwijl de naamkolom (.tk-id,
     flex:1) de rest krijgt. Prijs 15→11px levert 13px op, naam 12→10px maakt de tekst zelf korter.
     GEMETEN op 375px met Timo's eigen data: naamruimte 20px → 37px, passende namen 1/12 → 9/12. Wat nog niet past:
     iShares MSCI World (Acc) (125px nodig — die past bij geen enkele letterhoogte), Cipher Digital en Metaplanet.
     GRENS 480px, nieuw en daarom hier vastgelegd: op 600px is de tegel 278px en past alles al; de knik zit rond een
     tegelbreedte van 200px (gemeten: 300px→12/12, 200px→10/12, 180px→6/12, 165px→1/12) en dat is ~450px viewport. */
  @media (max-width:480px){
    /* v6.221 (typografie-audit): DE HIËRARCHIE OP DE TEGEL WAS PLATGESLAGEN. Gemeten met de render-uitdraai op
       390 tegen 1710px:
         desktop  prijs 15 · naam 12 · verandering 11   -> prijs > naam > verandering
         mobiel   prijs 11 · naam 10 · verandering 11   -> prijs = verandering > naam
       Het percentage was op de telefoon even groot geworden als de prijs zelf, omdat .tk-chg (11px) niet
       meeverkleinde terwijl prijs en naam dat wél deden. En erger: met 11px stond de PRIJS onder het niveau van
       een gewone tabelcel (12px) — het belangrijkste getal op de tegel was kleiner dan een willekeurig bedrag in
       de balans. Dat was de meest voorkomende rangorde-omkering in de hele audit (576 elementparen).
       Nu prijs 12 · naam 10 · verandering 9: dezelfde volgorde als op de laptop, drie bestaande treden van de
       schaal, en de prijs staat weer op tabelniveau in plaats van eronder. */
    .tk-px{font-size:12px}
    .tk-nm{font-size:10px}
    .tk-chg{font-size:9px; line-height:11px; min-height:11px}
  }
  .tk.tk-empty .tk-top{display:none}   /* v5.192 (Timo): lege tegel = solide kaartje zoals de gevulde (achtergrond/rand/schaduw ongewijzigd), maar zonder inhoud -- geen "—"/logo-vakje/naam/koers/%-cijfer/live-bolletje. Alleen op de dashboard-tickers; de lege koersen-slots houden hun eigen gestippelde .mkt-slot-idioom */

  .hero-card{padding:20px 22px}
  .hero-top{display:block}
  .hero-vr{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
  .hero-badges{display:flex; flex-direction:row; gap:6px; align-items:center; cursor:pointer; user-select:none; -webkit-user-select:none}
  .hero-badges.locked{cursor:default} /* v5.275 (Timo): pointer-events:none op de badge zelf maakt 'm onzichtbaar voor hit-testing -- de muis "ziet" dan deze wrapper, dus de cursor moet HIER omgezet worden, niet op .h-d.locked (dat kwam nooit aan bod) */
  .hero-lh-r{display:flex; align-items:center; gap:8px}
  .nw-allbtn{position:absolute; bottom:calc(100% + 4px); right:0; z-index:5}
  .av-dofbtn{position:absolute; top:0; left:0; z-index:5}   /* v5.815 (Timo: "positie van de compact knop is nog steeds niet consistent"). GEMETEN t.o.v. de kaartrand: de kasstroom-knoppenrij staat op 124 met de legenda op 158; Compact stond op 138 — verticaal gecentreerd IN de legendarij i.p.v. erboven. Nu top:0 van een .htleg-rij die 34px bovenruimte reserveert: knop op 124, legenda op 158, exact de kasstroom-maatvoering. Absoluut blijft hij (v5.099/v5.791): zo duwt of flikkert er niets als hij verschijnt of verdwijnt. */   /* v5.791 (Timo: "hier flikkert het verschijnen van de compact knop helemaal nu"): hij staat nu in de legendaregel zelf, verticaal gecentreerd op de legenda-items. Dat was altijd al de bedoelde plek ("links op de legenda-regel", v5.116) — alleen bestond die regel toen niet als eigen element en moest de knop over het canvas zweven, mét een overlap-guard die hem op en neer duwde. Die guard is vervallen. */   /* v5.116/118: huisstijl-plek -- links en op EXACT dezelfde 18px onder de KPI-tegels als de Balans-/kasstroom-knoppenrijen (wrap-top ligt op tegels+26px [8 bal-sum-marge + 18 wrap-marge], dus top:-8; DESIGN.md kaart-toggles). Zwevend: duwt de grafiek niet; alleen bij ECHTE zichtbare overlap met legenda-items zet _avDofOverlapGuard .av-pushed op de wrap */
  .nw-wrap.av-pushed{padding-top:32px; box-sizing:border-box}   /* v5.116: vangnet -- canvas+legenda zakken onder de Compact-knop; border-box houdt de totale wrap-hoogte (en dus de onderlijn met Portfoliowaarde) gelijk. PUSH-waarde == de 32 in _avDofOverlapGuard */
  .swaptitle{font-size:10px; font-weight:600; cursor:pointer; transition:color .12s} .swaptitle:hover{color:var(--text-2)}   /* v6.247 (D-06): eigen maat i.p.v. erven. Op 1280 stonden de 13 swaptitles in DRIE standen (4x 10/500 geërfd, 6x 11/500 via .card-h .t, 3x 10/600 via de nvm-sectierij) terwijl het één rol is. Nu allemaal 10/600, gelijk aan de telefoon (v6.242). De nvm-sectierij (0,3,1) wint nog steeds van deze regel en zet dezelfde maat, dus dat blijft kloppen. */
  .cl-cap{font-size:10px;   color:var(--c4); margin-bottom:10px}
  .cl-tbl{width:100%; border-collapse:separate; border-spacing:0; font-size:12px}
.cl-scroll{max-height:min(62vh,560px); overflow:auto}
  .cl-tbl .cl-sel{width:100%; max-width:124px; min-width:80px}/* v4.981: knoppen/inputs krimpen mee binnen hun kolom zodat de tabel zonder scrollbalkje past. v5.539 (Timo): max 104->124px zodat "Inkomsten overig" (langste type) in het type-dropdownknopje past */
  .cl-tbl td:first-child{max-width:170px; overflow:hidden}/* v4.981: een (zeer) lange categorienaam rekt de tabel niet meer op -- kapt af met een ellipsis, volledige naam blijft via de rij zelf/Prive zichtbaar */
  .cl-tbl th{font-size:10px;   color:var(--text-3); font-weight:500; text-align:left; padding:5px 8px; border-bottom:1px solid var(--line-2); /* <- was r.456 */ padding-left:5px; padding-right:3px}/* v4.981: 2px minder celpadding per kant = ~40px totale winst over 10 kolommen */
.cl-tbl thead th{position:sticky; top:0; z-index:4; background:var(--surface-2); box-shadow:inset 0 -1px 0 var(--line-2)}
.cl-eur{color:var(--text-3); font-size:11px}
  .cl-tbl th.cl-sortc{user-select:none; white-space:nowrap} .cl-tbl th.cl-on{color:var(--accent)}
  .cl-tbl .cl-f{display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; margin-right:4px; padding:0; width:11px; height:11px; border:0; border-radius:4px; background:transparent; color:var(--text-3); opacity:.5; cursor:pointer; transition:opacity .12s,color .12s,background .12s}
  .cl-tbl .cl-f:hover{opacity:1; color:var(--accent); background:var(--accent-soft)} .cl-tbl th.cl-on .cl-f{opacity:1; color:var(--accent)}
  .cl-tbl td{/* v5.843: rechterpadding 6 -> 3px, gelijk aan de cellen; die 3px per kolom (elf kolommen) financiert de bredere hernoem-cel zonder dat de tabel groeit. v6.195: hier stonden ervóór nog `padding-left:6px; padding-right:6px`, en die deden niets — de shorthand hieronder overschrijft allebei. De werkelijke maten zijn links 20px en rechts 3px, dus de tekst hierboven beschreef een waarde die de browser nooit gebruikte. */ padding:0 3px 0 20px; height:38px; box-sizing:border-box; border-bottom:1px solid var(--line); color:var(--text-2); vertical-align:middle}
  .cl-tbl .cl-name{color:var(--text); font-weight:500; white-space:nowrap; overflow:hidden}
  .cl-tbl .cl-tk-sub{display:block; font-size:10px; font-weight:400; color:var(--text-3); font-variant-numeric:tabular-nums; line-height:1.3; margin-top:1px}   /* v5.864 (Timo): de tickercode klein en grijs onder de naam. EXACT de maten van .dtable td .mc-tk-sub (r.814, v5.794) — dezelfde subregel op een andere tabel hoort er niet anders uit te zien; overgenomen i.p.v. opnieuw gekozen. */
  .cl-nm-f{display:inline-block; max-width:88px; overflow:hidden; white-space:nowrap; vertical-align:bottom}   /* meetbaar naam-element (v5.633): draagt de volle naam; _fitNameNow kort af en zet .nm-clip (zachte fade) als het dan nog niet past. De CAP van 88px is een BUDGETKEUZE, geen leesbaarheidsgrens: de categorieëntabel moet met elf kolommen binnen 1038px blijven, en elke kolom kost daarbij 17px inspringing (zie de kolomkop-regel in DESIGN.md). Wil je langere namen zien, dan moet er een kolom af of het paneel breder — de fade + hover-uitklap vangt de rest. */
  .cl-tbl tr.cl-unset td{background:rgba(191,157,106,0.06)}
  .cl-tbl tr.cl-unset .cl-name{color:var(--c4)}
  .cl-tbl tbody tr:hover td{background:rgba(255,255,255,0.04)}
  .cl-tbl .cl-st{width:100%; max-width:82px; min-width:64px; height:22px; box-sizing:border-box; padding:0 7px; font-size:12px; border-radius:4px}   /* startwaarde-/startaantalveld. GEMETEN bij 82px (68px tekstruimte na de padding): "800,00" 41px, "1.035,00" 48px, "15.000,00" 56px, "-9.200,00" 57px, "102.192,00" 60px — alles past, met 8px marge op het langste realistische bedrag. Het oude v4.904-comment beweerde nog dat een 5-cijferig bedrag 88px vraagt; dat gold voor een grotere letter en klopt niet meer. Ga je hieronder de 76px, hermeet dan eerst: bij ~62px tekstruimte begint "102.192,00" te knellen. */
  .cl-sel{width:104px; box-sizing:border-box; height:22px; background:var(--surface-2); border:1px solid var(--line-2); border-radius:8px; color:var(--text); font-family:inherit; font-size:12px; padding:0 8px; cursor:pointer}
  .cl-type-btn{text-align:left; overflow:hidden; white-space:nowrap}
  .cl-tbl .cl-type-btn.cl-sel{width:78px}
  .cl-tbl .cl-grp-btn.cl-sel{width:113px}   /* v5.847 (Timo: "je kan de groepen cellen iets breder maken richting rechts, dan is het perfect"): 97 -> 113px. GEMETEN dat er nergens speling zat (elke kolom 0-5px), dus die 16px komt uit het filtericoon: 13 -> 11px maakt de inspringing per cel 22 -> 20px, en over elf kolommen is dat 22px vrij. De koptekst en de celinhoud blijven daarbij exact uitgelijnd, want de inspringing volgt de icoonmaat. */   /* v5.840 (Timo: "groepen cellen kunnen breder, echt zonde van de loze ruimte"): 84 -> 98px, betaald uit de Type-knop (84 -> 78) en de naamcap (96 -> 88). Groepsnamen zijn langer dan types, dus die kolom verdient de ruimte meer. */   /* v5.836 (Timo: "doe eens een optimalisatie van kolombreedtes, wat het mooiste oogt"). GEMETEN per kolom wat de KOP minimaal vraagt tegen wat de kolom kreeg: de vier ja/nee-kolommen (Belegging 78/80, Box 3 57/59, Liquide 65/67, BTC 50/56) staan al op hun kopminimum — daar valt niets te halen. De ruimte zat in de twee keuzeknoppen en de twee getalvelden. Type en Groep krijgen nu ÉÉN maat (88 en 104 -> allebei 96): dat leest rustiger in een rij naast elkaar, "Inkomsten overig" past weer voluit, en per saldo kost het niets. */   /* v5.835 (Timo: "type kolom zou ook nog wat smaller mogen, kan prima met de fade optie"): 104 -> 88px. "Inkomsten overig" past dan niet meer voluit en krijgt de app-brede fade + hover-uitklap — precies de ruil die Timo voorstelt. */
  .cl-tbl td:last-child .cl-st{max-width:58px}   /* v5.835 (Timo: "startaantal iets smaller"): het aantal is een kort getal, de startwaarde een bedrag met scheidingstekens — die twee hoeven niet even breed te zijn. */
  .hyp-vorm-btn.cl-sel:hover, .afl-btn.cl-sel:hover, .modus-btn.cl-sel:hover, .cl-type-btn:hover, .pd-today:hover{border-color:rgba(255,255,255,0.18); color:var(--text)}
  .vpop .tkpop-opt:hover{background:rgba(255,255,255,0.04)}   /* v5.365 (B1): familie 2 + popup-menurijen krijgen dezelfde hover-feedback als families 1/3 (was: dood) */   /* v4.919: native <select> vervangen door een knop -- text-align:left want een <button> centreert standaard */
  .cl-type-btn.cl-sel{font-size:11px; font-weight:400; text-transform:none; letter-spacing:0}   /* v5.539 (Timo): 12->11px (= de gedeelde .cl-sel/.cl-tog-maat, r451) zodat "Inkomsten overig" binnen de 124px past. v4.935: type-tekst title-case (Schuld/Bezit) i.p.v. de .cl-sel-uppercase (SCHULD) -- 2 klassen om de .cl-tog,.cl-sel-regel (die later in de bron staat) op specificiteit te verslaan; consistent met de vaste .cl-ftype-weergave en de type-popup */
  .cl-tog{height:22px; min-width:40px; text-align:center; line-height:1; padding:0 9px; border-radius:8px; border:1px solid transparent; background:rgba(255,255,255,0.04); color:var(--text-3); cursor:pointer; font-family:inherit}   /* v5.441: pill-taal in de tabelcontext (lichte rustvulling houdt 'm herkenbaar als knop) */
  .cl-tog.on{color:var(--accent); background:rgba(87,195,221,0.10)}
  .cl-ftype{display:inline-flex; align-items:center; height:22px; box-sizing:border-box; padding:0 8px; border:1px solid transparent; font-size:12px; color:var(--text-2)}
  .cl-tog,.cl-sel{font-size:11px; font-weight:500}   /* v5.441: sentence case (CAPS-transform vervallen, huisstijl) */
  .cl-cap.cl-dup{color:var(--down); font-weight:500; text-transform:none; letter-spacing:0}
  .cl-grpwrap{display:inline-flex; align-items:center; gap:2px}   /* v5.845 (Timo: "hier zit onnodige tussenruimte toch?"). GEMETEN wat er tussen de groepsknop en het startwaardeveld zat: 4px tot het kruisje + 14px kruisje + 8px tot de celrand + 22px inspringing van de volgende cel = 48px, waarvan alleen die 22px echt nodig is (dat IS de uitlijning met de koptekst). Het kruisje staat er ook als het onzichtbaar is, want anders verspringt de kolom zodra je een groep kiest. De 4px en de 8px zijn nu 2 en 3, en het kruisje is 2px smaller — die 9px gaan naar de knop, dus de tabel blijft even breed en het gat wordt 48 -> 39px. */
  .cl-grpdel{flex:0 0 auto; border:0; background:transparent; color:var(--text-3); font-size:14px; line-height:1; cursor:pointer; padding:0 1px; opacity:0; transition:opacity .12s, color .12s; display:inline-flex; align-items:center; align-self:center; position:relative; top:0.5px}   /* v5.635 (Timo, "kruisjes zijn niet goed op 1 lijn met de tekst"): het ×-glyph hangt in zijn regelvak iets hoog; inline-flex + align-self:center + 0,5px correctie zet 'm op de x-hoogte van de knoptekst ernaast */   /* v5.634 (Timo): exact het .cl-del-recept van het categorie-kruisje — onzichtbaar tot je de RIJ hovert, dan grijs */
  .cl-linkdel-empty{visibility:hidden; pointer-events:none}   /* v6.001: naam is historisch — sinds de koppel-cel weg is (v5.999) draagt alléén de GROEP-cel deze klasse. v5.343 (Timo): × verborgen maar neemt wél ruimte in bij een lege koppel-cel -> constante kolombreedte, geen verschuiving bij het vullen */
  .cl-tbl tbody tr:hover .cl-grpdel{opacity:0.65}
  .cl-grpdel:hover{opacity:1; color:var(--down)}   /* v5.634 (Timo): pas rood als je écht op het kruisje staat */
  .cl-tbl td.cl-typecell{text-align:left}   /* v5.341 (Timo): Type-cel links; bij een Groei-rij staat de koppel-cel hier gestapeld ónder de Type-dropdown */
  .cl-tbl td.cl-grpcell{text-align:left}   /* v5.340 (Timo): Groep-cel altijd links -- de nth-child(4-7)-center-regel mag 'm niet vangen */
  .cl-grp-btn.cl-sel{flex:0 0 113px; text-align:left; font-size:12px; font-weight:400; text-transform:none; letter-spacing:0; overflow:hidden; white-space:nowrap}   /* v5.633: géén text-overflow:ellipsis meer — een te lange groepsnaam krijgt de zachte fade (.nm-clip), conform de app-brede regel. v5.628 (Timo, "groep cellen zijn niet netjes gelijke lengte en uitgelijnd"): de eigen flex-basis (0 1 104px + min-width 80px) liet de knop KRIMPEN tot 80px bij korte tekst en uitzetten tot 104px bij lange -> ongelijke cellen en een × die per rij verspringt. Nu flex:0 0 104px, dus exact de vaste .cl-sel-maat van de Type-kolom; te lange namen krijgen … i.p.v. onder de chevron door te lopen (de basis houdt padding-right:22px vrij voor die chevron) */
  .cl-grp-btn.cl-grp-empty{color:var(--text-3)}
  .cl-grpbeheer{margin-top:10px}   /* v5.630 (Timo, "tekst is niet goed uitgelijnd"): eigen align-items:center weg — de basis .cl-add lijnt op flex-end uit, dus de knop en de chips stonden een paar px hoger dan in de regel erboven */
  .cl-grpchips{display:flex; flex-wrap:wrap; gap:16px; align-items:center; min-height:22px}   /* v5.633 (Timo, "tekst staat niet mooi op 1 lijn"): de reeks is nu even hoog als het veld/de knop ernaast (22px) en centreert zijn tekst daarin — zonder die hoogte zakte de 14px hoge kale tekst naar de onderrand (flex-end) en stond hij 4px lager dan de knoptekst */   /* v5.632 (Timo): zelfde 16px als de spec-paren hierboven, en zonder pilvorm meet die gap letter-tot-letter i.p.v. rand-tot-rand */
  .cl-grpchip{display:inline-flex; align-items:center; gap:5px; color:var(--text-3); font-size:11px}   /* v5.632 (Timo, "de pilvorm moet weg"): geen rand, vlak of padding meer — kale groepsnaam + ×. De 5px binnen het paar (naam↔×) is exact de aflos-spec-norm (.schedet-tot b), zodat een chip als één eenheid leest. */
  .cl-grpchip-x{border:0; background:transparent; color:var(--text-3); font-size:14px; line-height:1; cursor:pointer; padding:0 2px; opacity:0.65; transition:opacity .12s, color .12s; display:inline-flex; align-items:center; align-self:center; position:relative; top:0.5px}   /* v5.635 (Timo): in de reeks onderin ALTIJD grijs zichtbaar (geen rij-hover-trap — er is hier geen rij om te hoveren); top:0.5px zet het kruis exact op de x-hoogte van de 11px-naam ernaast */   /* v5.634: zelfde trap als in de tabel — de chip is hier de 'regel' */   /* zelfde ×-token als .cl-grpdel/.cl-linkdel */
  .cl-grpchip-x:hover{opacity:1; color:var(--down)}
  /* v6.213 (blok 4c, Timo 27-7): de groepsnaam is nu een KNOP (klik = hernoemen, met doorwerking naar elke
     categorie die de groep draagt). Hij moet er precies zo uitzien als de kale tekst van vóór v6.213 — dus alle
     knop-eigenschappen terug naar de chip-norm van r638 (kleur/maat/gezin erven van .cl-grpchip). Alleen de
     aanwijzer en de hover-oplichting verraden dat er iets te doen valt; dat is dezelfde taal als een klikbare
     categorienaam in de tabel (.cl-name-rn). */
  .cl-grpchip-nm{border:0; background:transparent; padding:0; color:inherit; font-family:inherit; font-size:inherit; font-weight:inherit; line-height:inherit; cursor:pointer; transition:color .12s}
  .cl-grpchip-nm:hover{color:var(--text)}
  .cl-add{display:flex; gap:7px 10px; align-items:flex-end; flex-wrap:wrap; margin-top:14px}
  .cl-rncell{width:1%}   /* v5.830: de hernoem-kolom vraagt zo min mogelijk breedte; het veld erin bepaalt de maat, niet de kolom */
  .cl-rn-in{width:auto; field-sizing:content; min-width:52px; max-width:88px; box-sizing:border-box; height:22px; background:var(--surface-2); border:1px solid var(--line-2); border-radius:8px; color:var(--text); font-family:inherit}   /* v6.051: font-size/padding hier WEG — ze kwamen nooit aan. Het veld draagt óók .be-in (r537), gelijke specificiteit en die staat later, dus .be-in won altijd met 12px/8px. Dat is dus het beeld dat er staat en dat Timo heeft goedgekeurd; de 11px/7px hierboven waren een stille leugen in de code (gevonden met tools/css_botsing.js). Wil je hier ooit tóch 11px/7px, verhoog dan de specificiteit — niet de waarde terugzetten. */   /* v5.828 (Timo): het hernoem-veld volgt exact het maatrecept van de keuzeknoppen ernaast (.cl-sel: 104px breed, 22px hoog, radius 8, 12px) — één rij, één maat. Geen chevron, want dit is vrije tekst en geen keuze. */
  .cl-rn-in::placeholder{color:var(--text-3); opacity:1}
  .cl-rn-in:focus{border-color:var(--accent,#57c3dd); background:rgba(255,255,255,0.04); outline:none}
  .cl-addin{flex:0 1 200px; box-sizing:border-box; height:22px; background:var(--surface-2); border:1px solid var(--line-2); border-radius:4px; color:var(--text); font:inherit; font-size:12px; padding:0 8px}
  .cl-addin::placeholder{color:var(--text-3); opacity:1}   /* v5.627 (Timo, "kleuren van letters zijn niet consistent"): de browser-default placeholder (rgb(117,117,117)) week af van de —text-3 van de "Kies…"-knoppen ernaast; zelfde token als de twee bestaande ::placeholder-regels (.set-item-name/.oedit) */
  .cl-addin:focus{outline:none; border-color:rgba(87,195,221,0.45)}
  .cl-add-f{display:inline-flex; flex-direction:column; gap:3px}
  .cl-add-l{font-size:10px; letter-spacing:0; text-transform:none; color:var(--text-3); font-weight:600; line-height:1.3; padding-left:2px; white-space:nowrap}   /* v5.342 (Timo): gelijk aan de DUO/EW/Vastgoed-veldlabels (.set-fields .lbl) — geen hoofdletters/tracking, 10px, zodat alle instellingen-veldtitels consistent zijn */
  .cl-add-cat.cl-sel,.cl-add-type.cl-sel{width:auto; box-sizing:border-box; text-align:left; font-size:12px; font-weight:400; text-transform:none; letter-spacing:0; white-space:nowrap}   /* v4.935: geen overflow:hidden/ellipsis meer -- de gekozen categorie/type-naam nooit afkorten (Timo) */
  .cl-add-cat.cl-sel{min-width:110px}   /* v5.632 (Timo): zelfde basisbreedte als het Groep-veld (110px); width:auto hierboven laat 'm nog steeds meegroeien met een lange categorienaam */
  .cl-add-type.cl-sel{min-width:110px}
  .cl-add-cat.cl-add-ph,.cl-add-type.cl-add-ph{color:var(--text-3)}
  .cl-add-type.cl-sel:disabled{opacity:.5; cursor:default}
  .cl-add-f .cl-addin{flex:none; width:110px}   /* .cl-addin heeft flex:0 1 200px -> in de kolom-flex van .cl-add-f zou dat de HOOGTE op 200px zetten; hier expliciet vaste breedte + geen flex */
  .cl-add-f .cl-dnum{width:88px}
  .cl-add-f .cl-dnum-eur{padding-left:20px; width:88px}
  .cl-add-f .be-inbox{display:block}
  .cl-add-go{align-self:flex-end}
  .cl-add-go:disabled{opacity:1; cursor:default}   /* v5.873 (Timo: knopteksten gelijktrekken): een uitgeschakelde Toevoegen-knop werd op .45 gedimd en oogde dus als een ANDERE tekstkleur (63,69,77 i.p.v. --text-3) naast Ga terug / Kies… ernaast. De dimming is eraf; het uit-zijn blijft zichtbaar via de cursor en het uitblijven van de hover-wash. Bewuste afweging, op Timo's herhaalde verzoek — de knop dóet nog steeds niets tot hij mag. */
  .cl-add-warn{font-size:10px; color:var(--down,#e07a7a); align-self:center; padding-bottom:3px}
  .cl-tbl td.cl-name{position:relative; display:flex; align-items:center}   /* v5.884 (Timo 23-7: "zorg dat bij zelftoegevoegde categorieën die ook een koers eronder hebben het kruisje mooi in het midden komt, staat nu te hoog"): de cel is een flexrij van twee blokken — [naam + tickercode] en het kruisje. align-items:center legt het kruisje op het midden van het HELE naamblok; daarvóór stond het inline achter de naamREGEL en dus te hoog zodra er een codregel onder kwam (v5.864). Eén regel zonder code: identiek aan de oude stand. */
  .cl-del{margin-left:8px; border:0; background:transparent; color:var(--text-3); font-size:14px; line-height:1; cursor:pointer; opacity:0; transition:opacity .12s, color .12s; padding:0 2px; vertical-align:middle; display:inline-flex; align-items:center; position:relative; top:-1px}   /* v5.638 (Timo): zelfde x-hoogte-correctie als de andere kruisjes (v5.635) — deze was toen overgeslagen */
  .cl-tbl tbody tr:hover .cl-del{opacity:1}   /* v5.833 (Timo: "kruisje zit echt enorm verstopt"): 0,65 -> 1. Het staat pal naast een naam die tegenwoordig op 150px gecapt is en dus vaak uitfadet; op 65% dooft het kruisje mee in dat verloop. */
  .cl-tbl button.cl-name-rn{background:transparent; border:0; padding:0; margin:0; font:inherit; font-weight:inherit; color:inherit; cursor:pointer; text-align:left; display:flex; flex-direction:column; align-items:flex-start; min-width:0}   /* v5.884: de knop draagt nu naam ÉN tickercode (v5.864-subregel), dus een kolom-flex i.p.v. inline; min-width:0 houdt de bestaande fade/afkorting van .cl-nm-f werkend binnen de smalle cel */
  .cl-tbl button.cl-name-rn:hover{color:var(--accent)}
  .cl-tbl .cl-nmwrap{display:flex; flex-direction:column; align-items:flex-start; min-width:0}
  .cl-tbl .cl-nmwrap .cl-nm-f{max-width:114px}   /* v5.884 (Timo 23-7: "niet-verwijderbare categorienamen kunnen net zo goed wat later faden — nu fade het vroeg maar er is niks anders dan lege ruimte tussen het gefade woord en de volgende kolom"): de 88px-cap van r458 reserveert ruimte voor het ×-knopje, en dat knopje bestaat op deze rijen niet. GEMETEN: de naamcel heeft 113,7px content-ruimte bij een 1600px-venster en 118,8px bij 2400px (de tabel zit op zijn 1038px-max, dus de kolom groeit niet verder mee). 114px is de kleinste van die twee: de vaste rijen benutten de vrijgekomen 26px volledig en de kolom kan bij geen enkele vensterbreedte opgerekt worden. Rijen mét kruisje houden 88px — daar staat het knopje nog steeds in die ruimte. */   /* v5.884-fix: exact hetzelfde blok-silhouet als button.cl-name-rn hierboven, voor de rijen ZONDER hernoem-knop (vaste/data-categorieën). Zonder deze wrapper werden naam en code twee losse kinderen van de flex-cel en stonden ze naast elkaar ("iShares GoldPPFB"). */
  .cl-tbl button.cl-name-rn:hover .cl-tk-sub{color:var(--accent)}   /* v5.884 (Timo): de code licht MEE op met de naam — ze zijn één klikdoel, dus ze horen ook één hover-doel te zijn. De code blijft 10px/400 tegenover 12px/500, dus de rangorde naam-boven-code blijft staan; alleen de kleur trekt gelijk. */
  .cl-tbl td.cl-name>.cl-del{align-self:center; top:-1px; margin-left:12px}   /* v5.966 (Timo 24-7, "kruisje staat niet helemaal in het midden"): de v5.884-terugdraai van de v5.638-correctie was een brug te ver — flex centreert de BOXEN, maar de baseline ligt binnen de 15px/lh1-kruisjesbox ~1px lager dan binnen de 12px/lh-normal-naambox (Inter-metrics: (0.9688+0.2418)em, gemeten via TextMetrics 24-7: inktmiddens per baseline gelijk op 0,07px — het hele optische gat is dat baselineverschil). top:-1px zet de ×-inkt op de as van de naam-inkt; geldt ook voor de éénregelige rij (naam==code, bv. BND), waar het 't hardst opviel. Afstand-keuze 12px (v5.884) blijft. */
  .cl-tbl tbody tr:hover .cl-del:hover,.cl-tbl tbody tr:hover .cl-grpdel:hover,.cl-del:hover{color:var(--down); opacity:1}   /* v5.634 (Timo): alle drie de tabel-kruisjes identiek — grijs zodra je de RIJ hovert, vol rood zodra je op het kruisje zelf staat. De rij-regel (0,3,0) won voorheen op specificiteit van .cl-del:hover (0,2,0), waardoor het kruisje wel rood werd maar op 65% bleef hangen; dat gold ook al voor het bestaande categorie-kruisje. */
  .cl-sel{appearance:none; -webkit-appearance:none; -moz-appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 3.5L5 6.5L8 3.5' fill='none' stroke='%238b93a3' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat:no-repeat; background-position:right 8px center; padding-right:22px}   /* v4.937: .cl-dgrp (concept-rij Groep) krijgt de chevron -- oogt nu als een keuzecel. v5.021: .cl-grp eruit -- die krijgt nu een ECHT los chevron-knopje (.cl-grpchev) i.p.v. deze background-chevron, zodat een klik op de tekst puur focust (bewerken) en alleen de chevron het lijstje opent */
  .pd-today{display:inline-flex; align-items:center; justify-content:flex-end; white-space:nowrap; width:80px; box-sizing:border-box; height:22px; padding:0 8px; border:1px solid var(--line-2); border-radius:4px; background:var(--surface-2); color:var(--text); font-size:12px; font-weight:400; font-variant-numeric:tabular-nums}   /* v4.894: was 9.5px/uppercase -- naast de 12px gewone-tekst-datumvelden elders in hetzelfde paneel (Peildatum/Startdatum) oogde dezelfde "07-2026"-notatie hier onnodig anders. v4.895: was auto-breed (~84px, padding+content) -- nu vaste 100px + rechts uitgelijnd, zoals alle .be-in-cellen elders in dit paneel. v6.009 (Timo 25-7: "heel jaar cel en datum cel hier zijn onnodig breed"): 100 -> 72px. GEMETEN op zijn maten: "07-2026" is 54,5px in tabular-nums (elke maand/jaar-combinatie exact even breed) + 2x8px padding = 70,5px nodig; 72 laat 1,5px lucht. De rest van deze lijst (.pd-tog) schaalt met zijn inhoud mee -- deze cel hield als enige samen met .modus-btn een vaste maat uit v4.895, en dat was precies het verschil dat opviel. */
  .pd-tog{height:22px; padding:0 14px; border-radius:8px; border:1px solid transparent; background:rgba(255,255,255,0.04); color:var(--text-3); font-size:12px; font-weight:400; cursor:pointer; font-family:inherit}   /* v5.441: pill-taal */   /* v4.894: was 9.5px/uppercase -- gelijkgetrokken met .be-in zodat Instellingen-knoppen niet los staan van de omringende invoervelden */
  .pd-tog.on{color:var(--accent); background:rgba(87,195,221,0.10)}
  .pd-tog.pd-tog-done{color:var(--accent); background:rgba(87,195,221,0.10); transition:background .12s,color .12s}   /* v4.901: kort "gelukt"-flitsje voor eenmalige-actie-knoppen (Tickers/Bedrijven bij Weergave assets resetten) -- die hebben geen aan/uit-stand zoals andere .pd-tog's, dus zonder dit was een klik onzichtbaar of 'ie iets deed. v4.902: groen->blauw (--accent, dezelfde kleur als .pd-tog.on) -- groen impliceerde hier een positieve financiële uitkomst terwijl het puur een "actie uitgevoerd"-bevestiging is; blauw is de bestaande "actief/geselecteerd"-conventie in de app */
  .be-in{width:100px; flex:0 0 auto; background:var(--surface-2); border:1px solid var(--line-2); border-radius:4px; color:var(--text); font-family:inherit; font-size:12px; font-variant-numeric:tabular-nums; height:22px; box-sizing:border-box; padding:0 8px; text-align:right}   /* v4.898: font-variant-numeric toegevoegd -- body zet dit app-breed via font-feature-settings:"tnum", maar <input>-elementen erven dat (net als font-family) niet automatisch over van de body; zonder deze regel renderden cijfers in elk .be-in-veld (Peildatum/Restschuld/Rente/...) net-niet-tabular, terwijl de .pd-today-datumchip ernaast dat wél expliciet had -- de bron van Timo's "niet 100% consistent" */
  .be-in.mb-override{color:var(--accent,#57c3dd); font-weight:600}
  .be-in.cl-rn-in{text-align:left}   /* A2-06 (Timo 29-7: "hernoemen zijn woorden, dat moet links uitgelijnd toch?"). Twee klassen op een veld, gelijke specificiteit: .be-in staat later en won met text-align:right, want dat veld is gemaakt voor BEDRAGEN. Woorden horen links. Vandaar de dubbele klasse als selector i.p.v. de regel verplaatsen: die wint ongeacht de volgorde in het bestand. De dode text-align:left is in dezelfde ronde uit .cl-rn-in gehaald, zelfde opruiming als v6.051 daar half deed met font-size en padding. */
  .be-in:focus{outline:none; border-color:rgba(87,195,221,0.45)}
  .be-inbox{position:relative; display:inline-block; vertical-align:middle}
  .be-inbox .cl-eur,.be-inbox .cl-pct{position:absolute; top:50%; transform:translateY(-50%); margin:0; pointer-events:none}
  .be-inbox .cl-eur{left:8px}
  .be-inbox .cl-pct{right:8px}
  .be-inbox-eur .be-in{padding-left:20px}
  .be-inbox-pct .be-in{padding-right:20px}
  .hero-lh-l{display:flex; align-items:center; gap:8px}
  .hero-v{font-size:48px; font-weight:600; letter-spacing:-0.02em; line-height:1; color:var(--text)}
  .hero-v.neg{color:var(--down)}
  .h-d{display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; padding:0 10px; height:21px; box-sizing:border-box; border-radius:6px; background:var(--up-soft); color:var(--up)}
  .h-d.neg{background:var(--down-soft); color:var(--down)}
  .h-d .ytd{font-size:9px; font-weight:600; opacity:0.6; letter-spacing:0.06em; margin-left:-1px}
  .h-d.locked{pointer-events:none} /* v5.275: cursor stond hier verkeerd -- pointer-events:none haalt de badge zelf uit de hit-test, dus cursor:default hier deed nooit iets; zie .hero-badges.locked hierboven */
  .nw-wrap{position:relative; height:300px; margin-top:18px}

  .kpis{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:1fr; gap:10px; height:100%}
  .kpi{position:relative; min-width:0; background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0) 55%), var(--surface-2); border:1px solid var(--line-2); border-radius:8px; padding:17px 18px; display:flex; flex-direction:row; align-items:center; justify-content:flex-start; gap:14px; transition:border-color .12s}
  .kpi-st{display:flex; flex-direction:column; gap:5px; min-width:0}
  .kpi.clk{cursor:pointer; user-select:none; -webkit-user-select:none}   /* v5.558 (Timo): herhaald klikken op een wissel-KPI selecteerde alle tekst */
  .kpi:hover{border-color:rgba(255,255,255,0.18)}
  .kpis.dragging-active .kpi:not(.dragging):hover{border-color:var(--line-2)}
  .kpi-ic{flex:0 0 auto; width:38px; height:38px; border-radius:8px; display:flex; align-items:center; justify-content:center}
  .kpi-ic svg{width:19px; height:19px}
  .kpi .k-l{flex:none; min-width:0; margin-bottom:0; font-size:10px;   color:var(--text-3); font-weight:500; white-space:nowrap; overflow:hidden}
  .kpi .k-v{font-size:20px; font-weight:600; color:var(--text); letter-spacing:-0.02em; line-height:1; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden}   /* v5.504 (G-6, Timo): nowrap + overflow-guard; JS _fitKpiVals verkleint een te lang bedrag tot het past i.p.v. over de buurtegel te lopen */
  .kpi .k-v.neg{color:var(--down)}
  .kpi .k-v.pos{color:var(--up)}
  .kpi.kpi-drag{cursor:pointer; user-select:none; -webkit-user-select:none}   /* v5.558: idem voor de sleepbare KPI-tegels */
  .kpi.dragging{z-index:60; transition:none; box-shadow:0 30px 80px -20px rgba(0,0,0,0.82); border-color:rgba(255,255,255,0.30); cursor:grabbing; opacity:0.97}
  .kpi.kpi-shift{transition:transform .18s cubic-bezier(.2,.7,.3,1)}
  .kpis.dragging-active{cursor:grabbing}
  .kpis.dragging-active .kpi{user-select:none}
  #balans .bal-r[data-cat]{user-select:none; -webkit-user-select:none; touch-action:pan-y; /* <- was r.326 */ cursor:pointer}

  .grid-13{display:grid; grid-template-columns:1fr 1.34fr; gap:18px; align-items:stretch}   /* v5.371: basisverhouding HERSTELD (mijn v5.368-swap kneep per ongeluk óók Balans|Allocatie — Timo's melding); de vermogen-eerst-sectie gebruikt nu gewoon de bestaande .g-rev-modifier */
  .g-rev{grid-template-columns:1.34fr 1fr}
  .g-half{grid-template-columns:1fr 1fr}
  .grid-13 > .card, .grid-13 > .kpis, .grid-13 > .tickers, .grid-13 > .cf-col, .grid-13 > .ov-col{min-width:0}
  .hero-card, .alloc-card{display:flex; flex-direction:column}
  .ov-col{display:flex; flex-direction:column; gap:18px}   /* v5.997 (Timo's symmetrieronde 24-7): 16 -> 18px. Kaarten NAAST elkaar stonden 18px uit elkaar (.grid-13, .mkt-grid), kaarten ONDER elkaar 16px — dezelfde ruimte zag er dus anders uit afhankelijk van de richting. Nu overal 18. */   /* v5.129 (Timo): elke Overzicht-kolom (tickers / netto-vermogen) heeft nu een eigen sec-h-kop erboven; de kolom stapelt kop + content en de content vult de resthoogte (flex:1) zodat beide kolommen gelijk hoog blijven (align-items:stretch op .grid-13). gap:16px = exact de .sec-kop-tot-content-norm (`.sec{gap:16px}`), zodat de koppen even ver van hun content staan als elke andere sectiekop. */
  .ov-col > .tickers{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:1fr; gap:10px; flex:1}
  .ov-col > .card{flex:1}
  .hero-lh{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px}
  .nw-tog{display:inline-flex; gap:6px}   /* v5.131 (Timo): chip-afstand binnen een rij = 6px, exact de Balans-knoppenrij-norm (die zet elke chip in een eigen .nw-tog met margin-left:6px). Was 2px -- alleen zichtbaar in de kasstroom-standenrij (de enige multi-knop .nw-tog), die daardoor als enige plakte. NB: .wv-tog{gap:7px} is dode CSS (0 vindplaatsen) -- niet als norm gebruiken. */
  .nw-tog[hidden], .nw-b[hidden]{display:none}   /* v5.413: het hidden-ATTRIBUUT verliest anders van de display:inline-flex hierboven (UA-stylesheet-les: de Zakelijk-knop/Incl. omzet-chip bleven zichtbaar terwijl JS ze hidden zette) */
  .nw-b.nw-caps{font-size:10px; letter-spacing:0.04em}   /* v5.439 (Timo's knoppen-besluit): standenrijen in de Planner-pill-taal (#tk-tabs-recept: randloos, sentence case, actief = gevulde accent-wash) i.p.v. de CAPS-chips met rand; rust is ghost (border transparent = geen layout-shift, het .mkt-rng-b-idioom) */
  .nw-b.on{background:rgba(87,195,221,0.10); color:var(--accent)}
  .nw-b:hover{color:var(--text-2); background:rgba(255,255,255,0.04)}
  /* v5.067 (Timo): GEEN extra margin-top op de kasstroom-knoppenrij -- .cf-sum heeft al margin-bottom:18px (net als Balans), dus de v5.061-margin-top:10px maakte de afstand 28px i.p.v. 18px. Nu 18px, gelijk aan Balans + Waarde-per-asset (die 8px bal-sum + 10px margin-top = 18px doen). */
  .grip{display:inline-block; vertical-align:-2px; margin-right:5px; opacity:0.6; fill:var(--text-2)}
  .hero-card .nw-wrap{flex:1; min-height:230px}
  .donut-pair{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:6px; min-width:0}
  .donut-stage{position:relative; height:184px; width:100%; min-width:0; margin:0 auto}
  .donut-c .dh-sub{margin-top:3px; color:var(--text-3); max-width:74%}   /* v6.011 (Timo 25-7): subregel ONDER de waarde in het donut-midden, alleen het vastgoedvlak gebruikt hem ("LTV 60,0%" onder het hypotheekbedrag). Erft .dl voor lettergrootte en de nowrap-clip; eigen max-width omdat _donutGatMax alleen het bovenste .dl-label op de binnenring klemt en deze regel korter is dan een segmentnaam. Valt vanzelf weg bij DUO/eigen woning: _dhBuild verwijdert het element zodra subTxt leeg is. */
  .donut-c .dl{font-size:10px; max-width:62%; white-space:nowrap; overflow:hidden}   /* v5.812: het donut-midden toont sinds deze versie de VOLLE naam; zonder breedtegrens kan .nm-clip niet meten en loopt de tekst buiten het gat. 62% van de donut = binnen de ring. */ .donut-c .dv{font-size:15px}   /* v5.560 (Timo, "teksten passen niet bij elkaar"): óók de vastgoed-LTV volgt dit twee-regel-recept (label "LTV" + waarde 15px) — de v5.558-mini-eenregel-variant (.dh-c-ltv, label verborgen) is teruggedraaid; het verborgen label brak bovendien de donut-hover (donutTip schrijft de segmentnaam in .dl) */
  .card-h.alloc-head{flex-direction:row; align-items:center; justify-content:flex-start; gap:8px}
  .legend{display:flex; flex-direction:column; gap:10px}
  .bar-wrap{position:relative; height:330px}
  .cf-col{display:flex; flex-direction:column; gap:18px; min-width:0}   /* v5.997: 16 -> 18px, zie .ov-col */
  .cf-col>.card{flex:1; display:flex; flex-direction:column}
  .cf-col>.kpis{flex:1; height:auto; min-height:0}
  .cf-card .bar-wrap{flex:1; height:auto; min-height:300px}

  /* herbalancering */
  .rbtable{width:100%; border-collapse:separate; border-spacing:0; font-size:12px}
  #rebal .rbtable{table-layout:fixed}
  #rebal .rbtable th,#rebal .rbtable td{white-space:nowrap}
    #rebal .rbtable th:nth-child(1),#rebal .rbtable td:nth-child(1){width:22.67%; overflow:hidden}   /* v5.995 — ALLE ZEVEN KOLOMMEN OPNIEUW VERDEELD (Timo 24-7 avond: "zorg dan dat je alle kolommen uit allocatie logisch verdeeld qua ruimte ertussen. Doe dit door te kijken via de chrome extensie in het dashboard zelf"). Gemeten in zijn eigen Chrome (tabel 882px) waren de gaten TUSSEN de inhoud 17 / 88 / 79 / 69 / 90 / 80px — het krapste gat lag precies naast de langste inhoud (de namen), de ruimste ernaast. Nieuwe verdeling: elke kolom krijgt zijn maximale inhoud plus een gelijk gat, resultaat 67 / 70 / 80 / 67 / 70 / 80px. De breedtes volgen uit twee eisen: (a) wat de kolom bij Timo TOONT (dat bepaalt het zichtbare gat), (b) een ondergrens zodat het bij een klant met miljoenen niet breekt — "€ 1.075.268" is 94px en met minteken 104px, plus 20px padding, dus 114px voor Huidig/Doel en 124px voor W/V en Mutatie (die dragen de negatieve bedragen). Kolom 1 krijgt 200px = precies de breedste naam (183px) plus de 17px bolletje+gap, dus zijn langste fondsnaam past nu voluit. VALKUIL (v5.994, live gemeten): calc() met gemengde eenheden werkt hier NIET — Chrome negeert het onder table-layout:fixed en verdeelt de rest gelijk; kale percentages zijn de enige werkende vorm. */
  #rebal .rbtable th:nth-child(2),#rebal .rbtable td:nth-child(2){width:11.79%}   /* v5.995: zie de verdeling bij kolom 1 — dit gat (percentage -> Huidig) ging van 88 naar 70px, Timo's "de percentage kolom zou nog wat dichter naar de huidige euro's kolom kunnen" */
  #rebal .rbtable th:nth-child(3),#rebal .rbtable td:nth-child(3){width:12.93%}
  #rebal .rbtable th:nth-child(4),#rebal .rbtable td:nth-child(4){width:14.06%}
  #rebal .rbtable th:nth-child(5),#rebal .rbtable td:nth-child(5){width:11.56%}
  #rebal .rbtable th:nth-child(6),#rebal .rbtable td:nth-child(6){width:12.93%}
  #rebal .rbtable th:nth-child(7),#rebal .rbtable td:nth-child(7){width:14.06%}
  .rbtable th{font-size:10px;   color:var(--text-3); font-weight:500; text-align:right; padding:5px 10px; border-bottom:1px solid var(--line-2)}
  .rbtable th:first-child{text-align:left; padding-left:0}
  .rbtable td{text-align:right; padding:8px 10px; color:var(--text); border-bottom:1px solid rgba(255,255,255,0.04); font-variant-numeric:tabular-nums}
  .rbtable tbody tr:hover td{background:rgba(255,255,255,0.04); /* <- was r.622 */ border-bottom-color:transparent}
  .rbtable tbody tr:has(+ tr:hover) td{border-bottom-color:transparent}
  .rbtable td:first-child{text-align:left; color:var(--text); font-weight:500; padding-left:0; padding-right:0}   /* v5.993 (Timo 24-7 avond: "de fade van de allocatie assets namen iets later doen ook, doe maar 10px"): de padding-right van 10px (uit de generieke .rbtable td, r623) eraf — dát is precies de 10px. GEMETEN in zijn eigen Chrome vóór de ingreep: naamcel 168px, daarin SPAN.rb-dot 8px op x=0 en SPAN.rb-nm-f met max-width:calc(100% - 17px) op x=17, dus 141px naamruimte in een content-box van 158; "Vanguard S&P 500 (Dist)" wil 143px en "iShares MSCI World (Acc)" 149px — bèide net te veel, vandaar zijn twee gefadede namen. Met de padding eraf is de content-box 168 en de naamruimte 151px: beide passen voluit, de fade begint 10px later. De `- 17px` blijft staan, die reserveert het bolletje + gap (geen loze ruimte). Scheiding met de volgende kolom komt van háár padding-left (10px) en die kolom is rechts uitgelijnd, dus er blijft ruim wit tussen naam en percentage. */
  .rbtable tbody tr:last-child td{border-bottom-color:transparent}
  .rbtable tbody tr:hover td, .rbtable tbody tr:has(+ tr:hover) td{border-bottom-color:transparent}   /* v5.652 (consistentie): de gehoverde rij en de rij erbóven laten hun scheidingslijn vallen, zoals de maandcijfers dat al deden — de hoverband oogt daardoor als één blok i.p.v. als een rij met een streep eronder. */
  .cl-tbl tbody tr:hover td, .cl-tbl tbody tr:has(+ tr:hover) td{border-bottom-color:transparent}
  .kmon-view .kmon-tbl tbody tr:hover td, .kmon-view .kmon-tbl tbody tr:has(+ tr:hover) td{border-bottom-color:transparent}
  .duosched-tbl tbody tr:hover td, .duosched-tbl tbody tr:has(+ tr:hover) td{border-bottom-color:transparent}
  .rbtable td.up{color:var(--up)} .rbtable td.down{color:var(--down)}
  .rbtable tfoot td{border-top:1px solid var(--line-2); border-bottom:none; padding-top:9px; font-weight:600; color:var(--text-2)}
  .rbtable th.up{color:var(--up)} .rbtable th.down{color:var(--down)}
  .rbtable th#rebDoelSum{font-size:11px; font-weight:600; text-transform:none; letter-spacing:0}
  .rb-foot{display:grid; grid-template-columns:max-content 1fr; column-gap:14px; row-gap:14px; align-items:center; margin-top:auto; padding-top:14px; border-top:1px solid var(--line)}
  .rb-nets{display:contents}
  .rb-net{display:flex; align-items:center; gap:10px; font-size:12px; color:var(--text-2)}
  .rb-net b{font-weight:600} .rb-net b.up{color:var(--up)} .rb-net b.down{color:var(--down)}
  .rb-netv{display:inline-flex; align-items:center; gap:2px; font-weight:600; color:var(--up)}
  .net-pc{font-size:12px; font-weight:600; opacity:.8; margin-left:2px} .net-pc.up{color:var(--up)} .net-pc.down{color:var(--down)}
  .rb-netv.out{color:var(--down)}
  .netedit{text-align:left; font:inherit; font-weight:600; font-variant-numeric:tabular-nums; color:var(--up); background:rgba(255,255,255,0.04); border:1px solid var(--line-2); border-radius:4px; height:22px; box-sizing:border-box; padding:0 5px; outline:none; min-width:calc(4ch + 29px)}
  .netedit:focus{border-color:var(--up); background:rgba(255,255,255,0.06)}
  .rb-netv.out .netedit{color:var(--down)} .rb-netv.out .netedit:focus{border-color:var(--down)}
  .net-inbox{position:relative; display:inline-block; vertical-align:middle}/* v4.948: €-teken BINNEN het netedit-vak (nog te investeren / uit portfolio te halen) */
  .net-inbox .net-eur{position:absolute; left:6px; top:50%; transform:translateY(-50%); pointer-events:none; font-weight:600}
  .net-inbox .netedit{padding-left:18px}
  .netedit:disabled{opacity:0.5; cursor:wait}
  #rebal{margin-top:4px; padding-top:4px; flex:1 1 auto; display:flex; flex-direction:column}   /* v6.009 (Timo 25-7: "ook even gelijk trekken dan"): de afstand van de ZICHTBARE cirkel tot de "Toon alles"-knop was 29,5px tegen 18px van KPI-rij naar knoprij in het balansvlak ernaast -- 11,5px meer bij twee kaarten die naast elkaar staan. Opbouw van die 29,5: 4,5px lege canvasrand onder de getekende donut (Chart.js, geen CSS) + 6px .donut-pair margin-bottom + 4px margin-top hier + 15px padding-top hier. Alleen deze padding aangepast (15 -> 4): 4,5 + 6 + 4 + 4 = 18,5px, binnen een halve pixel van de 18px-norm uit DESIGN.md (onder een inhoudsblok altijd 18px). Exact 18 zou 13,5px CSS vergen en dat is een halve pixel -- verboden per de v5.997-regel. */
  .rb-strat{display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:10px;   color:var(--text-3); font-weight:500; margin-bottom:11px; padding:0}
  .rb-btns{display:flex; gap:6px}
  .rb-strat b{color:var(--accent); font-weight:600}   /* v5.439: pill-maat — 11px sentence (de 10px-CAPS-maat + spacing vervallen met de casing) */
  .alloc-head{align-items:center}
  /* audit: chip-familie uniform (radius/idle-bg/idle-kleur/active/hover) */
  .nw-b{/* v5.660 (Timo: "ALL YTD knop moet een wat kleiner lettertype om te compenseren voor de all caps"): hoofdletters ogen zwaarder dan gemengde tekst, dus deze chip zakt naar de 10px-trap die de app al gebruikt voor hoofdletter-labels (.bal-tag2) — de chipmaat zelf (padding/hoogte) blijft gelijk aan alle andere .nw-b's. */ font-family:inherit; font-size:11px; font-weight:500; color:var(--text-3); background:transparent; border:1px solid transparent; /* v6.195: `padding:3px 11px` stond hier en werd meteen erna overschreven door `padding:0 11px` — dood, en het gaf een verkeerd beeld van de echte knophoogte. */ display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; border-radius:8px; cursor:pointer; /* <- was r.588 */ display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; height:22px; padding:0 11px; font-size:11px; line-height:1; /* <- was r.653 */ border-radius:8px}
  .pd-tog,.cl-tog,.cl-sel{border-radius:4px}   /* v5.439: form-toggles blijven op de invoerveld-lijn (v4.894), géén pill — dat is de standenrij-familie. v5.540 (Timo, "rond vs vierkant"): .cl-sel erbij (was 8px, r442) — de Vorm/type/aflosstelsel/modus-dropdowns horen óók op de 4px-invoerveld-lijn, gelijk aan de inputs (.be-in) en toggles */
  .pd-tog,.cl-tog{background:rgba(255,255,255,0.04); color:var(--text-3); transition:color .12s, border-color .12s, background .12s}
  .pd-tog.on, .cl-tog.on{background:rgba(87,195,221,0.10); color:var(--accent)}
  .pd-tog:hover,.cl-tog:hover{color:var(--text-2); background:rgba(255,255,255,0.08)}   /* v5.442: wash-hover zonder rand (huisstijl) */
  /* v4.953: vrije tolerantie-control (waarde-invoer + %/€-wissel + Alle-afwijkingen) i.p.v. de 4 vaste strategie-knoppen */
  /* v4.954: tolerantie = puur €-vak, helemaal rechts op de "Nog te investeren"-rij (margin-left:auto duwt 'm naar de rechterrand van het vlak) */
  .rb-tol{display:inline-flex; align-items:center; gap:8px; margin-left:auto}
  .rb-tol-lbl{font-size:12px; color:var(--text-2); white-space:nowrap}
  .rb-tolbox{position:relative; display:inline-block}
  .rb-tolbox .rb-tol-eur{position:absolute; left:8px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--text-3); font-size:12px}
  .rb-tolbox .rb-tolval{height:22px; box-sizing:border-box; padding:0 8px 0 20px; text-align:right; font-size:12px; text-transform:none; min-width:calc(4ch + 30px)}   /* v5.139: breedte via sizeTol() op inhoud (was vast 92px, breder dan de netedit-cel); min-width = lege-invoer-vangnet — v5.167 (Timo): 2ch->4ch, zelfde 4-cijfer-basis als de netedit ("Nog te investeren", min-width 4ch+29px) zodat de twee cellen op dezelfde rij even breed ogen */
  .oedit::placeholder{color:var(--text-3); opacity:0.6}

  /* balans (combined card) */
  .bal-hdr{display:flex; justify-content:flex-start; margin-bottom:12px}
  .bal-sum{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); gap:14px; margin-bottom:18px}   /* v5.600 (G-6-BESLUIT Timo 20-7: "automatisch verkleinen"): gelijke kolommen + shrink — minmax(0,…) begrenst de kolom hard zodat _fitKpiVals (draait hier al sinds v5.504 via _FIT_BALSV, maar had op de kale 1fr nooit effect: min-width:auto liet de kolom meegroeien en scrollWidth bleef == clientWidth) een te lang bedrag daadwerkelijk verkleint tot het past (min 11px). Vervangt het v5.584-leen-gedrag; de A/B-afweging staat historisch in DESIGN.md §Bedrag-shrink */
  .bal-sum-4{grid-template-columns:repeat(4,minmax(0,300px))}   /* v5.376 (MB-3): was een inline style op de Portfoliowaarde-KPI-rij (index.html) — inline won óók van de mobiele @880-collapse naar 1 kolom; als klasse VÓÓR het @880-blok grijpt die collapse weer, desktop-computed identiek */
  .bal-sum-3{grid-template-columns:repeat(3,minmax(0,300px))}   /* v5.376 (MB-3): idem, de Waarde-per-asset-rij */
  /* v5.807 (Timo 22-7: "zorg dat vlakken met knoppen, legenda en kpi's de ademruimte van kasstroom vlak volgen").
     Stond op 8px met een +10px-compensatie op .bal-sum+.bal-hdr, samen de 18px van de kasstroom. Die compensatie gold
     alleen als er een KNOPPENRIJ volgde — en sinds de legenda's HTML zijn (v5.780) volgt daar een .htleg/.htleg-rij,
     die dus op 8px bleef hangen. Nu geldt overal gewoon de basisregel .bal-sum{margin-bottom:18px}: één afstand onder
     een KPI-rij, ongeacht wat eronder staat (knoppen, legenda of grafiek). De uitzondering is weg i.p.v. uitgebreid. */
  .bal-ic-begin{color:#8aa0b5;background:rgba(138,160,181,0.15)}
  .bal-ic-inleg{color:#7ba0c2;background:rgba(123,160,194,0.15)}
  .bal-ic-up{color:var(--up); background:rgba(108,192,160,0.15)}      /* v6.086 (bevindingen 8.3 + 9.2): de sentiment-icoontinten van de Portfoliowaarde- en Waarde-per-asset-tegels stonden als rgba-literalen in app.js (drie plekken). Zelfde recept als .bal-ic-inleg (v5.365, K5). */
  .bal-ic-down{color:var(--down); background:rgba(210,138,130,0.15)}
   /* v5.365 (K5): de twee voormalig-inline tegel-icoonkleuren (index.html) — #7ba0c2 = de benoemde inleg/investering-datakleur (ook in app.js pfInleg + .cf-si.cf-inv), zie DESIGN.md §2B */
  .bal-si{display:flex; align-items:center; gap:14px; padding:17px 18px; background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0) 55%), var(--surface-2); border:1px solid var(--line-2); border-radius:8px}
  .bal-si.bal-net{background:linear-gradient(180deg, rgba(87,195,221,0.10), rgba(87,195,221,0.015)); border-color:rgba(87,195,221,0.28)}
  .bal-si.pf-click{cursor:pointer; user-select:none; -webkit-user-select:none; transition:border-color .12s}
  .bal-si.pf-click:hover{border-color:rgba(255,255,255,0.18)}
  .bal-ic{width:38px; height:38px; border-radius:8px; flex:0 0 auto; display:flex; align-items:center; justify-content:center}
  .bal-ic svg{width:19px; height:19px}
  .bal-st{display:flex; flex-direction:column; gap:5px; min-width:0}
  .bal-sl{font-size:10px;   color:var(--text-3); font-weight:500}
  .bal-sv{font-size:20px; font-weight:600; color:var(--text); letter-spacing:-0.02em; line-height:1; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden}   /* v5.584 (G-6): overflow-guard zoals .k-v (v5.504); JS _fitKpiVals verkleint een te lang bedrag, hidden capt het uiterste geval */
  .bal-sv.neg{color:var(--down)}.bal-sv.pos{color:var(--up)}
  .bal-net .bal-sv{color:var(--accent)} .bal-net .bal-sv.neg{color:var(--down)}
  .cf-sum{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); gap:14px; margin-bottom:18px}   /* v5.600 (G-6-besluit): gelijke kolommen + shrink, zelfde omslag als .bal-sum hierboven */
  .cf-si{user-select:none; -webkit-user-select:none; transition:border-color .12s, background .12s; padding:12px 18px; height:85px; box-sizing:border-box}   /* v5.997 (Timo's symmetrieronde): de 11,5px was teruggerekend om op 85px uit te komen. Nu een heel getal met de hoogte EXPLICIET geborgd (zelfde constructie als .av-si), zodat de tegel niet aan de padding hangt. */
  .cf-si[data-mode],.cf-si[data-spaartog]{cursor:pointer}
  .cf-si[data-mode]:hover,.cf-si[data-spaartog]:hover{border-color:rgba(255,255,255,0.18)}   /* v5.410 (Timo): hover-gloed + pointer ALLEEN op de klikbare avg↔tot-toggletegels — data-mode is exact het criterium van de #cfSum-klikhandler; vaste tegels (Spaarquote/percentages/Grootste post) gloeiden mee zonder dat een klik iets deed */
  .cf-si .bal-sl{white-space:nowrap; overflow:hidden}   /* v5.968 (N1): overflow:hidden erbij zodat een te lang label netjes binnen de tegel blijft en de nm-clip-fade (via _FADE_SEL) kan aangrijpen — passende labels zien er exact hetzelfde uit */
  .cf-si .bal-sv{font-size:20px}
  .bal-sv.av-sv{font-size:20px; line-height:20px; white-space:nowrap; overflow:hidden; max-width:100%}
  .av-si{display:flex; align-items:center; gap:14px; padding:9px 18px; height:85px; box-sizing:border-box; overflow:hidden; cursor:pointer; user-select:none; -webkit-user-select:none; transition:border-color .12s}
  .av-si:hover{border-color:rgba(255,255,255,0.18)}
  .av-si .bal-sl{font-size:10px; white-space:nowrap; overflow:hidden}
  .av-si .bal-st{min-width:0; width:100%; gap:2px}   /* v5.834 (Timo: "lettergrootte mag nog een tikje groter, en dat laatste woord van de eerste regel mag naar de tweede"): 3 -> 2px. Samen met de padding 10 -> 9 levert dat 4px extra vrije hoogte, en omdat twee regels die delen kan de letter 2px omhoog. */
  .av-asset{display:block; font-size:16px; font-weight:600; color:var(--text); line-height:1.12; letter-spacing:-0.02em; overflow:hidden; white-space:nowrap}   /* v5.849 (Timo: "toon gewoon altijd hetzelfde lettergrootte, past het niet dan fade met popupje. Maak de standaard lettergrootte wel 1px kleiner"): ÉÉN vaste maat, 17 -> 16px, één regel, en past de naam niet dan doet de app-brede fade + naamtip de rest. De twee-regels-clamp met krimpende letter (v5.792-848) is vervallen: die gaf drie tegels naast elkaar in drie maten en kostte bij elke bijstelling een ronde. */
  .av-line2{display:block; font-size:12px; font-weight:600; color:var(--text-2); white-space:nowrap; font-variant-numeric:tabular-nums}
  .av-line2.up{color:var(--up)} .av-line2.down{color:var(--down)}
  .bal-sum .bal-si, .cf-sum .cf-si{min-height:85px}
  .cf-si.cf-inc .bal-sv{color:var(--up)}
  .cf-si.cf-exp .bal-sv{color:var(--down)}
  .cf-si .bal-sv.av-asset{color:var(--text); font-size:16px}   /* v5.851 (Timo): een KPI-waarde die een WOORD is (hier de grootste kostenpost) staat op 16px, niet op de 20px van een bedrag — zie DESIGN.md §KPI-waarde die een woord is. De .cf-si .bal-sv-regel hierboven (0,2,0) won van de .av-asset-basis (0,1,0), vandaar dat de maat hier expliciet staat. */   /* v5.405 (Timo): Grootste-post-NAAM wit zoals Beste/Zwakste asset — de cf-exp-waarde-kleurregel hierboven kleurde 'm rood */
  .bal-sv.bal-sv-inleg{color:#7ba0c2}   /* v6.086 (bevinding 8.3): de WAARDE van de inleg-tegel droeg deze kleur inline in app.js (pfSetTile). Zelfde data-tint als .bal-ic-inleg (v5.365, K5). BEWUST HIER en met twee klassen: .bal-sv{color:var(--text)} staat verderop in het bestand en zou een enkele klasse verslaan — dezelfde specificiteitsles als bij de markeer-vlaggetjes. */
  .bal-sv.bal-sv-up{color:var(--up)}
  .bal-sv.bal-sv-down{color:var(--down)}
  .cf-si.cf-exp .av-line2{color:var(--down)}   /* v5.405: het BEDRAG draagt de uitgaven-kleur (consistent met de asset-tegels waar de subregel het sentiment kleurt) */
  .cf-si .bal-ic{width:38px; height:38px}
  .bal-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px}
  .bal-col-h{display:flex; justify-content:space-between; font-size:10px;   color:var(--text-3); font-weight:500; padding-bottom:9px; margin-bottom:7px; border-bottom:1px solid var(--line-2)}
  .bal-subh{display:flex; justify-content:space-between; font-size:10px;   color:var(--text-3); font-weight:500; margin:22px 0 7px; padding-bottom:9px; border-bottom:1px solid var(--line-2)}   /* v4.937: Liquide middelen-kop nu gelijk aan Bezittingen/Schulden (lijn ONDER de kop, 10px) i.p.v. een lijn erboven -- extra top-marge onderscheidt 'm als sub-sectie binnen de Bezittingen-kolom */
  .bal-col{display:grid; grid-template-columns:minmax(0, max-content) minmax(102px, 1fr) max-content; column-gap:16px; align-content:start}   /* v5.829 (Timo: "rode staafjes nog niet in het midden tussen de schuldnamen en schuldbedragen"). GEMETEN in de v5.825-stand: de kolommen waren symmetrisch (16px aan weerszijden van de staaf), maar de TEKSTEN niet — 12px van de naam tot de staaf en 51px van de staaf tot het bedrag. Oorzaak: allebei de buitenkolommen waren 1fr, dus even breed, maar de bedragen (±46px) vulden die 79,5px lang niet en staan rechts uitgelijnd; die 33px slack kwam links van het bedrag te staan. Nu volgen de buitenkolommen hun INHOUD: de naamkolom wordt zo breed als de langste naam (gecapt door .bal-l max-width), de bedragkolom zo breed als het breedste bedrag, en de staaf krijgt de rest met 112px als ondergrens. Daarmee eindigt de langste naam exact 16px vóór de staaf en begint het breedste bedrag exact 16px erna — het midden zoals Timo het bedoelt. Een naam die veel korter is dan de langste van zijn helft houdt links meer lucht; dat is met links uitgelijnde namen niet anders op te lossen. */   /* v5.825 (Timo: "balkjes lengte is opzich wel nice zo, maar nog niet in het midden voor zowel schuld als bezit"). GEMETEN in de v5.823-stand: kolom 303px, verdeling 89 / 112 / 70 — dus 105px links van de staaf en 86px rechts. Hij stond netjes tussen de KOLOMMEN, maar de naamkolom is breder dan de bedragkolom, dus niet in het midden van de RIJ. De twee buitenkolommen zijn nu allebei 1fr en dus per definitie even breed; de staaf staat er met zijn vaste 112px exact tussenin, bij elke kaartbreedte en in beide helften. Bij 303px: 79,5 / 112 / 79,5. De bedragkolom heeft `auto` als ondergrens, zodat een lang bedrag nooit afkapt — dan wijkt de symmetrie liever dan het getal. */   /* v5.823 (Timo: "balansstaafjes te kort"). GEMETEN op het echte renderpad @1710px: de balanskolom is daar 303px, en die verdeelde hij als 145 / 56 / 70 — de staaf stond dus op zijn ONDERGRENS terwijl de naam zijn volle cap kreeg. Ondergrens 56 -> 112px: dat is geen nieuw getal maar de bestaande 112px-token van v5.801 (breedste chipgroep 41+4+50 plus 8px lucht aan weerszijden), zodat de balkenstand en de Box 3/Liquide-stand hetzelfde middelpunt houden. Nieuwe verdeling bij 303px: naam 89 / staaf 112 / bedrag 70. GEMETEN naambreedtes @12px Inter: de gewone balansnamen lopen tot 89px ("Omzetbelasting"); alleen de fondsnamen (181px) en twee lange samenstellingen faden — precies de ruil die Timo in v5.772 zelf koos ("dan krimpt de NAAM i.p.v. dat de balk verdwijnt"). */   /* v5.798 (Timo 22-7: "volledige view van een fade naam duwt nu alles weg ipv overlappen, bug"). GEMETEN: bedrag én balk schoven 56px op bij het uitklappen. Oorzaak is mijn eigen v5.792-wijziging: een kale `1fr` betekent `minmax(auto, 1fr)`, en die auto-ondergrens is MIN-CONTENT — dus zodra de uitgeklapte naam breder wordt, groeit de kolom mee en verschuift de hele rij. Met `minmax(0, 1fr)` is de ondergrens 0 en steekt de tekst er overheen zoals bedoeld. Precies de reden waarom hier vóór v5.792 `minmax(0, max-content)` stond. */   /* v5.790 (Timo 22-7: "kunnen we de rode en blauwe staafjes afstand ook niet optimaliseren dat ze altijd gelijk zijn? Je zou wat lengte van rood kunnen snoepen om blauw meer ademruimte te geven"). GEMETEN op zijn scherm: links 64px (de v5.772-vloer, want de naamkolom at de rest), rechts 112px — 48px verschil, en de balken van twee helften zijn niet meer te vergelijken. Met `1fr` kan dat ook niet anders: de balk is dan de restpost van een naamkolom die links nu eenmaal breder is. Daarom een VASTE 88px, exact het midden van 64 en 112: blauw wint 24px, rood levert 24px in, en ze zijn per definitie gelijk — op elk scherm en bij elke naamlengte.
     v5.792 (Timo: "de rode streepjes doen nu net alsof er bij hun ook een lang bedrag staat, maar dat is helemaal niet;
     daar ontstaat veel meer ademruimte dan nodig") — de bedragkolom stond op `auto`, en een auto-track krijgt in grid
     de VRIJE ruimte toebedeeld. Rechts zijn de namen korter ("IB & Zvw 2025" tegen "iShares MSCI World USD (Acc)"),
     dus daar bleef ruimte over en die schoof in de bedragkolom: 94px breed voor tekst van 70px. Nu `max-content` voor
     het bedrag (exact zo breed als het langste bedrag) en `1fr` voor de naam, zodat overgebleven ruimte naar de NAAM
     gaat — de enige kolom die er iets mee kan. */
  /* v5.801 (Timo 22-7: "het middenpunt van de staafjes en de labels is niet gelijk"). GEMETEN: de balkenstand had een
     middenkolom van 88px en de Box 3/Liquide-stand 72px (min-content van de chips) — 8px verschil in het middelpunt,
     en bij de volledige chiptekst ("Box 3"/"Liquide", vanaf 1700px breed) loopt dat verder op. Beide standen delen nu
     één vaste maat van 112px: dat is de breedste chipgroep (41 + 4 + 50) plus de 8px eigen lucht aan weerszijden, dus
     de labels passen altijd én het middelpunt is per definitie gelijk. De balk wint er meteen 24px mee. */
  .bal-grid.bal-flagsview .bal-col{grid-template-columns:minmax(0, max-content) minmax(102px, 1fr) max-content}   /* v5.823: dezelfde 56 -> 112px als de balkenstand hierboven — de twee standen MOETEN één middenmaat delen, anders verspringt het middelpunt tussen de twee weergaven (v5.801). 112px is meteen de vloer die de chipgroep nodig heeft, dus die kan hier nooit meer buiten zijn kolom lopen. */   /* v5.790: in de Box 3/Liquide-stand staan er CHIPS in die kolom, geen staafje. Die zijn samen 95px (41 + 4 + 50) en pasten niet in de 88px van hierboven, dus liepen ze buiten hun kolom en botsten ze tegen het bedrag — Timo: "waarom rammen die labels bijna mijn bedragen in". min-content laat de kolom precies zo breed worden als de chips nodig hebben; de 8px eigen lucht van .bal-flags telt daarin mee. */   /* v5.772 (Timo 22-7, "blauwe staafjes zie ik überhaupt niet"): de balkkolom had `min-content` als ondergrens, en een LEEG staafje heeft een min-content van 0 — de balk was dus de sluitpost: zodra naam (max 220px) + bedrag + 2×16px gap de kolom vulden, kromp hij naar 0px, en door de subgrid gold dat meteen voor de HELE kolomhelft (ook korte namen als "Borg"). Gemeten: kolom 561px -> balk 239px, 421px -> 99px, 310px -> 0px terwijl de schuldenhelft (korte namen, kolom 1 = 88px i.p.v. de 220px-cap) op 119px bleef staan — precies Timo's beeld: links niets, rechts wel. Vloer 64px: onder ~60px wordt de 3%-vloer (2px) onleesbaar, en 64 blijft onder de ~95px die de chips in de Box 3/Liquide-stand claimen, dus de naam levert hier nooit méér in dan in die stand. Nu krimpt de NAAM (met de .nm-clip-fade die daar al voor is) i.p.v. dat de balk verdwijnt. */   /* v5.458
 (Timo, opschoning B — vervangt het JS-meet-mechaniek _balColSync dat +2px/refresh dreef en de balk naar links liet kruipen): kolommen PUUR CSS via subgrid. Naam = eigen breedte (vol als er ruimte is; cap via .bal-l max-width; pas krimpen+faden als het écht niet past → het bedrag blijft altijd heel), balk = de rest, bedrag = vol. De balk-vloer is INHOUD-afhankelijk (min-content): een gewoon balkje mag ver krimpen zodat de naam vóórgaat, maar de vlaggen-weergave (.bal-flags = 2 chips flex-shrink:0) houdt automatisch ruimte voor de chips. Beide helften apart → L/R-balken hoeven niet meer exact even lang (bewuste look-wijziging t.o.v. v5.398). v5.459: column-gap 12→16px — meer lucht tussen de langste namen en de staaf (Timo: 'stonden te dicht op de staafjes') */
  .bal-r{/* balans */ justify-content:space-between; gap:8px; line-height:1.5; /* <- was r.315 */ display:grid; grid-template-columns:subgrid; grid-column:1 / -1; align-items:center; column-gap:16px; padding:6px 0; font-size:12px}   /* subgrid: alle rijen in één kolomhelft delen exact dezelfde 3 kolommen → balken en bedragen lijnen uit, zonder JS. v5.459: column-gap EXPLICIET op de rij (16px) — een subgrid-rij erft de parent-gap niet automatisch, en de oude .bal-r-regel (r.248, display:flex) lekte anders gap:8px; dit is de echte naam↔balk-ademruimte */
  .bal-col-h,.bal-subh{grid-column:1 / -1}   /* koppen spannen de volle breedte (blijven flex vanbinnen) */
  .bal-r.clk{cursor:pointer; transition:opacity .12s, background .12s; border-radius:4px; margin:0 -8px; padding:6px 8px}
  .bal-r.clk:hover{background:rgba(255,255,255,0.04)}
  .bal-r.off{opacity:0.4}
  .bal-r.off.clk:hover, .bal-r.off[data-r]:hover{background:rgba(255,255,255,0.1)}   /* v5.648 (Timo): zelfde compensatie voor de balanslijst — 0,10 x 0,4 = 0,04. */
  .bal-r[data-r]{cursor:pointer}
  .bal-r[data-r]:hover{background:rgba(255,255,255,0.04)}
  .vpop{position:fixed; z-index:350; display:none; min-width:184px; background:var(--surface-2); border:1px solid var(--line-2); border-radius:8px; padding:5px; box-shadow:0 14px 36px rgba(0,0,0,0.55)}
  /* v5.779 (N3 uit PLAN_BC_22-7.md, Timo's go 22-7: "bouw maar. Zorg er wel voor dat het uiterlijk netjes blijft, je
     weet hoe ze er nu uitzien dus daar gaan we weer voor maar dan als html"). HTML-legenda: pixelgelijk aan de
     canvas-legenda die Chart.js tekende — stip 8x8 met rectRounded-radius, tekst 11px in --text-2, 14px tussenruimte,
     gecentreerd boven de grafiek (mobiel 7px/9px/9px, zoals de oude opties). Wat we ERBIJ krijgen: de naam kan faden
     i.p.v. afkappen (.nm-clip via _fadeSweep), het zijn echte knoppen (toetsenbord + schermlezer) en de typografie
     komt uit dezelfde tokens als de rest van de app. */
  .htleg + .nw-wrap, .htleg-rij + .nw-wrap{margin-top:0}   /* v5.796 (Timo 22-7: "ik bedoelde kasstroom vlak" als norm voor de verhoudingen). GEMETEN: bij Waarde-per-asset en Portfoliowaarde zat er 18px extra tussen de legenda en de grafiek (de .nw-wrap brengt zelf marge mee), bij Kasstroom 0. Zichtbare afstand daar: 26px boven de legenda, 10px eronder. Die 18px is nu weg, zodat alle drie de vlakken op 26/10 uitkomen — de kasstroom-verhouding. */
  .htleg-rij{position:relative; padding-top:34px}   /* v5.996: de 34px knopruimte is nu ALLEEN voor de Waarde-per-asset-wikkel, die de Compact-knop draagt (absoluut op top:0). Zonder knop schuift hij naar 10px via .av-dof-uit, r755. */
  .card > .htleg:not(.bal-hdr + .htleg){position:relative; padding-top:10px}   /* v5.996 (Timo 24-7 avond: "wanneer de compact knop er niet staat, moet de afstand tussen de kpi en de legenda in het portfoliowaarde dezelfde afstand worden als ... van het waarde per asset vlak dus zonder de knop"): 34 -> 10px. Deze selector raakt alleen #pfLegend (Portfoliowaarde) — het enige vlak met een legenda die noch een knoppenrij noch een wikkel boven zich heeft — en dat vlak krijgt NOOIT een Compact-knop, dus die 34px knopruimte stond er voor niets. Gemeten in zijn Chrome: KPI->legenda 52 -> 28px, exact gelijk aan Waarde-per-asset in de av-dof-uit-stand (18px .bal-sum-marge + 10px). DE X-AS-BORGING (v5.820/821/823, drie rondes werk) BLIJFT: die liep vroeger via 'iedereen 34px', maar sinds v5.979 rekt de grafiekwrap naar de gedeelde kaartbodem (flex-basis 0) — de grafiek wordt dus 24px langer i.p.v. hoger, en pf/av houden dezelfde x-as. Na deze wijziging gemeten op zijn 1710px: beide canvas-bodems op 1108px, ongewijzigd. */   /* v5.823 (Timo: "x-assen liggen nog steeds niet gelijk"). GEMETEN op het echte renderpad met tools/harnas_assets.js @1710px: ".card .htleg" raakte bij Waarde-per-asset TWEE elementen — de wikkel .htleg-rij én de legenda #avLegend die erin zit (ook een ".card .htleg", en met de Compact-knop als voorganger i.p.v. een .bal-hdr). De 34px werd dus dubbel gereserveerd: canvas op y=219 tegen y=185 bij Portfoliowaarde — exact de 34px die Timo ziet. Met de directe-kind-combinator telt alleen de legenda die zélf in de kaart hangt (#pfLegend); zit ze in een wikkel, dan levert die wikkel de ruimte al. */   /* v5.821: de v5.820-selector (.bal-sum + .htleg) eiste dat de legenda DIRECT op de KPI-rij volgt; zit daar iets tussen, dan viel de reservering weg en begon die grafiek 34px hoger dan zijn buurman. Nu krijgt elke legenda in een kaart die ruimte, BEHALVE als er een echte knoppenrij (.bal-hdr) boven staat — die levert de 34px zelf al, zoals bij de kasstroom. */   /* v5.820: óók een legenda ZONDER knoprij reserveert die 34px. Portfoliowaarde en Waarde-per-asset staan naast elkaar; zonder deze reservering begon de ene canvas 17px hoger dan de andere en lagen hun x-assen niet op één lijn (gemeten: canvasTop 169 vs 186). Nu volgen alle drie de vlakken dezelfde kasstroom-maatvoering. */   /* v5.815: 34px = de hoogte van een knoppenrij (22px) + de 12px eronder, zodat de legenda op dezelfde hoogte staat als bij de kasstroom. De ruimte is VAST, dus de verschijnende Compact-knop verzet niets. */   /* v5.791: draagt de Compact-knop links van de legenda. De knop moet BUITEN #avLegend staan, want die container wordt bij elke chart-update opnieuw gevuld (innerHTML) — daarbinnen zou hij verdwijnen. */
  .htleg-rij > .htleg{padding-top:0}
  .bal-hdr + .htleg{padding-top:0}   /* v5.996 (Timo: "zorg dat de afstand van kpi tot knop tot legenda van de kasstroom vlak gelijk wordt aan dat van de waarde per asset vlak wanneer de compact knop er staat"): de kasstroom-legenda droeg bovenop de 12px onder de knoppenrij nog eens 14px eigen padding (basisregel r748: calc(26px - var(--htleg-boven, 8px)), met 12px in dit vlak). Knop->legenda was daardoor 26px, terwijl Waarde-per-asset mét knop op 12px staat: de wikkel reserveert 34px, de knop is 22px hoog, blijft 12px. Nu allebei 18px KPI->knop en 12px knop->legenda. */   /* v5.823, tweede helft van dezelfde meting: na het weghalen van de dubbele 34px bleef er 18px verschil staan. Die komt uit de basisregel hieronder (padding-top calc(26px - 8px) = 18px), die de legenda IN de wikkel wél trof en de losse legenda niet — want daar wint de 34px-regel hierboven op specificiteit. De wikkel reserveert de ruimte al; de legenda erbinnen doet er niets meer bovenop. GEMETEN: canvas bij beide kaarten op y=185, x-assen op dezelfde regel. */
  .htleg{display:flex; flex-wrap:nowrap; overflow:hidden; align-items:center; justify-content:center; gap:6px 14px; padding:calc(26px - var(--htleg-boven, 8px)) 8px 10px; margin:0}   /* v5.790 (Timo 22-7: "afstand legenda tot de kpi's is veel te krap; zorg dat dit ook consistent wordt over de gehele app"). GEMETEN: 8px onder de KPI-rij bij Waarde-per-asset en Portfoliowaarde, 12px bij Kasstroom — te krap én onderling ongelijk. Nu is de ZICHTBARE afstand overal exact 26px. Dat vraagt een rekensom, want de buur boven de legenda brengt zelf al marge mee en die verschilt per plek: de KPI-rij 8px, de knoppenbalk van Kasstroom 12px. Zonder compensatie zou dezelfde padding dus 26 én 30px opleveren — zichtbaar ongelijk, precies wat Timo aanwijst. --htleg-boven draagt die buurmarge, de padding trekt hem eraf. Onder 10px, want daar komt de grafiek die zelf al padding meebrengt. */
  #cfLegend{--htleg-boven:12px}
  #avLegend{flex-wrap:wrap; justify-content:flex-start; row-gap:4px}   /* v5.979 (Timo 24-7, derde iteratie — "doorlopende rijen onder elkaar, niet in kolommen, wel netjes"): gewone flow-wrap, items op hun NATUURLIJKE breedte en links uitgelijnd — de v5.974-chaos kwam juist van centreren + minimumbreedtes (gaten). Volle regel = door op de volgende. De x-as-borging zit in de wrap-rek (zie .grid-13.g-rev-blok), dus de legenda mag hier hoger worden */
  #avLegend .htleg-i{flex-shrink:0}
  @media (min-width:881px){ #avLegend .htleg-i{max-width:110px} }   /* v5.980: drempel GEMETEN op Timo's echte namen in het echte element (harnas_timo, 24-7): Vanguard FTSE All-World (Dist)=179px, iShares MSCI World (Acc)=149, Vanguard S&P 500 (Dist)=144, dan een gat naar Strategy Stretch=98 — de eerdere 180 lag EEN pixel boven zijn langste naam en fadede dus niets (zijn melding); 110 (Timo's testkeuze 24-7 na de gemeten 130) fadet dezelfde drie lange — Strategy Stretch 98 blijft er nog nét onder — alleen strakker afgekapt */   /* v5.979: de fade-cap geldt alleen op desktop — op mobiel blijft de bestaande generieke 150px-norm (r758) gelden; zonder deze scope won #avLegend die strijd per specificiteit en was de mobiele norm stilletjes overruled */
  #avLegend .htleg-t{overflow:hidden; white-space:nowrap; min-width:0}   /* v5.979: de tekstspan kapt af binnen de 220px-cap zodat de generieke sweep (_FADE_SEL) er de zachte fade + naamtip op zet — zonder overflow liep een lange naam gewoon door */
  .htleg-rij:has(#avLegend){transition:padding-top 0.25s ease}   /* v5.979: alleen de Waarde-per-asset-rij schuift (av-dof-uit); een app-brede transitie op rijen die nooit schuiven is dood gewicht — en LET OP de meetles: in een verborgen preview-pane bevriest een transitie de computed op de startwaarde, meet dus met transition:none */
  .htleg-rij.av-dof-uit{padding-top:10px}   /* v5.979 (Timo): geen enkele reeks dof = geen Compact-knop = de legenda schuift omhoog (34px-knopruimte -> 10px lucht); gaat er iets dof, dan zet _avDofBtnSync de klasse uit en schuift alles zacht terug omlaag voor de knop. De x-as blijft op zijn plek door de wrap-rek (>1280) resp. de stapel-layout (<=1280) */   /* v5.979: een item krimpt nooit meer (geen afgekapte 'Bito…'-stompjes — hij wrapt in plaats daarvan). Cap op 180px (Timo 24-7, bijgesteld: "sommige legendapunten zijn wat te lang" op de eerdere 220): de langste fondsnamen ('Vanguard FTSE All-World (Dist)' ≈ 200px), alleen uitschieters faden — zelfde item-max-patroon als de mobiele .htleg-i-regel (150px, ≤880) */
  .htleg-i{display:inline-flex; align-items:center; gap:6px; background:none; border:0; padding:2px 0; margin:0; cursor:pointer; font-family:inherit; font-size:11px; line-height:1.2; color:var(--text-2); max-width:230px; min-width:0; flex:0 1 auto; transition:opacity .12s, color .12s}   /* v5.794: color meegenomen in de overgang, anders sprong de tekstkleur instant terwijl de stip nog fade */
  .htleg-i:hover{opacity:0.78}
  .htleg-d{flex:0 0 auto; width:8px; height:8px; border-radius:2px; transition:opacity .12s}   /* v5.850 (Timo: "wordt de legenda vanzelf kleiner met fade als er meer bij komen en de rij vol raakt?"). GEMETEN dat dat NIET zo was: .htleg stond op flex-wrap:wrap, dus bij zeven assets op een venster van 1400px sprong de legenda naar TWEE regels — en dat duwde het canvas 23px omlaag, waardoor de x-as van Waarde-per-asset weer uit de pas liep met Portfoliowaarde (precies de fout die v5.823 dichtte). Nu wrapt de legenda niet meer: de items krimpen (min-width:0 + flex:0 1 auto) en de naam krijgt de app-brede fade met naamtip. De rij blijft dus altijd één regel hoog en de assen blijven op één lijn. */
  .htleg-i.off{color:var(--text-3)}
  .htleg-i.off .htleg-d{opacity:0.35}
  .htleg-i.off .htleg-t{opacity:0.55}
  .htleg-t{/* v5.794: zelfde duur als de tekst hieronder, zodat stip en tekst als één ding dof worden */ overflow:hidden; white-space:nowrap; min-width:0; /* <- was r.753 */ transition:opacity .12s}   /* v5.794: expliciet gelijk aan de stip — twee elementen, één beweging */   /* v5.791 (Timo 22-7: "de legendapunten gaan nu met een streep erdoor, dat is simpelweg niet hoe we het ontworpen hebben"). Klopt — ik had de doorstreping van Chart.js' canvas-default overgenomen in plaats van het app-ontwerp te volgen. Een uitgeklikte reeks DIMT (vandaar de naam legendDim): stip op 35%, tekst in --text-3 en op 55%. Geen streep. */
  @media (max-width:880px){ .htleg{gap:5px 9px} .htleg-i{font-size:9px; max-width:150px} .htleg-d{width:7px; height:7px} }
  /* v5.678 (Timo: "de volledige view kan beter binnen de ticker/koers-borders blijven en 2 regels innemen; alles dat
     het woord overlapt wordt onzichtbaar"). In een TABEL loopt de uitgeklapte naam naar rechts over de buren — daar is
     ruimte. In een TEGEL/KOERSKAART is die er niet: hij liep over de prijs én over de buurkaart. Daarom klapt hij hier
     naar BENEDEN open, binnen de kaart. `position:absolute` haalt de naam uit de flexrij zodat hij de volle breedte
     pakt zonder de rest te verschuiven; de -webkit-box-clamp kapt op 2 regels (gemeten: 275px naam tegen 178px
     beschikbaar = precies twee). De ouder (.tk-id/.mkt-c-id) is de positioneringsanker en houdt zijn eigen hoogte,
     dus de kaart verspringt niet. */
  .tk .tk-id, .mkt-card .mkt-c-id{position:relative}
  /* v5.817: de uitgeklapte naam ligt op z-index 6/7 en schoof daarmee ÓVER het kruisje ernaast heen — dat was de
     tweede helft van Timo's klacht ("het zit onder het soort logo"). De knoppen die bij een open naam horen gaan er
     nu bovenop, zodat ze zowel zichtbaar als klikbaar zijn zolang de naam openstaat. */
  /* v5.681 (Timo: "geen overlap = niet weghalen"): wat de twee regels ÉCHT raken valt weg, en niets anders. Welke
     elementen dat zijn bepaalt JS op geometrie (rechthoek-overlap), precies zoals de tabel-tak dat doet — v5.680
     verborg subregel en prijs botweg, ook als de tekst ze niet raakte. Hier volledig weg i.p.v. de gedeeltelijke
     prijs onder de letters leest slechter dan geen prijs. visibility houdt de layout intact. */
  #mcpop{min-width:100px}   /* v4.912: eigen (lagere) vloer i.p.v. de gedeelde 184px -- #mcpop past zich al aan het langste zichtbare label aan (shrink-to-fit), de 184px-vloer was hier puur overbodige lucht */
  .vpop .vp-name{font-size:10px; color:var(--text-3); padding:4px 9px 7px; margin-bottom:3px; border-bottom:1px solid var(--line); white-space:nowrap; overflow:hidden; max-width:240px}
  .vpop .vp-row{display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; background:none; border:none; cursor:pointer; padding:7px 9px; border-radius:4px; color:var(--text-2); font-size:12px; font-family:inherit; text-align:left; transition:background .12s}
  .vpop .vp-row:hover{background:var(--line)}
  .vpop .vp-lbl{white-space:nowrap; overflow:hidden; min-width:0}   /* v5.772 (A1): de tickerkiezer toont sinds deze versie de VOLLE fondsnaam (was coShort met "…"); overflow+min-width:0 maakt de flex-cel krimpbaar zodat _fadeSweep de zachte .nm-clip-fade kan zetten i.p.v. een harde afkap — zelfde recept als .vp-name */
  .vpop .vp-sw{flex:0 0 auto; width:30px; height:17px; border-radius:8px; background:var(--line-2); position:relative; transition:background .12s}
  .vpop .vp-sw::after{content:""; position:absolute; top:2px; left:2px; width:13px; height:13px; border-radius:50%; background:var(--text-3); transition:transform .12s, background .12s}
  .vpop .vp-row.on .vp-sw{background:rgba(87,195,221,0.45)}
  .vpop .vp-row.on .vp-sw::after{transform:translateX(13px); background:var(--accent)}
  .vpop .vp-row.on .vp-lbl{color:var(--text)}
  .vpop .vp-cap{font-size:9px;   color:var(--text-3); padding:7px 9px 3px}
  .vpop .vp-tx{display:flex; align-items:center; gap:9px; padding:5px 9px; font-size:12px; color:var(--text-2)}
  .vpop .vp-txd{flex:0 0 auto; width:7px; height:7px; border-radius:50%}
  .vpop .vp-txl{flex:1 1 auto; white-space:nowrap}
  .vpop .vp-txv{flex:0 0 auto; color:var(--text); font-variant-numeric:tabular-nums}
  .vpop .vp-row .vp-ar{flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:22px; height:18px; border-radius:4px; background:var(--line); color:var(--text-2); font-size:11px; transition:background .12s,color .12s}
  .vpop .vp-row.mc-act:hover .vp-ar{background:rgba(87,195,221,0.18); color:var(--accent)}
  .vpop.busy .vp-row{opacity:.5; pointer-events:none}
  .vpop .tkpop-search{display:block; width:100%; box-sizing:border-box; margin:2px 0 5px; padding:6px 9px; background:var(--line); border:1px solid var(--line-2); border-radius:4px; color:var(--text); font-size:12px; font-family:inherit}
  .vpop .tkpop-search::placeholder{color:var(--text-3); opacity:1}   /* v5.873 (Timo: "ik zie 4 verschillende knopkleur teksten, dat wil ik gewoon gelijk trekken"): dit veld had als enige nog de browser-default placeholder rgb(117,117,117) — exact de afwijking die v5.627 al voor .cl-addin/.cl-rn-in dichtzette, hier over het hoofd gezien. Zelfde recept, dus geen nieuw token. */
  .vpop .tkpop-search:focus{outline:none; border-color:rgba(87,195,221,0.45)}
  .vpop .tkpop-list{max-height:240px; overflow-y:auto}
  .vpop .tkpop-opt .tkpop-code{flex:0 0 auto; color:var(--text-3); font-size:11px; font-variant-numeric:tabular-nums}
  .vpop .tkpop-opt.on{background:rgba(87,195,221,0.10)}
  .vpop .clcat-nieuw .vp-lbl{color:var(--accent)}   /* v5.864 (Timo: "die moet dan ook blauwig zijn zodat het opvalt"): de vaste aanmaakregel bovenaan de categorie-picker. Kleur = var(--accent), het CHROME-token — niet --c1, want dat is de DATA-palet-blauw van de grafieken en die twee mogen nooit door elkaar (design-tokens-regel). GEEN nieuwe kleur — dezelfde blauw die de app al voor een actieve keuze gebruikt (.tkpop-opt.on hierboven). Alleen het label kleurt; vlak en rand blijven die van een gewone rij, zodat hij opvalt zonder een tweede knopvorm te introduceren. */
  .vpop .clcat-terug{margin:2px 0 5px}   /* v5.871 (Timo: "Ga terug moet qua lettertype, grootte en kleur matchen met de toevoegen knop, en de knop zelf ook — pijltje mag weg"): dus geen eigen balkvorm meer maar dezelfde .nw-b.cl-add-go als de Toevoegen-knop eronder; alleen de verticale marge van het zoekvak blijft (.tkpop-search r.777), zodat de kop op zijn plek staat. Het veld landt hoe dan ook goed: _clVeldOpKnopPlek() legt het ná _popPlaats op de schermplek van de aanmaakregel, ongeacht de hoogte hierboven. */
  .vpop .clcat-maak{margin:2px 0 3px}   /* v5.867: de toevoegknop is nu een .nw-b/.cl-add-go — zelfde knop als "Toevoegen" onder de categorieëntabel (r.642/515), dus geen eigen disabled-regel meer nodig */
  .bal-l{color:var(--text); font-weight:500; white-space:nowrap; overflow:hidden; max-width:200px}   /* v6.045 (Timo 25-7: "laten we die gewichten nog even gelijktrekken en meteen checken over alle vlakken"): naamkolom 400 -> 500. Gemeten over de hele app: posities, maandcijfers, netto-vermogen, box 3 én allocatie staan alle vijf op 500 (`.rbtable/.dtable td:first-child`, `.cl-tbl .cl-name`) — de balans was de enige op 400, en daar was de naam zelfs lichter dan het bedrag ernaast (`.bal-v` = 500). v5.777 (Timo 22-7: "doe dit maar ietsjes ja"): cap 220 -> 200px, zodat elk balkje 20px wint zonder dat de verhoudingen veranderen. Op een balanskolom van ~595px (MacBook Air, volledig scherm) gaat de baan daarmee van 273 naar 293px; bij een smalle kolom verandert er niets, want daar staat de balk al op zijn vloer van 64px en krijgt de naam de rest. */   /* v5.458: cap op de naamkolom — zo plet één extreem lange naam de balken niet; langer dan de cap → clip + zachte fade (_fadeSweep, .nm-clip) */
  /* v5.814 (Timo 22-7: "dus jij zegt dat deze staafjes mooi in het midden zitten tussen schuld en bedrag" — nee,
     en dat had ik niet gemeten). De middelste kolom was 112px VAST, dus alle overruimte belandde links bij het label:
     gemeten bij een kolom van 547px stond de staaf 149px van het label en 16px van het bedrag. Nu is de middenkolom
     1fr (alles wat overblijft) en staat de staaf daar met zijn vaste 112px in het MIDDEN. Bij elke kaartbreedte. */
  .bal-trk{display:block; height:5px; border-radius:4px; background:rgba(255,255,255,0.04); overflow:hidden; width:90px; max-width:100%; margin:0 auto}   /* v5.992 (Timo 24-7 avond: "de blauwe en rode staafjes moeten ALTIJD even breed zijn. Ik wil ze nog een tikje kleiner dan nu, zeg 10% minder breed. En dan moet in ruil de fade van de woorden wat later beginnen"): 100 -> 90px, en de 10px die de staaf inlevert gaat naar de NAAM via het middenkolom-minimum (r716/r728: 112 -> 102px) — dat minimum was de knop die zijn labels knelde, niet de fade-zone; gemeten op zijn eigen maat 1710 (dpr 2): de naamkolom valt daar op 97px terwijl "iShares MSCI World (Acc)"-achtige namen 150-190px willen, en de middenkolom stond exact op zijn 112px-minimum. "Altijd even breed" blijft per definitie waar: vaste breedte op .bal-trk, dus links (blauw) en rechts (rood) identiek, en 90 past altijd binnen het 102px-minimum (max-width:100% grijpt niet meer in) */   /* v5.971 (Timo 24-7 "balkjes nog een tikje smaller"): 6px -> 5px; fill volgt via height:100%. v5.974 (Timo 24-7 "staafjes mogen nog iets korter... altijd even lang... in het midden"): VASTE 160px i.p.v. width:100% van de restkolom — links (blauw) en rechts (rood) per definitie even lang, en margin:0 auto centreert de staaf in de middenkolom, die ná het langste label begint (grid max-content), dus de marges label->staaf en staaf->bedrag zijn gelijk; max-width:100% laat smalle kaarten krimpen */   /* v5.819: display:block erbij. .bal-trk is een SPAN (app.js bouwt hem zo), dus inline — en op een inline-element doet width:100% niets. Daardoor bleef de staaf zo breed als zijn inhoud i.p.v. de kolom te vullen: precies de "te kleine staafjes" die Timo bleef zien terwijl mijn meting 355px gaf. Die meting bouwde een DIV na, niet de span die de app gebruikt. */   /* v5.815 (Timo: "nu zitten de staafjes in het midden maar zijn ze weer veel te klein"): de staaf VULT de vrije middenkolom. Die kolom zit al symmetrisch tussen label en bedrag (16px gap aan weerszijden), dus vullen is tegelijk het midden EN de grootst mogelijke maat — een max-width maakte hem alleen maar korter zonder iets te winnen. */   /* width:100% + max-width i.p.v. een harde 112px: op een smal scherm krimpt de staaf mee i.p.v. de kolom uit te duwen */
  .bal-fill{display:block; height:100%; border-radius:4px}
  .bal-fill.pos{background:linear-gradient(90deg,#3d7ab0 0%,#3d7ab0 70%,#5b9bd5 100%)} .bal-fill.neg{background:linear-gradient(90deg,#a46c65 0%,#a46c65 70%,#d28a82 100%)}   /* v5.968 (Timo 24-7: "blauwe en rode staafjes iets te breed — de fade zou net wat later moeten beginnen"): de kleur-fade liep over de VOLLE staaflengte, waardoor het lichte uiteinde uitgesmeerd/dik oogt; nu 55% effen basiskleur en de fade alleen in de laatste 45%. Timo was weg bij de bouw — het omslagpunt (55%) is de enige knop als het nog subtieler moet. */
  .bal-flags{display:flex; gap:4px; align-items:center; justify-content:center; padding:0 8px; box-sizing:content-box}   /* v5.778 (Timo 22-7: "liquide en box 3 badges moeten ook wat beter in het midden blijven, duwt nu bijna de bedragen in"): 8px eigen lucht links en rechts van de chipgroep. De chips stonden met flex-shrink:0 strak in hun kolom en hielden alleen de 16px kolom-gap over tot het bedrag; nu is dat 24px aan beide kanten, en bij een bredere kolom blijft de groep netjes gecentreerd (justify-content). Raakt de balken-stand niet — die vult zijn kolom sowieso. */   /* v5.416 (Timo): óók de bezittingen-vlaggen gecentreerd in hun kolom — was flex-start terwijl de schuld-variant al centreerde (het beeld dat Timo juist mooi vond); de vaste twee sloten (visibility:hidden houdt de plek) blijven, dus de chip-kolommen blijven strak. v5.588-kandidaat (Timo 20-7): gap 5→4px — badge-kolom compacter zodat de naam meer ruimte krijgt in de flags-stand (zie .bal-tag2) */
  .bal-flags.bal-flags-c{justify-content:center}
  .bal-tag2{font-size:10px; font-weight:600; letter-spacing:0.06em; padding:1.5px 5px; border-radius:4px; white-space:nowrap; line-height:1.3; box-sizing:border-box; text-align:center; flex-shrink:0}   /* v5.422 (Timo): chip-voetafdruk 19,5→16px (lh 1.55→1.3 + pad 2→1,5) — de badge duwde de balansrij van 30 naar 31,5px; nu past hij onder de 18px-naamregel en blijft de rijafstand overal gelijk */   /* v5.416: flex-shrink:0 — in een krappe rij kneep flex de chip tot zijn min-width en stond "Liquide" bijna tegen de randen; de chip claimt nu altijd tekst + lucht */   /* v5.588-kandidaat (Timo 20-7): horizontale padding 7→5px — badge-kolom compacter (flags-stand). Vloer kolom 2 = "Box 3" 41px (min-width) + gap 4 + "Liquide" 49,6px = ~94,6px, was ~103px → naam krijgt ~8,4px meer vóór de _fadeSweep-clip. LET OP: dit dicht de "Vordering holding"-fade (101px) alleen bij viewport ≥~1710px (16"-MBP 1728px = net); smaller scherm vergt een structurele keuze — zie rapport (kortere labels of inline-badges) */
  .bal-tag2.b3{color:var(--up); background:var(--up-soft); min-width:41px}
  .bal-tag2.liq{color:var(--accent); background:rgba(87,195,221,0.13); min-width:49px}   /* v5.365 (K3): token wint meetbaar (7,0 vs 6,0:1) */
  .bt2-kort{display:none}   /* v5.597 (Timo 20-7, punt 12-vervolg): chips dragen een vol/kort-labelpaar (app.js _balTagTxt); ruim scherm = "Box 3"/"Liquide" */
  @media (max-width:1699px){
    .bt2-vol{display:none}
    .bt2-kort{display:inline}
    .bal-tag2.b3{min-width:24px}
    .bal-tag2.liq{min-width:28px}   /* v5.604 (Timo: "waarom zijn dit ineens geen box 3/liquide labels??"): grens 1739->1699 — Timo's fullscreen (1710px) toont weer de VOLLE labels; de v5.596-chip-compaction geeft daar al ~104px naamruimte vs "Vordering holding" 101px (krap maar past; de _fadeSweep blijft de noodrem). De compacte vorm "B3"/"Liq" is nu puur de bescherming voor échte smalle vensters (<1700px, dekt tot ~1470px) */
  }
  .bal-tag2.mix{color:var(--text-2); background:rgba(148,162,179,0.14)}
  .bal-v{color:var(--text); font-weight:500; white-space:nowrap; font-variant-numeric:tabular-nums; min-width:0; text-align:right}   /* v5.829: min-width 70 -> 0. Die 70px hield de bedragkolom breder dan het breedste bedrag (±51px), en omdat bedragen rechts uitgelijnd staan belandde die 19px slack precies tussen de staaf en het getal — gemeten 35px waar het 16px hoort te zijn. Nu volgt de kolom het breedste bedrag van die helft; smallere bedragen houden links wat lucht, en dát is met rechts uitgelijnde getallen niet weg te nemen zonder de cijferuitlijning op te geven. */
  .bal-r.bal-grp{cursor:pointer}
  .bal-r.bal-grp .bal-l{color:var(--text)}   /* v6.045: de expliciete font-weight:400 hier is weg — die hield de groepsnaam op body-gewicht en werkte de gelijktrekking tegen; nu erft hij de 500 van `.bal-l`, gelijk aan elke andere tabel-naamkolom in de app. */
  .bal-caret{display:inline-block; width:11px; font-size:9px; color:var(--text-3); margin-left:4px}   /* v5.398 (Timo): chevron ACHTER de groepsnaam (was ervoor) — alle namen beginnen nu op dezelfde x; klikdoel ongewijzigd (e47) */
  .bal-r.bal-subrow{font-size:11px}
  .bal-r.bal-subrow .bal-l{padding-left:0; color:var(--text-2)}   /* v6.044 — EINDVORM: ledennaam houdt --text-2, gelijk aan de allocatie (de v6.043-terugdraai staat daar toegelicht). Inspring blijft 0. Was v6.042 (Timo 25-7: "die mogen gewoon op zelfde uitlijning, anders is er minder zichtbaar dan zou kunnen"): inspring 15px -> 0, dus de ledennaam begint op dezelfde x als de groepsnaam (gemeten op zijn stand: x 74 -> 59) en de tekstruimte gaat van 95 -> 110px binnen de cap van 200px. Het onderscheid groep/lid blijft: de tint (--text-2 vs --text) plus de caret, die alleen een groep heeft. */
  .bal-r.bal-subrow .bal-v{color:var(--text-3); font-weight:400}
  .bal-r.bal-subrow .bal-v.neg{color:color-mix(in srgb,var(--down) 55%,var(--text-3))}   /* zelfde gedempte rood als W/V-groep-deelnemers in allocatie (.rb-subrow td.wv-col.down) */   /* v4.685: negatief lid blijft roodachtig, ondanks de gedempte subrow-kleur */
  .bal-v.neg{color:var(--down)}
  .dtable{width:100%; border-collapse:collapse; font-size:12px; table-layout:fixed}
  .dtable th:first-child{text-align:left; width:190px}
  .dtable td .mc-tk-sub{display:block; font-size:10px; font-weight:400; color:var(--text-3); font-variant-numeric:tabular-nums; line-height:1.3; margin-top:1px}   /* v5.794 (Timo 22-7): de ticker als kleine grijze subregel onder de naam, in de ruimte die de rij toch al had. Vervangt de eigen kolom van v5.786 (die kostte 74px breedte). Zelfde idioom als de koerskaart, waar de ticker ook klein onder de naam staat. */
  .dtable td{text-align:right; padding:7px 12px; color:var(--text-2); border-bottom:1px solid rgba(255,255,255,0.04); font-variant-numeric:tabular-nums}
  .dtable td:first-child{text-align:left; color:var(--text); font-weight:500}
  .dtable tbody td:first-child{position:relative; padding-left:21px}
  .dtable tbody td:first-child::before{content:""; position:absolute; left:7px; top:50%; transform:translateY(-50%); width:7px; height:7px; border-radius:2px; background:var(--cdot,var(--accent)); opacity:0.85}
  .dtable td.neg{color:var(--down)}
  .dtable td.pos{color:var(--up)}
  .dtable td.zero{color:var(--text-3)}
  .dtable tbody tr:last-child td{border-bottom:none}
  .dtable tbody tr:hover td{border-bottom-color:transparent; background:rgba(255,255,255,0.04)}   /* v5.525 (Timo, tabel-consistentie 19-7): rij-hover-vulling gelijk aan .rbtable/.cl-tbl/.nvmtable — dtable had alléén hoek-afronding zónder vulling (op desktop dus onzichtbaar); nu overal dezelfde hover */
  .dtable tbody tr:has(+ tr:hover) td{border-bottom-color:transparent}
  .dtable .tot-c{color:var(--text); font-weight:600}
  .dtable th.tot-c{color:var(--accent); border-left:1px solid var(--line-2); border-right:1px solid var(--line-2)}
  .dtable tbody td.tot-c{border-left:1px solid var(--line-2); border-right:1px solid var(--line-2)}
  .dtable tfoot td{border-top:1px solid var(--line-2); border-bottom:none; padding-top:9px; color:var(--text); font-weight:600}
  .dtable tfoot td.tot-name{text-align:left; color:var(--text-3); font-weight:400; white-space:nowrap}   /* v5.213 (Timo): naam vóór de totalenrij = stille grijze toelichting (--text-3, normaal gewicht), niet wit/bold. v6.100 (Timo 26-7, "totale inkomsten hoort op 1 regel"): nowrap — het langste label past op de punt af (gemeten: 190px kolom, 190px tekst, nul marge), dus elke krimp van de naamkolom brak het over twee regels */
  #tblResultA td.tot-c, #tblResultA tfoot td.tnum, #tblResultB td.tot-c, #tblResultB tfoot td.tnum, .mc-abtotaal td.tot-c, .mc-abtotaal tfoot td.tnum{color:var(--up)}
  #tblResultA td.tot-c.neg, #tblResultA tfoot td.neg, #tblResultB td.tot-c.neg, #tblResultB tfoot td.neg, .mc-abtotaal td.tot-c.neg, .mc-abtotaal tfoot td.neg{color:var(--down)}
  .mc-abtotaal{margin-top:2px}
  .mc-abtotaal .dtable tfoot td{padding-top:7px}
  #tblUitgaven td.tot-c, #tblUitgaven tfoot td.tnum{color:var(--down)}
  #tblUitgaven td.tot-c.pos, #tblUitgaven tfoot td.pos{color:var(--up)}   /* v4.913: ontbrekende tegenhanger van #tblResult's .neg-override -- een positief Uitgaven-totaal (bv. netto terugbetaald) was altijd rood */
  /* Uitgaven heeft nu een eigen kop (was display:none) zodat elke maandcijfer-tabel een eigen kop heeft */
  #tblAsset tfoot td.tot-c{color:var(--up)}
  .dtable td.mc[data-v]{cursor:pointer}
  .dtable td.mc.off{opacity:0.4}
  .dtable tbody tr:hover td.mc.off{background:rgba(255,255,255,0.1)}   /* v5.647 (Timo: "de lijn is nog zichtbaar" + "de hoogte van de hover-markering is links van die lijn anders dan rechts"): opacity dimt het HELE element, dus ook de hover-gloed — een gedofte kolom (bv. de automatisch gedimde lopende maand) toonde effectief 0,04 × 0,4 = 0,016 terwijl de buren op 0,04 staan. Op die kolomgrens viel de band dus abrupt terug: leest als een verticale lijn én als een ongelijke band. 0,10 × 0,4 = exact 0,04, dus de hoverband loopt weer als één gelijke laag door — de dof-dimming van de TEKST blijft ongemoeid. */
  .dtable th.mh, .dtable th.toth{cursor:pointer; transition:opacity .12s, color .12s}
  .dtable th{font-size:10px;   color:var(--text-3); font-weight:500; text-align:right; padding:7px 12px; border-bottom:1px solid var(--line-2); /* <- was r.829 */ white-space:nowrap}
  #tblUnits tbody td.tot-c{color:var(--text-2); font-weight:400}   /* Begin-kolom grijs zoals de maandwaarden */
  #tblUnits tbody td.rh, #tblUnits tbody td.tot-c{vertical-align:top}   /* rijnaam + Begin uitlijnen met de maandwaarde (boven) */
  #tblUnits tbody td.rh::before{top:15px}
  #tblUnits td.mbuy{color:var(--up)}
  #tblUnits td.msell{color:var(--down)}
  #tblUnits td.mc{vertical-align:top}
  #tblUnits td .uct{display:block}
  #tblUnits td .umut{display:block; margin-top:3px; min-height:1em}
  #tblUnits td .umut.mbuy{color:var(--up)}
  #tblUnits td .umut.msell{color:var(--down)}
  #txTip{pointer-events:none;z-index:9999}
  #tblUnits td.mc[data-asset]{cursor:pointer}
  .nvmtable tr.nvm-hdr th.mh{cursor:default}  .nvmtable tr.nvm-hdr th.mh:hover{color:inherit}/* A11-6: geen dim-klik bedraad in de posities-tabel */
  .dtable th.mh.coff{opacity:0.4}
  /* v6.128 (Timo 26-7: "een doffe kolommaandtitel flikkert als ik posities wisselen aan zet"). GEMETEN op zijn eigen
     tab: vóór de klik draagt de Jul-kop .coff met opacity 0,4; _dtZet herbouwt de tabel (de grips moeten erbij) en de
     verse kop komt ZONDER .coff binnen, dus op opacity 1; 13,7 ms later zet applyMcOff de klasse terug — en dan staat
     de computed opacity nog stééds op 1, want de transitie hierboven (opacity .12s) animeert 'm terug naar 0,4. De
     kop springt dus vol aan en dooft weg: dat is precies wat hij ziet. Dezelfde klasse als de refresh-flikker die
     v5.990 dichtte door NIET te herbouwen; hier moet er wél herbouwd worden, dus zetten we de animatie één moment
     stil. `dt-vers` staat op de tabel-wrapper vanaf de herbouw tot ná applyMcOff. */
  .dt-vers, .dt-vers *{transition:none !important}
  .dtable th.mh.mh-fut .mh-l{opacity:0.42}
  .dtable th.mh .mh-l{cursor:pointer; vertical-align:middle}   /* v5.428 (Timo): maandkoppen zijn sentence case ("Jan") — de v5.421-9px-CAPS-compensatie verviel, alles weer de 10px-kopmaat zoals Begin/Totaal */
  .dtable .toth-l,.cl-tbl .cl-hl{vertical-align:middle}
  .dtable th.mh .mh-f,.dtable th.toth .mh-f,.kmon-tbl th .mh-f{display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; margin-right:5px; padding:0; width:15px; height:15px; border:0; border-radius:4px; background:transparent; color:var(--text-3); opacity:.5; cursor:pointer; transition:opacity .12s,color .12s,background .12s}
  .dtable th.mh .mh-f:hover,.dtable th.toth .mh-f:hover,.kmon-tbl th .mh-f:hover{opacity:1; color:var(--accent); background:var(--accent-soft)}
  .dtable th.mh.fsort .mh-f,.dtable th.toth.fsort .mh-f,.kmon-tbl th.fsort .mh-f{opacity:1; color:var(--accent)}
  .dtable .mh-f .fnl,.kmon-tbl .mh-f .fnl{display:block; pointer-events:none}
  .kmon-tbl th .mh-l-btn{font:inherit; color:inherit; letter-spacing:inherit; text-transform:inherit; background:none; border:0; padding:0; margin:0; cursor:pointer; vertical-align:middle; transition:color .12s}   /* v5.544 (Timo): klikbare Koers-titel (valuta) — oogt als het gewone .mh-l-label, accent-hover verraadt dat 'ie klikbaar is (los van het sorteer-icoontje) */
  .kmon-tbl th .mh-l-btn:hover{color:var(--accent)}
  .dtable tfoot td.mc-sum.off{opacity:0.4}
  .dtable td.rh{user-select:none; -webkit-user-select:none; touch-action:none; white-space:nowrap; overflow:hidden; /* <- was r.327 */ cursor:pointer; transition:opacity .12s}
  .dtable tr.roff td.rh, .dtable tr.roff td.tot-c{opacity:0.4}
  .dtable tbody tr.mc-zrow:hover td{background:rgba(255,255,255,0.095)}   /* v5.648 (Timo): opacity dimt ook de hovergloed — 0,095 x 0,42 = 0,04, gelijk aan een gewone rij. Zie de regel bij .dtable td.mc.off (v5.647). */
  .dtable tbody tr.roff:hover td.rh, .dtable tbody tr.roff:hover td.tot-c{background:rgba(255,255,255,0.1)}   /* v5.648 (Timo): een UITGESLOTEN rij dimt alleen de naam- en totaalcel, dus daar viel de hoverband binnen dezelfde rij terug van 0,04 naar 0,016 — precies dezelfde zichtbare grens als bij een gedofte kolom. 0,10 x 0,4 = 0,04. */
  .rb-dot{display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:9px; vertical-align:middle; transform:translateY(-1px)}
  /* v5.754: meetbaar naam-element in de allocatietabel, exact het .cl-nm-f-recept van v5.633 — draagt de VOLLE naam;
     _fitNameNow kort af en zet .nm-clip (zachte fade) als het dán nog niet past, met de hover-uitklap van v5.635.
     GEEN display:flex op de cel: dat haalt een <td> uit het tabelmodel en liet de 19%-kolom instorten van 114 naar
     22px (gemeten 21-7). Daarom inline-block met een max-width die precies de vaste voorloop-elementen aftrekt:
     kleurstip 8px + 9px marge = 17px, en bij een groepsregel komt de caret daar nog bij. */
  .rb-nm-f{display:inline-block; max-width:calc(100% - 17px); overflow:hidden; white-space:nowrap; vertical-align:bottom}
  .rb-name.rb-sub .rb-nm-f{max-width:100%}
  .rb-name.rb-grp .rb-nm-f{max-width:calc(100% - 31px)}
  .rbtable .rb-pc{color:var(--text-3)}
  .oedit{line-height:1; width:calc(2ch + 20px); height:22px; box-sizing:border-box; vertical-align:middle; text-align:right; font:inherit; font-variant-numeric:tabular-nums; color:var(--accent); background:rgba(255,255,255,0.04); border:1px solid var(--line-2); border-radius:4px; padding:2px 5px; margin-right:2px; outline:none}
  .oedit-ro{display:inline-block; width:calc(2ch + 20px); height:22px; box-sizing:border-box; vertical-align:middle; text-align:right; font-variant-numeric:tabular-nums; line-height:16px; border:1px solid transparent; padding:2px 5px; margin-right:2px; color:var(--text-3)}/* v4.946: read-only groep-% -- zelfde box als .oedit (rechts, padding/rand/marge) maar transparant, zodat het cijfer + % netjes uitlijnt met de bewerkbare invoervakjes eronder; v5.512 (Timo): basis = 2 cijfers (calc(2ch + 20px): tabular-cijfers + padding 5+13 + 2px rand, was vaste 46px) — ≥3 tekens (bv. "100") krijgt een inline meegroei-width van _oeditW/_oeditFit in app.js */
  .oedit-box{position:relative; display:inline-block; vertical-align:middle; margin-right:2px}/* v4.947: %-teken BINNEN het invoervak (zoals de €/%-tekens in Instellingen via .be-inbox) */
  .oedit-box .oedit,.oedit-box .oedit-ro{margin-right:0; padding-right:13px}
  .oedit-box .oedit-pct{position:absolute; right:3px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--text-3); font-size:11px}/* v4.950: right 5->3 zodat de % niet meer op het cijfer plakt (was -1,7px overlap) -- gap nu ~0, net als de huidig-%-kolom */
  .oedit:focus{border-color:var(--accent); background:rgba(255,255,255,0.06)}
  .oedit:disabled{opacity:0.5; cursor:wait}
  .rbtable tr.rb-off{opacity:0.4}
  .rbtable tbody tr.rb-off:hover td{background:rgba(255,255,255,0.1)}   /* v5.648 (Timo): 0,10 x 0,4 = 0,04, gelijk aan een gewone rij. */
  .rbtable .rb-grp{cursor:pointer; font-weight:600}
  .rb-caret{display:inline-block; width:11px; font-size:9px; color:var(--text-3); margin-left:4px; vertical-align:middle}   /* v5.427: caret achter de naam (balans-conventie v5.398) — marge-kant mee gedraaid, maten identiek aan .bal-caret */
  .rbtable tr.rb-subrow{font-size:11px}
  .rbtable tr.rb-subrow td{color:var(--text-3); padding-top:2px; padding-bottom:2px}
  .rbtable tr.rb-subrow td.rb-sub{color:var(--text-2)}   /* v6.044 — EINDVORM, Timo heeft beide vormen live vergeleken: v6.043 zette de ledennaam op de gewone tint --text, maar toen was "lastig te zien wie uit de groep komen" ("doe dat toch maar terug"). Dus terug naar --text-2: mét de inspring op 0 is de TINT de enige groepsmarkering die overblijft, en die is dus nodig. Niet heropenen zonder nieuwe aanleiding. Oorspronkelijk v6.042 (Timo 25-7: "wit, grijs en donkergrijs" — welke blijft?): een groepslid MET doel-% krijgt de naam op --text-2, gelijk aan het balans-equivalent (.bal-subrow .bal-l); de bedragen blijven --text-3, ook net als in de balans. Stond hier al zo bedoeld als `.rbtable .rb-sub{padding-left:30px; color:var(--text-2)}` maar dat was inert: `.rbtable td:first-child` (r621, v5.993) wint op padding-left en `.rbtable tr.rb-subrow td` (r914) op color. Vandaar nu tr+td in de selector. De 30px inspring is bewust NIET teruggebracht — hij was er de facto niet en de naamkolom is 200px, dus elke px inspring kost leesruimte (langste naam vraagt er 211). */
  .rbtable tr.rb-subrow td.wv-col.up{color:color-mix(in srgb,var(--up) 55%,var(--text-3))}
  .rbtable tr.rb-subrow td.wv-col.down{color:color-mix(in srgb,var(--down) 55%,var(--text-3))}
  .rbtable tr[data-oc]{cursor:pointer}
  .rbtable tr[data-oc] .oedit{cursor:text}
  .rbtable tbody tr{height:36px}
  .rbtable tbody td{box-sizing:border-box; height:36px; line-height:36px; overflow:hidden; padding-top:0; padding-bottom:0; vertical-align:middle}

  @media (max-width:1280px){ .grid-13{grid-template-columns:1fr} .kpis{height:auto; grid-template-columns:repeat(4,1fr); grid-auto-rows:90px} .ov-col>.tickers{height:auto; grid-template-columns:repeat(4,1fr); grid-auto-rows:90px; flex:none} .cf-card .bar-wrap{height:330px; flex:none} }   /* v5.129: tickers is nu kind van .ov-col (was .grid-13>.tickers) */
  @media (max-width:880px){ .app{padding:75px 18px 48px; gap:24px}   /* v5.103: padding-top = 18 + 57px fixed topbar (anders bedekt de topbar de bovenste content) */ .kpis{grid-template-columns:repeat(2,minmax(0,1fr))} .donut-pair,.bal-grid{grid-template-columns:minmax(0,1fr)} .hero-v{font-size:38px} .nw-wrap{height:240px} }   /* v5.584 (G-6): mobiele varianten óók minmax(0,…) — kale 1fr liet ook hier een extreem bedrag de kolom oprekken */   /* v5.697: .bal-sum HIER WEG — die krijgt hieronder 2 kolommen i.p.v. 1 (Timo 21-7) */
  /* ===== v6.231 (blok 1.2, Timo 28-7): DE DRIE BALANSGROEPEN OP DEZELFDE AFSTAND ============================
     Zijn melding: "de ruimte tussen bezit en liquide middelen is kleiner dan de ruimte tussen liquide middelen
     en schulden". GEMETEN op 390px, en hij heeft precies gelijk:
         "Liquide middelen"  .bal-subh    gat 22px   (margin-top:22px op de subkop zelf)
         "Schulden"          .bal-col-h   gat 40px   (de gap van .bal-grid, hierboven)
     WAAROM. De balans is op desktop een TWEEkolommen-indeling: links Bezittingen (met "Liquide middelen" als
     SUBkop erin), rechts Schulden. Die twee kolommen staan 40px uit elkaar. Vanaf deze breedte stapelen ze, en
     dan wordt die 40px kolomafstand plots verticale ruimte — naast een subkop die 22px krijgt. Op desktop viel
     het nooit op omdat de afstand daar horizontaal is.
     DE KEUZE: beide op 28px, niet beide op 40. Naast elkaar gezet in een echte browser oogt 40px als een gat
     waar je doorheen scrollt; de drie koppen dragen al een eigen scheidingslijn, dus dat gat hoeft het werk niet
     te doen. 28px houdt de groepen herkenbaar gescheiden en scheelt 24px hoogte over de hele balans.
     WAAROM row-gap EN NIET gap: op halfscherm (het blok onderaan) staat .bal-grid weer op TWEE kolommen, en dan
     is `gap` de horizontale kolomafstand — die moet 40 blijven. row-gap raakt alleen de gestapelde stand. */
  @media (max-width:880px){ .bal-grid{row-gap:28px} .bal-subh{margin-top:28px} }
  /* ===== v6.243 (Timo 28-7): DE BLAUWE EN RODE STAVEN OP ÉÉN LIJN IN DE GESTAPELDE STAND ==================
     Zijn melding: "in de mobiele versie zijn de rode en blauwe staafjes niet uitgelijnd. Dit is in de
     desktopversie ook niet nodig, maar bij de mobiele versie wel omdat schulden en bezit hier onder elkaar
     staan". GEMETEN op 390px met zijn eigen administratie: staaf links op 158,3px, staaf rechts op 169,3px,
     allebei 90px breed. De 11px zit in de NAAMkolom: elke .bal-col is een eigen rooster met max-content
     buitenkolommen, en "Omzetbelasting" is nu eenmaal breder dan "Metaplanet" (90,03 tegen 78,51). Narekenen
     op de sporen: 41 + 78,51 + 16 + 22,76 = 158,27 links, 41 + 90,03 + 16 + 22,25 = 169,28 rechts.
     DE FIX: in de gestapelde stand dragen de twee helften ÉÉN stel kolomsporen. .bal-grid krijgt de drie
     sporen en elke .bal-col wordt subgrid, zodat de naamkolom de breedste naam van de HELE balans volgt en
     de staaf in beide helften op dezelfde x begint. De rijen zelf waren al subgrid (r919), dus dit is
     dezelfde techniek een niveau hoger, geen nieuw recept.
     WAAROM 760 EN NIET 880: tussen 761 en 880 zet het halfscherm-blok de balans weer op twee kolommen naast
     elkaar, en dan is er niets om uit te lijnen.
     WAAROM DE FLAGSVIEW APART GENOEMD WORDT: .bal-grid.bal-flagsview .bal-col (r917) is specifieker dan een
     kale .bal-col en zou dit blok anders overrulen; zonder die tweede selector staan de Box 3- en
     Liquide-chips weer 11,5px uiteen.
     LET OP BIJ HERMETEN: die 11px is geen vaste maat. Hij is het verschil tussen de langste naam links en
     rechts en beweegt dus mee met de administratie. Stuur op "alle staven op dezelfde x", niet op het getal.
     BEKEND NADEEL, klein: op 320px knipt één naam extra af ("IB & Zvw"), want daar staat de naamkolom al op
     zijn minimum omdat de staaf zijn 102px-vloer opeist. Vanaf 375px geen verschil.
     HERKOMST: voorwerk van de Assistent-chat (punt A-01), plan byte-exact in archief/PLAN_STAAFUITLIJNING_
     MOBIEL.md. Zijn meting is hier nagerekend en reproduceerde exact (24 staven, x 158,3 en 169,3).
     TERUGWEG: dit blok weghalen. Geen JS, geen HTML, geen opslag, geen bestaande selector aangepast. */
  @media (max-width:760px){
    .bal-grid{grid-template-columns:minmax(0, max-content) minmax(102px, 1fr) max-content; column-gap:16px}
    .bal-grid .bal-col, .bal-grid.bal-flagsview .bal-col{grid-template-columns:subgrid; grid-column:1 / -1}
  }
  /* v5.697 (Timo 21-7, "kpi's 2 breed in mobiele view"): de .bal-sum-familie (Portfoliowaarde, Waarde per asset,
     Kasstroom) stond op 1 kolom. Twee kolommen alleen kan niet: de tegel is horizontaal (icoon NAAST de tekst) en
     hield dan 139,5 − 2×18 padding − 38 icoon − 14 gap = 51,5px over voor label + bedrag, terwijl een miljoenbedrag
     116px wil op de normale 20px en 64px zelfs op de 11px-ondergrens van _fitKpiVals — het bedrag werd dus sowieso
     afgekapt door de overflow:hidden op .bal-sv. Daarom schuift de tegel mee compacter (Timo's keuze uit drie
     varianten: vorm hetzelfde houden, alles krapper): padding 18→12, icoon 38→26, gap 14→8 geeft 139,5 − 24 − 26 − 8
     = 81,5px, waarin _fitKpiVals een miljoenbedrag op ~13px kwijt kan. Op een tablet (760–880px) is de tegel ~430px
     en verandert er visueel niets aan de leesbaarheid. */
  @media (max-width:880px){
    .bal-sum{grid-template-columns:repeat(2,minmax(0,1fr))}
    .bal-si{padding:12px; gap:8px}
    .bal-ic{width:26px; height:26px}
    .bal-ic svg{width:13px; height:13px}   /* het icoon-vierkant krimpt 38→26, de svg erbinnen moet mee. 13 = exact de basisverhouding (19px in 38px = de helft), niet op het oog gekozen */
  }
.bar-wrap,.bar-wrap canvas{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:pan-y;}
.cf-bartip{position:fixed;z-index:240;pointer-events:none;/* v5.144: 100->240 — de tooltip hangt aan body en moet BOVEN de fixed view-lagen (markets/instellingen/calc, z-200) liggen, onder zijbalk 250/topbar 255/popups 350; op z-100 was de koers-tooltip gevuld+opacity 1 maar volledig afgedekt door de Koersenpagina (Timo's "wel bolletje, geen popup") */opacity:0;background:var(--surface-2);border:1px solid var(--line-2);border-radius:8px;padding:8px 10px;font-size:12px;color:var(--text);transform:translate(-50%,calc(-100% - 10px));transition:opacity .1s;white-space:nowrap;box-shadow:0 14px 36px rgba(0,0,0,0.55)}
.cf-bartip .cbt-t{color:var(--text-2);font-size:11px;margin-bottom:5px}
.cf-bartip .cbt-r{display:flex;align-items:center;gap:7px;line-height:1.55}
.cf-bartip .cbt-d{width:8px;height:8px;border-radius:2px;flex:none}
.cf-bartip .cbt-v{margin-left:auto;padding-left:14px;font-variant-numeric:tabular-nums}
.cf-bartip .cbt-v.neg{color:var(--down)}.cbt-v.pos{color:var(--up)}
@media (max-width:760px){
  /* v5.730 (Timo: "zijn alle gebruikte symbolen goed te zien op mobiel ook?"): NEE — gemeten op 375px was de
     Update-cel 70px breed terwijl inspringing (48) + tijdvak (42) + icoonvak (14) samen 104px vragen. Het zonnetje/
     maantje viel daardoor 20px búíten de cel en dus buiten de scroll-wrapper: op een telefoon zag je alleen de timer.
     De 48px-inspringing bestaat om de tijd onder het kolomLABEL te laten beginnen (v5.710) — dat is een desktop-detail
     dat op een smal scherm niet opweegt tegen een onzichtbaar symbool. Smal scherm: inspringing terug naar 10px, wat
     10+42+14 = 66px vraagt en dus past. Tijdvak en icoonvak houden hun maat, zodat de uitlijning uit v5.729 intact
     blijft: de timer schuift niet als het symbool verschijnt. */
  .kmon-view .kmon-tbl td.kmon-upd{padding-left:10px}
  .kmon-view .kmon-tbl th:last-child{padding-left:10px}
  /* v6.117 (plan-punt 5) — DEZELFDE INGREEP ALS HIERBOVEN, NU VOOR DE BEURS-KOLOM. Gemeten op 375px: van de 178
     Beurs-cellen kapten er 12 hard af (81px nodig, 64px beschikbaar = 17px tekort) en de smoke meldde dat elke run
     als `[fade:kmon] tekst kapt af ZONDER fade op: td.kmon-exch`. Die 12 zijn ALLEMAAL valutaparen (🇺🇸/🇪🇺,
     🇺🇸/🇯🇵, …) — géén aandelen met twee beursnoteringen. Daarom niet één vlag tonen: bij een paar zegt de
     tweede vlag wélke tegenvaluta het is, dus 🇺🇸/🇯🇵 en 🇺🇸/🇪🇺 zouden allebei op "🇺🇸" uitkomen en
     onderling onleesbaar worden. De ruimte zat in de INSPRINGING: 32px van de 64px kolombreedte ging op aan
     padding-left (v5.884, uitlijnen onder het kolomwoord i.p.v. het filtericoon) — een desktop-detail, precies de
     afweging die v5.730 hierboven al voor de Update-kolom maakte. Terug naar 10px + de letter-lucht eruit (die
     bestond alleen om meerdere vlaggen te scheiden). Gemeten ná: 55px inhoud in 64px, alle 178 cellen 0px tekort. */
  .kmon-view .kmon-tbl td.kmon-exch{padding-left:10px; letter-spacing:0}
  /* v6.191 (Timo 27-7): koersmonitor, aflosschema's, het overzicht en de twee calculators zijn DESKTOP-ONLY. Zijn woorden: "Ik denk dat
     koersmonitor wel uit de mobiele versie kan. Dat vind ik iets voor desktop only, eens?" — en even later dezelfde
     keuze voor de andere twee. Alle drie zijn brede tabellen of een vol-scherm grafiek die je op 375px alleen via
     horizontaal vegen leest, en dat is geen telefoonwerk. De calculators kwamen er op zijn verzoek bij ("voor nu"),
     want die draaien in een iframe met 38 invoervelden en dat is op een telefoon een ander ontwerp, geen verkleining.
     De knoppen gaan hier weg; de poort in _navTo zorgt dat je er ook niet via een onthouden view alsnog belandt. */
  .side-nav-btn[data-view="kmon"], .side-nav-btn[data-view="aflos"], .side-nav-btn[data-view="overzicht"],
  .side-nav-btn[data-view="calc-ib"], .side-nav-btn[data-view="calc-toeslagen"]{display:none}
  /* v6.192 (Timo 27-7): "Ik denk dat de kopjes er ook uit kunnen in het keuzemenu van de app. We hebben enkel
     dashboard, koersen, instellingen dan." Klopt: de drie subkoppen (Vermogen / Markt / Calculator) uit v5.574
     bestonden om vier groepen van elk twee tot drie knoppen uit elkaar te houden. Op de telefoon blijven er na
     v6.191 nog drie losse knoppen over, en dan labelt een kop een groep van één — dat is meer ruis dan structuur.
     De "Calculator"-kop zou er zelfs boven een lege groep staan. Ook de extra pauze boven Instellingen kan weg:
     die markeerde dat het losstond van de drie gelabelde groepen, en die groepen zijn er hier niet meer. */
  .side-sub{display:none}
  /* v6.195: `.side-apart{margin-top:0}` stond hier en was dood — r1256 zet app-breed 14px en staat later, dus bij
     gelijke specificiteit won die. Gemeten: op 375px is de marge 14px, ook vóór deze opruiming. */
  #tickers{grid-template-columns:repeat(2,1fr)}
  /* v6.185 (Timo 27-7) — DE TICKERVOLGORDE OP DE TELEFOON VOLGT DE KOLOMMEN VAN DE APP. Zijn indeling, letterlijk:
     "eerste kolom tickers in de app wordt de eerste 4 van rij 1 in mobiele versie. Tweede kolom tickers in de app
     wordt de onderste 2 van rij 1 in de mobiele versie en dan door met de eerste 2 in de tweede kolom van de mobiele
     versie. En de derde kolom in de tickers in de app zijn dan de laatste 4 in de mobiele versie van de tweede kolom."
     GEMETEN: op zijn 1710px-scherm is het vlak 3 kolommen x 4 rijen, op 390px 2 kolommen x 6 rijen — beide 12 tegels.
     Zonder placement vult de telefoon row-major en valt een rij van drie uit elkaar; precies de kwaal die de
     koerskaarten hadden (v6.178-permutatie verderop).
       app-kolom 1 (tiles 0,3,6,9)  -> links 1 t/m 4
       app-kolom 2 (tiles 1,4,7,10) -> links 5 en 6, daarna rechts 1 en 2
       app-kolom 3 (tiles 2,5,8,11) -> rechts 3 t/m 6
     PUUR VISUEEL, net als bij de koersen: DOM-volgorde en tegel-id's blijven op tile-index, dus de sleepmotor
     (positioneel via getBoundingClientRect) leest deze posities vanzelf en muteert state.tiles correct. Geen JS. */
  #tickers > :nth-child(1){grid-area:1/1}  #tickers > :nth-child(4){grid-area:2/1}  #tickers > :nth-child(7){grid-area:3/1}
  #tickers > :nth-child(10){grid-area:4/1} #tickers > :nth-child(2){grid-area:5/1}  #tickers > :nth-child(5){grid-area:6/1}
  #tickers > :nth-child(8){grid-area:1/2}  #tickers > :nth-child(11){grid-area:2/2} #tickers > :nth-child(3){grid-area:3/2}
  #tickers > :nth-child(6){grid-area:4/2}  #tickers > :nth-child(9){grid-area:5/2}  #tickers > :nth-child(12){grid-area:6/2}
  .tbl-x .dtable{table-layout:auto;width:max-content;min-width:100%}
  .tbl-x .dtable th,.tbl-x .dtable td{white-space:nowrap}
  #rebal .rbtable{min-width:600px}
  /* v6.175 (Timo 27-7) — OP DE TELEFOON STAAT DE KLANTNAAM NAAST HET LOGO, NIET DE PAGINATITEL. Zijn ontwerp:
     "enkel de naam van de klant naast het logo, dan is het namelijk al vol. En misschien nog een bolletje ernaast
     voor offline online. En dan daarnaast de account knop gewoon." v5.103 deed het precies andersom (klantnaam weg
     om de titel te laten staan), maar die titel is sinds v5.142 statisch "Vermogensdashboard" op élke pagina en
     zegt dus niets wat de zijbalk niet al zegt. Gemeten op 375px kreeg hij 61px voor 155px tekst en las als
     "Vermog…" — dat was de rommeligheid die Timo meldde. De topbar blijft op 1 rij (57px).
     margin-left op .brand-specificiteit, anders wint de 7px uit de basisregel (.brand .wm s). */
  .wm-t{display:none}
  .brand .wm{gap:0}   /* v6.188: op de telefoon staat alleen de klantnaam in .wm (de paginatitel .wm-t is verborgen), dus de 7px tussenruimte uit de basisregel heeft hier niets te scheiden. Stond er tot v6.188 als margin-left op <s> en werd hier al op 0 gezet; nu hij een gap op de ouder is, hoort dat hier ook. LET OP, dit lost de afkapping NIET op: .wm krijgt sowieso maar 86px omdat het logo er 108 van de 204px van .brand opeist, en "Leeg dashboard" vraagt er 93. Dat is de bewuste afweging uit v6.175 ("de enige plek waar dan nog ruimte te halen valt is het logo, en dat is een merkkeuze"). */
  .brand .wm s{margin-left:0}
  /* De naam krijgt de ruimte die de tussenruimte niet nodig heeft: .brand staat op 20px gap (een desktop-maat),
     terwijl de topbalk zélf op smal al 10px aanhoudt (.hd hierboven). Die bestaande waarde overnemen scheelt de
     klantnaam 10px. GEMETEN op 375px: "Timo de Smit" vraagt 75px en had er 61 — met deze regel 71. Namen langer
     dan ongeveer elf tekens vloeien uit via de bestaande nm-clip-fade, het app-brede idioom voor tekst die niet
     past; de enige plek waar dan nog ruimte te halen valt is het logo (108px), en dat is een merkkeuze. */
  .brand{gap:10px}
  /* v6.185 (Timo 27-7, met screenshot): DE MELDINGSPIL IS OP DE TELEFOON WEG. Hij vroeg "Zullen we in de mobiele
     versies meldingen ook weg halen?" en dat maakt zijn eigen v6.175-ontwerp hierboven af, waar de pil niet in
     voorkwam (logo · klantnaam · bolletje · Account). GEMETEN op 390px waarom het moest: de pil is 75px breed en
     begint op x 197, terwijl de klantnaam van 186 tot 279 loopt — hij lag er dus letterlijk overheen, precies wat
     zijn screenshot toont ("1 melding" bovenop "Le…"). Uitgelogd staat er permanent een melding, dus dat was geen
     randgeval maar de normale aanblik. GEVOLG, bewust: de meldingen-popup is op een telefoon niet meer te openen;
     op elk breder scherm staat hij er meteen weer. */
  #meldPil{display:none !important}
  /* v6.185: alles in de topbalk op ÉÉN middenlijn. Gemeten stonden de vier dragers op 28 · 29,5 · 30 · 28, dus 2px
     uit elkaar — genoeg om te zien, en Timo zag het ook ("Tekst staat hier ook niet op 1 lijn"). Oorzaak: .wm was
     geen flexbox, dus de klantnaam-<s> hing als inline-element aan de TEKSTBASELINE van .wm (16px) terwijl hij zelf
     12px is, en een kleinere letter zakt daar zichtbaar onder het midden. Op de telefoon staat alleen die naam in
     .wm (.wm-t is verborgen), dus flex is hier de eenvoudigste uitlijning. Gemeten ná: alle vier op 28, verschil 0. */
  .hd, .brand{align-items:center}
  .brand .wm s{position:relative; top:0}   /* v6.188: .wm is nu app-breed een flexbox (zie de basisregel), dus de mobiele kopie is weg */
  /* v6.188 (Timo 27-7, met screenshot van zijn kernwaarden): "Titels passen ook net niet bij de mobiele kpi's zie je
     dat. Lettergrootte kleiner maken? Of wat zeg jij" — kleiner kan NIET, 9px is de kleinste maat die de app kent
     (zie DESIGN §3), dus dit moet uit de RUIMTE komen. GEMETEN op 375px: de tegel is 165px, maar het label kreeg er
     maar 75 van; 38px daarvan ging naar het icoon en 36 naar de zijpadding. Zes van de twaalf labels braken daardoor
     MIDDEN IN EEN WOORD — "Eigendomspercentage" vraagt 170px en kreeg 75, dus dat werd "Eigendomspercenta / ge".
     Drie ingrepen, geen ervan aan de lettergrootte: icoon 38 -> 28, zijpadding 18 -> 12, en `hyphens:auto` zodat een
     woord dat écht niet past netjes met een koppelteken breekt in plaats van er dwars doorheen.
     v6.203 (Timo 27-7, met screenshot van "Gemiddelde kos-ten"): DIE HYPHENS ZIJN WEER WEG. "Geen streepjes aub,
     laat dan het woord gewoon naar de 2e regel gaan." Zonder hyphens verhuist een te lang woord in zijn geheel naar
     de volgende regel; `overflow-wrap:break-word` blijft staan als vangnet voor een woord dat op geen enkele regel
     past (dat breekt dan zonder streepje). Zelfde wijziging op `.bal-sl` hieronder, want daar kwam zijn melding
     vandaan en de twee labelsoorten horen sinds v6.201 één ding te zijn.
     BEWUST GEEN FADE, en dat is Timo's eigen inzicht: "faden op mobiele view is een slechte keus omdat je geen hover
     hebt om het volledige woord te tonen". Precies — op een telefoon is weggefadede tekst definitief weg. */
  .kpi{padding:17px 12px; gap:10px}
  .kpi-ic{width:28px; height:28px}
  .kpi-ic svg{width:15px; height:15px}
  /* De grootste winst zat niet in het icoon maar hier: .kpi-st stond op flex:0 1 auto, dus hij GROEIDE NIET en pakte
     alleen zijn natuurlijke breedte. Gemeten: van de 148px die de tegel binnen zijn padding overhoudt gingen er 28
     naar het icoon en 14 naar de gap, maar de tekstkolom nam er maar 71 — er bleef 35px ongebruikt naast een label
     dat tegelijk woorden stond te breken. flex:1 geeft die ruimte terug. */
  .kpi-st{flex:1 1 auto}
  .kpi .k-l{font-size:9px;white-space:normal;overflow:visible;overflow-wrap:break-word;letter-spacing:0}
  /* v6.200 (blok 2c, besluit 3 — Timo 27-7): ALLE BEDRAGEN OP DE TELEFOON OP ÉÉN MAAT. Zijn klacht was dat de
     KPI-cijfers niet allemaal even groot zijn: de basismaat is 20px, maar `_fitKpiVals` krimpt in JS wat niet past,
     en dat gaf 11x 20px tegen 1x 14px in één rij. Zijn eis erbij: "net als in de desktop app wil ik consistenties
     en geen onnodige smaken", dus geen verzonnen tussenmaat.
     WAAROM 15 EN NIET IETS ANDERS: de rollentabel (§3) kent 20px = "groot bedrag" en 15px = "klein bedrag", en op
     een telefoontegel van 172px is een KPI-bedrag een klein bedrag. Belangrijker nog: 15px IS op de telefoon al de
     maat van de koerskaartprijs (`.mkt-c-px`, v6.185 van 20 -> 15). Er komt hier dus geen maat bij.
     WAAROM VIJF SELECTORS EN NIET ALLEEN .k-v: de cross-consistentie-audit (blok 1, bevinding 4) liet zien dat van
     de zeven elementen met 20px er precies ÉÉN was meeverlaagd. Alleen de KPI-waarde aanpakken zou de KPI-tegel op
     15px zetten en de balanstegel ernaast op 20px — dan verplaats je de inconsistentie in plaats van hem op te
     lossen. Timo koos daarom alle vijf de bedragmaten. `.set-add-tile` (ook 20px) blijft: dat is een plusteken,
     geen bedrag. */
  /* v6.201 (blok 3, besluit 4 — Timo 27-7, met zijn screenshot van de Kasstroom-tegels): "Kpi titels over de
     gehele mobiele versie zijn nog niet consistent qua lettergrootte en de fade bestaat nog in de mobiele versie."
     TWEE KLACHTEN, ÉÉN WORTEL — dezelfde half-doorgevoerde-fout als bij de bedragen in 2c. v6.189 bracht het
     KPI-label (`.kpi .k-l`) naar 9px MÉT omklappen, maar `.bal-sl` — het label van de kasstroom-, balans- en
     waarde-per-asset-tegels — bleef op 10px staan mét `nowrap` en de `.nm-clip`-fade. Dus twee labelmaten naast
     elkaar op hetzelfde scherm, en op de tegels die het niet redden verdween de tekst achter een fade.
     GEMETEN op 390px met zijn eigen data (harnas_timo): 14 labels, 4 afgekapt, alle vier met fade. De ergste is
     "Gemiddelde inkomsten", die 35px mist — precies de "Gemiddelde omz…" van zijn screenshot.
     WAAROM OMKLAPPEN EN NIET EEN FADE: zijn eigen regel, "faden op mobiele view is een slechte keus omdat je geen
     hover hebt om het volledige woord te tonen". Op een telefoon is weggefadede tekst definitief weg.
     Zelfde recept als `.kpi .k-l` hierboven, zodat de twee labelsoorten nu één ding zijn. */
  /* DRIE selectors, niet één. `.bal-sl` alleen was niet genoeg: `.cf-si .bal-sl` (r834) en `.av-si .bal-sl`
     (r839) zetten `nowrap` met een hogere specificiteit en wonnen dus. Gemeten na de eerste poging: maat en fade
     waren wél om, white-space niet. Dit is exact de blinde vlek die in AUDIT_CONSISTENTIE.md als beperking 1
     staat — twee selectors die hetzelfde element raken onder een andere naam. */
  /* v6.204 (Timo 27-7, met screenshot van zijn eigen toestel): "Zet omzet en netto ook maar op regel 2." Op zijn
     telefoon (breder dan de 390px waarop ik mat) paste "Gemiddelde omzet" nog nét op één regel en brak "Gemiddelde
     netto winst" na "netto" — dus de vier tegels hadden drie verschillende vormen. Hij wil ze alle vier hetzelfde:
     "Gemiddelde" op regel 1, de rest op regel 2.
     CSS kan geen "breek na het eerste woord" afdwingen, dus dat moet via de BREEDTE. Gemeten op 9px, de echte
     labels van deze tegels (vaste app-teksten, geen klantdata):
       "Gemiddelde"        52px      "Gemiddelde netto"   76px
       "Gemiddelde omzet"  81px      "Spaarpercentage"    74px  <- langste label dat uit ÉÉN woord bestaat
     Een grens van 75px valt precies tussen die twee groepen: elk label dat met "Gemiddelde " begint moet breken
     (het kortste daarvan is al 76px), en het langste losse woord (74px) blijft heel. Daarom 75 en geen ronde 80:
     bij 80 zou "Gemiddelde netto" er weer naast passen en had hij zijn drie vormen terug.
     LET OP bij het toevoegen van een nieuw label in deze tegels: blijft een label uit één woord onder de 75px, dan
     klopt dit vanzelf; wordt het langer, dan breekt het middenin (overflow-wrap) en moet deze grens mee. */
  .bal-sl, .cf-si .bal-sl, .av-si .bal-sl{font-size:9px; white-space:normal; overflow:visible; overflow-wrap:break-word; max-width:75px}
  .bal-sl.nm-clip{-webkit-mask-image:none; mask-image:none}
  /* v6.205 (Timo 27-7): "dit jaar" krijgt op de telefoon een eigen regel. Zie de helper _cfLbl in app.js voor het
     waarom; op desktop blijft die span inline, dus daar verandert er niets. */
  .bal-sl .lbl-jr{display:block}   /* de fade uit: bij omklappen valt er niets meer af te faden */
  .kpi .k-v, .bal-sv, .bal-sv.av-sv, .cf-si .bal-sv, .duohyp-kpis .kpi-mini .v{font-size:15px}
  .bal-sv.av-sv{line-height:15px}   /* die had line-height:20px hard aan zijn oude maat gekoppeld */
  /* ===== v6.212 (BLOK A1, Timo 27-7: "we halen de minst boeiende tegels gewoon weg in mobiele view") =====
     Vijf tegels verdwijnen op de telefoon. ALLEEN de tegel — nooit de berekening eronder: K.netto voedt ook de
     solvabiliteit en de grafieken, en de KPI-waarden voeden de donuts. Twee routes, met opzet verschillend:
       (1) .mob-uit = een markering die de bouwer zelf zet — index.html (Grootste positie) en _dhKpi() via zijn
           7e parameter (Woningwaarde, Wettelijk maandbedrag). Nodig omdat die drie geen eigen selector hebben
           en de positie in de rij niet vastligt (de KPI's ernaast zijn voorwaardelijk).
       (2) Netto vermogen gaat op SCOPE weg, niet op klasse. .bal-net is GEDEELD: index.html r126 is de
           Portfoliowaarde-tegel en app.js r25055/25068 zijn de kasstroom-tegels. Zonder de #balans-scope sloop
           je die drie mee. Reden dat juist deze weg mag: het staat bovenaan al als herogetal (#hlVal).
     De maat: beide bal-sum-rijen stonden op de telefoon als 2+1 in een 2-koloms grid, met een gat rechtsonder.
     Eén tegel eruit maakt er precies 2 van, dus het gat verdwijnt vanzelf mee. */
  /* v6.215 (Timo 27-7: "Ik denk dat box 3 en liquide wel voluit kan in de mobiele versie?"). De chips dragen sinds
     v5.597 een vol/kort-labelpaar; de ≤1699px-regel zette de app op de compacte vorm ("B3"/"Liq") en die gold dus
     óók op de telefoon. Daar is die compactie niet nodig: de balansrij heeft op smal geen concurrerende kolommen
     meer (de staaf valt weg), dus de volle woorden passen gewoon. Zet ook de min-widths terug op de volle maat,
     anders krimpen de chips onder hun eigen tekst. */
  .bt2-vol{display:inline}
  .bt2-kort{display:none}
  .bal-tag2.b3{min-width:41px}
  .bal-tag2.liq{min-width:49px}
  /* v6.215 (Timo 27-7: "Kpi's van duo, vastgoed en eigen woning moeten naast elkaar, 2 kpi's altijd bij de drie
     opties"). Die kolom stond op de telefoon onder elkaar, dus twee volle-breedte-tegels van 85px onder een donut.
     Nu naast elkaar in twee gelijke kolommen. min-width:0 is de kern: zonder die regel weigert een flex-kind te
     krimpen onder zijn inhoud en loopt de tweede tegel buiten de kaart. */
  .duohyp-kpis{flex-direction:row; gap:10px}
  .duohyp-kpis .kpi-mini{flex:1 1 0; min-width:0; padding:12px; gap:10px}
  .duohyp-kpis .kpi-mini .ic{width:30px; height:30px}
  .duohyp-kpis .kpi-mini .ic svg{width:16px; height:16px}
  .bal-si.mob-uit, .duohyp-kpis .kpi-mini.mob-uit{display:none}
  #balans .bal-si.bal-net{display:none}
  .cf-col.dh-slot-leeg{display:none}   /* v6.212: leeg DUO/EW/vastgoed-slot — kaart én kop weg, zie renderDuoHypCards */
  /* v6.211 (Timo 27-7, met screenshot van v6.210): TERUG NAAR ÉÉN REGEL. v6.210 liet de tickernaam omklappen —
     zelfde recept als de tegellabels — maar op zijn scherm werd "iShares MSCI World (Acc)" daarmee VIER regels en
     "Cipher Digital" twee. Zijn oordeel: "Ik zou zeggen dat zowel naam als ticker maar 1 regel mag krijgen en als
     het dan niet past: tekst van die ticker tegel kleiner maken."
     De tickertegel is dus een ANDER geval dan de kasstroom-/KPI-tegels: daar is omklappen goed (het label mag twee
     regels), hier niet (de tegel heeft een vaste kop van icoon | naam | prijs). Krimpen is daar het antwoord, net
     als bij de bedragen via _fitKpiVals.
     DE KRIMP ZELF IS NOG NIET GEBOUWD — zie OPENSTAAND.md. Die vraagt een ingreep in `_fitNameNow`, dat vandaag
     slim AFKORT ("Space Exploration Technologies" -> "Space Exp Tech") en daarna fadet; op smal moet dat pad
     plaatsmaken voor verkleinen. Tot dat gebouwd is staat hier de stand van vóór v6.210 terug, dus met afkorting
     en fade. Dat is niet wat hij uiteindelijk wil, maar wel beter dan een naam over vier regels. */
  .tk-sub{white-space:nowrap; overflow:hidden}
  /* v6.229 (Timo 28-7, screenshot: "Dit ziet er nog niet uit" + "die 3 waarden mogen ook gewoon naast elkaar, net
     zoals in de desktop versie"). VERVANGT de v6.216-oplossing hieronder, die de drie waarden onder elkaar zette:
     drie labels van verschillende lengte met elk hun eigen invoerveld erachter, dus drie velden die op drie
     verschillende plekken begonnen. Rommelig, en het kostte 105px hoogte.
     WAAROM HET NIET LETTERLIJK ALS DESKTOP KAN. Gemeten op 390px: de drie paren vragen naast elkaar 181 + 195 +
     186 = 562px plus tussenruimte, in een vak van 308px. Op één regel past het dus niet, hoe je het ook schikt.
     WAT WEL WERKT: dezelfde drie kolommen, maar het label BOVEN zijn waarde in plaats van ervoor. Dat is een raster
     van drie kolommen en twee rijen — labels op rij 1, velden op rij 2 — en daarmee beginnen de drie velden voor
     het eerst op dezelfde hoogte én netjes onder hun eigen label.
     HOE, zonder de HTML te verbouwen: `.rb-tol` zit in de markup BINNEN `.rb-net.sub` (app.js r5649) en is dus geen
     broer van de andere twee. Met display:contents op de drie tussenlagen worden de zes echte cellen wél directe
     rasterkinderen, en dan plaatst grid-row ze in de goede rij. Nul DOM-wijziging, dus de desktopstand blijft
     letterlijk zoals hij was.
     MATEN, gemeten: label 12px -> 10px, want op 12px vragen de drie labels samen 333px in een vak van 308px. Op
     10px is dat 289px. De kolommen staan op minmax(0,1fr) i.p.v. auto: op 390px past elk label dan op één regel,
     op 375px breken de twee lange labels netjes over twee regels in plaats van 4px buiten het vak te lopen
     (gemeten: scrollWidth 297 in een vak van 293). align-items:center houdt de velden op één lijn.
     HOOGTE: 105px -> 63px op 375/390px. */
  /* v6.250 (A-03, Timo 28-7: "En de maandcijfer tabel titels horen gewoon op 1 regel"), met een screenshot waarop
     een titel afbrak. EERLIJK: die afbreking is niet te reproduceren — gemeten op 402px staan alle zes de titels
     op één regel van 12px hoog en past de langste ("Mutaties assets") ruim. Deze regel SLUIT HET UIT, hij bewijst
     niet dat zijn bug weg is; als hij het opnieuw ziet is er dus iets anders aan de hand (data met een langere
     naam, of een andere breedte). Kost niets: de titels breken vandaag toch al niet. */
  .card-h .t{white-space:nowrap}
  .rb-foot{grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:10px; row-gap:2px; align-items:center}
  .rb-net, .rb-net.sub, .rb-tol{display:contents}
  .rb-net > span, .rb-tol-lbl{grid-row:1; font-size:9px; white-space:normal}   /* v6.250 (A-04, Timo 28-7: "Dit ziet er ook nog niet helemaal goed uit he"): 10 -> 9px. GEMETEN vóór op 402px: de voet is een strook van drie gelijke vakken en de labels vulden die bijna helemaal — lucht 16,9 / 4,8 / 1,1px. "Herbalanceren vanaf" stond dus op 1px van afbreken. 9px is geen nieuwe maat maar de bestaande hulptekst-trede. De maat is HIER aangepast i.p.v. met een tweede regel erbovenop: één plek per feit. */
  .rb-net > .rb-netv, .rb-net > b, .rb-tolbox{grid-row:2; margin-left:0}
  .dtable tbody tr:hover td{background:transparent}
  .hd{gap:10px; padding:0 14px}   /* v5.103: GEEN wrap meer -- de fixed topbar moet op 1 rij (57px) blijven, anders valt de 2e rij over de content */
  .brand{min-width:0}
  .brand .wm{min-width:0; overflow:hidden; white-space:nowrap}
  .clock{display:none}
  .hd-stat{flex:0 0 auto}
  .hd-stat b{display:none}   /* v5.103: alleen het status-bolletje op smal -- maakt ruimte voor de paginatitel */
  /* v6.199 (blok 2b, besluit 2 — Timo 27-7): 30 -> 22px, want de klantnaam kapte af. GEMETEN op 390px: .brand is
     204px, het logo pakte daarvan 108,3 en er bleef 85,7px over voor de naam. "Leeg dashboard" vraagt 92,9px en
     "Bob van der Lee" 93,1px, dus die pasten allebei net niet. Timo koos het LOGO kleiner, niet het woordmerk weg.
     22px hoogte geeft bij deze beeldverhouding (3,61:1) een logo van 79,4px, dus de naam wint 28,9px en komt op
     114,6px. Daarmee passen "Leeg dashboard", "Bob van der Lee" en "Timo de Smit" (75,2px) allemaal.
     WAT NIET PAST, en dat is bewust: namen boven ongeveer twintig tekens. "Christiaan van Ommeren" vraagt 141,7px
     en kapt dus nog steeds af. Verder verkleinen is een merkkeuze, geen maatprobleem — daar houdt deze fix op. */
  .brand .mark-logo{height:22px}
  .drag-avatar td{white-space:nowrap}
  .oedit,.oedit-ro,.netedit{font-size:16px}
  /* v5.377 (MB-9): iOS-zoom-preventie app-breed — Safari zoomt in op elk focusbaar veld <16px, dus de hele invoerfamilie naar 16px op smal. De 0,2,0-basisregels (.cl-tbl .cl-st r389, .rb-tolbox .rb-tolval r584, .vpop .tkpop-search r657) winnen van een kale klasse-regel en staan daarom hier expliciet; de 12px-knopvarianten (.hyp-vorm-btn.cl-sel e.d., 0,2,0) blijven bewust 12px — dat zijn <button>s, die zoomen niet */
  .be-in, .cfg-in input, .cl-addin{font-size:16px}
  /* ===== v6.223 (Timo 28-7, GO na de nachtronde): DE INVOERVELDEN OGEN NIET MEER GROTER DAN DE REST =========
     Zijn melding bij het allocatievlak: *"de invoervelden staan op de 16px iOS-zoomgrens en ogen daardoor groter
     dan alles eromheen"*. Gemeten op 430px: velden op 16px naast labels op 9 tot 12px.

     DE 16px MOET BLIJVEN — dat is techniek, geen smaak. Safari zoomt de hele pagina in zodra je een veld onder
     16px aantikt. Het recept komt uit v6.198 (Sheet-ID-veld): technisch 16px, met transform kleiner getekend.
     Safari beoordeelt de zoom op de computed font-size, niet op wat de transform ervan maakt. Factor .75 geeft
     zichtbaar 12px — de werkmaat van de app, dezelfde als de tabelcellen ernaast.

     DE VALKUIL, en die is de reden dat dit gisteren bleef liggen: een transform verandert wat je ZIET, niet wat
     de layout RESERVEERT. Zet je alleen `scale(.75)`, dan blijft het veld zijn oude ruimte innemen en krijg je
     lucht rondom, én een kleiner tapdoel. Zet je alleen de maten op 1/0,75, dan groeit de gereserveerde ruimte
     en bij `.oedit` — die staat in een TABELCEL — wordt de hele kolom breder.
     DE OPLOSSING IS ALLEBEI, plus een negatieve marge die de overhang exact terugneemt:
         maat / 0,75  =  maat × 4/3          (dus 1/3 extra)
         overhang     =  maat / 3, en met transform-origin:center valt daarvan de helft aan elke kant
     Per veld staat de rekensom in de regel zelf. Netto: dezelfde ZICHTBARE maat als vóór deze versie, dezelfde
     gereserveerde ruimte, alleen de letters kleiner.

     WAT JIJ NOG MOET ZIEN, eerlijk: of iOS de zoom ook echt achterwege laat is browsergedrag dat hier niet te
     meten valt — net als bij v6.190 en v6.198. Zoomt hij tóch in, dan is de terugweg dit hele blok weghalen; de
     twee regels hierboven zetten de velden dan gewoon weer op 16px zoals gisteren.
     BEWUST BUITEN DIT BLOK (oorspronkelijke tekst v6.223): `.cl-tbl .cl-st` en `.tkpop-search` — velden in een
     popup of een brede instellingentabel waar geen label van 9px naast staat, dus daar zou de 16px geen scheve
     verhouding zijn.
     ===== BIJGEWERKT v6.247 (D-06, 28-7): DIE UITZONDERING GELDT NU VOOR GEEN VAN BEIDE MEER =====
     Allebei GEMETEN op 402px met de touch-stand aan, op een ZICHTBAAR element (een verborgen element meldt
     altijd `transform:none`, dus daarop meten geeft vals bewijs — die val is hier eerst ingelopen):
      · `.cl-tbl .cl-st` stond er feitelijk nooit buiten. Het veld draagt óók de klasse `be-in` en die staat in
        de regel hieronder, dus het schaalt sinds v6.223 gewoon mee: gemeten 16px × 0,625 = zichtbaar 10px.
        De uitzondering in deze tekst was dus vanaf het begin niet waar. Gevonden door de Assistent (A-07).
      · `.tkpop-search` ís nu opgenomen, met dezelfde constructie maar in het v6.245-blok verderop (zoek op
        "v6.247"): sinds v6.245 staan de popup-kop en de rijen eronder op 10px, waardoor het zoekveld als enige
        element van de app zichtbaar boven de schaal uitstak — en als enige mobiel gróter was dan desktop. */
  .oedit,.oedit-ro,.netedit,.be-in,.cl-addin,.rb-tolbox .rb-tolval{transform:scale(.625); transform-origin:center center}
  /* .oedit / .oedit-ro — 40,2 × 22 in een tabelcel. width calc(2ch+20px) → /0,75; overhang (2ch+20px)/3, half per kant */
  .oedit,.oedit-ro{width:calc((2ch + 20px) / 0.625); height:35.2px; margin-top:-6.6px; margin-bottom:-6.6px; margin-left:calc((2ch + 20px) * -0.3); margin-right:calc((2ch + 20px) * -0.3)}
  .oedit{padding:3.2px 20.8px 3.2px 8px}
  .oedit-ro{line-height:29.2px}   /* A-09: content-hoogte 35,2 − 2×2 padding − 2×1 border; centreert het
     groepsom-getal net als de basisregel r1106 dat op desktop doet (22−4−2=16). Zonder dit plakt de regel
     bovenin het 35,2px-blok en hangt het %-teken zichtbaar lager (gemeten 3,5px op 402px). */
  .oedit-box .oedit,.oedit-box .oedit-ro{padding-right:20.8px; margin-right:calc((2ch + 20px) * -0.3)}   /* de 0,2,0-basisregel r1095 zet padding-right:13px en margin-right:0 — allebei hier omgerekend, anders wint zij */
  /* .netedit — 71,2 × 22, breedte wordt door sizeNet() in JS gezet, dus alleen hoogte/padding/marge hier */
  .netedit{height:35.2px; padding:0 8px 0 28.8px; margin-top:-6.6px; margin-bottom:-6.6px}
  .net-inbox .netedit{padding-left:28.8px}   /* 18/0,75 — de 0,2,0-regel r819 zet 18px en wint anders */
  /* .be-in / .rb-tolval — 74,4 breed; hoogte komt op touch van min-height:44px, dus die ook omrekenen */
  .be-in{width:192px; padding:0 8px 0 8px; margin-left:-36px; margin-right:-36px}   /* 120/0,75=160, overhang 40 → 20 per kant */
  .be-inbox-eur .be-in{padding-left:32px}
  .be-inbox-pct .be-in{padding-right:32px}
  .rb-tolbox .rb-tolval{height:35.2px; padding:0 12.8px 0 32px; margin-top:-6.6px; margin-bottom:-6.6px}
  /* ===== v6.230 (blok 1.1, Timo 28-7): DRIE GELIJKE VAKJES IN DE ALLOCATIE-VOET =============================
     Zijn keuze, letterlijk gekozen uit drie voorbeelden: "drie gelijke vakjes op één rij — label boven het
     vakje, alle drie de vakjes exact even breed en samen de volle breedte". v6.229 zette de drie KOLOMMEN al
     gelijk (3 × 96px), maar de vakjes DÁÁRIN bleven ongelijk. GEMETEN op 390px, vóór deze versie:
         Nog te investeren      veld 53 × 22   x 50..103    € op x=47  (links BUITEN het vakje)
         Uit portfolio te halen veld 53 × 22   x 156..209   € op x=153 (idem)
         Herbalanceren vanaf    veld 74 × 33   x 245..319   € op x=261, tekst RECHTS uitgelijnd
     TWEE OORZAKEN. (1) De breedte komt uit sizeNet()/sizeTol() in JS: die zetten een INLINE breedte die met de
     inhoud meegroeit — een desktopfeature ("het vak groeit mee tijdens het typen"). Inline verslaat CSS, dus
     dat moest aan de JS-kant uit (app.js, zelfde versie). (2) De hoogte: het derde veld draagt óók `.be-in` en
     pakt daarmee de app-brede tapdoel-regel min-height:44px (het pointer:coarse-blok onderaan); de netedits niet.
     DE MAAT. Deze velden staan op transform:scale(.75) (v6.223, iOS-zoom), dus om ZICHTBAAR de volle cel te
     vullen moet de LAYOUT-breedte 1/0,75 = 133,333% zijn, met de overhang (33,333%) half per kant teruggenomen:
     -16,667%. Netto: 128px layout in een cel van 96px, gereserveerd 96px, zichtbaar 96px. Zelfde rekensom voor
     de hoogte: 44px layout → zichtbaar 33px, overhang 11px → -5,5px boven en onder. Alle drie op 44px, want dat
     is de tapdoelmaat die het derde veld al had; de andere twee omlaag halen zou het tapdoel juist verkleinen.
     HET €-TEKEN, twee verschillende oorzaken en allebei hier opgelost. Bij de eerste twee hangt de € absoluut
     aan de wrapper (left:6px) terwijl het veld door de schaling naar binnen kroop: € op x=47 tegen een veldrand
     op x=50, dus hij stond links NAAST het vakje. Een veld dat de hele cel vult haalt hem vanzelf naar binnen.
     Bij het derde was hij helemaal niet te zien, en dat is een STAPELVOLGORDE-kwestie: `.rb-tol-eur` staat vóór
     het veld in de DOM, en een element met een transform schildert als een gepositioneerde laag — dus het veld
     komt bovenop. Bij de netedits merk je dat niet, want die hebben een half-doorzichtige vulling waar de €
     doorheen schijnt; `.be-in` (het derde veld) is ondoorzichtig. Vandaar z-index op de € én dezelfde vulling
     als de andere twee — bij drie vakjes naast elkaar valt een afwijkende tint juist op.
     Het derde veld gaat van rechts naar links uitgelijnd, zodat "€ 1.000" leest zoals "€ 0" ernaast.
     GEMETEN IN EEN ECHTE BROWSER (390px-iframe in Chrome), want de fullpage-capture van smoke_runner tekent
     een geschaald veld met een uitgesmeerde rechterrand — dat is een capture-artefact, geen CSS-fout.
     TERUGWEG: dit blok weg + de twee `_izFactor() !== 1`-regels in sizeNet/sizeTol (app.js). */
  .rb-foot .rb-netv{width:100%}
  .rb-foot .net-inbox{display:block; width:100%}
  .rb-foot .netedit,
  .rb-tolbox .rb-tolval{width:160%; height:52.8px; min-height:52.8px; margin:-9.9px -30%}
  .rb-foot .rb-tolval{text-align:left; background:rgba(255,255,255,0.04)}
  .rb-tolbox .rb-tol-eur{z-index:1}
  /* ===== v6.232 (blok 1.3, Timo 28-7): "TOON ALLES" WEG BIJ DE MAANDCIJFERS OP DE TELEFOON ==================
     Zijn melding met screenshot: "Toon alles knop zit op een onlogische plek bij de maandcijfers tabellen" — hij
     zweeft gecentreerd boven de tabel, rechts naast én hoger dan het label "Inkomsten". Keuze uit drie opties:
     weg op de telefoon, dezelfde behandeling als de koersmonitor en het aflosschema.
     WELKE PRECIES, want de knop staat op ZES plekken (geïnventariseerd in de DOM, niet gegokt): balans (e49),
     allocatievlak (e26), de drie maandcijfertabellen en de positiestabel — die laatste vier dragen `.mc-toon-btn`.
     ~~Timo koos 28-7 uit drie voorstellen: alléén de drie bij de maandcijfers. De positiestabel houdt zijn knop.~~
     ===== RECHTGEZET v6.255 (Timo 28-7 avond, letterlijk): "heb ik nooit gekozen, positietabellen horen bij de
     maandcijfers en maandcijfers moeten geen toon alles knoppen hebben, roep ik al 3 keer" =====================
     DIE KEUZE HEEFT HIJ NOOIT GEMAAKT. De `:not(.nvm-h)` was een uitzondering die ik erbij bedacht heb en
     vervolgens als zijn besluit heb opgeschreven — waarna hij twee rondes lang als vaststaand feit is
     doorgegeven, óók in het A-05-plan en in mijn eigen vraag aan hem. De positietabellen vallen onder de
     maandcijfers (zie de grens in DESIGN.md §Maandcijfers en `MC_TBLS_ALLE` in app.js), dus de knop hoort daar
     net zo goed weg. De `:not()` is eruit: één regel voor álle vier de kaarten.
     GEVOLG, en dat blijft staan: op de telefoon is een maandcijferlijst niet meer volledig op te vragen — een
     rij die helemaal op nul staat blijft daar verborgen. De stand zelf (`mcShowAll`) blijft bestaan en wordt
     bewaard, dus wat op desktop aan staat komt op de telefoon gewoon mee.
     WAAROM DESKTOP DE KNOP HOUDT: daar is hij de ENIGE bediening van die stand. Haal je hem daar ook weg, dan is
     er geen enkele manier meer om verborgen nulrijen ooit terug te halen. Wil Timo hem ook op desktop weg, dan
     hoort er eerst een andere plek voor die schakelaar te zijn. */
  .card-h .mc-toon-btn{display:none}
  .card.tbl-card .card-h{padding-right:0}
  /* A-10 (Timo 28-7: "die jaar knoppen zweven ook nog niet uitgelijnd rond"): de 104px op r457 reserveert
     ruimte voor de .mc-toon-btn hierboven — en die is op de telefoon juist weg. Zonder deze reset eindigt
     de flex-end-rij 104px voor de kaartrand en hangt de jaarnav in het niemandsland tussen titel en rand
     (gemeten: nav rechts op x 257 bij een contentrand van 361). */
  /* ===== v6.234 (blok 1.4, Timo 28-7): AFLOSSCHEMA-KNOP WEG OP DE TELEFOON ==================================
     Zijn vraag: "bij duo, vastgoed en eigen woning misschien de aflosschema knop weghalen? Is meer een feature
     voor op desktop misschien?" Toen ik meldde dat ik er maar twee in de code vond: "als de klant eigen woning of
     vastgoed heeft is daar ook zo'n knop" — klopt: `#hypSchedBtn` bedient eigen woning én de panden, dus twee
     knoppen dekken alle drie de gevallen.
     CORRECTIE OP EEN EERSTE AANNAME: de knop navigeert NIET naar de desktop-only aflos-pagina; hij klapt een
     brede tabel uit binnen de kaart (`.duosched-vlak`). Hij is dus niet dood op een telefoon, hij levert daar
     een tabel die je horizontaal moet vegen. Het VLAK sluit in app.js (`_schedShow`), want de open-stand wordt
     bewaard — anders verberg je de knop maar blijft de tabel staan. */
  #duoSchedBtn, #hypSchedBtn{display:none}
  /* ===== v6.236 (blok 1.6, Timo 28-7): DE TWEE ALLOCATIEDONUTS NAAST ELKAAR OP DE TELEFOON =================
     Mijn eigen bevinding uit de doorloop, aan hem voorgelegd met een screenshot van zijn eigen data: het
     allocatievlak was op 390px **906px hoog** — ruim een heel telefoonscherm — met twee donut-stages van elk
     184px ONDER elkaar, en bij hem tonen Huidig en Doel hetzelfde bedrag. Hij koos uit drie opties: naast elkaar.
     Dat is geen nieuwe vorm maar de vorm die halfscherm (761–880px) al heeft; alleen de 880-regel hierboven zette
     ze op de telefoon op één kolom. GEMETEN ná, 390px: stages 147px breed, kaart 906 → 708px (198px winst), het
     bedrag "€ 172.698" past nog heel in het donutgat (een langer bedrag valt onder de bestaande gat-fade van
     v5.825). De rest van het vlak — badges, "Toon alles", de tabel — blijft ongemoeid.
     NB de DUO/hypotheek-donut zit in `.dh-view`, niet in `.donut-pair`, en blijft dus op volle breedte staan. */
  .donut-pair{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* ===== v6.241 (Timo 28-7, met screenshot: "Gaat in de mobiele versie hier nog iets mis met dat celletje voor
     de sheet ID"). JA, en het waren twee eigen bouwsels die elkaar in de weg zaten.
     v6.198 (r134) tekent dit veld op 80% vanuit de LINKERBOVENHOEK, met breedte 125%. Dat is op zichzelf sluitend:
     125% x 0,8 = precies de rij, en met een linkerhoek-origine begint het veld waar de rij begint.
     v6.223 gaf daarna de hele invoerfamilie een negatieve marge van -12,5% per kant. Die marge hoort bij schalen
     vanuit het MIDDEN, waar zij de overhang aan beide kanten terugneemt. Bij een linkerhoek-origine valt er niets
     terug te nemen en schuift zij het veld gewoon op. GEMETEN op 390px, vóór deze versie: de rij loopt van x=29
     tot x=333, het veld stond op x=-9 tot x=295, dus 38px te ver naar links en 38px te kort aan de rechterkant,
     plus 3px te hoog door dezelfde marge op de verticale as. Gevolg, en dat is wat hij zag: het oogje (283..303)
     en het wisknopje (304..324) vielen allebei BUITEN de rechterrand van het veld.
     DE OPLOSSING IS WEGLATEN, niet bijstellen. `.cfg-in` draagt precies één input, en elke eigenschap die v6.223
     hier zette wordt al door de ID-regel `#sheetId` (1,0,0) overschreven: breedte, hoogte en padding staan daar
     in de 0,8-rekensom. Alleen de vier marges overleefden, want daar heeft #sheetId niets over te zeggen, en juist
     die vier waren fout. Zonder deze regel valt het veld terug op de sluitende v6.198-constructie.
     Om dezelfde reden staat `.cfg-in input` niet meer in de transform-regel hierboven: die scale(.75) verloor toch
     al van #sheetId, en een regel die nooit aankomt is een valstrik voor de volgende die hier kijkt.
     TERUGWEG: dit blok terug is de v6.223-stand, inclusief het scheve veld. De echte terugweg voor het hele
     recept staat bij v6.198 (r117 e.v.). */
  .cl-addin{height:35.2px; margin-top:-6.6px; margin-bottom:-6.6px; border-width:1.6px; border-radius:6.4px}
     /* A-12 (Timo 28-7: "deze 2 cellen zijn nog heel inconsistent, trek ze gelijk"). 22/0,625 en overhang
        (35,2−22)/2, dezelfde som als .oedit op r1490; rand en radius ×1,6 zodat ze ná scale(.625) weer
        zichtbaar 1px en 4px zijn, gelijk aan de Kies…-knop ernaast. De oude regel rekende met /0,75, de
        fossiele factor uit de tijd dat deze familie op 12px zichtbaar stond, en gaf 18,3px hoogte. */
  .cl-add-f .cl-addin{width:176px; margin-left:-33px; margin-right:-33px}
     /* A-12: 110/0,625, overhang (176−110)/2 = 33 per kant; was 173,333 (130/0,75) = zichtbaar 108,3.
        WAAROM 110 EN NIET 130 (het plan liet die keuze aan de bouwer, met 130 als default): de 130 kwam uit
        de "16px-verruiming" — toen het veld nog écht 16px tekst toonde was 110 te krap. Sinds de tekst via
        scale(.625) zichtbaar 10px is, net als de knop ernaast, hangt die verruiming aan dezelfde vervallen
        aanname als de /0,75 hierboven. Gemeten op desktop staan de twee cellen bovendien allebei op 110, dus
        110 maakt ze gelijk aan elkaar én aan de desktopstand. Timo: "trek ze gelijk".
        De losse `width:130px`-regel die hier verderop in het blok stond is opgegaan in deze: twee regels
        voor dezelfde breedte is precies hoe de /0,75 hier zo lang kon blijven staan — die latere regel won
        op bronvolgorde en maakte de eerste onzichtbaar. Eén plek dus. */
  /* ===== v6.242 (Timo 28-7): ÉÉN MAAT VOOR ELKE KOP OP DE TELEFOON =========================================
     Zijn melding, met screenshot van de posities-tabel: "Vallen de positie tabellen niet onder maandcijfers in
     jouw code ofzo. Echt meermaals gezegd dat die lettergrootte hier niet goed staat." Hij heeft gelijk, en de
     meting laat zien hoe scheef het stond: DRIE combinaties voor ÉÉN rol (een kop boven een blok).
         Mutaties assets   span.t.swaptitle   11px/500   (.card-h .t, r546, globaal)
         Posities assets   span.swaptitle     10px/600   (v6.220, de enige die al verkleind was)
         Bezittingen       span.swaptitle     10px/500   (geen eigen regel, puur geërfd)
     De koppen die NIET klikbaar zijn stonden er weer anders bij (11px/600). Dat is precies het half-doorgevoerde
     patroon dat hier vaker de fout was: één familie omlaag, de zusters blijven staan, en de scheefheid verplaatst
     zich alleen maar.
     DE MAAT IS 10px/600, en die keus is van hem: gevraagd of het 10/600 of 11/500 werd, antwoordde hij "Altijd
     voorkeur aan kleinere px". Dus de kleinste van de twee. Het gewicht 600 komt uit v6.220 en blijft: een kop
     onderscheidt zich hier door gewicht in plaats van door grootte, want de rijnamen eronder staan op 12px.
     Een kop die zowel kleiner als lichter is dan zijn eigen inhoud leest niet meer als kop.
     BEWUST BREDER DAN DE DRIE DIE HIJ NOEMDE: ook de niet-klikbare kaartkoppen gaan mee. Alleen de swaptitles
     verkleinen zou ze KLEINER maken dan de kop ernaast, en dan is het volgende wat hij ziet weer een verschil.
     ALLEEN OP DE TELEFOON. De globale regels op r546 en r89 blijven staan, dus desktop verandert niet; hij heeft
     over de telefoonweergave gemeld. Eén woord van hem en dit gaat app-breed.
     INSTELLINGEN GAAT MEE, op zijn "trek maar gelijk": `.periode-name` stond op 12px/600 terwijl de koppen op het
     dashboard op 10 of 11 staan, en dat was de grootste tekst van die pagina.
     EN DE HULPTEKST MOEST MEE, gezien op het screenshot ná de eerste poging: met het label op 10px las de uitleg
     eronder (11px) GROTER dan zijn eigen kop. Dat is dezelfde val als hierboven, alleen omgekeerd, en op het beeld
     meteen zichtbaar terwijl de losse maten allebei verdedigbaar leken. `.periode-desc` gaat daarom naar 9px, de
     hulptekstmaat die de app op de telefoon elders ook draagt (KPI- en sectielabels). Hiërarchie hersteld:
     kop 10/600, uitleg 9/400.
     NIET OPGELOST, en dat blijft staan als melding: "Tickers en koersen resetten" breekt nog steeds over twee
     regels en zijn uitleg wordt in een kolom van vijf smalle regeltjes geperst, omdat de twee knoppen ernaast de
     halve breedte pakken. Dat is een indelingsprobleem, geen maatprobleem, en het valt buiten "trek de maten gelijk".
     TERUGWEG: dit blok weg zet alles terug op de globale regels, dus op de drie-verschillende-koppen-stand.
     ===== BIJGEWERKT v6.247 (D-06, 28-7): DIT IS APP-BREED GEWORDEN — de regels stonden hier en zijn WEG =====
     Het "één woord van hem"-voorbehoud hierboven is ingelost: op de cross-audit koos Timo "gelijktrekken, hou
     ik van", dus dezelfde vier regels staan nu in de globale laag (`.card-h .t` r546, `.card-h .s` r548,
     `.swaptitle` r636, `.periode-name`/`.periode-desc` r90/91) en gelden op élke breedte. Ze hier laten staan
     zou een tweede plek voor hetzelfde feit zijn; de verantwoording erboven blijft, want die legt uit waaróm
     de maat 10/600 is en waarom de hulptekst mee moest. De telefoon verandert door v6.247 dus NIETS: hij stond
     al op deze maten, alleen kwamen ze uit dit blok en nu uit de globale regels. */
  /* ===== v6.246 (D-02, Timo 28-7): DE TEKSTKOLOM IN INSTELLINGEN WORDT NIET MEER WEGGEPERST ==============
     Zijn melding over deze pagina: "is echt een bende, totaal niet consistent met de rest van de app nu". De
     lettermaten zijn in v6.245 gelijkgetrokken; dit gaat over de indeling.
     GEMETEN op 390px met zijn administratie, vóór: de rij is een flex zonder wrap (r87) en `.periode-info`
     staat op `min-width:0`, dus de tekst krijgt wat de bediening overlaat. Dat levert per rij een andere
     kolombreedte op, en dát is de inconsistentie die hij ziet:
         Fiscaal partner · Gelijke namen · Hover     tekst 230-235   bediening 43-48
         Datum · Modus                               tekst 196-198   bediening 80-82
         Belastingjaar calculators                   tekst 161       bediening 118
         Tickers en koersen resetten                 tekst 110       bediening 169   <- naam brak over 2 regels,
                                                                                        uitleg over 4
     DE FIX: de rij mag afbreken en de tekst krijgt een ondergrens. Past de bediening niet meer naast een
     tekstkolom van 160px, dan zakt hij naar zijn eigen regel en heeft de tekst de volle breedte.
     WAAROM 160 EN NIET EEN ROND GETAL: dat is gemeten. Bij 161px past "Belastingjaar calculators", het langste
     label, nog net op één regel. Onder die waarde gaan labels breken, erboven zou de rij met de 118px-bediening
     onnodig afbreken. 160 is dus de grens waar élk label één regel blijft en alleen de echte uitschieter zakt.
     WAT DIT NIET OPLOST, bewust: de tabknoppen zijn 44px hoog tegen 22px elders (dat is de tapdoelnorm, geen
     slordigheid) en de meldingsbalk herhaalt de tekst uit de topbalk. Allebei keuzes voor Timo, geen fouten.
     TERUGWEG: dit blok weg. */
  .periode-row{flex-wrap:wrap; gap:10px 16px}
  .periode-info{flex:1 1 160px}
  /* ===== v6.245 (A-02, Timo 28-7): OP DE TELEFOON BESTAAN 11 EN 12px NIET MEER ============================
     Zijn wens: "Ik denk dat we alle 12px en 11px wel naar 10px kunnen zetten eigenlijk. Dat gaat al veel rust
     creeeren. En dan zou ik zeggen invoervelden en alles wat nu 15px is naar 14px ook." Uitvoering van zijn
     eigen tie-break uit DESIGN.md §3: de kleinere px wint, rangorde maak je met gewicht.
     GEMETEN op 390px met zijn administratie, vóór: 1308 zichtbare tekstelementen, waarvan 19 op 11px en 994 op
     12px. Ná: nul op 11 en nul op 12. De mobiele versie kent daarna nog vier maten: 9, 10, 14 en 38.
     DE BELANGRIJKSTE TOETS IS NIET "alles kleiner" MAAR "niets groter". Een blok als dit blaast makkelijk een
     9px-regel op, want een klassenselector hier wint van een specifiekere regel elders. Daarom is per element
     de computed font-size vóór en ná vergeleken, niet alleen de verdeling geteld.
     WAT ER BEWUST BUITEN BLIJFT: .periode-desc, .tk-chg en .htleg-i staan op deze breedte al op 9px en zouden
     door dit blok juist GROEIEN; .card-h .t, .swaptitle en .periode-name staan al op 10px (de v6.242-kopfamilie);
     de 14px-familie in de lijst hieronder zijn verwijderkruisjes en KPI-waarden, geen lopende tekst; .hero-v
     blijft 38px want dat is het netto-vermogen-getal; de Google-inlogknop is markup van Google zelf.
     LET OP, NIET AANRAKEN: `.nvmtable td.nvm-c` gaat mee naar 10px maar `.nvmtable td.nvm-c:focus` blijft 16px.
     Die :focus is specifieker en wint vanzelf, en dat moet zo blijven: dat is de iOS-zoomgrendel op de
     bewerkbare cellen van de Posities-tabel.
     HERKOMST: voorwerk van de Assistent-chat, punt A-02, plan byte-exact in archief/. Zijn selectorlijst is
     hier nagemeten op de huidige stand (hij mat op v6.242, er staat v6.244).
     TERUGWEG: dit blok weg. */
  .ico-btn,.cfg-f .sub,.cfg-go,.cfg-out,.cl-pct,.ov-periode,.ov-hint,.aflos-catsel,
  .kmon-view .kmon-tbl,.kmon-view .kmon-tbl td.kmon-exch,.kmon-tbl td.kmon-isin,
  .schedet-info,.schedet-nm,.schedet-tot,.schedet-ch .schedet-info,.aflos-view .schedet-empty,
  .meld-pil,.meldpop-body,.meld-set:not([hidden]),.err,.err .err-ok,.lg,
  .ey,.dh-viewsel,.card-h .s,.tk-mk,.cl-eur,   /* A2-besluit 5 (Timo 29-7): `.tk-px` HIER UIT. Die selector stond in deze 10px-groepsregel, en omdat dit blok later komt won hij van de audit-fix `.tk-px{font-size:12px}` op <=480 (style.css r623). Die fix heeft dus nooit gerenderd. Gemeten op 402 voor de knip: prijs 10 - naam 10 - verandering 9, terwijl de audit juist prijs 12 wilde omdat de prijs boven de naam hoort te staan; die omgekeerde rangorde was de meest voorkomende fout van de hele audit (576 elementparen). */
  .cl-type-btn.cl-sel,.cl-tog,.cl-sel,.cl-grpchip,.cl-soort,.cl-tbl,.cl-ftype,
  .cl-grp-btn.cl-sel,.cl-add-cat.cl-sel,.cl-add-type.cl-sel,
  .h-d,.nw-b,.rbtable,.rbtable th#rebDoelSum,.rbtable tr.rb-subrow,.rb-net,.net-pc,
  .rb-tolbox .rb-tol-eur,   /* v6.250 (A-04): `.rb-tol-lbl` stond hier en is WEG — dat label hoort sinds A-04 bij de allocatievoet-regel op r1418 (9px). Deze lijst staat later in het bestand en won op bronvolgorde, waardoor van de drie voetlabels alleen "Herbalanceren vanaf" op 10px bleef staan. Zelfde cascade-val als v6.247; één plek per feit. */
  .vpop .vp-row,.vpop .vp-tx,.vpop .vp-row .vp-ar,.vpop .tkpop-opt .tkpop-code,
  .bal-r,.bal-r.bal-subrow,.av-line2,.dtable,.nvmtable td.nvm-c,.cf-bartip,.cf-bartip .cbt-t,
  .oedit-box .oedit-pct,.mkt-c-nm,.brand .wm s,.hd-stat,.clock,.eig-tab,.eig-undo,
  .dh-empty-hint,.hyp-vorm-btn.cl-sel,.afl-btn.cl-sel,.modus-btn.cl-sel,
  .ov-chip,.ov-tkpick,.nvm-nav #nvmYr,.nvm-arrow,.pd-today,.pd-tog{font-size:10px}
  .tk-px{font-size:10px}   /* A2-besluit 5, TWEEDE HELFT — gemeten bijvangst die niet in het plan stond. De groepsregel hierboven gold tot 760px, niet tot 480. Alleen `.tk-px` eruit knippen liet 481-760 dus van 10px naar de basis 15px springen, en dat was nergens de bedoeling. Deze regel houdt die band exact zoals hij was; de audit-fix naar 12px geldt uitsluitend <=480, zie hieronder. */
  @media (max-width:480px){ .tk-px{font-size:12px} }   /* de audit-fix, HIER herhaald en niet alleen op r623: dit @media-blok komt later in het bestand en zou de 10px hierboven anders laten winnen op 402. */
  .pop-x,.donut-c .dv,.kpi .k-v,.bal-sv,.bal-sv.av-sv,.cf-si .bal-sv,
  .duohyp-kpis .kpi-mini .v,.mkt-c-px{font-size:14px}
  /* v6.247 (D-06): .side-nav-btn en de drie .idle-warn-*-regels stonden hierboven en HAALDEN HET NOOIT — hun
     eigen basisregels staan later in het bestand (r1728 resp. r1965-1968) en winnen op bronvolgorde. Ze zijn
     hier weggehaald en staan nu als mobiele override direct ná die basisregels, zodat er één plek per selector
     is in plaats van twee die elkaar tegenspreken. Gemeten vóór: zijbalkknop 12/400, idle-titel 15, idle-tekst
     12, idle-knop 12 — alle vier de bedoelde v6.245-maat mis. Zoek op "v6.247" voor de nieuwe plek. */
  /* ===== v6.212 (BLOK A2, Timo 27-7): ALLE KNOPTEKST OP DE TELEFOON OP 10px =====
     Aanleiding: de kasstroomknop stond op 11px terwijl de tegellabels en KPI-labels sinds v6.200/v6.201 op 9px
     staan. Timo koos 10px: één stap kleiner, en nog net groter dan een label, zodat de rangorde intact blijft.
     ALLE families in één keer — half doorvoeren was vandaag de terugkerende fout (één familie omlaag, de
     zusterelementen blijven staan, en de scheefheid verplaatst zich alleen maar).
     .cl-tog en .cl-sel stonden hierboven op 16px (v5.377/MB-9, iOS-zoom-preventie). Die stond daar ten onrechte:
     GEMETEN in de DOM zijn alle 11 .cl-sel en alle 11 .cl-tog een <button> — Safari zoomt alleen op een focusbaar
     INVOERveld, en een knop krijgt geen toetsenbord. Het waren dus de grootste teksten van het scherm zonder dat
     er iets tegenover stond. .be-in / .cfg-in input / .cl-addin zijn wél echte inputs en blijven op 16px.
     De dubbelklasse-varianten staan expliciet: hun eigen 0,2,0-basisregels (r621/r634/r651/r177) winnen anders
     van een kale klasse. BUITEN BEELD gelaten, met opzet: knoppen zonder tekst — .nav-burger, .cfg-eye, .cfg-clr,
     .hovlock, .set-card-clear, .pop-x, .cl-grpdel — daar IS de font-size de icoongrootte; en .side-nav-btn, want
     dat is het zijbalkmenu en geen knop in de content. Toets na elke wijziging hier: geen enkele <button> MET
     tekst boven de 10px. */
  .nw-b, .cl-tog, .cl-sel, .cl-type-btn.cl-sel, .cl-grp-btn.cl-sel, .cl-add-cat.cl-sel, .cl-add-type.cl-sel,
  .hyp-vorm-btn.cl-sel, .afl-btn.cl-sel, .modus-btn.cl-sel, .eig-tab, .pd-tog, .ov-chip, .ov-tkpick,
  .nvm-arrow, .cfg-go, .cfg-out, .ico-btn, .mkt-rng-b, .eig-undo{font-size:10px}
  .cl-tbl .cl-st,.rb-tolbox .rb-tolval,.vpop .tkpop-search,.vpop .cp-search{font-size:16px}
  /* ===== v6.247 (D-06, Timo 28-7 op de cross-audit): HET POPUP-ZOEKVELD OGT NIET MEER GROTER DAN DE APP ======
     Dit was de énige plek in de hele app waar mobiel ZICHTBAAR groter was dan desktop: 16px op de telefoon
     tegen 12px op 1280, en dat naast een popup-kop van 10px. Het veld droeg wél de 16px-iOS-grendel maar niet
     de verkleining van v6.198/v6.223, want het v6.223-blok liet 'm er bewust buiten ("een veld in een popup
     waar geen label van 9px naast staat"). Op de gemeten stand klopt dat niet meer: de popup-kop en de rijen
     eronder staan sinds v6.245 op 10px, dus het zoekveld stak er als enige bovenuit.
     RECEPT = exact dat van v6.223, factor 0,625. Alles wat de layout reserveert wordt gedeeld door 0,625 en de
     overhang wordt met een negatieve marge teruggenomen, zodat het VAKJE zichtbaar precies zo groot blijft als
     het was en alleen de letters kleiner worden. Gemeten vóór op 402px: 252,38 x 33,5px.
       breedte  100%   / 0,625 = 160%      overhang 60%, half per kant -> margin-left/right -30%
       hoogte   33,5px / 0,625 = 53,6px    overhang 20,1px, half per kant -> 10,05px, verrekend in de marge
                                           die er al stond (2px boven, 5px onder) -> -8,05px / -5,05px
       padding  6/9px  / 0,625 = 9,6/14,4px      border 1px -> 1,6px      radius 4px -> 6,4px
     TERUGWEG als iOS tóch inzoomt of het vakje verschuift: deze twee regels weghalen. De regel hierboven zet
     het veld dan gewoon weer op 16px zoals vóór deze versie. */
  .vpop .tkpop-search,.vpop .cp-search{transform:scale(.625); transform-origin:center center;
    width:160%; height:53.6px; margin-left:-30%; margin-right:-30%; margin-top:-8.05px; margin-bottom:-5.05px;
    padding:9.6px 14.4px; border-width:1.6px; border-radius:6.4px}
  /* v6.138 (Timo 27-7: "sommige tabellen hebben gewoon grotere lettergroottes op de mobiele versie, trek het
     recht, kleinere lettergrootte is het juiste"). Dit WAS de afwijker: 234 bewerkbare cellen in Posities en
     Box 3 stonden op smal op 16px terwijl elke andere tabel 12px doet — een verschil van een derde, en precies
     wat hij zag. De 16px kwam uit v5.377 (MB-9, iOS-zoompreventie: Safari zoomt in op een focusbaar veld <16px).
     Die bescherming is niet weggegooid maar VERPLAATST naar het moment waarop hij nodig is: de cel staat in rust
     op de tabelnorm van 12px en springt bij focus naar 16px, en Safari beoordeelt de zoom op de grootte tijdens
     focus. Dat scheelt de zoom én de reuzentabel. LET OP bij het herzien: dit is de enige plek waar de rust-maat
     en de focus-maat uiteenlopen; werkt de zoompreventie op een echt toestel toch niet, dan is 16px terugzetten
     (of maximum-scale in de viewport, maar dat breekt knijp-zoom) de terugval. */
  /* v6.245 (A-02): 12 -> 10px, want op de telefoon bestaat 12px niet meer. Deze regel staat LATER in het
     bestand dan het v6.245-blok en heeft dezelfde specificiteit (0,2,1), dus zij won op bronvolgorde en liet
     361 cellen op 12px staan terwijl de rest naar 10 ging. Gevonden door per element na te meten; het plan
     voorspelde nul. DE FOCUS-REGEL HIERONDER BLIJFT 16px, dat is de iOS-zoomgrendel. */
  .nvmtable td.nvm-c{font-size:10px}
  .nvmtable td.nvm-c:focus{font-size:16px}
  .be-in{width:120px}   /* was 100px (r449): 8 cijfers + duizendtal-punten op 16px tabular Inter ≈ 85px + 16px padding — 100px kapte af; .set-item-name (flex:1) en .cl-tbl .cl-st (width:100%) houden hun eigen sizing */
  .cl-tbl .cl-st{max-width:130px}   /* op smal scherm staat dit veld op 16px (iOS-zoompreventie hierboven), dus de 82px-basis is daar te krap — vandaar de ruimere cap. Alleen binnen deze media-query; de basiswaarde staat op r.474. */
  /* .cl-add-f .cl-addin stond hier op width:130px (de 16px-verruiming, was 110px). Die regel is in v6.261
     opgegaan in de A-12-regel hierboven, waar hij als 208px staat — 130 gedeeld door de schaal 0,625, zodat
     het veld ná scale() ook echt 130px breed IS. Hier bleef het bij 130px CSS = 81,3px zichtbaar. */
  /* A-11 variant 1 (Timo 28-7: "bij de mobiele versie mag het instellingen vlak zich gewoon zo lang rekken
     als nodig is, dat het scrol element daar dus uit gaat"). De categorieënlijst zat op de telefoon in een
     eigen venster van 470px met 1959px inhoud: 1489px verstopt achter een genest scrollgebaar binnen een
     vlak dat zelf al schermvast is. De klem komt niet van r640 (62vh) maar van de flex-keten in de eig-vol-
     stand (r70-72): de scroller vult de kaart. Hier is die keten uit: elke schakel neemt zijn eigen
     contenthoogte, de lijst rekt volledig en er blijft één scroller over, het vlak zelf. Desktop houdt de
     62vh-klem, die is daar bewust. */
  .eig-panel.eig-vol .eig-tabpane.on,
  .eig-panel.eig-vol #classifTbl,
  .eig-panel.eig-vol .cl-scroll{flex:0 0 auto; min-height:auto}
  .eig-panel.eig-vol .cl-scroll{max-height:none; overflow:visible}
  /* A-11 variant 2 (zelfde wens, tweede stap): nu ook het VLAK zelf uit de schermklem. Het stond op
     position:fixed met inset:57px (r66) en het paneel op height:calc(100dvh - 154px) (r68), dus het vlak was
     precies één scherm hoog en alles wat niet paste ging achter een interne scroller. In-flow scrollt de
     PAGINA, zoals overal elders in de app op de telefoon. De 83px bovenpadding vervangt wat inset:57px + de
     26px eigen padding samen deden: de kop staat weer op exact y 83, onder de vaste 57px-header. */
  .eig-modal{position:static; overflow:visible; padding-top:83px}
  .eig-panel{max-height:none; overflow:visible}
  .eig-panel.eig-vol{height:auto}
  /* v6.265 (Timo 28-7 laat, zijn besluit 1): DE TABBALK PLAKT OP DE TELEFOON. Hoort bij de A-11-regels
     hierboven: nu de pagina zelf scrolt in plaats van een venster, scrolde de tabbalk gewoon mee weg.
     GEMETEN op 402 in de touch-stand, Categorieën-tab: balk 94px, bij scrollstand 500 stond hij op top -372,
     dus volledig uit beeld met nog 1472px lijst te gaan. Van tab wisselen kon alleen door helemaal terug te
     scrollen. top:57px = onder de vaste .hd (r525, daar ook hardcoded 57). Timo kent de prijs en koos hem
     mét de prijs erbij: die 94px blijft permanent staan, van de 874px schermhoogte.
     De negatieve zijmarges vullen de 20px paneelpadding (r73), anders schuift de lijst zichtbaar langs de
     balk omhoog; padding-bottom 8 + margin-bottom 6 samen = de 14px die r76 al had, dus in ruststand
     verandert er geen pixel. z-index 6 wint van de sticky tabelkop (.cl-tbl thead th, z-index 4).
     DE TWEE REGELS HIERONDER ZIJN GEEN EXTRA'S, ZONDER ALLEBEI DOET DE STICKY NIETS. Gemeten, niet geraden:
     met alleen de regel hierboven bleef de balk op top -472 staan bij scrollstand 600, precies als voorheen.
     Oorzaak: r523 zet `html,body{overflow:auto}` en daarmee is BODY een scrollcontainer. Een sticky element
     plakt aan zijn dichtstbijzijnde scrollende voorouder, dus aan body, en body beweegt zelf niet mee met de
     paginascroll — het element plakt aan iets dat stilstaat en er gebeurt niets.
       (1) `overflow:clip` haalt die scrollcontainer weg (clip scrolt niet, auto wel) en houdt wél dezelfde
           clipping als auto. Nu plakt de balk aan de viewport. Paginascroll blijft 1472px, de laatste rij
           blijft bereikbaar, horizontale paginascroll blijft 0: alle vier gemeten vóór en ná.
       (2) body clipte tot nu toe de 571px die de categorieëntabel breder is dan het scherm, en je kon daar
           met een zijwaartse veeg langs (gemeten: tabel schoof 300px mee). Die weg valt met clip weg, dus
           krijgt de tabel zijn eigen horizontale scroller terug. Verticaal verandert er niets: max-height
           blijft none (r1766), dus er komt geen tweede verticaal scrollgebaar terug — gemeten 0px binnenscroll.
       Kortom, de zijwaartse veeg verhuist van de hele pagina naar de tabel zelf. */
  body{overflow:clip}
  .eig-panel.eig-vol .cl-scroll{overflow-x:auto}
  .eig-panel .eig-tabs{position:sticky; top:57px; z-index:6; background:var(--surface); margin:0 -20px 6px; padding:0 20px 8px}
  /* LET OP: .eig-vol staat maar op ÉÉN tab (app.js r32861 zet hem alleen bij k==="eig", de Categorieën).
     De andere tabs vallen op de basisregel r73 met max-height:88vh + overflow:auto, en daar zat op DUO een
     tweede interne scroller: pane 1186 hoog in een paneel van 769. Daarom staat de in-flow-regel op .eig-panel
     zelf en niet alleen op de eig-vol-stand. */
  .dtable td.mc[data-v]:hover{background:transparent}
  .dtable td.rh:hover{background:transparent}
  .dtable th.mh:hover{color:var(--text-3)}
  .tbl-x{overflow-x:auto;-webkit-overflow-scrolling:touch; /* <- was r.954 */ touch-action:pan-x}
  #rebal{overflow-x:auto;-webkit-overflow-scrolling:touch; /* <- was r.957 */ touch-action:pan-x}
  .overzicht-wrap{padding:16px 16px 18px}   /* v5.586: MB-7-lijn (36->16px zijpadding op smal) gold nog niet voor het Superoverzicht (v5.524) */
  .zak-wrap{padding:16px 16px 18px}   /* A-15.1: dezelfde MB-7-lijn voor de zakelijke pagina (Timo 28-7: mobiel is geen naronde) */
  .kmon-tbl{min-width:640px}
  .schedet-ch{flex-wrap:wrap}   /* v5.586 (mobiele slotronde): de v5.561-572-kaartkop kwam NA de mobiel-golven en had geen smal-gedrag — de nowrap/shrink:0-reeks (±660px) duwde de kaart tot 711px in een 375px-viewport */
  .schedet-lead{flex-wrap:wrap; row-gap:6px}
  .schedet-tots{flex-wrap:wrap; white-space:normal; row-gap:6px; flex-shrink:1; min-width:0}   /* shrink:0 uit de basisregel (cijfers-leveren-nooit-in, een DESKTOP-afweging) blokkeerde de wrap: het blok claimde zijn volle max-content (637px gemeten) in een 309px-kop */
  .schedet-tot{white-space:nowrap}   /* het label+waarde-paar blijft bijeen; alleen TUSSEN de paren wordt gewrapt */
  .aflos-view .duosched-wrap{max-height:none; overflow-x:auto; -webkit-overflow-scrolling:touch}   /* één natuurlijke paginascroll i.p.v. scroll-in-scroll */
  .aflos-view .duosched-tbl{min-width:600px}
  .aflos-view .duosched-tbl th, .aflos-view .duosched-tbl td{white-space:nowrap}
  /* v5.377 (MB-16): safe-area — extra bodempadding op de scrollende paginawrappers zodat de onderste content boven de iPhone-home-balk uitkomt; kent de browser env() niet, dan vervalt alleen deze declaratie en blijft de bestaande bodem staan. Bewust ONDER de kmon-/aflos-paddingregels hierboven: een latere shorthand zou deze padding-bottom weer platslaan. GEEN viewport-fit=cover (bewust besluit): zonder cover is de inset 0 en verandert er niets — dit is de toekomstvaste laag */
  .app{padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  .kmon-wrap{/* v5.376 (MB-5/6/7): Koersmonitor + Aflosschema op smal — 16px zijpadding (het .mkt-wrap-recept hierboven) + horizontaal scrollen (het .tbl-x/#rebal-patroon) */ padding:16px 16px 48px; /* <- was r.986 */ padding-bottom:calc(48px + env(safe-area-inset-bottom,0px))}
  .aflos-wrap{/* de monitor-tabel scrollt in z'n .tbl-x-wrapper; 640 ≈ de gemeten content-breedte (631px) */ padding:16px 16px 48px; /* <- was r.989 */ padding-bottom:calc(48px + env(safe-area-inset-bottom,0px))}
}
@media (min-width:601px) and (max-width:760px){ .set-cards{grid-template-columns:repeat(auto-fit,minmax(150px,160px))} }   /* v5.377 (MB-9): kaartjes mee-verruimd met de 120px-velden (120 + 2×12 kaartpadding = 144 > de oude 140px-max, r145); ≤600px is al 1fr (r174) en dat blok blijft winnen omdat dit blok daar niet geldt */
  /* Portfoliowaarde + Waarde-per-asset-grafiek extra hoog (v4.726: +10%, was 389/311; alleen deze twee, niet netto-vermogen) */
  .hero-card .nw-wrap.pf-wrap{flex:none;height:428px}
  @media (max-width:880px){ .hero-card .nw-wrap.pf-wrap{flex:none;height:342px} }
  @media (min-width:1281px){
    /* v5.979 (Timo 24-7 "x-assen altijd op gelijke hoogte" — HARDE REGEL, gebroken door elke variabele hoogte
       bóven een vaste grafiekwrap): zodra Portfoliowaarde en Waarde-per-asset naast elkaar staan (grid-13 is
       meerkolommig >1280) wordt de grafiekwrap de REKKER naar de gedeelde kaartbodem — kolommen stretchen al
       (grid), de kaart vult zijn kolom en de wrap vult de kaart. De x-as ligt zo per constructie op de
       kaartbodem, wat er ook boven groeit (legenda van 1, 2 of 3 regels). Op ≤1280 staan de kaarten onder
       elkaar en blijft de vaste 428/342 gelden (daar zou flex:1 de wrap juist naar min-height laten krimpen). */
    .grid-13.g-rev > .cf-col{display:flex; flex-direction:column}
    .grid-13.g-rev > .cf-col > .hero-card{flex:1 1 auto}
    .grid-13.g-rev .hero-card .nw-wrap.pf-wrap{flex:1 1 0; height:auto; min-height:400px; overflow:hidden}   /* v5.979: flex-BASIS 0 + overflow-slot — met basis "auto" telde de canvas-hoogte mee in de kaarthoogte en voedde elke Chart.js-resize zijn eigen groei (Timo: "je kan het vlak oneindig ver doorrekken door dof heen en weer te klikken"); nu is de wrap-hoogte puur de uitgedeelde rek en kan de canvas nooit meer opduwen */
  }
  /* v5.099: de Compact-knop van Waarde-per-asset is nu absoluut gepositioneerd (.av-dofbtn, boven de grafiek i.p.v. in een .bal-hdr-rij ervoor) -> geen 44px-duw meer, dus de grafiek houdt zijn volle .pf-wrap-hoogte (428px) en loopt vanzelf gelijk met Portfoliowaarde. De oude .bal-hdr+.nw-wrap.pf-wrap-inkorting (v5.024) is daarmee overbodig geworden. */

  /* === Zijbalk (hover-reveal, overlay — verandert de app-layout niet) + Calculator-view (v5.031) === */
  .side-hot{position:fixed; left:0; top:0; width:16px; height:100vh; height:100dvh; z-index:251}   /* v5.377 (MB-15): dvh-variant na de vh-fallback */
  .sidebar{position:fixed; left:0; top:57px; height:calc(100vh - 57px); height:calc(100dvh - 57px); width:193px; z-index:250; box-sizing:border-box;   /* v5.166 (Timo): 214 -> 193px = -10% */   /* v5.377 (MB-15): dvh-variant na de vh-fallback — geen menu-items meer achter de iOS-adresbalk */
    background:var(--surface-2,#171a20); border-right:1px solid var(--line,rgba(255,255,255,0.05));   /* v5.431: fallbacks gesynct met de echte tokens (waren pre-tint-C-resten; dood pad, :root definieert ze altijd) */
    transform:translateX(-100%); transition:transform .22s cubic-bezier(.4,0,.2,1);
    display:flex; flex-direction:column; gap:3px; padding:18px 12px; box-shadow:6px 0 28px rgba(0,0,0,0.4)}
  @media (hover:hover){ .side-hot:hover ~ .sidebar, .sidebar:hover{transform:translateX(0)} }   /* v6.184 (Timo 27-7, telefoon): de hover-onthulling geldt alléén nog op apparaten die ECHT hoveren. Op een touchscherm blijft `:hover` na een tik op een element plakken tot je ergens anders tikt — tik je dus in de uitgeschoven zijbalk (een pagina kiezen) of vlak eronder, dan haalt de app `body.nav-open` netjes weg, begint de zijbalk dicht te schuiven en trekt deze hover-regel hem halverwege weer open. Timo's woorden: "hij gaat dan een stukje weg en komt dan weer terug". `.side-hot` was in v5.376 al uitgezet op `pointer:coarse` met precies deze redenering ("hover bestaat niet op touch"), maar `.sidebar:hover` bleef toen staan — dit maakt het paar compleet. `hover:hover` i.p.v. `not (pointer:coarse)`, want een iPad mét muis hoort de hover-zijbalk gewoon te houden. */
  body.nav-open .sidebar{transform:translateX(0)}   /* v5.376 (MB-1): menuknop-stand — zelfde onthulling als hover, maar via class (touch heeft geen hover) */
  .nav-burger{display:none; align-items:center; justify-content:center; flex:0 0 auto; width:44px; height:44px; background:transparent; border:0; border-radius:8px; color:var(--text-2); cursor:pointer}   /* v5.376 (MB-1): ≥44px raakvlak; kleur/afronding = het .side-nav-btn-recept */
  .nav-burger svg{width:18px; height:18px}
  .nav-burger:active{background:rgba(255,255,255,0.06); color:var(--text)}   /* tik-feedback = de .side-nav-btn:hover-waarden */
  @media (max-width:760px), (pointer:coarse){ .nav-burger{display:inline-flex} }   /* v5.376 (MB-1): alleen smal/touch — desktop-muis houdt de hover-zijbalk en ziet de knop nooit */
  @media (pointer:coarse){ .side-hot{display:none} }   /* v5.376 (MB-1): hover bestaat niet op touch; de 16px-strook (z 251) zou anders alleen tikken op de linkerrand opslokken */
  .side-nav-btn{display:flex; align-items:center; gap:11px; width:100%; padding:9px 11px; border-radius:8px;
    background:transparent; border:0; color:var(--text-2,#94a2b3); font:inherit; font-size:12px; cursor:pointer; text-align:left}
  .side-nav-btn:hover{background:rgba(255,255,255,0.06); color:var(--text,#e7edf4)}
  .side-nav-btn.on{background:rgba(87,195,221,0.10); color:var(--accent)}   /* v5.441: actieve navigatie in dezelfde accent-wash als alle standen */
  .side-nav-btn svg{width:16px; height:16px; flex:none; opacity:0.85}
  /* v6.247 (D-06, Timo 28-7): op de telefoon volgt de menuknop de schaal 9/10/14/38, net als de rest.
     Stond hier op 12px terwijl de menukop `.side-sub` eronder 10/600 doet — een item dus GROTER dan zijn
     eigen kop, en dat is de enige plek in de app waar de rangorde via grootte én gewicht tegelijk omdraaide.
     De v6.245-lijst had .side-nav-btn al op 10 gezet maar staat eerder in het bestand en verloor daar van de
     basisregel hierboven. Het v6.212-commentaar noemt de zijbalk "bewust buiten beeld" (want geen knop in de
     content); dat gold voor de knop-ronde, niet voor de mobiele schaal — Timo's go op de cross-audit heft het op. */
  @media (max-width:760px){ .side-nav-btn{font-size:10px} }
  .side-sub{font-size:10px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-3,#778597); padding:11px 11px 3px}
  .side-apart{margin-top:14px}   /* v5.574 (Timo): Instellingen staat LOS onder de drie gelabelde groepen (beheer, geen inhoudelijke groep). 14px = exact de optische pauze die een .side-sub maakt (3px knop-gap + 11px padding-top tot de koptekst) — zonder deze marge stond hij op 3px van Toeslagen en las hij als deel van de Calculator-groep */
  .calc-frame{display:none; position:fixed; top:57px; left:0; width:100%; height:calc(100% - 57px); height:calc(100dvh - 57px); border:0; z-index:200; background:var(--bg,#07090d)}   /* v5.377 (MB-15): dvh-hoogte met de oude %-regel als fallback — de %-hoogte van een fixed iframe volgt op iOS de adresbalk niet mee */   /* v5.105: een iframe is een replaced element -- inset:57px 0 0 0 stretcht 'm NIET (viel terug op de intrinsieke 300x150, vandaar de piepkleine calculator na v5.100); expliciete width/height zijn verplicht */
  body.view-calc #app, body.view-settings #app, body.view-markets #app, body.view-aflos #app, body.view-kmon #app, body.view-overzicht #app, body.view-zakelijk #app{display:none}   /* v5.586 (mobiele slotronde): view-overzicht ONTBRAK — het dashboard bleef achter het Superoverzicht (v5.524, ná deze regel gebouwd) gewoon door-renderen/ticken; zelfde verbergpatroon als de andere fixed views */
  body.view-calc .calc-frame{display:block}

  /* v5.096: Koersenpagina -- eigen view (body.view-markets), zelfde view-mechaniek als calc/settings (fixed, z-index 200 onder de zijbalk 250) */
  .markets-view{display:none; position:fixed; inset:57px 0 0 0; box-sizing:border-box; z-index:200; background:var(--bg,#07090d); overflow:auto}
  body.view-markets .markets-view{display:block}
  .mkt-wrap{max-width:1800px; margin:0 auto; padding:26px 36px 26px}   /* v5.195 (Timo): onder-padding 64->26 = gelijk aan de 26 boven; samen met de mkt-chart-reservering 26 past de pagina exact (geen scroll-rest), boven-ademruimte == onder-ademruimte */
  .mkt-logo{height:38px; width:auto; display:none; flex:0 0 auto}   /* v5.100: verborgen -- de globale fixed topbar toont het logo al (was dubbel op de Koersenpagina) */
  .mkt-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px}   /* v5.128/166 (Timo): vast 4 breed (12 koersen -> 4x3, precies 3 rijen op fullscreen); minmax(0,1fr) i.p.v. 1fr -> gelijke kolommen (de canvas-intrinsieke breedte rekt anders de middenkolom op); <760px klapt het naar 1 kolom (zie media-query hieronder) */
  @media (max-width:760px){ .mkt-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}   /* v5.697 (Timo 21-7): 2 breed i.p.v. 1. minmax(0,…) net als de basisregel — de canvas-intrinsieke breedte rekt een kale 1fr-kolom op. Kaart wordt 164,5px op 375px; de .mkt-chart-clamp landt daar op zijn 150px-ondergrens, dus de grafiek is bijna vierkant i.p.v. breed-en-laag. Hoogteformule bewust ONgewijzigd: die rekent met 3 rijen op fullscreen en raakt op smal toch al zijn clamp-vloer. */
    /* v5.697 (Timo's keuze uit vier varianten): de 9 periode-knoppen (1D…ALL) wilden 274px in de 123px die een
       2-koloms kaart overlaat — YTD t/m ALL staken tot 130px BUITEN de kaart. Wrappen was de eerste poging maar viel
       af op de ECHTE telefoon: met pointer:coarse worden deze knoppen 44px hoog (de app-brede tapdoel-regel), dus
       3 gewrapte regels = 138px knoppen op een kaart van 390px — ruim een derde van de kaart, en 2410px scrollen
       voor 12 kaarten. Horizontaal vegen houdt de rij op één regel en de kaart op ~268px, met alle periodes
       bereikbaar. Zelfde recept als .tbl-x/#rebal hierboven (overflow-x + touch-scrolling + pan-x). */
    .mkt-rng{flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; touch-action:pan-x; scrollbar-width:none}
    .mkt-rng::-webkit-scrollbar{display:none}   /* de veegbalk zelf verbergen: hij zou 8px van de toch al krappe 123px opeten en op touch verschijnt hij alleen tijdens het vegen */
    .mkt-rng-b{flex-shrink:0}   /* zonder dit persen 9 knoppen zich alsnog in 123px (flex-items krimpen standaard) en scrollt er niets */ .mkt-wrap{padding:16px 16px 48px; padding-bottom:calc(48px + env(safe-area-inset-bottom,0px))} }   /* v5.377 (MB-16): + safe-area-bodem, ná de shorthand zodat die 'm niet platslaat; env() onbekend = alleen die declaratie vervalt (48px blijft) */   /* v5.376 (MB-2): bewust HIER, direct NA de basisregels — zelfde specificiteit, dus de laatste in het bestand wint; in het algemene 760-blok (hoger in het bestand) werden deze mobiele regels (grid én wrap-padding) door de basisregels overschreven en bleef het 4 kolommen van 62px met 36px padding */
  .mkt-card{background:var(--surface); border:1px solid var(--line-2); border-radius:8px; padding:18px 20px; box-shadow:0 24px 50px -32px rgba(0,0,0,0.9); display:flex; flex-direction:column; gap:14px; cursor:pointer; transition:border-color .12s}
  .mkt-card:hover{border-color:rgba(255,255,255,0.18)}   /* v5.138 (Timo): universele hover-randhighlight .18/.15s — zelfde recept als .tk/.kpi/.cf-si (DESIGN §Interactie-trio); tijdens een sleep wint de .dragging-/dragging-active-laag hieronder zoals bij de tegels */
  /* v5.137: koerskaarten klikbaar (tkpop) + sleepbaar — exact het tegel-sleeprecept (.tk r.267-271), zelfde shift-class/motor */
  .mkt-card.dragging{z-index:60; transition:none; box-shadow:0 30px 80px -20px rgba(0,0,0,0.82); border-color:rgba(255,255,255,0.30); cursor:grabbing; opacity:0.97}
  .mkt-card.tk-shift{transition:transform .18s cubic-bezier(.2,.7,.3,1)}
  .mkt-grid.dragging-active{cursor:grabbing}
  .mkt-grid.dragging-active .mkt-card{user-select:none}
  .mkt-grid.dragging-active .mkt-card:not(.dragging):hover{border-color:var(--line-2)}
  /* v5.432 (Timo, thema-besluit C1 "edge-light" 17-7): het licht valt van boven — geldt voor de ZWEVENDE kaart-huid
     (het §4-kaartrecept: .card, kmon-tabelkaart, koerskaarten). Bovenrand een fractie lichter + de vulling loopt de
     eerste ~42% minimaal terug (2,8% wit). Popups/modals (.vpop/.cfg/.eig-panel) en geneste sub-kaarten
     (.schedet-card, geen eigen schaduw) blijven bewust vlak. Tinten ongewijzigd (tint C). Blok staat NÁ de .mkt-card-regels: hun border-shorthand zou een eerdere override resetten (cascade-les v5.432); de hover-standen (hogere specificiteit) verlichten bewust de hele rand. */
  .card, .mkt-card{border-top-color:rgba(255,255,255,0.13)}   /* v5.533 (Timo): .kmon-view .tbl-x eruit — de koersmonitor is nu een vlak aflos-venster, geen edge-light bovenrand */
  .kmon-view .tbl-x, .mkt-card{position:relative}
  .card::before, .mkt-card::before{content:""; position:absolute; inset:0; border-radius:7px; pointer-events:none; background:linear-gradient(180deg, rgba(255,255,255,0.028), transparent 42%)}   /* v5.533 (Timo): .kmon-view .tbl-x eruit — geen bovenglans meer op het koersmonitor-venster (vlak, als het aflosschema) */
  .mkt-c-top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
  .mkt-c-id{display:flex; flex-direction:column; gap:2px; min-width:0}
  .mkt-c-idw{display:flex; align-items:flex-start; gap:9px; min-width:0} /* v5.280 (Timo): koers-icoon + naam/ticker naast elkaar, gap gelijk aan de tegel (.tk-top 9px); .tk-mk zelf blijft 24px zoals de tickerrondjes */
  .mkt-c-nm{font-size:12px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden}
  .mkt-c-nm.nm-clip{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 16px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 16px),transparent)}   /* v5.444/v5.455: zachte fade ALLEEN bij echte overflow (.nm-clip via JS) i.p.v. de harde … -- een naam die past raakt de fade niet */
  .mkt-c-tk{font-size:10px; font-weight:600; letter-spacing:0.06em; color:var(--text-3)} /* v5.269 (Timo): text-transform:uppercase eraf -- zelfde reden als .tk-sub, deze regel toont sinds v5.248/mNAV soms een ECHTE naam */
  .mkt-c-tkline{display:flex; align-items:center; gap:6px}   /* v5.169: ticker-subregel (het stoplicht-bolletje staat sinds v5.286 naast de bovenste titel) */
  .mkt-c-nmline{display:flex; align-items:center; gap:6px; min-width:0} /* v5.286 (Timo): stoplicht-bolletje naast de BOVENSTE (gekozen) titel — naam of ticker — i.p.v. de subregel */
  .mkt-c-pxw{display:flex; flex-direction:column; align-items:flex-end; gap:2px; flex:0 0 auto}
  .mkt-c-px{font-size:20px; font-weight:600; color:var(--text); letter-spacing:-0.02em; font-variant-numeric:tabular-nums}
  .mkt-c-chg{font-size:11px; font-weight:600; font-variant-numeric:tabular-nums}
  .mkt-c-chg.up{color:var(--up)} .mkt-c-chg.down{color:var(--down)} .mkt-c-chg.flat{color:var(--text-3)}
  .mkt-c-rng{font-size:9px; font-weight:500} /* v5.958 (Timo: "subtiel"): het periode-label in de badge op as-label-maat (9px). v5.959 (Timo: "mag gewoon de kleur van het percentage blijven houden"): geen eigen kleur meer — erft up/down/flat van de badge */
  .mkt-rng{display:flex; gap:3px; margin-top:-6px}   /* v5.159 (Timo): periode-knopjes ONDER de x-as (boven de grafiek kaapten ze grafiek-oppervlak), links (kaart-toggle-norm); -6px trekt ze op de as-labels aan (kaart-gap 14px -> 8px onder de as) */
  .mkt-rng-b{font-family:inherit; font-size:9px; font-weight:500; color:var(--text-3); background:transparent; border:1px solid transparent; height:16px; padding:0 6px; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; border-radius:6px; cursor:pointer;   line-height:1}   /* v5.158/159/163: extra compact (16px/8px); v5.163 (Timo, "96 knoppen oogt lomp"): GHOST — in rust alleen de tekst (border transparent i.p.v. weg: geen layout-shift), het knop-silhouet verschijnt pas bij hover; bewuste afwijking van de .nw-b-rusthuid */
  .mkt-rng-b:hover{color:var(--text-2); background:rgba(255,255,255,0.04)}   /* v5.442 (Timo): huisstijl-hover = wash zonder omlijning (de oude silhouet-rand vervalt) */
  .mkt-rng-b.on{color:var(--accent); background:rgba(87,195,221,0.10); border-color:transparent}   /* v5.439: actieve periode als gevulde pill (standenrij-taal); rust blijft ghost (v5.163: "96 knoppen oogt lomp") */   /* actieve stand in rust: alleen accent-tekst */
  .mkt-rng-b.on:hover{background:rgba(87,195,221,0.10); border-color:transparent}   /* actief + hover = de vertrouwde .on-wash van de knop-familie */
  .mkt-chart{position:relative; height:clamp(150px, calc((100vh - 499px) / 3), 300px); height:clamp(150px, calc((100dvh - 499px) / 3), 300px); margin:0 -2px}   /* v5.377 (MB-15): dvh-variant na de vh-fallback — de 499px-formule rekent dan met de wérkelijke viewport op iOS */   /* v5.097/164-166 (Timo): grafiekhoogte VIEWPORT-RELATIEF — vult op fullscreen altijd exact 3 rijen, ongeacht schermhoogte (groter scherm -> hogere grafieken, mooi opgevuld). Formule: (100vh - 499) / 3, met 499 = 83 gridTop (57 topbar + 26 wrap-pad-top) + 354 (3x 118px vaste kaartdelen) + 36 (2x 18px gap) + 26 ademruimte (v5.195: was 10; nu gelijk aan de 26 boven én de wrap-pad-bottom, zodat boven-ademruimte == onder-ademruimte en de pagina exact past); clamp 150-300 vangt extreem kleine/grote schermen. Verving de vaste 180px (3-koloms sweetspot) toen het raster v5.166 naar 4x3 ging (kop weg) */
  .mkt-chart canvas{position:absolute; inset:0; width:100%!important; height:100%!important}
  @media (max-width:760px){
    /* v6.185 (Timo 27-7, screenshot van de koersen op zijn telefoon): "Koersen wil ik 2 breed houden, maar hier moet
       dus nog een flinke lettergrootte verkleining plaatsvinden om dit passend te maken, ook zijn de koersen wat
       rechthoekig nu, mag meer vierkant."
       GEMETEN VOORAF op 390px: kaart 172x266 (verhouding 1,54) en de kop was dichtgedrukt — de prijs eiste 85 van de
       130px kopbreedte op, waardoor de naam op 2px stond terwijl hij er 40 nodig had. Dát is waarom "Bitcoin" achter
       de prijs verdween. De prijs gaat naar 15px en dat is geen willekeurig getal: 15px is in de schaal van ronde A
       de rol "klein bedrag" (tegelprijs, donutwaarde), en een koerskaartprijs is precies dat. De naam zakt mee naar
       11px ("secundair"), zodat hij ruimte terugkrijgt. Allebei omlaag, dus binnen Timo's harde regel. De grafiek
       wordt korter, want die is met 150px veruit de grootste post in de hoogte.
       STAAT HIER, NA de basisregels: een media-query verhoogt de specificiteit niet, dus in het mobiele blok hoger
       in het bestand deden deze drie niets — daar komen .mkt-c-px/.mkt-c-nm/.mkt-chart juist ná. Zelfde volgorde-val
       die .kpi .k-l al twee tegengestelde regels bezorgde (punt 7 in OPENSTAAND.md), en die v5.376 hierboven al eens
       expliciet noemt. */
    /* v6.247 (D-06, Timo 28-7 op de cross-audit): 15 -> 14 en 11 -> 10, want dit blok liet de v6.245-schaal
       hier NOOIT aankomen. De regels hieronder staan later in het bestand dan de v6.245-lijsten (r1633-1642)
       en winnen op bronvolgorde bij gelijke specificiteit — precies de cascade-loterij die A-02 al ving. De
       verkleining van de koerskaarten uit v6.245 heeft dus nooit gewerkt; GEMETEN vóór op 402px: naam 11/600,
       prijs 15/600. De maten hierboven (v6.185) zijn niet fout geweest, ze zijn alleen ingehaald door de
       mobiele schaal 9/10/14/38: een koerskaartprijs is de rol "bedrag" (14) en de naam "vrijwel alles" (10). */
    .mkt-c-px{font-size:14px}
    .mkt-c-nm{font-size:10px}
    /* v6.222 (Timo 27-7: "Vlakjes mogen meer vierkant, zijn wat langgerekt nu. En ik denk dat lettergrootte omlaag
       moet?"). Dit komt BOVENOP de v6.185-winst hierboven (266 -> 206px); zijn melding is van daarna.
       GEMETEN op 390px, de hoogte-opbouw van een kaart van 172x206 (verhouding 1,20):
         14 padding · 47 kop (naam/prijs/ticker/verandering) · 105 GRAFIEK · 16 periodeknoppen · 14 padding
       De grafiek is dus 51% van de hoogte en de enige post die groot genoeg is om iets aan te veranderen; aan de
       tekstregels valt niets te halen zonder ze onleesbaar te maken.
       105 -> 80px brengt de kaart op 172x181, verhouding 1,05 — dat leest als vierkant.
       BEWUST NIET HELEMAAL VIERKANT (dat zou 71px vragen): de grafiek is de reden dat deze kaart bestaat, en onder
       de 80px wordt een koersverloop een streepje. De laatste 9px winnen zou het ding kosten waar je naar kijkt.
       LETTERGROOTTE: zijn vraagteken beantwoord met de audit-uitdraai. Prijs 15 en naam 11 blijven — die zijn in
       v6.185 al bewust gezet en vallen precies op de treden "klein bedrag" en "secundair". Wat wél mis was, is de
       RANGORDE: .mkt-c-chg stond op 11px, dus even groot als de naam, terwijl het percentage bijzaak is naast de
       naam van je positie. Dezelfde platslag als op de tickertegel (v6.221). Naar 10px, één trede lager. */
    .mkt-chart{height:80px}
    .mkt-c-chg{font-size:10px}
    /* Met alleen de kleinere prijs kreeg de naam 23px terwijl "Bitcoin" er 37 vraagt — beter dan 2px, nog niet goed.
       De rest komt uit de tussenruimtes en het muntje, die op een kaart van 172px desktopmaten aanhielden: de kop
       heeft 130px te verdelen en gaf daar 24 + 9 + 10 = 43px van weg aan icoon en gaps. Op de telefoon is dat te
       royaal. Langere namen blijven uitvloeien via de bestaande nm-clip-fade, het app-brede idioom. */
    .mkt-c-top{gap:6px}
    .mkt-c-idw{gap:6px}
    .mkt-card .tk-mk{width:20px; height:20px}
    .mkt-card{padding:14px}   /* de laatste 3px die "Bitcoin" tekortkwam: de kaart hield 20px zij-padding aan, een maat uit de tijd dat hij 400px breed was. Op 172px is dat 23% van de kaart. 14px rondom geeft de kop 144px i.p.v. 130 en maakt de kaart meteen iets vierkanter. */
  }
  .mkt-card.stale{opacity:.55}
  .mkt-slot{display:flex; align-items:center; justify-content:center; min-height:calc(clamp(150px, calc((100vh - 499px) / 3), 300px) + 118px); min-height:calc(clamp(150px, calc((100dvh - 499px) / 3), 300px) + 118px); border:1px dashed var(--line-2); border-radius:8px; background:transparent; cursor:pointer; opacity:.5; transition:opacity .12s,border-color .12s}   /* v5.377 (MB-15): dvh-variant na de vh-fallback (zelfde formule als .mkt-chart) */   /* v5.185 (Timo): lege plek in het koersen-grid = heel licht gestippeld slot; sleep-doel + klikbaar (ticker toevoegen), net als een lege tegel op het dashboard. Idioom van .set-add-tile (dashed line-2), maar lichter (opacity .5 in rust) en zónder "+" (Timo v5.186: die hoeft er niet in). Hoogte volgt de kaart via grid-stretch in een gemengde rij; de min-height (chart-clamp + 118px vaste kaartdelen, exact de .mkt-chart/DESIGN-formule) is het vangnet voor een VOLLEDIG lege rij zodat die net zo hoog blijft als een kaartrij op elk scherm */
  .mkt-slot:hover{opacity:.9; border-color:rgba(255,255,255,0.18)}   /* zelfde hover-highlight-familie als .mkt-card/.tk (.18) */  .mkt-slot.dragging{z-index:60; transition:none; opacity:.9; border-style:solid; border-color:rgba(255,255,255,0.30); cursor:grabbing}   /* leeg slot als sleep-BRON (zoals een lege tegel): zelfde opgetilde staat als .mkt-card.dragging */
  .mkt-slot.tk-shift{transition:transform .18s cubic-bezier(.2,.7,.3,1)}   /* schuift mee tijdens een sleep, net als .mkt-card.tk-shift */
  .mkt-grid.dragging-active .mkt-slot{user-select:none}
  .mkt-grid.dragging-active .mkt-slot:not(.dragging):hover{opacity:.5; border-color:var(--line-2)}   /* geen hover-oplichting mid-sleep (vgl. .mkt-card-regel hierboven) */
  /* v5.193 (Timo): KOERSEN = het dashboard-tickervlak een kwartslag LINKSOM gedraaid. Op vol scherm is het tickervlak 3 kol × 4 rij
     (staand) en dit raster 4 kol × 3 rij (liggend) — exact een 90°-rotatie qua vorm. Beide lezen dezelfde state.tiles-volgorde
     row-major; deze grid-placement legt koerskaart mktcard{ti} (nth-child = tile-index+1) op de GEDRAAIDE cel, zodat een ticker die op
     het dashboard rechtsboven staat op de Koersen linksboven terugkomt. PUUR VISUEEL: DOM-volgorde + kaart-id's blijven op tile-index,
     dus de sleepmotor (positioneel via getBoundingClientRect→_gridPos→_lineShift op state.tiles) leest de gedraaide posities vanzelf en
     muteert state.tiles correct — tegel↔kaart blijft tweerichtings, GEEN JS nodig. Alleen ≥1281px (daaronder is het tickervlak zélf
     4-koloms → geen 90°-relatie; koersen vullen dan row-major uit — Timo: "mikken op vol scherm"). :not(.mkt-empty) laat de
     0-tickers-uitleg (grid-column:1/-1) ongemoeid. Permutatie tile-index→koers-cel = [8,4,0,9,5,1,10,6,2,11,7,3], hier als grid-area rij/kol. */
  /* v6.178 (Timo 27-7) — DEZE REGELS ZIJN IN v5.808 PER ONGELUK GESLOOPT EN NU TERUG. Timo: "Ik kan nu de tickers
     netjes op een rij zetten, maar bij de koersen is alles dan kris kras door elkaar. Dit komt gewoon omdat de
     afmetingen van de grid nou eenmaal anders is." Precies goed gezien: zonder deze placement vullen beide vlakken
     row-major, maar het tickervlak is 3 kolommen en dit raster 4 — dus een rij van drie op het dashboard valt hier
     uit elkaar. DE OORZAAK van het slopen: v5.808 ("dode CSS weg") had `.mkt-empty` op de lijst van dode klassen en
     verwijderde elke regel die zo'n klasse bevat. Maar hier stond hij in een `:not()`, en een dode klasse bínnen
     `:not()` maakt een selector niet dood — die maakt hem juist universeel (`:not(.bestaat-niet)` matcht alles).
     Het commentaar hierboven en de DESIGN.md-alinea bleven al die tijd een rotatie beschrijven die er niet meer was.
     REGEL VOOR ELKE VOLGENDE OPRUIMRONDE: een klasse binnen `:not()`, `:has()` of een ander negatie-/relatie-
     pseudo-element telt NOOIT als bewijs dat een selector dood is. */
  @media (min-width:1281px){
    /* v6.178 (Timo 27-7): "De eerste kolom van de tickers moet de eerste rij van de koersen vormen." Dat is een
       SPIEGELING LANGS DE DIAGONAAL (transpositie), niet de kwartslag linksom van v5.193 — die legde de eerste
       tickerkolom juist op de ONDERSTE koersrij. Alleen de rijnummers zijn omgekeerd (3↔1), de kolommen bleven.
       Kolom k, rij r van het tickervlak (3 kol) → rij k, kolom r van de koersen (4 kol). Dus tile 0/3/6/9 (de
       eerste tickerkolom) vult koersrij 1 van links naar rechts. */
    .mkt-grid > :nth-child(1):not(.mkt-empty){grid-area:1/1} .mkt-grid > :nth-child(2):not(.mkt-empty){grid-area:2/1} .mkt-grid > :nth-child(3):not(.mkt-empty){grid-area:3/1}
    .mkt-grid > :nth-child(4):not(.mkt-empty){grid-area:1/2} .mkt-grid > :nth-child(5):not(.mkt-empty){grid-area:2/2} .mkt-grid > :nth-child(6):not(.mkt-empty){grid-area:3/2}
    .mkt-grid > :nth-child(7):not(.mkt-empty){grid-area:1/3} .mkt-grid > :nth-child(8):not(.mkt-empty){grid-area:2/3} .mkt-grid > :nth-child(9):not(.mkt-empty){grid-area:3/3}
    .mkt-grid > :nth-child(10):not(.mkt-empty){grid-area:1/4} .mkt-grid > :nth-child(11):not(.mkt-empty){grid-area:2/4} .mkt-grid > :nth-child(12):not(.mkt-empty){grid-area:3/4}
  }

  /* ===== v5.377 (MB-V2/V7, DESIGN.md §Mobiel/touch-normen): tap-doelen ≥44px — ALLEEN @media (pointer:coarse), desktop-muis blijft pixel-onveranderd. Bewust het LAATSTE blok in het bestand: zelfde specificiteit als de basisregels, dus de bron-volgorde beslist (de MB-2-cascade-les). ===== */
  @media (pointer:coarse){
    /* (a) knoppen/velden die mogen groeien: min-height wint per CSS-definitie altijd van een vaste height (de 22px-familie), ongeacht specificiteit of volgorde */
    .eig-tab, .cfg select, .be-in, .err .err-ok{min-height:44px}   /* v5.612-kandidaat: de meldingenbalk-actieknop doet mee in de app-brede touch-minimummaat */
    /* v6.252 (D-08, Timo 28-7): de drie zichtbare ZIJBALKKNOPPEN mee in de 44px-norm. GEMETEN vóór op 402px in
       touch-stand: 168 × 34px, dus 10px te laag, en dat zijn de knoppen waarmee je élke keer van view wisselt.
       DIT MOET min-height OP DE KNOP ZELF, geen ::after-vlak zoals bij de 22px-familie: de zijbalk is een
       kolom met gap:3px, dus een vlak van 44px op een knop van 34 hangt 5px over en overlapt 2px met de
       buurknop — dan tik je de verkeerde pagina aan. Groeien kan hier gewoon: het is een verticale lijst met
       ruimte eronder, hij wordt 3 × 10 = 30px langer. De tekst blijft gecentreerd (align-items:center stond er al). */
    .side-nav-btn{min-height:44px}
    /* v6.137 (Timo 27-7: "in de mobiele versie zijn knoppen heel hoog, de breedte lijkt me prima"). De 44px-norm
       gold hierboven op het ZICHTBARE vlak, en dat pakt bij de periodeknopjes verkeerd uit: die zijn 26-33px breed
       en 16px hoog, dus min-height:44px maakt er 108 staande pillen van — bij de actieve knop, die een gevulde
       achtergrond heeft, zie je dat meteen. GEMETEN met pointer:coarse gesimuleerd: 26×16 → 26×44, alle 108 hoger
       dan breed. De norm zelf klopt (44px is de Apple/Google-richtlijn), maar hij hoort op het AANRAAKGEBIED te
       liggen, niet op de tekening. Het onzichtbare ::after-vlak vangt de tik; de knop blijft 16px hoog.
       De rest van de familie hierboven houdt bewust min-height: dat zijn bredere knoppen (68×22 en groter) die
       met 44px hoogte niet vervormen. */
    .mkt-rng{min-height:44px; align-items:center}   /* de rij moet die 44px WEL hebben: hij is een overflow-x-scroller en clipt daarmee ook verticaal — met een rij van 16px werd het tapvlak hieronder weggeknipt (gemeten: tik 15px boven het midden raakte de knop niet) */
    .mkt-rng-b{min-height:0; position:relative}
    .mkt-rng-b::after{content:""; position:absolute; left:0; right:0; top:50%; height:44px; transform:translateY(-50%)}   /* onzichtbaar tapvlak; GEMETEN met pointer:coarse gesimuleerd: knop blijft 26×16, en een tik op 15px én 20px boven/onder het midden landt op de knop */
    /* v6.176 (Timo 27-7: "Account knop is te hoog, YTD knop is te hoog op mobiele versie") — DE HELE 22px-FAMILIE
       KRIJGT HET ::after-RECEPT, niet alleen de periodeknopjes. v6.137 haalde vanmorgen `.mkt-rng-b` uit de
       min-height-lijst hierboven met precies deze redenering, maar hield de rest er bewust in: "dat zijn bredere
       knoppen (68×22 en groter) die met 44px hoogte niet vervormen". Timo's waarneming zegt iets anders — hij noemt
       juist de Account-knop (68×22) en de YTD-knop (.nw-b, 22px) met name. Gemeten op de echte knop: zonder de
       touch-norm 22px, mét de norm 44px, dus precies een verdubbeling van de zichtbare hoogte.
       Zelfde afweging als bij .mkt-rng-b: de 44px-richtlijn hoort op het AANRAAKGEBIED, niet op de tekening. Het
       ::after-vlak is transparant, ligt gecentreerd over de knop en is een kind van de knop zelf, dus een tik erop
       telt als tik op de knop. Alleen de vaste-22px-familie; .eig-tab, .cfg select, .be-in en .err-ok houden hun
       min-height, want die hebben geen vaste hoogte en groeien netjes mee (een invoerveld van 44px is comfortabel,
       geen vervorming). */
    .nw-b, .cl-sel, .cl-tog, .pd-tog, .cl-ftype, .ico-btn{min-height:0; position:relative}
    .nw-b::after, .cl-sel::after, .cl-tog::after, .pd-tog::after, .cl-ftype::after, .ico-btn::after{content:""; position:absolute; left:0; right:0; top:50%; height:44px; transform:translateY(-50%)}
    /* v6.215 (Timo 27-7, met screenshot: "Deze lettergroottes en pijltjesknoppen dan ook nog goed zetten") —
       DERDE KEER DEZELFDE FOUT, en nu ook hier rechtgezet. De jaarpijltjes stonden nog op de OUDE aanpak:
       min-height/min-width:44px, dus het ZICHTBARE vlak verdubbelde van 22×22 naar 44×44 en je kreeg twee grote
       lege blokken naast "2026". v6.137 (.mkt-rng-b) en v6.176 (de hele 22px-familie) hebben die afweging al
       gemaakt: de 44px-richtlijn hoort op het AANRAAKGEBIED, niet op de tekening. Zelfde ::after-recept, alleen
       hier op BEIDE assen gecentreerd, want dit is een vierkant knopje — left/right:0 zoals bij de andere zou het
       tapvlak op 22px breed houden. */
    .nvm-arrow{min-height:0; min-width:0; position:relative}
    .nvm-arrow::after{content:""; position:absolute; left:50%; top:50%; width:44px; height:44px; transform:translate(-50%,-50%)}
    /* ===== v6.244 (D-01, Timo 28-7): DE KLEINE DOELEN KRIJGEN ZELF EEN TIKVLAK ============================
       Zijn melding: "Als ik op bezittingen wil klikken, klikt hij op de toon alles knop. Alsof het responsieve
       gebied veel breder is dan de echte knop, dit merkte ik al op meerdere plekken in de mobiele versie."
       GEMETEN met elementFromPoint op 390px in touch-stand, zijn eigen data: van 26px tot 10px BOVEN het midden
       van "Bezittingen" land je op de knop "Toon alles"; alleen een band van 12px is van de titel zelf. De knop
       tekent 22px maar claimt er 44 (het ::after-recept van v6.176), de titel claimt precies zijn 12px tekst, en
       er zit 12px tussen. Het hele zichtbare gat is dus van de knop.
       VIJF PLEKKEN, niet één. Een sweep over alle 193 klikbare elementen van de mobiele dashboardview gaf vijf
       paren waar een 44px-vlak binnen 6px vóór het volgende doel stopt: jaarpijltje -> "Posities assets" (gat 0),
       "Kasstroom" -> "Inkomsten" (1), "Zakelijk" -> "Inkomsten overig" (1), "Toon alles" -> "Bezittingen" (1),
       "Toon alles" -> "Assets" (5,5).
       WAAROM HET RIJ-RECEPT HIER NIET GENOEG IS. v6.217 gaf .nvm-nav min-height:44px om precies dit op te lossen
       bij het jaarpijltje, en toch is het gat daar 0. Dat is geen fout in die versie maar een eigenschap: een rij
       van 44px met een vlak van 44px laat per definitie geen marge over. Overlap is er dan niet meer, maar een
       dode zone ook niet, en met een vinger van ~9mm is een grens op 0px een muntje opgooien.
       DE OPLOSSING IS DE ANDERE KANT: het kleine doel krijgt zelf een vlak, en dat wint in de betwiste band.
       .swaptitle (13 stuks op de mobiele dashboardview) en .htleg-i (15 stuks) zijn echte klikdoelen van 12-13px
       hoog zonder enige vergroting; zij waren de kleinste doelen op het scherm.
       DE MAAT IS 32px EN NIET 44, en dat is gerekend, niet gekozen: 32px geeft 10px boven en onder de tekst, en
       10px is bij alle vijf de paren nog nét binnen het gat tot de GETEKENDE onderkant van de knop erboven (die
       ligt daar 12 tot 16,5px hoger). Bij 44px zou het vlak 16px omhoog reiken en de onderste pixels van de
       zichtbare knop opeten, en dan heb je het probleem alleen omgedraaid.
       Z-INDEX IN PLAATS VAN DOM-VOLGORDE: het vlak wint bewust via z-index en niet via "staat later in de DOM",
       want dat laatste is een aanname die bij de volgende herbouw van een kaart stil kan omvallen.
       TERUGWEG: dit blok weg; dan zijn de titels weer 12px hoog als tikdoel.
       ALLEEN .swaptitle, EN .htleg-i BEWUST NIET — dat is gemeten, niet gekozen. De eerste poging nam de
       legenda-items mee, want twee van de vijf paren eindigen daar. GEMETEN ná die poging: "Code 49", "Goud" en
       "ZilverKG" zakten van 15px naar 11px, dus MINDER dan hun eigen tekst hoog is. Die items staan namelijk
       maar 17px uit elkaar, en met een vlak van 32px eten ze elkaar op in plaats van de knop erboven. Een vlak
       mag nooit over de getekende tekst van de buurman vallen, en bij een pitch van 17px is er simpelweg geen
       ruimte: 15px tekst in 17px hoogte laat 2px over. Dat is een ontwerpgrens, geen fout, en die twee paren
       blijven dus staan zoals ze waren (de knop erboven stopt 1px vóór het item; het item houdt zijn eigen 15px).
       Wie dit ooit alsnog wil oplossen: dat kan alleen asymmetrisch, want het eerste item van zo'n lijst mag wél
       omhoog groeien en niet omlaag. */
    .swaptitle{position:relative; display:inline-block}
    .swaptitle::after{content:""; position:absolute; left:0; right:0; top:50%; height:32px; transform:translateY(-50%); z-index:1}
    /* v6.217 (Timo 27-7: "onder het periode icoontje klikken laat het icoontje gewoon werken, beetje slordig dus").
       Zijn melding ging over de koersen-tab, maar de MEETRONDE over de hele knopfamilie vond precies één plek waar
       een onzichtbaar tapvlak over een ánder klikbaar element valt: het jaarpijltje. Zijn 44px-vlak steekt 11px
       boven de 22px-knop uit en overlapt daar de kolomtitel "Posities assets" — die is zelf klikbaar (swaptitle),
       en omdat het ::after een gepositioneerd pseudo-element is ligt het erbovenop. Een tik op de bovenrand van die
       titel verschoof dus stil het jaar.
       DE OPLOSSING IS HET BESTAANDE RECEPT, niet een nieuw: `.mkt-rng` kreeg in v6.137 om exact deze reden
       `min-height:44px` ("de rij moet die 44px WEL hebben"). Met de rij op tapvlakhoogte valt het vlak binnen zijn
       eigen regel en raakt het de buren niet meer. De knop zelf blijft 22×22 — dat is de v6.215-winst en die
       verandert hier niet. Kosten: de maandcijfers-kop wordt op touch 22px hoger. */
    .nvm-nav{min-height:44px}
    .vpop .vp-row{min-height:36px}   /* v6.190 (Timo 27-7: "nou het is nu wel belachelijk ver uit elkaar he"). Stond op 44px, de Apple-tapnorm uit MB-V2. Die norm is een ONDERGRENS voor een los knopje, maar hier is elke rij een volle-breedte <button> van ~230px: je raakt hem met je duim ook op 36px moeiteloos, want de breedte doet het werk. 44 -> 36 haalt 8px per rij weg, dus een venster met vier keuzes wordt 32px compacter. Onder de 36 zou ik niet gaan; dan begint de rij wél krap te worden voor een grote vinger. */   /* MB-V2 ".vp-sw": de RIJ is de echte <button> en dus het tap-doel — de 30×17-schuifpil zelf is puur visueel en blijft op maat (een 44px-pil zou het ontwerp breken); dekt meteen álle popup-keuzerijen */
    /* (b) kleine iconen: raakvlak vergroten zónder het glyph te vergroten — onzichtbare ::before-overlay (de globale *{box-sizing:border-box} r18 maakt padding+negatieve-marge hier ongeschikt: padding zou het vaste 15px-glyphdoosje van bínnen opeten) */
    .mh-f, .cl-f, .cl-del, .set-item-del, .hyp-extra-del, .hyp-extra-add{position:relative}   /* overlay-anker; de absolute .vg-pane-variant van .set-item-del (r155, 0,3,0) blijft absolute en is daarmee al een geldig anker */
    .mh-f::before, .cl-f::before, .cl-del::before, .set-item-del::before, .hyp-extra-del::before, .hyp-extra-add::before{content:""; position:absolute; inset:-14px}   /* ~15px-glyph + 2×14 ≈ 43px raakvlak */
    .mh-f::before,.cl-f::before{inset:-12px -4px}   /* COMPROMIS kolomkoppen: de th zélf is óók klikdoel (dof/sorteer; het maandlabel staat 5px verderop) — horizontaal ingeperkt tot ~23px zodat de overlay geen label-taps kaapt; verticaal ~39px = het max haalbare */
    .set-item-del::before{inset:-14px -10px -14px -4px}   /* COMPROMIS: links plakt het naamveld tegen het kruisje — 4px linksmarge voorkomt dat de veldrand een deel/lening verwijdert; ~23×43 */
    .hyp-extra-del::before{inset:-14px -14px -14px -4px}   /* COMPROMIS: links plakt het maand/jaar-veld eraan — zelfde 4px-rem; ~31×43 */
    .hyp-extra-add::before{inset:-8px -14px -14px -14px}   /* COMPROMIS: erboven staat de laatste velden-rij (gap 4px) — top ingekort zodat een tap op de veld-onderrand geen "+" wordt; ~40×37 */
    /* (T3/MB-V7) verwijderkruisje niet meer hover-verstopt: touch kent geen hover — altijd gedempt zichtbaar (de .set-item-del-opacity-.6-conventie); rij-hover (r439) en :hover (r442) lichten 'm nog gewoon op */
    .cl-del{opacity:.6}
  }

/* v5.501 (Timo 18-7, audit X-6 / klant op gedeeld apparaat): auto-logout-waarschuwing — overlay boven alles (z 500), thema-consistent (surface/line/accent-tokens) */
.idle-warn{position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;background:rgba(4,6,10,0.66);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.idle-warn-box{width:min(360px,calc(100vw - 40px));box-sizing:border-box;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);padding:22px 24px;box-shadow:0 20px 60px rgba(0,0,0,0.6);text-align:center}
.idle-warn-t{font-size:15px;font-weight:600;color:var(--text);margin:0 0 8px}
.idle-warn-s{font-size:12px;line-height:1.5;color:var(--text-2);margin:0 0 18px}
.idle-warn-s b{color:var(--accent);font-weight:600;font-variant-numeric:tabular-nums}   /* v6.247 (D-06): font-weight EXPLICIET. Dit is de secondeteller, een kale <b> zonder gewichtsregel, en die erfde de browser-default 700 — samen met de statusregel in de kop het enige 700 van de hele app, terwijl DESIGN.md §3 zegt dat 700 niet meer bestaat (v6.182). Geen keuze geweest, gewoon nooit opgemerkt: gemeten op 402px én 1280px stond hij op 700. */
.idle-warn-btn{appearance:none;-webkit-appearance:none;border:1px solid var(--accent-2);background:var(--accent-soft);color:var(--text);font-size:12px;font-weight:600;padding:9px 20px;border-radius:var(--r-sm);cursor:pointer;transition:background .12s}
.idle-warn-btn:hover{background:rgba(87,195,221,0.18)}
/* v6.247 (D-06, Timo 28-7): de idle-waarschuwing volgt op de telefoon de schaal 9/10/14/38 — titel 14, tekst
   en knop 10. De v6.245-lijst had dit al zo bedoeld, maar stond eerder in het bestand dan de drie basisregels
   hierboven en verloor op bronvolgorde; gemeten vóór: 15 / 12 / 12. Deze override staat er daarom ná. Op
   DESKTOP blijft alles zoals het was (15/12/12) — daar is 12px de rol "lopende tekst", zie DESIGN.md §3. */
@media (max-width:760px){ .idle-warn-t{font-size:14px} .idle-warn-s,.idle-warn-btn{font-size:10px} }
  /* v5.703 (Timo 21-7): ISIN-kolom in de koersmonitor. Tabular-nums + nowrap zodat de 12 tekens niet afbreken en
     alle codes onder elkaar uitlijnen; zelfde gedempte tint als de ticker-kolom, want het is een technisch veld
     dat je opzoekt, niet iets waar je op leest. */
  .kmon-view .kmon-tbl td.kmon-isin, .kmon-view .kmon-tbl th.kmon-isin{white-space:nowrap}
  /* v5.708: de v5.703-regel die hier 10px padding zette is WEG. Die brak de v5.467-norm (r246: links-uitgelijnde
     cellen springen 30px in zodat ze uitlijnen met het LABEL van de kop, niet met het filter-icoon ervoor). Gemeten:
     bij Naam en Ticker stond de inhoud 20px rechts van de koptekst, bij ISIN 0px — precies het "onlogisch verdeeld"
     dat Timo zag. ISIN volgt nu gewoon de norm; de kolom is daarvoor 1% verbreed. */
  .kmon-tbl td.kmon-isin{color:var(--text-3); font-variant-numeric:tabular-nums; font-size:11px; letter-spacing:0.02em}

  /* ===== v6.137 (Timo 27-7): GRAFIEKHOOGTES OP TELEFOONBREEDTE — bewust het LAATSTE blok, net als het
     pointer:coarse-blok hierboven. De hoogtes staan elders in dit bestand VAST in px (.nw-wrap 300/230,
     .bar-wrap 330, .nw-wrap.pf-wrap 428/342) terwijl de breedte meeschaalt; op 375px kantelt de verhouding
     daardoor om en wordt de grafiek hóger dan breed. Timo: "de vlakken met grafieken ogen vaak te lang
     waardoor de grafiek er langgerekt uitziet."
     GEMETEN breedte × hoogte (verhouding), vóór:
       netto vermogen   1990px 933×230 (4,06)  →  375px 293×230 (1,27)
       maandbalken      1990px 933×330 (2,83)  →  375px 293×330 (0,89)  ← hóger dan breed
       portfoliowaarde  1990px 933×400 (2,33)  →  375px 293×342 (0,86)  ← hóger dan breed
     Een lijngrafiek die hoger is dan breed rekt zijn verticale as uit — kleine schommelingen ogen dramatisch.
     Deze hoogtes brengen de verhouding op 1,4 tot 1,6: dezelfde orde als de donut (1,59), die er wél goed uitzag.
     EERSTE POGING STOND IN HET 480px-BLOK BIJ DE TICKERTEGELS EN DEED NIETS: dat blok staat vóór .nw-wrap (r596)
     en .hero-card .nw-wrap (r633), dus bij gelijke specificiteit won de latere regel. Gemeten: hoogte bleef 230px.
     Vandaar hier, achteraan. ===== */
  @media (max-width:480px){
    .hero-card .nw-wrap{min-height:0; height:190px}
    .nw-wrap{height:190px}
    .bar-wrap{height:200px}
    .cf-card .bar-wrap{min-height:0; height:200px}
    .hero-card .nw-wrap.pf-wrap{height:210px}
  }

  /* ===== HALFSCHERM-VENSTER (761–880px) — v6.171, Timo 27-7 =====================================
     AANLEIDING. Timo zette de app naast een ander venster ("half scherm mode") en stuurde zes screenshots:
     "Overzicht kpi's kunnen denk ik 3 breed · Allocatie cirkels kunnen naast elkaar · Indeling van de tickers is
     onlogisch tov hoe het in full screen staat · Balans is gewoon echt een grote mess · Maandcijfers heeft ook nog
     veel werk nodig · De zij kolom werkt ook niet in half scherm modus."
     DE WORTEL, gemeten op zijn eigen venster (855x930, dpr 2): de app kent breekpunten op 1280, 880, 760, 700, 600
     en 480, maar tussen 760 en 880 gebeurt er niets eigens. Een halfscherm-venster valt dus NET onder de 880-grens
     en krijgt de volle TELEFOON-indeling terwijl er bijna 900px is. Het commentaar bij de 2-koloms KPI-regel
     rekent expliciet met 375px ("51,5px over voor label + bedrag") — dat klopt voor een telefoon en is veel te
     streng voor dit venster, waar per tegel ruim 200px beschikbaar is.
     Dit blok is dus geen nieuwe layout maar het GAT dichten: alles wat op 855px ruimte heeft, krijgt die ruimte,
     en onder 760 verandert er niets (daar begint de echte telefoon-behandeling). Bewust het LAATSTE blok in het
     bestand, zelfde specificiteit als de 880-regels hierboven, dus de bron-volgorde beslist — dezelfde
     MB-2-cascade-les als bij het pointer:coarse-blok. */
  @media (min-width:761px) and (max-width:880px){

    /* 1. DE NAVIGATIE WAS ONBEREIKBAAR, en dat is de zwaarste van de zes.
       De zijbalk staat altijd weggeschoven (translateX(-100%)) en wordt onthuld door hover op een 16px-strook
       (.side-hot) OF door de menuknop (body.nav-open). Die menuknop verschijnt pas bij max-width:760px. Op 855px
       is er dus geen zichtbare knop en moet je weten dat er een onzichtbare strook van 16px aan de vensterrand
       zit. GEMETEN op Timo's venster: sidebar op x=-193, .nav-burger display:none, en met body.nav-open erbij
       schuift hij netjes naar x=0 (met transition:none, want anders meet je een lopende transitie). De route
       werkte dus, alleen de knop ontbrak. */
    .nav-burger{display:inline-flex}

    /* 2. DE KPI-GRIDS: 2 -> 3 KOLOMMEN. Raakt Overzicht, Balans én Waarde per asset in één keer, want die delen
       .bal-sum. Timo zag het bij alle drie ("kunnen denk ik 3 breed", "kpi's balans kunnen waarschijnlijk ook 3
       breed", "hier moeten de kpi's ook 3 breed kunnen"). Met 3 kolommen op 855px houdt elke tegel ruim 200px
       over voor label + bedrag, waar de 375px-rekensom op 51,5px uitkwam. Meteen weg is de scheve staart: bij
       drie tegels stond de derde in zijn eentje op een tweede rij. */
    .bal-sum{grid-template-columns:repeat(3,minmax(0,1fr))}

    /* 3. DE ALLOCATIE-DONUTS NAAST ELKAAR ("Allocatie cirkels kunnen naast elkaar"). De 880-regel zet .dh-view op
       één kolom en rekt de donut naar 100%; hier weer twee kolommen van gelijke breedte. Niet de desktop-vorm
       (die zet de KPI-kolom ernaast met een vaste breedte), maar twee gelijke helften — dat is wat er op deze
       breedte past. */
    .donut-pair, .bal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .dh-view{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:16px}
    .dh-view .donut-stage{width:100%}

    /* 3b. DE TICKERTEGELS ("Indeling van de tickers is ook onlogisch tov hoe het in full screen staat").
       GEMETEN: .kpis stond op 2 kolommen van 404,5px — een tickertegel draagt een logo, een naam, een code en een
       koers, en heeft aan de helft daarvan genoeg; op 404px staat alles verloren in het midden en vallen de lege
       slots extra op. Twaalf slots delen bovendien netjes door 3 (drie rijen van vier vult niet, vier rijen van
       drie wel), dus 3 kolommen geeft ook een vol rooster in plaats van een halve laatste rij. */
    .kpis{grid-template-columns:repeat(3,minmax(0,1fr))}

    /* 4. DE BREDE TABELLEN (Maandcijfers, Posities Box 3) — "Maandcijfers heeft ook nog veel werk nodig".
       GEMETEN: 14 kolommen in 773px, en de bedragen braken over twee regels ("€" boven, "20.638" eronder); in
       Posities Box 3 zelfs over drie ("€ 5" / ".36" / "0") en tegen elkaar aan plakkend.
       Timo's eigen richting, en de juiste: "de logische oplossing is om lettergrootte simpelweg kleiner te maken
       zodat het blijft passen, zeker bij de maandcijfers". Dus de cijfers krimpen 12 -> 10px en krijgen nowrap,
       zodat een bedrag NOOIT meer afbreekt. nowrap is hier de harde eis: zonder die regel kiest de browser bij
       ruimtegebrek altijd voor afbreken in plaats van voor een smallere kolom (dezelfde table-layout-val als in
       v6.151-156). Blijft het dan nog te breed, dan vangt overflow-x het op in plaats van de tekst te slopen —
       dat is de bestaande .tbl-x-behandeling, die tot nu toe pas onder 760px aanstond. */
    .tbl-x{overflow-x:auto; -webkit-overflow-scrolling:touch; touch-action:pan-x}
    .tbl-x .dtable{font-size:10px}
    .tbl-x .dtable td, .tbl-x .dtable th{white-space:nowrap}

    /* 5. DE TOPBALK (v6.175, Timo 27-7: "Ook nog wat rommelig hier", met een screenshot van de balk op 855px).
       Deze bleef in de v6.171-ronde buiten schot en was het laatste dat nog brak. GEMETEN op zijn venster:
       vier tekstdragers liepen over meerdere regels omdat ze minder breedte kregen dan hun inhoud vraagt —
       klok "27 juli 2026 · 15:10:52" 87px voor ~150px tekst (3 regels), status "offline" 51px (3 regels),
       klantnaam (2 regels) en de meldingspil "1 melding" 42px (2 regels). De opruiming die dit voorkomt bestond
       al, maar begon pas bij max-width:760px — hetzelfde gat als de rest van dit blok.
       Hier geen elementen wegstrepen zoals op de telefoon: op 855px is er ruimte zat zodra de tekst niet meer
       mag afbreken. Alleen het status-WOORD gaat weg (het bolletje draagt dezelfde informatie en scheelt ~45px),
       zodat een lange klantnaam speling houdt; loopt die alsnog vol, dan vloeit hij uit via de bestaande
       nm-clip-fade in plaats van te breken. */
    .hd{gap:10px}
    .brand{min-width:0}
    .brand .wm{min-width:0; overflow:hidden; white-space:nowrap}
    .hd-stat{flex:0 0 auto}
    .hd-stat b{display:none}
    .clock{white-space:nowrap; padding:0 9px}
    .meld-pil{flex:0 0 auto}
    .meld-pil-n{white-space:nowrap}
  }