/* Beheer-prototype. Licht en rustig: zachte achtergrond, witte vlakken, zwarte actieve pil, één accentkleur uit Instellingen.
   Font: PT Sans (staat op macOS; in de bouwfase zelf hosten). core.js zet --accent, --accent-fill en --on-accent. */
:root, .paper {
  --surface: #fff; --surface-2: #f1f3f5;
  --ink: #14171c; --muted: #5a626c;
  --line: rgb(20 23 28 / .09); --line-strong: rgb(20 23 28 / .22);
  --accent-text: color-mix(in srgb, var(--accent) 62%, #000);
  --ok: #17643f; --warn: #7a5200; --bad: #b3261e;
  color-scheme: light;
}
:root {
  --accent: #e26030; --accent-fill: #b94f27; --on-accent: #fff;
  --bg: linear-gradient(125deg, #dce4f1, #e4e9e7 50%, #eaeedd) fixed;
  --panel: rgb(255 255 255 / .6);
  --r-sm: .625rem; --r: 1rem; --r-lg: 1.5rem;
  --font: "PT Sans", system-ui, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
[data-theme="dark"] {
  --surface: #1e2125; --surface-2: #292d32;
  --ink: #f1f2f4; --muted: #a4abb4;
  --line: rgb(255 255 255 / .1); --line-strong: rgb(255 255 255 / .24);
  --accent-text: color-mix(in srgb, var(--accent) 75%, #fff);
  --ok: #6fd39b; --warn: #f2c35c; --bad: #ff9488;
  --bg: #131518; --panel: #1a1d20;
  color-scheme: dark;
}
.paper { background: var(--surface); color: var(--ink); }

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; color: var(--ink); font: 400 1rem/1.45 var(--font); background: var(--bg); }
h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset { margin: 0; }
ul, ol, fieldset { padding: 0; list-style: none; border: 0; min-width: 0; }
a { color: inherit; text-underline-offset: .2em; }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: .1875rem solid var(--ink); outline-offset: .15rem; border-radius: .25rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skiplink { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .75rem 1rem; background: var(--ink); color: var(--surface); font-weight: 700; border-radius: var(--r-sm); }
.skiplink:focus { top: 1rem; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.late { color: var(--bad); font-weight: 700; }
:root:not([data-theme="dark"]) .logo--dark, [data-theme="dark"] .logo--light { display: none; }
.icon { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- shell ---------- */
.app { max-width: 96rem; margin-inline: auto; padding: 1rem clamp(.75rem, 2.5vw, 2rem) 2.5rem; }
.top { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.top__logo img { height: 2.5rem; width: auto; max-width: 9rem; object-fit: contain; }
.top nav { order: 3; width: 100%; min-width: 0; display: flex; align-items: center; gap: .25rem; position: relative; }
.nav { position: relative; display: flex; gap: .125rem; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; padding: .1875rem; }
.nav a, .more summary { display: block; padding: .55rem 1rem; border-radius: 999px; text-decoration: none; white-space: nowrap; color: var(--muted); transition: background-color .25s var(--ease), color .25s var(--ease); }
.nav a:hover, .more summary:hover, .more[open] summary { color: var(--ink); background: var(--panel); }
.nav a[aria-current="page"], .more summary.is-current { background: var(--ink); color: var(--surface); }
.nav:has(.nav__pill) a[aria-current="page"] { background: none; }
/* Schuivende pil (motion.js): dezelfde labels in wit, uitgeknipt op het actieve item. */
.nav__pill { position: absolute; left: 0; top: 0; height: 100%; display: flex; gap: .125rem; padding: .1875rem; background: var(--ink); color: var(--surface); pointer-events: none; list-style: none; }
.nav__pill span { display: block; padding: .55rem 1rem; white-space: nowrap; }
.more summary { list-style: none; cursor: pointer; }
.more summary::-webkit-details-marker { display: none; }
.more summary::after { content: " ▾"; }
.more__panel { position: absolute; left: 0; top: calc(100% + .5rem); z-index: 20; display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1.25rem; width: min(46rem, calc(100vw - 1.5rem)); padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: 0 1.5rem 3rem rgb(20 23 28 / .18); animation: pop .32s cubic-bezier(.34,1.8,.64,1) both; transform-origin: top right; }
.more__panel h2 { margin-bottom: .4rem; font-size: .875rem; font-weight: 400; color: var(--muted); }
.more__panel a { display: block; padding: .3rem .6rem; margin-left: -.6rem; border-radius: var(--r-sm); text-decoration: none; }
.more__panel a:hover { background: var(--surface-2); }
.more__panel a[aria-current="page"] { background: var(--ink); color: var(--surface); font-weight: 700; }
.top__tools { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.iconbtn { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: none; border: 1px solid var(--line-strong); border-radius: 50%; background: none; text-decoration: none; transition: background-color .25s var(--ease); }
.iconbtn:hover, .iconbtn[aria-current="page"] { background: var(--panel); }
.iconbtn:disabled, .btn:disabled { opacity: .4; cursor: default; }
.avatar { width: 2.75rem; height: 2.75rem; flex: none; border-radius: 50%; object-fit: cover; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line-strong); }
main { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; margin-top: 1.5rem; }
main:focus { outline: none; }
@media (min-width: 75em) { .top nav { order: 0; width: auto; margin-inline: auto; } .more__panel { left: auto; right: 0; } }

.pagehead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.pagehead > div:first-child { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.pagehead h1 { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem); font-weight: 400; line-height: 1.1; letter-spacing: -.015em; }
.pagehead h1 .chip { vertical-align: middle; letter-spacing: 0; }
.pagehead p { color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .6rem 1.15rem; border: 1px solid var(--line-strong); border-radius: 999px; background: none; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background-color .25s var(--ease), translate .25s var(--ease), box-shadow .25s var(--ease); }
.btn:not(:disabled):hover { background: var(--surface); translate: 0 -.0625rem; box-shadow: 0 .4rem 1rem -.5rem rgb(20 23 28 / .35); }
.btn--primary { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); }
.btn--primary:not(:disabled):hover { background: color-mix(in srgb, var(--accent-fill) 88%, #000); }
.btn--dark { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.btn--dark:not(:disabled):hover { background: color-mix(in srgb, var(--ink) 85%, var(--surface)); }
.linkbtn { display: block; width: 100%; padding: .45rem .75rem; margin-inline: -.75rem; border: 0; border-radius: var(--r-sm); background: none; text-align: left; text-decoration: none; }
.linkbtn:hover { background: var(--surface-2); }

/* ---------- vlakken ---------- */
.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; align-items: start; }
.stack > * + * { margin-top: .75rem; }
.panel { padding: clamp(1rem, 2vw, 1.5rem); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); }
.sheet, .paper.panel { background: var(--surface); }
.panel--ink { background: var(--ink); border-color: transparent; color: var(--surface); --muted: color-mix(in srgb, var(--surface) 72%, transparent); }
.panel--tint { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 32%, transparent); }
.panel h2 { font-size: 1.125rem; font-weight: 700; }
.panel h3 { margin: 1.25rem 0 .4rem; font-size: 1rem; font-weight: 700; }
.panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: .75rem; }
.trio dt { color: var(--muted); font-size: .9375rem; }
.trio dd, .bigval { font-size: clamp(1.375rem, 1rem + 1.2vw, 2rem); line-height: 1.15; white-space: nowrap; }
.bigval--xl { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); }
.chip { display: inline-block; padding: .1rem .65rem; border-radius: 999px; font-size: .875rem; font-weight: 700; white-space: nowrap; background: color-mix(in srgb, currentColor 12%, transparent); }
.chip--ok { color: var(--ok); } .chip--warn { color: var(--warn); } .chip--bad { color: var(--bad); } .chip--idle { color: var(--muted); }
.callout { margin-top: 1rem; padding: .75rem 1rem; border-radius: var(--r); background: var(--surface-2); }
.callout .muted { display: block; font-size: .875rem; }
.count { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; margin-left: .25rem; padding-inline: .35rem; border-radius: 999px; background: color-mix(in srgb, currentColor 12%, transparent); font-size: .8125rem; }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.filters { display: inline-flex; flex-wrap: wrap; gap: .25rem; }
.filters button { padding: .4rem .9rem; border: 0; border-radius: 999px; background: var(--surface-2); transition: background-color .25s var(--ease), color .25s var(--ease); }
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--surface); font-weight: 700; }
.statussel { display: flex; align-items: center; gap: .5rem; margin: 0; font-weight: 400; color: var(--muted); }
.statussel select { width: auto; padding-block: .4rem; color: var(--ink); }
.searchbox { display: flex; align-items: center; gap: .5rem; flex: 1; min-width: 12rem; max-width: 22rem; margin: 0 0 0 auto; padding: .15rem 1rem; border: 1px solid var(--line-strong); border-radius: 999px; font-weight: 400; }
.searchbox input { flex: 1; min-width: 0; border: 0; background: none; padding: .5rem 0; }
.searchbox input:focus-visible { outline: none; }
.searchbox:focus-within { outline: .1875rem solid var(--ink); outline-offset: .15rem; }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 1rem; }
.pager label { display: flex; align-items: center; gap: .5rem; margin: 0; font-weight: 400; }
.pager select { width: auto; padding-block: .4rem; }

