/* Hallmark · shape: app screen · genre: editorial · theme: Editorial (by request, the tokens of winkelklaar.nl)
 * nav: a top bar, wordmark left, two links, the signed-in address and sign-out right; under 40rem the bar wraps to two lines · signature: the startcheck ledger, rows sorted worst first, each with its colour said in a word and a heavy rule in that colour, the measured finding in the label face and the advice in the serif · states: loading (skeleton ledger, self-refresh), empty (no clients, a filter with nobody, a check never run, a block never filled), error (check failed, field errors focus the first), full
 * axes: light/display-condensed/chromatic-green · posture: restrained · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, the dossier is long by nature; the ledger leads it, blocks edit in place via the address, and akkoorden and logboek sit beside it on wide screens */
/* Hallmark · dismissed F4 · the stand row is one segmented control (seven steps, the current one green), not two primary actions */
/* Hallmark · hero-review: not run (app screen, no hero) · finish-review: subagent · 8 findings · 7 resolved 1 partial (6: hint space stays reserved per F14 so errors never shift the form; the gap is tightened) · gap: none */
/* Hallmark · v2.2 (7 nov, punt 10d) · added screens: WhatsApp, all conversations as a ledger table (unread first, unknown numbers flagged), one conversation as a logbook (each message a row: who and when in the label face, the text in the serif; incoming on a black rule, ours on a green rule and indented; unread on the warn tint; failed on a red rule), reply box or template box under it, number, client and consent beside it; dossier block WhatsApp; sloplint 0 FAIL on the live pages (offline copies: 76 the photo needs a login, and 72 measured on that broken image only); states: off, simulated, window open, window closed without and with consent, unsubscribed, unknown number, file pending, failed */
/* Hallmark · v2.1 (7 nov, punt 9) · added screen: the monthly report to read and complete (what is in it as a ledger table, then the text, next month as two what-and-why pairs, a read-it checkbox, send); states: concept, missing items listed, error, simulated figures, sent and locked */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wdth,wght@12..96,75..100,500..800&family=Source+Serif+4:opsz,wght@8..60,400&display=swap");
@import url("./tokens.css");
@import url("./base.css");
@import url("./telefoons.css");

:root {
  --font-label: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --color-warn: oklch(70% 0.150 68);
  --color-warn-soft: oklch(93% 0.040 75);
  --color-error-soft: oklch(93% 0.035 27);
  --color-success-soft: oklch(93% 0.035 150);
  --control: 40px;
  --zij: 22rem;
}

body { font-family: var(--font-label); font-variation-settings: "opsz" 12; font-size: var(--text-md); color: var(--color-ink-2); }
h1, h2, h3 { color: var(--color-ink); font-variation-settings: "wdth" 75, "opsz" 96; }
h1 { font-size: var(--text-3xl); line-height: 1; }
h2 { font-size: var(--text-xl); line-height: 1; }
h3 { font-family: var(--font-label); font-weight: 500; font-size: var(--text-md); font-variation-settings: "opsz" 12; letter-spacing: 0; line-height: 1.3; }
a:hover { text-decoration-color: var(--color-accent); }

.overslaan { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); background: var(--color-ink); color: var(--color-paper); padding: var(--space-xs) var(--space-md); z-index: var(--z-toast); }
.overslaan:focus-visible { top: var(--space-md); }

/* ---------- Bar ---------- */
.balk { border-bottom: var(--rule-heavy) solid var(--color-ink); background: var(--color-paper); }
.balk-binnen { display: flex; align-items: center; gap: var(--space-xl); min-height: 64px; flex-wrap: wrap; }
.merk { font-family: var(--font-display); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96; font-size: var(--text-xl); color: var(--color-ink); text-decoration: none; letter-spacing: var(--tracking-display); }
.merk span { font-family: var(--font-label); font-weight: 500; font-variation-settings: "opsz" 12; font-size: var(--text-md); color: var(--color-muted); letter-spacing: 0; }
.menu { display: flex; flex-wrap: wrap; gap: 0 var(--space-lg); }
.menu a { white-space: nowrap; }
.menu a { text-decoration: none; color: var(--color-ink-2); padding-block: var(--space-xs); border-bottom: 2px solid transparent; transition: border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.menu a:hover { color: var(--color-ink); border-bottom-color: var(--color-rule-2); }
.menu a[aria-current="page"] { color: var(--color-ink); border-bottom-color: var(--color-accent); }
.wie { margin-left: auto; display: flex; align-items: center; gap: var(--space-md); color: var(--color-muted); font-size: var(--text-sm); }
.wie a { color: inherit; text-decoration-color: var(--color-rule-2); }
.wie a:hover, .wie a[aria-current="page"] { color: var(--color-ink); text-decoration-color: var(--color-accent); }

main { padding-block: var(--space-xl) var(--space-3xl); }

/* ---------- Controls ---------- */
.knop, .knop-tweede, .knop-tekst { font-family: var(--font-label); font-size: var(--text-md); font-weight: 500; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); border-radius: 0; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); }
.knop, .knop-tweede { min-height: var(--control); padding: 0 var(--space-md); border: 1px solid var(--color-ink); position: relative; white-space: nowrap; }
.knop::after, .knop-tweede::after { content: ""; position: absolute; inset: -3px; }
.knop { background: var(--color-ink); color: var(--color-paper); }
.knop:hover { background: var(--color-ink-2); border-color: var(--color-ink-2); }
.knop:active { transform: translateY(1px); }
.knop-tweede { background: transparent; color: var(--color-ink); }
.knop-tweede:hover { background: var(--color-paper-2); }
.knop-tweede:active { background: var(--color-paper-3); }
.knop-tekst { background: none; border: 0; padding: var(--space-xs) 0; color: var(--color-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; min-height: 44px; }
.knop-tekst:hover { text-decoration-color: var(--color-accent); }
.knop:focus-visible, .knop-tweede:focus-visible, .knop-tekst:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; transition: none; }
.knop:disabled, .knop-tweede:disabled { opacity: 0.55; cursor: not-allowed; }

