/* Peil — kenteken-geel voor de hoofdactie, bord-blauw voor navigatie,
   Archivo smal voor getallen zoals op een instrumentenpaneel. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0;
}

:root {
  color-scheme: light;
  --paper: #f4f5f3;
  --surface: #ffffff;
  --sunken: #eceee9;
  --ink: #16212e;
  --ink-2: #48525f;
  --ink-3: #5f6873;
  --line: #dadfd8;
  --blauw: #1d4f91;
  --blauw-zacht: #e3ebf6;
  --geel: #f2b700;
  --geel-hover: #ffc61a;
  --op-geel: #16212e;
  --goed: #1d7447;
  --slecht: #b3261e;
  --let-op: #8a5a00;
  --let-op-zacht: #fdf3d8;
  --fout-zacht: #fbe9e7;
  --series-1: #2a78d6;
  --series-2: #d4561f;
  --grid: #e6e9e4;
  --radius-veld: 6px;
  --radius-blad: 10px;
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0f1620;
    --surface: #17212d;
    --sunken: #1d2835;
    --ink: #eef1f4;
    --ink-2: #b9c2cc;
    --ink-3: #8c96a2;
    --line: #2b3746;
    --blauw: #94b8ee;
    --blauw-zacht: #1c2c42;
    --geel: #f2b700;
    --geel-hover: #ffc61a;
    --op-geel: #16212e;
    --goed: #5cc28c;
    --slecht: #f08a80;
    --let-op: #f0c35a;
    --let-op-zacht: #2c2614;
    --fout-zacht: #33191a;
    --series-1: #3987e5;
    --series-2: #d95926;
    --grid: #243140;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0f1620; --surface: #17212d; --sunken: #1d2835; --ink: #eef1f4; --ink-2: #b9c2cc;
  --ink-3: #8c96a2; --line: #2b3746; --blauw: #94b8ee; --blauw-zacht: #1c2c42;
  --goed: #5cc28c; --slecht: #f08a80; --let-op: #f0c35a; --let-op-zacht: #2c2614;
  --fout-zacht: #33191a; --series-1: #3987e5; --series-2: #d95926; --grid: #243140;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
a { color: var(--blauw); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--blauw); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { line-height: 1.2; margin: 0; font-weight: 650; letter-spacing: -0.01em; }
h1 { font-size: 1.75rem; font-stretch: 85%; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1rem; }
p { margin: 0; }
.stil { color: var(--ink-3); }
.klein { font-size: 0.875rem; }
.visueel-verborgen, input.visueel-verborgen {
  position: absolute; width: 1px !important; height: 1px !important; min-height: 0 !important;
  padding: 0 !important; margin: -1px; border: 0 !important; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- kader ---------- */

.kop {
  position: sticky; top: 0; z-index: 10;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.kop-binnen {
  max-width: 760px; margin: 0 auto; padding: 10px 16px;
  display: flex; align-items: center; gap: 24px;
}
.merk {
  font-weight: 800; font-stretch: 70%; font-size: 1.375rem; letter-spacing: 0.01em;
  color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
}
.merk-plaat {
  display: inline-block; width: 10px; height: 22px; border-radius: 2px;
  background: var(--geel); box-shadow: inset 0 0 0 1.5px var(--op-geel);
}
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 6px;
  color: var(--ink-2); text-decoration: none; font-weight: 550;
}
.nav a:hover { color: var(--ink); background: var(--sunken); }
.nav a[aria-current="page"] { color: var(--blauw); background: var(--blauw-zacht); }
.nav svg { width: 20px; height: 20px; flex: none; }
.uitlog { margin: 0; }
.uitlog button {
  background: none; border: 0; font: inherit; color: var(--ink-3); cursor: pointer; padding: 6px;
}
.uitlog button:hover { color: var(--ink); }

main { max-width: 760px; margin: 0 auto; padding: 24px 16px 48px; }
main > * + .sectie { margin-top: 40px; }
.sectie-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }

