/* Starruk CRM house-style consumers. The host emits the canonical --s-* values from its
   registered palette. Public and print documents emit the same source in light mode. */

@font-face {
  font-family: "IBM Plex Sans Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 700;
  src: url("fonts/ibm-plex-sans-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 700;
  src: url("fonts/ibm-plex-sans-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("fonts/ibm-plex-mono-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("fonts/ibm-plex-mono-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --sr-inkt: var(--s-ink-900);
  --sr-inkt-zacht: var(--s-muted);
  --sr-accent: var(--s-secondary);
  --sr-accent-tekst: var(--s-secondary-text);
  --sr-papier: var(--s-background);
  --sr-papier-2: var(--s-surface-2);
  --sr-lijn: var(--s-line-strong);
  --sr-lijn-zacht: var(--s-line);
  --sr-go: var(--s-success);
  --sr-stop: var(--s-error);

  --sr-sans: var(--s-font-body);
  --sr-mono: var(--s-font-mono);

  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --sr-inkt: var(--s-ink-900);
  --sr-inkt-zacht: var(--s-muted);
  --sr-accent: var(--s-secondary);
  --sr-accent-tekst: var(--s-secondary-text);
  --sr-papier: var(--s-background);
  --sr-papier-2: var(--s-surface-2);
  --sr-lijn: var(--s-line-strong);
  --sr-lijn-zacht: var(--s-line);
  --sr-go: var(--s-success);
  --sr-stop: var(--s-error);
}

* { box-sizing: border-box; }

html { font-kerning: normal; }

body {
  margin: 0;
  background: var(--sr-papier);
  color: var(--sr-inkt);
  font-family: var(--sr-sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.sr-wrap { max-width: 1100px; margin: 0 auto; padding-inline: 24px; }

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

a { color: inherit; }
a:focus-visible, button:focus-visible, .knop:focus-visible {
  outline: 2px solid var(--sr-accent);
  outline-offset: 3px;
}

.mono {
  font-family: var(--sr-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

.eyebrow {
  font-family: var(--sr-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sr-accent-tekst);
  margin: 0 0 14px;
}

.tekst-zacht { color: var(--sr-inkt-zacht); }

.sr-topbar {
  border-bottom: 2px solid var(--sr-inkt);
  background: var(--sr-papier);
}
.sr-topbar .sr-wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding-block: 16px;
}
.sr-merk { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--sr-inkt); }
.sr-merk svg { display: block; }
.sr-merk .sr-naam {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.22em;
}
.sr-label {
  border: 1px solid var(--sr-accent-tekst);
  color: var(--sr-accent-tekst);
  padding: 2px 8px;
  font-family: var(--sr-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.sr-topnav { display: flex; gap: 26px; flex-wrap: wrap; }
.sr-topnav a {
  font-family: var(--sr-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--sr-inkt-zacht);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.sr-topnav a:hover { color: var(--sr-accent); border-bottom-color: var(--sr-accent); }
.sr-wie { font-family: var(--sr-mono); color: var(--sr-inkt-zacht); white-space: nowrap; }

/* Flat nav (no ol/li): the portal's convention of mono caps with loose "·" text nodes. */
.sr-kruimelpad {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 0 0 28px;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--sr-inkt-zacht);
}
.sr-kruimelpad a { color: var(--sr-inkt-zacht); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 1px; }
.sr-kruimelpad a:hover { color: var(--sr-accent); border-bottom-color: var(--sr-accent); }
.sr-kruimelpad [aria-current="page"] { color: var(--sr-inkt); }

.melding { border: 1.5px solid var(--sr-go); color: var(--sr-go); padding: 10px 14px; margin: 0 0 20px; }
.melding-fout { border-color: var(--sr-stop); color: var(--sr-stop); }

.rolchips { display: inline-flex; gap: 6px; flex-wrap: wrap; vertical-align: middle; }

.publiek-kop { border-bottom: 2px solid var(--sr-inkt); }
.publiek-kop .sr-wrap { padding-top: 18px; padding-bottom: 14px; }
.publiek-woordmerk { font-weight: 700; letter-spacing: 0.22em; font-size: 1rem; color: var(--sr-inkt); }
/* The monogram takes its colour from currentColor, so it carries the heading's ink. */
.publiek-merk { display: flex; align-items: center; gap: 10px; }
.publiek-beeldmerk { flex: none; display: block; width: 26px; height: 26px; }
.publiek-main { padding: 26px 0 60px; }
.publiek-voet { border-top: 1px solid var(--sr-lijn-zacht); padding: 14px 0 40px; }
.publiek-voet p { font-size: 0.72rem; color: var(--sr-inkt-zacht); }

.mailvoorbeeld { width: 100%; height: 540px; border: 1px solid var(--sr-lijn); background: #fff; }

.knop {
  font-family: var(--sr-mono); font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; text-decoration: none; cursor: pointer;
  color: var(--sr-inkt); background: transparent;
  border: 1.5px solid var(--sr-inkt); padding: 9px 16px; justify-self: start;
  display: inline-block;
}
.knop:hover { background: var(--sr-inkt); color: var(--sr-papier); }
.knop-accent { border-color: var(--sr-accent-tekst); color: var(--sr-accent-tekst); }
.knop-accent:hover { background: var(--sr-accent); border-color: var(--sr-accent); color: #fff; }
.knop.klein { padding: 4px 10px; font-size: 0.68rem; }
.knopregel { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 18px 0; }

table.tabel { width: 100%; border-collapse: collapse; }
.tabel th {
  font-family: var(--sr-mono); font-size: 0.68rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sr-inkt-zacht); text-align: left;
  border-bottom: 2px solid var(--sr-inkt); padding: 8px 10px 6px;
}
.tabel td { border-bottom: 1px solid var(--sr-lijn-zacht); padding: 9px 10px; vertical-align: top; }
.tabel td.mono { color: var(--sr-inkt-zacht); }

form.formulier { display: grid; gap: 14px; max-width: 640px; }
.formulier label {
  font-family: var(--sr-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--sr-inkt-zacht); display: grid; gap: 6px;
}
.formulier label.vlag {
  display: flex; gap: 10px; align-items: baseline; text-transform: none; letter-spacing: 0;
  font-family: var(--sr-sans); font-size: 1rem; color: var(--sr-inkt);
}
.formulier input[type="text"],
.formulier input[type="email"],
.formulier input[type="tel"],
.formulier input[type="password"],
.formulier textarea,
.formulier select {
  font: inherit; color: var(--sr-inkt); background: var(--sr-papier);
  border: 1.5px solid var(--sr-lijn); padding: 10px 12px; width: 100%;
}
.formulier textarea { min-height: 140px; font-family: var(--sr-mono); font-size: 0.85rem; line-height: 1.6; }
.formulier textarea.kort { min-height: 90px; }
.formulier fieldset { border: 1.5px solid var(--sr-lijn); padding: 12px 16px; }
.formulier legend {
  font-family: var(--sr-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sr-inkt-zacht);
}
.zoekveld { font: inherit; color: var(--sr-inkt); background: var(--sr-papier); border: 1.5px solid var(--sr-lijn); padding: 7px 11px; }

.sectie { margin-top: 48px; }
.sectie > h2 { border-bottom: 2px solid var(--sr-inkt); padding-bottom: 6px; font-size: 1.15rem; }
details.paneel { border: 1.5px solid var(--sr-lijn); background: var(--sr-papier-2); padding: 12px 16px; margin-top: 14px; }
details.paneel summary {
  cursor: pointer; font-family: var(--sr-mono); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--sr-inkt-zacht);
}
details.paneel[open] summary { margin-bottom: 12px; }

.reactie { border-top: 1px solid var(--sr-lijn); padding: 16px 0; }
.reactie .kop { display: flex; gap: 12px; align-items: baseline; margin-bottom: 4px; }
.reactie .kop strong { font-size: 0.95rem; }

/* Everything SafeMarkdown renders lands in .document-inhoud. MudBlazor's universal reset
   (margin, padding and border-width 0 on every element) would erase all block spacing and push
   list markers out of view, so this block restores them, only inside rendered markdown. */
.document-inhoud { max-width: 72ch; }

.document-inhoud > :first-child { margin-top: 0; }
.document-inhoud > :last-child { margin-bottom: 0; }

.factuur-publiek-bericht { margin: 28px 0 0; padding-top: 18px; border-top: 1px solid var(--sr-lijn); }
.factuur-publiek-bericht h2 { font-size: 1.1rem; margin: 0 0 12px; }

.factuur-publiek-specificatie { margin: 28px 0 0; padding-top: 18px; border-top: 1px solid var(--sr-lijn); }
.factuur-publiek-specificatie h2 { font-size: 1.1rem; margin: 0 0 12px; }
.factuur-publiek-specificatie h3 { font-size: 0.95rem; color: var(--sr-inkt); margin: 16px 0 6px; }
.factuur-publiek-specificatie table.tabel { margin: 0 0 8px; }
.factuur-publiek-uren { text-align: right; white-space: nowrap; }
.factuur-publiek-specificatie-totaal th,
.factuur-publiek-specificatie-totaal td { border-top: 1px solid var(--sr-lijn);
  font-weight: 600; color: var(--sr-inkt); border-bottom: 0; }

/* Deliberately no orange on the quote page: that colour is reserved for the agree button. */
.quote-public {
  max-width: 600px; margin: 0 auto; padding: 28px 32px 30px;
  background: var(--s-surface); color: var(--sr-inkt);
  border: 1px solid var(--sr-lijn-zacht); border-radius: 6px; box-shadow: var(--s-shadow-card);
  display: flex; flex-direction: column; gap: 14px;
}
.quote-public > * { margin: 0; }
.quote-public-logo { display: block; width: 150px; height: auto; margin-bottom: 6px; }
.quote-public-eyebrow {
  font-family: var(--sr-mono); font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sr-inkt-zacht);
}
.quote-public-title { font-size: 1.5rem; line-height: 1.25; margin-top: -8px; }
.quote-public-facts {
  display: flex; flex-wrap: wrap; gap: 10px 28px; padding: 12px 0;
  border-top: 1px solid var(--sr-lijn-zacht); border-bottom: 1px solid var(--sr-lijn-zacht);
}
.quote-public-facts dt { font-size: 0.75rem; color: var(--sr-inkt-zacht); }
.quote-public-facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.quote-public-number { font-family: var(--sr-mono); font-size: 0.95rem; }
.quote-public-amount {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 16px;
  padding: 14px 16px; background: var(--sr-papier-2);
  border-left: 3px solid var(--sr-inkt); border-radius: 3px;
}
.quote-public-amount-value { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.quote-public-amount-note { font-size: 0.85rem; color: var(--sr-inkt-zacht); text-align: right; }
.quote-public-amount-total {
  grid-column: 1 / -1; font-size: 0.85rem; color: var(--sr-inkt-zacht); font-variant-numeric: tabular-nums;
}
.quote-public-note { font-size: 0.9rem; color: var(--sr-inkt-zacht); }

/* The agree button is the page's one orange element, in the darker accent so white text
   stays readable. */
.quote-public-form {
  max-width: none; gap: 12px; padding-top: 18px; border-top: 1px solid var(--sr-lijn-zacht);
}
.quote-public-form-title { font-size: 1.1rem; margin: 0; }
.quote-public-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.quote-public-optional { text-transform: none; letter-spacing: 0; }
.quote-public-error {
  display: block; font-family: var(--sr-sans); font-size: 0.85rem; letter-spacing: 0;
  text-transform: none; color: var(--sr-stop);
}
.quote-public-actions { margin: 0; }
.knop.quote-public-accept {
  background: var(--sr-accent-tekst); border-color: var(--sr-accent-tekst); color: var(--s-white);
}
.knop.quote-public-accept:hover { background: var(--sr-accent); border-color: var(--sr-accent); }
.quote-public-fine { margin: 0; font-size: 0.8rem; color: var(--sr-inkt-zacht); }
.quote-public-decline { padding-top: 12px; border-top: 1px solid var(--sr-lijn-zacht); }
.quote-public-decline summary { cursor: pointer; font-size: 0.9rem; color: var(--sr-inkt-zacht); }
.quote-public-decline[open] summary { margin-bottom: 10px; }
.quote-public-answer {
  padding: 14px 16px; background: var(--sr-papier-2);
  border-left: 3px solid var(--sr-inkt-zacht); border-radius: 3px;
}
.quote-public-answer-accepted { border-left-color: var(--sr-go); }
.quote-public-answer-line { margin: 0; font-weight: 600; }
.quote-public-answer-reason { margin: 6px 0 0; color: var(--sr-inkt-zacht); }

@media (max-width: 560px) {
  .quote-public { padding: 20px 18px 22px; }
  .quote-public-amount { grid-template-columns: minmax(0, 1fr); }
  .quote-public-amount-note { text-align: left; }
  .quote-public-fields { grid-template-columns: minmax(0, 1fr); }
}

.document-inhoud p { margin: 0 0 0.95em; }
.document-inhoud ul, .document-inhoud ol { margin: 0 0 0.95em; padding-left: 1.5em; }
.document-inhoud li { margin: 0 0 0.3em; }
/* A nested list belongs to its parent item, not as a separate paragraph below it. */
.document-inhoud li > ul, .document-inhoud li > ol { margin: 0.3em 0 0; }
.document-inhoud h1, .document-inhoud h2, .document-inhoud h3,
.document-inhoud h4, .document-inhoud h5, .document-inhoud h6 { margin: 1.5em 0 0.5em; line-height: 1.25; }
.document-inhoud h1 { font-size: 1.9rem; line-height: 1.2; }
.document-inhoud h2 { margin-top: 1.4em; }
.document-inhoud pre { margin: 0 0 0.95em; padding: 12px 14px; overflow-x: auto; background: var(--sr-papier-2); color: var(--sr-inkt); }
.document-inhoud hr { margin: 1.6em 0; border: 0; border-top: 1px solid var(--sr-lijn); }
.document-inhoud table { border-collapse: collapse; margin: 0 0 0.95em; }
.document-inhoud th, .document-inhoud td { border: 1px solid var(--sr-lijn); padding: 6px 10px; }
.document-inhoud blockquote { border-left: 3px solid var(--sr-accent); margin: 0 0 0.95em; padding-left: 16px; color: var(--sr-inkt-zacht); }
.document-inhoud code { font-family: var(--sr-mono); font-size: 0.85em; background: var(--sr-papier-2); color: var(--sr-inkt); padding: 1px 5px; }
/* A code block has its own frame; the <code> inside needs no second background. */
.document-inhoud pre code { background: none; padding: 0; }
.metaregel { color: var(--sr-inkt-zacht); display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin: 6px 0 24px; }

.grootboek-kop {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-family: var(--sr-mono); font-size: 0.66rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--sr-inkt-zacht); border-top: 1px solid var(--sr-lijn); padding-top: 16px; margin-bottom: 12px;
}
.grootboek { border: 1px solid var(--sr-lijn); font-variant-numeric: tabular-nums; }
.gb-rij {
  display: grid; grid-template-columns: 122px 76px 1fr auto; gap: 16px; align-items: center;
  padding: 9px 14px; border-bottom: 1px solid var(--sr-lijn); font-family: var(--sr-mono); font-size: 0.76rem;
}
.gb-rij:last-child { border-bottom: none; }
.gb-rij .t { color: var(--sr-inkt-zacht); white-space: nowrap; }
.gb-rij .h { color: var(--sr-accent-tekst); }
.gb-rij .m { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status {
  justify-self: end; font-size: 0.6rem; letter-spacing: 0.09em; padding: 2px 9px;
  border: 1px solid currentColor; white-space: nowrap;
}
.status.pass { color: var(--sr-go); }
.status.gate { color: var(--sr-inkt-zacht); }
.status.fix { color: var(--sr-stop); }
.status.ship { color: var(--sr-accent-tekst); }
@media (max-width: 680px) {
  .gb-rij { grid-template-columns: 1fr auto; }
  .gb-rij .t, .gb-rij .h { display: none; }
}

.hoofd-main { padding: clamp(36px, 6vw, 64px) 0 72px; }
.hoofd-main .sr-wrap { max-width: 880px; }
.hoofd-voet { border-top: 2px solid var(--sr-inkt); padding: 18px 0 32px; }
.hoofd-voet .sr-wrap { max-width: 880px; }
.hoofd-voet p { margin: 0; color: var(--sr-inkt-zacht); }

/* Element selectors on purpose: the document pattern fixes the form (H1, goal paragraph,
   disclaimer quote, hr, numbered sections), so the content needs no classes and the renderer no
   change. The 3px ink line belongs to the H1, not under the whole header block. */
.document-opmaak h1 {
  font-size: clamp(1.7rem, 4.5vw, 2.4rem);
  line-height: 1.12;
  letter-spacing: -0.012em;
  margin: 0 0 0.55em;
  padding-bottom: 16px;
  border-bottom: 3px solid var(--sr-inkt);
}
.document-opmaak h1 + p { font-size: 1.08rem; max-width: 60ch; }
.document-opmaak blockquote {
  border-left: 3px solid var(--sr-lijn);
  margin-left: 0;
  padding-left: 14px;
  font-size: 0.92rem;
  color: var(--sr-inkt-zacht);
}
.document-opmaak hr { border: none; border-top: 1px solid var(--sr-lijn); margin: 34px 0 0; }
.document-opmaak h2 {
  font-size: 1.4rem;
  line-height: 1.2;
  letter-spacing: -0.008em;
  margin: 44px 0 14px;
  padding-top: 16px;
  border-top: 1px solid var(--sr-lijn);
}
.document-opmaak h3 { font-size: 1.02rem; margin: 26px 0 8px; }
.document-opmaak ol, .document-opmaak ul { padding-left: 20px; margin: 0 0 16px; }
.document-opmaak li { margin-bottom: 8px; }
.document-opmaak li::marker { color: var(--sr-accent-tekst); font-weight: 600; }
.document-opmaak table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.92rem;
  background: var(--sr-papier-2);
  border: 1px solid var(--sr-lijn);
  margin: 16px 0 18px;
}
.document-opmaak th {
  text-align: left;
  font-family: var(--sr-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sr-inkt-zacht);
  padding: 12px 14px 8px;
  border: none;
  border-bottom: 2px solid var(--sr-inkt);
  vertical-align: bottom;
}
.document-opmaak td {
  padding: 10px 14px;
  border: none;
  border-bottom: 1px solid var(--sr-lijn-zacht);
  vertical-align: top;
  font-variant-numeric: tabular-nums;
  color: var(--sr-inkt);
}
.document-opmaak tr:last-child td { border-bottom: none; }
.document-opmaak code { font-family: var(--sr-mono); font-size: 0.85em; background: var(--sr-papier-2); color: var(--sr-inkt); padding: 1px 5px; }

/* The public/print document root supplies the canonical light theme with data-theme="light".
   This class paints that paper; it does not switch a dark app subtree to light. */
.blad-licht {
  color-scheme: only light;
  background: var(--sr-papier);
  color: var(--sr-inkt);
}
.document-blad { max-width: 72ch; margin: 0 auto; padding: clamp(28px, 5vw, 56px) 24px 64px; }
.document-blad .blad-kicker { margin: 0 0 20px; }
.blad-voet {
  margin-top: 48px;
  border-top: 3px solid var(--sr-inkt);
  padding-top: 18px;
  font-family: var(--sr-mono);
  font-size: 0.8rem;
  color: var(--sr-inkt-zacht);
}
.blad-voet p { margin: 0 0 4px; }
.blad-acties {
  max-width: 72ch;
  margin: 16px auto 0;
  padding: 0 24px;
  color: var(--sr-inkt-zacht);
}
.blad-acties a { color: inherit; }

@page { size: A4; margin: 18mm 16mm; }
@media print {
  .blad-acties { display: none; }
  .document-blad {
    max-width: none;
    padding: 0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .document-opmaak h2, .document-opmaak h3 { break-after: avoid; }
  .document-opmaak table, .document-opmaak blockquote { break-inside: avoid; }
}

/* Only --sr tokens: the public layer does not load app.css, so the w- and d-tokens of the
   Werkdag skin do not exist here. */
.boek-kop { display: flex; justify-content: flex-end; margin-bottom: 18px; }
.boek-lead { max-width: 62ch; margin: 0 0 14px; }

.boek-form { display: block; }

.boek-weekbalk {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 22px 0 12px;
}
.boek-weeklabel { font-weight: 600; }
.boek-zone { margin-left: auto; }
.boek-uit { opacity: 0.35; }

/* Fixed-width columns, left-aligned: a week with two remaining days must not become two
   half screens of time buttons. */
.boek-dagen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 210px));
  justify-content: start;
  gap: 10px;
}
.boek-dag {
  min-width: 0;
  border: 1px solid var(--sr-lijn);
  background: var(--sr-papier-2);
  padding: 12px;
}
.boek-dagkop { margin-bottom: 8px; }
.boek-dagkop b { font-size: 0.9rem; }
.boek-dagkop small { display: block; color: var(--sr-inkt-zacht); }

.boek-slot {
  display: block; width: 100%;
  font: inherit; font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  text-align: center; cursor: pointer;
  color: var(--sr-inkt); background: var(--sr-papier);
  border: 1.5px solid var(--sr-lijn); padding: 9px 10px; margin-bottom: 6px;
}
.boek-slot:hover { border-color: var(--sr-accent-tekst); }
.boek-slot-gekozen {
  background: var(--sr-inkt); color: var(--sr-papier); border-color: var(--sr-inkt);
}
.boek-slot-leeg {
  cursor: default; border-style: dashed; color: var(--sr-inkt-zacht); opacity: 0.7;
}
.boek-slot-leeg:hover { border-color: var(--sr-lijn); }

.boek-kaart {
  border: 1.5px solid var(--sr-lijn);
  background: var(--sr-papier-2);
  padding: 16px;
  margin-top: 22px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; align-items: end;
}
.boek-kaart > label {
  font-family: var(--sr-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--sr-inkt-zacht); display: grid; gap: 6px;
}
.boek-kaart input, .boek-kaart textarea {
  font: inherit; color: var(--sr-inkt); background: var(--sr-papier);
  border: 1.5px solid var(--sr-lijn); padding: 10px 12px; width: 100%;
}
.boek-kaart textarea.kort { min-height: 64px; font-family: var(--sr-sans); font-size: 1rem; }
.boek-gekozen, .boek-breed, .boek-bevestig { grid-column: 1 / -1; }
.boek-gekozen { margin: 0; }
.boek-bevestig { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.boek-voet { margin-top: 22px; }

/* Keep the whole working week on one row when the page has desktop space. */
@media (min-width: 1100px) {
  .boek-dagen { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* One column below 640px: no horizontal scroll at 390px. */
@media (max-width: 640px) {
  .boek-dagen { grid-template-columns: 1fr; justify-content: stretch; }
  .boek-kaart { grid-template-columns: 1fr; }
  .boek-zone { margin-left: 0; flex-basis: 100%; }
}