/* Charme Nouveau — privé-apps · AANGIFTE, OVERZICHT, MEER, HUISREGELS (agent E)
   Alleen tokens (var(--cn-…)), voorvoegsel .ag-. Telefoon eerst (390), dan tablet (768), dan computer (1180+).
   0 het gedeelde schrift van beide apps (dagbrief, groot getal, inktlijn: js/core/brief.js)
   1 gedeeld · 2 overzicht · 3 aangifte-lijst · 4 de aangiftebrief · 5 checklist en acties · 6 IB-jaar
   7 meer (inhoud) · 8 activa, ritten, uitgangspunten, export, logboek · 9 huisregels · 10 beweging · 11 breekpunten */

/* =========================================================== 0. het gedeelde schrift (H5, R-31)
   Beheer › Vandaag en Boekhouding › Overzicht komen uit hetzelfde schrift: CN.ui.brief (zinnen met een romeins nummer in de
   kantlijn), CN.ui.getal (het ene grote getal op een los vel), CN.ui.inktlijn (een dunne inktlijn met stippen) en CN.ui.ga
   (de actie onder een zin). Voorvoegsel .cn- omdat het van beide apps is; .bh-day en .ag-home zijn de twee schermen. */
.bh-day, .ag-home { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.bh-day > *, .ag-home > *, .bh-day-side > *, .ag-home-b > * { min-width: 0; }
.bh-day-side, .ag-home-b { display: grid; gap: 24px; min-width: 0; }

/* de dagbrief: een vel met zinnen; het nummer staat in de kantlijn, achter een dunne nude lijn zoals in een kasboek.
   De letter (BESLUITEN-JORDY 35, variant A, 23 okt; op beide kanten gelijk): de zinnen in CN Tekst 17 px (de eerste 18,5; tablet 18 en
   19,5), regelafstand 1,6; nadruk met gewicht 500 in inkt, nooit cursief (Instrument Sans heeft geen cursief). Het nummer (i., ii.) blijft
   een cursieve serif in de kantlijn. */
.cn-brief { --fs: 17px; --lh: 1.6; position: relative; }
.cn-brief-l { list-style: none; margin: 0; padding: 0; position: relative; border-top: 1px solid var(--cn-text); }
.cn-brief-l::before { content: ""; position: absolute; top: 0; bottom: 0; left: 30px; width: 1px; background: var(--cn-nude-2); opacity: .7; pointer-events: none; }
.cn-brief-i {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 13px; padding: 16px 0 12px; border-bottom: 1px solid var(--cn-line);
  animation: cn-rise .55s var(--cn-silk) backwards;
}
.cn-brief-i:first-child { --fs: 18.5px; padding-top: 19px; }
.cn-brief-i:nth-child(2) { animation-delay: .05s; }
.cn-brief-i:nth-child(3) { animation-delay: .1s; }
.cn-brief-i:nth-child(4) { animation-delay: .15s; }
.cn-brief-i:nth-child(n+5) { animation-delay: .2s; }
/* zelfde basislijn als de eerste regel van de zin (Instrument Sans staat hoger in zijn regel dan Newsreader): padding-top */
.cn-brief-nr { font-family: var(--cn-f-serif); font-style: italic; font-size: 16px; line-height: calc(var(--fs) * var(--lh)); color: var(--cn-muted); text-align: right; padding: calc(var(--fs) * .36 - 3.76px) 9px 0 0; letter-spacing: .02em; }
.cn-brief-i.bad .cn-brief-nr { color: var(--cn-bad); }
.cn-brief-i.warn .cn-brief-nr { color: var(--cn-warn); }
.cn-brief-b { min-width: 0; display: flow-root; }
.cn-brief-t { margin: 0; font-family: var(--cn-f-sans); font-size: var(--fs); line-height: var(--lh); color: var(--cn-text-2); letter-spacing: -.003em; text-wrap: pretty; }
.cn-brief-t :is(em, strong, .bh-naam) { font-family: inherit; font-style: normal; font-weight: 500; color: var(--cn-text); }
.cn-brief-t .bh-naam { font-size: 1em; }
.cn-brief-t .tnum, .cn-brief-t .cn-geld { font-family: inherit; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.cn-brief-cal { float: right; margin: 4px 0 10px 14px; }
.cn-brief-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0 22px; margin-top: 5px; }
.cn-brief-leeg { margin: 0; padding: 22px 0; font-size: 17px; color: var(--cn-text-2); border-top: 1px solid var(--cn-text); border-bottom: 1px solid var(--cn-line); }

/* de actie onder een zin: CN Tekst 500, onderstreept, met een pijltje, groot genoeg om te tikken */
.cn-ga {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 2px; border: 0; background: none; cursor: pointer;
  font: 500 16px/1.2 var(--cn-f-sans); letter-spacing: .005em; color: var(--cn-accent-ink);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .32em; text-decoration-color: var(--cn-line-2);
  transition: text-decoration-color var(--cn-t-fast);
}
.cn-ga .icon { width: 16px; height: 16px; flex: none; transition: transform var(--cn-t) var(--cn-silk); }
.cn-ga:hover { text-decoration-color: currentColor; }
.cn-ga:hover .icon { transform: translateX(3px); }
.cn-ga.stil { font: 400 15px/1.2 var(--cn-f-sans); color: var(--cn-muted); text-decoration-color: var(--cn-line-2); }
.cn-ga.stil:hover { color: var(--cn-text); text-decoration-color: currentColor; }

/* het ene grote getal, op een los vel naast de brief */
.cn-getal { position: relative; min-width: 0; padding: 20px 20px 4px; background: var(--cn-field); border-radius: 6px; box-shadow: var(--cn-shadow-paper); }
.cn-getal::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 1px var(--cn-hair) inset; }
.cn-getal-k { margin-bottom: 10px; }
.cn-bedrag { display: inline-flex; align-items: baseline; white-space: nowrap; }
.cn-bedrag .cents { align-self: flex-start; margin-top: .14em; vertical-align: 0; }
.cn-getal-zin { margin: 10px 0 0; color: var(--cn-text-2); font-size: 16px; line-height: 1.55; max-width: 54ch; }
.cn-getal-zin em { font-family: inherit; font-style: normal; font-weight: 500; color: var(--cn-text-2); }
.cn-getal-zin .cn-geld, .cn-getal-noot .cn-geld { color: var(--cn-text); white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.cn-getal-noot { margin: 10px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--cn-muted); }
.cn-getal-voet { display: flex; flex-wrap: wrap; gap: 0 22px; margin-top: 12px; border-top: 1px solid var(--cn-line); }

