/* Charme Nouveau — privé-apps · DESIGNSYSTEEM (laadt na tokens.css)
   Telefoon eerst; tablet (≥ 768) krijgt een rail, computer (≥ 1180) een rail met labels. De balken: css/shell.css.
   Geen inline stijlen in de opmaak (CSP style-src 'self'); dynamische maten gaan via CSSOM-variabelen.
   Schermspecifieke stijlen staan in eigen bestanden (beheer.css, betalen.css, boek.css, aangifte.css) en gebruiken
   alleen --cn-* tokens en de bouwstenen hieronder.

   1 basis · 2 shell · 3 kop van een scherm · 4 kaarten · 5 knoppen · 6 chips, badges · 7 velden · 8 segment
   9 lijsten · 10 tabellen (grootboek) · 11 cijfertegels · 12 sheet (dialog) · 13 toast · 14 leeg, laden
   15 stappen · 16 hulpklassen · 17 beweging · 18 breekpunten */

/* =========================================================== 1. basis */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--cn-bg); }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; overflow-x: clip;
  background: var(--cn-bg) var(--cn-papier-beeld); color: var(--cn-text);
  font: 400 var(--cn-fs)/1.5 var(--cn-f-sans); font-kerning: normal;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}
body::before { /* papierkorrel (decoratief, zoals de site) */
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  opacity: var(--cn-grain-opacity); mix-blend-mode: var(--cn-grain-blend);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .09  0 0 0 0 .08  0 0 0 0 .08  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
/* Boekhouding had hier een fijne kasboeklijn over de hele achtergrond. Weg op Jordy's verzoek (22 okt): "als deze lijntjes niet op de
   achtergrond is, het beter leest" (BESLUITEN-JORDY 18). Het verschil tussen de tabs zit nu in de gekozen tab bovenin. */
/* koppen: CN Kop (Newsreader 36/400), nooit onder 24 px; kleiner is het CN Tekst 500 */
h1, h2, h3, h4 { font-family: var(--cn-f-serif); font-weight: 400; margin: 0; line-height: 1.12; letter-spacing: -.006em; text-wrap: balance; color: var(--cn-text); }
h1 { font-size: 28px; }
h2 { font-size: 24px; }
h3 { font: 500 17px/1.3 var(--cn-f-sans); letter-spacing: 0; }
h4 { font: 500 var(--cn-fs-s)/1.3 var(--cn-f-sans); letter-spacing: 0; }
p { margin: 0 0 .6em; text-wrap: pretty; }
/* ook in lijsten, tabellen en regels buiten een <p>: geen los woord op de laatste regel (23 okt, keuring letter A). Erft door;
   een element met eigen white-space: nowrap houdt dat, koppen houden balance. */
main.view { text-wrap: pretty; }
em, .turn { font-family: var(--cn-f-serif); font-style: italic; font-weight: 400; }
/* Boekhouding leest in CN Tekst (BESLUITEN-JORDY 35, letter A, 23 okt): nadruk in een zin met gewicht 500, geen cursieve serif.
   Titels houden hun wending (.turn, h1/h2 em), net als de vellen zelf (het factuurvel .fv/.fv-mini en het A4 .bk-a4). De dagbrief
   (beide kanten) staat in aangifte.css §0; de rest van de Boekhouding-letter in aangifte.css, boek.css en kwartalen.css. */
html[data-app="boek"] :where(p, li, dd, dt, td, .callout) em:where(:not(.turn, .fv *, .fv-mini *, .bk-a4 *)) { font-family: inherit; font-style: normal; font-weight: 500; }
strong, b { font-weight: 500; }
a { color: var(--cn-accent-ink); text-underline-offset: .2em; text-decoration-thickness: 1px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img, svg { display: block; max-width: 100%; }
.num, .money, td.n, .tnum { font-variant-numeric: tabular-nums lining-nums; font-family: var(--cn-f-num); }
::selection { background: var(--cn-accent-tint-2); }
:focus-visible { outline: 2px solid var(--cn-focus); outline-offset: 3px; border-radius: 8px; }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.noscript { padding: 24px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--cn-dark); color: var(--cn-on-dark); padding: 10px 16px; border-radius: var(--cn-pill); }
.skip:focus { top: 12px; }
/* iconen: 20 × 20, lijn 2,1, ronde uiteinden (de familie van de site) */
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.icon.s { width: 18px; height: 18px; stroke-width: 2.2; }
.icon.l { width: 28px; height: 28px; stroke-width: 1.6; }

/* =========================================================== 2. schil
   De bovenbalk, de onderbalk en de rail staan in css/shell.css (ONTWERP-V2 §3). Hier alleen de ruimte van het scherm zelf. */
.app { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; }
main.view {
  position: relative; max-width: 1180px; margin: 0 auto; overflow-wrap: break-word;
  padding: 8px var(--cn-gut) calc(var(--cn-nav-h) + var(--cn-safe-b) + 40px);
}
main.view:focus { outline: none; }
.vtitle[tabindex="-1"]:focus { outline: none; } /* focus na navigatie is voor schermlezers; geen rand */
.demo-foot { margin: 48px 0 0; text-align: center; font-size: var(--cn-fs-xs); color: var(--cn-faint); animation: none !important; }
.iconbtn { width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center; border: 0; background: transparent; color: var(--cn-text); transition: background var(--cn-t-fast); }
.iconbtn:hover { background: var(--cn-accent-tint); }
.demo-flag { font-size: var(--cn-fs-label); letter-spacing: .08em; text-transform: uppercase; color: var(--cn-warn-ink); border: 1px solid currentColor; border-radius: var(--cn-pill); padding: 3px 9px; white-space: nowrap; }

/* =========================================================== 3. kop van een scherm
   "Relaties en hun sites": CN Kop 28 px (tablet 34), de wending cursief; een label erboven in hoofdletters, spaarzaam. */
.vhead { padding: 22px 0 16px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.vhead .titles { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; } /* een heel lang e-mailadres of woord breekt af (R-30b) */
.eyebrow { font: 500 var(--cn-fs-label)/1.4 var(--cn-f-sans); letter-spacing: var(--cn-track); text-transform: uppercase; color: var(--cn-muted); margin: 0 0 8px; }
.vhead h1 { font-size: 28px; line-height: 1.1; }
.vhead h1 em { color: var(--cn-text); }
.vhead .lede { color: var(--cn-text-2); margin: 10px 0 0; max-width: 60ch; }
html[data-app="boek"] .vhead .lede { font-size: 16.5px; line-height: 1.55; }
.vhead .actions { display: flex; flex-wrap: wrap; gap: 8px; }
.back { display: inline-flex; align-items: center; gap: 4px; min-height: var(--cn-tap); position: relative; z-index: 1; color: var(--cn-muted); text-decoration: none; font-size: var(--cn-fs-s); margin: 0 0 4px -6px; padding: 0 10px 0 4px; border-radius: var(--cn-pill); }
.back:hover { color: var(--cn-text); background: var(--cn-accent-tint); }
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 30px 0 12px; }
.section-title h2 { font-size: 24px; }
.section-title .more { font-size: var(--cn-fs-s); }
@media (min-width: 768px) { .vhead h1 { font-size: 34px; } .vhead { padding-top: 30px; } }

/* =========================================================== 4. kaarten */
.card { background: var(--cn-card); border: 1px solid var(--cn-hair); border-radius: var(--cn-r); box-shadow: var(--cn-shadow-1); padding: 18px; position: relative; }
.card + .card { margin-top: 12px; }
.card.flat { box-shadow: none; }
.card.sunk { background: var(--cn-bg-2); box-shadow: none; }
.card.accent { background: var(--cn-solid); color: var(--cn-on-accent); border-color: transparent; }
.card.accent .muted, .card.accent .eyebrow { color: color-mix(in srgb, var(--cn-on-accent) 78%, transparent); }
.card h3 { margin-bottom: 6px; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.card-head h3 { margin: 0; }
.grid { display: grid; gap: 12px; }
.grid.two { grid-template-columns: 1fr; }
.grid.three { grid-template-columns: 1fr; }
.stack > * + * { margin-top: 12px; }
.divider { height: 1px; background: var(--cn-line); border: 0; margin: 14px 0; }
.note { font-size: var(--cn-fs-s); color: var(--cn-muted); }
html[data-app="boek"] .note { line-height: 1.55; }
.note.demo { display: flex; gap: 8px; align-items: flex-start; }
.callout { border-radius: var(--cn-r-s); padding: 12px 14px; background: var(--cn-accent-tint); color: var(--cn-text); font-size: var(--cn-fs-s); display: flex; gap: 10px; align-items: flex-start; }
.callout.warn { background: var(--cn-warn-tint); }
.callout.bad { background: var(--cn-bad-tint); }
.callout.ok { background: var(--cn-ok-tint); }
.callout .icon { margin-top: 1px; }
.callout.warn .icon { color: var(--cn-warn); }
.callout.bad .icon { color: var(--cn-bad); }
.callout.ok .icon { color: var(--cn-ok); }

/* =========================================================== 5. knoppen */
.btn {
  min-height: 46px; padding: 10px 20px; font-weight: 500; border-radius: var(--cn-pill); border: 1px solid var(--cn-line-2);
  background: var(--cn-field); color: var(--cn-text); display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 15px; letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  transition: background var(--cn-t-fast), border-color var(--cn-t-fast), transform var(--cn-t-fast) var(--cn-snap);
}
.btn:hover { border-color: var(--cn-text); }
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--cn-solid); color: var(--cn-on-accent); border-color: transparent; }
.btn.primary:hover { background: var(--cn-solid-hover); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--cn-accent-ink); padding-left: 12px; padding-right: 12px; }
.btn.ghost:hover { background: var(--cn-accent-tint); }
.btn.danger { color: var(--cn-bad); border-color: color-mix(in srgb, var(--cn-bad) 45%, transparent); }
.btn.small { min-height: 38px; padding: 6px 14px; font-size: var(--cn-fs-xs); }
.btn.block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 1; color: var(--cn-faint); background: var(--cn-bg-2); border-color: var(--cn-hair); cursor: not-allowed; transform: none; }
.btn .icon { width: 20px; height: 20px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-row.end { justify-content: flex-end; }
.linkbtn { border: 0; background: none; padding: 0; color: var(--cn-accent-ink); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; min-height: 0; }

/* =========================================================== 6. chips, badges */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 38px; padding: 6px 14px; border-radius: var(--cn-pill); border: 1px solid var(--cn-line-2); background: var(--cn-field);
  display: inline-flex; align-items: center; gap: 6px; font-size: var(--cn-fs-s); color: var(--cn-text);
}
.chip[aria-pressed="true"], .chip[aria-checked="true"], .chip.on { background: var(--cn-solid); color: var(--cn-on-accent); border-color: transparent; }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: var(--cn-pill); font-size: var(--cn-fs-xs); line-height: 1.5; background: var(--cn-bg-2); color: var(--cn-text-2); white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; }
.badge.plain::before { display: none; }
.badge.ok { background: var(--cn-ok-tint); color: var(--cn-ok-ink); }       /* -ink: AA ook op nude (R-21) */
.badge.warn { background: var(--cn-warn-tint); color: var(--cn-warn-ink); }
.badge.bad { background: var(--cn-bad-tint); color: var(--cn-bad-ink); }
.badge.info { background: var(--cn-accent-tint); color: var(--cn-accent-ink); }
.badge.muted { color: var(--cn-muted); }
.tag { font-size: var(--cn-fs-label); letter-spacing: .1em; text-transform: uppercase; color: var(--cn-muted); }

