/* School-Agent · Event horizon
   Shared presentation layer. Product behavior remains in stijl.css and HTMX.
   Impeccable: red School-Agent identity, strong hierarchy, quiet reading surfaces. */
@font-face { font-family: 'Space Grotesk'; src: url('fonts/space-grotesk-regular.ttf') format('truetype'); font-style: normal; font-weight: 400 500; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('fonts/space-grotesk-bold.ttf') format('truetype'); font-style: normal; font-weight: 600 800; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/ibm-plex-mono.ttf') format('truetype'); font-style: normal; font-weight: 400 700; font-display: swap; }
:root {
  color-scheme: dark;
  --ax-bg: #0c0d10;
  --ax-surface: #131418;
  --ax-surface-2: #1b1c22;
  --ax-border: #303138;
  --ax-border-strong: #51525b;
  --ax-text: #f5f3f3;
  --ax-text-muted: #b6b4bb;
  --ax-text-subtle: #97949e;
  --ax-accent: #e32945;
  --ax-accent-hover: #f4415b;
  --ax-accent-soft: #27151b;
  --ax-accent-line: #65303b;
  --ax-mono: 'IBM Plex Mono', monospace;
  /* Bridge domain component tokens so every screen shares the identity. */
  --grond: var(--ax-bg); --kop: var(--ax-surface); --vlak: var(--ax-surface-2);
  --kaart: var(--ax-surface); --lijn: var(--ax-border); --lijn-rood: var(--ax-accent-line);
  --rood: var(--ax-accent); --rood-fel: #ff637b; --rood-vuur: #ff8194;
  --rood-diep: #b51f38; --rood-waas: #34151e; --rood-waas-licht: var(--ax-accent-soft);
  --letter: var(--ax-text); --letter-zacht: var(--ax-text-muted); --letter-stil: var(--ax-text-subtle);
  --gloed: none; --gloed-sterk: none;
  --tekst: 16px/1.6 'Space Grotesk', sans-serif;
}
html { background: var(--ax-bg); color: var(--ax-text); font: var(--tekst); scrollbar-color: #4d424a var(--ax-bg); scrollbar-width: thin; }
body { background: var(--ax-bg); }
::selection { background: #9c263d; color: #fff; }
input, textarea { caret-color: #ff637b; }
::placeholder { color: var(--ax-text-subtle); opacity: 1; }
a { text-underline-offset: .22em; }
button, input, textarea, select { accent-color: var(--ax-accent); }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid #ff8194; outline-offset: 4px; box-shadow: none; }
.icoon { display: inline-block; flex: none; vertical-align: middle; }
code, .code, kbd, .tijd, .wanneer, .datum { font-family: var(--ax-mono); font-variant-numeric: tabular-nums; }
button { touch-action: manipulation; }
button:disabled { cursor: not-allowed; }
.overslaan { position: fixed; top: .75rem; left: .75rem; padding: .75rem 1rem; background: var(--ax-text); color: var(--ax-bg); z-index: 100; transform: translateY(-200%); }
.overslaan:focus { transform: none; }

/* Shell: solid navigation and working surfaces, reactive dots in open space. */
body.werkblad { grid-template-columns: 15.5rem minmax(0, 1fr); height: 100dvh; }
.hoofd, .leegscherm, .inlogpagina { position: relative; isolation: isolate; background-color: var(--ax-bg); background-image: radial-gradient(#6b343e 1px, transparent 1px); background-size: 22px 22px; }
.hoofd { height: 100dvh; }
.stippen-actief { background-image: none; }
.stippenveld { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.zijbalk { height: 100dvh; background: #101115; border-right: 1px solid var(--ax-border); }
.zijbalkkop { padding: 1.65rem 1.35rem; border-bottom: 1px solid var(--ax-border); }
.zijbalk .woordmerk { font-size: 1.05rem; letter-spacing: -.025em; text-transform: none; gap: .7rem; }
.zijbalk .woordmerk .logo { height: 2rem; filter: none; }
.woordmerk .punt { color: var(--ax-accent-hover); }
.zijnav { padding: 1.15rem .8rem; gap: .3rem; }
.zijkop { font-family: var(--ax-mono); font-size: .625rem; font-weight: 400; color: var(--ax-text-subtle); letter-spacing: .1em; margin: 1.65rem .75rem .6rem; }
.zijnav a { display: flex; align-items: center; gap: .85rem; min-height: 44px; padding: .65rem .75rem; border: 1px solid transparent; border-radius: 6px; color: var(--ax-text-muted); font-size: .86rem; transition: color .18s, background .18s, border-color .18s; }
.zijnav a > .icoon { opacity: .7; width: 18px; height: 18px; }
.zijnav a:hover { background: #1c1b21; color: var(--ax-text); }
.zijnav a[aria-current='page'] { background: #2d161e; border-color: #542733; color: #ff9cab; }
.zijnav a[aria-current='page'] .icoon { opacity: 1; }
.navmark { margin-left: auto; width: 5px; height: 5px; background: #ff637b; border-radius: 1px; }
.zijnieuw { min-height: 44px; border: 1px solid var(--ax-border); padding: .65rem .75rem; border-radius: 6px; font-size: .85rem; }
.zijnieuw.aan, .zijchatrij.aan { background: #27151b; border: 1px solid var(--ax-accent-line); }
.werkblad:not([data-actief='gesprek']) .zijnieuw.aan { background: transparent; border-color: var(--ax-border); color: var(--ax-text-muted); }
.zijchatrij { border: 1px solid transparent; }
.zijchatweg { color: var(--ax-text-subtle); min-width: 32px; min-height: 36px; }
.zijleeg { font-size: .78rem; padding: .2rem 0; }
.zijvoet { padding: 1rem .8rem; gap: .3rem; border-color: var(--ax-border); }
.zijvoet .knop-stil { font-size: .7rem; padding: .45rem; border: 0; }
.profiel { gap: .5rem; }
.profielnaam { font-size: .8rem; }
.avatar { width: 1.9rem; height: 1.9rem; background: #2b1a23; border: 1px solid #643340; color: #ffa8b5; border-radius: 6px; }
.tandwiel { display: grid; place-items: center; width: 36px; min-height: 44px; }
.hoofdbalk { position: relative; z-index: 20; justify-content: space-between; gap: 1rem; padding: .75rem 2.5rem; min-height: 72px; background: #101115; border-bottom: 1px solid var(--ax-border); }
.werkpad { display: flex; align-items: center; gap: .8rem; font-family: var(--ax-mono); font-size: .68rem; color: var(--ax-text-subtle); }
.werkpad > span:nth-child(2) { color: #ff637b; }
.werkpad strong { color: var(--ax-text-muted); font-weight: 400; }
.modelknop { min-height: 40px; font-size: .8rem; border: 1px solid var(--ax-border); border-radius: 6px; background: var(--ax-surface); }
.modelknop:hover { background: var(--ax-surface-2); }
.modelknop:focus-visible { outline: 2px solid #ff8194; outline-offset: 3px; box-shadow: none; }
.modeldot, .modelitem.aan .modeldot { background: #ff637b; box-shadow: none; }
.modelmenu { left: auto; right: 0; background: #17171d; border-color: var(--ax-border-strong); max-width: calc(100vw - 2rem); }
.modelitem { min-height: 52px; }
.modelitem:focus-visible { outline: 2px solid #ff8194; outline-offset: -2px; }
.feed { width: min(100%, 76rem); padding: 2.75rem 3rem 2rem; scrollbar-gutter: stable; }
.paginakop { margin-bottom: 2rem; padding-bottom: 1.65rem; border-bottom: 1px solid var(--ax-border); }
.bovenregel { display: none; }
.paginakop h1 { font-size: 2rem; letter-spacing: -.035em; line-height: 1.2; font-weight: 700; }
.blokregel, .inleiding { color: var(--ax-text-muted); font-size: .9rem; line-height: 1.7; max-width: 72ch; margin-top: .8rem; }
.inleiding a, .hulplink { color: #ff8194; }
.kaart, .inlogkaart, .meldvenster { background: var(--ax-surface); border: 1px solid var(--ax-border); border-radius: 12px; box-shadow: none; }
.kaart { padding: 1.6rem 1.75rem; margin-bottom: 1.15rem; }
.kaart h2 { font-size: 1.05rem; font-weight: 700; color: var(--ax-text); letter-spacing: -.015em; text-transform: none; margin-bottom: 1rem; }
.kaart .kaart { background: transparent; border: 0; border-top: 1px solid var(--ax-border); border-radius: 0; padding: 1.25rem 0 0; }
.kaart-wachten { background: var(--ax-surface); }
.kaart-wachten .pulse { color: var(--ax-text); }
.stil, .briefvoet, .taken .fase, .taken .tijd, .koppeling p { color: var(--ax-text-muted); }
.tekst, .antwoord { line-height: 1.75; max-width: 74ch; }
.rooster li, .deadlines li, .taken li { padding: 1rem 0; }
.rooster .tijd { font-size: .85rem; color: #ff8194; }
.rooster .tot { color: var(--ax-text-subtle); font-size: .78rem; }
.rooster .locatie { font-family: var(--ax-mono); font-size: .75rem; }
.deadlines .wanneer, .taken .status, .koppeling .status, .merk, .stand { border-radius: 4px; font-size: .65rem; font-weight: 400; letter-spacing: .03em; padding: .25rem .55rem; background: #221a20; border: 1px solid #52313c; color: #ff9cab; }
.deadlines .dl-morgen .wanneer { color: #ffd29a; background: #30251c; border-color: #63482c; }
.deadlines .dl-vandaag .wanneer, .deadlines .dl-te-laat .wanneer, .taken .st-mislukt, .taken .st-geblokkeerd { color: #ff9cab; background: #3f1723; border-color: #873146; box-shadow: none; }
.koppeling .status-ok, .taken .st-klaar { color: #a7dfc3; background: #142b23; border-color: #315b49; box-shadow: none; }
.koppeling .status-mis { color: var(--ax-text-muted); background: #1e1e24; border-color: var(--ax-border); }
.koppeling .status-bezig, .taken .st-bezig { color: #ffd29a; background: #30251c; border-color: #63482c; box-shadow: none; }
.koppeling { gap: .5rem 1.75rem; }
.koppeling .actie { display: flex; gap: .5rem; flex-wrap: wrap; max-width: 15rem; }
.koppeling p { font-size: .9rem; max-width: 70ch; }
.tabel th { font-family: var(--ax-mono); font-size: .65rem; font-weight: 400; padding: .75rem; color: var(--ax-text-subtle); }
.tabel td { padding: .9rem .75rem; }
.tabel tbody tr:hover { background: #1c1c22; }

/* Controls: red actions, deliberate focus, readable quiet states. */
.knop { min-height: 44px; padding: .65rem 1rem; background: #c72640; border: 1px solid #c72640; color: #fff; border-radius: 6px; font-size: .85rem; font-weight: 700; transition: background .18s, border-color .18s, transform .18s; box-shadow: none; }
.knop:hover { background: #df2a48; border-color: #df2a48; box-shadow: none; }
.knop:active { transform: translateY(1px); }
.knop-stil { min-height: 40px; color: var(--ax-text-muted); background: transparent; border: 1px solid var(--ax-border-strong); border-radius: 6px; font-size: .8rem; padding: .5rem .8rem; box-shadow: none; }
.knop-stil:hover { color: var(--ax-text); background: var(--ax-surface-2); border-color: #7a5c67; box-shadow: none; }
.knop-gevaar { color: #ffb0bd; background: #411822; border-color: #813044; }
.knop-gevaar:hover { color: #fff; background: #85243a; }
.formulier { gap: 1.1rem; }
.formulier label { gap: .5rem; color: var(--ax-text-muted); font-size: .85rem; }
.formulier input, .formulier select, .formulier textarea, .inlogformulier input, .modelkeuze select { min-height: 46px; padding: .75rem .9rem; color: var(--ax-text); font: inherit; font-size: .9rem; background: #0f1014; border: 1px solid var(--ax-border-strong); border-radius: 6px; transition: border-color .16s; }
.formulier input:focus, .formulier select:focus, .formulier textarea:focus, .inlogformulier input:focus { outline: 2px solid #ff8194; outline-offset: 2px; box-shadow: none; }
.formulier .uitleg { color: var(--ax-text-subtle); }
.melding { padding: .85rem 1rem; font-size: .9rem; line-height: 1.6; }
.melding-fout { background: #351720; color: #ffacbc; border-color: #733145; }
.melding-waarschuwing { background: #30251c; color: #f4ce9e; border-color: #63482c; }
.melding-goed { background: #142b23; color: #b6e4cd; border-color: #315b49; box-shadow: none; }
.beurt .vraag { border-left: 1px solid #aa3d53; padding: .25rem 0 .25rem 1rem; }
.balkzone { position: relative; z-index: 10; padding: .85rem 2rem 1rem; background: var(--ax-bg); border-top: 1px solid #24242b; }
.invoerbalk { width: min(100%, 64rem); }
.invoerrij { background: #16171c; border: 1px solid #4b3b43; border-radius: 12px; padding: .6rem .7rem; box-shadow: none; }
.invoerbalk:focus-within .invoerrij { border-color: #d34c64; box-shadow: none; }
.invoerrij textarea { padding: .55rem .3rem; font-size: .9rem; }
.schuinknop, .zendknop { width: 42px; height: 42px; border-radius: 6px; }
.schuinknop { color: #ff9cab; background: #23191f; border-color: #51303b; font-family: var(--ax-mono); }
.zendknop { background: #c72640; color: #fff; }
.zendknop:hover { background: #df2a48; box-shadow: none; }
.balkvoet { font-size: .625rem; font-family: var(--ax-mono); margin-top: .65rem; color: var(--ax-text-subtle); }
.balkvoet kbd { padding: .05rem .25rem; background: #18181f; border-color: #3b333d; }
.palet { background: #17171d; border: 1px solid var(--ax-border-strong); box-shadow: 0 16px 48px #0008; border-radius: 12px; }
.paletitem { min-height: 44px; border-left: 1px solid transparent; }
.paletitem.aan { background: #301a24; border-left-color: #ff8194; }
.meldvenster { border-color: var(--ax-border-strong); padding: 2rem; }
.meldvenster::backdrop { background: #050609cf; }
.voetregel { margin-top: 2.5rem; font-size: .75rem; }
.welkomkop-groot h1 { font-size: 2rem; }
.welkomkaart { background: var(--ax-surface); border-color: var(--ax-border); border-radius: 12px; }
.welkomkaart:hover { border-color: #66505b; background: var(--ax-surface-2); }
.welkomkaart p { color: var(--ax-text-muted); }
.binnenkort-tekst { text-shadow: none; letter-spacing: -.04em; }

/* Entry: the red event horizon is a single authored, geometric centerpiece. */
.inlogpagina { width: 100%; min-height: 100dvh; max-width: none; padding: 0; overflow: hidden; display: grid; grid-template-rows: 1fr auto; align-items: center; }
.inlogachtergrond { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.inlogpagina .stippenveld { z-index: -2; }
.inlogachtergrond::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #0c0d10c9, #0c0d1000 52%, #0c0d1099 82%); }
.zwartgat { position: absolute; width: min(82vw, 1080px); max-width: none; height: min(82vw, 1080px); left: 44%; top: 50%; transform: translate(-50%, -50%); opacity: .92; filter: drop-shadow(0 0 30px rgba(255,16,47,.12)); }
.zwartgat-halo, .inlogruis { display: none; }
.inloglayout { width: min(1360px, calc(100% - 8rem)); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); gap: clamp(3rem, 8vw, 9rem); align-items: center; padding: 10rem 0 5rem; }
.inlogintro { max-width: 650px; }
.inlogwoordmerk { position: absolute; top: 2.5rem; left: max(4rem, calc((100% - 1360px) / 2)); display: inline-flex; align-items: center; gap: .75rem; color: var(--ax-text); text-decoration: none; font-size: 1.25rem; font-weight: 700; letter-spacing: -.025em; }
.inlogwoordmerk img { width: 2.5rem; height: 2.5rem; object-fit: contain; }
.inlogwoordmerk .punt { color: #ff526c; }
.inlogintro h1 { font-size: clamp(2.5rem, 4.7vw, 4.75rem); font-weight: 700; line-height: 1.07; letter-spacing: -.04em; margin: 0; text-wrap: balance; }
.inlogintro h1 span { color: #ff637b; }
.inlogsub { color: #c8c1c7; font-size: 1rem; line-height: 1.8; max-width: 37ch; margin: 1.5rem 0 2rem; }
.pilotcta { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 50px; padding: .75rem 0; color: var(--ax-text); text-decoration: none; font-size: .9rem; font-weight: 700; border-bottom: 1px solid #a63b50; transition: color .18s, border-color .18s; }
.pilotcta:hover { color: #ff9cab; border-color: #ff8194; }
.pilotcta-label > span { color: #ff8194; font-size: .8em; vertical-align: super; margin-left: .15rem; }
.pilotcta-arrow { display: inline-flex; color: #ff8194; transition: transform .18s; }
.pilotcta:hover .pilotcta-arrow { transform: translateX(4px); }
.inlogpunten { display: flex; gap: 1.5rem; margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid #49313b; }
.inlogpunten > div { flex: 1; min-width: 0; }
.inlogpunten > div > span { display: inline-block; color: #ff8194; margin-bottom: .7rem; }
.inlogpunten p { margin: 0; }
.inlogpunten strong { display: block; color: #e4dde2; font-size: .78rem; line-height: 1.6; }
.inlogpunten small { display: block; color: #b6a9b2; font-size: .7rem; line-height: 1.6; margin-top: .3rem; }
.inlogpagina .inlogkaart { position: relative; width: 100%; max-width: none; margin: 0; padding: 2.25rem; background: #131418; border: 1px solid #54313e; border-radius: 12px; box-shadow: 0 24px 80px #0005; }
.inlogpagina .inlogkaart::before { content: ''; position: absolute; top: -1px; left: 2.25rem; width: 3rem; height: 2px; background: #ff637b; }
.inlogkaartkop { margin-bottom: 1.75rem; }
.inlogkaart h2 { color: var(--ax-text); font-size: 1.7rem; font-weight: 700; line-height: 1.25; letter-spacing: -.03em; }
.inlogkaartkop > p:last-child { font-size: .85rem; color: var(--ax-text-muted); margin: .65rem 0 0; }
.inlogmini { font-family: var(--ax-mono); color: #ff9cab; font-size: .7rem; }
.inlogformulier { display: grid; gap: .65rem; }
.inlogformulier > label { color: #c7c3cb; font-size: .8rem; margin-top: .4rem; }
.inlogveld { display: flex; align-items: center; gap: .7rem; padding: 0 .85rem; min-height: 52px; background: #0d0e12; border: 1px solid #45404a; border-radius: 6px; transition: border-color .18s; }
.inlogveld > span { display: flex; color: #a599a4; }
.inlogveld .icoon { width: 17px; height: 17px; }
.inlogveld:focus-within { outline: 2px solid #ff8194; outline-offset: 2px; border-color: transparent; }
.inlogveld input { min-width: 0; width: 100%; padding: .85rem 0; background: transparent; border: 0; border-radius: 0; font-size: .88rem; }
.inlogveld input:focus { outline: none; }
.wachtwoordtoner { display: grid; place-items: center; flex: none; min-width: 36px; min-height: 44px; padding: .3rem; border: 0; background: transparent; color: var(--ax-text-subtle); cursor: pointer; }
.wachtwoordtoner:hover { color: var(--ax-text); }
.inlogknop { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; min-height: 52px; padding: .85rem 1rem; margin-top: 1rem; }
.inlogscheiding { display: flex; align-items: center; gap: .8rem; margin: 1.5rem 0; color: var(--ax-text-subtle); }
.inlogscheiding span { flex: 1; height: 1px; background: var(--ax-border); }
.inlogscheiding small { font-size: .7rem; }
.inlogaccount strong { color: #d9d2da; font-size: .8rem; }
.inlogaccount p { font-size: .75rem; color: var(--ax-text-muted); line-height: 1.8; margin: .4rem 0 0; }
.inlogaccount a { color: #ff8194; }
.inlogfout { margin: .5rem 0 0; }
.pilotbijdrage { display: flex; gap: .7rem; margin: 1rem 0 0; padding: .8rem; background: #241a20; color: #d3b9c2; border: 1px solid #50303c; border-radius: 6px; font-size: .75rem; line-height: 1.7; }
.pilotbijdrage > span:first-child { color: #ff9cab; }
.pilotbijdrage strong { color: #f7dce4; }
.pilotvoorwaarden { font-size: .72rem; color: var(--ax-text-muted); line-height: 1.7; margin: .6rem 0 0; }
.pilotklaar { color: var(--ax-text-muted); font-size: .85rem; line-height: 1.7; }
.pilotfooter { display: flex; align-items: baseline; gap: 1.5rem; width: min(1360px, calc(100% - 8rem)); margin: 0 auto; padding: 1.25rem 0; border-top: 1px solid #393038; color: var(--ax-text-subtle); font-size: .65rem; line-height: 1.8; }
.pilotfooter strong { font-family: var(--ax-mono); font-size: .58rem; white-space: nowrap; letter-spacing: .04em; color: #bbaab4; }
.leegscherm { min-height: 100dvh; }
.leegmidden { width: min(100%, 30rem); }
.leegmidden .inlogkaart { padding: 2rem; }
.leegmidden .woordmerk .logo { filter: none; }

/* One entrance for the centerpiece, with an already visible static default. */
@media (prefers-reduced-motion: no-preference) {
  .zwartgat { animation: horizon-onthul 1.4s cubic-bezier(.16,1,.3,1) both; }
}
@keyframes horizon-onthul { from { opacity: .45; transform: translate(-50%, -50%) scale(.94); } to { opacity: .92; transform: translate(-50%, -50%) scale(1); } }
@media (max-width: 1150px) {
  .inloglayout { width: calc(100% - 5rem); gap: 2.5rem; grid-template-columns: minmax(0, 1fr) 360px; }
  .inlogwoordmerk { left: 2.5rem; }
  .inlogpunten { gap: 1rem; }
  .pilotfooter { width: calc(100% - 5rem); }
  .feed { padding: 2rem; }
  .werkpad > span:first-child { display: none; }
}
@media (max-width: 900px) {
  body.werkblad { grid-template-columns: minmax(0, 1fr); }
  .zijbalk { width: 17rem; visibility: hidden; }
  .zijbalk.open { visibility: visible; }
  .zijbalkkop { padding-left: 4rem; }
  .hoofdbalk { min-height: 68px; padding: .65rem 1rem .65rem 4.5rem; }
  .hamburger { width: 44px; height: 44px; top: .75rem; background: #1c1a21; border-color: #51404b; border-radius: 6px; }
  .zijbalkwaas { background: #06060bd9; }
  .feed { padding: 2rem 1.5rem; }
  .balkzone { padding: .75rem 1rem max(.75rem, env(safe-area-inset-bottom)); }
  .inloglayout { width: min(640px, calc(100% - 3rem)); grid-template-columns: 1fr; padding: 8rem 0 3rem; gap: 2.75rem; }
  .inlogwoordmerk { left: 1.5rem; top: 1.75rem; }
  .inlogintro h1 { font-size: clamp(2.6rem, 7.5vw, 4rem); max-width: 14ch; }
  .inlogsub { max-width: 38ch; font-size: .95rem; margin: 1.25rem 0 .75rem; }
  .inlogpunten { display: none; }
  .zwartgat { width: 900px; height: 900px; left: 55%; top: 48%; opacity: .45; }
  .inlogachtergrond::after { background: linear-gradient(180deg, #0c0d1055, #0c0d1000 40%, #0c0d10 85%); }
  .inlogpagina .inlogkaart { width: 100%; padding: 2rem; }
  .pilotfooter { width: calc(100% - 3rem); gap: .5rem; flex-direction: column; padding: 1.5rem 0; }
}
@media (max-width: 600px) {
  .feed { padding: 1.75rem 1rem; }
  .paginakop { padding-bottom: 1.25rem; margin-bottom: 1.25rem; }
  .paginakop h1 { font-size: 1.6rem; }
  .kaart { padding: 1.2rem; border-radius: 10px; }
  .kaart h2 { font-size: 1rem; }
  .rooster li { grid-template-columns: 1fr auto; gap: .35rem .75rem; }
  .rooster .tijd { grid-column: 1; }
  .rooster .vak { grid-column: 1; grid-row: auto; }
  .rooster .locatie { grid-column: 2; grid-row: 1; }
  .deadlines li { grid-template-columns: 1fr; gap: .4rem; }
  .deadlines .wanneer { grid-row: auto; }
  .deadlines .maakknop, .deadlines .dl-acties { grid-column: 1; }
  .koppeling .actie { max-width: none; }
  .inloglayout { width: calc(100% - 2.5rem); padding-top: 7rem; gap: 2rem; }
  .inlogintro h1 { font-size: 2.5rem; }
  .inlogwoordmerk { left: 1.25rem; }
  .inlogpagina .inlogkaart { padding: 1.5rem; }
  .pilotfooter { width: calc(100% - 2.5rem); }
  .balkvoet { line-height: 1.9; font-size: .58rem; }
  .briefvoet { flex-wrap: wrap; font-size: .75rem; }
  .bestanden li { grid-template-columns: 1fr; }
  .werkpad { font-size: .6rem; gap: .5rem; }
  .modelknop { font-size: .7rem; padding: .4rem; gap: .4rem; }
  .paletitem { grid-template-columns: 1fr auto; gap: .35rem; }
  .paletuitleg { grid-column: 1 / -1; grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Beheer en CRM: tabbladen, kerncijfers, filter, lijst en accountkaart. */
.beheertabs { margin: 0 0 1.5rem; padding-bottom: .1rem; border-bottom: 1px solid var(--ax-border); gap: 1.4rem; }
.beheertabs a { font-size: .85rem; padding: .55rem 0; margin-bottom: -1px; color: var(--ax-text-muted); }
.beheertabs a[aria-current="page"] { color: var(--ax-text); border-bottom-color: var(--ax-accent); text-shadow: none; }
.crmcijfers { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin-bottom: 1.15rem; }
.crmcijfers > div { display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.1rem; background: var(--ax-surface); border: 1px solid var(--ax-border); border-radius: 10px; }
.crmcijfers span { font-family: var(--ax-mono); font-size: .65rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ax-text-subtle); }
.crmcijfers strong { font-size: 1.6rem; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.crmcijfers strong a { color: inherit; }
.crmfilter { display: grid; grid-template-columns: minmax(200px, 2fr) repeat(2, minmax(150px, 1fr)) auto; gap: .9rem; align-items: end; margin-bottom: 1.25rem; }
.crmfilter label { display: flex; flex-direction: column; gap: .4rem; color: var(--ax-text-muted); font-size: .8rem; }
.crmfilter input, .crmfilter select { min-height: 42px; padding: .55rem .75rem; color: var(--ax-text); font: inherit; font-size: .85rem; background: #0f1014; border: 1px solid var(--ax-border-strong); border-radius: 6px; }
.crmfilter .knoppenrij { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.crmtabel { min-width: 860px; }
.crmtabel th, .crmtabel td { white-space: nowrap; }
.crmtabel td { vertical-align: top; font-variant-numeric: tabular-nums; }
.crmtabel td:first-child { white-space: normal; min-width: 160px; }
.crmnaam { color: var(--ax-text); text-decoration: none; }
.crmnaam:hover { color: #ff9cab; text-decoration: underline; }
.crmsub { display: block; margin-top: .2rem; font-size: .75rem; color: var(--ax-text-subtle); }
.crmstatus { display: inline-block; margin-top: .25rem; font-family: var(--ax-mono); font-size: .65rem; white-space: nowrap; color: var(--ax-text-muted); }
.crmstatus::before { content: ''; display: inline-block; width: .5rem; height: .5rem; margin-right: .35rem; border-radius: 50%; background: currentColor; vertical-align: .05em; }
.crmstatus-actief { color: #5fd08a; }
.crmstatus-stil { color: #e7b55a; }
.crmstatus-inactief, .crmstatus-nooit-ingelogd { color: var(--ax-text-subtle); }
.crmstatus-geblokkeerd, .crmstatus-geschorst { color: #ff637b; }
.crmkoppel { display: block; font-family: var(--ax-mono); font-size: .7rem; white-space: nowrap; color: var(--ax-text-subtle); }
.crmkoppel.aan { color: #5fd08a; }
.crmkaart { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 0 1.15rem; }
.crmfeiten { display: grid; grid-template-columns: minmax(140px, auto) 1fr; gap: .55rem 1.25rem; margin: 0; font-size: .9rem; }
.crmfeiten dt { color: var(--ax-text-subtle); }
.crmfeiten dd { margin: 0; font-variant-numeric: tabular-nums; }
.paginakop .bovenregel a { color: inherit; }
.formulier select { width: 100%; }
@media (max-width: 900px) {
  .crmfilter { grid-template-columns: 1fr 1fr; }
  .crmfilter label:first-child, .crmfilter .knoppenrij { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .crmfilter { grid-template-columns: 1fr; }
  .crmfeiten { grid-template-columns: 1fr; gap: .1rem; }
  .crmfeiten dd { margin-bottom: .6rem; }
  .crmcijfers { grid-template-columns: 1fr 1fr; }
}

/* CRM, tweede ronde: bijdrage, labels, voortgang, trend, opvolging, contactlog. */
.cijfer-goed strong { color: #5fd08a; }
.cijfer-fout strong { color: #ff637b; }
.bijdragekeuze { margin: 0; }
.bijdragekeuze select { min-height: 34px; padding: .3rem 1.9rem .3rem .6rem; font: inherit; font-size: .8rem; font-weight: 700; border-radius: 6px; border: 1px solid; cursor: pointer; }
.bijdrage-betaald select { color: #7ee2a2; background: #10271a; border-color: #2f7a4b; }
.bijdrage-open select { color: #ff8194; background: #2a1219; border-color: #8b2a3e; }
.bijdragekeuze select option { color: var(--ax-text); background: var(--ax-surface-2); }
.labelrij { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }
.crmlabel { display: inline-block; padding: .1rem .5rem; font-family: var(--ax-mono); font-size: .65rem; border-radius: 999px; border: 1px solid var(--ax-border-strong); color: var(--ax-text-muted); }
.label-vriend { color: #f0b3ff; border-color: #6d3f7d; background: #1f1424; }
.label-gebruiker { color: #9cc7ff; border-color: #35557f; background: #121a26; }
.label-beta-tester { color: #ffd27a; border-color: #7a5a22; background: #231b0e; }
.crmkopregel { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.labelkeuze { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 0; padding: 0; border: 0; }
.labelkeuze legend { margin-bottom: .5rem; color: var(--ax-text-muted); font-size: .85rem; }
.labelkeuze label { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
.voortgang { display: block; width: 90px; height: 6px; margin-top: .35rem; overflow: hidden; background: #26272e; border-radius: 3px; }
.voortgang-breed { width: 100%; margin: 0 0 1rem; }
.voortgang > span { display: block; height: 100%; background: #e7b55a; border-radius: 3px; }
.voortgang > .voortgang-100 { background: #5fd08a; }
.voortgang-0 { width: 0; } .voortgang-10 { width: 10%; } .voortgang-20 { width: 20%; } .voortgang-30 { width: 30%; }
.voortgang-40 { width: 40%; } .voortgang-50 { width: 50%; } .voortgang-60 { width: 60%; } .voortgang-70 { width: 70%; }
.voortgang-80 { width: 80%; } .voortgang-90 { width: 90%; } .voortgang-100 { width: 100%; }
.crmteller { margin-left: .4rem; font-family: var(--ax-mono); font-size: .7rem; font-weight: 400; color: var(--ax-text-subtle); }
.checklijst { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; font-size: .9rem; }
.checklijst .klaar span { color: #5fd08a; }
.checklijst .open { color: var(--ax-text-muted); }
.checklijst .open span { color: #e7b55a; }
.visueel-verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.crmkoppel.koppel-werkt { color: #5fd08a; }
.crmkoppel.koppel-verlopen { color: #ff637b; }
.crmkoppel.koppel-niet-gecontroleerd { color: #e7b55a; }
.crmkoppel.koppel-niet-gekoppeld { color: var(--ax-text-subtle); }
.crmwaarschuwing { color: #e7b55a; }
.te-laat { color: #ff637b; font-weight: 700; }
.vandaag { color: #e7b55a; font-weight: 700; }
.crmactie { max-width: 170px; white-space: normal; }
.crmtabel th, .crmtabel td { padding-left: .6rem; padding-right: .6rem; }
.crmkoppel { margin-top: .15rem; }
.crmtabel td:last-child { white-space: normal; min-width: 130px; }
.kaart-opvolgen { border-color: #7a5a22; }
.opvolglijst { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.opvolglijst li { display: grid; grid-template-columns: 6.5rem minmax(120px, auto) 1fr; gap: .75rem; align-items: baseline; }
.opvolglijst a { color: var(--ax-text); }
.trend { display: grid; grid-template-columns: repeat(30, 1fr); gap: 3px; margin-bottom: .4rem; }
.trend span { height: 18px; border-radius: 2px; background: #22232a; }
.trend span.aan { background: #e32945; }
.crmtussenkop { margin: 1.25rem 0 .6rem; font-size: .85rem; font-weight: 700; color: var(--ax-text-muted); }
.staafjes { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; font-size: .8rem; }
.staafjes li { display: grid; grid-template-columns: 7.5rem 1fr 2.5rem; gap: .6rem; align-items: center; }
.staafjes li > span:last-child { text-align: right; font-variant-numeric: tabular-nums; color: var(--ax-text-muted); }
.staaf { height: 6px; background: #22232a; border-radius: 3px; overflow: hidden; }
.staaf > span { display: block; height: 100%; background: #ff637b; }
.breedte-0 { width: 2%; } .breedte-10 { width: 10%; } .breedte-20 { width: 20%; } .breedte-30 { width: 30%; }
.breedte-40 { width: 40%; } .breedte-50 { width: 50%; } .breedte-60 { width: 60%; } .breedte-70 { width: 70%; }
.breedte-80 { width: 80%; } .breedte-90 { width: 90%; } .breedte-100 { width: 100%; }
.contactlijst { list-style: none; margin: 1.25rem 0 0; padding: 0; border-top: 1px solid var(--ax-border); }
.contactlijst li { padding: .85rem 0; border-bottom: 1px solid var(--ax-border); }
.contactlijst p { margin: .35rem 0 0; white-space: pre-line; }
.contactkop { display: flex; align-items: center; gap: .6rem; }
.contactkop form { margin: 0 0 0 auto; }
.contactdatum { font-family: var(--ax-mono); font-size: .75rem; color: var(--ax-text-muted); }
.gemakcijfer { display: inline-block; padding: .1rem .45rem; font-family: var(--ax-mono); font-size: .7rem; border-radius: 4px; background: #22232a; }
.gemak-1, .gemak-2 { color: #ff8194; }
.gemak-3 { color: #e7b55a; }
.gemak-4, .gemak-5 { color: #7ee2a2; }
.gemakschaal { margin: 0; padding: 0; border: 0; }
.gemakschaal legend { margin-bottom: .6rem; color: var(--ax-text-muted); font-size: .85rem; }
.gemakknoppen { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; }
.gemakknoppen label { position: relative; display: block; cursor: pointer; }
.gemakknoppen input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.gemakknoppen span { display: flex; align-items: center; justify-content: center; min-height: 42px; font-weight: 700; border: 1px solid var(--ax-border-strong); border-radius: 6px; background: #0f1014; color: var(--ax-text-muted); transition: border-color .15s, background .15s; }
.gemakknoppen label:hover span { border-color: #ff8194; }
.gemakknoppen input:checked + span { color: #fff; background: var(--ax-accent); border-color: var(--ax-accent); }
.gemakknoppen input:focus-visible + span { outline: 2px solid #ff8194; outline-offset: 2px; }
.gemakuitleg { display: flex; justify-content: space-between; margin-top: .3rem; font-size: .7rem; color: var(--ax-text-subtle); }
@media (max-width: 560px) {
  .opvolglijst li { grid-template-columns: 1fr; gap: .1rem; }
  .staafjes li { grid-template-columns: 6rem 1fr 2rem; }
}
.labelkeuze label { flex-direction: row; white-space: nowrap; }
.formulier .labelkeuze input[type="checkbox"] { width: 1.1rem; height: 1.1rem; min-height: 0; padding: 0; margin: 0; flex: none; }
.crmlabel { white-space: nowrap; }

/* Invoerbalk uit zolang de agent-modus in aanbouw is. */
.invoerbalk-uit .invoerrij { background: #111216; border-color: var(--ax-border); }
.invoerbalk-uit:focus-within .invoerrij { border-color: var(--ax-border); }
.invoerbalk-uit textarea:disabled { cursor: not-allowed; color: var(--ax-text-subtle); -webkit-text-fill-color: var(--ax-text-subtle); }
.invoerbalk-uit .schuinknop:disabled { color: #5d5a63; background: #17171c; border-color: #2b2b32; cursor: not-allowed; }
.invoerbalk-uit .zendknop:disabled, .invoerbalk-uit .zendknop:disabled:hover { background: #26262d; color: #5d5a63; cursor: not-allowed; box-shadow: none; }
.balkvoet-binnenkort { font-size: .7rem; color: var(--ax-text-muted); }
.binnenkort-stip { display: inline-block; width: .45rem; height: .45rem; margin-right: .45rem; border-radius: 50%; background: #e7b55a; vertical-align: .05em; }

/* Opdrachten per blok: vakkenkeuze, lijst, archief. Blokvakken bij Instellingen. */
.uitklap { margin-bottom: 1.15rem; background: var(--ax-surface); border: 1px solid var(--ax-border); border-radius: 12px; }
.uitklap > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1rem; padding: 1rem 1.25rem; cursor: pointer; list-style: none; font-weight: 700; }
.uitklap > summary::-webkit-details-marker { display: none; }
.uitklap > summary::before { content: '›'; display: inline-block; width: .8rem; color: var(--ax-text-subtle); transition: transform .15s; }
.uitklap[open] > summary::before { transform: rotate(90deg); }
.uitklap > summary .stil { font-weight: 400; font-size: .8rem; }
.uitklap > :not(summary) { margin: 0 1.25rem 1.25rem; }
.vakkenformulier > p { margin: 0 0 .75rem; font-size: .85rem; }
.vinklijst { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: .35rem 1.25rem; }
.vinklijst label { display: flex; gap: .55rem; align-items: flex-start; font-size: .85rem; line-height: 1.4; cursor: pointer; }
.vinklijst input { margin-top: .2rem; flex: none; }
.opdrachtlijst { list-style: none; margin: 0; padding: 0; }
.opdrachtregel { padding: .8rem 0; border-top: 1px solid var(--ax-border); }
.opdrachtregel:first-child { border-top: 0; padding-top: 0; }
.opdrachtkop { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; }
.opdrachtkop a, .opdrachtkop strong { font-weight: 700; color: var(--ax-text); }
.opdrachtdatums { display: flex; flex-wrap: wrap; gap: .15rem .9rem; margin: .3rem 0 0; font-size: .78rem; color: var(--ax-text-subtle); }
.opdrachtdatums span:first-child { font-family: var(--ax-mono); color: var(--ax-text-muted); }
.opdrachtstatus { padding: .1rem .5rem; font-family: var(--ax-mono); font-size: .65rem; border-radius: 999px; border: 1px solid var(--ax-border-strong); color: var(--ax-text-muted); }
.status-ingeleverd { color: #7ee2a2; border-color: #2f7a4b; background: #10271a; }
.status-nog-niet-ingeleverd { color: #ff8194; border-color: #8b2a3e; background: #2a1219; }
.status-concept, .status-heropend { color: #ffd27a; border-color: #7a5a22; background: #231b0e; }
.archief .opdrachtregel { opacity: .8; }
.blokvakken h3 { margin: 0 0 .4rem; font-size: .95rem; }
.vakkenlijst { list-style: none; margin: .75rem 0 1rem; padding: 0; }
.vakkenlijst li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; padding: .55rem 0; border-top: 1px solid var(--ax-border); }
.vakkenlijst form { margin: 0; }
.vakkenlijst code { margin-left: .35rem; font-size: .75rem; color: var(--ax-text-subtle); }

/* Updates: tijdlijn per dag, stipje in de zijbalk. */
.updatestip { width: .45rem; height: .45rem; margin-left: auto; flex: none; border-radius: 50%; background: #ff637b; box-shadow: 0 0 0 3px #ff637b33; }
.updatelijst { list-style: none; margin: 0; padding: 0; }
.updatedag h2 { margin: 1.75rem 0 .75rem; font-family: var(--ax-mono); font-size: .75rem; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; color: var(--ax-text-subtle); }
.updatedag:first-child h2 { margin-top: 0; }
.updatekaart { margin-bottom: .75rem; }
.updatekop { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.updatekop h3 { margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: -.015em; }
.updatekop form { margin: 0 0 0 auto; }
.updatenieuw { padding: .1rem .5rem; font-family: var(--ax-mono); font-size: .65rem; border-radius: 999px; color: #fff; background: var(--ax-accent); }
.updatekaart ul { margin: .75rem 0 0; padding-left: 1.1rem; display: grid; gap: .4rem; color: var(--ax-text-muted); line-height: 1.6; }
.updatekaart li::marker { color: #ff637b; }
.updateschrijven { margin-bottom: 1.5rem; }

/* ---- Onboarding (/welkom) en laadscherm, met de bestaande tokens ---------- */
.welkomschil { min-height: 100vh; display: flex; flex-direction: column; }
.welkombalk { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .75rem clamp(1rem, 4vw, 2.5rem); border-bottom: 1px solid var(--ax-border); background: var(--ax-surface); }
.welkombalk .logo { height: 2rem; }
.welkombalk-titel { color: var(--ax-text-muted); font-family: var(--ax-mono); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.welkombalk-acties { margin-left: auto; display: flex; gap: .5rem; align-items: center; }
.welkombalk-acties form { margin: 0; }
.welkomhoofd { width: min(100%, 52rem); margin: 0 auto; padding: 2rem clamp(1rem, 4vw, 2rem) 4rem; }
.welkomstap > h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin: 1.5rem 0 .5rem; }
.stapteller { font-family: var(--ax-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--ax-accent); margin: 0 0 .75rem; font-size: .85rem; }
.stappenrij { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; }
.stapje { border-top: 3px solid var(--ax-border); padding-top: .4rem; font-size: .8rem; display: flex; flex-direction: column; min-width: 0; }
.stapje-nummer, .stapje-stand { font-family: var(--ax-mono); color: var(--ax-text-subtle); }
.stapje-titel { overflow-wrap: anywhere; }
.stapje-gedaan { border-top-color: #315b49; }
.stapje-later { border-top-color: #63482c; }
.stapje-nu { border-top-color: var(--ax-accent); }
.stapje-nu .stapje-stand { color: var(--ax-text); }
.welkomkolommen { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.welkomlijst { margin: .5rem 0 0; padding-left: 1.2rem; line-height: 1.6; }
.stapstatus { margin: 1rem 0; }
.stapstatus .status, .welkomstap .status { display: inline-flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; padding: .45rem .7rem; border: 1px solid var(--ax-border); margin: 0; }
.statuswoord { font-family: var(--ax-mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.status-ok { color: #a7dfc3; background: #142b23; border-color: #315b49; }
.status-bezig, .status-let-op { color: #ffd29a; background: #30251c; border-color: #63482c; }
.status-fout { color: var(--ax-text); background: #3a1018; border-color: var(--ax-accent); }
.status-wacht { color: var(--ax-text-muted); }
.stapnav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--ax-border); flex-wrap: wrap; }
.stapnav-wacht { display: inline-flex; gap: .75rem; align-items: center; }
.knop-uit { opacity: .45; cursor: not-allowed; }
.suggesties { list-style: none; padding: 0; margin: .5rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.suggesties form { margin: 0; }
.suggestie { font: inherit; color: var(--ax-text); background: var(--ax-surface); border: 1px solid var(--ax-border); padding: .5rem .75rem; cursor: pointer; min-height: 44px; }
.suggestie:hover { border-color: var(--ax-accent); }
.welkomkoppeling > form { margin-top: .75rem; }
.navopen { margin-left: auto; font-family: var(--ax-mono); font-size: .7rem; text-transform: uppercase; color: #ffd29a; border: 1px solid #63482c; padding: 0 .35rem; }
.nogopen a { color: inherit; }

/* Het laadscherm is gewoon de laatste onboardingstap: dezelfde schil, kaart en
   statuslabels. De breedte van .laadvulling zet laden.js; zonder JS vult een
   klasse per tien procent de balk. */
.laadkaart { display: grid; gap: 1.1rem; }
.laadteller { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.laadprocent { margin: 0; font-size: 2.6rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.laadstatus { margin: 0; color: var(--ax-text-muted); font-size: .95rem; }
.laadbalk { height: 8px; overflow: hidden; background: var(--ax-surface-2); border: 1px solid var(--ax-border); border-radius: 4px; }
.laadvulling { display: block; height: 100%; width: 0; background: var(--ax-accent); }
.laadvulling-10 { width: 10%; } .laadvulling-20 { width: 20%; } .laadvulling-30 { width: 30%; }
.laadvulling-40 { width: 40%; } .laadvulling-50 { width: 50%; } .laadvulling-60 { width: 60%; }
.laadvulling-70 { width: 70%; } .laadvulling-80 { width: 80%; } .laadvulling-90 { width: 90%; }
.laadvulling-100 { width: 100%; }
.is-klaar .laadvulling { background: #5fd08a; }
.laadstappen { list-style: none; margin: 0; padding: 0; display: grid; }
.laadstap { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: .15rem 1rem; align-items: baseline; padding: .7rem 0; border-top: 1px solid var(--ax-border); }
.laadstap:first-child { border-top: 0; }
.laadstap .laadstand { justify-self: start; padding: .15rem .55rem; font-size: .72rem; }
.laadtitel { font-weight: 600; font-size: .9rem; }
.laadregel { grid-column: 2; color: var(--ax-text-muted); font-family: var(--ax-mono); font-size: .75rem; overflow-wrap: anywhere; }
.laadstap.stand-wacht .laadtitel { color: var(--ax-text-muted); }
.laadfout, .laadklaar { display: grid; gap: .75rem; justify-items: start; margin-top: 1.25rem; }
.laadfout .melding, .laadklaar .melding { margin: 0; }
@media (max-width: 640px) {
  .stappenrij { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stapje-titel { font-size: .7rem; }
  .laadstap { grid-template-columns: 1fr; }
  .laadregel { grid-column: 1; }
}

/* De School-Agent-blob: het logo en het gezicht in het gesprek (static/schoolblob.js,
   gebouwd op blobatar). Zwart lijf, rode ogen; een smalle rode rand van licht houdt
   hem zichtbaar op de donkere grond. De hoogte komt van de plek (.woordmerk .logo). */
.sa-blob { display: inline-block; flex: none; height: 2.4rem; aspect-ratio: 1; width: auto; line-height: 0; }
.sa-blob img, .sa-blob svg { width: 100%; height: 100%; display: block; overflow: visible; }
.sa-blob svg { filter: drop-shadow(0 0 .6px rgba(255, 99, 123, .6)) drop-shadow(0 0 10px rgba(227, 41, 69, .22)); }
.sa-blob-levend { cursor: pointer; }
.inlogwoordmerk .sa-blob { height: 2.5rem; }
.sa-blob-groot { display: block; height: 9rem; margin: 0 auto 1.75rem; }
.beurt .antwoordkop { display: flex; align-items: center; gap: .7rem; margin: .35rem 0 .5rem; }
.beurt .antwoordkop .sa-blob { height: 2.75rem; }
.antwoordstatus { font-family: var(--ax-mono); font-size: .72rem; letter-spacing: .08em; color: var(--ax-text-subtle); }
.kaart-wachten { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: center; }
.kaart-wachten .sa-blob { grid-row: span 2; height: 3.25rem; }
.kaart-wachten > p { margin: 0; }