/* de dunne inktlijn met stippen, op drie kasboeklijnen */
.cn-ink { margin: 16px -4px 0; }
.cn-ink-lees { margin: 0 4px 4px; min-height: 22px; font-size: 14.5px; color: var(--cn-muted); }
.cn-ink-m { font: 500 var(--cn-fs-s)/1 var(--cn-f-sans); color: var(--cn-text); }
.cn-ink-v { color: var(--cn-text); white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.cn-ink-plot { width: 100%; height: var(--h, 112px); }
.cn-ink-svg { display: block; overflow: visible; touch-action: pan-y; cursor: crosshair; border-radius: 6px; }
.cn-ink-svg:focus-visible { outline: 2px solid var(--cn-focus); outline-offset: 4px; }
.cn-ink-regel { stroke: var(--cn-rule); stroke-width: 1; }
.cn-ink-voet { stroke: var(--cn-line); stroke-width: 1; }
.cn-ink-nul { stroke: var(--cn-line-2); stroke-width: 1; stroke-dasharray: 2 4; }
.cn-ink-cross { stroke: var(--cn-line-2); stroke-width: 1; stroke-dasharray: 2 3; }
.cn-ink-line { fill: none; stroke: var(--cn-chart-1); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.cn-ink-line.teken { stroke-dasharray: 1; animation: cn-ink-teken 1.4s var(--cn-silk) .15s both; }
.cn-ink-halo { fill: var(--cn-accent-tint-2); }
.cn-ink-dot { fill: var(--cn-field); stroke: var(--cn-chart-1); stroke-width: 1.25; }
.cn-ink-dot.on { fill: var(--cn-chart-1); stroke: var(--cn-field); stroke-width: 2; }
.cn-ink-tag { fill: var(--cn-muted); font: 400 11px var(--cn-f-sans); letter-spacing: .02em; }
.cn-ink-tag.on { fill: var(--cn-text); font-weight: 700; }
@keyframes cn-ink-teken { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
/* opnieuw tekenen na een wijziging: niets komt opnieuw op */
main.view.stil .cn-brief-i, .ag-calm .cn-brief-i, main.view.stil .cn-ink-line.teken, .ag-calm .cn-ink-line.teken { animation: none; }
@media (prefers-reduced-motion: reduce) { .cn-brief-i, .cn-ink-line.teken { animation: none !important; stroke-dashoffset: 0; } .cn-ga .icon { transition: none; } }
@media (min-width: 768px) {
  .cn-brief { --fs: 18px; }
  .cn-brief-i { grid-template-columns: 34px minmax(0, 1fr); column-gap: 16px; }
  .cn-brief-i:first-child { --fs: 19.5px; }
  .cn-brief-l::before { left: 34px; }
  .cn-ga { font-size: 16.5px; }
  .cn-getal { padding: 24px 26px 6px; }
}
@media (min-width: 1024px) {
  .bh-day, .ag-home { grid-template-columns: minmax(0, 1.3fr) minmax(330px, 1fr); gap: 44px; }
  .ag-home-b { position: sticky; top: calc(var(--cn-top-h) + 16px); }
}
@media print { .cn-ink-svg { cursor: default; } .cn-getal { box-shadow: none; } }

/* =========================================================== 1. gedeeld */
main.view > .ag-calm { animation: none; }
.ag-twee, .ag-vellen, .ag-bank, .ag-kaarten, .ag-activa, .ag-exps, .ag-hr, .ag-ups { grid-template-columns: minmax(0, 1fr); }
.ag-twee > *, .ag-vellen > *, .ag-bank > *, .ag-kaarten > *, .ag-activa > *, .ag-exps > *, .ag-hr > *, .ag-brief-grid > *, .ag-brief-b > * { min-width: 0; }
.ag-h2 { font-size: 22px; margin: 28px 0 12px; }
.ag-h2 em { color: var(--cn-accent-ink); }
.ag-blok { margin-top: 8px; }
.ag-money { display: inline-flex; align-items: baseline; white-space: nowrap; }
.ag-money .cents { align-self: flex-start; margin-top: .14em; vertical-align: 0; }
.ag-go {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; margin: 2px 0 -6px;
  border: 0; background: none; color: var(--cn-accent-ink); font-size: var(--cn-fs-s); text-decoration: underline;
  text-underline-offset: .22em; text-decoration-thickness: 1px; cursor: pointer;
}
.ag-go .icon { transition: transform var(--cn-t-fast) var(--cn-snap); }
.ag-go:hover .icon { transform: translateX(3px); }
.ag-wrap { white-space: normal !important; }
.ag-hero { margin: 4px 0 20px; }
.ag-hero .eyebrow { margin-bottom: 8px; }
.ag-hero-sub { color: var(--cn-muted); margin: 10px 0 0; font-size: 16.5px; line-height: 1.55; }

/* kalenderchip */
.ag-cal {
  display: inline-grid; grid-template-rows: auto auto auto; width: 62px; flex: none; text-align: center; overflow: hidden;
  background: var(--cn-field); border: 1px solid var(--cn-line-2); border-radius: 12px; box-shadow: var(--cn-shadow-1);
  transform: rotate(-2deg);
}
.ag-cal-m { background: var(--cn-solid); color: var(--cn-on-accent); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; padding: 4px 0 3px; }
.ag-cal-d { font: 400 27px/1 var(--cn-f-serif); padding: 7px 0 1px; font-variant-numeric: lining-nums; }
.ag-cal-w { font-size: 11px; color: var(--cn-muted); padding: 2px 0 7px; letter-spacing: .02em; }

/* handgeschreven vinkje */
.ag-vink { width: 24px; height: 24px; flex: none; fill: none; stroke: var(--cn-warn); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ag-vink.ok { stroke: var(--cn-text); stroke-width: 2.1; }
.ag-vink path { stroke-dasharray: 1; stroke-dashoffset: 0; }

/* =========================================================== 2. overzicht (de brief en het getal: zie §0) */
.ag-nu-zin .tnum, .ag-schat-zin .tnum, .ag-kaart-zin .tnum, .ag-stand-zin .tnum { font-family: inherit; white-space: nowrap; }
.ag-snel .ag-h2 { margin-top: 6px; }

/* =========================================================== 3. aangifte-lijst */
.ag-nu {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 16px; align-items: center;
  background: var(--cn-nude); border-radius: var(--cn-r); padding: 18px; margin: 4px 0 6px;
}
.ag-nu.bad { background: var(--cn-bad-tint); }
.ag-nu-zin { font: 400 17.5px/1.55 var(--cn-f-sans); margin: 0; }
.ag-nu-zin em { color: var(--cn-accent-ink); }
.ag-nu-sub { font-size: var(--cn-fs-s); color: var(--cn-nude-ink); margin: 4px 0 0; }
.ag-nu > .btn { grid-column: 1 / -1; }
.ag-twee { display: grid; gap: 4px 28px; }
.ag-kw .lead.ag-kw-lead { font: italic 16px/1 var(--cn-f-serif); }
.ag-kw[data-status="te-doen"] .lead, .ag-kw[data-status="te-laat"] .lead { background: var(--cn-solid); color: var(--cn-on-accent); }
.ag-kw[data-status="toekomst"] .t, .ag-kw[data-status="toekomst"] .lead { color: var(--cn-faint); }
.ag-kw .end { gap: 6px; }

/* =========================================================== 4. de aangiftebrief */
.ag-kwnav { display: flex; gap: 6px; }
.ag-kwnav a { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 12px; border-radius: var(--cn-pill); border: 1px solid var(--cn-line-2); color: var(--cn-text); text-decoration: none; font-size: var(--cn-fs-s); background: var(--cn-field); }
.ag-kwnav a:hover { border-color: var(--cn-text); }
.ag-brief-grid { display: flex; flex-direction: column; gap: 16px; }
.ag-brief-b { display: contents; }
.ag-brief-b > .ag-dl { order: -1; }
.ag-paper { padding: 22px 16px 24px; }
.ag-paper-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 12px; margin-bottom: 18px; }
.ag-paper-head > div { flex: 1 1 180px; min-width: 0; }
.ag-paper-head .paper-title { font-size: 25px; margin: 0; }
.ag-paper-head .paper-meta { flex: 1 1 100%; text-align: left; margin: 2px 0 0 50px; }
.ag-paper-sub { margin: 4px 0 0; color: var(--cn-muted); font-size: var(--cn-fs-s); }
.ag-mark { width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--cn-solid); color: var(--cn-on-accent); font: italic 15px/1 var(--cn-f-serif); letter-spacing: -.02em; }
.ag-stamp { position: absolute; right: 14px; bottom: 16px; --s: 84px; z-index: 1; pointer-events: none; }
.ag-stamp small { bottom: 15px; }
.ag-stamp > .jewel { position: absolute; top: -2px; right: -2px; width: 18px; height: 18px; }
.toast.ag-toast { max-width: min(520px, 100%); }
.toast.ag-toast > span { min-width: 0; }

/* raster van een rubriekregel: code · omschrijving · stippellijn · omzet · btw.
   Op de telefoon staat de omschrijving op de eerste regel (mag breken) en de bedragen op een eigen regel, in vaste kolommen
   rechts, met een stippellijn ernaartoe: de getallen staan in elke rubriek op dezelfde plek (R-33). */
.ag-cols, .ag-rb > summary {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) 82px 72px; column-gap: 10px;
  grid-template-areas: "c l l l" "c d o b";
}
.ag-cols { grid-template-areas: "c l o b"; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--cn-muted); padding: 0 0 6px; border-bottom: 1px solid var(--cn-text); }
.ag-cols > :nth-child(1) { grid-area: c; } .ag-cols > :nth-child(2) { grid-area: l; }
.ag-cols > :nth-child(3) { grid-area: o; text-align: right; } .ag-cols > :nth-child(4) { grid-area: b; text-align: right; }
.ag-rb.alleen-btw > summary { grid-template-areas: "c l l l" "c d d b"; }
.ag-rb.alleen-btw > summary > .ag-rb-n.leeg { display: none; }
/* de stippellijn loopt door tot vlak voor het eerste bedrag: het vak .ag-rb-lead plus een stuk vóór het getal in de
   bedragkolom (::before), over de kolomafstand heen (negatieve marge = column-gap) */
