/* HET BEHEER VAN EEN SITE (b852, eigenaar 03-11): de kop, het frame, de kaarten, de wizard, de instellingen en het
   overzicht. ALLEEN DE TOKENS VAN /brand.css (de kleuren van de zaak, app/merk.py) en /_sb/merk.css (haar letters):
   geen letterlijke kleur, zodat licht en donker vanzelf volgen (de shell wisselt de tokens onder
   prefers-color-scheme: dark). Mobiel eerst; vanaf 48rem de bredere schikking. Klassen met sb- zodat de shell en de
   site er niets van overnemen. Kleine tekst staat altijd op --paper (de grond waarop --muted 4.5:1 haalt). */

:root { --sb-rond: calc(var(--radius) * 2); --sb-kaart-rand: color-mix(in srgb, var(--ink) 12%, var(--paper)); }
/* --muted van /brand.css haalt op een niet-wit papier (kalk #ecece8) maar 4.0:1 (Lighthouse, b852): in het beheer
   altijd uit de inkt en het papier van de zaak gemengd, zodat kleine tekst (de hints, "verplicht", de stappen die nog
   komen) in licht en donker boven 4.5:1 blijft. */
:root { --muted: color-mix(in srgb, var(--ink) 70%, var(--paper)); }

body { background: var(--paper); }
h1, h2, h3, h4 { color: var(--ink); }
.sb-sr-alleen {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ── de kop ─────────────────────────────────────────────────────────────────────────────────────────────── */
.sb-top {
  position: sticky; top: 0; z-index: 20; background: var(--paper);
  border-bottom: 1px solid var(--sb-kaart-rand);
}
.sb-top-in {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "merk rechts" "nav nav";
  align-items: center; column-gap: var(--space); padding-block: .5rem 0;
}
.sb-merk {
  grid-area: merk; display: inline-flex; align-items: center; gap: .6rem; min-height: 48px; min-width: 0;
  color: var(--ink); text-decoration: none; font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: 1.125rem; letter-spacing: var(--display-tracking);
}
.sb-merk-beeld { width: 32px; height: 32px; object-fit: contain; border-radius: calc(var(--radius) / 2); flex: none; }
.sb-merk-naam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-top-r { grid-area: rechts; display: flex; align-items: center; gap: .5rem; }
.sb-bekijk { display: none; }
.sb-nav { grid-area: nav; margin-inline: -20px; overflow-x: auto; scrollbar-width: none; }
.sb-nav::-webkit-scrollbar { display: none; }
.sb-nav ul { display: flex; gap: .25rem; margin: 0; padding: 0 20px; list-style: none; }
.sb-nav a {
  position: relative; display: inline-flex; align-items: center; min-height: 48px; padding: 0 .85rem;
  color: var(--ink); text-decoration: none; white-space: nowrap; font-weight: 500;
}
.sb-nav a:hover { background: color-mix(in srgb, var(--ink) 6%, var(--paper)); border-radius: var(--radius); }
.sb-nav a[aria-current="page"] { font-weight: 700; }
.sb-nav a[aria-current="page"]::after {
  content: ""; position: absolute; inset-inline: .85rem; bottom: 0; height: 3px; border-radius: 3px 3px 0 0;
  background: var(--primary);
}
@media (min-width: 48rem) {
  .sb-top-in { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "merk nav rechts"; padding-block: 0; }
  .sb-nav { margin: 0; padding-inline-start: var(--space); }
  .sb-nav ul { padding: 0; }
  .sb-nav a { min-height: 64px; }
  .sb-bekijk {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 .5rem; color: var(--ink);
    font-size: var(--text-sm); text-underline-offset: .2em;
  }
}

/* ── het frame en de kaarten ────────────────────────────────────────────────────────────────────────────── */
.sb-main { padding-block: var(--space-lg) calc(var(--space-lg) * 1.5); display: grid; gap: calc(var(--space) * 1.5); }
.sb-main > * { min-width: 0; }
.sb-kop h1, .sb-welkom h1, .sb-melding h1 { font-size: var(--text-display); }
.sb-kop { display: grid; gap: .5rem; }
.sb-lead { font-size: var(--text-lg); line-height: 1.5; margin: 0; max-width: 60ch; }
.sb-zacht { color: color-mix(in srgb, var(--ink) 72%, var(--paper)); }
.sb-oogje {
  margin: 0; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 700; letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase; color: color-mix(in srgb, var(--ink) 72%, var(--paper));
}
.sb-groot { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--display-weight); line-height: 1.2; margin: 0; }
.sb-kaart {
  background: var(--paper); border: 1px solid var(--sb-kaart-rand); border-radius: var(--sb-rond);
  padding: 1.25rem; display: grid; gap: .75rem; align-content: start;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent);
}
.sb-kaart > * { margin: 0; }
.sb-kaart h2 { font-size: var(--text-lg); }
@media (min-width: 48rem) { .sb-kaart { padding: 1.75rem; } }
.sb-smal { max-width: 34rem; }
.sb-raster-hoofd, .sb-raster-2 { display: grid; gap: calc(var(--space) * 1.5); }
@media (min-width: 48rem) {
  .sb-raster-hoofd { grid-template-columns: 1.4fr 1fr; }
  .sb-raster-2 { grid-template-columns: 1fr 1fr; }
}