.formulier { display: grid; gap: var(--space-md); }
.formulier-smal { max-width: 28rem; }
.formulier-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-lg); }
.veld { display: grid; gap: var(--space-2xs); min-width: 0; }
.formulier > .veld { margin-bottom: calc(-1 * var(--space-xs)); }
.veld-breed { grid-column: 1 / -1; }
.veld label, .keuzes legend { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink); }
.veld input, .veld select, .veld textarea { width: 100%; min-height: var(--control); padding: var(--space-xs) var(--space-sm); border: 1px solid var(--color-rule-2); border-radius: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-label); font-size: var(--text-md); transition: border-color var(--dur-micro) var(--ease-out); }
.veld textarea { font-family: var(--font-body); line-height: 1.5; resize: vertical; }
.veld input:hover, .veld select:hover, .veld textarea:hover { border-color: var(--color-ink-2); }
.veld input:focus-visible, .veld select:focus-visible, .veld textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; border-color: var(--color-ink); transition: none; }
.veld input:disabled, .veld select:disabled, .veld textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.hulp { min-height: 1lh; font-size: var(--text-sm); color: var(--color-muted); }
.heeft-fout input, .heeft-fout select, .heeft-fout textarea { border-color: var(--color-error); }
.heeft-fout .hulp { color: var(--color-error); }
.keuzes { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg); }
.keuzes legend { padding: 0; margin-bottom: var(--space-2xs); width: 100%; }
.keuzes label { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; cursor: pointer; }
.keuzes input { width: 18px; height: 18px; margin: 0; accent-color: var(--color-ink); }
.keuzes input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.acties { display: flex; align-items: center; gap: var(--space-lg); }
.fout-blok { padding: var(--space-sm) var(--space-md); background: var(--color-error-soft); color: var(--color-ink); border-left: var(--rule-heavy) solid var(--color-error); }
.opgeslagen, .bezig { padding: var(--space-sm) var(--space-md); background: var(--color-success-soft); color: var(--color-ink); border-left: var(--rule-heavy) solid var(--color-success); }
.stil { color: var(--color-muted); }
.lokaal { padding: var(--space-sm) var(--space-md); background: var(--color-paper-2); }

/* ---------- Page head ---------- */
.kop { display: grid; gap: var(--space-sm); margin-bottom: var(--space-xl); }
.kop p { font-family: var(--font-body); font-size: var(--text-lg); color: var(--color-ink-2); max-width: 52ch; }
.kop-rij { display: flex; align-items: end; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap; }
.kruimel { margin-bottom: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
.kruimel a { color: var(--color-ink-2); }
.inlog { max-width: 28rem; padding-block: var(--space-2xl); display: grid; gap: var(--space-lg); }
.inlog > p { font-family: var(--font-body); }

/* ---------- Overview ---------- */
.cijfers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 var(--space-xl); border-top: var(--rule-heavy) solid var(--color-ink); }
.cijfers > div { padding: var(--space-md) var(--space-lg); border-left: 1px solid var(--color-rule); }
.cijfers > div:first-child { padding-left: 0; border-left: 0; }
.cijfers > div:last-child { padding-right: 0; }
.cijfers dt { font-size: var(--text-sm); color: var(--color-muted); white-space: nowrap; }
.cijfers dd { margin: var(--space-2xs) 0 0; font-family: var(--font-display); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96; font-size: var(--text-3xl); line-height: 1; color: var(--color-ink); font-variant-numeric: lining-nums tabular-nums; }
.cijfers small { font-family: var(--font-label); font-weight: 500; font-variation-settings: "opsz" 12; font-size: var(--text-sm); color: var(--color-muted); }

.tabs { display: flex; gap: var(--space-lg); overflow-x: auto; border-bottom: 1px solid var(--color-rule); margin-bottom: var(--space-md); scrollbar-width: thin; }
.tabs a { flex-shrink: 0; text-decoration: none; padding: var(--space-sm) 0; color: var(--color-ink-2); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.tabs a:hover { color: var(--color-ink); border-bottom-color: var(--color-rule-2); }
.tabs a[aria-current="page"] { color: var(--color-ink); border-bottom-color: var(--color-accent); }
.tabs .num { color: var(--color-muted); }

.tabel { width: 100%; border-collapse: collapse; }
.tabel th, .tabel td { text-align: left; padding: var(--space-sm) var(--space-md) var(--space-sm) 0; border-bottom: 1px solid var(--color-rule); vertical-align: top; }
.tabel thead th { font-weight: 500; font-size: var(--text-sm); color: var(--color-muted); white-space: nowrap; border-bottom-color: var(--color-rule-2); }
.tabel tbody th { font-weight: 500; color: var(--color-ink); white-space: nowrap; }
.tabel tbody tr:hover { background: var(--color-paper-2); }
.rechts { text-align: right !important; }

.label { display: inline-block; padding: 0 var(--space-xs); font-size: var(--text-sm); font-weight: 500; color: var(--color-ink); border-left: var(--rule-heavy) solid var(--color-rule-2); background: var(--color-paper-2); white-space: nowrap; }
.label-rood { border-left-color: var(--color-error); background: var(--color-error-soft); }
.label-oranje { border-left-color: var(--color-warn); background: var(--color-warn-soft); }
.label-groen { border-left-color: var(--color-success); background: var(--color-success-soft); }
.label-onbekend { border-left-color: var(--color-rule-2); }

.leeg { padding: var(--space-2xl) 0; border-top: var(--rule-heavy) solid var(--color-ink); display: grid; gap: var(--space-md); justify-items: start; }
.leeg p { font-family: var(--font-body); max-width: 52ch; }

/* ---------- Dossier ---------- */
.dossier-kop .kort { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg); font-family: var(--font-label); font-size: var(--text-md); }
.standen { display: flex; flex-wrap: wrap; margin-top: var(--space-sm); border: 1px solid var(--color-rule-2); width: fit-content; max-width: 100%; }
.standen button { min-height: var(--control); padding: 0 var(--space-md); border: 0; border-left: 1px solid var(--color-rule); background: var(--color-paper); color: var(--color-ink-2); font-family: var(--font-label); font-size: var(--text-sm); cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.standen button:first-child { border-left: 0; }
.standen button:hover { background: var(--color-paper-2); color: var(--color-ink); }
.standen button:active { background: var(--color-paper-3); }
.standen button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; transition: none; }
.standen button[aria-current="step"] { background: var(--color-accent); color: var(--color-accent-ink); }