/* =========================================================== 7. velden */
.field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; min-width: 0; }
.field > label, .field > .label { font-size: var(--cn-fs-s); color: var(--cn-text-2); }
.field .hint { font-size: var(--cn-fs-xs); color: var(--cn-muted); }
.field .err { font-size: var(--cn-fs-xs); color: var(--cn-bad-ink); }
.input, .select, .textarea {
  width: 100%; min-height: 48px; padding: 11px 14px; border-radius: var(--cn-r-s); border: 1px solid var(--cn-line-2);
  background: var(--cn-field); color: var(--cn-text); transition: border-color var(--cn-t-fast), box-shadow var(--cn-t-fast);
}
.textarea { min-height: 96px; resize: vertical; line-height: 1.45; }
.input::placeholder, .textarea::placeholder { color: var(--cn-faint); }
/* het wisknopje (×) in een zoekveld in inkt, licht en donker, in plaats van het blauw van de browser (keuring M1 punt 2, 22 okt) */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-left: 6px; cursor: pointer;
  background-color: var(--cn-text-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 3.5l9 9M12.5 3.5l-9 9' stroke='%23000' stroke-width='1.7' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 3.5l9 9M12.5 3.5l-9 9' stroke='%23000' stroke-width='1.7' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}
input[type="search"]::-webkit-search-cancel-button:hover { background-color: var(--cn-text); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--cn-muted); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--cn-accent); box-shadow: 0 0 0 3px var(--cn-accent-tint-2); }
.input[aria-invalid="true"] { border-color: var(--cn-bad); }
/* veld dat uit staat (bijvoorbeeld het btw-bedrag bij verlegd): verzonken, gestippelde rand, gedempte inkt. Geen hover, geen focusgloed. */
.input:disabled, .select:disabled, .textarea:disabled {
  background-color: var(--cn-bg-2); border-style: dashed; border-color: var(--cn-line-2); color: var(--cn-muted);
  -webkit-text-fill-color: var(--cn-muted); opacity: 1; box-shadow: none; cursor: not-allowed; }
