/* merk.css — de merklaag van de app (bouwplan volledige app §3, §4.2 F). Contract voor de registers: webapp/registers/CONTRACT.md.
   Scope: elke regel begint met html.m (elke app-pagina draagt html.m); het bureau op de computer verandert niet.
   Volgorde: tokens · registerhaken (--dir-*, vlakke terugval per register, lichte kop) · toon · grond per archetype · type · componenten.
   De registerhaken staan op specificiteit (0,1,1) (html.m:where(…)), zodat html.reg-<id> in register.css, dat later laadt, altijd wint.
   Kleuren uit plan v2: kobalt #2438D6 (op inkt #8C9BFF), inkt #0B0F17, wit; oranje #8A5A08 / #F2B04A, rood #A3200F / #FF8A7A,
   nooit oranje of rood rechtstreeks op kobalt. Het punt is vierkant (radius ≤ 2 px), nooit rond, nooit een vinkje.
   Beweging: alleen transform, opacity en clip-path; reduced motion = geen overgangen. */

/* Letters, zelf gehost (SIL OFL 1.1; licentie in fonts/OFL-licentie.txt en in elk bestand). Geen Google Fonts in de app.
   Instrument Sans: subset Latijn basis + Latijn-1, beide assen (wdth, wght), 56 KB woff2 in plaats van 194 KB; WOFF 1.0 als terugval.
   JetBrains Mono (cijfers): Regular, Latijn basis + middenpunt en streepjes, 5 KB; alleen voor .m-mono (tijden, datums, nummers).
   De familie heet hier "Vidimus Mono" en niet "JetBrains Mono": oudere stijlen (wallet, bureau) noemen "JetBrains Mono" in hun
   stapel en zouden het bestand anders ook laden, buiten html.m en buiten de cache van de service worker (review W0, 10-10).
   Beide gemaakt met vidimus-redesign/app-v2-bank/maak-fonts.py (deterministisch). */