.dossier { display: grid; grid-template-columns: minmax(0, 1fr) var(--zij); gap: var(--space-2xl); align-items: start; }
.dossier-hoofd, .dossier-zij { display: grid; gap: var(--space-2xl); min-width: 0; }
.dossier-zij { position: sticky; top: var(--space-lg); }
.blok { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); scroll-margin-top: var(--space-lg); }
.blok-kop { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-md); border-top: var(--rule-heavy) solid var(--color-ink); padding-top: var(--space-sm); }
.blok-licht .blok-kop { border-top: 1px solid var(--color-rule-2); }
.leeg-lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-lg); }
.leeg-lijst li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); border-bottom: 1px solid var(--color-rule); scroll-margin-top: var(--space-lg); }
.springen { display: none; gap: var(--space-lg); }
.uitleg { font-family: var(--font-body); color: var(--color-ink-2); }

.gegevens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-lg); margin: 0; }
.gegevens > div { padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-rule); min-width: 0; }
.gegevens > .breed { grid-column: 1 / -1; }
.gegevens dt { font-size: var(--text-sm); color: var(--color-muted); }
.gegevens dd { margin: 0; color: var(--color-ink); overflow-wrap: anywhere; }
.lang { white-space: pre-line; font-family: var(--font-body); }

/* the ledger */
.startcheck-stand { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); }
.samenvatting { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.grootboek { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-rule-2); }
.punt { display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto; gap: var(--space-xs) var(--space-lg); padding: var(--space-md) 0; border-bottom: 1px solid var(--color-rule); scroll-margin-top: var(--space-lg); }
.punt-kleur { display: grid; gap: var(--space-2xs); align-content: start; justify-items: start; font-size: var(--text-sm); }
.punt-tekst { display: grid; gap: var(--space-2xs); min-width: 0; overflow-wrap: anywhere; }
.punt-tekst p { color: var(--color-ink); }
.punt-tekst .advies { font-family: var(--font-body); color: var(--color-muted); font-size: var(--text-sm); }
.punt-tekst .notitie { padding-left: var(--space-sm); border-left: 2px solid var(--color-ink); }
.punt-tekst h3, .punt-oranje .punt-tekst h3 { color: var(--color-ink); }
.punt-skelet { grid-template-columns: 9rem minmax(0, 1fr); }
.punt-skelet span { display: block; height: var(--space-md); background: var(--color-paper-3); }
.punt-skelet span:last-child { width: 70%; }
@media (prefers-reduced-motion: no-preference) {
  .punt-skelet span { animation: adem 1.4s var(--ease-in-out) infinite alternate; }
  @keyframes adem { from { opacity: 1; } to { opacity: 0.5; } }
}

.oordeel { grid-column: 3; justify-self: end; max-width: 26rem; }
.oordeel summary { cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; color: var(--color-ink); list-style: none; }
.oordeel summary::-webkit-details-marker { display: none; }
.oordeel summary:hover { text-decoration-color: var(--color-accent); }
.oordeel summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.oordeel[open] { grid-column: 2 / -1; justify-self: stretch; max-width: none; padding: var(--space-md); background: var(--color-paper-2); }
.oordeel[open] .veld textarea { background: var(--color-paper); }
.oordeel[open] .veld input, .oordeel[open] .veld select, .oordeel[open] .veld textarea { border-color: var(--color-muted); }
.dossier-zij .oordeel { grid-column: auto; justify-self: start; }
.dossier-zij .oordeel[open] { justify-self: stretch; }

.tijdlijn { list-style: none; margin: 0; padding: 0; display: grid; }
.tijdlijn li { padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-rule); display: grid; gap: var(--space-3xs); }
.tijdlijn li > p:first-child { color: var(--color-ink); }
.tijdlijn .stil { font-size: var(--text-sm); }

/* ---------- Responsive ---------- */
@media (max-width: 75rem) {
  .dossier { grid-template-columns: minmax(0, 1fr); }
  .dossier-zij { position: static; }
  .springen { display: flex; }
}
@media (max-width: 60rem) {
  .punt { grid-template-columns: minmax(0, 1fr); }
  .oordeel, .oordeel[open] { grid-column: 1; justify-self: start; }
  .oordeel[open] { justify-self: stretch; }
  .punt-kleur { grid-auto-flow: column; align-items: center; justify-content: start; gap: var(--space-sm); }
}
@media (max-width: 40rem) {
  .wie { margin-left: 0; width: 100%; justify-content: space-between; }
  .balk-binnen { gap: var(--space-xs) var(--space-lg); padding-block: var(--space-xs); }
  .cijfers { grid-template-columns: minmax(0, 1fr); }
  .cijfers > div { padding: var(--space-sm) 0; border-left: 0; border-top: 1px solid var(--color-rule); }
  .cijfers > div:first-child { border-top: 0; }
  .formulier-raster, .gegevens { grid-template-columns: minmax(0, 1fr); }
  .tabel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabel, .tabel tbody, .tabel tr, .tabel th, .tabel td { display: block; width: 100%; }
  .tabel tr { padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-rule); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xs) var(--space-md); }
  .tabel th, .tabel td { border: 0; padding: 0; }
  .tabel tbody th { grid-column: 1 / -1; font-size: var(--text-lg); }
  .tabel td::before { content: attr(data-kop); display: block; font-size: var(--text-sm); color: var(--color-muted); }
  .rechts { text-align: left !important; }
  .standen { width: 100%; }
  .tabs { flex-wrap: wrap; column-gap: var(--space-md); overflow-x: visible; }
  .leeg-lijst { grid-template-columns: minmax(0, 1fr); }
  .standen button { flex: 1 1 auto; }
  .knop, .knop-tweede { min-height: 48px; }
}