.affix:has(> .input:disabled) > .pre, .affix:has(> .input:disabled) > .post { color: var(--cn-faint); }
.input.money, .input.num { text-align: right; font-variant-numeric: tabular-nums; }
.select { appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.affix { position: relative; display: flex; align-items: center; }
.affix > .pre { position: absolute; left: 14px; color: var(--cn-muted); pointer-events: none; }
.affix > .post { position: absolute; right: 14px; color: var(--cn-muted); pointer-events: none; }
.affix > .pre + .input { padding-left: 34px; }
.affix > .input.has-post { padding-right: 40px; }
.row { display: grid; gap: 0 12px; grid-template-columns: 1fr 1fr; }
.row.three { grid-template-columns: 1fr 1fr 1fr; }
.row.one-two { grid-template-columns: 1fr 2fr; }
.check { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 10px 0; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--cn-accent); flex: none; }
.switch { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 52px; cursor: pointer; }
.switch input { appearance: none; -webkit-appearance: none; width: 50px; height: 30px; border-radius: var(--cn-pill); background: var(--cn-sunk); border: 1px solid var(--cn-line-2); position: relative; flex: none; transition: background var(--cn-t-fast); cursor: pointer; }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--cn-field); box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform var(--cn-t-fast) var(--cn-snap); }
.switch input:checked { background: var(--cn-solid); border-color: transparent; }
.switch input:checked::after { transform: translateX(20px); background: var(--cn-on-accent); }
.radio-cards { display: grid; gap: 10px; }
.radio-card { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: var(--cn-r-s); border: 1px solid var(--cn-line-2); background: var(--cn-field); cursor: pointer; text-align: left; width: 100%; }
.radio-card:hover { border-color: var(--cn-text); }
.radio-card[aria-checked="true"], .radio-card.on { border-color: var(--cn-accent); box-shadow: 0 0 0 1px var(--cn-accent) inset; background: color-mix(in srgb, var(--cn-select) 55%, var(--cn-field)); }
.radio-card .ic { width: 42px; height: 42px; border-radius: 50%; background: var(--cn-nude); color: var(--cn-nude-ink); display: grid; place-items: center; flex: none; }
.radio-card .t { display: block; font-weight: 600; }
.radio-card .d { display: block; font-size: var(--cn-fs-s); color: var(--cn-muted); margin-top: 2px; }
.dropzone { border: 1.5px dashed var(--cn-line-2); border-radius: var(--cn-r); padding: 26px 18px; text-align: center; background: var(--cn-field); transition: border-color var(--cn-t-fast), background var(--cn-t-fast); }
.dropzone.over { border-color: var(--cn-accent); background: var(--cn-accent-tint); }