@media (max-width: 640px) {
  .kop-binnen { padding: 8px 16px; }
  .nav {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
    margin: 0; gap: 0; justify-content: space-around;
    background: var(--surface); border-top: 1px solid var(--line);
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
  }
  .nav a {
    flex-direction: column; gap: 2px; font-size: 0.75rem; padding: 6px 4px;
    flex: 1; text-align: center;
  }
  .nav svg { width: 22px; height: 22px; }
  .uitlog { margin-left: auto; }
  main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* ---------- meldingen ---------- */

.melding {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--radius-veld); margin-bottom: 20px;
  background: var(--blauw-zacht); color: var(--ink);
}
.melding svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--blauw); }
.melding.waarschuwing { background: var(--let-op-zacht); }
.melding.waarschuwing svg { color: var(--let-op); }
.melding.fout { background: var(--fout-zacht); }
.melding.fout svg { color: var(--slecht); }
.melding ul { margin: 4px 0 0; padding-left: 18px; }

/* ---------- het ene grote getal ---------- */

.paneel { padding: 8px 0 24px; }
.paneel-label { color: var(--ink-2); font-weight: 550; }
.paneel-getal {
  font-size: clamp(3.25rem, 14vw, 4.75rem);
  line-height: 1; font-weight: 700; font-stretch: 68%;
  letter-spacing: -0.01em; margin: 6px 0 8px;
}
.paneel-getal .eenheid { font-size: 0.45em; font-weight: 600; color: var(--ink-2); margin-left: 0.15em; letter-spacing: 0; }
.paneel-onder { color: var(--ink-2); }

.cijfers {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.cijfer { padding: 14px 16px 14px 0; display: flex; flex-direction: column; }
.cijfer + .cijfer { padding-left: 16px; border-left: 1px solid var(--line); }
.cijfer dt { color: var(--ink-3); font-size: 0.875rem; }
.cijfer dd { margin: auto 0 0; padding-top: 2px; font-size: 1.5rem; font-weight: 650; font-stretch: 78%; }
.cijfer dd small { font-size: 0.875rem; font-weight: 500; color: var(--ink-3); font-stretch: 100%; }
@media (max-width: 480px) {
  .cijfers { grid-template-columns: 1fr 1fr; }
  .cijfer:nth-child(odd) { padding-left: 0; border-left: 0; }
  .cijfer:nth-child(n + 3) { border-top: 1px solid var(--line); }
}

.positief { color: var(--goed); }
.negatief { color: var(--slecht); }

/* ---------- overzicht (home) ---------- */

.domein {
  display: grid; gap: 16px; padding: 20px 0;
  border-top: 2px solid var(--ink);
}
.domein + .domein { margin-top: 24px; }
.domein-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.domein-getal { font-size: 2.75rem; font-weight: 700; font-stretch: 68%; line-height: 1; }

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

.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px;
  font: inherit; font-weight: 650; text-decoration: none; cursor: pointer;
  border-radius: var(--radius-veld); border: 1.5px solid var(--ink);
  background: var(--surface); color: var(--ink);
}
.knop:hover { background: var(--sunken); }
.knop svg { width: 18px; height: 18px; }
.knop-hoofd {
  background: var(--geel); color: var(--op-geel); border-color: var(--op-geel);
  box-shadow: inset 0 0 0 1px var(--op-geel);
}
.knop-hoofd:hover { background: var(--geel-hover); }
.knop-stil { border-color: transparent; background: none; color: var(--blauw); padding-inline: 8px; }
.knop-stil:hover { background: var(--blauw-zacht); }
.knop-gevaar { border-color: var(--slecht); color: var(--slecht); }
.knop-gevaar:hover { background: var(--fout-zacht); }
.knop-breed { width: 100%; }
.knoppen { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.link-knop { background: none; border: 0; padding: 0; font: inherit; color: var(--blauw); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.link-knop.gevaar { color: var(--slecht); }

/* ---------- formulieren ---------- */

.blad {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-blad); padding: 20px;
}
.velden { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.veld { display: grid; gap: 6px; align-content: start; }
.veld-breed { grid-column: 1 / -1; }
@media (max-width: 480px) { .velden { gap: 14px 12px; } }
.velden input, .velden select { min-width: 0; }
label, .label { font-weight: 600; font-size: 0.9375rem; }
.hint { color: var(--ink-3); font-size: 0.875rem; }
input[type="text"], input[type="date"], input[type="password"], input[type="month"], select, textarea {
  width: 100%; min-height: 48px; padding: 10px 12px;
  font: inherit; font-size: 1.125rem; color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--ink-3); border-radius: var(--radius-veld);
}
input.getal { font-stretch: 85%; font-weight: 600; font-size: 1.25rem; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--blauw); outline-offset: 2px; border-color: var(--blauw); }
input:focus:not(:focus-visible), select:focus:not(:focus-visible) { outline: none; }
.vinkje input:focus-visible { outline: 3px solid var(--blauw); outline-offset: 2px; }
.veld.heeft-fout input, .veld.heeft-fout select { border-color: var(--slecht); }
.veld-fout { color: var(--slecht); font-size: 0.875rem; font-weight: 550; }
.invoer-eenheid { position: relative; }
.invoer-eenheid input { padding-right: 52px; }
.invoer-eenheid span {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  color: var(--ink-3); font-weight: 600; pointer-events: none;
}
.vinkje { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; }
.vinkje input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--blauw); flex: none; }
details.meer summary { cursor: pointer; color: var(--blauw); font-weight: 600; padding: 4px 0; }
details.meer[open] summary { margin-bottom: 12px; }
.formulier-voet { margin-top: 20px; }