/* ---------- Offertes (Hallmark, same app screen: form, the quote in the Studio, the list in the dossier) ---------- */
.offerte-form { max-width: 52rem; gap: var(--space-xl); }
.groep { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-sm); min-width: 0; border-top: 1px solid var(--color-rule-2); padding-top: var(--space-sm); }
.groep > legend { float: left; width: 100%; padding: 0 0 var(--space-xs); font-family: var(--font-display); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96; font-size: var(--text-xl); line-height: 1; letter-spacing: var(--tracking-display); color: var(--color-ink); }
.seg { display: flex; flex-wrap: wrap; border: 1px solid var(--color-rule-2); width: fit-content; max-width: 100%; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg label { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: var(--control); padding: 0 var(--space-md); border-left: 1px solid var(--color-rule); background: var(--color-paper); color: var(--color-ink-2); cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.seg label:first-of-type { border-left: 0; }
.seg label:hover { background: var(--color-paper-2); color: var(--color-ink); }
.seg input:checked + label { background: var(--color-ink); color: var(--color-paper); }
.seg input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.heeft-fout .seg { border-color: var(--color-error); }
.drie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
.twee, .extra-rij { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-lg); }
.twee { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.extra-rij .hulp { min-height: 0; }
.extra-rij .heeft-fout .hulp { min-height: 1lh; }
.groep .uitleg { max-width: 60ch; }

.let-op { padding: var(--space-sm) var(--space-md); background: var(--color-warn-soft); border-left: var(--rule-heavy) solid var(--color-warn); color: var(--color-ink); display: grid; gap: var(--space-xs); }
.let-op ul { margin: 0; padding-left: var(--space-lg); }
.verstuurd { display: grid; gap: var(--space-xs); padding: var(--space-md); margin-bottom: var(--space-xl); background: var(--color-success-soft); border-left: var(--rule-heavy) solid var(--color-success); color: var(--color-ink); }
.verstuurd .link { width: 100%; min-height: var(--control); padding: var(--space-xs) var(--space-sm); border: 1px solid var(--color-muted); border-radius: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-label); font-size: var(--text-md); }
.verstuurd .link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.bedragen th { font-weight: 400; color: var(--color-ink-2); white-space: normal; }
.bedragen tbody tr:hover { background: transparent; }
.bedragen .som th, .bedragen .som td { border-top: 1px solid var(--color-ink); color: var(--color-ink); font-weight: 500; }
.gegevens-een { grid-template-columns: minmax(0, 1fr); }
.acties-lijst { display: grid; gap: var(--space-sm); justify-items: start; }
.acties-lijst form { display: grid; gap: var(--space-xs); justify-items: start; }
.taak-notitie { display: grid; gap: var(--space-2xs, 4px); font-size: var(--text-sm); color: var(--color-ink-2); }
.taak-notitie input { width: min(22rem, 100%); min-height: var(--control); padding: var(--space-xs) var(--space-sm); border: 1px solid var(--color-rule-2); border-radius: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-label); font-size: var(--text-md); }
.taak-notitie input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; border-color: var(--color-ink); }
.dossier-zij .tijdlijn a { font-weight: 500; }

@media (max-width: 40rem) {
  .drie, .twee, .extra-rij { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .extra-rij { padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-rule); }
  .seg { width: 100%; }
  .seg label { flex: 1 1 auto; justify-content: center; }
}
.fout-smal { max-width: 52rem; margin-bottom: var(--space-lg); }
.let-op { background: var(--color-paper-2); border-left-color: var(--color-ink); }
.groep > .hulp:empty { display: none; }
@media (max-width: 40rem) {
  .drie, .twee { gap: var(--space-sm); }
  .bedragen, .bedragen tbody { display: table; width: 100%; }
  .bedragen tbody { display: table-row-group; }
  .bedragen tr { display: table-row; padding: 0; }
  .bedragen th, .bedragen td { display: table-cell; width: auto; padding: var(--space-sm) var(--space-sm) var(--space-sm) 0; border-bottom: 1px solid var(--color-rule); }
  .bedragen td { text-align: right !important; padding-right: 0; white-space: nowrap; }
  .bedragen td::before { content: none; }
  .bedragen tbody th { font-size: var(--text-md); grid-column: auto; }
}
@media (max-width: 30rem) {
  .seg { flex-direction: column; }
  .seg label { border-left: 0; border-top: 1px solid var(--color-rule); justify-content: flex-start; }
  .seg label:first-of-type { border-top: 0; }
}

/* KvK: zoeken bij Nieuwe klant, en ophalen in het dossier (lib/kvk.js) */
.kvk-zoek, .kvk-gekozen { display: grid; gap: var(--space-md); margin-bottom: var(--space-xl); max-width: 52rem; }
.kvk-form { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; column-gap: var(--space-md); align-items: start; }
.kvk-form .acties { padding-top: calc(var(--text-sm) * 1.5 + var(--space-2xs)); }
.kvk-lijst th, .kvk-lijst td { vertical-align: baseline; }
.kvk-lijst td:last-child { text-align: right; white-space: nowrap; }
.zelf-kop { font-size: var(--text-lg); margin: 0; }
.kvk-uit { margin-bottom: var(--space-lg); }
.kvk-dossier { display: grid; gap: var(--space-sm); margin-top: var(--space-lg); }
.kvk-dossier h3 { font-size: var(--text-md); margin: 0; }
.kvk-ophalen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); }
.kvk-ophalen .stil { font-size: var(--text-sm); }
/* de shop in het dossier */
.shop-lijst { margin: var(--space-sm) 0 0; padding: 0; list-style: none; display: grid; }
.shop-lijst li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2xs) var(--space-md); padding-block: var(--space-xs); border-top: var(--rule-hair) solid var(--color-rule); }
.shop-dossier .site-punten { margin-bottom: 0; }
.shop-dossier .oordeel { grid-column: auto; justify-self: start; max-width: none; }
@media (max-width: 40rem) {
  .kvk-form { grid-template-columns: minmax(0, 1fr); }
  .kvk-form .acties { padding-top: 0; }
  .kvk-lijst td:last-child { text-align: left; }
}
/* portaal en vragen in het dossier */
.regels { white-space: pre-line; }
.dossier-zij .verstuurd { margin-bottom: 0; }
.vraag-antwoord { margin-top: var(--space-xs); }
/* smalle telefoon: de korte regel en de springlinks lopen door op een nieuwe regel */
.springen { flex-wrap: wrap; row-gap: 0; }
.dossier-kop .kort > * { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 40rem) { .dossier-kop .kort { flex-direction: column; } }