/* ── knoppen ────────────────────────────────────────────────────────────────────────────────────────────── */
.sb-acties { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin: 0; }
.sb-knop {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: 0 1.25rem;
  border: 1px solid var(--primary); border-radius: var(--radius); background: var(--primary); color: var(--primary-content);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: transform var(--pace) var(--ease), filter var(--pace) var(--ease);
}
.sb-knop:hover { filter: brightness(1.08); transform: translateY(calc(var(--hover-lift) * -1)); }
.sb-knop-stil { background: transparent; color: var(--ink); border-color: color-mix(in srgb, var(--ink) 35%, var(--paper)); }
.sb-knop-stil:hover { filter: none; background: color-mix(in srgb, var(--ink) 6%, var(--paper)); }
.sb-knop-gevaar { background: var(--danger); border-color: var(--danger); color: var(--danger-content); }
.sb-knop-klein { min-height: 44px; padding: 0 .9rem; font-size: var(--text-sm); }
.sb-tekstknop {
  font: inherit; font-size: var(--text-sm); color: var(--ink); background: none; border: 0; padding: .5rem 0;
  min-height: 44px; text-decoration: underline; text-underline-offset: .2em; cursor: pointer;
}
.sb-inline { display: inline; margin: 0; }
@media (max-width: 30rem) { .sb-acties > .sb-knop, .sb-acties > form, .sb-acties > form .sb-knop { width: 100%; } }

/* ── meldingen en badges ────────────────────────────────────────────────────────────────────────────────── */
.sb-ok, .sb-fout { margin: 0; padding: .75rem 1rem; border-radius: var(--radius); background: var(--paper); color: var(--ink); }
.sb-ok { border: 1px solid var(--ok); border-inline-start-width: 4px; }
.sb-fout { border: 1px solid var(--danger); border-inline-start-width: 4px; }
.sb-badge {
  display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: var(--text-sm); font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--ink) 35%, var(--paper)); color: var(--ink); vertical-align: middle;
}
.sb-badge[data-badge="klaar"], .sb-badge[data-badge="akkoord"], .sb-badge[data-badge="betalend"] { border-color: var(--ok); }
.sb-badge[data-badge="opgezegd"], .sb-badge[data-badge="offline"], .sb-badge[data-badge="opgeschort"] { border-color: var(--danger); }

