/* Papier met een indigo ondertoon, indigo als merkkleur. Blauw en rood blijven
   het paar voor beter/slechter: die twee zijn ook met kleurenblindheid uit
   elkaar te houden, rood-groen niet. De accentkleur is expres paars en geen
   blauw, zodat een link niet leest als "dit gaat de goede kant op".
   Elke tekstcombinatie haalt WCAG AA (4,5); dat is nagerekend, niet geschat. */
:root {
  color-scheme: light;
  --surface: #f7f7fb;
  --card: #ffffff;
  --line: #e0dfee;
  --ink: #17162a;
  --ink-2: #4e4c66;
  --ink-3: #6a6882;
  --good: #1a68be;   /* saldo verbetert */
  --bad: #c33535;    /* saldo verslechtert */
  --neutral: #edecf6;
  --accent: #4b3fc4;
  --on-accent: #ffffff;
  --focus: #4b3fc4;
  --accent-zacht: #eceafb;   /* accentvlak dat tekst nog draagt */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface: #16151d;
    --card: #1e1d28;
    --line: #33313f;
    --ink: #f5f4fb;
    --ink-2: #bdbbcd;
    --ink-3: #9d9bb3;
    --good: #5b9df0;
    --bad: #f07878;
    --neutral: #33313f;
    --accent: #a99cff;
    --on-accent: #1f1a4a;
    --focus: #a99cff;
    --accent-zacht: #262238;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font: 16px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: 1120px; margin: 0 auto; padding: 32px 20px 96px; }

a { color: var(--accent); }

h1 { font-size: clamp(1.6rem, 4vw, 2.3rem); line-height: 1.15; margin: 0 0 .4em; letter-spacing: -.02em; }
h2 { font-size: 1.15rem; margin: 2.4em 0 .8em; letter-spacing: -.01em; }
h3 { font-size: .95rem; margin: 0 0 .3em; }
.lead { color: var(--ink-2); font-size: 1.05rem; max-width: 62ch; margin: 0 0 1.5em; }
.muted { color: var(--ink-3); font-size: .82rem; }

/* ---------------------------------------------------------------- kerncijfers */

.tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.tile {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
}
.tile .label { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.tile .value { font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 650; line-height: 1.12; letter-spacing: -.03em; margin: 4px 0 6px; font-variant-numeric: tabular-nums; }
.tile .sub { font-size: .85rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tile.hero { grid-column: 1 / -1; }
.tile.hero .value { font-size: clamp(2.2rem, 8vw, 3.4rem); }

.up { color: var(--good); }
.down { color: var(--bad); }

/* ---------------------------------------------------------------- schuiven */

.cols { display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .cols { grid-template-columns: 1fr 1fr; gap: 36px; } }

.group { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 4px 18px 18px; }

.row { padding: 14px 0; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }
.row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.row-top .amt { font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: .88rem; white-space: nowrap; }
.row .hint { font-size: .8rem; color: var(--ink-3); margin: 2px 0 6px; }

.ctl { display: flex; align-items: center; gap: 12px; }
.ctl output {
  min-width: 4.6em; text-align: right; font-variant-numeric: tabular-nums;
  font-weight: 600; font-size: .9rem;
}

input[type="range"] { flex: 1; min-width: 0; accent-color: var(--accent); height: 22px; }
input[type="range"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

.row.locked { opacity: .65; }

/* Een groep: één schuif voor het geheel, uitklapbaar naar de regelingen. */
.groep-rij { background: var(--neutral); margin: 0 -18px; padding: 14px 18px; }
.groep-rij + .row { padding-top: 16px; }

.uitklap {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 12px; padding: 5px 10px 5px 7px;
  background: var(--card); color: var(--accent);
  border: 1px solid var(--line); border-radius: 7px;
  font: inherit; font-size: .82rem; cursor: pointer;
}
.uitklap:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.uitklap .pijl { font-size: 1em; line-height: 1; color: var(--ink-3); }

.regelingen { margin-top: 30px; }
.regelingen h2 { margin-top: 0; }
.regelingen .lead { margin-bottom: 14px; }

.groep-body { margin-top: 6px; }
.row.in-groep {
  padding-left: 14px; margin-left: 2px;
  border-left: 2px solid var(--line);
}

/* ---------------------------------------------------------------- gevolgen */

.cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.card .delta { font-variant-numeric: tabular-nums; font-weight: 650; font-size: 1.05rem; }
.card p { margin: 6px 0 0; font-size: .88rem; color: var(--ink-2); }

/* ---------------------------------------------------------------- schade */

/* Statuskleuren zijn vast en dragen nooit alleen de boodschap: elk blok heeft
   ook het woord in de badge staan. */
.schade {
  --status: #fab219;
  background: var(--card); border: 1px solid var(--line);
  border-left: 4px solid var(--status);
  border-radius: 0 12px 12px 0; padding: 16px 18px; margin-bottom: 12px;
}
.schade.ernstig { --status: #ec835a; }
.schade.kritiek { --status: #d03b3b; }

.schade-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.schade-top h3 { margin: 0; font-size: 1rem; flex: 1 1 auto; }
.badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: var(--status); color: #16150f;
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
}
.schade-titel { color: var(--ink-2); font-weight: 400; }
.schade-titel::before { content: "· "; color: var(--ink-3); }
.schade-prijs { font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; }
.schade-prijs .muted { font-weight: 400; font-size: .8rem; }

.schade-verhaal { margin: 10px 0 0; font-size: .97rem; }
.schade-eerder { margin: 8px 0 0; padding-left: 1.15em; font-size: .85rem; color: var(--ink-3); }
.schade-eerder li { margin-bottom: 3px; }
.schade-waarom {
  margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: .88rem; color: var(--ink-2);
}
.schade-waarom strong { color: var(--ink); }
.averechts {
  margin: 12px 0 0; padding: 10px 14px;
  background: var(--neutral); border-radius: 8px;
  font-size: .9rem; border-left: 3px solid var(--status);
}
.averechts strong { white-space: nowrap; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88em; background: var(--neutral); padding: 1px 5px; border-radius: 4px;
}

/* ---------------------------------------------------------------- keten */

.keten {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.keten li {
  position: relative;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 16px 18px 14px;
}
/* De pijl tussen twee stappen: alleen zichtbaar als ze naast elkaar staan. */
@media (min-width: 940px) {
  .keten li + li::before {
    content: "\2192"; position: absolute; left: -15px; top: 50%;
    transform: translateY(-50%); color: var(--ink-3); font-size: 1rem;
  }
}
.stap-nr {
  display: inline-grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--neutral); color: var(--ink-2);
  font-size: .72rem; font-weight: 700;
}
.keten h3 { margin: 8px 0 2px; font-size: .92rem; }
.stap-waarde {
  font-size: 1.6rem; font-weight: 650; letter-spacing: -.02em;
  line-height: 1.15; font-variant-numeric: tabular-nums; margin-bottom: 6px;
}
.stap-waarde.klein { font-size: 1.05rem; font-weight: 600; }
.stap-waarde.klein .muted { font-size: .8rem; font-weight: 400; }
.keten p { margin: 0; font-size: .82rem; color: var(--ink-2); }

.papier {
  display: grid; gap: 8px 22px; align-items: center; margin-top: 14px;
  grid-template-columns: 1fr auto 1fr;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 18px;
}
.papier .label { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.papier .value { font-size: 1.7rem; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.papier .muted { margin: 0; }
.papier .pijl { font-size: 1.4rem; color: var(--ink-3); }
.papier-uitleg {
  grid-column: 1 / -1; margin: 6px 0 0; padding-top: 14px;
  border-top: 1px solid var(--line); font-size: .9rem; color: var(--ink-2);
}
.papier-uitleg strong { color: var(--ink); }
@media (max-width: 560px) {
  .papier { grid-template-columns: 1fr; }
  .papier .pijl { transform: rotate(90deg); }
}

/* ---------------------------------------------------------------- koopkracht */

.kk { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 4px 18px; margin-bottom: 18px; }
.kk-regel {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 13px 0; border-bottom: 1px solid var(--line);
}
.kk-regel:last-child { border-bottom: 0; }
.kk-naam { font-size: .93rem; font-weight: 600; }
.kk-regel .muted { margin: 2px 0 0; }
.kk-bedrag { font-size: 1.15rem; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kk-bedrag .muted { font-size: .78rem; font-weight: 400; }
.kk-totaal { border-top: 2px solid var(--line); }
.kk.types .kk-bedrag { text-align: right; line-height: 1.3; }
.kk.types .ijkpunt { background: var(--neutral); margin: 0 -18px; padding: 13px 18px; }
.typekop { font-size: 1rem; margin: 26px 0 .4em; }
.kk-totaal .kk-naam, .kk-totaal .kk-bedrag { font-size: 1.25rem; }

/* ---------------------------------------------------------------- doorwerking */

/* Eén lijst in plaats van losse blokken: bij twintig schuiven scrollt dat
   anders eindeloos. De doorwerking zit achter een <details>, dus zonder JS. */
.gevolgen {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 2px 18px; margin: 14px 0 0;
}
.gevolg-rij { padding: 12px 0; border-bottom: 1px solid var(--line); }
.gevolg-rij:last-child { border-bottom: 0; }
.gevolg-kop {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 6px 14px;
}
.gevolg-naam { font-size: .95rem; font-weight: 600; }
.gevolg-delta { font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; }
.gevolg-delta .muted { font-weight: 400; }
.gevolg-regel { margin: 3px 0 0; font-size: .88rem; color: var(--ink-2); }

.gevolg-meer > summary { margin: 8px 0 0; font-size: .82rem; }
.gevolg-meer[open] > summary { margin-bottom: 10px; }
.gevolg-wie { margin: 0 0 4px; font-size: .88rem; }
.citaat { display: block; margin-top: 6px; padding-left: 12px; border-left: 2px solid var(--line); color: var(--ink-2); font-style: italic; }
.citaat .muted { font-style: normal; }

.keuzes { display: grid; gap: 18px; margin-top: 12px; }
@media (min-width: 760px) { .keuzes { grid-template-columns: 1.35fr 1fr; gap: 28px; } }
.keuzes h4 { margin: 0 0 8px; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.keuzes ul { margin: 0; padding-left: 1.15em; font-size: .9rem; }
.keuzes li { margin-bottom: 5px; }
.keuzes li::marker { color: var(--ink-3); }
.keuzes p.muted { margin: 10px 0 0; }
.kanttekening { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }

/* ---------------------------------------------------------------- tabel */

table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: right; font-variant-numeric: tabular-nums; }
th:first-child, td:first-child { text-align: left; font-variant-numeric: normal; }
thead th { color: var(--ink-3); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.scroll { overflow-x: auto; }
details > summary { cursor: pointer; color: var(--accent); font-size: .88rem; margin: 14px 0; }

.jaren {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 6px 18px 12px; margin-top: 14px;
}
.jaar-kop, .jaar-rij, .jaar-norm {
  display: grid; grid-template-columns: 62px 72px minmax(0, 1fr);
  gap: 14px; align-items: center;
}
.jaar-kop {
  padding: 10px 0 6px; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-3);
}
.jaar-rij { padding: 7px 0; border-top: 1px solid var(--line); }
.jaar-naam { font-weight: 600; font-variant-numeric: tabular-nums; }
.jaar-saldo { font-variant-numeric: tabular-nums; font-weight: 600; font-size: .92rem; }

/* De baan loopt van 0 tot 100% van het bbp, met de Europese norm op 60%. */
.jaar-baan { position: relative; display: block; height: 22px; background: var(--neutral); border-radius: 4px; }
.jaar-baan i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; display: block; }
.jaar-baan b { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: var(--ink); opacity: .55; }
.jaar-baan::after {
  content: ""; position: absolute; left: 60%; top: -3px; bottom: -3px;
  width: 2px; margin-left: -1px; background: var(--ink-3);
}
.jaar-baan em {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-style: normal; font-size: .78rem; font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}
.jaar-norm { padding-top: 8px; margin: 0; font-size: .78rem; color: var(--ink-3); }

.sprong {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line);
}
.sprong a {
  padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px;
  font-size: .82rem; text-decoration: none; background: var(--card);
}
.sprong a:hover { border-color: var(--accent); }
.sprong a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Springen mag niet onder een kop landen. */
h2 { scroll-margin-top: 16px; }

/* ---------------------------------------------------------------- delen */

.deel { display: grid; gap: 20px; align-items: start; margin-top: 14px; }
@media (min-width: 720px) { .deel { grid-template-columns: 340px 1fr; gap: 28px; } }

#kaart {
  width: 100%; max-width: 420px; height: auto; display: block;
  border: 1px solid var(--line); border-radius: 14px;
  /* De kaart is altijd licht, ook in een donker thema: hij wordt gedeeld. */
  background: #fff;
}
.deel-knoppen { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.deel-knoppen p { flex: 1 0 100%; margin: 0 0 4px; font-size: .9rem; color: var(--ink-2); }
.deel-status { flex: 1 0 100%; margin: 2px 0 0; min-height: 1.2em; }

/* ---------------------------------------------------------------- knoppen */

.actions {
  position: sticky; bottom: 0; z-index: 5;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 14px 0 calc(14px + env(safe-area-inset-bottom, 0px));
  margin-top: 28px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
}
.actions .live { font-variant-numeric: tabular-nums; font-size: .95rem; }

/* De koffieknop van Buy Me a Coffee zweeft rechtsonder: 64x64 met 18px marge.
   Deze balk plakt aan diezelfde onderrand, dus zonder ruimte in de hoek komt
   de knop bovenop "Terug naar het kabinetsplan" te liggen. Op brede schermen
   is er ruimte zat, dus alleen reserveren waar het knelt. */
@media (max-width: 760px) {
  .actions { padding-right: 86px; }
}

.btn {
  display: inline-block; background: var(--accent); color: var(--on-accent);
  border: 1px solid transparent; border-radius: 9px;
  padding: 11px 20px; font: inherit; font-weight: 600; cursor: pointer;
  text-decoration: none;
}
.btn.ghost { background: transparent; color: var(--accent); border-color: var(--line); }
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.note { background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; padding: 12px 16px; font-size: .86rem; color: var(--ink-2); }
.note p { margin: 0 0 .5em; }
.note p:last-child { margin: 0; }

/* Tekstpagina's -------------------------------------------------------- */

/* Leesbreedte: een paragraaf over 1120px is niet te volgen. */
.wrap.smal { max-width: 720px; }
.wrap.smal ul { padding-left: 1.2em; }
.wrap.smal li { margin-bottom: .4em; }
.wrap.smal .group .row p:last-child { margin-bottom: 0; }

.faq {
  border-bottom: 1px solid var(--line);
  padding: 2px 0;
}
.faq summary {
  cursor: pointer; padding: 12px 0; font-weight: 600;
  list-style: none; display: flex; gap: 10px; align-items: baseline;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "▸"; color: var(--ink-3); font-weight: 400; flex: none;
}
.faq[open] summary::before { content: "▾"; }
.faq summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.faq > :not(summary) { margin: 0 0 12px 22px; color: var(--ink-2); font-size: .94rem; }

.terug { margin-top: 2.4em; }

.voet {
  margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline;
  font-size: .88rem;
}
.voet a { text-decoration: none; }
.voet a:hover { text-decoration: underline; }

/* Kleine lettertjes onder aan een pagina: leest als voettekst, niet als een
   waarschuwing. Geen vlak, geen rand, geen accentbalk. */
.voetnoot {
  max-width: 68ch; margin: 30px 0 0;
  font-size: .82rem; line-height: 1.6; color: var(--ink-3);
}
.voetnoot p { margin: 0 0 .8em; }
.voetnoot p:last-child { margin: 0; }

/* Deelband boven de voettekst: op elke pagina, met een eigen vlak zodat hij
   niet wegvalt tussen de tekst. */
.deel-band {
  margin-top: 48px; padding: 18px 20px;
  background: var(--accent-zacht); border: 1px solid var(--line);
  border-radius: 14px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px;
}
.deel-band > div { flex: 1 1 260px; }
.deel-band strong { display: block; font-size: 1.05rem; }
.deel-band p { margin: 2px 0 0; font-size: .9rem; color: var(--ink-2); }
.deel-band .btn { flex: 0 0 auto; }
.deel-site-status { flex: 1 0 100%; margin: 0; font-size: .85rem; color: var(--ink-2); }
.deel-site-status:empty { display: none; }
.voet-bron { flex: 1 0 100%; }