/* Site aanmaken met één klik: de knop, de punten om na te kijken, de versies */
.site-maak { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); margin-block: var(--space-md) var(--space-lg); }
#website h3 { font-size: var(--text-lg); margin-top: var(--space-lg); }
.site-punten { margin: var(--space-sm) 0 var(--space-lg); padding: 0; list-style: none; display: grid; gap: var(--space-xs); }
.site-punten li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--space-sm); align-items: baseline; padding-block: var(--space-xs); border-top: var(--rule-hair) solid var(--color-rule); }
.site-punten li > span:last-child { font-family: var(--font-body); color: var(--color-ink-2); }
#website .oordeel { grid-column: auto; justify-self: start; max-width: none; }
#website .oordeel[open] { padding: var(--space-md); }
.vinkje { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; cursor: pointer; }

/* Snelheid op de telefoon, bij de nieuwste versie (src/snelheid.js) */
.snelheid { display: grid; gap: var(--space-xs); margin-block: var(--space-xs) var(--space-sm); padding-left: var(--space-md); border-left: 2px solid var(--color-rule); }
.snelheid h4 { margin: 0; font-family: var(--font-label); font-weight: 500; font-size: var(--text-md); color: var(--color-ink); }
.snelheid-kop { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--space-sm); align-items: baseline; margin: 0; }
.snelheid-kop > .label { justify-self: start; }
.snelheid-kop > span:last-child { color: var(--color-ink-2); }
.snelheid-punten { margin: 0; }
.snelheid-meer summary { cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; color: var(--color-ink); }
.snelheid-meer summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.snelheid-tabel { width: 100%; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.snelheid-tabel th, .snelheid-tabel td { text-align: left; vertical-align: baseline; padding: var(--space-2xs) var(--space-sm) var(--space-2xs) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.snelheid-tabel thead th { font-family: var(--font-label); font-weight: 500; color: var(--color-ink); }
.snelheid-tabel td .stil { display: block; overflow-wrap: anywhere; }
.snelheid-knop { margin: 0; }
@media (max-width: 40rem) {
  .snelheid { padding-left: var(--space-sm); }
  .snelheid-kop { grid-template-columns: 1fr; gap: var(--space-3xs); }
  .snelheid-tabel { font-size: var(--text-xs); }
  .snelheid-tabel th, .snelheid-tabel td { padding-right: var(--space-xs); }
}

/* Ontwerp van de klantsite: vorm, merkkleuren, letters en "lijkt op" */
.ontwerp { display: grid; gap: var(--space-md); margin-block: var(--space-lg); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.ontwerp-feiten { margin: 0; display: grid; gap: 0; }
.ontwerp-feiten div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); }
.ontwerp-feiten dt { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink); }
.ontwerp-feiten dd { margin: 0; font-family: var(--font-body); color: var(--color-ink-2); }
.stalen { margin: 0 0 var(--space-xs); padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); font-family: var(--font-label); font-size: var(--text-sm); }
.stalen li { display: inline-flex; align-items: center; gap: var(--space-xs); }
.staal { display: inline-block; width: 1.5rem; height: 1.5rem; border: var(--rule-hair) solid var(--color-rule-2); }
.staal--papier { background: var(--staal-papier); } .staal--inkt { background: var(--staal-inkt); } .staal--merk { background: var(--staal-merk); } .staal--vlak { background: var(--staal-vlak); }
.acties-rij { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); }
.zelf-kiezen summary { cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; color: var(--color-ink); }
.zelf-kiezen[open] summary { margin-bottom: var(--space-md); }
@media (max-width: 40rem) { .ontwerp-feiten div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); } }

/* ---------- Eigen idee (drie richtingen) ---------- */
:root { --font-code: ui-monospace, "Cascadia Mono", Consolas, monospace; }
.richtingen { list-style: none; margin: var(--space-md) 0; padding: 0; display: grid; gap: 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.richting { display: grid; gap: var(--space-sm); padding-block: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.richting h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs) var(--space-sm); font-family: var(--font-display); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96; font-size: var(--text-xl); line-height: 1.05; letter-spacing: var(--tracking-display); overflow-wrap: break-word; min-width: 0; }
.richting-stand { font-size: var(--text-sm); }
#idee .oordeel { grid-column: auto; justify-self: start; max-width: none; }
#domein .oordeel { grid-column: auto; justify-self: start; max-width: none; }
#domein .oordeel[open] { justify-self: stretch; padding: var(--space-md); }
.domein-bekijk { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-sm) var(--space-md); }
.domein-bekijk .veld { flex: 1 1 16rem; max-width: 28rem; }
.domein-bekijk .acties { display: flex; align-items: center; gap: var(--space-md); min-height: 44px; }
.domein-uitslag { margin: 0; }
#idee .oordeel[open] { padding: var(--space-md); }
.richting--bewerk { gap: var(--space-md); }
.veld textarea.code { font-family: var(--font-code); font-size: var(--text-sm); line-height: 1.5; tab-size: 2; white-space: pre; overflow-x: auto; }
.bouwsteen-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.bouwsteen-form select { flex: 1 1 16rem; min-width: 0; width: 100%; min-height: var(--control); max-width: 100%; font: inherit; border: var(--rule-hair) solid var(--color-rule-2); background: var(--color-paper); color: var(--color-ink); padding: 0 var(--space-sm); }
.bouwsteen-form select:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.shop-vanzelf { margin-top: var(--space-xl); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }

/* ---------- Foto's: de fotomap als contactafdruk (fotomap.js) ---------- */
.fotos { min-width: 0; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: var(--space-xl) var(--space-lg); }
.foto { display: grid; grid-template-rows: auto 1fr; gap: var(--space-sm); min-width: 0; scroll-margin-top: var(--space-lg); }
.foto-beeld { display: block; aspect-ratio: 4 / 3; background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); overflow: hidden; }
.foto-beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-beeld:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.foto-tekst { display: grid; gap: var(--space-2xs); align-content: start; min-width: 0; }
.foto-waar { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.foto-wat { font-family: var(--font-body); color: var(--color-ink); overflow-wrap: anywhere; }
.foto-feit { font-size: var(--text-sm); color: var(--color-muted); overflow-wrap: anywhere; }
.foto-acties { display: grid; justify-items: start; }
.foto-acties .oordeel, #fotos .oordeel { grid-column: auto; justify-self: start; max-width: none; }
.foto-acties .oordeel[open] { justify-self: stretch; display: grid; gap: var(--space-md); }
.foto-nieuw[open] { justify-self: stretch; }
.foto-upload input[type="file"] { font: inherit; min-height: var(--control); max-width: 100%; }
.foto-upload input[type="file"]:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.foto-upload .veld { align-content: start; }
.foto-acties .knop-tekst { white-space: nowrap; }

/* Live zetten (src/live.js): records en oude adressen */
#live h3 { font-size: var(--text-lg); margin-top: var(--space-lg); }
/* Bewaking (src/bewaking.js): zelfde koppen als Live zetten, en lange adressen breken af */
#bewaking h3 { font-size: var(--text-lg); margin: var(--space-xl) 0 var(--space-xs); }
#bewaking > * { min-width: 0; }
#bewaking p, #bewaking li, #bewaking code { overflow-wrap: anywhere; }
#bewaking .tabel .formulier { margin-bottom: var(--space-2xs); }
.dns-tabel { margin-top: var(--space-md); font-size: var(--text-sm); }
.dns-tabel .dns-inhoud { overflow-wrap: anywhere; font-family: var(--font-mono, ui-monospace, monospace); max-width: 28rem; }
.adres-lijst { list-style: none; padding: 0; margin: var(--space-sm) 0; display: grid; gap: var(--space-2xs); }
.adres-lijst code { overflow-wrap: anywhere; }
#live .oordeel { grid-column: auto; justify-self: start; max-width: none; }
#live .oordeel[open] { justify-self: stretch; padding: var(--space-md); }
#live > * { min-width: 0; }
#live .gegevens dd { overflow-wrap: anywhere; }
#live p, #live .stil, #live li { overflow-wrap: anywhere; }
.tijdlijn p { overflow-wrap: anywhere; } .dossier-zij, .dossier-zij > * { min-width: 0; }

/* Back-ups (src/backups.js, src/backuppagina.js): zelfde grootboek en tabellen; ruimte tussen de blokken, en één regel in het klantenoverzicht */
.backups { display: grid; gap: var(--space-2xl); }
.backups > .kop, .backups > .cijfers { margin-bottom: 0; }
.backups > * { min-width: 0; }
.backups .blok > p, .backups .uitleg { max-width: 70ch; }
.backups ol.uitleg { margin: 0; padding-left: var(--space-lg); display: grid; gap: var(--space-2xs); }
.backups .tabel td ul { margin: var(--space-2xs) 0 0; padding-left: var(--space-md); font-size: var(--text-sm); }
.backups code { overflow-wrap: anywhere; }
.backup-regel { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2xs) var(--space-sm); margin: 0 0 var(--space-lg); }
.backups .tabel-smal { max-width: 40rem; }

/* ---------- Tweede stap (tweestap.js): code, instellen met QR, herstelcodes ---------- */
.code-invoer { font-family: var(--font-code); font-size: var(--text-lg) !important; letter-spacing: 0.12em; max-width: 14rem; }
.tweestap { max-width: 46rem; padding-block: var(--space-2xl); display: grid; gap: var(--space-xl); }
.tweestap-kop { display: grid; gap: var(--space-sm); }
.tweestap-kop p { font-family: var(--font-body); max-width: 60ch; }
.tweestap-stappen { list-style: none; padding: 0; margin: 0; counter-reset: stap; display: grid; gap: var(--space-xl); }
.tweestap-stappen > li { counter-increment: stap; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: var(--space-md); row-gap: var(--space-sm); border-top: var(--rule-heavy) solid var(--color-ink); padding-top: var(--space-md); }
.tweestap-stappen > li::before { content: counter(stap); grid-row: 1 / span 3; font-family: var(--font-display); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96; font-size: var(--text-2xl); line-height: 1; color: var(--color-accent); }
.tweestap-stappen > li > * { grid-column: 2; }
.tweestap-stappen p { font-family: var(--font-body); }
.tweestap-qr { display: flex; flex-wrap: wrap; gap: var(--space-lg); align-items: start; }
.tweestap-qr > div { flex: 1 1 16rem; display: grid; gap: var(--space-xs); }
.qr { margin: 0; width: 12rem; flex: none; border: 1px solid var(--color-rule-2); }
.qr svg { display: block; width: 100%; height: auto; }
.sleutel { font-family: var(--font-code) !important; font-size: var(--text-md); letter-spacing: 0.06em; color: var(--color-ink); overflow-wrap: anywhere; }
.herstel-lijst { list-style: none; margin: 0; padding: var(--space-md) 0; display: grid; grid-template-columns: repeat(2, minmax(0, 13rem)); grid-auto-flow: column; grid-template-rows: repeat(5, auto); gap: var(--space-sm) var(--space-xl); border-block: var(--rule-heavy) solid var(--color-ink); counter-reset: hc; }
.herstel-lijst li { counter-increment: hc; display: flex; gap: var(--space-sm); align-items: baseline; }
.herstel-lijst li::before { content: counter(hc); min-width: 1.5em; text-align: right; color: var(--color-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.herstel-lijst code { font-family: var(--font-code); font-size: var(--text-md); color: var(--color-ink); }
.tweestap-blok { max-width: 46rem; display: grid; gap: var(--space-md); }
/* De link naar de app alleen op een aanraakscherm: op de pc scan je de code. */
.tweestap-hier { display: none; }
@media (pointer: coarse) { .tweestap-hier { display: block; } }
.tweestap-uit { margin-top: calc(-1 * var(--space-sm)); }
@media print { .balk, .overslaan, .tweestap .knop { display: none; } }

/* ---------- Logo en teksten, Contract en opzeggen (bestanden.js, opzeggen.js) ---------- */
#bestanden .oordeel, #bestanden .punt-tekst .oordeel { grid-column: auto; justify-self: start; max-width: none; }
#bestanden .oordeel[open] { justify-self: stretch; }
.bestand-klein { display: block; width: 120px; height: 72px; object-fit: contain; padding: var(--space-2xs); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); }
#contract-opzeggen .acties { flex-wrap: wrap; gap: 0 var(--space-lg); }

/* ---------- Taken, aandacht en vertrek (taken.js, vertrek.js): dezelfde grootboekregels als de startcheck ---------- */
.aandacht { margin-bottom: var(--space-xl); }
.aandacht-niets { margin: 0 0 var(--space-lg); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs) var(--space-sm); }
.maand-nav { flex-wrap: wrap; gap: 0 var(--space-lg); }
.maand-nav a { display: inline-flex; align-items: center; min-height: 44px; }
.taak-groep { display: grid; gap: var(--space-xs); margin-top: var(--space-md); }
.taak-groep h3 { font-size: var(--text-lg); margin: 0; }
.taak-kop { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-sm); }
.punt-gedaan .punt-tekst strong { color: var(--color-ink-2); font-weight: 400; }
.brief { font-family: var(--font-body); font-size: var(--text-md); line-height: 1.5; background: var(--color-paper); }
#vertrek .acties { flex-wrap: wrap; gap: 0 var(--space-lg); }