/* ── de wizard (de kit van de shell, hier alleen in het frame gezet) ──────────────────────────────────────── */
.sb-wizard { max-width: 44rem; }
.sb-wizard .wz-heading:focus { outline: none; }
.sb-wizard .wz { border-color: var(--sb-kaart-rand); border-radius: var(--sb-rond); }
.sb-samen { display: grid; gap: 1rem; padding: 1rem; border: 1px solid var(--sb-kaart-rand); border-radius: var(--sb-rond); margin-bottom: 1rem; }
.sb-samen > * { margin: 0; }
.sb-samen-prijs .sb-groot { font-size: calc(var(--text-xl) * 1.2); }
.sb-samen-lijst { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.sb-samen-lijst li { padding-inline-start: 1.6rem; position: relative; }
.sb-samen-lijst li::before {
  content: ""; position: absolute; inset-inline-start: .2rem; top: .45em; width: .7rem; height: .4rem;
  border-inline-start: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg);
}
.sb-betaal { display: grid; gap: .35rem; }
.sb-betaal > * { margin: 0; }
.sb-betaal-logos { display: inline-flex; align-items: center; gap: .9rem; color: var(--ink); }
.sb-mollie { width: 70px; height: 20px; }
.sb-inbegrepen summary { cursor: pointer; min-height: 44px; padding-block: .6rem; font-weight: 600; }
.sb-inbegrepen ul { margin: .25rem 0 0; padding-inline-start: 1.2rem; display: grid; gap: .35rem; }
.sb-vinkjes { border: 0; padding: 0; margin: 0 0 1rem; display: grid; gap: .5rem; }
.sb-vinkjes legend { font-weight: 700; margin-bottom: .5rem; padding: 0; }
.sb-vink {
  display: grid; grid-template-columns: auto 1fr; gap: .25rem .75rem; align-items: start; padding: .65rem .75rem;
  border: 1px solid var(--sb-kaart-rand); border-radius: var(--radius);
}
.sb-vink input { width: 22px; height: 22px; margin: .15rem 0 0; accent-color: var(--primary); }
.sb-vink label { cursor: pointer; }
.sb-vink .wz-error { grid-column: 2; margin: 0; }
.sb-vink-fout { border-color: var(--danger); }
/* (review 03-11) de belangrijkste geldzin op leesgrootte, niet in 12 px */
.sb-mandaat { margin: 0 0 1rem; font-size: var(--text-base); }
.sb-samen-t { font-size: var(--text-base); margin: 0 0 .5rem; }
.sb-dl { display: grid; gap: .25rem; margin: 0 0 .75rem; }
.sb-dl > div { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.sb-dl dt { min-width: 12rem; color: var(--muted); }
.sb-dl dd { margin: 0; font-weight: 600; }

/* ── de instellingen: tabs ──────────────────────────────────────────────────────────────────────────────── */
.sb-tabs { border-bottom: 1px solid var(--sb-kaart-rand); margin-inline: -20px; overflow-x: auto; scrollbar-width: none; }
.sb-tabs ul { display: flex; gap: .25rem; margin: 0; padding: 0 20px; list-style: none; }
.sb-tabs a {
  position: relative; display: inline-flex; align-items: center; min-height: 48px; padding: 0 .9rem; white-space: nowrap;
  color: var(--ink); text-decoration: none; font-weight: 500;
}
.sb-tabs a[aria-current="page"] { font-weight: 700; }
.sb-tabs a[aria-current="page"]::after {
  content: ""; position: absolute; inset-inline: .9rem; bottom: -1px; height: 3px; background: var(--primary); border-radius: 3px 3px 0 0;
}
@media (min-width: 48rem) { .sb-tabs { margin-inline: 0; } .sb-tabs ul { padding: 0; } }
.sb-tab-inhoud { display: grid; gap: calc(var(--space) * 1.25); }
.sb-tab-titel { font-size: var(--text-xl); }
.sb-plan-kop { display: grid; gap: .25rem; }
.sb-plan-kop > * { margin: 0; }
.sb-links { margin: 0; padding: 0; list-style: none; display: grid; gap: .25rem; }
.sb-links a { display: inline-flex; align-items: center; min-height: 44px; }
.sb-tekst h3 { font-size: var(--text-lg); }
.sb-tekst h4 { font-size: var(--text-base); font-family: var(--font-body); font-weight: 700; margin: .5rem 0 0; }
.sb-kort { padding: 1rem; border-radius: var(--radius); border: 1px dashed color-mix(in srgb, var(--ink) 30%, var(--paper)); }
.sb-kort ul { margin: .5rem 0 0; padding-inline-start: 1.2rem; }
.sb-volledig { display: grid; gap: .5rem; max-width: var(--measure); }
.sb-volledig > * { margin: 0; }
.sb-volledig ul { padding-inline-start: 1.2rem; }


/* ── het overzicht ──────────────────────────────────────────────────────────────────────────────────────── */
.sb-welkom { display: grid; gap: .5rem; padding-block: .5rem; }
.sb-welkom > * { margin: 0; }
.sb-klok {
  justify-self: start; padding: .35rem .8rem; border-radius: 999px; font-weight: 600; font-size: var(--text-sm);
  border: 1px solid color-mix(in srgb, var(--primary) 50%, var(--paper)); color: var(--ink);
}
.sb-volgende { border-color: color-mix(in srgb, var(--primary) 45%, var(--paper)); border-width: 2px; }
.sb-cijfers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: 0; padding: 0; list-style: none; }
.sb-cijfers li { display: grid; gap: .1rem; font-size: var(--text-sm); }
.sb-cijfer { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-xl); line-height: 1.1; color: var(--ink); }
.sb-afmaken-kop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem; }
.sb-afmaken-kop > * { margin: 0; }
.sb-balk { height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 12%, var(--paper)); overflow: hidden; }
.sb-balk-vul { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--primary); transition: width var(--pace) var(--ease); }
.sb-p5 { width: 5%; } .sb-p10 { width: 10%; } .sb-p15 { width: 15%; } .sb-p20 { width: 20%; } .sb-p25 { width: 25%; }
.sb-p30 { width: 30%; } .sb-p35 { width: 35%; } .sb-p40 { width: 40%; } .sb-p45 { width: 45%; } .sb-p50 { width: 50%; }
.sb-p55 { width: 55%; } .sb-p60 { width: 60%; } .sb-p65 { width: 65%; } .sb-p70 { width: 70%; } .sb-p75 { width: 75%; }
.sb-p80 { width: 80%; } .sb-p85 { width: 85%; } .sb-p90 { width: 90%; } .sb-p95 { width: 95%; } .sb-p100 { width: 100%; }
.sb-taken { margin: 0; padding: 0; list-style: none; display: grid; }
.sb-taak { display: grid; grid-template-columns: auto 1fr; gap: .9rem; padding-block: 1rem; border-top: 1px solid var(--sb-kaart-rand); }
.sb-taak:first-child { border-top: 0; }
.sb-taak-teken { color: color-mix(in srgb, var(--ink) 45%, var(--paper)); padding-top: .1rem; }
.sb-taak[data-klaar="ja"] .sb-taak-teken { color: var(--ok); }
.sb-taak-tekst { display: grid; gap: .4rem; min-width: 0; }
.sb-taak-tekst > * { margin: 0; }
.sb-taak-tekst h3 { font-size: var(--text-base); font-family: var(--font-body); font-weight: 700; }
.sb-taak-acties { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
.sb-logo { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.sb-logo label { font-size: var(--text-sm); font-weight: 600; width: 100%; }
.sb-logo input[type="file"] { font: inherit; font-size: var(--text-sm); max-width: 100%; min-height: 44px; }
.sb-meting figure { margin: 0; display: grid; gap: .35rem; }
.sb-meting img { width: 100%; height: auto; border: 1px solid var(--sb-kaart-rand); border-radius: var(--radius); }
.sb-meting figcaption { font-size: var(--text-sm); font-weight: 600; }
.sb-scores { border-collapse: collapse; width: 100%; max-width: 32rem; }
.sb-scores th, .sb-scores td { text-align: start; padding: .55rem .5rem; border-bottom: 1px solid var(--sb-kaart-rand); }
.sb-scores td { font-variant-numeric: tabular-nums; }

/* ── het contactblok ────────────────────────────────────────────────────────────────────────────────────── */
.sb-hulp {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; padding: 1.25rem;
  border-radius: var(--sb-rond); border: 1px solid var(--sb-kaart-rand); background: var(--paper);
}
.sb-hulp-beeld { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--paper); }
.sb-hulp-tekst { display: grid; gap: .4rem; }
.sb-hulp-tekst > * { margin: 0; }
.sb-hulp h2 { font-size: var(--text-lg); }
.sb-ai {
  display: inline-block; padding: 0 .4rem; border-radius: 999px; font-size: .75rem; font-weight: 700; line-height: 1.5;
  border: 1px solid color-mix(in srgb, var(--ink) 40%, var(--paper)); color: var(--ink); vertical-align: 1px;
}

/* ── tabellen en formulieren ────────────────────────────────────────────────────────────────────────────── */
.sb-tabel-rol { overflow-x: auto; }
.sb-tabel { border-collapse: collapse; width: 100%; font-size: var(--text-sm); }
.sb-tabel th, .sb-tabel td { text-align: start; padding: .55rem .5rem; border-bottom: 1px solid var(--sb-kaart-rand); vertical-align: top; }
/* ── het podium: de inlogschermen (eigenaar 03-11, proefdraai-eig006) ─────────────────────────────────────────────
   Het formulier van /aanmelden zoals de shell het hare op /sign-in tekent (haar `.form` staat in de <head> van
   sign_in.html, niet in base.html): een kolom, het label klein in kapitalen, de knop over de hele breedte. */
.sb-podium-form { display: flex; flex-direction: column; gap: calc(var(--space) * .4); margin-top: var(--space-lg); }
.sb-podium-form label { font-size: var(--text-sm); letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; }
.sb-podium-form .act { margin-top: var(--space); }

.sb-formulier { display: grid; gap: .6rem; }
.sb-formulier label { font-weight: 600; }
.sb-formulier .field { min-height: 48px; font-size: max(1rem, 16px); }
/* zoekmachines (eigenaar 03-11): de velden over de hele breedte van de kaart, een beschrijving in regels */
.sb-seo + .sb-seo, .sb-seo + .sb-fout, .sb-fout + .sb-seo { margin-top: .5rem; }
.sb-seo textarea.field { min-height: 6rem; resize: vertical; padding-block: .6rem; line-height: 1.5; }
.sb-seo code, .sb-kaart h2 code { overflow-wrap: anywhere; }
.sb-oogje a { color: inherit; }
.sb-formulier .sb-knop { justify-self: start; }