.ag-rb-lead { grid-area: d; align-self: baseline; min-width: 14px; height: 1em; margin-right: -10px; border-bottom: 1.5px dotted var(--cn-line-2); transform: translateY(-.28em); font-size: var(--cn-fs-s); }
.ag-rb.stil .ag-rb-lead { border-bottom-color: var(--cn-line); }
.ag-rb:not(.alleen-btw) > summary > .ag-rb-n[data-col="omzet"] > .ag-rb-a,
.ag-rb.alleen-btw > summary > .ag-rb-n[data-col="btw"] > .ag-rb-a { align-self: stretch; display: flex; align-items: baseline; justify-content: flex-end; }
.ag-rb:not(.alleen-btw) > summary > .ag-rb-n[data-col="omzet"] > .ag-rb-a::before,
.ag-rb.alleen-btw > summary > .ag-rb-n[data-col="btw"] > .ag-rb-a::before { content: ""; flex: 1 1 0; min-width: 0; height: 1em; margin-right: 7px; border-bottom: 1.5px dotted var(--cn-line-2); transform: translateY(-.28em); }
.ag-rb.stil > summary > .ag-rb-n > .ag-rb-a::before { border-bottom-color: var(--cn-line); }
.ag-rb-was { display: block; margin-top: 3px; font: 400 var(--cn-fs-xs)/1.35 var(--cn-f-sans); color: var(--cn-warn); }
.ag-rb.veranderd .ag-rb-c { color: var(--cn-warn); }
.ag-sec-t { font: 400 var(--cn-fs-label)/1.3 var(--cn-f-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--cn-muted); margin: 22px 0 2px; display: flex; gap: 8px; align-items: baseline; }
.ag-sec-nr { font: italic 17px/1 var(--cn-f-serif); letter-spacing: 0; text-transform: none; color: var(--cn-accent-ink); }
.ag-rb > summary { list-style: none; cursor: pointer; min-height: 44px; box-sizing: border-box; padding: 10px 0 9px; border-bottom: 1px solid var(--cn-line); row-gap: 3px; align-items: baseline; border-radius: 4px; }
.ag-rb > summary::-webkit-details-marker { display: none; }
.ag-rb > summary:hover { background: var(--cn-accent-tint); }
.ag-rb-c { grid-area: c; font: italic 17px/1.25 var(--cn-f-serif); color: var(--cn-accent-ink); padding-left: 2px; }
.ag-rb-l { grid-area: l; font-size: 16px; line-height: 1.35; color: var(--cn-text); }
.ag-rb-staart { white-space: nowrap; }
.ag-rb-pijl { display: inline-block; width: 6px; height: 6px; margin: 0 0 2px 8px; border-right: 1.5px solid var(--cn-faint); border-bottom: 1.5px solid var(--cn-faint); transform: rotate(-45deg); transition: transform var(--cn-t-fast) var(--cn-snap); }
.ag-rb[open] > summary .ag-rb-pijl { transform: rotate(45deg); }
.ag-rb-tel { margin-left: 8px; font-size: var(--cn-fs-xs); color: var(--cn-muted); white-space: nowrap; }
.ag-rb-n { text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.ag-rb-n[data-col="omzet"] { grid-area: o; }
.ag-rb-n[data-col="btw"] { grid-area: b; }
.ag-rb-a { font-size: 16px; white-space: nowrap; }
.ag-rb-x { display: block; font-size: 11px; color: var(--cn-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ag-rb-n.nul .ag-rb-a { color: var(--cn-faint); }
.ag-rb.stil .ag-rb-l { color: var(--cn-muted); }
.ag-rb.stil .ag-rb-c { color: var(--cn-faint); }
@media (max-width: 559px) { .ag-rb.stil > summary { grid-template-areas: "c l l l"; } .ag-rb.stil > summary > .ag-rb-n, .ag-rb.stil > summary > .ag-rb-lead { display: none; } }
.ag-rb-body { padding: 8px 0 14px 40px; border-bottom: 1px solid var(--cn-line); animation: cn-rise .35s var(--cn-silk) both; }
.ag-rb-uitleg { font: 400 15.5px/1.6 var(--cn-f-sans); color: var(--cn-text-2); margin: 0 0 8px; }
.ag-som { font-size: var(--cn-fs-s); color: var(--cn-nude-ink); margin: 0; font-variant-numeric: tabular-nums; }
.ag-rb-list { list-style: none; margin: 0; padding: 0; font-size: var(--cn-fs-xs); }
.ag-rb-list li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 2px 8px; padding: 7px 0; border-top: 1px dotted var(--cn-line-2); }
.ag-rb-d { color: var(--cn-muted); }
.ag-rb-o { min-width: 0; overflow-wrap: anywhere; }
.ag-rb-o a { color: var(--cn-text); text-decoration-color: var(--cn-line-2); }
.ag-rb-o a:hover { text-decoration-color: currentColor; }
.ag-rb-v { grid-column: 2; text-align: right; white-space: nowrap; }
/* 5g: het ene grote getal */
.ag-rb-5g > summary { grid-template-areas: "c l l l" "c g g g" "c x x x"; border-top: 3px double var(--cn-text); border-bottom: 0; margin-top: 10px; padding: 16px 0 8px; }
.ag-rb-5g .ag-rb-l { font: 500 17.5px/1.35 var(--cn-f-sans); }
.ag-rb-sub { display: block; font: 400 var(--cn-fs-xs)/1.4 var(--cn-f-sans); color: var(--cn-muted); font-style: normal; margin-top: 2px; }
.ag-rb-big { grid-area: g; justify-self: end; margin-top: 4px; }
.ag-rb-big .big-money { font-size: clamp(40px, 12vw, 58px); }
.ag-rb-5g > summary > .ag-rb-x { grid-area: x; justify-self: end; }
.ag-rb-5g .ag-rb-body { border-bottom: 0; }
.ag-paper-foot { margin-top: 18px; padding: 14px 96px 0 0; border-top: 1px solid var(--cn-line); min-height: 100px; }
.ag-paper-foot .hand { margin: 0 0 6px; color: var(--cn-text-2); }
.ag-kor .letter { max-width: 60ch; }
.ag-kor .paper-head .stamp { --s: 78px; }

/* =========================================================== 5. checklist, deadline, acties */
.ag-dl { display: flex; align-items: center; gap: 16px; padding: 14px 16px; }
.ag-dl-t { margin: 0; font: 500 17px/1.4 var(--cn-f-sans); }
.ag-dl-s { margin: 2px 0 6px; font-size: var(--cn-fs-s); color: var(--cn-muted); }
.ag-dl-weekend { color: var(--cn-text-2); line-height: 1.5; } /* "31 oktober valt in het weekend: dien in en betaal uiterlijk vrijdag 30 oktober" */
.ag-acties { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.ag-acties .note { margin: 0; }
.ag-undo { align-self: center; min-height: 44px; font-size: var(--cn-fs-s); color: var(--cn-muted); }
.ag-check { padding: 6px 16px 12px; }
.ag-check .ag-h2 { margin: 12px 0 2px; font-size: 20px; }
.ag-hand { list-style: none; margin: 0; padding: 0; }
.ag-hand li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 0 8px; align-items: start; line-height: 32px; }
.ag-hand li .ag-vink { margin-top: 4px; }
.ag-hand li .hand { line-height: 32px; padding: 0; font-size: 16px; color: var(--cn-text); } /* elke regel staat op een lijn van het gelinieerde papier (32px), ook een afgebroken regel */
.ag-hand li.open .hand { color: var(--cn-text-2); }
.ag-hand-go { font-size: var(--cn-fs-xs); color: var(--cn-accent-ink); line-height: 32px; min-height: 32px; padding: 0 2px; }
.ag-excel .ag-h2 { margin-top: 8px; font-size: 20px; }
.ag-excel .btn-row .btn { flex: 1 1 auto; }
.ag-excel .btn[aria-busy="true"] { opacity: .7; }

/* =========================================================== 6. IB-jaar */
.ag-vellen { display: grid; gap: 18px; align-items: start; }
.ag-vel { padding: 22px 16px 18px; }
.ag-vel table td { padding: 10px 0; }
.ag-vel table td:first-child { padding-right: 10px; }
.ag-vel thead + tbody tr:first-child td { padding-top: 10px; }
.ag-vel tbody + thead th { padding-top: 22px; }
.ag-vel a { color: var(--cn-text); text-decoration-color: var(--cn-line-2); }
.ag-td-sub, html[data-app="boek"] .ag-td-sub.hand { display: block; font-size: 14px; line-height: 1.45; color: var(--cn-muted); margin-top: 3px; } /* ook als hij .hand is (wint van de .hand-regel in app.css) */
.ag-tot td { font-weight: 600; border-top: 1px solid var(--cn-text); }
.ag-winst-rij td { font: 500 18px/1.35 var(--cn-f-sans); border-top: 3px double var(--cn-text); border-bottom: 0 !important; padding-top: 14px !important; }
.ag-ctrl-rij td { border-bottom: 0 !important; padding-top: 14px !important; }
.ag-ctrl-l { display: inline-flex; align-items: center; gap: 8px; }
.ag-ctrl-rij.ok td.n { color: var(--cn-ok); }
.ag-ctrl-rij.warn td.n { color: var(--cn-warn); }
.ag-ctrl-rij.nvt td.n { color: var(--cn-muted); font-size: var(--cn-fs-s); }
.ag-ctrl-nvt { display: inline-grid; place-items: center; width: 22px; color: var(--cn-faint); font: 400 17px/1 var(--cn-f-serif); } /* vóór het startjaar: geen vinkje, een streepje */
.ag-ctrl { list-style: none; margin: 0; padding: 4px 16px; background: var(--cn-card); border: 1px solid var(--cn-hair); border-radius: var(--cn-r); box-shadow: var(--cn-shadow-1); }
.ag-ctrl li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 2px 10px; align-items: start; padding: 12px 0; }
.ag-ctrl li + li { border-top: 1px solid var(--cn-line); }
.ag-ctrl-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cn-line-2); margin: 9px 0 0 9px; }
.ag-ctrl-t { min-width: 0; }
.ag-ctrl-k { display: block; font-size: 16px; }
.ag-ctrl-s { display: block; font-size: 14.5px; line-height: 1.45; color: var(--cn-muted); margin-top: 2px; }
.ag-ctrl-v { font-size: 16px; white-space: nowrap; }
.ag-ctrl li.warn .ag-ctrl-v { color: var(--cn-warn); }
.ag-ctrl li.ok .ag-ctrl-v { color: var(--cn-ok); }
.ag-blok > .callout { margin-bottom: 12px; }
.ag-bank { display: grid; gap: 12px; margin-top: 10px; }
.ag-bank .card + .card { margin-top: 0; }
.ag-bank .eyebrow { margin-bottom: 6px; }
.ag-mini { list-style: none; margin: 0; padding: 0; font-size: 15.5px; }
.ag-mini li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--cn-line); align-items: baseline; }
.ag-mini-d { color: var(--cn-muted); font-size: var(--cn-fs-xs); }
.ag-mini-o { min-width: 0; overflow-wrap: anywhere; }
.ag-mini-o a { color: var(--cn-text); text-decoration-color: var(--cn-line-2); }
.ag-mini-v { white-space: nowrap; }
.ag-mini.twee li { grid-template-columns: minmax(0, 1fr) auto; }
.ag-prive { grid-column: 1 / -1; }
.ag-prive-c { display: grid; gap: 18px; }
.ag-prive-c .ag-som-r { margin-top: 4px; border-top: 0; border-bottom: 1px solid var(--cn-text); padding: 0 0 8px; }
.ag-som-r { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--cn-text); font-size: var(--cn-fs-s); }
.ag-saldi { margin-top: 12px; padding: 12px 16px; background: var(--cn-bg-2); border-radius: var(--cn-r-s); }
.ag-saldi p { display: flex; gap: 8px; align-items: baseline; margin: 0 0 4px; font-size: var(--cn-fs-s); }
.ag-saldi p > span:first-child { flex: 1; }
.ag-saldi .note { display: block; margin: 6px 0 0; }
.ag-kaarten { display: grid; gap: 12px; margin-top: 26px; }
.ag-kaarten .card + .card { margin-top: 0; }
.ag-kaart h3 { font-size: 21px; margin-bottom: 4px; }
.ag-kaart-zin { font: 400 17px/1.55 var(--cn-f-sans); margin: 6px 0 6px; }
.ag-kaart-zin strong { font-weight: 500; color: var(--cn-text); }
.ag-schat-band { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-size: var(--cn-fs-s); color: var(--cn-text-2); background: var(--cn-warn-tint); padding: 12px 14px; border-radius: var(--cn-r-s); }
.ag-schat-zin { font: 400 18px/1.6 var(--cn-f-sans); margin: 16px 0 14px; max-width: 50ch; text-wrap: pretty; }
.ag-schat-zin strong { font-weight: 500; color: var(--cn-text); }
.ag-scen .item { align-items: flex-start; }
.ag-scen .lead { font: italic 15px/1 var(--cn-f-serif); }
.ag-scen .t { line-height: 1.3; }
.ag-scen .s { margin-top: 3px; }
.ag-bronnen { margin-top: 12px; padding: 4px 16px 12px; border: 1px solid var(--cn-hair); border-radius: var(--cn-r); background: var(--cn-card); }
.ag-bronnen > summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; font-size: var(--cn-fs-s); color: var(--cn-accent-ink); }
.ag-bron-l { margin: 12px 0 0; padding-left: 18px; font-size: var(--cn-fs-xs); color: var(--cn-muted); }