/* ---------- Nalopen (nalopen.js): het rapport als grootboek, de uitleg uitklapbaar in de regel ---------- */
.punt-tekst .oordeel { grid-column: auto; justify-self: start; max-width: none; }
.punt-tekst .oordeel[open] { justify-self: stretch; display: grid; gap: var(--space-xs); }
.voorbeelden { margin: 0; padding-left: 1.2em; font-size: var(--text-sm); color: var(--color-ink-2); }
.voorbeelden code { font-family: var(--font-mono, ui-monospace, monospace); overflow-wrap: anywhere; }
.goed-regel { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2xs) var(--space-sm); color: var(--color-ink-2); }

/* ---------- Het maandrapport nalezen (rapport.js) ---------- */
.rapport-volgende { border: 0; padding: 0; margin: 0; min-width: 0; }
.rapport-volgende legend { font-family: var(--font-label); font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); padding: 0; margin-bottom: var(--space-2xs); }
.acties-rij .knop-tekst { white-space: nowrap; }

/* ---------- Koppelingen (googlepagina.js): lange namen van Google (sc-domain:…, locations/…) mogen afbreken op de telefoon ---------- */
#google code, #google .lokaal p { overflow-wrap: anywhere; }
/* Mollie (punt 10b): het blok Abonnement en incasso, in de brede kolom zoals Live. */
#mollie > * { min-width: 0; }
#mollie h3 { font-size: var(--text-lg); margin-top: var(--space-lg); }
#mollie .oordeel { grid-column: auto; justify-self: start; max-width: none; }
#mollie .oordeel[open] { justify-self: stretch; padding: var(--space-md); }
#mollie p, #mollie dd, #mollie .lokaal p { overflow-wrap: anywhere; }
.blok > .uitleg { max-width: 70ch; }

/* ---------- WhatsApp (whatsapp.js, punt 10d): het gespreksboek. Geen ballonnetjes: elk bericht een regel, tijd en afzender in de
   labelletter, de tekst in de schreefletter; binnen met een zwarte streep, van ons met een groene streep en iets ingesprongen. ---------- */