@font-face {
  font-family: "Instrument Sans";
  src: url("/webapp/fonts/InstrumentSans-sub.woff2") format("woff2"), url("/webapp/fonts/InstrumentSans-sub.woff") format("woff");
  font-weight: 400 700; font-stretch: 75% 100%; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Vidimus Mono";
  src: url("/webapp/fonts/JetBrainsMono-cijfers.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0020-007E, U+00A0, U+00B0, U+00B7, U+00E9, U+00EB, U+2013, U+2019, U+2026, U+2212;
}

/* ── tokens ────────────────────────────────────────────────── */
html.m {
  --m-kobalt: #2438D6;
  --m-kobalt-licht: #8C9BFF;
  --m-inkt: #0B0F17;
  --m-wit: #FFFFFF;
  --m-papier: #F4F3EF;
  --m-licht: #F2F3F6;
  --m-oranje: #8A5A08;
  --m-oranje-licht: #F2B04A;
  --m-rood: #A3200F;
  --m-rood-licht: #FF8A7A;

  --m-f-display: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --m-f-tekst: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
  --m-f-mono: "Vidimus Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* typeschaal 112/76/56/40/28, op smalle schermen mee kleiner (320 px: niets loopt eruit); 28 en alle tekst volgen de tekstmaat */
  --m-t-112: min(112px, 27vw);
  --m-t-76: min(76px, 19vw);
  --m-t-56: min(56px, 14.5vw);
  --m-t-40: min(40px, 10.5vw);
  --m-t-28: calc(28rem / 17);
  --m-r-s: 8px;
  --m-r-m: 14px;
  --m-r-l: 20px;
  --m-d-xs: 120ms;
  --m-d-s: 180ms;
  --m-d-m: 300ms;
  --m-d-l: 450ms;
  --m-d-xl: 900ms;
  --m-ease: cubic-bezier(.16, 1, .3, 1);
  --m-ease-weg: cubic-bezier(.65, 0, .35, 1);
  --m-rand: 16px;                         /* zijmarge op de telefoon */
  --m-tab-hoogte: calc(72px + min(12rem / 17, 15px));   /* groeit mee met het woord onder de tab, tot 15 px */

  /* ── registerhaken (namen uit RICHTINGEN §3: C–F nemen hun tokenblok 1:1 over) ── */
  --dir-grond: #EEF0F3;
  --dir-grond-beeld: none;
  --dir-grond-maat: auto;
  --dir-grond-herhaal: repeat;
  --dir-grond-positie: 0 0;
  --dir-tekst: var(--m-inkt);
  --dir-zacht: rgba(11, 15, 23, .64);
  --dir-lijn: rgba(11, 15, 23, .1);
  --dir-rand: rgba(11, 15, 23, .16);
  --dir-punt: var(--m-kobalt);
  --dir-vlak: var(--m-wit);
  --dir-vlak-schaduw: 0 -10px 30px -18px rgba(11, 15, 23, .35);
  --dir-kaart-schaduw: 0 0 0 1px rgba(11, 15, 23, .06), 0 14px 30px -18px rgba(11, 15, 23, .45);
  --dir-hoek: 20px;
  --dir-knop: var(--m-inkt);
  --dir-knop-tekst: var(--m-wit);
  --dir-held: transparent;
  --dir-held-tekst: var(--dir-tekst);
  --dir-donker-beeld: none;
  --dir-donker-maat: auto;
  --dir-donker-herhaal: no-repeat;
  --dir-donker-positie: 0 0;
}

/* vlakke terugval per register: zonder registerbestand (eerste keer offline) een effen grond in de registerkleur, AA-leesbaar */
html.m:where(.reg-a) { --dir-grond: #2438D6; --dir-tekst: #FFFFFF; --dir-zacht: rgba(255, 255, 255, .82); --dir-lijn: rgba(255, 255, 255, .22); --dir-rand: rgba(255, 255, 255, .5); --dir-punt: #FFFFFF; --dir-knop: #FFFFFF; --dir-knop-tekst: var(--m-inkt); --dir-held-tekst: #FFFFFF; }
html.m:where(.reg-b) { --dir-grond: #F4F3EF; }
html.m:where(.reg-c) { --dir-grond: #B4B9C1; --dir-zacht: rgba(11, 15, 23, .78); --dir-lijn: rgba(11, 15, 23, .16); }
html.m:where(.reg-d) { --dir-grond: #FFFFFF; --dir-vlak: #F4F5F7; }
html.m:where(.reg-e) { --dir-grond: #E9E8F1; }
html.m:where(.reg-f) { --dir-grond: #F3F3F0; }
/* lichte kop (schil 1.0.1, O2): de grond is licht; A houdt kobalt alleen in de held, het punt en de sluiter */
html.m:where([data-kop="licht"]) { --dir-grond: var(--m-licht); --dir-grond-beeld: none; --dir-tekst: var(--m-inkt); --dir-zacht: rgba(11, 15, 23, .64); --dir-lijn: rgba(11, 15, 23, .1); --dir-rand: rgba(11, 15, 23, .16); --dir-punt: var(--m-kobalt); --dir-knop: var(--m-inkt); --dir-knop-tekst: var(--m-wit); --dir-held-tekst: var(--m-inkt); }
html.m:where(.reg-a[data-kop="licht"]) { --dir-held: var(--m-kobalt); --dir-held-tekst: #FFFFFF; --dir-held-punt: #FFFFFF; --dir-held-knop: #FFFFFF; --dir-held-knop-tekst: var(--m-inkt); }

/* ── toon: statuskleuren volgen de grond (gezet door VMERK.zetScherm) ── */
html.m { --c-ok: var(--m-kobalt); --c-wacht: var(--m-oranje); --c-fout: var(--m-rood); --c-neutraal: rgba(11, 15, 23, .45); --c-neutraal-tekst: rgba(11, 15, 23, .66); }
html.m[data-toon="inkt"] { --c-ok: var(--m-kobalt-licht); --c-wacht: var(--m-oranje-licht); --c-fout: var(--m-rood-licht); --c-neutraal: rgba(255, 255, 255, .5); --c-neutraal-tekst: rgba(255, 255, 255, .7);
  /* op inkt beslist het merk de tekst (camera en vastgelegd staan altijd op inkt); een register kleedt alleen met --dir-donker-* */
  --dir-tekst: var(--m-wit); --dir-zacht: rgba(255, 255, 255, .72); --dir-lijn: rgba(255, 255, 255, .14); --dir-rand: rgba(255, 255, 255, .32); --dir-punt: var(--m-kobalt-licht); }
/* op kobalt: wit (oranje en rood nooit rechtstreeks op kobalt); het woord draagt de betekenis, het vel draagt de kleur */
html.m[data-toon="kobalt"] { --c-ok: #FFFFFF; --c-wacht: #FFFFFF; --c-fout: #FFFFFF; --c-neutraal: rgba(255, 255, 255, .7); --c-neutraal-tekst: rgba(255, 255, 255, .86); }
/* vel, blad en talon zijn altijd wit: daarop gelden de lichte statuskleuren en de inktknop, ook op een kobalten of inktgrond */
html.m .m-vel, html.m .m-blad, html.m .m-talon, html.m .m-tn-loopt, html.m .m-veld-fout { --c-ok: var(--m-kobalt); --c-wacht: var(--m-oranje); --c-fout: var(--m-rood); --c-neutraal: rgba(11, 15, 23, .45); --c-neutraal-tekst: rgba(11, 15, 23, .66); color: var(--m-inkt);
  --dir-tekst: var(--m-inkt); --dir-zacht: rgba(11, 15, 23, .64); --dir-lijn: rgba(11, 15, 23, .1); --dir-rand: rgba(11, 15, 23, .2); --dir-knop: var(--m-inkt); --dir-knop-tekst: var(--m-wit); }
html.m:is([data-toon="inkt"], [data-archetype="camera"]) :is(.m-vel, .m-blad, .m-talon) .m-knop[data-soort="primair"] { background: var(--m-inkt); color: var(--m-wit); }

/* ── grond per archetype ──────────────────────────────────── */
html.m, html.m body { margin: 0; min-height: 100%; }
/* Dynamic Type (§7.1.8): rem is de tekstmaat van het toestel. In de iOS-schil en mobiele Safari -apple-system-body (17 px standaard,
   tot 200 % en meer); elders 106,25 % van de browserinstelling (17 px bij 16 px). Elke tekstmaat staat als calc(N rem / 17) = N px bij
   de standaard; de reuzekoppen boven 28 px schalen met de breedte. Niet op macOS: daar is -apple-system-body 13 px. */
html.m { font-size: 106.25%; }
@supports (font: -apple-system-body) and (-webkit-touch-callout: none) {
  html.m { font: -apple-system-body; }
}
html.m body {
  background-color: var(--dir-grond);
  background-image: var(--dir-grond-beeld);
  background-size: var(--dir-grond-maat);
  background-repeat: var(--dir-grond-herhaal);
  background-position: var(--dir-grond-positie);
  color: var(--dir-tekst);
  font-family: var(--m-f-tekst);
  font-size: 1rem;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}
/* camera altijd op inkt; vastgelegd op inkt in de volle kop, in de lichte kop zoals vloer v1 (reg-licht) */
html.m[data-archetype="camera"] body,
html.m[data-archetype="vastgelegd"]:not([data-kop="licht"]) body {
  background-color: var(--m-inkt);
  background-image: var(--dir-donker-beeld);
  background-size: var(--dir-donker-maat);
  background-repeat: var(--dir-donker-herhaal);
  background-position: var(--dir-donker-positie);
  color: var(--m-wit);
}
html.m[data-archetype="vastgelegd"][data-kop="licht"] body { background: var(--m-licht); color: var(--m-inkt); }
html.m[data-archetype="blad"] body { background: var(--dir-vlak); color: var(--m-inkt); }
html.m [hidden] { display: none !important; }

/* ── basis ─────────────────────────────────────────────────── */
html.m *, html.m *::before, html.m *::after { box-sizing: border-box; }
html.m :is(button, a, input, select, textarea) { font: inherit; color: inherit; }
html.m button { background: none; border: 0; padding: 0; cursor: pointer; }
html.m :is(button, a, [tabindex]):focus-visible { outline: 3px solid var(--c-ok); outline-offset: 2px; border-radius: var(--m-r-s); }
html.m .m-mono { font-family: var(--m-f-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
html.m .m-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html.m .m-ico { flex: none; display: inline-block; vertical-align: middle; }
html.m .m-scherm { position: relative; isolation: isolate; min-height: 100vh; min-height: 100dvh; padding: calc(env(safe-area-inset-top) + 12px) var(--m-rand) calc(env(safe-area-inset-bottom) + 24px); }
html.m .m-scherm[data-tab="ja"] { padding-bottom: calc(env(safe-area-inset-bottom) + var(--m-tab-hoogte) + 24px); }
/* decor ligt achter de inhoud (binnen de eigen stapel van het scherm), met .m-decor-boven erboven; nooit klikbaar */
html.m .m-decor { position: absolute; pointer-events: none; z-index: -1; }
html.m .m-decor-boven { z-index: 2; }
html.m [data-bewijs] { filter: none; mask: none; clip-path: none; }

/* ── kop▪ ──────────────────────────────────────────────────── */
html.m .m-kop {
  margin: 0;
  font-family: var(--m-f-display);
  font-weight: 650;
  font-stretch: 80%;
  letter-spacing: -.045em;
  word-spacing: .06em;
  line-height: .94;
  color: inherit;
  overflow-wrap: break-word;
  hyphens: auto;
  max-width: 100%;
}
html.m .m-kop[data-maat="112"] { font-size: var(--m-t-112); line-height: .86; }
html.m .m-kop[data-maat="76"] { font-size: var(--m-t-76); line-height: .88; }
html.m .m-kop[data-maat="56"] { font-size: var(--m-t-56); }
html.m .m-kop[data-maat="40"] { font-size: var(--m-t-40); }
html.m .m-kop[data-maat="28"] { font-size: var(--m-t-28); letter-spacing: -.03em; line-height: 1.05; }
html.m .m-kop-staart { white-space: nowrap; }   /* het punt breekt nooit alleen naar een nieuwe regel */
html.m .m-kp {
  display: inline-block;
  width: .155em;
  height: .155em;
  margin-left: .045em;
  border-radius: max(1.5px, .018em);
  background: var(--m-kp-kleur, var(--dir-punt));
  vertical-align: baseline;
  transform-origin: 50% 60%;
}
html.m .m-kp[data-st="hol"], html.m .m-kp[data-st="loopt"] { background: transparent; box-shadow: inset 0 0 0 max(2px, .028em) var(--m-kp-kleur, var(--dir-punt)); }
html.m .m-kp[data-st="gestippeld"] { background: transparent; outline: max(1.5px, .02em) dashed var(--m-kp-kleur, var(--dir-punt)); outline-offset: calc(-1 * max(1.5px, .02em)); }
html.m .m-kp[data-k="fout"] { --m-kp-kleur: var(--c-fout); }
html.m .m-kp[data-k="wacht"] { --m-kp-kleur: var(--c-wacht); }

/* ── het punt als status: punt + woord ────────────────────── */
html.m .m-status { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-size: calc(13rem / 17); font-weight: 600; line-height: 1.2; color: var(--pk-tekst, var(--pk)); }
html.m [data-k="ok"] { --pk: var(--c-ok); }
html.m [data-k="wacht"] { --pk: var(--c-wacht); }
html.m [data-k="fout"] { --pk: var(--c-fout); }
html.m [data-k="neutraal"] { --pk: var(--c-neutraal); --pk-tekst: var(--c-neutraal-tekst); }
html.m .m-punt {
  position: relative;
  display: inline-block;
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 1.5px;
  background: transparent;
  box-shadow: inset 0 0 0 1.6px var(--pk);
}
html.m [data-st="vol"] > .m-punt { background: var(--pk); }
html.m [data-st="loopt"] > .m-punt { box-shadow: inset 0 0 0 1px var(--pk); }
html.m [data-st="gestippeld"] > .m-punt { box-shadow: none; outline: 1.5px dotted var(--pk); outline-offset: -1.5px; }
/* gesplitst (betwist): twee halve vierkanten met een spleet */
html.m [data-st="gesplitst"] > .m-punt { box-shadow: none; background: linear-gradient(90deg, var(--pk) 0 40%, transparent 40% 60%, var(--pk) 60% 100%); }

/* ── knoppen: één primaire per scherm ─────────────────────── */
html.m .m-knop {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 54px;
  padding: 14px 20px;
  border-radius: var(--m-r-m);
  background: var(--dir-knop);
  color: var(--dir-knop-tekst);
  font-weight: 650;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  transition: transform var(--m-d-xs) var(--m-ease), opacity var(--m-d-xs) ease;
  -webkit-tap-highlight-color: transparent;
}
html.m .m-knop:active { transform: scale(.97); }
html.m .m-knop[disabled], html.m .m-knop[aria-disabled="true"] { opacity: .45; cursor: default; }
html.m .m-knop[data-soort="tweede"] { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px var(--dir-rand); }
html.m .m-knop[data-soort="tekst"] { width: auto; min-height: 44px; padding: 10px 6px; background: transparent; color: inherit; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
html.m .m-knop .m-knop-tekst { position: relative; z-index: 1; }
html.m .m-knop .m-ico { position: relative; z-index: 1; }
/* vasthouden: de vulling loopt van links naar rechts (clip-path), het woord blijft leesbaar */
html.m .m-houd-vul { position: absolute; inset: 0; background: var(--m-kobalt); clip-path: inset(0 100% 0 0); z-index: 0; }
html.m .m-knop[data-houd="klaar"] .m-houd-vul { clip-path: inset(0 0 0 0); }
html.m[data-toon="inkt"] .m-knop[data-soort="primair"], html.m[data-archetype="camera"] .m-knop[data-soort="primair"] { background: var(--m-wit); color: var(--m-inkt); }
html.m[data-toon="inkt"] .m-knop[data-soort="tweede"] { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .4); }
@media (hover: hover) {
  html.m .m-knop:hover { opacity: .9; }
}

/* ── kopbalk: terug links, sleutel rechts ─────────────────── */
html.m .m-balk { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin: 0 -10px 8px; }
html.m :is(.m-sleutel, .m-terug) { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--m-r-m); color: inherit; transition: transform var(--m-d-xs) var(--m-ease); }
html.m :is(.m-sleutel, .m-terug):active { transform: scale(.92); }
html.m .m-sleutel { margin-left: auto; }

/* ── held en vel (lijst) ──────────────────────────────────── */
html.m .m-held { position: relative; padding: 8px 0 24px; color: var(--dir-held-tekst); --m-kp-kleur: var(--dir-held-punt, var(--dir-punt)); }
html.m .m-held .m-knop[data-soort="primair"] { background: var(--dir-held-knop, var(--dir-knop)); color: var(--dir-held-knop-tekst, var(--dir-knop-tekst)); }
html.m:where([data-kop="licht"]) .m-held { background: var(--dir-held); border-radius: var(--m-r-l); padding: 18px 16px 20px; margin: 0 -4px 12px; }
html.m .m-label { margin: 0 0 6px; font-size: calc(13rem / 17); font-weight: 600; color: var(--dir-zacht); }
html.m .m-held .m-label { color: inherit; opacity: .8; }
html.m .m-meta { margin: 10px 0 16px; font-size: calc(15rem / 17); color: inherit; opacity: .86; }
html.m .m-vel { position: relative; margin: 0 calc(-1 * var(--m-rand)); padding: 20px var(--m-rand) 24px; background: var(--dir-vlak); border-radius: var(--dir-hoek) var(--dir-hoek) 0 0; box-shadow: var(--dir-vlak-schaduw); min-height: 40vh; }
/* het vel vult het scherm tot onderaan (proefscherm A, golf 3 F2): het scherm wordt een kolom, het vel neemt de rest (flex 1) en loopt
   door onder de bodemmarge van het scherm (en de tabbalk) tot de rand. Zijn inhoud blijft even ver van de rand als de inhoud van het
   scherm: wat de negatieve marge onderaan wint, komt er als vulling bij. Zo heeft geen register meer een schaduw als noodgreep nodig.
   Zonder :has() (oude browsers) blijft het vel zoals ervoor, hoogstens 40vh hoog. */
html.m .m-scherm:has(> .m-vel) { display: flex; flex-direction: column; }
html.m .m-scherm > .m-vel {
  --m-vel-onder: calc(env(safe-area-inset-bottom) + 24px);
  flex: 1 0 auto;
  margin-bottom: calc(-1 * var(--m-vel-onder));
  padding-bottom: calc(24px + var(--m-vel-onder));
}
html.m .m-scherm[data-tab="ja"] > .m-vel { --m-vel-onder: calc(env(safe-area-inset-bottom) + var(--m-tab-hoogte) + 24px); }
html.m .m-vel h2 { margin: 0 0 4px; font-size: calc(13rem / 17); font-weight: 650; color: rgba(11, 15, 23, .62); }

/* ── rij ───────────────────────────────────────────────────── */
html.m .m-lijst { list-style: none; margin: 0; padding: 0; container-type: inline-size; }
/* de volgorde voor een getrapte beweging (data-i uit merk.js; geen inline stijl) */
html.m .m-rij-li[data-i="1"] { --i: 1; } html.m .m-rij-li[data-i="2"] { --i: 2; } html.m .m-rij-li[data-i="3"] { --i: 3; }
html.m .m-rij-li[data-i="4"] { --i: 4; } html.m .m-rij-li[data-i="5"] { --i: 5; } html.m .m-rij-li[data-i="6"] { --i: 6; }
html.m .m-rij-li[data-i="7"] { --i: 7; } html.m .m-rij-li[data-i="8"] { --i: 8; } html.m .m-rij-li[data-i="9"] { --i: 9; }
html.m .m-rij-li[data-i="10"] { --i: 10; } html.m .m-rij-li[data-i="11"] { --i: 11; } html.m .m-rij-li[data-i="12"] { --i: 12; }
html.m .m-rij-li { --i: 0; }
html.m .m-rij {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 72px;
  padding: 8px 0;
  border-top: 1px solid var(--dir-lijn);
  text-align: left;
  text-decoration: none;
  color: inherit;
  transition: transform var(--m-d-xs) var(--m-ease);
}
html.m .m-vel .m-rij { border-top-color: rgba(11, 15, 23, .09); }
html.m .m-rij:active { transform: scale(.985); }
html.m .m-rij-tijd { font-size: calc(14rem / 17); color: var(--dir-zacht); }
html.m .m-vel .m-rij-tijd, html.m .m-vel .m-rij-wat small { color: rgba(11, 15, 23, .64); }
html.m .m-rij-duim { width: 56px; height: 56px; border-radius: var(--m-r-s); object-fit: cover; }
html.m .m-rij-wat { display: grid; gap: 2px; min-width: 0; }
html.m .m-rij-wat b { font-weight: 650; font-size: calc(16rem / 17); line-height: 1.25; overflow-wrap: anywhere; hyphens: auto; }
html.m .m-rij-wat small { font-size: calc(13rem / 17); color: var(--dir-zacht); overflow-wrap: anywhere; }
html.m .m-rij > .m-status { justify-self: end; align-items: flex-start; max-width: min(36vw, 12em); white-space: normal; text-align: left; text-wrap: balance; }
html.m .m-rij > .m-status > .m-punt { margin-top: calc((1.2em - 9px) / 2); }   /* bij twee regels: het punt naast de eerste */
@supports (container-type: inline-size) {
  /* smaller dan 20 em (320–360 px, of grote tekst): de status onder de naam, de naam houdt de volle breedte */
  @container (max-width: 20em) {
    html.m .m-rij { grid-template-columns: 56px minmax(0, 1fr); row-gap: 4px; }
    html.m .m-rij > .m-status { grid-column: 2; justify-self: start; max-width: none; }
  }
}

/* ── segment ───────────────────────────────────────────────── */
html.m .m-segment { display: flex; gap: 2px; padding: 3px; margin: 0 0 12px; border-radius: var(--m-r-m); background: rgba(11, 15, 23, .06); }
html.m[data-toon="kobalt"] .m-segment:not(.m-vel .m-segment) { background: rgba(255, 255, 255, .14); }
html.m .m-seg-knop { flex: 1; min-height: 44px; padding: 8px 10px; border-radius: 11px; font-size: calc(14rem / 17); font-weight: 600; color: inherit; opacity: .78; transition: transform var(--m-d-xs) var(--m-ease); }
html.m .m-seg-knop[aria-pressed="true"] { opacity: 1; background: var(--m-wit); color: var(--m-inkt); box-shadow: 0 1px 3px rgba(11, 15, 23, .14); }
html.m .m-seg-knop:active { transform: scale(.96); }

/* ── tabbalk: opdrachten · ▪ · bewijzen ────────────────────── */
html.m .m-tabbalk {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr 104px 1fr;
  align-items: start;
  padding: 10px 8px calc(8px + env(safe-area-inset-bottom));
  background: var(--m-wit);
  border-top: 1px solid rgba(11, 15, 23, .07);
  color: rgba(11, 15, 23, .66);
}
html.m .m-tab { display: grid; place-items: center; align-content: center; gap: 4px; min-height: 48px; border-radius: var(--m-r-m); color: inherit; }
/* de tabbalk groeit niet mee boven 15 px (zoals iOS: grote tekst zou de drie tabs over elkaar schuiven) */
html.m .m-tab span { font-size: min(calc(12rem / 17), 15px); font-weight: 600; line-height: 1; white-space: nowrap; }
html.m .m-tab[aria-current="page"] { color: var(--m-inkt); }
html.m .m-tab[aria-current="page"] span { font-weight: 750; }
html.m .m-tab-midden { align-content: start; margin-top: -38px; gap: 6px; }
html.m .m-sluiter {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: var(--m-r-l);
  background: var(--m-kobalt);
  box-shadow: 0 0 0 5px var(--m-wit), 0 14px 26px -8px rgba(36, 56, 214, .6);
  transition: transform var(--m-d-xs) var(--m-ease);
}
html.m .m-sluiter b { width: 22px; height: 22px; border-radius: var(--m-r-s); background: var(--m-wit); }
html.m .m-tab-midden:active .m-sluiter { transform: scale(.94); }

/* ── blad (sheet) ──────────────────────────────────────────── */
html.m .m-blad-achter { position: fixed; inset: 0; z-index: 20; background: rgba(11, 15, 23, .42); }
html.m .m-blad {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 21;
  max-height: 88vh;
  overflow: auto;
  padding: 8px var(--m-rand) calc(env(safe-area-inset-bottom) + 20px);
  background: var(--m-wit);
  border-radius: var(--m-r-l) var(--m-r-l) 0 0;
  box-shadow: 0 -16px 40px -20px rgba(11, 15, 23, .5);
  overscroll-behavior: contain;
}
html.m .m-blad:focus { outline: none; }   /* het blad zelf krijgt de focus bij het openen; de knoppen houden hun focusring */
html.m .m-greep { width: 36px; height: 5px; margin: 0 auto 14px; border-radius: 3px; background: rgba(11, 15, 23, .2); }
html.m .m-blad .m-kop { margin-bottom: 12px; --m-kp-kleur: var(--m-kobalt); }
html.m .m-blad-inhoud { display: grid; gap: 12px; margin-bottom: 18px; color: var(--m-inkt); }
html.m .m-blad-inhoud p { margin: 0; }
/* de bevestigstap naast 'houd vast' (merk/bevestig.js, besluit 14-10): één vraag, de handeling en annuleren */
html.m .m-bevestig-achter { z-index: 90; }                  /* boven de zoeker (#cam 50) en de bladen van de camera (80) */
html.m .m-blad.m-bevestig { z-index: 91; }
html.m .m-bevestig .m-blad-knop { display: grid; gap: 8px; }
html.m .m-bevestig .m-blad-knop .m-knop[data-soort="tekst"] { justify-self: center; }

/* ── talon met QR ──────────────────────────────────────────── */
html.m .m-talon { position: relative; margin: 18px 0 0; border-radius: var(--m-r-m); background: var(--m-wit); color: var(--m-inkt); }
/* de perforatie is de greep om af te scheuren (talon.js): een vlak van 36 px rond de lijn, alleen daar geen scrollen */
html.m .m-talon-perfo { position: relative; height: 0; border-top: 2px dashed rgba(11, 15, 23, .28); margin: 0 14px; touch-action: none; }
html.m .m-talon-perfo::before { content: ""; position: absolute; left: -14px; right: -14px; top: -12px; height: 36px; touch-action: none; }
html.m .m-talon-lijf { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px; }
html.m .m-talon-qr { width: 132px; height: 132px; display: grid; place-items: center; }
html.m .m-talon-qr svg { width: 100%; height: 100%; display: block; }
html.m .m-talon-geen { font-size: calc(13rem / 17); color: rgba(11, 15, 23, .66); text-align: center; }
html.m .m-talon-tekst p { margin: 0; }
html.m .m-talon-nr { font-family: var(--m-f-display); font-weight: 650; font-stretch: 80%; font-size: calc(24rem / 17); letter-spacing: -.02em; }
html.m .m-talon-regel { margin-top: 4px !important; font-size: calc(14rem / 17); color: rgba(11, 15, 23, .7); }

/* ── toen | nu ─────────────────────────────────────────────── */
html.m .m-toennu { display: grid; gap: 16px; }
html.m .m-tn-kop { display: grid; gap: 8px; min-height: 64px; }
html.m .m-tn-zin { margin: 0; font-size: calc(16rem / 17); }
html.m .m-tn-tabel { display: grid; }
html.m .m-tn-hoofd, html.m .m-tn-rij {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr);
  grid-template-areas: "veld veld veld" "toen naad nu" "uitkomst uitkomst uitkomst";
  column-gap: 8px;
  row-gap: 4px;
  padding: 10px 0;
  border-bottom: 1px solid var(--dir-lijn);
}
html.m .m-tn-hoofd { grid-template-areas: "toen naad nu"; padding: 8px 0; font-size: calc(13rem / 17); font-weight: 650; }
html.m .m-tn-hoofd .m-tn-veld, html.m .m-tn-hoofd .m-tn-uitkomst { display: none; }
html.m .m-tn-hoofd small { font-weight: 500; color: var(--dir-zacht); }
html.m .m-tn-veld { grid-area: veld; font-size: calc(12rem / 17); font-weight: 600; color: var(--dir-zacht); }
html.m .m-tn-toen { grid-area: toen; min-width: 0; color: var(--m-tn-toen, var(--m-inkt)); overflow-wrap: anywhere; hyphens: auto; }
html.m .m-tn-nu { grid-area: nu; min-width: 0; color: var(--m-tn-nu, var(--m-kobalt)); overflow-wrap: anywhere; hyphens: auto; }
html.m .m-tn-naad { grid-area: naad; display: grid; align-content: center; gap: 4px; }
html.m .m-tn-naad i { display: block; height: 1.5px; background: var(--dir-rand); }
html.m .m-tn-uitkomst { grid-area: uitkomst; min-height: 18px; }
/* zolang de controle loopt: punt + woord op een wit vel (kobalt haalt AA niet op elke registergrond, studie §8.7: geen uitslag ervoor) */
html.m .m-tn-loopt { justify-self: start; align-self: start; padding: 6px 10px; border-radius: var(--m-r-s); background: var(--m-wit); }
html.m .m-tn-rij[data-wijkt="ja"] .m-tn-nu { color: var(--c-fout); }
/* toen in inkt, nu in kobalt: altijd op een vel (kobalt haalt AA niet op elke registergrond); een register kleedt het vel */
html.m .m-tn-tabel { background: var(--dir-vlak); color: var(--m-inkt); border-radius: var(--m-r-m); padding: 0 12px; border-top: 0; box-shadow: var(--dir-kaart-schaduw);
  --dir-lijn: rgba(11, 15, 23, .1); --dir-zacht: rgba(11, 15, 23, .64); --dir-rand: rgba(11, 15, 23, .2); --c-ok: var(--m-kobalt); --c-wacht: var(--m-oranje); --c-fout: var(--m-rood); --c-neutraal: rgba(11, 15, 23, .45); --c-neutraal-tekst: rgba(11, 15, 23, .66); }
html.m .m-tn-rij:last-child { border-bottom: 0; }

/* ── melding: leeg, toestemming, fout, offline ─────────────── */
html.m .m-melding { display: grid; justify-items: start; gap: 14px; padding: 32px 0 8px; }
html.m .m-melding-beeld { width: 180px; height: 180px; object-fit: contain; }
html.m .m-melding-zin { margin: 0; max-width: 34ch; font-size: 1rem; color: var(--dir-zacht); }
html.m .m-melding .m-knop { margin-top: 12px; }

/* ── skelet (laden; geen eindeloze glans) ─────────────────── */
html.m .m-skelet { display: grid; gap: 12px; padding: 8px 0; }
html.m .m-skelet i { display: block; border-radius: var(--m-r-s); background: currentColor; opacity: .1; }
html.m .m-skelet-kop { height: 56px; width: 72%; }
html.m .m-skelet-rij { height: 64px; }

/* ── benoemde stappen (pijplijn) ──────────────────────────── */
html.m .m-stappen { list-style: none; margin: 0; padding: 0; }
html.m .m-stap { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: baseline; gap: 10px; padding: 11px 0; border-top: 1px solid var(--m-stap-lijn, rgba(11, 15, 23, .1)); }
html.m[data-toon="inkt"] .m-stap { --m-stap-lijn: rgba(255, 255, 255, .14); }
html.m .m-stap .m-punt { transform: translateY(1px); }
html.m .m-stap-tekst { font-size: calc(16rem / 17); }
html.m .m-stap-tekst em { display: block; font-style: normal; font-size: calc(13rem / 17); color: var(--pk-tekst, var(--pk)); }
html.m .m-stap time { font-size: calc(14rem / 17); opacity: .78; }

/* ── offline-strook: niet rood ─────────────────────────────── */
html.m .m-offline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 12px; padding: 10px 14px; border-radius: var(--m-r-m); background: #FFF3DD; color: var(--m-inkt); font-size: calc(14rem / 17); --c-wacht: var(--m-oranje); }
html.m[data-toon="inkt"] .m-offline { background: rgba(242, 176, 74, .14); color: var(--m-wit); --c-wacht: var(--m-oranje-licht); }

/* ── formulier ─────────────────────────────────────────────── */
html.m .m-veld { display: grid; gap: 6px; margin: 0 0 14px; }
html.m .m-veld label { font-size: calc(14rem / 17); font-weight: 600; }
html.m .m-veld input { min-height: 52px; padding: 12px 14px; border: 0; border-radius: var(--m-r-m); background: var(--m-wit); color: var(--m-inkt); box-shadow: inset 0 0 0 1.5px rgba(11, 15, 23, .18); font-size: 1rem; }
html.m .m-veld input:focus-visible { outline: 3px solid var(--m-kobalt); outline-offset: 1px; }
/* de foutzin staat in elk register op een wit vel, met dezelfde maat (rood haalt AA niet op elke registergrond, nooit rood op kobalt) */
html.m .m-veld-fout { justify-self: start; margin: 0; padding: 6px 10px; border-radius: var(--m-r-s); background: var(--m-wit); font-size: calc(14rem / 17); color: var(--m-rood); }

/* ── reduced motion: geen overgangen ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html.m *, html.m *::before, html.m *::after { transition-duration: 0ms !important; scroll-behavior: auto !important; }
}