/* =========================================================== 7. meer: de inhoudsopgave */
.ag-inhoud { padding: 30px 20px 22px; max-width: 760px; }
.ag-inhoud-t { font-size: 34px; margin: 0 0 14px; }
.ag-inhoud ol { list-style: none; margin: 0; padding: 0; }
.ag-inhoud li a {
  display: grid; grid-template-columns: 38px auto minmax(14px, 1fr) auto; grid-template-areas: "nr ti lead end" ". sub sub sub";
  align-items: baseline; column-gap: 8px; padding: 14px 0 12px; min-height: 64px; color: var(--cn-text); text-decoration: none; border-bottom: 1px solid var(--cn-line);
}
.ag-inhoud li:last-child a { border-bottom: 0; }
.ag-inhoud-nr { grid-area: nr; font: italic 16px/1 var(--cn-f-serif); color: var(--cn-muted); }
.ag-inhoud-ti { grid-area: ti; font: 400 20px/1.2 var(--cn-f-serif); min-width: 0; }
.ag-inhoud-lead { grid-area: lead; border-bottom: 1.5px dotted var(--cn-line-2); transform: translateY(-4px); }
.ag-inhoud-end { grid-area: end; font-size: var(--cn-fs-xs); color: var(--cn-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ag-inhoud-sub { grid-area: sub; font-size: var(--cn-fs-xs); color: var(--cn-muted); margin-top: 4px; }
.ag-inhoud li a:hover .ag-inhoud-ti { color: var(--cn-accent-ink); }
.ag-inhoud li a:hover .ag-inhoud-lead { border-bottom-color: var(--cn-text); }
.ag-inhoud-folio { margin: 18px 0 0; text-align: center; font-size: 13px; }
.ag-inhoud-folio::before { content: ""; }

/* =========================================================== 8. activa, ritten, uitgangspunten, export, logboek */
.ag-activa { display: grid; gap: 14px; }
.ag-activa .card + .card { margin-top: 0; }
.ag-activum .card-head h3 { font-size: 21px; }
.ag-activum-rest { background: var(--cn-bg-2); border-radius: var(--cn-r-s); padding: 14px; margin: 6px 0 12px; }
.ag-activum-rest .eyebrow { margin-bottom: 4px; }
.ag-activum-big { font: 400 30px/1.1 var(--cn-f-serif); margin: 0 0 10px; }
.ag-activum-rest .note { margin-bottom: 0; }
.ag-schema { width: 100%; border-collapse: collapse; font-size: var(--cn-fs-s); }
.ag-schema th { text-align: left; font-weight: 400; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--cn-muted); padding: 0 8px 6px; border-bottom: 1px solid var(--cn-text); }
.ag-schema td { padding: 7px 8px; border-bottom: 1px solid var(--cn-line); }
.ag-schema .n { text-align: right; white-space: nowrap; }
.ag-schema tr.nu td { background: var(--cn-select); font-weight: 600; }
.ag-activum-n { color: var(--cn-muted); margin: 12px 0 0; font-size: var(--cn-fs-s); }
.ag-rit-aan { padding: 4px 16px; margin: 0 0 16px; }
.ag-kw .t, .ag-kw .s { white-space: normal; }
.ag-kw-st { display: block; margin-top: 6px; }
.ag-kw-st:empty { display: none; }
.ag-rit-dag { display: flex; flex-direction: column; align-items: center; line-height: 1; font: 400 16px/1 var(--cn-f-serif); font-style: normal; }
.ag-rit-dag small { font: 400 9px/1.2 var(--cn-f-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--cn-muted); margin-top: 2px; }
.ag-ritten .item .s { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ag-rit-tot { background: var(--cn-nude); border-radius: var(--cn-r-s); padding: 12px 14px; margin: 4px 0 8px; font-size: var(--cn-fs-s); }
.ag-ups { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ag-up {
  width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr) 22px; gap: 12px; align-items: start; text-align: left; padding: 16px;
  border: 1px solid var(--cn-hair); border-radius: var(--cn-r); background: var(--cn-card); box-shadow: var(--cn-shadow-1); color: var(--cn-text);
  transition: border-color var(--cn-t-fast);
}
.ag-up:hover { border-color: var(--cn-line-2); }
.ag-up-nr { font: italic 18px/1.3 var(--cn-f-serif); color: var(--cn-muted); }
.ag-up-k { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font: 500 17px/1.4 var(--cn-f-sans); }
.ag-up-u { display: block; font-size: 15.5px; line-height: 1.5; color: var(--cn-text-2); margin-top: 4px; }
.ag-up-i { display: block; font-size: var(--cn-fs-s); color: var(--cn-muted); margin-top: 6px; }
.ag-up .chev { color: var(--cn-faint); margin-top: 3px; }
.ag-exps { display: grid; gap: 12px; }
.ag-exps .card + .card { margin-top: 0; }
.ag-exp-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.ag-exp-ic { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--cn-nude); color: var(--cn-nude-ink); }
.ag-exp h3 { margin-bottom: 2px; }
.ag-log { padding: 18px 16px 24px; }
.ag-log section + section { margin-top: 10px; }
.ag-log-d { font: 400 var(--cn-fs-label)/32px var(--cn-f-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--cn-muted); margin: 0; }
.ag-log ul { list-style: none; margin: 0; padding: 0; }
.ag-log li { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 8px; line-height: 32px; font-size: var(--cn-fs-s); }
.ag-log-t { color: var(--cn-muted); font-size: var(--cn-fs-xs); }
.ag-log-w { min-width: 0; overflow-wrap: anywhere; }

/* =========================================================== 9. huisregels */
.ag-stand { margin: 2px 0 18px; }
.ag-stand-zin { font: 400 20px/1.4 var(--cn-f-serif); margin: 0 0 10px; }
.ag-stand-zin strong { font-weight: 600; }
/* de huisregels horen bij beide kanten; vanuit Boekhouding in de letter van Boekhouding (BESLUITEN-JORDY 35) */
html[data-app="boek"] .ag-stand-zin { font: 400 18px/1.55 var(--cn-f-sans); }
html[data-app="boek"] .ag-stand-zin strong { font-weight: 500; color: var(--cn-text); }
.ag-stand-r { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.ag-stand .meter { flex: 1 1 200px; max-width: 420px; height: 6px; }
.ag-alles { font-size: var(--cn-fs-s); min-height: 44px; }
.ag-hr { display: grid; gap: 14px; }
.ag-toc { display: none; }
.ag-toc-t { margin: 0; padding: 0 10px 8px; font-size: var(--cn-fs-label); letter-spacing: var(--cn-track); text-transform: uppercase; color: var(--cn-muted); }
.ag-toc ol { list-style: none; margin: 0; padding: 0; }
.ag-toc-b { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px; border: 0; background: transparent; border-radius: var(--cn-pill); text-align: left; font-size: var(--cn-fs-s); color: var(--cn-text-2); }
.ag-toc-b:hover { background: var(--cn-accent-tint); color: var(--cn-text); }
.ag-toc-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--cn-line-2); }
.ag-toc-dot.open { background: var(--cn-warn); }
.ag-toc-dot.ok { background: var(--cn-ok); }
.ag-regels { min-width: 0; }
.ag-regel { scroll-margin-top: calc(var(--cn-top-h) + var(--cn-safe-t) + 14px); padding: 0 18px; }
.ag-regels > .ag-regel + .ag-regel { margin-top: 10px; }
.ag-regel-head { display: grid; grid-template-columns: 34px minmax(0, 1fr) 24px; grid-template-areas: "nr ti ch" ". vr ." ". st ."; gap: 4px 8px; align-items: baseline; padding: 16px 0; cursor: pointer; list-style: none; border-radius: var(--cn-r-s); }
.ag-regel-head::-webkit-details-marker { display: none; }
.ag-regel-head:focus-visible { outline-offset: 6px; }
.ag-regel-nr { grid-area: nr; font: italic 17px/1 var(--cn-f-serif); color: var(--cn-muted); }
.ag-regel.te-beslissen .ag-regel-nr { color: var(--cn-warn); }
.ag-regel-head h2 { grid-area: ti; font-size: 21px; margin: 0; min-width: 0; }
.ag-regel-vraag { grid-area: vr; color: var(--cn-muted); font-size: 17px; line-height: 1.4; }
.ag-regel-st { grid-area: st; justify-self: start; margin-top: 6px; }
.ag-regel-chev { grid-area: ch; align-self: center; display: grid; place-items: center; width: 24px; height: 24px; color: var(--cn-muted); transition: transform .35s var(--cn-silk); }
.ag-regel[open] > .ag-regel-head .ag-regel-chev { transform: rotate(180deg); }
.ag-regel-head:hover .ag-regel-chev { color: var(--cn-text); }
.ag-regel-body { padding: 4px 0 4px; border-top: 1px solid var(--cn-line); padding-top: 16px; }
.ag-regel-body > .field:last-child, .ag-regel-body > .row:last-child .field { margin-bottom: 0; }
.ag-regel-foot { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: space-between; margin-top: 14px; padding: 14px 0 16px; border-top: 1px dashed var(--cn-line-2); }
.ag-regel-ok { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: var(--cn-fs-s); color: var(--cn-text-2); }
.ag-regel-foot.ok .ag-regel-ok { color: var(--cn-ok); }
.ag-namen { margin-bottom: 6px; }
.ag-namen .chip { min-height: 44px; }
.ag-namen-h { display: block; margin: 2px 0 4px; font-size: var(--cn-fs-s); color: var(--cn-muted); }
.ag-uitleg { font-size: var(--cn-fs-s); color: var(--cn-text-2); margin: 0 0 14px; max-width: 64ch; }
.ag-sub { font: 400 var(--cn-fs-label)/1.3 var(--cn-f-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--cn-muted); margin: 20px 0 10px; }
.ag-keuze { gap: 8px; margin-bottom: 4px; }
.ag-keuze .radio-card { min-height: 56px; }
.ag-keuze .radio-card.ag-uit { border-style: dashed; background: transparent; cursor: not-allowed; box-shadow: none; }
.ag-keuze .radio-card.ag-uit .t, .ag-keuze .radio-card.ag-uit .d { color: var(--cn-muted); }
.ag-keuze .radio-card.ag-uit .ic { background: var(--cn-bg-2); color: var(--cn-faint); }
.ag-uit-b { margin-left: 8px; font-weight: 400; vertical-align: 1px; }
.ag-jaren { list-style: none; margin: 0; padding: 0; }
.ag-jaren li { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--cn-line); }
.ag-jaren li:last-child { border-bottom: 0; }
.ag-jaren-j { font: italic 21px/1 var(--cn-f-serif); width: 52px; }
.ag-jaren-s { font-size: var(--cn-fs-s); color: var(--cn-muted); }
.ag-meer { margin-top: 16px; border-top: 1px solid var(--cn-line); }
.ag-meer > summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; font-size: var(--cn-fs-s); color: var(--cn-accent-ink); }
.ag-meer .kv { margin-bottom: 10px; }
.ag-voorbeeld { display: flex; flex-direction: column; gap: 6px; background: var(--cn-nude); border-radius: var(--cn-r-s); padding: 14px 16px; margin: 0 0 16px; }
.ag-voorbeeld .eyebrow { margin: 0; }
.ag-voorbeeld-n { font-size: 26px; color: var(--cn-text); font-variant-numeric: lining-nums tabular-nums; }
.ag-sleutel .input[disabled] { background: var(--cn-bg-2); border-style: dashed; cursor: not-allowed; color: var(--cn-muted); }
.ag-sleutel .input[disabled]::placeholder { color: var(--cn-muted); font-style: italic; }
.ag-sleutel .post .icon { color: var(--cn-muted); }
.ag-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.ag-row3 .field > label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-reks { list-style: none; margin: 0; padding: 0; }
.ag-rek + .ag-rek { border-top: 1px solid var(--cn-line); padding-top: 14px; margin-top: 4px; }
.ag-rek-k { margin: 0 0 10px; }
.ag-bronnen-l ul { margin: 0; padding-left: 18px; color: var(--cn-text-2); font-size: var(--cn-fs-s); }
.ag-bronnen-l .eyebrow { margin: 6px 0 6px; }
.ag-reset { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; background: var(--cn-bad-tint); border-radius: var(--cn-r-s); padding: 14px 16px; margin-top: 8px; }
.ag-reset > div { flex: 1 1 240px; }
.ag-reset-t { font-weight: 600; margin: 0 0 2px; }