.wa-scherm { display: grid; grid-template-columns: minmax(0, 1fr) var(--zij); gap: var(--space-2xl); align-items: start; }
.wa-scherm > * { min-width: 0; }
.wa-boek { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); max-width: 46rem; }
.wa-regel { display: grid; gap: var(--space-3xs); padding: var(--space-2xs) 0 var(--space-2xs) var(--space-md); border-left: var(--rule-heavy) solid var(--color-ink); }
.wa-uit { margin-left: var(--space-xl); border-left-color: var(--color-accent); }
.wa-ongezien { background: var(--color-warn-soft); }
.wa-mislukt { border-left-color: var(--color-error); }
.wa-meta { font-size: var(--text-sm); color: var(--color-muted); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-xs); }
.wa-wie { color: var(--color-ink); font-weight: 500; }
.wa-tekst { font-family: var(--font-body); font-size: var(--text-md); line-height: 1.5; color: var(--color-ink); overflow-wrap: anywhere; max-width: 62ch; }
.wa-bestand img { display: block; width: 240px; max-width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--color-rule-2); }
.wa-fout { font-size: var(--text-sm); color: var(--color-error); }
.wa-doen { display: flex; flex-wrap: wrap; align-items: start; gap: 0 var(--space-lg); }
.wa-doen .oordeel { grid-column: auto; justify-self: start; max-width: 32rem; }
.wa-doen .oordeel[open] { flex-basis: 100%; }
.wa-antwoord { max-width: 46rem; margin-top: var(--space-md); }
.wa-boek-kort .wa-tekst { font-size: var(--text-sm); }
.wa-lijst .wa-nieuw th a { text-decoration-color: var(--color-warn); text-decoration-thickness: 2px; }
.wa-kort { display: block; max-width: 40ch; overflow-wrap: anywhere; }
.wa-sjabloon { font-family: var(--font-body); color: var(--color-ink); }
#whatsapp > *, .wa-scherm .oordeel { min-width: 0; }
#whatsapp .oordeel, .wa-scherm .blok-licht .oordeel { grid-column: auto; justify-self: start; max-width: none; }
#whatsapp code, .blok code { overflow-wrap: anywhere; }
@media (max-width: 60rem) { .wa-scherm { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 40rem) { .wa-uit { margin-left: var(--space-md); } }
.wa-onder { font-family: var(--font-body); color: var(--color-ink-2); }
#whatsapp .wa-nummers { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-rule-2); }
#whatsapp .wa-nummers li { display: grid; gap: var(--space-3xs); padding: var(--space-xs) 0; border-bottom: 1px solid var(--color-rule); }
#whatsapp .wa-nummers .knop-tekst { min-height: 32px; padding: 0; font-size: var(--text-sm); }
#whatsapp h3 { font-size: var(--text-md); margin-top: var(--space-sm); }
.wa-ongezien .veld input, .wa-ongezien .veld textarea, .wa-ongezien .veld select { border-color: var(--color-muted); }

/* AI-meting (aimetingpagina.js): de vragen mogen afbreken, de kolommen per dienst blijven smal, zodat de tabel in de kolom past. */
.ai-tabel { table-layout: fixed; }
.ai-tabel thead th:first-child { width: 34%; }
.ai-tabel tbody th.ai-vraag { white-space: normal; font-weight: 400; }
.ai-tabel td { padding-right: var(--space-xs); overflow-wrap: anywhere; }
.ai-tabel thead th { white-space: normal; }
.ai-vragen { margin: 0 0 var(--space-sm); padding-left: 1.5em; font-family: var(--font-body); }
.ai-antwoorden { margin: var(--space-sm) 0 0; padding-left: 1.5em; display: grid; gap: var(--space-md); }
.ai-antwoorden blockquote { margin: var(--space-xs) 0; padding-left: var(--space-sm); border-left: var(--rule-heavy) solid var(--color-success); font-family: var(--font-body); }
@media (max-width: 40rem) { .ai-tabel { table-layout: auto; } .ai-tabel thead th:first-child { width: auto; } }

/* Uitrol (src/uitrolpagina.js): de twee links bij de proef mogen op een smalle telefoon onder elkaar. */
.proef-links { flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
.proef-links a { white-space: nowrap; }
@media (max-width: 40rem) { .proef-bestanden { grid-column: 1 / -1; } }

/* ---------- Makeover: de oude site als voorstel (makeover.js) ---------- */
/* Hallmark · v2.3 (7 nov) · added screen: the makeover proposal, one ledger per old page (path in the label face, each text a row with where it goes on the left and the old text in the serif on the right), the old photos as a contact sheet with a checkbox each; filled fields cannot be chosen (never overwrite); states: busy (self-refresh), error, nothing chosen, taken over */
.mo-feiten { display: grid; gap: var(--space-xs); margin-bottom: var(--space-lg); padding: var(--space-sm) 0; border-block: var(--rule-hair) solid var(--color-rule); }
.mo-form { display: grid; gap: var(--space-lg); }
.mo-pagina { border-top: var(--rule-heavy) solid var(--color-ink); padding-top: var(--space-sm); }
.mo-pagina > summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs) var(--space-md); padding-block: var(--space-xs); }
.mo-pad { font-weight: 500; color: var(--color-ink); overflow-wrap: anywhere; }
.mo-regels { list-style: none; margin: var(--space-sm) 0 0; padding: 0; display: grid; }
.mo-regel { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); }
.mo-doel select { width: 100%; min-height: var(--control); font: inherit; }
.mo-tekst { display: grid; gap: var(--space-3xs); min-width: 0; }
.mo-tekst p { font-family: var(--font-body); color: var(--color-ink); overflow-wrap: anywhere; max-width: 68ch; }
.mo-soort { font-size: var(--text-sm); color: var(--color-muted); }
.mo-fotos { list-style: none; margin: var(--space-md) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: var(--space-lg); }
.mo-foto { display: grid; gap: var(--space-2xs); min-width: 0; align-content: start; }
.mo-foto img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); display: block; }
.mo-onder { display: grid; gap: var(--space-sm); padding-top: var(--space-md); border-top: var(--rule-heavy) solid var(--color-ink); }
@media (max-width: 40rem) {
  .mo-regel { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .mo-doel { order: 2; }
}

/* ---------- Breng een winkel mee (doorverwijzing.js) ---------- */
.mb-lijst { list-style: none; margin: 0; padding: 0; display: grid; }
.mb-lijst > li { display: grid; gap: var(--space-2xs); justify-items: start; padding-block: var(--space-xs); border-top: var(--rule-hair) solid var(--color-rule); }
.mb-link { overflow-wrap: anywhere; font-size: var(--text-sm); }
.mb-code { font-family: var(--font-code, ui-monospace, monospace); font-size: var(--text-md); color: var(--color-ink); }
#meebrengen .oordeel { grid-column: auto; justify-self: start; max-width: none; }
#meebrengen h3 { margin-top: var(--space-sm); }
/* De knop van de makeover heeft een lange naam: op een smalle telefoon mag hij over twee regels. */
#makeover .kvk-ophalen > * { min-width: 0; max-width: 100%; }
#makeover .kvk-ophalen button { white-space: normal; text-align: left; height: auto; min-height: var(--control); }

/* ---------- Agenda: afspraken van de site (afspraken.js) ---------- */
/* Hallmark · v2.4 (7 nov) · added block: the agenda as a ledger, a heading per day, each appointment a row (time in tabular figures, what and who in the label face, cancel as a text button); cancelled and withdrawn rows muted; states: off, on but not bookable, empty, full */
.ag { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-md); }
.ag-dag h3 { max-width: none; padding-bottom: var(--space-2xs); border-bottom: var(--rule-hair) solid var(--color-ink); }
.ag-lijst { list-style: none; margin: 0; padding: 0; }
.ag-regel { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: var(--space-2xs) var(--space-md); padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); align-items: start; }
.ag-tijd { font-variant-numeric: tabular-nums; color: var(--color-ink); font-weight: 500; }
.ag-wat { display: grid; gap: var(--space-3xs); min-width: 0; overflow-wrap: anywhere; }
.ag-regel.is-weg .ag-tijd, .ag-regel.is-weg .ag-wat > p:first-child { color: var(--color-muted); text-decoration: line-through; }
@media (max-width: 40rem) { .ag-regel { grid-template-columns: 4rem minmax(0, 1fr); } .ag-weg { grid-column: 2; } }