/* =========================================================== 8. segment */
.seg { display: inline-flex; padding: 4px; border-radius: var(--cn-pill); background: var(--cn-bg-2); border: 1px solid var(--cn-hair); gap: 2px; row-gap: 6px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }   /* row-gap: een segment op twee regels (betalen op 390) houdt per tab 44 px tikvlak */
.seg::-webkit-scrollbar { display: none; }
.seg button, .seg a { min-height: 38px; padding: 6px 14px; border-radius: var(--cn-pill); border: 0; background: transparent; color: var(--cn-muted); font-size: var(--cn-fs-s); white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.seg [aria-selected="true"], .seg [aria-pressed="true"], .seg [aria-current="page"] { background: var(--cn-card); color: var(--cn-text); box-shadow: var(--cn-shadow-1); }
.seg .count { font-size: var(--cn-fs-xs); color: var(--cn-muted); }
.seg.block { display: flex; width: 100%; }
.seg.block > * { flex: 1; justify-content: center; }

/* =========================================================== 9. lijsten */
.list { list-style: none; margin: 0; padding: 0; background: var(--cn-card); border: 1px solid var(--cn-hair); border-radius: var(--cn-r); box-shadow: var(--cn-shadow-1); overflow: hidden; }
.list > li + li { border-top: 1px solid var(--cn-line); }
.item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; min-height: 64px; text-decoration: none; color: inherit; width: 100%; border: 0; background: transparent; text-align: left; }
a.item:hover, button.item:hover { background: var(--cn-accent-tint); }
.item .lead { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--cn-bg-2); color: var(--cn-text-2); flex: none; font: italic 16px/1 var(--cn-f-serif); }
.item .lead.solid { background: var(--cn-solid); color: var(--cn-on-accent); }
.item .main { flex: 1; min-width: 0; }
.item .t { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .s { display: block; font-size: var(--cn-fs-s); color: var(--cn-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-app="boek"] .item .s { line-height: 1.45; }
.item .end { text-align: right; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.item .end .money { font-size: var(--cn-fs); }
.item .chev { color: var(--cn-faint); }
.group-label { font-size: var(--cn-fs-label); letter-spacing: var(--cn-track); text-transform: uppercase; color: var(--cn-muted); margin: 20px 4px 8px; }
.kv { display: grid; grid-template-columns: minmax(min-content, 1fr) auto; gap: 8px 16px; margin: 0; }   /* het label krijgt minstens zijn langste woord */
.kv dt { color: var(--cn-muted); font-size: var(--cn-fs-s); }
.kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; } /* lang e-mailadres: afbreken, het label blijft staan (R-30b) */
.kv .total { border-top: 1px solid var(--cn-line); padding-top: 8px; font-weight: 600; color: var(--cn-text); }
.kv dd.total { margin-left: -16px; padding-left: 16px; } /* totaallijn zonder gat tussen label en bedrag */

/* =========================================================== 10. tabellen (grootboek) */
.table-wrap { overflow-x: auto; border-radius: var(--cn-r); border: 1px solid var(--cn-hair); background: var(--cn-card); box-shadow: var(--cn-shadow-1); }
table.ledger { width: 100%; border-collapse: collapse; font-size: var(--cn-fs-s); }
html[data-app="boek"] table.ledger { font-size: 16px; }
.ledger th { text-align: left; font-weight: 400; font-size: var(--cn-fs-label); letter-spacing: .1em; text-transform: uppercase; color: var(--cn-muted); padding: 12px 14px; border-bottom: 1px solid var(--cn-line); white-space: nowrap; background: var(--cn-card); }
.ledger td { padding: 11px 14px; border-bottom: 1px solid var(--cn-line); vertical-align: top; }
.ledger tr:last-child td { border-bottom: 0; }
.ledger td.n, .ledger th.n { text-align: right; white-space: nowrap; }
.ledger tfoot td { font-weight: 600; border-top: 1px solid var(--cn-text); border-bottom: 0; }
.ledger .code { font-family: var(--cn-f-serif); font-style: italic; color: var(--cn-accent-ink); white-space: nowrap; }
.ledger tr.sub td { color: var(--cn-muted); }
.ledger tr.strong td { font-weight: 600; }

/* =========================================================== 11. cijfertegels */
.stats { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat { background: var(--cn-card); border: 1px solid var(--cn-hair); border-radius: var(--cn-r); box-shadow: var(--cn-shadow-1); padding: 14px 16px; min-width: 0; }
.stat .k { font-size: var(--cn-fs-xs); color: var(--cn-muted); letter-spacing: .02em; }
.stat .v { font: 400 28px/1.15 var(--cn-f-serif); margin-top: 6px; font-variant-numeric: lining-nums tabular-nums; overflow-wrap: anywhere; }
.stat .d { font-size: var(--cn-fs-xs); color: var(--cn-muted); margin-top: 4px; }
.stat.wide { grid-column: 1 / -1; }
.hero-num { font: 400 clamp(40px, 11vw, 64px)/1.02 var(--cn-f-serif); letter-spacing: -.02em; font-variant-numeric: lining-nums; }
.meter { height: 10px; border-radius: var(--cn-pill); background: var(--cn-bg-2); overflow: hidden; position: relative; }
.meter > span { position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); background: var(--cn-solid); border-radius: inherit; transition: width .8s var(--cn-silk); }
.meter.ok > span { background: var(--cn-ok); }

/* =========================================================== 12. sheet (dialog) */
dialog.sheet {
  border: 0; padding: 0; margin: 0; color: var(--cn-text); background: var(--cn-card); box-shadow: var(--cn-shadow-sheet);
  width: 100%; max-width: 100%; max-height: min(92dvh, 92vh); inset: auto 0 0 0; position: fixed;
  border-radius: 24px 24px 0 0; overflow: hidden; display: flex; flex-direction: column;
}
dialog.sheet:not([open]) { display: none; }
dialog.sheet::backdrop { background: var(--cn-scrim); }
.sheet-head { display: flex; align-items: center; gap: 10px; padding: 14px 12px 10px 20px; border-bottom: 1px solid var(--cn-hair); flex: none; position: relative; }
.sheet-head::before { content: ""; position: absolute; top: 6px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: var(--cn-line-2); }
.sheet-head h2 { flex: 1; font-size: 22px; padding-top: 6px; }
.sheet-body { padding: 18px 20px 8px; overflow-y: auto; overscroll-behavior: contain; flex: 1; }
.sheet-foot { padding: 12px 20px calc(14px + var(--cn-safe-b)); border-top: 1px solid var(--cn-hair); display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex: none; background: var(--cn-card); }
.sheet-foot .btn { flex: 1 1 auto; }
dialog.sheet.wide { max-width: 100%; }

/* =========================================================== 13. toast */
.toasts { position: fixed; left: 0; right: 0; bottom: calc(var(--cn-nav-h) + var(--cn-safe-b) + 16px); z-index: 90; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; padding: 0 var(--cn-gut); }
/* hooguit twee regels; ui.toast kort zo nodig in het midden in, een woord breekt nooit midden af (R-30c) */
.toast { pointer-events: auto; max-width: min(520px, 100%); width: max-content; overflow-wrap: break-word; min-height: 50px; padding: 10px 10px 10px 18px; border-radius: var(--cn-pill); background: var(--cn-dark); color: var(--cn-on-dark); display: flex; align-items: center; gap: 12px; box-shadow: var(--cn-shadow-2); font-size: var(--cn-fs-s); line-height: 1.4; }
.toast > .icon { flex: none; }
.toast-t { flex: 1 1 auto; }
.toast-t.klem { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.toast .btn { flex: none; min-height: 36px; padding: 4px 14px; background: transparent; color: inherit; border-color: color-mix(in srgb, var(--cn-on-dark) 40%, transparent); }
.toast.bad { background: var(--cn-bad); color: var(--cn-on-dark); } /* geen losse #fff: in het donker is de roest licht, dus de tekst inkt (R-33) */

/* =========================================================== 14. leeg, laden */
.empty { text-align: center; padding: 34px 20px; color: var(--cn-muted); }
.empty .art { width: 64px; height: 64px; margin: 0 auto 12px; color: var(--cn-line-2); }
.empty h3 { color: var(--cn-text); margin-bottom: 6px; }
.empty p { max-width: 42ch; margin: 0 auto 14px; }
.skel { background: linear-gradient(90deg, var(--cn-bg-2), var(--cn-sunk), var(--cn-bg-2)); background-size: 200% 100%; animation: cn-shimmer 1.4s linear infinite; border-radius: 10px; min-height: 14px; }

/* =========================================================== 15. stappen */
.steps { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0 0 18px; counter-reset: s; }
.steps li { flex: 1; display: flex; flex-direction: column; gap: 6px; font-size: var(--cn-fs-xs); color: var(--cn-muted); counter-increment: s; min-width: 0; }
.steps li::before { content: ""; height: 4px; border-radius: 4px; background: var(--cn-bg-2); }
.steps li.done::before, .steps li.now::before { background: var(--cn-solid); }
.steps li.now { color: var(--cn-text); }
.timeline { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 1px solid var(--cn-line); }
.timeline li { position: relative; padding: 0 0 14px 14px; font-size: var(--cn-fs-s); }
.timeline li::before { content: ""; position: absolute; left: -24px; top: 6px; width: 11px; height: 11px; border-radius: 50%; background: var(--cn-card); border: 2px solid var(--cn-line-2); }
.timeline li.ok::before { border-color: var(--cn-ok); background: var(--cn-ok); }
.timeline li.bad::before { border-color: var(--cn-bad); background: var(--cn-bad); }
.timeline li.now::before { border-color: var(--cn-accent); }
.timeline .when { color: var(--cn-muted); font-size: var(--cn-fs-xs); display: block; }

/* =========================================================== 16. hulpklassen */
.muted { color: var(--cn-muted); }
.small { font-size: var(--cn-fs-s); }
.xs { font-size: var(--cn-fs-xs); }
.right { text-align: right; }
.center { text-align: center; }
.ok-ink { color: var(--cn-ok); }
.warn-ink { color: var(--cn-warn); }
.bad-ink { color: var(--cn-bad); }
.accent-ink { color: var(--cn-accent-ink); }
.serif { font-family: var(--cn-f-serif); }
.nowrap { white-space: nowrap; }
.flex { display: flex; align-items: center; gap: 10px; }
.flex.wrap { flex-wrap: wrap; }
.flex.between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.mt0 { margin-top: 0; } .mt1 { margin-top: 8px; } .mt2 { margin-top: 16px; } .mt3 { margin-top: 26px; }
.mb0 { margin-bottom: 0; } .mb1 { margin-bottom: 8px; } .mb2 { margin-bottom: 16px; }
.hide { display: none !important; }
.jewel { width: 14px; height: 14px; color: var(--cn-accent); display: inline-block; vertical-align: -1px; }
.code-pill { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: var(--cn-fs-xs); background: var(--cn-bg-2); border-radius: 6px; padding: 1px 6px; overflow-wrap: anywhere; }

/* =========================================================== 17. beweging */
@keyframes cn-shimmer { to { background-position: -200% 0; } }
@keyframes cn-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes cn-sheet-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes cn-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cn-twinkle { 0% { transform: scale(0) rotate(-30deg); opacity: 0; } 40% { transform: scale(1.15) rotate(0); opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
main.view > * { animation: cn-rise .42s var(--cn-silk) backwards; } /* backwards: na de opkomst laat de animatie opacity en transform los */
main.view.stil > * { animation: none; } /* opnieuw tekenen na een wijziging: geen opkomst */
main.view > *:nth-child(2) { animation-delay: .03s; }
main.view > *:nth-child(3) { animation-delay: .06s; }
main.view > *:nth-child(4) { animation-delay: .09s; }
main.view > *:nth-child(n+5) { animation-delay: .12s; }
dialog.sheet[open] { animation: cn-sheet-in .28s var(--cn-silk); }
dialog.sheet[open]::backdrop { animation: cn-fade .3s ease; }
.toast { animation: cn-rise .35s var(--cn-silk); }
.twinkle { animation: cn-twinkle .7s var(--cn-silk) both; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
/* wisselen tussen Beheer en Boekhouding: een omgeslagen bladzijde (240 ms; de balken blijven staan) */
.top { view-transition-name: cn-top; } .balk { view-transition-name: cn-balk; }
::view-transition-group(cn-top), ::view-transition-group(cn-balk) { animation-duration: .2s; }
html[data-blad="vooruit"]::view-transition-old(root) { animation: cn-blad-uit .24s var(--cn-silk) both; }
html[data-blad="vooruit"]::view-transition-new(root) { animation: cn-blad-in .3s var(--cn-silk) both; }
html[data-blad="terug"]::view-transition-old(root) { animation: cn-blad-uit-r .24s var(--cn-silk) both; }
html[data-blad="terug"]::view-transition-new(root) { animation: cn-blad-in-r .3s var(--cn-silk) both; }
@keyframes cn-blad-uit { to { opacity: 0; transform: translateX(-4%) rotate(-.4deg); } }
@keyframes cn-blad-in { from { opacity: 0; transform: translateX(6%) rotate(.6deg); } }
@keyframes cn-blad-uit-r { to { opacity: 0; transform: translateX(4%) rotate(.4deg); } }
@keyframes cn-blad-in-r { from { opacity: 0; transform: translateX(-6%) rotate(-.6deg); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* =========================================================== 18. breekpunten (de balken en de rail: css/shell.css) */
@media (min-width: 560px) {
  .grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  dialog.sheet { max-width: 640px; inset: auto auto 0 50%; transform: translateX(-50%); }
  dialog.sheet[open] { animation: cn-sheet-in-c .28s var(--cn-silk); }
  @keyframes cn-sheet-in-c { from { transform: translate(-50%, 100%); } to { transform: translateX(-50%); } }
}
@media (min-width: 768px) {
  main.view { padding-left: calc(var(--cn-rail-w) + var(--cn-gut)); padding-right: var(--cn-gut); padding-bottom: 96px; max-width: calc(1180px + var(--cn-rail-w)); }
  .toasts { bottom: 32px; padding-left: var(--cn-rail-w); }
  .grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  dialog.sheet { max-width: 680px; border-radius: var(--cn-r); inset: 50% auto auto 50%; transform: translate(-50%, -50%); max-height: 88vh; }
  dialog.sheet.wide { max-width: 920px; }
  dialog.sheet[open] { animation: cn-pop .28s var(--cn-silk); }
  @keyframes cn-pop { from { opacity: 0; transform: translate(-50%, calc(-50% + 16px)) scale(.98); } to { opacity: 1; transform: translate(-50%, -50%); } }
  .sheet-head::before { display: none; }
  .sheet-foot .btn { flex: 0 0 auto; }
}
@media (min-width: 1180px) {
  .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 20px; align-items: start; }
  .split > .sticky { position: sticky; top: calc(var(--cn-top-h) + 16px); }
}
@media (max-width: 400px) { .row.three { grid-template-columns: 1fr 1fr; } }
@media print {
  .balk, .top, .toasts, .offline-band { display: none !important; }
  main.view { padding: 0; }
  body::before, body::after { display: none; }
}

/* =========================================================== 19. papier, stempel, kasboek (het CN-gevoel)
   .paper      een document als vel papier (factuur, kwartaalbrief, offerte) — iets warmer dan een kaart, met een papierschaduw
   .stamp      het CN-stempel: inkt-cirkel met de cursieve initialen; verschijnt bij "betaald" / "ingediend" (het ene juweel)
   .ruled      gelinieerd kasboekpapier achter een lijst of tabel
   .folio      een klein doorlopend nummer in cursief (№ 2026-038) */
/* het vel blijft in beide standen licht papier (een vel op een donkere tafel, ONTWERP-V2 §2): eigen, vaste tokens */
.paper {
  --cn-text: #1b1918; --cn-text-2: #3a332e; --cn-muted: #463b33; --cn-faint: #6b5f55; --cn-line: #cdbfb0; --cn-line-2: #8f7e6f; --cn-hair: rgb(27 25 24 / .09);
  --cn-field: #fbf8f4; --cn-card: #f6f1ea; --cn-bg-2: #e6dfd5; --cn-accent: #1b1918; --cn-accent-ink: #1b1918; --cn-solid: #1b1918; --cn-on-accent: #f6f1ea;
  --cn-nude: #d9c3b4; --cn-nude-ink: #4f3d31; --cn-ok: #4e6650; --cn-warn: #8a5a14; --cn-bad: #9a3324; --cn-ok-ink: #3f5541; --cn-warn-ink: #74490c; --cn-bad-ink: #84291c;
  --cn-accent-tint: rgb(84 60 44 / .07); --cn-rule: rgb(27 25 24 / .06);
  color-scheme: light; background: #fbf8f4; border-radius: 6px; box-shadow: var(--cn-shadow-paper); padding: 28px 24px; position: relative; color: var(--cn-text);
}
.paper::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 1px var(--cn-hair) inset; }
.paper .paper-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 22px; }
.paper .paper-title { font: italic 26px/1.1 var(--cn-f-serif); }
.paper .paper-meta { font-size: var(--cn-fs-xs); color: var(--cn-muted); text-align: right; line-height: 1.5; }
.paper table { width: 100%; border-collapse: collapse; font-size: var(--cn-fs-s); }
html[data-app="boek"] .paper table { font-size: 16px; }
.paper th { text-align: left; font-weight: 400; font-size: var(--cn-fs-label); letter-spacing: .12em; text-transform: uppercase; color: var(--cn-muted); padding: 0 0 8px; border-bottom: 1px solid var(--cn-text); }
.paper td { padding: 9px 0; border-bottom: 1px solid var(--cn-line); vertical-align: top; }
.paper td.n, .paper th.n { text-align: right; font-variant-numeric: tabular-nums; padding-left: 12px; white-space: nowrap; }
.paper .paper-total { display: flex; justify-content: flex-end; margin-top: 14px; }
.paper .paper-total dl { min-width: 240px; }
.folio { font: italic 15px/1 var(--cn-f-serif); color: var(--cn-muted); letter-spacing: .01em; }
.folio::before { content: "№ "; font-style: normal; }
.stamp {
  --s: 92px; width: var(--s); height: var(--s); border-radius: 50%; display: grid; place-items: center; position: relative; flex: none;
  color: var(--cn-text); border: 1.5px solid currentColor; transform: rotate(-9deg);
  box-shadow: 0 0 0 4px var(--cn-field) inset, 0 0 0 5px currentColor inset;
  font: italic 26px/1 var(--cn-f-serif); letter-spacing: -.02em; mix-blend-mode: multiply; opacity: .9;
}
.stamp small { position: absolute; bottom: 17px; left: 0; right: 0; text-align: center; font: 400 8.5px/1 var(--cn-f-sans); letter-spacing: .24em; text-transform: uppercase; font-style: normal; }
.stamp.ok { color: var(--cn-ok); }
.stamp.press { animation: cn-press .55s var(--cn-silk) both; }
@keyframes cn-press { 0% { transform: rotate(-9deg) scale(1.6); opacity: 0; } 60% { transform: rotate(-9deg) scale(.96); opacity: 1; } 100% { transform: rotate(-9deg) scale(1); opacity: .9; } }
:root[data-theme="dark"] .stamp, .stamp.light-blend { mix-blend-mode: normal; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stamp { mix-blend-mode: normal; } }
.ruled { background-image: repeating-linear-gradient(to bottom, transparent 0 31px, var(--cn-rule) 31px 32px); }
.hand { font: italic 1.08em/1.35 var(--cn-f-serif); }
/* in Boekhouding is "handschrift" (een voorstel, een checklist, een lege brief) gewone tekst; de vellen houden hun hand */
html[data-app="boek"] .hand:where(:not(.fv *, .fv-mini *, .bk-a4 *)) { font-family: var(--cn-f-sans); font-style: normal; font-size: 1em; line-height: 1.55; }
/* het ene grote getal per scherm: CN Display 44 / 56 px (Kop op een 1×-scherm), centen kleiner en hoger */
.big-money { font: 340 44px/1 var(--cn-f-display); letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; }
@media (min-width: 768px) { .big-money { font-size: 56px; } }
@media (max-resolution: 1.49dppx) { .big-money { font-family: var(--cn-f-serif); font-weight: 400; } }
.big-money .cents { font-size: .5em; vertical-align: .62em; margin-left: 2px; letter-spacing: 0; }
.letter { max-width: 640px; }
.letter p.opening { font: italic 22px/1.3 var(--cn-f-serif); margin-bottom: 14px; }
.nude-band { background: var(--cn-nude); border-radius: var(--cn-r); padding: 18px; }

/* =========================================================== 20. (vervallen) de zwevende plusknop
   Nieuw zit nu in de balk (ONTWERP-V2 §3, review R-33): in het midden van de onderbalk, bovenaan de rail. Zie css/shell.css. */

/* =========================================================== 21. tikvlak (R-20)
   Elk bedieningselement heeft een tikvlak van minstens 44 × 44 px (--cn-tap), ook als de pil zelf kleiner oogt
   (kleine knop, chip, segment, app-wissel, losse link). Een onzichtbare ::before steekt alleen zoveel uit als nodig:
   bij een knop van 38 px 3 px boven en onder, bij een knop van 46 px niets. Breedte idem, dus buren in een rij
   (gap ≥ 8 px) overlappen niet. Links midden in lopende tekst vallen onder de WCAG-uitzondering, maar een link die
   alleen in zijn alinea staat ("Naar de aangifte van Q3 →") krijgt het vlak wel. */
/* 23 okt (keuring letter A): ook de kop van een bankkaart (30 px) en de losse links in de lijsten van Boekhouding
   (posten onder een rubriek, de kleine lijstjes, de eerste link in een tabelcel). */
.btn, .chip, .seg > button, .seg > a, .linkbtn, .iconbtn, .section-title .more, summary, p > a:only-child,
.bk-kaart-main, .ag-rb-o > a, .ag-mini-o > a, td > a:first-child { position: relative; }
.btn::before, .chip::before, .seg > button::before, .seg > a::before, .linkbtn::before, .iconbtn::before,
.section-title .more::before, summary::before, p > a:only-child::before,
.bk-kaart-main::before, .ag-rb-o > a::before, .ag-mini-o > a::before, td > a:first-child::before {
  content: ""; position: absolute;
  top: min(0px, calc((100% - var(--cn-tap)) / 2)); bottom: min(0px, calc((100% - var(--cn-tap)) / 2));
  left: min(0px, calc((100% - var(--cn-tap)) / 2)); right: min(0px, calc((100% - var(--cn-tap)) / 2));
}
.section-title .more { z-index: 1; }   /* de kaart eronder (position: relative) schilderde over de onderkant van het vlak */
/* 23 okt: de e-mail- en telefoonlink in "Contact en adres" (Relaties en het dossier) waren 21 px hoog. Ze staan in .kv onder elkaar
   (regel 20 px, tussenruimte 8 px), dus een vlak van 12 px boven en onder zou bij de buurman overlappen. Daarom deelt het vlak de
   tussenruimte in het midden (4 px elk) en groeit verder naar de rij ernaast zonder link: de e-mail omhoog (naar Contact), de
   telefoon omlaag (naar Adres). Zo is elk vlak 44 px hoog, ook als er maar één van de twee staat; de tekst blijft even groot. */
.kv-tik { position: relative; }
.kv-tik::before { content: ""; position: absolute; left: min(0px, calc((100% - var(--cn-tap)) / 2)); right: min(0px, calc((100% - var(--cn-tap)) / 2)); }
.kv-tik-op::before { top: min(0px, calc(100% + 4px - var(--cn-tap))); bottom: -4px; }
.kv-tik-neer::before { top: -4px; bottom: min(0px, calc(100% + 4px - var(--cn-tap))); }