/* =========================================================== 10. beweging */
@keyframes ag-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.ag-hand li .ag-vink.ok path { animation: ag-draw .7s var(--cn-silk) both; }
.ag-hand li:nth-child(2) .ag-vink.ok path { animation-delay: .12s; }
.ag-hand li:nth-child(3) .ag-vink.ok path { animation-delay: .24s; }
.ag-hand li:nth-child(4) .ag-vink.ok path { animation-delay: .36s; }
.ag-hand li:nth-child(n+5) .ag-vink.ok path { animation-delay: .48s; }
.ag-calm .ag-vink path, .ag-calm .ag-rb-body { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .ag-cal { transform: none; }
  .ag-vink path { animation: none !important; stroke-dashoffset: 0; }
}

/* =========================================================== 11. breekpunten */
@media (min-width: 560px) {
  .ag-paper { padding: 32px 30px 28px; }
  .ag-paper-head .paper-meta { flex: 0 0 auto; text-align: right; margin: 0 0 0 auto; }
  /* breed: alles op één regel, de stippellijn loopt van de omschrijving naar de bedragen, zoals op een prijslijst */
  .ag-cols, .ag-rb > summary { grid-template-columns: 34px minmax(0, max-content) minmax(18px, 1fr) 96px 86px; grid-template-areas: "c l d o b"; column-gap: 12px; }
  .ag-cols { grid-template-areas: "c l d o b"; }
  .ag-rb.alleen-btw > summary { grid-template-areas: "c l d d b"; }
  .ag-rb-lead { margin: 0 -12px 0 4px; }
  .ag-rb-5g > summary { grid-template-areas: "c l g g g" "c . x x x"; align-items: center; }
  .ag-rb-body { padding-left: 50px; }
  .ag-stamp { --s: 96px; right: 26px; bottom: 22px; }
  .ag-stamp small { bottom: 18px; }
  .ag-paper-foot { padding-right: 120px; }
  .ag-vel { padding: 28px 26px 22px; }
  .ag-rb-list li { grid-template-columns: 52px minmax(0, 1fr) auto; }
  .ag-rb-v { grid-column: auto; }
  .ag-inhoud { padding: 40px 40px 28px; }
  .ag-log { padding: 22px 28px 28px; }
}
@media (min-width: 768px) {
  .ag-schat-zin, html[data-app="boek"] .ag-stand-zin { font-size: 19px; }
  .ag-nu { grid-template-columns: auto minmax(0, 1fr) auto; padding: 20px 22px; }
  .ag-nu > .btn { grid-column: auto; }
  .ag-bank { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ag-kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ag-prive-c { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .ag-kaarten > :nth-child(3) { grid-column: 1 / -1; }
  .ag-exps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ag-keuze { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .ag-checks { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ag-regel { padding: 0 26px; }
  .ag-regel-body > .field, .ag-regel-body > .ag-sleutel { max-width: 560px; }
  .ag-regel-body > .row { max-width: 820px; }
  .ag-regel-head { padding: 20px 0 18px; grid-template-columns: 40px minmax(0, 1fr) auto 24px; grid-template-areas: "nr ti st ch" ". vr vr ."; column-gap: 12px; }
  .ag-regel-head h2 { font-size: 23px; }
  .ag-regel-vraag { font-size: 19px; }
  .ag-regel-st { margin-top: 0; align-self: center; }
}
@media (min-width: 1180px) {
  .ag-twee { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .ag-brief-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); gap: 28px; align-items: start; }
  .ag-brief-b { display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(var(--cn-top-h) + 16px); }
  .ag-brief-b > .ag-dl { order: 0; }
  .ag-vellen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .ag-activa { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ag-kaarten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ag-kaarten > :nth-child(3) { grid-column: auto; }
  .ag-ups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ag-exps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ag-hr { grid-template-columns: 250px minmax(0, 1fr); gap: 28px; align-items: start; }
  .ag-toc { display: block; position: sticky; top: calc(var(--cn-top-h) + 16px); }
}
@media print {
  .ag-brief-b, .ag-kwnav { display: none !important; }
  .ag-paper { box-shadow: none; }
}