.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.tabs a {
  padding: 10px 14px; text-decoration: none; color: var(--ink-2); font-weight: 600;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--blauw); }

/* ---------- controle-stap ---------- */

.controle { display: grid; gap: 20px; }
.controle-uitkomst {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-blad); overflow: hidden;
}
.controle-uitkomst div { background: var(--surface); padding: 14px 16px; }
.controle-uitkomst dt { color: var(--ink-3); font-size: 0.875rem; }
.controle-uitkomst dd { margin: 2px 0 0; font-size: 1.625rem; font-weight: 700; font-stretch: 72%; }
.invoer-lijst { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; margin: 0; }
.invoer-lijst dt { color: var(--ink-3); }
.invoer-lijst dd { margin: 0; font-weight: 600; }

/* ---------- tabellen en lijsten ---------- */

.tabel-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-inline: -16px; padding-inline: 16px; }
table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
th { text-align: left; font-weight: 600; color: var(--ink-3); font-size: 0.8125rem; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--ink-3); white-space: nowrap; }
td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
th.r, td.r { text-align: right; }
th:last-child, td:last-child { padding-right: 0; }
td.nowrap { white-space: nowrap; }
td.r { white-space: nowrap; }
tr.lopend td { color: var(--ink-3); }
tfoot td { font-weight: 650; border-bottom: 0; border-top: 1px solid var(--ink-3); }