.table-wrap { position: relative; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { padding: .55rem .75rem; text-align: left; font-size: .875rem; font-weight: 400; color: var(--muted); border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
th button { padding: 0; border: 0; background: none; color: inherit; }
th button:hover { color: var(--ink); text-decoration: underline; }
th[aria-sort="ascending"] button::after { content: " ▲"; font-size: .7em; } th[aria-sort="descending"] button::after { content: " ▼"; font-size: .7em; }
td { padding: .7rem .75rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
tbody tr { transition: background-color .2s; }
tbody tr:hover { background: var(--surface-2); }
td a { font-weight: 700; text-decoration: none; } td a:hover { text-decoration: underline; }
.r { text-align: right; }
.wrap { white-space: normal; display: block; min-width: 16rem; }

/* ---------- document (factuur/offerte) ---------- */
.doc__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.75rem; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; align-content: start; }
.facts dt { color: var(--muted); }
.totals { max-width: 24rem; margin: 1rem 0 0 auto; }
.totals div { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem .75rem; }
.totals div:last-child { margin-top: .4rem; padding-block: .6rem; border-radius: var(--r-sm); background: var(--surface-2); font-weight: 700; }
.att li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.att button { border: 0; background: none; padding: 0; color: var(--accent-text); text-decoration: underline; flex: none; }
.inline { display: flex; gap: .5rem; }
.inline .input { flex: 1; min-width: 0; }
.timeline li { position: relative; padding: 0 0 1rem 1.5rem; border-left: 1px solid var(--line-strong); margin-left: .375rem; overflow-wrap: anywhere; }
.timeline li::before { content: ""; position: absolute; left: -.375rem; top: .4rem; width: .6875rem; height: .6875rem; border-radius: 50%; background: var(--accent); }
.timeline li:last-child { border-color: transparent; padding-bottom: 0; }
.timeline small { display: block; color: var(--muted); }
.duelist { margin-top: .75rem; }
.duelist li { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; border-bottom: 1px solid var(--line); }
table.lines td { padding: .35rem .3rem; border: 0; }
table.lines tbody tr:hover { background: none; }
table.lines td:nth-child(2) { width: 45%; min-width: 15rem; }
table.lines td:nth-child(1), table.lines td:nth-child(4), table.lines td:nth-child(5) { width: 5.5rem; min-width: 5rem; } table.lines td:nth-child(3) { width: 8rem; min-width: 6.5rem; }
table.lines .iconbtn { width: 2.5rem; height: 2.5rem; font-size: 1.25rem; }

/* ---------- lijstjes ---------- */
.todo li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 1rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.todo a { text-decoration: none; }
.todo a strong, .todo a small { display: block; }
.todo a small { color: var(--muted); }
.todo a:hover strong { text-decoration: underline; }
.todo .count { background: var(--accent-fill); color: var(--on-accent); font-weight: 700; }
.notes li { padding: .75rem 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.notes small { display: block; color: var(--muted); }
.rows button { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .25rem 1rem; width: 100%; padding: .7rem 1rem; border: 0; border-radius: var(--r); background: none; text-align: left; transition: background-color .25s var(--ease); }
.rows button:hover, .rows button.is-on { background: var(--surface-2); }
.rows strong, .rows small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rows small { color: var(--muted); }
.thread li { max-width: 40rem; padding: .85rem 1rem; border-radius: var(--r); background: var(--surface-2); }
.thread li + li { margin-top: .75rem; }
.thread .me { margin-left: auto; background: var(--ink); color: var(--surface); }
.thread small { display: block; margin-bottom: .25rem; opacity: .8; }

/* ---------- formulieren ---------- */
label, legend { display: block; margin-bottom: .3rem; padding: 0; font-weight: 700; }
.input, textarea, select { width: 100%; padding: .65rem .9rem; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); transition: border-color .2s, box-shadow .2s; }
.input:hover, textarea:hover, select:hover { border-color: var(--ink); }
textarea { resize: vertical; }
.fields { display: grid; gap: .9rem 1rem; }
.hint { margin-top: .3rem; font-size: .9375rem; color: var(--muted); }
.check { display: flex; gap: .6rem; align-items: start; margin: 0; font-weight: 400; }
.check input { width: 1.125rem; height: 1.125rem; margin-top: .15rem; flex: none; accent-color: var(--ink); }
.vars { display: flex; flex-wrap: wrap; gap: .3rem; }
.vars button { padding: .2rem .7rem; border: 1px dashed var(--line-strong); border-radius: 999px; background: none; font-size: .9375rem; }
.vars button:hover { background: var(--surface-2); }
.swatches { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.swatches button { width: 2.25rem; height: 2.25rem; border: 2px solid var(--surface); border-radius: 50%; box-shadow: 0 0 0 1px var(--line-strong); }
.swatches button[aria-pressed="true"] { box-shadow: 0 0 0 .1875rem var(--ink); }
.swatches input[type="color"] { width: 3.5rem; height: 2.5rem; padding: .15rem; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: none; }
.logobox { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.logobox img { height: 3.5rem; width: auto; max-width: 12rem; object-fit: contain; padding: .5rem; border-radius: var(--r-sm); background: #fff; border: 1px solid var(--line); }
.error { margin-top: .75rem; color: var(--bad); font-weight: 700; }
.error:empty { display: none; }

/* ---------- e-mail ---------- */
.tpl a { display: block; padding: .5rem .9rem; border-radius: var(--r-sm); text-decoration: none; }
.tpl a:hover { background: var(--surface-2); }
.tpl a[aria-current="true"] { background: var(--ink); color: var(--surface); font-weight: 700; }
.mail__meta { padding-bottom: .9rem; margin-bottom: 1rem; border-bottom: 1px solid var(--line); }
.mail__meta div { display: flex; gap: .75rem; }
.mail__meta dt { min-width: 5.5rem; color: var(--muted); }
.mail__body { max-width: 34rem; margin-inline: auto; padding: 1.75rem; border-radius: var(--r); background: var(--surface-2); overflow-wrap: anywhere; }
.mail__body img { height: 2.75rem; width: auto; max-width: 10rem; object-fit: contain; margin-bottom: 1.5rem; }
.mail__body h3 { margin: 0 0 .75rem; font-size: 1.5rem; line-height: 1.2; }
.mail__body p { margin-bottom: .9rem; }
.mail__sum { margin: 1.25rem 0; padding: 1rem; border-radius: var(--r-sm); background: var(--surface); }
.mail__sum div { display: flex; justify-content: space-between; gap: 1rem; padding: .2rem 0; }
.mail__foot { margin: 1.5rem 0 0 !important; padding-top: 1rem; border-top: 1px solid var(--line-strong); font-size: .875rem; color: var(--muted); }

/* ---------- statistieken ---------- */
.years { display: flex; flex-wrap: wrap; gap: .25rem .9rem; }
.years label { display: flex; align-items: center; gap: .4rem; margin: 0; font-weight: 400; cursor: pointer; }
.years i, .tip i { width: .875rem; height: .875rem; border-radius: .2rem; flex: none; }
.years input { width: 1.125rem; height: 1.125rem; accent-color: var(--ink); }
.chartbox { position: relative; max-width: 60rem; margin-inline: auto; }
.chartbox svg { width: 100%; height: auto; }
.chartbox text { font-size: 11px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.chartbox .end { fill: var(--ink); font-weight: 700; }
.chartbox .gridline { stroke: var(--line); }
.chartbox .cross { stroke: var(--line-strong); }
.chartbox polyline { stroke-dasharray: 1; animation: draw 1.4s cubic-bezier(.455,.03,.515,.955) .3s both; }
.tip { position: absolute; top: .5rem; width: 9.5rem; padding: .6rem .75rem; border-radius: var(--r-sm); background: #14171c; color: #fff; font-size: .875rem; pointer-events: none; }
.tip span { display: flex; align-items: center; gap: .4rem; }
.tip b { margin-left: auto; }
.rank li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1rem; padding: .55rem 0; }
.rank i { grid-column: 1 / -1; height: .5rem; border-radius: 0 .25rem .25rem 0; background: linear-gradient(90deg, var(--c, #2a78d6) var(--w), var(--surface-2) var(--w)); transform-origin: left; animation: grow .9s cubic-bezier(.215,.61,.355,1) both; }
.rank small { grid-column: 1 / -1; color: var(--muted); }

.toast { position: fixed; left: 50%; bottom: 1.25rem; z-index: 50; translate: -50% 0; max-width: calc(100vw - 2rem); padding: .75rem 1.25rem; border-radius: var(--r); background: var(--ink); color: var(--surface); box-shadow: 0 .75rem 2rem rgb(20 23 28 / .3); animation: toast .45s cubic-bezier(.34,1.8,.64,1) both; }
.toast:empty { display: none; }

/* ---------- beweging: schermen komen rustig binnen, cijfers tellen op (app.js) ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(.75rem); } }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes grow { from { transform: scaleX(0); } }
main.no-anim > *, main.no-anim polyline, main.no-anim .rank i { animation: none; }

@media (min-width: 48em) { .fields { grid-template-columns: 1fr 1fr; } .fields .wide { grid-column: 1 / -1; } .fields--3 { grid-template-columns: 2fr 1fr 1fr; } }
@media (min-width: 62em) {
  .grid--3 { grid-template-columns: 1fr 1fr .8fr; align-items: stretch; }
  .grid--stats { grid-template-columns: 1.6fr 1fr; align-items: stretch; }
  .grid--md { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); }
  .grid--half { grid-template-columns: 1fr 1fr; }
  .grid--side { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); }
  .grid--doc { grid-template-columns: minmax(0, 1fr) minmax(0, 21rem); }
}
@media (min-width: 80em) { .grid--mail { grid-template-columns: 15rem minmax(0, 1fr) minmax(0, 1.15fr); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------- v5: te doen overal, bevestigen bij versturen, bewerkscherm met pdf ernaast, klantzoeker ---------- */
.top__tools { position: relative; }
.tododrop summary { display: flex; align-items: center; gap: .25rem; height: 2.75rem; padding: 0 .6rem 0 1rem; border: 1px solid var(--line-strong); border-radius: 999px; list-style: none; cursor: pointer; white-space: nowrap; transition: background-color .25s var(--ease); }
.tododrop summary::-webkit-details-marker { display: none; }
.tododrop summary:hover, .tododrop[open] summary { background: var(--panel); }
.tododrop .count { background: var(--accent-fill); color: var(--on-accent); font-weight: 700; }
#todopanel { position: absolute; right: 0; top: calc(100% + .5rem); z-index: 20; width: min(24rem, calc(100vw - 1.5rem)); padding: 1.25rem 1.5rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: 0 1.5rem 3rem rgb(20 23 28 / .18); animation: pop .32s cubic-bezier(.34,1.8,.64,1) both; transform-origin: top right; }
#todopanel h2 { margin-bottom: .25rem; font-size: 1.125rem; }
dialog { width: min(34rem, calc(100vw - 2rem)); padding: 1.75rem; border: 0; border-radius: var(--r-lg); background: var(--surface); color: var(--ink); box-shadow: 0 2rem 4rem rgb(20 23 28 / .3); animation: pop .32s cubic-bezier(.34,1.8,.64,1) both; transform-origin: top right; }
dialog::backdrop { background: rgb(20 23 28 / .45); }
dialog h2 { margin-bottom: 1rem; font-size: 1.5rem; font-weight: 400; }
dialog .facts dd { overflow-wrap: anywhere; }
dialog .actions { justify-content: flex-end; margin-top: 1.25rem; }
dialog [data-mailprev] { margin-right: auto; }
.combo { position: relative; }
#clientopts { position: absolute; left: 0; right: 0; z-index: 10; max-height: 20rem; overflow-y: auto; margin-top: .25rem; padding: .375rem; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); box-shadow: 0 1rem 2rem rgb(20 23 28 / .18); }
#clientopts li { padding: .5rem .75rem; border-radius: var(--r-sm); cursor: pointer; }
#clientopts li:hover, #clientopts li[aria-selected="true"] { background: var(--surface-2); }
#clientopts strong, #clientopts small { display: block; }
#clientopts small { color: var(--muted); overflow-wrap: anywhere; }
.totalsbox { max-width: 24rem; margin: 1rem 0 0 auto; }
.totalsbox .totals { margin-top: .5rem; }
.discrow { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-inline: .75rem; }
.discrow label { margin: 0; font-weight: 400; }
.discrow .input { width: 6rem; text-align: right; }
.previewcol { display: none; position: sticky; top: .75rem; }
.previewbox { position: relative; aspect-ratio: 210 / 297; overflow: hidden; border-radius: var(--r); box-shadow: 0 1rem 2.5rem rgb(20 23 28 / .22); background: #fbfbf5; }
.previewbox iframe { position: absolute; left: 0; top: 0; width: 210mm; height: 297mm; border: 0; transform-origin: 0 0; pointer-events: none; }
.mailframe { display: block; width: 100%; min-height: 40rem; border: 0; border-radius: var(--r); }
.blk { padding: 1rem; border: 1px solid var(--line); border-radius: var(--r); }
.blk legend { padding: 0 .4rem; }
#statstable td, #statstable th { padding-block: .32rem; }
@media (min-width: 62em) { .grid--chart { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; } }
@media (min-width: 80em) { .grid--edit { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } .previewcol { display: block; } }

.grid--chart .chartbox { width: 100%; max-width: none; margin: 0; }
table.lines .input, table.lines select { padding-inline: .6rem; }
table.lines td:nth-child(2) { width: auto; min-width: 11rem; }
table.lines td:nth-child(1), table.lines td:nth-child(4), table.lines td:nth-child(5) { width: 4.75rem; min-width: 4.5rem; } table.lines td:nth-child(3) { width: 6.5rem; min-width: 6rem; }
table.lines td:last-child { width: 2.75rem; }

.avatarlink { border-radius: 50%; }
.avatarlink[aria-current="page"] .avatar { box-shadow: 0 0 0 .1875rem var(--ink); }
.avatar--lg { width: 5rem; height: 5rem; }
.logobox .avatar--lg { padding: 0; border-radius: 50%; }

/* ---------- v6: beweging naar de Rapport-demo (de rest staat in motion.js) ---------- */
.w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .1em; margin-bottom: -.1em; }
.w > span { display: inline-block; }
@keyframes pop { from { opacity: 0; transform: translateY(-.25rem) scale(.94); } }
@keyframes toast { from { opacity: 0; transform: translateY(1.125rem) scale(.96); } }
@keyframes fade { from { opacity: 0; } }
dialog[open] { animation: pop .45s cubic-bezier(.34,1.6,.64,1) both; transform-origin: center; }
dialog[open]::backdrop { animation: fade .3s ease both; }
.float-up { position: fixed; z-index: 60; padding: .25rem .65rem; border-radius: 999px; background: var(--ok); color: var(--surface); font-weight: 700; font-size: .9375rem; white-space: nowrap; pointer-events: none; font-variant-numeric: tabular-nums; }
.btn--primary { transition: background-color .25s var(--ease), translate .5s cubic-bezier(.215,.61,.355,1), box-shadow .25s var(--ease); }
/* Zachte kleurvlakken op de achtergrond die heel langzaam verschuiven. */
body::before { content: ""; position: fixed; inset: -20%; z-index: -1; pointer-events: none; opacity: .55;
  background: radial-gradient(28rem 22rem at 18% 22%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), radial-gradient(32rem 26rem at 82% 70%, rgb(42 120 214 / .1), transparent 70%);
  animation: drift 24s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate(3%, -2%) scale(1.06); } }

/* ---------- v7: prestatiegrafiek op het dashboard (dit jaar donker, vorig jaar licht, één blauwe reeks) ---------- */
:root { --bar-now: #2a78d6; --bar-prev: #86b6ef; }
[data-theme="dark"] { --bar-now: #3987e5; --bar-prev: #1c5cab; }
.perf__grid { display: grid; gap: 1.5rem; align-items: end; }
.perf__deltas { display: grid; gap: .6rem; margin-top: 1rem; }
.perf__deltas dt { font-size: .9375rem; color: var(--muted); }
.perf__deltas dd { display: flex; align-items: center; gap: .5rem; }
.perf__legend { display: flex; gap: 1rem; font-size: .9375rem; color: var(--muted); }
.perf__legend li { display: flex; align-items: center; gap: .4rem; }
.perf__legend i { width: .875rem; height: .875rem; border-radius: .2rem; }
.perf__legend .perf__now, .perf__pair .perf__now { background: var(--bar-now); }
.perf__legend .perf__prev, .perf__pair .perf__prev { background: var(--bar-prev); }
.perf__bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(.25rem, 1vw, .75rem); height: 13rem; }
.perf__month { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.perf__month span { text-align: center; color: var(--muted); }
.perf__pair { flex: 1; display: flex; align-items: flex-end; gap: 2px; border-bottom: 1px solid var(--line-strong); }
.perf__pair i { flex: 1; border-radius: .25rem .25rem 0 0; transform-origin: bottom; animation: growY .9s cubic-bezier(.215,.61,.355,1) both; }
.perf__pair i { background: var(--c); }
.perf__pair .is-partial { background: repeating-linear-gradient(135deg, var(--c) 0 .3rem, color-mix(in srgb, var(--c) 45%, var(--surface)) .3rem .6rem); }
.perf__month .is-now { color: var(--ink); font-weight: 700; }
.perf__pair { gap: 1px; }
.perf__month:hover .perf__pair i { filter: brightness(1.08); }
@keyframes growY { from { transform: scaleY(0); } }
main.no-anim .perf__pair i { animation: none; }
@media (min-width: 62em) { .perf__grid { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); } }

/* ---------- v8: mailing en e-mailverzending ---------- */
.stepnr { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; margin-right: .6rem; border-radius: 50%; background: var(--ink); color: var(--surface); font-size: .9375rem; font-weight: 700; vertical-align: middle; }
.aud__count { font-size: 1.125rem; }
.aud__count strong { font-size: 1.5rem; }
.aud__custom summary, .aud__list summary { cursor: pointer; font-weight: 700; }
.aud__list ul { max-height: 16rem; overflow-y: auto; margin-top: .5rem; padding: .5rem; border: 1px solid var(--line); border-radius: var(--r-sm); }
.aud__list li + li { margin-top: .35rem; }
.previewcol--mail { display: block; position: sticky; top: .75rem; }
.checks { margin-top: .75rem; }
.checks li { padding: .75rem 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.checks__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.checks code { padding: .1rem .35rem; border-radius: .3rem; background: var(--surface-2); font-size: .875rem; }
.checks__fix { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .4rem; }
.checks__fix code { flex: 1 1 18rem; }
.checks .error { margin: 0; }

/* ---------- v9: documentpagina met pdf ernaast, opvolging offertes ---------- */
.previewcol--always { display: block; position: sticky; top: .75rem; }
.sigimg { display: block; max-width: 14rem; margin-top: .5rem; background: #fff; border-radius: .5rem; }
.rate { height: .5rem; margin: .75rem 0 .4rem; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.rate i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: var(--ok); transform-origin: left; animation: grow .9s cubic-bezier(.215,.61,.355,1) .3s both; }
#confirm-text { margin-top: .75rem; }

/* ---------- v10: "omgekeerde" vlakken (actief menu, gekozen filter, zwarte kaart) zijn in donkere modus geen witte blokken maar een lichtere grijstint ---------- */
:root { --invert: var(--ink); --on-invert: var(--surface); }
[data-theme="dark"] { --invert: #3a4048; --on-invert: #f1f2f4; }
.nav__pill, .nav a[aria-current="page"], .more summary.is-current, .filters button[aria-pressed="true"], .more__panel a[aria-current="page"], .tpl a[aria-current="true"], .stepnr, .thread .me, .btn--dark, .toast, .skiplink { background: var(--invert); color: var(--on-invert); border-color: var(--invert); }
.panel--ink { background: var(--invert); color: var(--on-invert); --muted: color-mix(in srgb, var(--on-invert) 72%, transparent); }
[aria-pressed="true"] .count { background: var(--on-invert); color: var(--invert); }

/* ---------- v11: tabbladen op Instellingen ---------- */
.settabs { display: flex; flex-wrap: wrap; gap: .25rem; }
.settabs button { padding: .55rem 1.1rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--panel); transition: background-color .25s var(--ease), color .25s var(--ease); }
.settabs button:hover { background: var(--surface); }
.settabs button[aria-selected="true"] { background: var(--invert); border-color: var(--invert); color: var(--on-invert); font-weight: 700; }
#setform { max-width: 52rem; }

/* ---------- v12: prognose op 30% dekking ---------- */
.perf__pair .is-forecast { position: relative; display: flex; align-items: flex-end; background: color-mix(in srgb, var(--c) 30%, transparent); }
.perf__pair .is-forecast b { display: block; width: 100%; border-radius: .25rem .25rem 0 0; }
.perf__pair .is-forecast b.is-partial { background: var(--c); }
.perf__fc { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px dashed var(--line-strong); }
.perf__fclegend { display: flex; align-items: center; gap: .4rem; }

/* ---------- v13: prognose compact met uitleg in een tooltip ---------- */
.perf__fc { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; margin-top: 1rem; padding-top: .9rem; border-top: 1px dashed var(--line-strong); }
.perf__fc strong { font-size: 1.25rem; font-weight: 400; }
.tipwrap { position: relative; display: inline-flex; }
.info { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%; background: none; font: italic 700 .8125rem/1 Georgia, serif; color: var(--muted); }
.info:hover, .info:focus-visible { color: var(--ink); border-color: var(--ink); }
.tipbox { display: none; position: absolute; left: 50%; bottom: calc(100% + .5rem); z-index: 30; width: min(19rem, 80vw); translate: -50% 0; padding: .9rem 1rem; border-radius: var(--r); background: var(--invert); color: var(--on-invert); box-shadow: 0 1rem 2rem rgb(20 23 28 / .25); font-size: .875rem; line-height: 1.45; animation: pop .25s cubic-bezier(.34,1.8,.64,1) both; transform-origin: bottom center; }
.tipwrap:hover .tipbox, .tipwrap:focus-within .tipbox { display: block; }
.tipbox strong { display: block; margin-bottom: .4rem; font-size: .9375rem; }
.tiprow { display: flex; justify-content: space-between; gap: 1rem; padding: .15rem 0; }
.tipnote { display: block; margin-top: .5rem; opacity: .8; }
@media (max-width: 40em) { .tipbox { left: auto; right: -1rem; translate: none; } }

/* ---------- v14: prestatieblok laag en compact, grafiek naast de tekst ---------- */
.perf .panel__head { margin-bottom: .5rem; }
.perf__grid { grid-template-columns: minmax(0, 1fr); gap: 1rem 1.5rem; }
.perf .bigval { font-size: clamp(1.375rem, 1.1rem + .8vw, 1.75rem); }
.perf__deltas { display: grid; gap: .3rem; margin-top: .5rem; }
.perf__deltas li { display: flex; align-items: center; gap: .4rem; font-size: .9375rem; }
.perf__fc { margin-top: .75rem; padding-top: .6rem; }
.perf__fc strong { font-size: 1.125rem; }
.perf__bars { height: 10.5rem; }
.perf__month > span { font-size: .8125rem; }
.perf .hint { margin-top: .5rem; font-size: .8125rem; }
@media (max-width: 47.99em) { .perf__rest { display: none; } }
@media (min-width: 32em) { .perf__grid { grid-template-columns: minmax(0, 11.5rem) minmax(0, 1fr); } .perf__bars { gap: .3rem; } }
@media (min-width: 48em) { .perf__grid { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); } .perf__bars { gap: clamp(.25rem, 1vw, .75rem); } }
@media (min-width: 62em) { .perf__grid { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); } }

/* ---------- v15: eigen tooltip in de prestatiegrafiek ---------- */
.perf__bars { position: relative; }
.perf__month { cursor: default; }
.perf__pair i { transition: opacity .25s var(--ease), filter .25s var(--ease); }
.perf__bars:has(.is-hover) .perf__month:not(.is-hover) .perf__pair i { opacity: .4; }
.perf__month.is-hover .perf__pair i { filter: saturate(1.15); }
.perf__month.is-hover > span { color: var(--ink); font-weight: 700; }
.perftip { position: absolute; bottom: calc(100% - 1.5rem); z-index: 5; min-width: 12.5rem; padding: .7rem .85rem; border-radius: var(--r); background: var(--invert); color: var(--on-invert); box-shadow: 0 1rem 2rem rgb(20 23 28 / .25); font-size: .875rem; pointer-events: none; transform-origin: bottom center; }
.perftip strong { display: block; margin-bottom: .35rem; font-size: .9375rem; text-transform: capitalize; }
.perftip__row { display: flex; align-items: center; gap: .5rem; padding: .1rem 0; }
.perftip__row i { width: .75rem; height: .75rem; border-radius: .2rem; flex: none; }
.perftip__row b { margin-left: auto; font-weight: 700; }
.perftip__note { display: block; margin: 0 0 .25rem 1.25rem; font-size: .8125rem; opacity: .75; }
.perftip .up { color: #6fd39b; font-weight: 700; }
.perftip .down { color: #ff9488; font-weight: 700; }
.perftip__note { opacity: 1; color: color-mix(in srgb, var(--on-invert) 75%, transparent); }

/* ---------- v16: menu Diensten en de aanmaakflow ---------- */
.nav__pill span { box-sizing: border-box; flex: none; }
.navdrop summary { display: block; padding: .55rem 1rem; border-radius: 999px; list-style: none; cursor: pointer; white-space: nowrap; color: var(--muted); transition: background-color .25s var(--ease), color .25s var(--ease); }
.navdrop summary::-webkit-details-marker { display: none; }
.navdrop summary::after { content: " ▾"; }
.navdrop summary:hover, .navdrop[open] summary { color: var(--ink); background: var(--panel); }
.navdrop summary.is-current { background: var(--invert); color: var(--on-invert); }
.svcmenu { position: fixed; z-index: 40; width: min(24rem, calc(100vw - 1.5rem)); padding: .5rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: 0 1.5rem 3rem rgb(20 23 28 / .2); animation: pop .32s cubic-bezier(.34,1.8,.64,1) both; transform-origin: top left; }
.svcmenu a { display: block; text-decoration: none; border-radius: var(--r-sm); }
.svcmenu strong, .svcmenu small { display: block; }
.svcmenu small { color: var(--muted); }
.svcmenu__row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .25rem; }
.svcmenu__row + .svcmenu__row { border-top: 1px solid var(--line); }
.svcmenu__row > a:first-child { flex: 1; padding: .6rem .75rem; }
.svcmenu__row > a:hover { background: var(--surface-2); }
.svcmenu a.svcmenu__add { display: inline-flex; flex: none; margin-right: .5rem; padding: .4rem .9rem; font-size: .875rem; border-radius: 999px; }
.svcmenu a.svcmenu__add:hover { background: var(--surface-2); }
.svcmail__note { margin-bottom: .75rem; font-size: .9375rem; }
.svcmodes { margin-bottom: .25rem; }
.svcmodes a { padding: .45rem 1rem; border-radius: 999px; background: var(--surface-2); text-decoration: none; }
.svcmodes a.is-on { background: var(--invert); color: var(--on-invert); font-weight: 700; }
.domainbox { display: flex; align-items: center; gap: .25rem; margin-top: 1rem; padding: .35rem .5rem .35rem 1.1rem; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); font-size: 1.25rem; transition: border-color .2s; }
.domainbox:focus-within { border-color: var(--ink); outline: .1875rem solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: .1rem; }
.domainbox span { color: var(--muted); }
.domainbox input { flex: 1; min-width: 0; padding: .55rem .25rem; border: 0; background: none; font-size: inherit; }
.domainbox input:focus-visible { outline: none; }
.domstate { margin-top: .75rem; padding: .7rem 1rem; border-radius: var(--r-sm); background: var(--surface-2); animation: pop .3s cubic-bezier(.34,1.6,.64,1) both; }
.domstate--ok { background: color-mix(in srgb, var(--ok) 14%, var(--surface)); color: var(--ok); }
.domstate--warn { background: color-mix(in srgb, var(--warn) 14%, var(--surface)); }
.domstate--bad { background: color-mix(in srgb, var(--bad) 12%, var(--surface)); color: var(--bad); }
.spinner { display: inline-block; width: .9rem; height: .9rem; border: 2px solid var(--line-strong); border-top-color: var(--ink); border-radius: 50%; vertical-align: -.1rem; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.dchoices { display: grid; gap: .5rem; margin-top: .75rem; }
.dchoice { display: flex; gap: .75rem; align-items: flex-start; margin: 0; padding: .75rem 1rem; border: 1px solid var(--line-strong); border-radius: var(--r-sm); font-weight: 400; cursor: pointer; }
.dchoice:has(input:checked) { border-color: var(--ink); background: var(--surface-2); }
.dchoice input { margin-top: .2rem; accent-color: var(--ink); }
.dchoice small { display: block; color: var(--muted); }
.linkish { padding: 0; border: 0; background: none; color: var(--accent-text); font-weight: 700; text-decoration: underline; cursor: pointer; }
.pkgs { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); }
.pkg { position: relative; display: block; margin: 0; padding: 1rem 1.1rem; border: 1px solid var(--line-strong); border-radius: var(--r); font-weight: 400; cursor: pointer; transition: border-color .2s, background-color .2s, translate .25s var(--ease); }
.pkg:hover { translate: 0 -.125rem; }
.pkg:has(input:checked) { border-color: var(--ink); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--ink); }
.pkg:has(input:focus-visible) { outline: .1875rem solid var(--ink); outline-offset: .15rem; }
.pkg input { position: absolute; top: 1rem; right: 1rem; width: 1.1rem; height: 1.1rem; accent-color: var(--ink); }
.pkg strong { display: block; font-size: 1.125rem; }
.pkg__price { display: block; margin: .3rem 0 .5rem; font-size: 1.25rem; }
.pkg__price small { font-size: .8125rem; color: var(--muted); }
.pkg__tag { display: inline-block; margin-bottom: .4rem; padding: .05rem .5rem; border-radius: 999px; background: var(--accent-fill); color: var(--on-accent); font-size: .75rem; font-weight: 700; }
.pkg ul { font-size: .875rem; color: var(--muted); }
.pkg li::before { content: "✓ "; color: var(--ok); }
.svcmore { margin-top: 1rem; }
.svcmore summary { cursor: pointer; font-weight: 700; }
.svcsum h2 { font-size: 1.25rem; }
.svcsum .totals { max-width: none; }
.svcsum .totals div:not(:last-child) span:first-child { color: var(--muted); }
.btn--block { width: 100%; padding-block: .85rem; font-size: 1.0625rem; }
.prov { margin-top: .5rem; counter-reset: prov; }
.prov li { position: relative; padding: .4rem 0 .4rem 2rem; font-size: .9375rem; }
.prov li::before { counter-increment: prov; content: counter(prov); position: absolute; left: 0; top: .35rem; display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 1px solid var(--line-strong); font-size: .75rem; color: var(--muted); }
.prov li.is-busy::before { content: ""; border-color: var(--line-strong); border-top-color: var(--ink); animation: spin .7s linear infinite; }
.prov li.is-done::before { content: "✓"; background: var(--ok); border-color: var(--ok); color: var(--surface); animation: pop .3s cubic-bezier(.34,1.8,.64,1) both; }
.prov li.is-done { color: var(--ink); }
.prov--plan li { color: var(--muted); }
/* keuzerondjes als pillen (facturatie, mailing) */
.pay { display: flex; flex-wrap: wrap; gap: .4rem; }
.pay label { display: flex; align-items: center; gap: .4rem; margin: 0; padding: .45rem .9rem; border: 1px solid var(--line-strong); border-radius: 999px; font-weight: 400; cursor: pointer; transition: background-color .2s, color .2s; }
.pay label:has(input:checked) { background: var(--invert); border-color: var(--invert); color: var(--on-invert); }
.pay label:has(input:focus-visible) { outline: .1875rem solid var(--ink); outline-offset: .15rem; }
.pay input { accent-color: var(--accent); }

/* Groei hosting en onderhoud in Hoe presteer je? */
.perf__growth { display: grid; gap: .3rem; margin-top: .75rem; padding-top: .6rem; border-top: 1px dashed var(--line-strong); }
.perf__growth li { display: flex; align-items: center; gap: .4rem; font-size: .9375rem; }
.tiprow small { opacity: .75; font-size: .8125rem; }
/* Hoe presteer je? compacter: bredere tekstkolom, smalle en rustige staafjes. */
@media (min-width: 48em) { .perf__grid { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); } }
@media (min-width: 62em) { .perf__grid { grid-template-columns: minmax(0, 23rem) minmax(0, 1fr); } .perf__fc { flex-wrap: nowrap; white-space: nowrap; } }
.perf__bars { height: 9rem; }
.perf__pair { justify-content: center; gap: 2px; border-bottom-color: var(--line); }
.perf__pair i { flex: 0 1 .4rem; border-radius: .2rem .2rem 0 0; }
.perf__pair .is-forecast b { border-radius: .2rem .2rem 0 0; }
/* Staafjes schalen mee met de breedte van de maand. */
.perf__pair i { flex: 0 1 30%; }
/* Kerncijfers op de klantpagina. */
.kstats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; margin-top: .75rem; }
.kstats dt { color: var(--muted); font-size: .875rem; }
.kstats dd { font-size: 1.375rem; line-height: 1.25; }
.kstats .kstats__note { font-size: .8125rem; color: var(--muted); }
@media (min-width: 40em) { .kstats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Menu niet horizontaal scrollen: past het niet, dan loopt het door op een tweede regel. De pil volgt dezelfde regels. */
.nav { flex-wrap: wrap; overflow: visible; }
.nav__pill { flex-wrap: wrap; }
@media (max-width: 40em) { .nav a, .nav summary, .nav__pill span { padding-inline: .7rem; } }
.top nav { align-items: flex-start; }
@media (min-width: 62em) { .kstats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Lange e-mailadressen en adressen breken af in plaats van buiten het blok te lopen. */
.facts { grid-template-columns: auto minmax(0, 1fr); }
.facts dd { min-width: 0; overflow-wrap: anywhere; }
/* Meerdere domeinnamen: plakken, checken, kiezen. */
.dchoices--row { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.dombox { display: flex; gap: .75rem; align-items: flex-start; margin-top: 1rem; }
.dombox textarea { flex: 1; min-height: 7.5rem; font-family: inherit; }
.domtabs { display: flex; margin-top: 1rem; border: 1px solid var(--line-strong); border-radius: var(--r-sm); overflow: hidden; }
.domtabs button { flex: 1; padding: .6rem .75rem; border: 0; background: none; font-weight: 700; color: var(--ink); cursor: pointer; }
.domtabs button + button { border-left: 1px solid var(--line-strong); }
.domtabs button[aria-selected="true"] { background: var(--ink); color: var(--surface); }
.domlist li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.domlist li > .check, .domlist li > span:first-child { flex: 1; min-width: 12rem; }
.domlist small { display: block; color: var(--muted); }
.domlist .num small { display: inline; }
.domauth { width: 13rem; }
.domsum { margin-top: .75rem; }
.runlist li { display: flex; gap: .75rem; align-items: baseline; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.runlist small { display: block; color: var(--muted); }
.runok { color: var(--ok); font-weight: 700; }
.runwarn { color: var(--warn); font-weight: 700; }
@media (max-width: 40em) { .dombox { flex-direction: column; align-items: stretch; } .domauth { width: 100%; } }
/* Abonnementen per domeinnaam: omschrijving breed, periode en prijs smal; totaalregel over de hele breedte. */
.domsubs { width: 100%; }
.domsubs th:nth-child(2), .domsubs td:nth-child(2) { width: 1%; white-space: nowrap; padding-inline: 1.5rem; color: var(--muted); }
.domsubs th:last-child, .domsubs td:last-child { width: 8rem; }
.domsubs td:first-child { overflow-wrap: anywhere; }
.domsubs input { width: 100%; max-width: none !important; text-align: right; }
.domsubs td { padding-block: .4rem; vertical-align: middle; }
.domsubs tfoot th, .domsubs tfoot td { border: 0; border-top: 1px solid var(--line-strong); padding-top: .75rem; }
/* Meer: netjes op één lijn met de andere menu-items, en een rustig megamenu in vier kolommen. */
.top nav > .more { margin-top: .1875rem; }
.more__panel { left: auto; right: 0; width: min(60rem, calc(100vw - 1.5rem)); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: .75rem; }
.more__panel > div { padding: .75rem 1rem; }
.more__panel h2 { margin: 0 0 .5rem; padding-bottom: .5rem; border-bottom: 2px solid var(--accent); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.more__panel ul { display: grid; gap: .125rem; }
.more__panel a { margin-left: 0; padding: .45rem .6rem; margin-inline: -.6rem; }
@media (min-width: 48em) { .more__panel { grid-template-columns: repeat(4, minmax(0, 1fr)); } .more__panel > div + div { border-left: 1px solid var(--line); } }
/* Zoeken door alles */
dialog.search { width: min(40rem, calc(100vw - 2rem)); margin-top: 10vh; padding: 0; overflow: hidden; }
.search__box { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.search__box .icon { flex: none; width: 1.25rem; height: 1.25rem; color: var(--muted); }
.search__box input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 1.125rem; color: var(--ink); outline: none; }
.search__box input::-webkit-search-cancel-button { display: none; }
.search__box kbd { padding: .15rem .45rem; border: 1px solid var(--line-strong); border-radius: .3rem; font: inherit; font-size: .75rem; color: var(--muted); }
#search-list { max-height: min(28rem, 60vh); overflow-y: auto; padding: .5rem; }
#search-list [role="option"] { display: flex; flex-direction: column; padding: .55rem .75rem; border-radius: var(--r-sm); cursor: pointer; }
#search-list [aria-selected="true"] { background: var(--surface-2); }
#search-list small { color: var(--muted); }
.search__group { padding: .75rem .75rem .25rem; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.search__empty { padding: 1rem .75rem; color: var(--muted); }
/* Meer acties: knop in de kop met een uitklapmenu, overal op dezelfde plek. */
.actmenu { position: relative; }
.actmenu > summary { list-style: none; cursor: pointer; }
.actmenu > summary::-webkit-details-marker { display: none; }
.actmenu > summary::after { content: "▾"; font-size: .75em; }
.actmenu[open] > summary { background: var(--panel); }
.actmenu__panel { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 25; min-width: 15rem; padding: .4rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: 0 1rem 2.5rem rgb(20 23 28 / .18); animation: pop .25s cubic-bezier(.34,1.6,.64,1) both; transform-origin: top right; }
.actmenu__panel .linkbtn { margin: 0; padding: .55rem .75rem; white-space: nowrap; font-weight: 400; color: var(--ink); }
.actmenu__risk { margin-top: .3rem; padding-top: .3rem; border-top: 1px solid var(--line); }
.actmenu__risk .linkbtn { color: var(--bad); }
/* Kopbalk past op één regel, ook met het zoekicoon erbij. */
@media (min-width: 75em) { .nav a, .nav summary, .more summary, .nav__pill span { padding-inline: .8rem; } .top__tools { gap: .35rem; } .top { column-gap: .75rem; } }
.checklist li { display: flex; gap: .6rem; align-items: center; padding: .35rem 0; }