.rijen { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.rij {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.rij-hoofd { font-weight: 600; }
.rij-getal { text-align: right; font-weight: 650; font-stretch: 82%; font-size: 1.125rem; white-space: nowrap; }
.rij-sub { color: var(--ink-3); font-size: 0.875rem; }
.rij-acties { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 24px; font-size: 0.9375rem; }
.rij-acties > a, .rij-acties .link-knop, .rij-acties summary { display: inline-flex; align-items: center; min-height: 44px; }
.rij-acties details[open] { flex-basis: 100%; }
.rij-acties form { margin: 0; }
.rij-waarschuwing { grid-column: 1 / -1; color: var(--let-op); font-size: 0.875rem; display: flex; gap: 6px; align-items: flex-start; }
.rij-waarschuwing svg { width: 16px; height: 16px; flex: none; margin-top: 3px; }
a.rij { color: inherit; text-decoration: none; }
a.rij:hover .rij-hoofd { color: var(--blauw); text-decoration: underline; text-underline-offset: 3px; }

.label-vast {
  display: inline-block; font-size: 0.75rem; font-weight: 600; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; margin-left: 6px; vertical-align: 2px;
}

/* ---------- verdeling ---------- */

.verdeling { display: grid; gap: 18px; }
.verdeling-legenda { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--ink-2); font-size: 0.875rem; }
.legenda-item { display: inline-flex; align-items: center; gap: 6px; }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.swatch-lijn { width: 3px; height: 14px; border-radius: 0; background: var(--ink); }
.cat-kop { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.cat-naam { font-weight: 600; }
.cat-pct { color: var(--ink-2); font-size: 0.9375rem; white-space: nowrap; }
.balk { position: relative; height: 14px; display: grid; gap: 2px; }
.balk-spoor { position: relative; height: 14px; background: var(--sunken); border-radius: 0 4px 4px 0; }
.balk-vul { position: absolute; inset: 0 auto 0 0; background: var(--series-1); border-radius: 0 4px 4px 0; }
.balk-vul.na { background: var(--series-2); }
.balk-doel { position: absolute; top: -4px; bottom: -4px; width: 3px; background: var(--ink); margin-left: -1.5px; }
.balk-dubbel { display: grid; gap: 2px; position: relative; }
.balk-dubbel .balk-spoor { height: 10px; }

/* ---------- grafieken ---------- */

.grafiek { position: relative; height: 240px; margin-top: 8px; }
.grafiek-legenda { display: flex; gap: 16px; color: var(--ink-2); font-size: 0.875rem; margin-top: 4px; }
.grafiek-legenda .swatch { width: 14px; height: 3px; border-radius: 2px; }
.grafiek-tabel summary { cursor: pointer; color: var(--blauw); font-size: 0.875rem; margin-top: 8px; }

/* ---------- inloggen ---------- */

.inlog { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.inlog-blad { width: 100%; max-width: 380px; display: grid; gap: 20px; }
.inlog .merk { font-size: 2rem; }
.inlog .merk-plaat { width: 14px; height: 32px; }

/* ---------- logboek ---------- */

.logboek-item { padding: 14px 0; border-bottom: 1px solid var(--line); display: grid; gap: 4px; }
.logboek-meta { color: var(--ink-3); font-size: 0.875rem; }
.logboek-item details summary { cursor: pointer; color: var(--blauw); font-size: 0.875rem; }
.logboek-item pre {
  white-space: pre-wrap; word-break: break-word; font-size: 0.8125rem;
  background: var(--sunken); padding: 10px; border-radius: var(--radius-veld); margin: 6px 0 0;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

.ruimte-boven { margin-top: 24px; }

/* Verdelingsbalken groeien één keer uit zodra ze in beeld komen. */
@media (prefers-reduced-motion: no-preference) {
  .js .verdeling .balk-vul { transform-origin: left center; transform: scaleX(0); transition: transform 700ms cubic-bezier(.2, .7, .2, 1); }
  .js .verdeling .balk-spoor:nth-child(2) .balk-vul { transition-delay: 120ms; }
  .js .verdeling.in-beeld .balk-vul { transform: scaleX(1); }
}

/* ---------- aanvullingen na review ---------- */

[hidden] { display: none !important; }
.rij-sub.positief, .rij-getal.positief { color: var(--goed); }
.rij-sub.negatief, .rij-getal.negatief { color: var(--slecht); }
.rij-getal.stil { color: var(--ink-3); }
.ruimte-klein { margin-top: 12px; }
fieldset.kaal { border: 0; padding: 0; margin: 0; min-width: 0; }
.velden-drie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.velden-drie .invoer-eenheid input { padding-right: 40px; }
.veld-groep { display: contents; }
fieldset.regel { border: 0; border-top: 1px solid var(--line); margin: 16px 0 0; padding: 12px 0 0; min-width: 0; }
fieldset.regel legend { padding: 0; font-weight: 600; }

/* Keuze tussen twee lijsten: kleiner en anders dan de hoofdtabs. */
.segment-rij { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.segment { display: inline-flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 3px; border-radius: 8px; background: var(--sunken); gap: 2px; }
.segment a {
  padding: 7px 14px; border-radius: 6px; text-decoration: none; color: var(--ink-2);
  font-weight: 600; font-size: 0.9375rem; white-space: nowrap;
}
.segment a[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }

.maandkop { margin: 24px 0 4px; font-size: 0.9375rem; color: var(--ink-2); }
details.maandgroep { border-top: 1px solid var(--line); }
details.maandgroep > summary {
  display: flex; justify-content: space-between; gap: 12px; padding: 12px 0;
  cursor: pointer; font-weight: 650; list-style: none;
}
details.maandgroep > summary::-webkit-details-marker { display: none; }
details.maandgroep > summary::before { content: "▸"; color: var(--ink-3); margin-right: 8px; transition: transform 150ms; display: inline-block; }
details.maandgroep[open] > summary::before { transform: rotate(90deg); }
details.maandgroep > summary span:first-child { flex: 1 1 auto; white-space: nowrap; }

.verandert { border-left: 3px solid var(--let-op); padding-left: 14px; }
.verandert h2 { font-size: 1.0625rem; }
.verandert .rijen { margin-top: 8px; }
.pijl { color: var(--ink-3); }

.koersen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.icoon-inline { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; }
.swatch-ref { width: 14px; height: 0; border-top: 1.5px solid var(--ink-3); border-radius: 0; }
.grafiek-legenda .swatch-ref { height: 0; }
input[type="file"] { font: inherit; padding: 10px 0; }

@media (max-width: 520px) {
  .alleen-breed { display: none; }
}

/* ---------- ronde 3 ---------- */
.grafiek-legenda { flex-wrap: wrap; gap: 4px 16px; }
.legenda-item { white-space: nowrap; }
.swatch-gestreept { width: 14px; height: 0; border-top: 2px dashed var(--ink-3); border-radius: 0; }
.balk-spoor.terugverdien { height: 12px; margin-top: 4px; border-radius: 6px; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line); }
.balk-spoor.terugverdien .balk-vul { border-radius: 6px; }
.live-tank { min-height: 1.5em; color: var(--ink-2); font-weight: 550; }
.live-tank .live-let-op { color: var(--let-op); }
.klein-kop { font-size: 1rem; margin-top: 4px; }
details.maandgroep > summary span:nth-child(2) { margin-left: auto; margin-right: 12px; font-weight: 500; }
@media (max-width: 480px) {
  .velden-drie { grid-template-columns: 4.5rem minmax(0, 1fr) 5rem; gap: 10px; }
  .velden-drie .invoer-eenheid input { padding-right: 28px; }
  .velden-drie .invoer-eenheid span { right: 8px; }
}
/* ---------- rendement per jaar ---------- */

.alleen-smal { display: none; }
@media (max-width: 520px) {
  .alleen-smal { display: block; }
  .jaarkaarten.alleen-smal { display: grid; }
  .tabs a { padding-inline: 10px; }
}
.tabs { overflow-x: auto; scrollbar-width: none; }
.tabs a { white-space: nowrap; }
/* Een scrollvak knipt alles buiten zijn rand af: de focusring hier dus binnen de link. */
.tabs a:focus-visible, .segment a:focus-visible { outline-offset: -3px; }
.jaartabel th[scope="row"] { color: var(--ink-2); font-size: 0.9375rem; font-weight: 500; border-bottom: 1px solid var(--line); padding: 10px 10px 10px 0; white-space: normal; vertical-align: top; }
.jaartabel thead th { font-size: 0.9375rem; color: var(--ink); }
.jaartabel tfoot th[scope="row"] { color: var(--ink); font-weight: 650; border-bottom: 0; border-top: 1px solid var(--ink-3); }
.jaartabel tbody tr:last-child th, .jaartabel tbody tr:last-child td { border-bottom: 0; }
.jaartabel tfoot tr + tr th[scope="row"], .jaartabel tfoot tr + tr td { border-top: 0; }
.jaarkaarten { gap: 16px; margin-top: 12px; }
.jaarkaart { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-blad); padding: 14px 16px 6px; }
.jaarkaart h3 { font-size: 1.125rem; }
.jaarkaart dl { margin: 6px 0 0; }
.jaarkaart dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.jaarkaart dt { color: var(--ink-2); }
.jaarkaart dd { margin: 0; font-weight: 600; white-space: nowrap; text-align: right; }
.jaarkaart .totaal dt { color: var(--ink); font-weight: 600; }
.jaarkaart .totaal dd { font-weight: 700; font-stretch: 82%; font-size: 1.125rem; }
.jaarkaart dl > div.totaal { border-top: 1px solid var(--ink-3); }
.jaarkaart dl > div.totaal + div.totaal { border-top: 0; padding-top: 0; }
.voetnoten { display: grid; gap: 6px; margin-top: 16px; color: var(--ink-3); font-size: 0.875rem; }
sup { font-size: 0.7em; line-height: 0; }
/* ---------- strategie wijzigen ---------- */

.strategie-cat { border: 0; margin: 0; padding: 20px 0; border-top: 1px solid var(--line); min-width: 0; }
.strategie-cat:first-child { border-top: 0; padding-top: 0; }
.strategie-kop, .strategie-regel { display: grid; grid-template-columns: minmax(0, 1fr) 11rem; gap: 12px; align-items: end; }
.strategie-regel .invoer-eenheid input, .strategie-kop .invoer-eenheid input { padding-right: 34px; }
.strategie-regels { display: grid; gap: 10px; margin-top: 14px; padding-left: 14px; border-left: 3px solid var(--sunken); }
.strategie-regel select { font-size: 1rem; }
.strategie-voet { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin-top: 8px; min-height: 44px; }
.strategie-voet .knop { margin-left: -8px; }
.strategie-som { margin-left: auto; font-weight: 650; color: var(--ink-2); }
.strategie-som.negatief { color: var(--slecht); }
.strategie-eind { border-top: 2px solid var(--ink); padding-top: 8px; }
.strategie [data-alleen-js] { display: none; }
.js .strategie [data-alleen-js] { display: inline-flex; }
@media (max-width: 480px) {
  .strategie-kop, .strategie-regel { grid-template-columns: minmax(0, 1fr) 6rem; gap: 10px; }
  .strategie-lang { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .strategie-regels { padding-left: 10px; }
}

.links-rij { display: inline-flex; flex-wrap: wrap; gap: 4px 16px; }
.aandacht .melding { margin-bottom: 10px; }

/* ---- ontwerp (ronde 4) */
@media (max-width: 640px) {
  html { scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
}
details.maandgroep > summary span:last-child { white-space: nowrap; }
@media (max-width: 480px) {
  .cijfer:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 400px) {
  .tabs a { padding-inline: 7px; font-size: 0.9375rem; }
}
@media (max-width: 360px) {
  .velden-drie { grid-template-columns: 3.75rem minmax(0, 1fr) 3.75rem; }
  .velden-drie .invoer-eenheid input { padding-right: 22px; }
}
h1.merk { margin: 0; }
/* ---- beleggen (ronde 4) */

/* Advies: 'plus vrij saldo' hoort bij het maandbedrag */
.bron-plus { margin: -6px 0 0 32px; font-size: 0.9375rem; }

/* Orderbriefje */
.orders { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.order { display: grid; gap: 6px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.order-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.order-kop .rij-hoofd { min-width: 0; overflow-wrap: anywhere; }
.order-aantal { font-weight: 700; font-stretch: 82%; font-size: 1.25rem; white-space: nowrap; }
.order-eenheid { font-size: 0.875rem; font-weight: 500; color: var(--ink-3); font-stretch: 100%; }
.order-velden { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); justify-content: start; gap: 4px 28px; margin: 4px 0 0; }
.order-velden dt { color: var(--ink-3); font-size: 0.8125rem; }
.order-velden dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-weight: 600; }
.order-code { white-space: nowrap; letter-spacing: 0.01em; }
.kopieer {
  display: none; align-items: center; min-height: 36px; padding: 4px 10px; margin: -4px 0;
  font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer;
  color: var(--blauw); background: var(--blauw-zacht); border: 0; border-radius: var(--radius-veld);
}
.js .kopieer { display: inline-flex; }
.kopieer:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 520px) {
  .order-velden { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .order-velden > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 40px; }
  .order-velden dd { justify-content: flex-end; text-align: right; }
}

/* Aankopen vastleggen: de legend staat boven de lijn, niet erin */
fieldset.regel legend { float: left; width: 100%; padding: 0; margin-bottom: 10px; }
fieldset.regel legend + * { clear: both; }
fieldset.regel > .velden, fieldset.regel > .veld-fout { clear: both; }
fieldset.regel input:disabled { opacity: 0.55; }

/* Waarde en inleg als tabel */
.grafiek-tabel tbody th { color: var(--ink); font-weight: 500; font-size: inherit; border-bottom: 1px solid var(--line); white-space: normal; }
.grafiek-tabel table { margin-top: 8px; }
/* ---- auto (ronde 4) */
.tank-ritme { margin-top: 8px; text-align: center; }
.cijfers-auto .cijfer { display: flex; flex-direction: column; }
.cijfers-auto .cijfer dd { margin-top: auto; padding-top: 2px; }
@media (min-width: 481px) {
  .cijfers-auto { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cijfers-auto .cijfer:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
  .cijfers-auto .cijfer:nth-child(n + 4) { border-top: 1px solid var(--line); }
}
.nulzetten-keuze { margin-top: 16px; padding: 12px 14px; border-left: 3px solid var(--let-op); background: var(--let-op-zacht); border-radius: 0 8px 8px 0; }
.nulzetten-keuze p { margin: 0 0 8px; }
.nulzetten-keuze .link-knop { min-height: 44px; }
/* ---- beleggen (ronde 5) */
input[type="file"] { width: 100%; max-width: 100%; color: var(--ink-2); }
input[type="file"]::file-selector-button {
  font: inherit; font-weight: 650; min-height: 44px; padding: 10px 16px; margin-right: 12px;
  border: 1.5px solid var(--ink); border-radius: var(--radius-veld);
  background: var(--surface); color: var(--ink); cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: var(--sunken); }
/* ---- auto (ronde 5) */
/* Maandgroepen op smal scherm: maand en bedrag op één regel, het aantal posten eronder. */
@media (max-width: 520px) {
  details.maandgroep > summary { flex-wrap: wrap; gap: 0; }
  details.maandgroep > summary::before { width: 18px; margin-right: 0; text-align: left; }
  details.maandgroep > summary span:last-child { margin-left: 12px; }
  details.maandgroep > summary span:nth-child(2) { order: 3; flex-basis: 100%; margin: 2px 0 0 18px; }
}
/* Controlestap: alleen de grid-gap bepaalt de ruimte tussen de blokken. */
.controle > .melding, .controle > dl, .controle > p, .controle > .nulzetten-keuze { margin-block: 0; }
/* ---- beleggen (ronde 6) */
/* Orderbriefje: dezelfde kolommen voor elke order, zodat ISIN, Limiet en Max. totaal
   onder elkaar staan. Groeit tot de vaste breedte; is er minder ruimte, dan krimpt het. */
@media (min-width: 521px) {
  .order-velden { grid-template-columns: minmax(min-content, 14rem) minmax(min-content, 12rem) auto; }
}
/* Alleen 'Totaal' krijgt de zware lijn; 'Hoogstens' en 'Blijft over' zijn toelichting. */
.advies-totalen tfoot tr + tr td { border-top: 1px solid var(--line); font-weight: 500; }
/* ---- auto en algemeen (ronde 6) */
/* Alle eenregelige velden even hoog, ongeacht lettergrootte (getal-velden zijn groter
   gezet) of browser-eigen opmaak van datum en keuzelijst: velden naast elkaar lijnen uit. */
input[type="text"], input[type="date"], input[type="password"], input[type="month"], select {
  height: 52px; min-height: 0; line-height: 1.25;
}
input[type="date"]::-webkit-date-and-time-value { text-align: left; }
/* Tekstlinks die een eigen ingang zijn, krijgen een tikdoel van 44px (zoals knoppen). */
.links-rij a, .sectie-kop a.klein { display: inline-flex; align-items: center; min-height: 44px; }
.links-rij { gap: 0 16px; }
/* Een summary houdt zijn openklap-driehoekje (display: list-item); de hoogte komt uit padding. */
.grafiek-tabel summary { min-height: 44px; padding-block: 11px; margin-top: 0; }
/* ---- auto (ronde 8) */
/* Toelichting onder een getal in een tabelcel of tegel (geschatte brandstof, zonder aankoopmaand). */
.cel-noot { display: block; font-size: 0.8125rem; font-weight: 400; color: var(--ink-3); white-space: normal; }
.cijfer-noot { display: block; font-size: 0.8125rem; color: var(--ink-3); }
@media (max-width: 520px) {
  .cel-noot.alleen-smal { display: block; }
}
@media (min-width: 521px) {
  .cel-noot.alleen-smal { display: none; }
}