/* Corpus — opmaak. Maten en kleuren komen van het startscherm van de PoC (sample-studio.html,
   de .home-screen-regels); zie docs/superpowers/specs/2026-09-26-raamwerk-en-projectkaarten-design.md.
   Startpunt, geen contract: afwijken mag, maar dan in de spec. */
:root {
  --kophoogte: 48px;     /* de hoogte van de kop; de pc maakt hem hoger (navkop.css); wat er 48 px van aftrekt rekent met deze maat (review H1) */
  /* De huisstijl (spec 2026-10-06): monochroom, licht, ronde hoeken. Contrast van tekst >= 4,5:1 op --pagina en
     --vlak (core/test_stijl.py rekent het na). */
  --pagina: #ffffff;      /* de achtergrond van het werkvlak, kaarten, knoppen */
  --vlak: #f5f5f4;        /* zijbalk, panelen, icoonvierkantjes */
  --vlak-2: #ebebe9;      /* pilletjes, lege iconen, lichte balken */
  --rand: #e6e6e4;        /* kaarten, tracker, scheidslijnen */
  --lijn: #dadad8;        /* een lijn binnen een paneel: de kop, de regels van een lijst */
  --tekst: #1d1f21;
  --zacht: #6b6f74;       /* bijtekst, ook op --vlak */
  --donker: #2a2c2e;      /* donkere knop, gedaan, akkoord, huidige stap, balken */
  --actief: #e8e8e6;      /* de actieve ingang in de zijbalk */
  --let: #7f5f30;         /* aanpassing nodig, let op */
  --let-vlak: #f6f2ec;
  --laat: #9a3b33;        /* te laat, fout */
  --laat-vlak: #f5e9e7;
  --goed: #2f6b45;        /* ✓ het klopt (de stand van een printer, mockup printers-zonder-bed-leeg, 16 okt 2026) */
  --goed-vlak: #eaf3ed;
  --stip-goed: #6f9a80;   /* het stipje bij een oordeel: haalbaar (Requests, mockup requests-v2) */
  --stip-zand: #c4ac78;   /* haalbaar met aanpassingen */
  --stip-grijs: #b6b9be;  /* niet haalbaar */
  --vlak-3: #e4e4e2;      /* pilletje als je erop staat */
  --donker-hover: #1f2123; /* een donkere knop als je erop staat */
  --grijsvlak: #e7e8ea;   /* het vlak achter een render: de kleur van core/render/schrijf.py (ACHTERGROND) */
  --radius: 3px;          /* invoervelden en de pagina's die nog niet op het sjabloon staan (D4) */
  --hoek: 10px;           /* panelen en kaarten */
  --hoek-knop: 6px;       /* knoppen */
  --letter: "Gotham", "Helvetica Neue", Arial, sans-serif;
  /* De maten van het schermsjabloon (spec 2026-09-29, D1). */
  --sj-knop: 38px;        /* hoogte van een knop en een tabblad */
  --sj-vak: 200px;        /* één rij in het raster; groot is twee rijen */
  --sj-ruimte: 16px;      /* tussen de vakken */
  --sj-kop: 11px;         /* kleine koppen in hoofdletters */
}
/* Een schuifbalk die erbij komt of weggaat (een paneel dat openklapt, een lange lijst) schuift de pagina niet opzij
   (31 okt 2026): de ruimte voor de schuifbalk van het venster staat altijd klaar. Alleen bij een gewone schuifbalk (Windows,
   de Corpus-app); een schuifbalk die over de pagina ligt (telefoon, macOS) neemt geen ruimte, dan doet dit niets. Niet op
   de telefoonweergave (html.tel): daar geen lege strook rechts in een smal venster. */
html { scrollbar-gutter: stable; }
html.tel { scrollbar-gutter: auto; }
/* Chinees (zh-hans, 27 okt 2026): Gotham heeft geen Chinese tekens. Gotham blijft voorop, zodat Latijnse letters,
   codes en cijfers Gotham houden; voor elk Chinees teken valt de browser terug op een systeemletter met Chinese tekens
   (macOS/iOS PingFang SC of Hiragino Sans GB, Windows Microsoft YaHei, Android/Linux Noto Sans CJK SC of Noto Sans SC).
   Niets te downloaden. De regelhoogte blijft 1.5; Chinees heeft geen cursief (dan schuin nagemaakt) en geen
   hoofdletters, dus `text-transform` doet er niets. */
html[lang^="zh"] {
  --letter: "Gotham", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC",
    "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
/* De letter (spec 2026-10-06): Gotham van Hans Boodt, uit static/fonts/gotham/ (templates/base.html laadt
   fonts/gotham/gotham.css vóór dit bestand); laadt hij niet, dan de terugval in --letter. Getallen even breed. */
body {
  font: 14px/1.5 var(--letter); font-variant-numeric: tabular-nums; color: var(--tekst); background: var(--pagina);
  overflow-wrap: break-word;
}
/* Tekst past in zijn vak, en een kort label valt nooit letter voor letter onder elkaar (21 okt 2026, de opmaakwacht).
   Op de hele pagina `break-word` (hierboven op body): een woord breekt alleen af als het anders uit zijn regel loopt, en
   het telt niet mee in de min-content - een flex- of rasterkolom met "bed 1" of "Tough PLA" blijft zo breed als zijn
   langste woord. `anywhere` alleen met de klasse .breek, voor bestandsnamen en codes zonder spaties
   (B-00017_corpus_1mm_TPLA_1307gr_10h54m.gcode): die mogen smaller worden dan hun langste woord en breken waar het
   moet. Tot 21 okt stond `anywhere` op elk vak (widget, kaart, tegel, regel): dan mocht elk kind van een flex-rij tot
   een paar pixels krimpen, en dat gaf steeds opnieuw labels letter voor letter (docs/techniek/telefoon-en-app.md,
   *Tekst die afbreekt*; scripts/opmaakwacht.js zoekt ze). */
.breek { min-width: 0; overflow-wrap: anywhere; }
a { color: var(--tekst); }

/* --- Het raamwerk: zijbalk links over de hele hoogte, kop erboven, pagina ernaast --- */
body.app {
  display: grid; grid-template-columns: 220px minmax(0, 1fr); grid-template-rows: var(--kophoogte, 48px) 1fr;
  min-height: 100vh; min-height: 100dvh;
}
/* De zijbalk (spec 2026-10-06, *Zijbalk*; templates/core/_zijbalk.html): een licht vlak zonder rand, het logo, de
   ingangen met een icoon, een lijn voor Dashboards / Printstandaard / Beheer, onderaan wie je bent en Uitloggen. */
.zijbalk {
  grid-row: 1 / -1; background: var(--vlak); padding: 24px 12px 18px; display: flex; flex-direction: column;
  /* Blijft staan terwijl de pagina scrolt: Beheer en Uitloggen mogen niet onder de vouw zakken
     op lange itempagina's. Past de zijbalk zelf niet op een laag venster, dan scrolt hij los. */
  position: sticky; top: 0; align-self: start; height: 100vh; height: 100dvh; overflow-y: auto;
}
/* Op de pc vast aan het venster (Valentijn, 16 okt 2026: "de linker grijze balk gaat mee bij het scrollen"): sticky
   blijft alleen staan binnen de hoogte van body, en op een scherm waar iets buiten de pagina uitsteekt (de stap
   3D-model) is er meer te scrollen dan body hoog is - dan schoof hij mee. Vast staat hij altijd; de rest van de
   pagina blijft in de tweede kolom van het raster. Niet op de telefoon (html.tel: telefoon.css) en niet onder 900 px
   (hieronder: een rij knoppen bovenaan). */
@media (min-width: 901px) {
  html:not(.tel) body.app > .zijbalk { position: fixed; top: 0; left: 0; bottom: 0; width: 220px; height: auto; align-self: stretch; z-index: 3; }
  html:not(.tel) body.app > :not(.zijbalk) { grid-column: 2; }
}
.zijbalk .woordmerk { padding: 0 10px; margin: 0 0 30px; }
.hoofdnav a, .zijbalk-beheer a {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 3px; font-size: 13px;
  color: #4b4f54; text-decoration: none; border-radius: 8px;
}
.hoofdnav a:hover, .zijbalk-beheer a:hover { background: var(--actief); color: var(--tekst); }
.hoofdnav a[aria-current="page"], .zijbalk-beheer a[aria-current="page"] {
  background: var(--actief); color: var(--tekst); font-weight: 500;
}
.zijbalk-beheer { margin-top: 11px; padding-top: 14px; border-top: 1px solid var(--rand); }
.zijbalk-onder { margin-top: auto; padding: 16px 12px 0; }
.zijbalk-onder .wie { margin: 0 0 4px; font-size: 11px; line-height: 1.6; color: var(--zacht); }
.zijbalk-onder .wie strong { display: block; font-size: 12px; font-weight: 500; color: var(--tekst); }
.zijbalk-onder .wie span { display: block; }
.zijbalk-onder form { margin: 0; }
.zijbalk-onder button.link { font-size: 12px; color: var(--zacht); }
/* Drie talen sinds het Chinees (27 okt 2026): een naam breekt nooit midden in (简体中文 viel anders als 简体 / 中文 onder
   elkaar); past de rij niet, dan gaat de hele naam naar de volgende regel. */
.zijbalk-onder .taalkeuze { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin-bottom: 4px; font-size: 12px; color: var(--zacht); }
.zijbalk-onder .taalkeuze button { white-space: nowrap; }
.zijbalk-onder .taalkeuze button[aria-current] { color: var(--tekst); font-weight: 500; }
/* De kop boven de pagina: alleen de merkregel, klein rechts, zonder lijn. */
.topbar { display: flex; align-items: center; justify-content: flex-end; padding: 0 30px; background: var(--pagina); }
.topbar-merk {
  margin: 0; text-align: right; font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--zacht); line-height: 1.4;
}
.topbar-merk span { display: block; letter-spacing: 0; text-transform: none; }
.page { padding: 30px 30px 40px; max-width: 1100px; width: 100%; }
.page.breed { max-width: none; }

/* --- Koppen, vlakken, tabellen, knoppen --- */
h1 { font-size: 48px; font-weight: 300; letter-spacing: -1.7px; line-height: 1.05; margin: 0 0 12px; }
h2 { font-size: 19px; font-weight: 500; margin: 0 0 12px; }
/* Gotham heeft geen 600 (keuze van Valentijn, 6 oktober): vet in tekst is Medium (500), nooit Bold - de standaard van de
   browser voor deze elementen is 700. Bold alleen voor het vette deel van een paneelkop. */
b, strong, th, h3, h4 { font-weight: 500; }
h3 { font-size: 15px; margin: 0 0 8px; }
.panel { background: var(--pagina); border: 1px solid var(--rand); border-radius: var(--radius); padding: 22px; margin-bottom: 20px; }
.panel h1 { font-size: 28px; letter-spacing: -.8px; margin: 0 0 16px; }
.panel h2 { margin: 20px 0 10px; }
.panel h2:first-child { margin-top: 0; }
.tabelwrap { overflow-x: auto; }
.tabel { border-collapse: collapse; width: 100%; text-align: left; }
.tabel th { font-size: 12px; font-weight: 400; color: #525a65; background: var(--vlak); }
.tabel td, .tabel th { padding: 12px 10px; border-bottom: 1px solid var(--rand); vertical-align: top; }
.tabel a { font-weight: 500; text-decoration: none; }
.tabel a:hover { text-decoration: underline; }
.tabel .muted { font-size: 12px; }
/* De knoppen (spec 2026-10-06, *Knoppen*): 38 px hoog, 11 px hoofdletters, wijd gespatieerd. Licht (.knop) of donker
   (.knop.primair, .knop-donker en de gewone submitknop); klein voor in een paneel. */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--sj-knop);
  padding: 0 18px; border: 1px solid var(--rand); border-radius: var(--hoek-knop); background: var(--pagina);
  color: var(--tekst); font: inherit; font-size: 11px; font-weight: 500; letter-spacing: .14em; line-height: 1.2;
  text-transform: uppercase; text-decoration: none; cursor: pointer;
}
.knop:hover { border-color: var(--donker); }
.knop[hidden] { display: none; }
.knop.primair, .knop-donker { background: var(--donker); color: #fff; border-color: var(--donker); }
.knop.primair:hover, .knop-donker:hover { background: #1f2123; }
.knop.klein { min-height: 30px; padding: 0 12px; font-size: 10px; }
button.link { background: none; border: 0; padding: 0; color: var(--tekst); font: inherit; cursor: pointer; text-decoration: underline; }
button[type=submit]:not(.link) {
  margin-top: 1.25rem; width: 100%; min-height: var(--sj-knop); padding: .75rem; font: inherit; font-size: 11px;
  font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: var(--donker); border: 0;
  border-radius: var(--hoek-knop); cursor: pointer;
}
label { display: block; margin: .75rem 0 .25rem; font-size: 12px; color: var(--zacht); }
/* De codevakjes hebben hun eigen maat, binnenruimte en hoeken in het inlogblok. */
input[type=email], input[type=password], input[type=text]:not(.code-vak), select {
  width: 100%; padding: .65rem .75rem; font: inherit; border: 1px solid var(--rand); border-radius: var(--radius); background: var(--pagina);
}
/* De bestandskiezer in de stijl van .knop: het knopje wit met rand, de bestandsnaam ernaast klein en zacht. */
input[type=file] { width: 100%; padding: .6rem 0; font: inherit; font-size: 13px; color: var(--zacht); }
input[type=file]::file-selector-button {
  height: var(--sj-knop); margin: 0 12px 0 0; padding: 0 18px; border: 1px solid var(--rand);
  border-radius: var(--hoek-knop); background: var(--pagina); color: var(--tekst); font: inherit; font-size: 11px;
  font-weight: 500; letter-spacing: .14em; line-height: 1.2; text-transform: uppercase; cursor: pointer;
}
input[type=file]::file-selector-button:hover { border-color: var(--donker); }
.error, .fout { color: var(--laat); }
.muted { color: var(--zacht); }
.leeg { color: var(--zacht); }
code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .95em; background: var(--vlak); padding: .1rem .35rem; border-radius: var(--radius); }
/* minmax(0, 1fr): een lange waarde (een bestandsnaam) breekt af in plaats van de kolom breder te maken dan het vak. */
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .35rem 1rem; margin: 0 0 1rem; }
.facts dt { color: var(--zacht); }
.facts dd { margin: 0; }
/* Elke rij van een .facts in een eigen <div class="feit"> (spec 2026-10-21, D2): op de pc doet die niet mee - dt en dd
   blijven de cellen van het raster -, op de telefoon is het de rij (telefoon.css). */
.facts > .feit { display: contents; }
.messages { list-style: none; padding: 0; margin: 0 0 1rem; }
.messages li { padding: .6rem .8rem; border-radius: var(--radius); background: var(--vlak); border: 1px solid var(--rand); }
.messages li + li { margin-top: .5rem; }
.messages li.error { background: var(--laat-vlak); color: var(--laat); }
/* Een waarschuwing in het brons van "let op" (spec 2026-10-06). */
.waarschuwing { padding: 10px 14px; border-radius: var(--hoek); background: var(--let-vlak); color: var(--let); margin: 0 0 20px; }
.waarschuwing button.link { color: var(--let); }
/* In het rood: de nachtelijke back-up is niet in orde (Overzicht en Beheer › Back-up, spec 2026-10-09). */
.waarschuwing.rood { background: var(--laat-vlak); color: var(--laat); }
.waarschuwing.rood ul { margin: 4px 0; padding-left: 18px; }
.waarschuwing.rood a { color: var(--laat); font-weight: 500; }
.inline-form { margin: 0; }
.kruimels { margin: 0 0 16px; font-size: 12px; color: var(--zacht); }
.kruimels a { color: var(--zacht); }
/* Het terugpijltje (spec 2026-10-12, ronde 4 aanpassingen, § 7; core/templatetags/terug.py, static/js/terug.js): een
   rond pijltje van 36 px vóór de kruimels, op de telefoon 44 px en daar alleen de laatste twee kruimels. Volgt de titel
   direct, of staat het in een kop (.zone-object, .schermkop-tekst), dan staat het links van kruimels én titel, die
   inspringen (in een kop de hele kop). */
.kruimelrij { display: flex; align-items: center; gap: 12px; min-width: 0; margin: 0 0 16px; }
.page > .kruimelrij { position: relative; }
:is(.zone-object, .schermkop-tekst):has(> .kruimelrij.met-terug) { position: relative; padding-left: 48px; }
:is(.zone-object, .schermkop-tekst) > .kruimelrij.met-terug .terug { position: absolute; left: 0; top: 8px; }
.kruimelrij .kruimels { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.schermkop .kruimelrij { margin: 0 0 8px; }
.kruimel-scheiding { margin: 0 .45em; }
.terug {
  flex: none; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 36px;
  height: 36px; border: 1px solid var(--rand); border-radius: 50%; background: var(--pagina); color: var(--tekst);
  text-decoration: none; transition: background-color .15s, transform .15s;
}
.terug:hover { background: var(--vlak); transform: translateX(-2px); }
.terug:focus-visible { outline: 2px solid var(--donker); outline-offset: 2px; }
.terug .icoon { width: 18px; height: 18px; }
.page > .kruimelrij.met-terug:has(+ :is(h1, .titel, .ft-kopregel)) { padding-left: 48px; }
.page > .kruimelrij.met-terug:has(+ :is(h1, .titel, .ft-kopregel)) .terug { position: absolute; left: 0; top: 8px; }
.page > .kruimelrij.met-terug + :is(h1, .titel, .ft-kopregel) { margin-left: 48px; }
@media (prefers-reduced-motion: reduce) {
  .terug { transition: none; }
  .terug:hover { transform: none; }
}
@media (max-width: 550px) {
  .terug { width: 44px; height: 44px; }
  :is(.zone-object, .schermkop-tekst):has(> .kruimelrij.met-terug),
  .page > .kruimelrij.met-terug:has(+ :is(h1, .titel, .ft-kopregel)) { padding-left: 54px; }
  .page > .kruimelrij.met-terug + :is(h1, .titel, .ft-kopregel) { margin-left: 54px; }
  .kruimels > :nth-last-child(n+4) { display: none; }
  .kruimels > .kruimel-deel:nth-last-child(3):not(:first-child)::before { content: "… › "; }
}
.lijst, .bestanden { list-style: none; margin: 0; padding: 0; }
.lijst li, .bestanden li { padding: .55rem 0; border-bottom: 1px solid var(--rand); }
.lijst li:last-child, .bestanden li:last-child { border-bottom: 0; }
.lijst a, .bestanden a { font-weight: 500; text-decoration: none; }
.lijst a:hover, .bestanden a:hover { text-decoration: underline; }
.meta { display: block; font-size: 12px; color: var(--zacht); }
.stap h2 { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 13px; }
.zoekbalk { display: flex; gap: .5rem; margin-bottom: 1rem; }
.zoekbalk input { flex: 1; padding: .6rem .75rem; font: inherit; border: 1px solid var(--rand); border-radius: var(--radius); }
/* De zoekknop is een gewone submitknop (kleur, lettertype, hoeken komen van button[type=submit]:not(.link)).
   Die regel (0,2,1) wint van een kale .zoekbalk button (0,1,1); deze heeft dezelfde specificiteit en
   staat later, dus alleen hier zet je breedte, marge en binnenruimte terug. */
.zoekbalk button[type=submit] { width: auto; margin-top: 0; padding: .6rem 1.1rem; }

/* --- Projecten: kop, filters en kaarten --- */
.paginakop { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 26px; }
.paginakop h1 { margin: 0 0 4px; }
.ondertitel { margin: 0; font-size: 16px; color: var(--zacht); }
.paginakop .zoekbalk { flex: 1 1 320px; max-width: 560px; margin: 6px 0 0; }
.filters { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.filters a { background: var(--vlak-2); color: inherit; text-decoration: none; border-radius: var(--radius); font-size: 12px; padding: 10px 20px; }
.filters a.actief { background: var(--donker); color: #fff; }
/* Projecten strak (mockup projecten-strak, optie d, 8 nov 2026): een grote ronde zoekbalk midden bovenaan, de filters als
   ronde pilletjes met aantallen en + Nieuw ▾ rond en donker. De kaarten zelf blijven zoals ze waren. */
.paginakop .zoekbalk.pz-zoek {
  position: relative; display: block; flex: 1 1 360px; max-width: 820px; margin: 0 auto; align-self: center;
}
.pz-zoek .pz-icoon { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); color: var(--zacht); display: flex; pointer-events: none; }
.pz-zoek .pz-icoon .icoon { width: 20px; height: 20px; }
.pz-zoek input {
  width: 100%; height: 56px; padding: 0 24px 0 56px; font-size: 17px; border: 1px solid var(--rand); border-radius: 999px;
  background: var(--pagina, #fff); box-sizing: border-box;
}
.pz-zoek input:focus { border-color: var(--donker); outline: 0; }
.pz-zoek input:focus-visible { outline: 2px solid var(--donker); outline-offset: 2px; }

/* De filters als pilletjes: de gekozen donker, de rest licht. */
.filters.filters-rij { gap: 10px; margin: 8px 0 26px; }
.filters-rij a { border-radius: 999px; font-size: 14px; padding: 11px 22px; }
.filters-rij a:hover:not(.actief) { background: var(--vlak-3); }
.filters-rij .fr-n { color: var(--zacht); }                         /* het aantal zacht, op de gekozen pil wit 65 % */
.filters-rij a.actief .fr-n { color: rgba(255, 255, 255, .65); }
.pz-heel { margin: 18px 0 0; font-size: 14px; }
.pz-heel a { color: var(--zacht); }
.pz-heel a:hover { color: var(--tekst); }

/* + Nieuw ▾ rond en donker, zo groot als in de mockup en op de hoogte van de zoekbalk (alleen op Projecten en Requests). */
.paginakop .rq-nieuw { align-self: center; }
.rq-nieuw > .nw-knop { border-radius: 999px; min-height: 50px; padding: 0 26px; letter-spacing: .12em; text-transform: uppercase; }
.rq-nieuw > .nw-knop.knop-donker:hover { background: var(--donker-hover); }

@media (max-width: 760px) {
  .paginakop .zoekbalk.pz-zoek { flex-basis: 100%; max-width: none; }
  .pz-zoek input { height: 48px; font-size: 16px; }
}
.kaarten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
/* Op een brede pagina (projecten, een project, collecties) zoveel kaarten als er passen; :where houdt de specificiteit
   gelijk aan .kaarten, zodat een eigen raster (.fbk-kaarten) en de smalle schermen hieronder blijven winnen. */
:where(.page.breed) .kaarten { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.kaart { border: 1px solid var(--rand); border-radius: var(--radius); padding: 5px; background: var(--pagina); min-width: 0; }
.kaart:hover { border-color: #aeb5bd; box-shadow: 0 3px 12px #1d26300a; }
.kaart-open { display: block; color: inherit; text-decoration: none; }
.kaart-vlak {
  position: relative; height: 215px; background: var(--grijsvlak); border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
}
.kaart-codes { display: flex; flex-wrap: wrap; justify-content: center; overflow: hidden; padding: 0 12px; gap: 18px; font-size: 18px; letter-spacing: 1px; color: #8a919c; }
.kaart-soort { position: absolute; top: 12px; left: 12px; background: #f8f9fae6; border-radius: 20px; padding: 7px 13px; font-size: 11px; color: #59616c; }
.kaart-pijl { position: absolute; top: 14px; right: 12px; color: #343a43; line-height: 0; }
.kaart-pijl .icoon { width: 16px; height: 16px; }   /* spec 2026-10-12, § 12: een dun SVG-pijltje, geen emoji */
.kaart-tekst { padding: 12px 6px 8px; }
.kaart-tekst h2 { font-size: 17px; font-weight: 500; margin: 0 0 4px; overflow-wrap: anywhere; }
.kaart-tekst h2 .muted { font-weight: 400; }
.kaart-sub { font-size: 12px; color: var(--zacht); margin: 0 0 12px; line-height: 1.5; }
.kaart-lead { font-size: 12px; color: var(--zacht); margin: -6px 0 12px; }
.kaart-landt { margin: 8px 0 0; font-size: 11px; color: var(--tekst); }      /* ronde 7: "opent op jouw stap: …" (core/landen.py) */
.kaart dl { border-top: 1px solid #eceef1; padding-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 10px; font-size: 11px; margin: 0; }
.kaart dt { color: #7e8590; }
.kaart dd { margin: 0; overflow-wrap: anywhere; }
.kaart-voortgang { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.voortgang { flex: 1; height: 6px; border-radius: 6px; overflow: hidden; background: #e8eaed; }
.voortgang span { display: block; height: 100%; background: #383e43; border-radius: 6px; }
.kaart-voortgang small { font-size: 12px; white-space: nowrap; color: var(--zacht); }
.bladeren { display: flex; gap: 16px; justify-content: center; margin-top: 24px; color: var(--zacht); }
/* Ronde 7: de projectkaart met de renders van zijn poses (core/kaartposes.py, templates/core/_kaartposes.html). De kaart
   rekent op zijn eigen breedte (container queries). Het kaartbeeld is bijgesneden tot de breedte van het figuur, over de
   volle hoogte (core/render/schrijf.kaart): in het grijze vlak krijgen alle poses dezelfde hoogte, dus dezelfde schaal,
   en staan ze naast elkaar zonder overlap; wat niet meer in de breedte past loopt naar een tweede regel, die buiten het
   vlak valt. Daaronder de witte onderbalk met het soort (of de fabrieken, of de pil van het portaal), rood n nieuw, het
   aantal poses en het pijltje - niets ligt over de renders. Klein (< 260 px) een lager vlak, de naam, te laat in rood en
   het voortgangsstreepje; vanaf 260 px het vlak van 215 px en de gegevens. */
.kp { container-type: inline-size; }
.kaart-vlak.kp-vlak { height: auto; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px 2px 0 0; }
.kp-rij {
  position: absolute; inset: 8px 6px 0; display: flex; flex-wrap: wrap; justify-content: space-evenly; align-items: flex-end;
  align-content: flex-start; gap: 0 6px; overflow: hidden;
}
.kaart-vlak .kp-rij img {
  position: static; inset: auto; flex: none; width: auto; max-width: 100%; height: 100%; object-fit: contain;
}   /* max-width: een liggende pose, bijgesneden en in zijn breedste aanzicht, is breder dan hoog: nooit breder dan de rij */
.kp-balk {
  display: flex; align-items: center; gap: 6px; min-height: 26px; margin: 0; padding: 4px 6px;
  border: 1px solid #eceef1; border-top: 0; border-radius: 0 0 2px 2px; font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--zacht);
}
.kp-balk b { font-weight: 500; color: var(--tekst); }
.kp-links { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; margin-right: auto; }
.kp-pil, .kp-nieuw, .kp-balk .fbk-chip {
  padding: 1px 8px; border-radius: 999px; font-size: 11px; letter-spacing: 0; text-transform: none; white-space: nowrap;
}
.kp-pil, .kp-balk .fbk-chip { background: var(--vlak-2); color: var(--tekst); }
.kp-nieuw { background: var(--laat); color: var(--pagina); }
.kp-aantal { white-space: nowrap; }
.kp-pijl { display: none; color: #343a43; line-height: 0; }
.kp-pijl .icoon { width: 14px; height: 14px; }
.kp-laat { margin: 0 0 4px; font-size: 12px; color: var(--laat); }
/* Spec 2026-10-20 (deel 1, mockup B): intern de klant als titel, daaronder het projectnummer (bij productie het
   ordernummer) met de projectnaam; zonder projectnummer een rustige bronzen regel. De P-code klein en grijs rechts in de
   balk. */
.kp-nummer { margin: 0 0 4px; font-size: 13px; color: var(--tekst); overflow-wrap: anywhere; }
.kp-nummer .muted { color: var(--zacht); }
.kp-nummer.kp-zonder { color: var(--let); font-size: 12px; }
.kp-code { white-space: nowrap; letter-spacing: .06em; color: #9aa0a8; margin-left: 4px; }
/* Poses op de kaart kiezen (ronde 7; _kies_balk.html, _kies_rond.html, static/js/kaart_kiezen.js): een bronzen balk
   met Alles wissen en Klaar, en op elke pose rechtsboven een rondje - gekozen donker met het nummer. Zonder JavaScript
   staat naast het rondje een nummerveld (.kz-getal); het script verbergt dat (.kz-js). */
.kz-start { margin: 0 0 12px; }
.kz-balk {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px;
  padding: 10px 14px; border-radius: var(--hoek); background: var(--let-vlak); color: var(--tekst);
}
.kz-tekst { margin: 0; font-size: 13px; }
.kz-tekst b { color: var(--let); font-weight: 500; }
.kz-aantal { white-space: nowrap; }
.kz-nr { line-height: 1; }
.kz-knoppen { display: flex; flex-wrap: wrap; gap: 8px; }
.kz-knoppen .knop, .kz-knoppen button[type=submit].knop { width: auto; margin: 0; }
.kz-knoppen button.knop:not(.knop-donker) { border: 1px solid var(--rand); background: var(--pagina); color: var(--tekst); }
.kz-stand .kaart-pijl { display: none; }
.kz-pose { position: absolute; z-index: 3; top: 10px; right: 10px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.kz-rond {
  display: grid; place-items: center; width: 30px; height: 30px; margin: 0; border: 1px solid var(--rand); border-radius: 50%;
  background: var(--pagina); cursor: pointer; font-size: 13px; font-weight: 500;
}
.kz-rond:has(input:checked) { border-color: var(--donker); background: var(--donker); color: var(--pagina); }
.kz-rond:has(input:focus-visible) { outline: 2px solid var(--donker); outline-offset: 2px; }
.kz-getal { width: 56px; padding: 2px 6px; font-size: 12px; }
.kz-js .kz-getal { display: none; }
.kz-geen { padding: 1px 8px; border-radius: 999px; background: var(--pagina); font-size: 11px; color: var(--zacht); }
.kp .kaart-sub, .kp .kaart-lead, .kp dl, .kp .kaart-voortgang small, .kp .kaart-ronde { display: none; }
.kp .kaart-tekst { padding: 8px 4px 4px; }
.kp .kaart-tekst h2 { font-size: 14px; }
.kp .kaart-voortgang { margin-top: 6px; }
.kp .voortgang { height: 3px; }
@container (min-width: 260px) {
  .kaart-vlak.kp-vlak { height: 215px; aspect-ratio: auto; }
  .kp-rij { inset: 26px 10px 0; gap: 0 10px; }
  .kp-balk { padding: 7px 10px; font-size: 10px; }
  .kp-pijl { display: inline-block; margin-left: 4px; }
  .kp .kaart-sub, .kp .kaart-lead, .kp .kaart-ronde { display: block; }
  .kp dl { display: grid; }
  .kp .kaart-voortgang small { display: inline; }
  .kp .kaart-tekst { padding: 12px 6px 8px; }
  .kp .kaart-tekst h2 { font-size: 17px; }
  .kp .kaart-voortgang { margin-top: 18px; }
  .kp .voortgang { height: 6px; }
}
/* Spec 2026-10-27 (B1, mockup projectkaart-signalen-stip; core/signalen.py, _signalen.html, static/js/signalen.js): het
   bolletje met de signalen rechts naast de naam. Het staat tussen de twee links van de kaart (.sg, hoogte 0), op de
   hoogte van de eerste regel van de naam; de naam houdt er ruimte voor vrij. Rood als er iets te laat is, anders brons.
   Open (.sg-open) schuiven de kleine bolletjes naar links uit, óver de naam: niets op de kaart verschuift. Een kaartje
   (.sg-tip) hangt eronder; de kaart met een open bolletje ligt boven zijn buren. */
.kaart:has(> .sg) { position: relative; }
.kaart:has(> .sg-open) { z-index: 5; }
.sg.sg-open { z-index: 6; }                    /* ook buiten een kaart (Running, de line-up): niet onder de bolletjes van latere rijen */
.kaart:has(> .sg) .kaart-tekst > :is(h2, h3):first-child { padding-right: 28px; }
.sg { position: relative; z-index: 2; height: 0; }
.sg-bol {
  display: inline-grid; place-items: center; width: 22px; height: 22px; margin: 0; padding: 0; border: 0;
  border-radius: 50%; background: var(--let); color: var(--pagina); font: 12px/1 var(--letter); font-weight: 500; cursor: pointer;
  box-shadow: 0 1px 3px #0003;
}
.sg-bol:focus-visible { outline: 2px solid var(--donker); outline-offset: 2px; }
.sg-bol svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sg-hoofd { position: absolute; top: 8px; right: 4px; z-index: 2; }
.sg-rood .sg-hoofd, .sg-bol.sg-laat { background: var(--laat); }
.sg-bol.sg-vraag { background: #3f6c8f; }
.sg-bol.sg-verzoek { background: #6b5b8e; }
.sg-bol.sg-herprint { background: #a85a26; }
.sg-bol.sg-letop { background: var(--let); }
.sg-uit { position: absolute; top: 8px; right: 30px; display: flex; gap: 5px; pointer-events: none; }
.sg-uit .sg-bol {
  visibility: hidden; opacity: 0; transform: translateX(30px) scale(.4);
  transition: transform .18s ease, opacity .18s ease, visibility 0s linear .18s;
}
.sg-open .sg-uit .sg-bol { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: 0s; }
.sg-open .sg-uit .sg-bol:nth-child(2) { transition-delay: .04s; }
.sg-open .sg-uit .sg-bol:nth-child(3) { transition-delay: .08s; }
.sg-open .sg-uit .sg-bol:nth-child(4) { transition-delay: .12s; }
.sg-open .sg-uit .sg-bol:nth-child(5) { transition-delay: .16s; }
/* Bij minder beweging schuiven de kleine bolletjes niet: ze staan er of ze staan er niet. Eén soort (.sg-een) heeft ze niet:
   dan toont aanwijzen of tikken op het grote bolletje meteen het kaartje (static/js/signalen.js). */
@media (prefers-reduced-motion: reduce) { .sg-uit .sg-bol { transition: none; } }
.sg-tip {
  position: absolute; top: 36px; right: 0; z-index: 4; width: min(240px, calc(100cqi - 10px)); box-sizing: border-box;
  padding: 8px 12px; border: 1px solid var(--rand); border-radius: var(--radius); background: var(--pagina);
  box-shadow: 0 6px 18px #1d26301f; font-size: 13px; line-height: 1.4;
}
.sg-tip b { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--zacht); }
.sg-tip a, .sg-tip .sg-meer { display: block; padding: 4px 0; color: var(--tekst); text-decoration: none; overflow-wrap: anywhere; }
.sg-tip a:hover { color: var(--laat); }
.sg-item { white-space: nowrap; color: var(--zacht); }
.sg-tip .sg-meer { color: var(--zacht); font-size: 12px; }
.kaarten > .kaart:has(.sg :active):active { scale: none; }        /* een bolletje indrukken drukt de kaart niet in */
@container (min-width: 260px) {
  .sg-hoofd, .sg-uit { top: 14px; }
  .sg-tip { top: 42px; }
}
.widget-projectkaarten .sg-hoofd, .widget-projectkaarten .sg-uit { top: 8px; }   /* de naam is daar altijd 14 px */
.widget-projectkaarten .sg-tip { top: 36px; }
@container (min-width: 260px) {
  .widget-projectkaarten .sg-hoofd, .widget-projectkaarten .sg-uit { top: 12px; }
  .widget-projectkaarten .sg-tip { top: 40px; }
}
/* Een brede projectkaart (`.kp-breed`, kaartposes.Poses.breed: meer gekozen poses dan er in één kolom passen) beslaat
   twee kolommen - alleen hele kolommen, en alleen waar het raster er minstens twee heeft: per raster vanaf twee keer de
   kleinste kolom plus de tussenruimte (het raster is dan een container, kaartraster). Smaller, en op de telefoon
   (telefoon.css), blijft hij één breed. Geen dense: de volgorde blijft, een gat aan het eind van een rij mag. De poses
   houden de hoogte van de andere kaarten: in een raster van grote kolommen (vanaf 272 px, de kaart zelf 260) staat
   ook de brede kaart in de grote stand (215 px); in een raster van kleine kolommen (de widget, Fabrieken) zou de brede
   kaart al groot zijn terwijl zijn buren klein zijn - dan krijgt hij de kleine stand, met het vlak zo hoog als dat van
   een buur (4:3 van een kolom: 3/8 van zijn eigen breedte zonder de tussenruimte en de rand van een tweede kaart). */
.kaarten:has(> .kp-breed), .widget-projectkaarten:has(> .kp-breed) { container: kaartraster / inline-size; }
@container kaartraster (min-width: 616px) { .kaarten > .kp-breed { grid-column: span 2; } }
@container kaartraster (min-width: 492px) { .kaarten.fbk-kaarten > .kp-breed { grid-column: span 2; } }
@container kaartraster (min-width: 310px) { .widget-projectkaarten > .kp-breed { grid-column: span 2; } }
@container (min-width: 298px) and (max-width: 541.98px) {
  .widget-projectkaarten > .kp-breed .kaart-vlak.kp-vlak { height: calc((100cqi - 22px) * .375); aspect-ratio: auto; }
  .widget-projectkaarten > .kp-breed .kp-rij { inset: 8px 6px 0; gap: 0 6px; }
  .widget-projectkaarten > .kp-breed .kp-balk { padding: 4px 6px; font-size: 9.5px; }
  .widget-projectkaarten > .kp-breed .kp-pijl { display: none; }
  .widget-projectkaarten > .kp-breed :is(.kaart-sub, .kaart-lead, .kaart-ronde, dl, .kaart-voortgang small) { display: none; }
  .widget-projectkaarten > .kp-breed .kaart-tekst { padding: 8px 4px 4px; }
  .widget-projectkaarten > .kp-breed .kaart-voortgang { margin-top: 6px; }
  .widget-projectkaarten > .kp-breed .voortgang { height: 3px; }
}
@container (min-width: 480px) and (max-width: 543.98px) {
  .fbk-kaarten > .kp-breed .kaart-vlak.kp-vlak { height: calc((100cqi - 24px) * .375); aspect-ratio: auto; }
  .fbk-kaarten > .kp-breed .kp-rij { inset: 8px 6px 0; gap: 0 6px; }
  .fbk-kaarten > .kp-breed .kp-balk { padding: 4px 6px; font-size: 9.5px; }
  .fbk-kaarten > .kp-breed .kp-pijl { display: none; }
  .fbk-kaarten > .kp-breed :is(.kaart-sub, .kaart-lead, .kaart-ronde, dl, .kaart-voortgang small) { display: none; }
  .fbk-kaarten > .kp-breed .kaart-tekst { padding: 8px 4px 4px; }
  .fbk-kaarten > .kp-breed .kaart-voortgang { margin-top: 6px; }
  .fbk-kaarten > .kp-breed .voortgang { height: 3px; }
  .fbk-kaarten > .kp-breed .kaart-tekst h2 { font-size: 14px; }
}

/* --- Aanmaken: de formulieren, als eigen pagina en in de pop-up --- */
.panel.smal { max-width: 640px; }
.panel h3 { margin: 1.5rem 0 .25rem; }
.aanmaakform .veld { margin-bottom: .35rem; }
.aanmaakform small { display: block; margin-top: .25rem; font-size: 12px; }
.errorlist { list-style: none; margin: .3rem 0 0; padding: 0; font-size: 12px; color: var(--laat); }
.errorlist.nonfield { margin: 0 0 .75rem; padding: .6rem .8rem; font-size: 14px; background: #fbecea; border-radius: var(--radius); }
.keuzes label, label.vinkje { display: flex; align-items: center; gap: .5rem; margin: .4rem 0; font-size: 14px; color: var(--tekst); }
label.vinkje { margin-top: 1rem; }
/* De tweede knop bij een onbekende klant is licht: de gewone knop blijft de hoofdzaak. */
.aanmaakform .vraag button[type=submit] { margin-top: .5rem; background: var(--pagina); color: var(--tekst); border: 1px solid var(--donker); }
/* Spec 2026-10-20 (deel 1, mockup A): Administratie onderaan het projectformulier, klein en rustig. */
.administratie-vak { min-width: 0; margin: 1rem 0 .25rem; padding: .6rem 0 0; border: 0; border-top: 1px solid var(--lijn); }
.administratie-vak legend { padding: 0 .4rem 0 0; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--zacht); }
.administratie-vak legend small { display: inline; letter-spacing: 0; text-transform: none; font-size: 12px; }
.veld label small.muted { display: inline; margin: 0; font-weight: 400; }
.treffers form { margin: 0; }
.treffers button[type=submit] { width: auto; margin-top: 0; padding: .4rem .9rem; }
/* Het blok In je uitvoermap (spec 2026-10-09, spoor F; _uitvoerkeuze.html): een model per regel, de nieuwste bovenaan. */
.uitvoerkeuze { min-width: 0; margin: 1rem 0 .25rem; padding: .5rem .8rem .6rem; border: 1px solid var(--lijn); border-radius: var(--radius); }
.uitvoerkeuze legend { padding: 0 .3rem; font-size: 12px; color: var(--zacht); }
.uitvoerkeuze-uitleg { margin: .2rem 0; font-size: 12px; color: var(--zacht); }
.uitvoerkeuze-uitleg:empty { display: none; }
.uitvoerkeuze-lijst { list-style: none; margin: .3rem 0; padding: 0; max-height: 16rem; overflow-y: auto; }
.uitvoerkeuze-lijst label { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .5rem; margin: .3rem 0; font-size: 14px; color: var(--tekst); cursor: pointer; }
.uitvoerkeuze-lijst input { flex: none; width: auto; margin: 0; }
.uitvoerkeuze-naam { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.uitvoerkeuze-wordt, .uitvoerkeuze-meta { font-size: 12px; color: var(--zacht); }
.uitvoerkeuze-meta { white-space: nowrap; }
.uitvoerkeuze-lijst input:disabled ~ span { opacity: .6; }

/* --- De pop-up: dezelfde form als de aanmaakpagina, in een <dialog> (static/js/popup.js) --- */
.popup {
  width: min(600px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto;
  padding: 0; border: 1px solid var(--rand); border-radius: var(--radius);
  background: var(--pagina); color: var(--tekst); box-shadow: 0 12px 40px #1d263024;
}
.popup::backdrop { background: rgba(23, 28, 34, .35); }
.popup-binnen { padding: 22px; }
.popup-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
.popup-kop h2 { margin: 0; }
.popup-kop form { margin: 0; }

/* --- Op de telefoon: de zijbalk wordt een rij knoppen bovenaan, zoals de PoC --- */
@media (max-width: 900px) {
  body.app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; }
  .zijbalk {
    grid-row: auto; position: sticky; top: 0; z-index: 2; height: auto; align-self: auto;
    flex-direction: row; align-items: center; gap: 4px; padding: 8px; overflow-x: auto;
    border-bottom: 1px solid var(--rand);
  }
  .zijbalk .woordmerk, .zijbalk .icoon, .zijbalk-onder .wie { display: none; }
  .hoofdnav, .zijbalk-beheer { display: flex; gap: 4px; }
  .hoofdnav a, .zijbalk-beheer a { margin: 0; padding: 10px 12px; white-space: nowrap; font-size: 12px; }
  .zijbalk-beheer { margin: 0; padding: 0 0 0 4px; border-top: 0; border-left: 1px solid var(--rand); }
  .zijbalk-onder { margin: 0 0 0 auto; padding: 0; display: flex; align-items: center; gap: 4px; }
  .zijbalk-onder form { margin: 0 8px; }
  .zijbalk button.link { font-size: 12px; }
  .topbar { padding: 0 20px; height: var(--kophoogte, 48px); }
  .topbar-merk span { display: none; }
  .page { padding: 20px; }
  h1 { font-size: 29px; letter-spacing: -.5px; }
  .kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paginakop .zoekbalk { flex-basis: 100%; max-width: none; }
  /* 16px, anders zoomt iOS in bij het aantikken. Dezelfde selectors als de regels die `font: inherit`
     zetten, anders wint hun specificiteit van een kale `input`. */
  /* :not(.code-vak): input[type=text] (0,1,1) zou anders ook de zes codevakjes (0,1,0) op 16px zetten. */
  input[type=email], input[type=password], input[type=text]:not(.code-vak), input[type=search],
  .zoekbalk input, select, textarea { font-size: 16px; }
  .facts { grid-template-columns: 1fr; gap: 0; }
  .facts dt { margin-top: .5rem; font-size: 12px; }
  .lijst li, .bestanden li { padding: .7rem 0; }
}
@media (max-width: 550px) {
  .kaarten { grid-template-columns: 1fr; }
  .kaart-vlak { height: 160px; }
}

/* --- Inloggen: het merkpaneel naast het formulier --- */

/* Het inlogscherm laat de breedtegrens van `.page` los - die geldt voor de schermen binnen,
   waar tekst op 960 pixels prettiger leest dan op 2500 - en zet de kaart in plaats daarvan
   midden in het venster, ook verticaal. */
.page.vol {
  max-width: none; padding: 1.5rem;
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
}
/* Een vaste hoogte, en niet een minimum: anders groeit de kaart mee met wat er toevallig in
   staat en springt hij zichtbaar van maat zodra je van het adres naar de code gaat - dat scherm
   heeft zes vakjes, een extra link en soms een foutmelding. De maat is ruim genoeg voor het
   volste geval (de code met een melding erboven), en krimpt alleen mee op een laag venster. */
.inlog {
  display: flex; width: 100%; max-width: 1040px;
  height: 600px; max-height: calc(100dvh - 3rem);
  background: var(--pagina); border: 1px solid var(--rand); border-radius: 12px; overflow: hidden;
}
/* De pagina werd wit bij het raamwerk; het paneel houdt zijn grijs. */
.inlog-merk {
  width: 38%; max-width: 420px; background: var(--vlak); border-right: 1px solid var(--rand);
  padding: 2.75rem; display: flex; flex-direction: column;
}
/* Het logo van Hans Boodt (templates/core/_logo.html, static/img/hans-boodt-logo.svg): inline, de kleur is die van
   de tekst (currentColor). Zo breed als het woordmerk van vroeger: 136 px in de zijbalk en op het inlogscherm. */
.merklogo { display: block; height: auto; }
.woordmerk { margin: 0; color: var(--tekst); }
.woordmerk .merklogo { width: 8.5rem; }
.inlog-product { margin: auto 0; }
.inlog-naam { font-size: 3.4rem; font-weight: 300; letter-spacing: -.035em; line-height: 1; margin: 0; }
.inlog-belofte { font-size: 1rem; color: var(--zacht); max-width: 15em; margin: .9rem 0 0; }
.inlog-voet { font-size: .75rem; color: var(--zacht); margin: 0; }

.inlog-formulier {
  flex: 1; padding: 3rem 4rem; display: flex; flex-direction: column; overflow-y: auto;
  justify-content: center;
  justify-content: safe center;
}
.inlog-formulier h1 { font-size: 2.2rem; font-weight: 300; letter-spacing: -.025em; margin: 0 0 .6rem; }
.inlog-uitleg { font-size: 1rem; color: var(--zacht); margin: 0 0 2rem; max-width: 28em; }
.inlog-formulier input, .inlog-formulier button[type=submit] { max-width: 400px; }
.inlog-formulier input[type=email] { padding: .85rem .9rem; }
.inlog-onder { margin: 1.6rem 0 0; font-size: .9rem; }
.inlog-onder a { color: var(--tekst); text-decoration: underline; text-underline-offset: 3px; }
.inlog-wacht { color: var(--zacht); }      /* grijs tot de wachttijd om is (js/code.js telt af) */
.inlog-hint { margin: 1.75rem 0 0; font-size: .75rem; color: var(--zacht); }
.inlog .error {
  display: inline-block; background: #fbecea; border-radius: 6px;
  padding: .55rem .8rem; margin: 0 0 1.25rem;
}

/* De zes vakjes. Ze staan er alleen als code.js gedraaid heeft; zonder dat script blijft het
   gewone invoerveld staan, en dat is precies de bedoeling. */
.code-vakjes { display: flex; gap: .55rem; max-width: 400px; }
.code-vak {
  flex: 1 1 0; min-width: 0; max-width: 56px; height: 64px; padding: 0;
  font: inherit; font-size: 1.45rem; font-weight: 500; text-align: center;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--rand); border-radius: 10px; background: var(--pagina); color: var(--tekst);
}
.code-vak:focus { outline: none; border-color: var(--donker); box-shadow: 0 0 0 3px rgba(20, 20, 20, .08); }
.code-vakjes.fout .code-vak { border-color: #e3b4b0; }
.code-hint { margin: 0; font-size: 13px; color: var(--laat); }

/* Op een telefoon valt de kaart weg: het paneel gaat naar boven en alles staat op één kolom. */
@media (max-width: 720px) {
  .page.vol { display: block; padding: 0; min-height: 0; }
  .inlog {
    display: block; max-width: none; height: auto; max-height: none;
    min-height: 100vh; min-height: 100dvh;
    border: 0; border-radius: 0;
  }
  .inlog-formulier { overflow-y: visible; }
  .inlog-merk {
    width: auto; max-width: none; border-right: 0; border-bottom: 1px solid var(--rand);
    padding: 1.5rem 1.5rem 1.25rem;
  }
  .inlog-product { margin: 1.25rem 0 0; }
  .inlog-naam { font-size: 2.1rem; }
  .inlog-belofte { font-size: .95rem; margin-top: .4rem; }
  .inlog-voet { display: none; }
  .inlog-formulier { padding: 1.75rem 1.5rem 2.5rem; display: block; }
  .inlog-formulier h1 { font-size: 1.5rem; }
  .inlog-uitleg { font-size: .95rem; margin-bottom: 1.4rem; }
  .inlog-formulier input, .inlog-formulier button[type=submit] { max-width: none; }
  .code-vakjes { max-width: none; }
  .code-vak { height: 56px; font-size: 1.3rem; }
}

/* --- De actie van een stap (templates/core/_stap_actie.html) --- */
.handeling { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; }
.handeling form { margin: 0; }
.handeling button[type=submit]:not(.link) { width: auto; margin-top: 0; padding: .6rem 1.1rem; }

/* --- Nieuwe verzoeken: zonder JavaScript een blok bovenaan de pagina, met JavaScript in een
   <dialog class="popup"> (static/js/verzoeken.js) --- */
.verzoeken { border: 1px solid var(--donker); border-radius: var(--radius); background: var(--pagina); padding: 18px 22px; margin: 0 0 20px; }
.verzoeken .popup-kop h2 { margin: 0; }
.verzoeken .lijst { margin: 8px 0 16px; }
.verzoeken p { margin: 0; }
.popup .verzoeken { border: 0; margin: 0; padding: 22px; }

/* --- Kaarten of lijst op de projectpagina: de schakelaar rechtsboven in het paneel --- */
.panelkop { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.panelkop h2 { margin: 0; }
.weergave { display: flex; gap: 6px; }
.weergave a { background: var(--vlak-2); color: inherit; text-decoration: none; border-radius: var(--radius); font-size: 12px; padding: 8px 16px; }
.weergave a[aria-current="true"] { background: var(--donker); color: #fff; }

/* --- De viewer (templates/core/_viewer.html, static/js/viewer.js): één groot beeld met de drie
   aanzichten eronder, voor het 3D-model en de foto's van het figuur. Het actieve vakje heeft een
   donkere rand en een donkere labelbalk; de andere een dunne lijn en een lichte balk. --- */
.viewer { max-width: 640px; }
.viewer-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.viewer-titel { margin: 0; font-size: 15px; }
.viewer-etiket { margin-right: 6px; font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--zacht); }
.viewer-rechts { display: flex; align-items: center; gap: 8px; }
.bewerken { position: relative; }
.bewerken summary {
  list-style: none; cursor: pointer; padding: 4px 10px; font-size: 12px;
  background: var(--pagina); border: 1px solid var(--rand); border-radius: var(--radius);
}
.bewerken summary::-webkit-details-marker { display: none; }
.bewerken[open] summary { background: var(--vlak); }
.bewerken-menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 3; min-width: 180px; padding: 6px 0;
  background: var(--pagina); border: 1px solid var(--rand); border-radius: var(--radius); box-shadow: 0 8px 24px #1d26301f;
}
.bewerken-menu form { margin: 0; }
.bewerken-menu button.link { display: block; width: 100%; padding: 8px 14px; text-align: left; text-decoration: none; }
.bewerken-menu button.link:hover { background: var(--vlak); }
.bewerken-omhoog { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-top: 1px solid var(--rand); font-size: 13px; }
.bewerken-omhoog label { display: flex; align-items: center; gap: 6px; }
.bewerken-omhoog select { padding: 3px 6px; }
.viewer-groot { position: relative; aspect-ratio: 1; background: var(--grijsvlak); border-radius: 8px; overflow: hidden; }
.viewer-groot img { display: block; width: 100%; height: 100%; object-fit: contain; }
.viewer-groot img[hidden] { display: none; }
.aanzicht-leeg {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px;
  text-align: center; font-size: 13px; color: var(--zacht);
}
.aanzicht-leeg[hidden] { display: none; }
.viewer-vakken { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.viewer-vak > a { display: block; color: inherit; text-decoration: none; border-radius: 6px; overflow: hidden; }
.viewer-vak.actief > a { outline: 1.5px solid var(--donker); outline-offset: -1.5px; }
.viewer-duim { display: block; aspect-ratio: 1; background: var(--grijsvlak); }
.viewer-duim img { display: block; width: 100%; height: 100%; object-fit: contain; }
.viewer-label { display: block; padding: 4px 8px; font-size: 10px; text-align: center; color: var(--zacht); }
.viewer-vak.actief .viewer-label { color: var(--tekst); font-weight: 500; }
.viewer-onderschrift { margin: 10px 0 0; font-size: 12px; color: var(--zacht); }
.viewer-toelichting { display: block; }
.aanzichten-stand { margin: 12px 0 0; font-size: 13px; color: var(--zacht); }
/* Foto maken onder een vakje: de knop is het label, het bestandsveld ligt er onzichtbaar overheen. */
.foto-maken { margin: 8px 0 0; }
.foto-maken .knop {
  position: relative; overflow: hidden; display: block; margin: 0; padding: 8px;
  text-align: center; font-size: 12px; color: var(--tekst);
}
.foto-maken input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; opacity: 0; cursor: pointer; }
.foto-maken button[type=submit]:not(.link) { margin-top: 6px; padding: 6px; font-size: 12px; }
@media (max-width: 900px) { .viewer { max-width: none; } }

/* --- Het beeld op de kaart: kaart.webp in het vlak, de codes en het etiket eroverheen --- */
.kaart-vlak img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* Het render heeft de kleur van het vlak zelf (--grijsvlak; core/render/schrijf.py, ACHTERGROND):
   het figuur staat los in het grijze vlak. De codes gaan als etiketje naar linksonder, niet dwars
   over het figuur. */
.kaart-vlak.met-beeld { background: var(--grijsvlak); }
.kaart-vlak.met-beeld .kaart-codes {
  position: absolute; left: 12px; right: 12px; bottom: 10px; justify-content: flex-start; flex-wrap: nowrap;
  gap: 6px; padding: 0; font-size: 11px; letter-spacing: .5px;
}
.kaart-vlak.met-beeld .kaart-codes span { background: #f8f9fae6; border-radius: 20px; padding: 5px 10px; color: #59616c; }


/* --- Vergelijken (templates/core/vergelijken.html): model en foto naast elkaar; op de telefoon
   één van de twee met de schakelaar, die static/js/viewer.js aanzet (.schakelbaar) --- */
.vergelijk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.vergelijk .viewer { max-width: none; }
.schakelaar { grid-column: 1 / -1; gap: 6px; }
.schakelaar button {
  padding: 8px 16px; font: inherit; font-size: 12px; color: inherit; cursor: pointer;
  background: var(--vlak-2); border: 0; border-radius: var(--radius);
}
.schakelaar button[aria-pressed="true"] { background: var(--donker); color: #fff; }
.vergelijk-link { margin: 10px 0 0; font-size: 13px; }
@media (max-width: 900px) {
  .vergelijk { grid-template-columns: minmax(0, 1fr); }
  .vergelijk.schakelbaar .schakelaar { display: flex; }
  .vergelijk.schakelbaar[data-toon="model"] [data-viewer="foto"],
  .vergelijk.schakelbaar[data-toon="foto"] [data-viewer="model"] { display: none; }
}

/* --- Wie een stap afhandelt (route.mag_handelen): bij wie hij ligt ("namens" staat sinds 17 okt 2026 in de kopregel) --- */
.handeling .ligt-bij { margin: 0; color: var(--zacht); }

/* --- Na een handeling (views._handeling): een geslaagde melding oogt niet meer als een grijs
   vakje, en een stap in de widget Route licht twee seconden op via #stap-<pk>, zonder JavaScript --- */
.messages li.success { border-left: 3px solid var(--donker); color: var(--tekst); }
.routetabel tr { scroll-margin-top: 24px; }
.routetabel tr:target { animation: oplichten 2s ease-out; }
@keyframes oplichten {
  0%, 70% { background: var(--vlak); box-shadow: 0 0 0 1px var(--donker); }
  100% { background: transparent; box-shadow: 0 0 0 1px transparent; }
}

/* --- De teller bij Mijn taken in de zijbalk (core/context_processors.py): de dringende stappen
   van jouw rollen; bij nul staat hij er niet --- */
/* De teller als pilletje (spec 2026-10-06), rechts in de regel. */
.hoofdnav .teller, .zijbalk-beheer .teller {
  margin-left: auto; padding: 1px 8px; border-radius: 999px;
  background: #e0e0de; color: var(--tekst); font-size: 11px; font-weight: 500;
}
/* Bij hover en op /taken/ is de link zelf al bijna zo grijs: dan wit, zodat de teller zichtbaar blijft */
.hoofdnav a:hover .teller, .hoofdnav a[aria-current="page"] .teller,
.zijbalk-beheer a:hover .teller, .zijbalk-beheer a[aria-current="page"] .teller { background: var(--pagina); }

/* --- De uitvoermap: het sleepvak op de itempagina (static/js/uitvoer.js). De knop Toch versturen
   is een .knop, en .knop zet display: inline-flex - dat overrulet het attribuut hidden; .knop[hidden] en de regel
   hieronder zetten het terug. Geen andere `display` op de kinderen --- */
.sleepvak [hidden] { display: none; }
.sleepvak { border: 1px dashed var(--zacht); border-radius: 8px; padding: 1rem; background: var(--pagina); }
.sleepvak.erboven { border-style: solid; border-color: var(--donker); background: var(--vlak-2); }
.sleepvak .sleep-uitleg { margin: 0 0 .5rem; font-weight: 500; color: var(--tekst); }
.sleepvak .sleep-melding { margin: .6rem 0 0; }
.sleepvak .sleep-melding:empty { margin: 0; }
.sleepvak progress { width: 100%; margin-top: .5rem; }
.sleepvak [data-toch] { margin-top: .6rem; }

/* --- Slepen maakt items (spec 2026-09-29): de controlelijst onder het sleepvak op een project of
   collectie (static/js/slepen.js) --- */
[data-controlelijst] { margin-top: 1rem; }
.controlelijst input[type=text], .controlelijst select { width: 100%; min-width: 7rem; }
.controlelijst td[data-stand] { min-width: 12rem; }

/* --- De widget Route (spec 2026-09-28, PR B; D3a; ronde 6, mockup route-datums.html; templates/core/widgets/route.html):
   een tabel, per stap een regel met een bolletje voor de stand, de naam als link naar zijn stapscherm (de stap die aan
   de beurt is vet en onderstreept, de rij wit uitgelicht), de afdeling, wie en wanneer klein eronder, en rechts twee
   vaste kolommen Gewenst · Toegezegd met pillen van één breedte (de datumkiezer, .dk). Overgeslagen grijs. --- */
.routetabel { font-size: 13px; }
.routetabel td, .routetabel th { padding: 8px 6px; }
.routetabel .meta { display: block; white-space: normal; }
.routetabel a.naam { color: inherit; text-decoration: none; }
.routetabel a.naam:hover, .routetabel a.naam:focus-visible { text-decoration: underline; }
.routetabel a.naam[aria-current="step"] { font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.routetabel .routestap-huidig td { background: var(--pagina); }
.routetabel .routestap-huidig td:first-child { border-radius: 8px 0 0 8px; }
.routetabel .routestap-huidig td:last-child { border-radius: 0 8px 8px 0; }
.routetabel .rt-kol { width: 130px; white-space: nowrap; }
.rt-stap { display: flex; align-items: flex-start; gap: 10px; }
.rt-naam { min-width: 0; }
.rt-afdeling { margin-left: 4px; color: var(--zacht); font-size: 12px; }
.rt-bol { position: relative; flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 1px;
  border: 2px solid #cfcfca; border-radius: 50%; background: var(--pagina); }
.rt-bol.voltooid { border-color: var(--donker); background: var(--donker); }
.rt-bol.voltooid::after { content: ""; width: 7px; height: 4px; margin-top: -2px; border: 2px solid #fff; border-top: 0;
  border-right: 0; transform: rotate(-45deg); }
.rt-bol.actief, .rt-bol.kan-starten { border-color: var(--donker); border-width: 2.5px; }
.rt-bol.overgeslagen, .rt-bol.vervangen { border-style: dashed; }
.routestap-over td, .routestap-over a.naam { color: var(--zacht); }
.rt-naam .status::before { display: none; }          /* het bolletje zegt het al; het woord blijft */
.rt-naam .status { font-size: inherit; }
/* Een smal vak (Overzicht naast het item): de datums onder de naam, in hun twee kolommen (container query). */
[data-widget="route"] { container-type: inline-size; }
@container (max-width: 620px) {
  .routetabel thead { display: none; }
  .routetabel tr { display: grid; grid-template-columns: 22px repeat(2, minmax(0, 1fr)); gap: 4px 8px;
    padding: 6px 0; border-bottom: 1px solid var(--lijn); }
  .routetabel td { padding: 0; border: 0; }
  .routetabel td:nth-child(2) { grid-column: 2 / -1; }
  .routetabel td.rt-kol { width: auto; white-space: normal; }   /* het handje mag onder de datum, niet uit de kolom */
  .routetabel td.rt-kol:nth-child(3) { grid-column: 2; padding-left: 26px; }
  .routetabel td.rt-kol:nth-child(4) { grid-column: 3; }
  .routetabel td.rt-kol:empty { display: none; }
  .routetabel td.rt-kol::before { content: attr(data-kop); display: block; margin: 0 0 2px 2px; color: var(--zacht);
    font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
  .routetabel td.rt-kol:has(.dk-tekst.klaar)::before { display: none; }
  .routetabel .routestap-huidig { background: var(--pagina); border-radius: 8px; }
}
/* Smal vak (de opmaakwacht vond bij 265 tot 350 px - Overzicht op 768 en 1280 px - *kies een datum* en *toezeggen* uit hun vak): de pil
   van de datumkiezer is 118 px (.dk-vast). Tot 340 px krijgt de eerste kolom geen inspringing meer (die 26 px was te veel: op een
   telefoon van 360 is het vak 292 px, 2 x 118 px past dan in (292 - 38) / 2); onder 275 px past ook dat niet (22 + 8 + 118 + 8 + 118)
   en staan Gewenst en Toegezegd onder elkaar, onder de naam, elk met zijn eigen kopje. Een telefoon van 360 en 390 px houdt zo twee
   kolommen (review 3b taak 8, B3: een stapel onder 420 px maakte de lijst daar bijna twee keer zo lang). */
@container (max-width: 340px) {
  .routetabel td.rt-kol:nth-child(3) { padding-left: 0; }
}
@container (max-width: 274px) {
  .routetabel tr { grid-template-columns: 22px minmax(0, 1fr); }
  .routetabel td.rt-kol:nth-child(3), .routetabel td.rt-kol:nth-child(4) { grid-column: 2; }
}
.paneel .tabel th { background: transparent; color: var(--zacht); }
.paneel .tabel td, .paneel .tabel th { border-bottom-color: var(--lijn); }
/* Het handje bij een gewenste datum met de hand (spec 2026-10-08, deel 3a; templates/core/widgets/_handmatig.html). */
.handmatig { display: inline-flex; margin-left: 3px; vertical-align: -2px; color: var(--zacht); }
.handmatig .icoon { width: 13px; height: 13px; }

/* --- De itempagina als overzicht: de knop naar de stap die aan de beurt is, onder de route --- */
.naar-stap { margin: .5rem 0 0; }

/* --- Het schermsjabloon (spec 2026-09-29, D1; templates/core/sjabloon.html): vijf zones en het raster van
   widgets, in de huisstijl (spec 2026-10-06): randen van 1 px, afgeronde hoeken (--hoek, --hoek-knop), koppen in kleine
   hoofdletters, knoppen van 38 px, de stand als status met een woord. De titel (h1), de tabbladen en de zones staan
   onder .sjabloon: het dashboard, de widgetgalerij, Overzicht en de stapschermen --- */
.sjabloon h1 { font-size: 40px; font-weight: 300; letter-spacing: -.5px; line-height: 1.1; margin: 0; }
.zone-object { margin-bottom: 20px; }
.zone-werk { min-width: 0; }        /* zone 3 tot 5: naast zone 2 op het itemscherm (D3a); elders een gewoon blok */
.tabbladen { display: flex; flex-wrap: wrap; margin-bottom: var(--sj-ruimte); border-bottom: 1px solid var(--rand); }
.tabbladen a {
  display: inline-flex; align-items: center; height: var(--sj-knop); padding: 0 16px; margin-bottom: -1px;
  color: var(--zacht); text-decoration: none; border-bottom: 2px solid transparent;
}
.tabbladen a:hover { color: var(--tekst); }
.tabbladen a.actief { color: var(--tekst); font-weight: 500; border-bottom-color: var(--donker); }
.zone-object .titel { margin: 0 0 4px; }

/* Het raster (2026-10-14, widgets in kolommen; core/dashboard.py `indeling`, templates/core/_raster.html): delen onder
   elkaar - een brede widget over de hele breedte, een rij kaarten, of twee kolommen die elk hun eigen widgets stapelen.
   Een widget is zo hoog als zijn inhoud: geen vaste rijen en geen schuifbalk binnenin. Beheer kiest alleen volgorde en
   maat (DashboardWidget); de kolom volgt uit de maat. Gat opvullen: de kolommen zijn even hoog (een rij van het grid) en
   de laatste open widget van een kolom (.vult, static/js/klappen.js) groeit mee tot de onderkant van de langste - het
   grijze vlak, de inhoud blijft bovenaan. Wisselt het vullen van widget, dan glijdt de ruimte erheen (flex-grow).
   Zonder JavaScript vult niets; op de telefoon en de bouwer ook niet. */
.raster { display: flex; flex-direction: column; gap: var(--sj-ruimte); min-width: 0; }
.raster-kolommen {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sj-ruimte); align-items: stretch;
}
.raster-kolom { display: flex; flex-direction: column; gap: var(--sj-ruimte); min-width: 0; }
.raster-kolom > .widget { flex: 0 0 auto; }
.raster-kolom > .widget.vult { flex-grow: 1; }
.klap-klaar .raster-kolom > .widget { transition: flex-grow .7s cubic-bezier(.65, 0, .35, 1); }
.raster-kaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sj-ruimte); }
/* Onder 768 px één kolom (review D3; core/dashboard.py en sjabloon.html beloven het): de kolommen vallen weg, de
   widgets van een deel staan onder elkaar in de volgorde van de telefoon (--tel; zonder eigen volgorde die van de
   bouwer), zonder gat op te vullen. klappen.js ziet dan geen twee kolommen (geen grid) en klapt niets vanzelf open. */
@media (max-width: 767.98px) {
  .raster-kolommen { display: flex; flex-direction: column; }
  .raster-kolom { display: contents; }
  .raster-kolom > .widget { order: var(--tel, 0); }
  .raster-kolom > .widget.vult { flex-grow: 0; }
}
.widget { display: flex; flex-direction: column; min-width: 0; }
/* Brede inhoud steekt niet uit het paneel (review D7: .widget heeft geen overflow: auto meer, een widget is zo hoog als
   zijn inhoud): de inhoud mag krimpen, een lang woord breekt af, een keuzelijst wordt niet breder dan het paneel, en
   een tabel (.tabelwrap) of pre scrolt zelf opzij - geen schuifbalk om de hele widget, dus een popover blijft heel. */
.widget .romp-binnen { min-width: 0; overflow-wrap: break-word; }
.widget select { max-width: 100%; }
.widget :is(.tabelwrap, pre) { max-width: 100%; overflow-x: auto; }
/* Een widget is een paneel of een kaart (spec 2026-10-06, *Widgets: kaart of paneel*; templates/core/_widgetvak.html).
   Een paneel: een grijs vlak met een genummerde kop - het eerste woord vet, de rest dun, rechts het nummer, een lijn
   eronder. Een vak in de bouwer ziet eruit als een paneel. */
.paneel, .bouwer-vak { background: var(--vlak); border-radius: var(--hoek); padding: 16px 18px; }
.pkop {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px;
  padding-bottom: 10px; border-bottom: 1px solid var(--lijn);
}
.pkop-titel {
  margin: 0; min-width: 0; font-size: 13px; font-weight: 300; letter-spacing: .07em; text-transform: uppercase;
  color: var(--tekst);
}
.pkop-titel b { font-weight: 700; }
.pkop-nummer { flex: none; font-size: 11px; color: var(--zacht); }
/* De stand van Op te leveren rechts in de kop van een paneel, vóór het nummer (spec 2026-10-07): grijs met ✓, of in het
   brons van "let op" wat er ontbreekt. */
.pkop-stand {
  flex: 0 1 auto; min-width: 0; margin-left: auto; padding: 1px 9px; border-radius: 9px; background: var(--vlak-2);
  color: var(--donker); font-size: 11px; font-weight: 400; line-height: 16px; letter-spacing: 0; text-align: right;
  text-transform: none;           /* een lange stand ("1 van 10 · Torso, … ontbreken") breekt af in plaats van uit te steken */
}
.pkop-stand.let { background: var(--let-vlak); color: var(--let); }
.pkop-stand.let.laat { background: var(--laat-vlak); color: var(--laat); }   /* rood: Widget.let_op_klasse 'laat' */
.pkop-stand + .pkop-stand { margin-left: 0; }   /* twee pillen: de eerste neemt de ruimte */
/* De voetregel van een paneel (spec 2026-10-07, *De panelen opnieuw ontworpen*): links een zachte zin, rechts de knoppen. */
.pvoet {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 12px 0 0;
  padding-top: 10px; border-top: 1px solid var(--lijn);
}
.pvoet-zin { font-size: 12px; color: var(--zacht); }
.pvoet-zin a { color: var(--zacht); }
/* In- en uitklappen (2026-10-14, widgets in kolommen; mockup-widgets-inklappen.html v7; templates/core/_widgetvak.html,
   static/js/klappen.js). Een paneel heeft zijn inhoud in .romp (die de hoogte animeert) > .romp-binnen. Met het script
   (.klap-aan op het raster) staat de lijn onder de kop in .romp-binnen, zodat hij met de inhoud wegklapt; een pijltje
   (.pkop-pijl) vóór de titel en de hele kop is klikbaar. Ingeklapt (.dicht) staat in de kop één regel pilletjes met wat
   erin zit (.pkop-samen, Widget.samenvatting); de stand van Op te leveren blijft rechts. Het tempo van v7: uitklappen
   0,75 s, inklappen 0,65 s na 0,18 s (eerst vervagen de tegels van onder naar boven); tegels komen één voor één binnen
   (.klap-in → .klap-zichtbaar, een klein veertje) met een glans over het plaatje (.klap-glans). Een lijst tegels toont er
   acht (.klap-extra verborgen tot .alles), met de knop "Alle 14 bestanden ›" (.klap-meer) - die er niet staat als het
   paneel vanzelf helemaal open is (.vanzelf, er is ruimte in de kolom). Zonder script: alles open, geen knop. */
.klap-aan .klap > .pkop {
  align-items: center; justify-content: flex-start; gap: 6px 10px; margin: 0; padding: 0; border-bottom: 0;
  cursor: pointer; user-select: none;
}
.klap-aan .klap > .pkop > .pkop-titel { flex: none; }
.klap-aan .klap > .pkop > .pkop-nummer { margin-left: auto; }
.klap-aan .klap > .pkop > .pkop-stand ~ .pkop-nummer { margin-left: 0; }
.klap-aan .klap > .romp > .romp-binnen { padding-top: 10px; }
.klap-aan .klap > .romp > .romp-binnen::before {
  content: ""; display: block; margin-bottom: 12px; border-top: 1px solid var(--lijn);
}
.klap > .romp { min-height: 0; transition: height .75s cubic-bezier(.65, 0, .35, 1); }
.klap.dicht > .romp { transition: height .65s cubic-bezier(.65, 0, .35, 1) .18s; }
.pkop-pijl {
  flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin: -4px 0 -4px -6px; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--tekst); cursor: pointer;
  transition: transform .6s cubic-bezier(.65, 0, .35, 1), background-color .2s;
}
.pkop-pijl::before {
  content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.pkop:hover .pkop-pijl { background: var(--pagina); }
.pkop-pijl:focus-visible { outline: 2px solid var(--donker); outline-offset: 1px; }
.klap.dicht .pkop-pijl { transform: rotate(-90deg); }
.pkop-samen { display: none; flex: 0 1 auto; flex-wrap: wrap; gap: 4px 6px; }   /* nooit smaller dan de breedste pil */
.klap.dicht > .pkop .pkop-samen { display: flex; animation: klap-samen .25s ease both; }
@keyframes klap-samen { from { opacity: 0; transform: translateY(-3px); } }
.pkop-pil {
  padding: 1px 9px; border-radius: 999px; background: var(--pagina); color: var(--zacht); font-size: 11px; font-weight: 400;
  line-height: 16px; letter-spacing: 0; text-transform: none; white-space: nowrap;
}
.pkop-pil b { font-weight: 500; color: var(--tekst); }
.pkop-pil.ok::before { content: "✓ "; color: var(--donker); }
.pkop-pil.let, .pkop-pil.let b { background: var(--let-vlak); color: var(--let); }
.klap:not(.alles) .klap-extra { display: none; }
/* Meten (klappen.js, meet; review D4): even in een andere stand, zonder overgang op wat die stand verandert - het
   pijltje van "Alle n ›" en de extra tegels - en die tegels nemen alleen ruimte in; er wordt niets getekend, want de
   stand gaat terug in dezelfde taak. Alleen die: een animatie van de romp of van andere tegels loopt gewoon door. */
.klap-meet .klap-meer i, .klap-meet .klap-extra, .klap-meet .klap-extra * { transition: none !important; }
.klap-meet .klap-extra { visibility: hidden; }
.klap-meer {
  display: inline-flex; align-items: center; gap: 6px; margin: 12px 0 0; padding: 6px 12px; border: 0; border-radius: 999px;
  background: var(--pagina); color: var(--tekst); font: inherit; font-size: 12px; cursor: pointer;
}
.klap-meer:hover { background: var(--vlak-2); }
.klap-meer:focus-visible { outline: 2px solid var(--donker); outline-offset: 2px; }
.klap-meer i { display: inline-block; font-style: normal; transition: transform .6s cubic-bezier(.65, 0, .35, 1); }
.klap.alles .klap-meer i { transform: rotate(90deg); }
.klap.vanzelf .klap-meer { display: none; }
.klap-in {
  opacity: 0; transform: translateY(18px) scale(.92); filter: blur(4px);
  transition: opacity .22s ease, transform .3s ease, filter .22s ease;
}
.klap-in.klap-zichtbaar {
  opacity: 1; transform: none; filter: none;
  transition: opacity .5s ease, transform .7s cubic-bezier(.34, 1.45, .64, 1), filter .5s ease;
}
.klap-glans { position: relative; overflow: hidden; }
.klap-glans::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .65) 50%, transparent 65%) no-repeat;
  background-size: 250% 100%; animation: klap-glans 1.1s ease .15s both;
}
@keyframes klap-glans { from { background-position: 140% 0; } to { background-position: -40% 0; } }
@media (prefers-reduced-motion: reduce) {
  .klap > .romp, .klap.dicht > .romp, .pkop-pijl, .klap-meer i, .klap-in, .klap-in.klap-zichtbaar,
  .klap-klaar .raster-kolom > .widget { transition: none; }
  .klap.dicht > .pkop .pkop-samen, .klap-glans::after { animation: none; }
}
.pvoet-knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }
.pvoet .koppelen { flex: 0 1 auto; }
/* De tegels van een paneel (spec 2026-10-07, *De panelen opnieuw ontworpen*): één ding is één witte tegel op het grijze
   paneel; wat ontbreekt staat er gestippeld bij. In twee kolommen (onderdelen) of één (bestanden, 3MF's). */
.tegels {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none;
}
.tegels.een-kolom { grid-template-columns: minmax(0, 1fr); }
.tegels + .tegels { margin-top: 6px; }
.tegel {
  display: flex; align-items: center; gap: 10px; min-width: 0; padding: 7px 10px; background: var(--pagina);
  border: 1px solid var(--rand); border-radius: 8px; font-size: 13px;
}
.tegel.mist { background: transparent; border: 1.5px dashed #c9c9c7; color: var(--zacht); }
.tegel-naam { min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.tegel.mist .tegel-naam { font-weight: 400; }
.tegel-tekst { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.tegel-tekst a { overflow-wrap: anywhere; }
.tegel-tekst .meta { display: block; white-space: normal; }
.tegel-labels { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 3px; margin-left: auto; }
/* Elk label in een tegel even groot (spec 2026-10-07, panelen omdraaien): bed 1, op geen bed, nieuw in r2, uit r1,
   2 bestanden, verwacht - alleen de kleur van .donker verschilt. */
.tegel-label {
  display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 4px; background: var(--vlak-2);
  color: var(--donker); font-size: 10px; line-height: 1; white-space: nowrap;
}
.tegel-label.donker { background: var(--donker); color: var(--pagina); }
.tegel-rechts { flex: none; margin-left: auto; }
.onderdeeltegel { flex-wrap: wrap; }
.bestandstegel { align-items: flex-start; }    /* het soort-icoon bovenaan naast een tekst van meer regels */
.omdraai-achter.bestandstegel { align-items: center; }
.onderdeeltegel .onderdeel-hulp, .onderdeeltegel .onderdeel-knop { flex-basis: 100%; }
.soorticoon {
  display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 7px; background: var(--vlak-2);
  color: var(--donker); font-size: 9px; font-weight: 500; letter-spacing: .05em;
}
.kerncijfers { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; font-size: 11px; color: var(--zacht); }
.kerncijfers b { display: block; font-size: 15px; font-weight: 500; color: var(--tekst); }
.pvoet .revisieformulier { left: auto; right: 0; }
@media (max-width: 550px) {
  .tegels { grid-template-columns: minmax(0, 1fr); }
}
/* Bestanden (spec 2026-10-07): per map een kopje in hoofdletters, rechts de versie of revisie. */
.mapkop {
  display: flex; justify-content: space-between; gap: 8px; margin: 0 0 6px; font-size: 11px; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase; color: var(--zacht);
}
.mapkop .muted { letter-spacing: .02em; text-transform: none; }
.mapkop-ronde { flex: none; }
.tegels-mist { margin-top: 8px; }

/* Printbedden (spec 2026-10-07): drie totaalkaartjes, de bedden als kaarten in twee kolommen met de thumbnail groot en
   het nummer als pil erop; zolang er geen bed is een gestippelde kaart. */
.totaalkaartjes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 0 10px; }
.totaalkaartje {
  margin: 0; padding: 6px 10px; background: var(--pagina); border: 1px solid var(--rand); border-radius: 7px;
  font-size: 11px; color: var(--zacht);
}
.totaalkaartje b { display: block; font-size: 15px; font-weight: 500; color: var(--tekst); }
.bedkaarten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
/* Een gesliced 3MF op Printbedden (spec 2026-10-09): wordt uitgepakt (zacht), of wat niet lukte (het brons van let op). */
.uitpakken { display: grid; gap: 4px; margin: 0 0 12px; padding: 0; list-style: none; font-size: 13px; }
.uitpakken li { padding: 8px 12px; border-radius: var(--hoek); background: var(--pagina); color: var(--zacht); overflow-wrap: anywhere; }
.uitpakken li.let { background: var(--let-vlak); color: var(--let); }
.bedkaart {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--pagina);
  border: 1px solid var(--rand); border-radius: 8px;
}
.bedkaart.mist { background: transparent; border: 1.5px dashed #c9c9c7; }
.bedkaart-beeld { position: relative; display: block; height: 120px; background: var(--vlak); }
.bedkaart-beeld img { display: block; width: 100%; height: 100%; object-fit: contain; }
.bedkaart.mist .bedkaart-beeld {
  background: repeating-linear-gradient(45deg, #f1f1f0, #f1f1f0 6px, #e9e9e7 6px, #e9e9e7 12px);
}
.bedkaart-nummer {
  position: absolute; top: 6px; left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--pagina);
  color: var(--tekst); font-size: 11px; font-weight: 500;
}
.bedkaart-soort {
  position: absolute; top: 6px; right: 6px; padding: 1px 7px; border: 1px solid var(--rand); border-radius: 4px;
  background: var(--pagina); color: var(--tekst); font-size: 9px; font-weight: 500; letter-spacing: .1em;
}
.omdraai-achter.bedkaart { gap: 4px; padding: 10px 12px; font-size: 12px; }
.bedkaart-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 8px 10px; font-size: 13px; }
.bedkaart-tekst .meta { display: block; white-space: normal; }
.bedkaart-tekst a { overflow-wrap: anywhere; }
.bedkaart-tijd { font-size: 16px; font-weight: 500; }
/* De Orca 3MF-kaart (ontwerp 2026-10-16): "uit bed n van de 3MF", of brons "past niet meer bij bed n". */
.bedkaart-bron.let { color: var(--let); }
/* `.widget .meta` hieronder houdt een meta op één regel; in een tegel of bedkaart mag hij afbreken (browsercheck). */
.widget .tegel-tekst .meta, .widget .bedkaart-tekst .meta { display: block; white-space: normal; }
.bedkaart-tekst .onderdeel-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* Gcodes uit r1 meenemen (17 okt 2026, mockup orca-kaart/gcodes-r2; core/meenemen.py): het gestippelde vak zolang r2 nog
   geen gcode heeft, en het vel (in een <dialog> of als pagina): per gcode een vinkje, de thumbnail, de onderdelen en
   groen of het nog past, anders brons waarom niet. */
.meenemen-leeg {
  padding: 18px; border: 1.5px dashed #d6d3cd; border-radius: var(--hoek); background: var(--pagina); text-align: center;
}
form.meenemen { margin: 0; }
.meenemen-leeg p { margin: 0 0 4px; }
.meenemen-leeg p.meta { margin: 0 auto 14px; max-width: 46ch; }
.meenemen-leeg a.knop-donker { color: #fff; }
.meenemen-onder { margin: 0 0 12px; font-size: 12.5px; color: var(--zacht); }
.meenemen-lijst { margin: 0; padding: 0; list-style: none; }
.meenemen-lijst li { border-top: 1px solid var(--rand); }
label.meenemen-rij {
  display: grid; grid-template-columns: 22px 52px minmax(0, 1fr); gap: 10px; align-items: center; margin: 0;
  padding: 9px 0; font-size: 13px; color: var(--tekst); cursor: pointer;
}
.meenemen-rij input { width: 16px; height: 16px; margin: 0; accent-color: var(--donker); }
.meenemen-rij.uit .meenemen-beeld, .meenemen-rij.uit .meenemen-tekst > b { opacity: .75; }
.meenemen-beeld { display: block; width: 52px; height: 52px; overflow: hidden; border-radius: 8px; background: var(--grijsvlak); }
.meenemen-beeld img { display: block; width: 100%; height: 100%; object-fit: cover; }
.meenemen-tekst { min-width: 0; overflow-wrap: anywhere; }
.meenemen-tekst b { font-weight: 500; }
.meenemen-tekst small { display: block; font-size: 11.5px; color: var(--zacht); }
.meenemen-stand { display: block; margin-top: 2px; font-size: 12px; }
.meenemen-stand.goed { color: var(--goed); }
.meenemen-stand.let { color: var(--let); }
.meenemen-voet {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 0; padding-top: 12px;
  border-top: 1px solid var(--rand);
}
.meenemen-voet button[type=submit] { width: auto; margin: 0; padding: 0 18px; }
.meenemen-voet button[type=submit]:disabled { opacity: .45; cursor: default; }

/* Foto's op een stapscherm (spec 2026-10-07): altijd drie vakken, staand; een ontbrekende gestippeld. */
.fotovakken { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.fotovak {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  aspect-ratio: 3 / 4; overflow: hidden; border-radius: 8px; background: var(--grijsvlak);
}
.fotovak img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fotovak.mist { justify-content: center; gap: 4px; background: transparent; border: 1.5px dashed #c9c9c7; color: var(--zacht); }
.fotovak-label {
  position: relative; margin: 6px; padding: 1px 8px; border-radius: 999px; background: var(--pagina); color: var(--tekst);
  font-size: 11px;
}
.fotovak.mist .fotovak-label { order: -1; margin: 0; padding: 0; background: transparent; font-weight: 500; }
.fotovak-leeg { font-size: 11px; }
.pvoet-meer { margin-left: auto; }
.pvoet-meer summary { list-style: none; cursor: pointer; }
.pvoet-meer summary::-webkit-details-marker { display: none; }
.pvoet-meer[open] .foto-maken-rij { margin-top: 8px; }
/* --- Omdraaien en uitklappen (spec 2026-10-07, panelen omdraaien; static/js/omdraaien.js) ---
   Een kaart .omdraai heeft een voorkant en een achterkant (.omdraai-voor, .omdraai-achter), elk met een knop over die
   hele kant (.omdraai-knop). Zonder het script zijn de knoppen verborgen en staat de achterkant onder de voorkant; met
   het script (.kan-draaien) liggen de kanten op elkaar en draait .om de kaart een halve slag om de Y-as (±0,5 s). De
   kant die niet zichtbaar hoort te zijn krijgt halverwege visibility: hidden - zo klopt het ook zonder 3D, en wat op de
   verborgen kant staat is niet te bereiken. Een link of formulier op de achterkant ligt boven de knop. */
.omdraai { position: relative; min-width: 0; }
.omdraai-binnen { display: flex; flex-direction: column; gap: 6px; }
.omdraai-voor, .omdraai-achter { position: relative; min-width: 0; }
.omdraai-knop {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; padding: 0; border: 0;
  border-radius: inherit; background: transparent; cursor: pointer;
}
.omdraai-knop[hidden] { display: none; }
.omdraai-knop:focus-visible { outline: 2px solid var(--donker); outline-offset: 2px; }
.omdraai-achter a, .omdraai-achter form { position: relative; z-index: 2; }
/* Ronde 6, het klikvlak: in een achterkant die een kolom is (een bedkaart, de 3MF van Corpus) rekte een link of formulier
   als flex-item uit tot de breedte van de kaart - Weghalen 335 px breed voor 61 px tekst - en lag zo (z-index 2) over de
   knop die de kaart terugdraait. Alleen zo breed als de inhoud; het uiterlijk blijft hetzelfde. */
.omdraai-achter:is(.bedkaart, .mfkaart-kant) > :is(a, form) { align-self: flex-start; }
.omdraai-hint { display: none; margin-top: auto; font-size: 11px; color: var(--zacht); }
.omdraai.kan-draaien { perspective: 900px; }
.kan-draaien .omdraai-binnen {
  display: grid; gap: 0; transition: transform .5s cubic-bezier(.2, .7, .2, 1); transform-style: preserve-3d;
}
.kan-draaien .omdraai-voor, .kan-draaien .omdraai-achter {
  grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: visibility 0s .25s;
}
.kan-draaien .omdraai-achter { transform: rotateY(180deg); visibility: hidden; }
.kan-draaien .omdraai-hint { display: block; }
.omdraai.om .omdraai-binnen { transform: rotateY(180deg); }
.omdraai.om .omdraai-voor { visibility: hidden; }
.omdraai.om .omdraai-achter { visibility: visible; }
@media (prefers-reduced-motion: reduce) {
  .kan-draaien .omdraai-binnen, .kan-draaien .omdraai-voor, .kan-draaien .omdraai-achter { transition: none; }
}
/* Valentijn, 21 okt 2026: "ook op pc kloppen de witte blokken niet altijd, die zijn ook te lang". De kanten liggen in één
   rastervak, dus een bedkaart was zo hoog als zijn achterkant (de details) en het raster rekte de rij mee naar de
   hoogste. Op de pc (de telefoon heeft dit in telefoon.css, D3) staat de kant die je niet ziet buiten de stroom: de
   voorkant bepaalt de hoogte, omgedraaid de achterkant - die mag dan groter worden zonder dat de rij meegroeit
   (align-items: start). Voor de bedkaarten (Gcodes en Printbedden) en de Orca 3MF-kaart. */
html:not(.tel) .bedkaarten { align-items: start; }
html:not(.tel) :is(.bedkaarten > .kan-draaien, .orcakaart.kan-draaien):not(.om) .omdraai-achter,
html:not(.tel) :is(.bedkaarten > .kan-draaien, .orcakaart.kan-draaien).om .omdraai-voor {
  position: absolute; top: 0; left: 0; width: 100%;
}
/* De achterkant: een kopje in kleine hoofdletters, de naam (werkstand) en regels met een zacht label. */
.achter-kop { margin: 0; font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--zacht); }
.achter-naam { font-weight: 500; overflow-wrap: anywhere; }
.inforijen { margin: 0; }
.inforij {
  display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-bottom: 1px solid var(--lijn);
  font-size: 12px;
}
.inforij:last-child { border-bottom: 0; }
.inforij dt { flex: none; color: var(--zacht); }
.inforij dd { min-width: 0; margin: 0; text-align: right; overflow-wrap: anywhere; }
/* Uitklappen: ⓘ rechtsboven in een beeld (.info-knop, 44 px om te tikken, met het rondje .info-rond) klapt de info
   eronder open en dicht (.uitklap). Zonder het script staat de info open en is de ⓘ verborgen. */
.info-knop {
  position: absolute; top: 0; right: 0; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px;
  margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer;
}
.info-knop[hidden] { display: none; }
/* Spec 2026-10-11 (*Foto's weghalen*): een prullenbak rechtsboven op een foto, links van ⓘ; ook 44 px om te tikken. */
.weghalen-knop { position: absolute; top: 0; right: 40px; z-index: 2; display: grid; place-items: center; width: 44px;
  height: 44px; color: var(--tekst); }
.weghalen-rond { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--pagina); box-shadow: 0 1px 3px #1d263026; }
.weghalen-rond .icoon { width: 16px; height: 16px; }
.weghalen-knop:hover .weghalen-rond { color: var(--laat); }
.detailtegel .weghalen-knop { right: 32px; }
.info-rond {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--pagina);
  color: var(--tekst); font-family: Georgia, serif; font-size: 13px; font-style: italic; font-weight: 500;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}
.info-knop[aria-expanded="true"] .info-rond { background: var(--donker); color: var(--pagina); }
.info-knop:focus-visible .info-rond { outline: 2px solid var(--donker); outline-offset: 2px; }
.uitklap {
  margin-top: 8px; padding: 10px 12px; background: var(--pagina); border: 1px solid var(--rand); border-radius: 8px;
  font-size: 12px;
}
.uitklap[hidden] { display: none; }
/* 3D-model en Foto's van het figuur per aanzicht (spec 2026-10-07, panelen omdraaien): drie knoppen als pillen (de
   gekozen donker), en één staand vak per aanzicht (3:4, hooguit 440 px; het model contain, de foto cover), met een label
   linksonder en ⓘ rechtsboven. Wat er nog niet is: gestippeld, en waar je een foto mag maken een label dat de camera
   opent. */
.aanzicht-widget { position: relative; }
.aanzichtknoppen { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 10px; }
.aanzichtknop {
  display: inline-flex; align-items: center; gap: 4px; padding: 6px 13px; border-radius: 999px; color: var(--zacht);
  font-size: 12px; text-decoration: none;
}
.aanzichtknop:hover { color: var(--tekst); }
.aanzichtknop.actief { background: var(--donker); color: var(--pagina); }
.aanzichtknop-vink { opacity: .7; }
.aanzicht-paneel[hidden] { display: none; }
.aanzichtvak {
  position: relative; display: block; aspect-ratio: 3 / 4; max-height: 440px; overflow: hidden; border-radius: 8px;
  background: var(--grijsvlak);
}
/* Spec 2026-10-11 (*Een foto past altijd*): de hele foto, gecentreerd op het grijze vlak, net als de render. */
.aanzichtvak img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.aanzichtvak.mist {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; margin: 0;
  padding: 16px; background: transparent; border: 1.5px dashed #c9c9c7; color: var(--zacht); font-size: 12px;
  text-align: center;
}
label.aanzichtvak.mist { cursor: pointer; }
.aanzichtvak.mist b { color: var(--tekst); font-weight: 500; }
.aanzichtvak-zin { max-width: 26ch; }
/* Aanzichten groot (spec 2026-10-10): render en foto naast elkaar op de halve breedte, elk min(70vh, 560px) hoog, geen
   vaste 3:4 meer; onder 640 px onder elkaar, de foto bovenaan, elk ±62vh. Gedeeld met de fabriek (core/_aanzichtpaar.html). */
.aanzichtpaar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.aanzichtpaar .aanzichtvak { aspect-ratio: auto; height: min(70vh, 560px); max-height: none; }
.aanzichtvak-open { position: absolute; inset: 0; }
.camera-rond { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 6px; border-radius: 50%;
  background: var(--donker); color: var(--pagina); }
.camera-rond .icoon { width: 24px; height: 24px; }
@media (max-width: 640px) {
  .aanzichtpaar { grid-template-columns: minmax(0, 1fr); }
  .aanzichtpaar .aanzichtvak { height: 62vh; }
  .aanzichtpaar .aanzichtvak.foto { order: -1; }
}
/* Het figuur rondom in Aanzichten (2026-10-23, mockup stapeditor-aanzichten; static/js/aanzicht_figuur.js): links het
   figuur met de draaibalk, rechts de foto van het gekozen aanzicht (.aanzichtpaar.alleen-foto) - even hoog. Onder 640 px
   onder elkaar, de foto bovenaan. */
.aanzichtpaar.alleen-foto { grid-template-columns: minmax(0, 1fr); }
.az-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
.az-figuur { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.az-vlak {
  display: flex; align-items: center; justify-content: center; height: calc(min(70vh, 560px) - 84px); padding: 12px 0 4px;
  border-radius: var(--hoek) var(--hoek) 0 0; background: var(--grijsvlak); cursor: grab; touch-action: pan-y;
  user-select: none; overflow: hidden;
}
.az-beeld { width: auto; height: 100%; max-width: 100%; object-fit: contain; pointer-events: none; }
.az-draai { margin-top: -6px; padding: 4px 12px 8px; border-radius: 0 0 var(--hoek) var(--hoek); background: var(--grijsvlak); }
.az-cap { display: flex; justify-content: space-between; gap: 6px; margin: 0; padding: 0 2px; font-size: 11px;
  color: var(--zacht); }
.az-fotos { min-width: 0; }
@media (max-width: 640px) {
  .az-paar { grid-template-columns: minmax(0, 1fr); }
  .az-fotos { order: -1; }
  .az-vlak { height: 52vh; }
}
/* Het potlood in de kop van Aanzichten (_aanzichten_potlood.html): een rond knopje, en het vel eronder. */
.az-instel { position: relative; margin-left: auto; }
.pkop .az-instel + .pkop-stand, .pkop .az-instel ~ .pkop-nummer { margin-left: 8px; }
.az-pot {
  display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--rand); border-radius: 50%;
  background: var(--pagina); color: var(--zacht); cursor: pointer; list-style: none;
}
.az-pot::-webkit-details-marker { display: none; }
.az-pot svg { width: 13px; height: 13px; }
.az-instel[open] > .az-pot { background: var(--donker); border-color: var(--donker); color: var(--pagina); }
.az-vel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: min(320px, calc(100vw - 32px)); padding: 12px;
  border: 1px solid var(--lijn); border-radius: var(--hoek); background: var(--pagina); box-shadow: 0 12px 32px #00000029;
  font-size: 12px; font-weight: 300; letter-spacing: 0; text-transform: none; text-align: left; white-space: normal;
}
.az-velkop { margin: 0 0 6px; font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.az-rij { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--rand); }
.az-rij form { margin: 0; }
.az-duim {
  display: grid; place-items: center; flex: none; width: 34px; height: 42px; overflow: hidden; border-radius: 5px;
  background: var(--grijsvlak); color: var(--zacht); font-size: 14px;
}
.az-duim img { width: auto; height: 40px; }
.az-duim.leeg { background: transparent; border: 1px dashed var(--lijn); }
.az-tekst { flex: 1; min-width: 0; }
.az-tekst b { display: block; font-weight: 500; }
.az-tekst b span { font-weight: 300; color: var(--zacht); }
.az-tekst small { font-size: 11px; color: var(--zacht); }
button[type=submit].az-flip {
  display: inline-flex; width: auto; min-height: 0; margin: 0; letter-spacing: 0; text-transform: none; font-weight: 300; align-items: center; gap: 5px; padding: 4px 10px 4px 7px; border: 1px solid var(--lijn);
  border-radius: 999px; background: var(--pagina); color: var(--tekst); font: inherit; font-size: 11px; cursor: pointer;
  white-space: nowrap;
}
.az-flip svg { width: 13px; height: 13px; color: var(--zacht); }
button[type=submit].az-toevoegen {
  min-height: 0; letter-spacing: 0; text-transform: none; font-weight: 400; border-radius: 8px;
  width: 100%; margin-top: 6px; padding: 9px; border: 1px dashed var(--lijn); border-radius: 8px; background: var(--vlak);
  color: var(--tekst); font: inherit; font-size: 12px; cursor: pointer;
}
button[type=submit].az-toevoegen:disabled { opacity: .45; cursor: default; }
.az-hint { margin: 7px 0 0; font-size: 11px; color: var(--zacht); }
.aanzichtvak-label {
  position: absolute; left: 8px; bottom: 8px; padding: 1px 9px; border-radius: 999px; background: var(--pagina);
  color: var(--tekst); font-size: 11px;
}
/* Foto's maken (spec 2026-10-07, *Foto's maken met de telefoon*): een formulier per foto in de voetregel, met een
   voortgangsbalkje en een melding als het mislukt; terwijl een foto omhooggaat staat het paneel uit (.bezig). Let op
   (*Let op*): brons op de foto en in de info. */
.fotoformulier { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.fotoformulier[hidden] { display: none; }
.foto-voortgang { display: block; flex-basis: 100%; width: 100%; height: 6px; }
.foto-voortgang[hidden] { display: none; }
.foto-melding { flex-basis: 100%; margin: 0; color: var(--laat); font-size: 12px; }
.fotolabel-uitleg { display: block; font-size: 11px; }
.paneel.bezig { cursor: progress; }
.foto-letop {
  position: absolute; left: 8px; top: 8px; padding: 1px 7px; border-radius: 4px; background: var(--let-vlak);
  color: var(--let); font-size: 11px; font-weight: 500;
}
.letop-reden { margin: 8px 0 0; color: var(--let); }
.letop-reden b { font-weight: 500; }
.letop-formulier { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px; margin: 8px 0 0; }
.letop-formulier label { margin: 0; flex-basis: 100%; }
.letop-formulier textarea { flex: 1 1 14rem; min-width: 0; font: inherit; font-size: 13px; }
/* Details (spec 2026-10-07, panelen omdraaien): vierkante tegels, 8 per rij (4 op een telefoon), het onderschrift als
   wit strookje onderaan, een let op als bronzen rand; de + -tegel gestippeld; de info en de bronzen balken eronder. */
.detailwidget { position: relative; }
.detailtegels { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.detailtegel { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 7px; background: var(--grijsvlak); }
.detailtegel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.detailtegel.letop { outline: 2px solid var(--let); outline-offset: 2px; }
.detailtegel.plus { background: transparent; border: 1.5px dashed #c9c9c7; }
.detail-plus {
  display: grid; place-items: center; width: 100%; height: 100%; margin: 0; color: var(--zacht); font-size: 22px;
  cursor: pointer;
}
/* Het onderschrift onder de tegel (spec 2026-10-10): zichtbaar, en voor wie foto's maakt een <details> met een klein
   formulier eronder; zonder onderschrift de gestippelde link + Onderschrift. */
.detailcel { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.detail-onderschrift { display: block; font-size: 11px; color: var(--tekst); overflow-wrap: anywhere; }
.onderschrift-bewerk > summary { list-style: none; cursor: pointer; }
.onderschrift-bewerk > summary::-webkit-details-marker { display: none; }
.onderschrift-plus { font-size: 11px; color: var(--zacht); text-decoration: underline dotted; text-underline-offset: 3px; }
.onderschrift-bewerk[open] > summary { color: var(--zacht); }
.onderschrift-bewerk .onderschrift-formulier { flex-wrap: wrap; margin: 4px 0 0; }
.onderschrift-bewerk .onderschrift-formulier input[type=text] { flex: 1 1 8rem; font-size: 12px; }
.detailtegel .info-knop { width: 32px; height: 32px; }
.detailtegel .info-rond { width: 18px; height: 18px; font-size: 10px; }
.detailtegel .foto-letop { left: 4px; top: 4px; padding: 0 5px; font-size: 9px; }
.detailinfo { margin-top: 10px; }
.onderschrift-formulier { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; }
.onderschrift-formulier input[type=text] { flex: 1; min-width: 0; }
.letop-balk {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; padding: 10px 12px; border-radius: 8px;
  background: var(--let-vlak); color: var(--let); font-size: 12px;
}
.letop-balk b { font-weight: 500; }
.letop-balk-tekst { flex: 1; min-width: 0; }
.letop-balk .letop-formulier { margin: 0 0 0 auto; }
/* `.widget .meta` houdt een meta op één regel; in de reden van een let op mag hij afbreken. */
.widget .letop-reden .meta { white-space: normal; }
@media (max-width: 550px) {
  .bedkaarten, .totaalkaartjes { grid-template-columns: minmax(0, 1fr); }
}

/* De widget Controle (spec 2026-10-07): een vinkje per regel, afgevinkt donker met ✓, wie en wanneer rechts. */
.vinkjes { list-style: none; margin: 0; padding: 0; }
.vinkje { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--lijn); font-size: 13px; }
.vinkje:last-child { border-bottom: 0; }
.vinkje-formulier { display: contents; }
button[type=submit].vinkje-knop {
  display: inline-flex; align-items: center; gap: 8px; width: auto; min-height: 0; margin: 0; padding: 0; border: 0;
  background: none; color: var(--tekst); font: inherit; letter-spacing: normal; text-transform: none; text-align: left;
  cursor: pointer;
}
.vinkje-vak {
  display: grid; place-items: center; flex: none; width: 15px; height: 15px; border: 1.5px solid #9a9a98;
  border-radius: 3px; background: var(--pagina); color: var(--pagina); font-size: 10px; line-height: 1;
}
.vinkje.af .vinkje-vak { background: var(--donker); border-color: var(--donker); }
.ster { color: var(--let); }
.vinkje-wie { margin-left: auto; font-size: 11px; color: var(--zacht); white-space: nowrap; }
/* Een kaart: wit met een dunne rand, links het icoon in een grijs vierkantje, daarnaast een klein label en de waarde.
   .widget.kaart, want .kaart is ook de projectkaart op /projecten/ (die houdt zijn eigen regels). */
.widget.kaart {
  flex-direction: row; align-items: flex-start; gap: 11px; padding: 13px 15px; background: var(--pagina);
  border: 1px solid var(--rand); border-radius: var(--hoek);
}
.widget.kaart:hover { border-color: var(--rand); box-shadow: none; }
.kaart-icoon {
  display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 8px;
  background: var(--vlak); color: var(--tekst);
}
.kaart-inhoud { display: flex; flex-direction: column; flex: 1; min-width: 0; align-self: stretch; }
.kaart-label { margin: 0 0 2px; font-size: 11px; font-weight: 400; color: var(--zacht); }
.widget.kaart .widget-getal { margin: 0 0 6px; font-size: 19px; font-weight: 500; line-height: 1.25; }
.widget.kaart .widget-getal span { display: inline; margin: 0 0 0 6px; font-size: 12px; font-weight: 400; }
.widget-kop, .widget-sub {
  margin: 0 0 10px; font-size: var(--sj-kop); font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: var(--zacht);
}
.widget-sub { margin-top: 14px; }
.widget a { color: var(--tekst); font-weight: 500; text-decoration: none; }
.widget a:hover { text-decoration: underline; }
.widget .leeg { margin: 0; }
.widget .meta { display: inline; white-space: nowrap; }
/* Een alinea is een zin, geen label: die breekt af (browsercheck 2026-10-08, Meelezen liep buiten de pagina). */
.widget p.meta { display: block; white-space: normal; }
.widget-getal { margin: 0 0 8px; font-size: 34px; font-weight: 500; line-height: 1; }
.widget-getal span { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; color: var(--zacht); }
.widget-meer { margin: auto 0 0; padding-top: 10px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.widget-lijst, .widget-stroom, .widget-kaarten { list-style: none; margin: 0; padding: 0; }
.widget-lijst li, .widget-stroom li {
  display: flex; align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--lijn);
}
.widget-lijst li:last-child, .widget-stroom li:last-child { border-bottom: 0; }
.widget-regel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.widget-stroom .balk { flex: 0 0 45%; height: 6px; background: var(--lijn); border-radius: 3px; overflow: hidden; align-self: center; }
.widget-stroom .balk span { display: block; height: 100%; background: var(--donker); }

/* De status (spec 2026-10-06, *Status*; templates/core/widgets/_status.html, de widget Route): een rondje van 16 px met
   ✓, ! of leeg, en een woord in de kleur. ok = gedaan of aan zet, open = kan starten of nog te doen, let = aanpassing
   nodig, laat = te laat. Het teken is versiering: de tweede `content` (met een lege alt) houdt het voor een schermlezer
   stil; een browser die dat niet kent, valt terug op de eerste. Een rij die aandacht vraagt (.laat, .let) krijgt het
   zachte vlak over de hele breedte. */
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--zacht); white-space: nowrap; }
.status::before {
  content: ''; display: inline-grid; place-items: center; flex: none; width: 16px; height: 16px; border-radius: 50%;
  font-size: 10px; font-weight: 500; line-height: 1; color: #fff; background: var(--vlak-2);
  box-shadow: inset 0 0 0 1.5px #d6d6d4;
}
.status.ok { color: var(--donker); }
.status.open { color: var(--zacht); }
.status.ok::before { content: '✓'; content: '✓' / ''; background: var(--donker); box-shadow: none; }
.status.let { color: var(--let); }
.status.let::before { content: '!'; content: '!' / ''; background: var(--let); box-shadow: none; }
.status.laat { color: var(--laat); }
.status.laat::before { content: '!'; content: '!' / ''; background: var(--laat); box-shadow: none; }
.widget-lijst li.laat, .widget-lijst li.let { margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: 6px; }
.widget-lijst li.laat { background: var(--laat-vlak); }
.widget-lijst li.let { background: var(--let-vlak); }
/* Bijtekst in zo'n rij in de tekstkleur: --zacht op --laat-vlak haalt maar 4,26:1 (core/test_stijl.py bewaakt het). */
.widget-lijst li.laat .meta, .widget-lijst li.laat .muted, .widget-lijst li.let .meta, .widget-lijst li.let .muted {
  color: var(--tekst);
}

/* Het pilletje (spec 2026-10-06, *Pilletje*): tellers in de zijbalk, V2 · r1, soorten. Dezelfde vorm voor de klassen
   die er al waren (het label van een ronde, de versie bij de viewer, een onderdeel op een bed). */
.pil, .rondelabel, .viewer-versie, .onderdeel-label {
  display: inline-block; padding: 1px 9px; border-radius: 999px; background: var(--vlak-2); color: var(--donker);
  font-size: 11px; font-weight: 500; line-height: 16px; white-space: nowrap;
}

/* De iconen (spec 2026-10-06, *Iconen*; templates/core/_icoon.html): lijntekeningen in de kleur van de tekst. */
.icoon { display: block; width: 18px; height: 18px; flex: none; }

/* De lege toestand (spec 2026-10-06; templates/core/_leeg.html): gecentreerd een rond icoon, één zin, een uitleg in het
   klein en de knop die erbij hoort. Klein: icoon en zin op één regel, voor een lege map in een paneel met meer mappen. */
.leeg-toestand { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 10px 8px; text-align: center; }
.leeg-icoon {
  display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 6px; border-radius: 50%;
  background: var(--vlak-2); color: var(--zacht);
}
.leeg-icoon .icoon { width: 20px; height: 20px; }
.leeg-toestand .leeg { margin: 0; font-size: 13px; color: var(--tekst); }
.leeg-uitleg { margin: 0 0 8px; font-size: 11px; color: var(--zacht); }
.leeg-toestand.klein { flex-direction: row; justify-content: flex-start; gap: 10px; padding: 4px 0; text-align: left; }
.leeg-toestand.klein .leeg-icoon { width: 28px; height: 28px; margin: 0; }
.leeg-toestand.klein .leeg-icoon .icoon { width: 15px; height: 15px; }
.leeg-toestand.klein .leeg { color: var(--zacht); }

/* Projecten: kleine kaarten onder elkaar. Eigen collectie: poses in een rij van vier. */
.widget-kaarten li + li { border-top: 1px solid var(--rand); }
/* Ronde 7: de widget Projecten als projectkaarten met poses (.kp, hierboven bij de kaarten). */
.widget-projectkaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.kp-naam { margin: 0 0 2px; font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.widget-projectkaarten .kaart-tekst { display: block; }
.widget-projectkaarten .kaart-sub { margin: 0; font-size: 11px; }
.widget-poses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; list-style: none; margin: 0; padding: 0; }
.pose { display: block; }
.pose-vlak { display: block; aspect-ratio: 1; overflow: hidden; background: var(--grijsvlak); border-radius: 6px; }
.pose-vlak img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pose-code { display: block; margin-top: 4px; font-size: 12px; }

/* De widgets op een stapscherm (spec 2026-09-30, D3a): per map een blok met zijn naam als kop, de regels mogen
   afbreken (een bestandsnaam met grootte, datum en wie past niet op één regel), en het koppelformulier eronder. */
.widget-map + .widget-map { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rand); }
.widget-map-kop { margin: 0 0 6px; font-size: 13px; font-weight: 500; }
.widget-map .meta { white-space: normal; }
.widget-map .koppelen { margin-top: 8px; }
/* Koppelen op één regel (browsercheck D3a): het bestandsveld en een kleine, lichte knop - niet de donkere knop over de
   hele breedte van button[type=submit]:not(.link); die selector is even specifiek, dus deze staat erna. */
.koppelen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.koppelen input[type=file] { flex: 1 1 12rem; width: auto; min-width: 0; padding: 0; font-size: 12px; }
button[type=submit].knop-klein {
  width: auto; height: var(--sj-knop); min-height: 0; margin: 0; padding: 0 12px; font-size: 10px; color: var(--tekst);
  background: var(--pagina); border: 1px solid var(--rand); border-radius: var(--hoek-knop);
}
button[type=submit].knop-klein:hover { border-color: var(--donker); }
/* De donkere kleine knop (Openen in Orca in de voetregel, spec 2026-10-07): even specifiek als button[type=submit].knop-klein. */
button[type=submit].knop-klein.knop-donker { background: var(--donker); color: #fff; border-color: var(--donker); }
button[type=submit].knop-klein.knop-donker:hover { background: #1f2123; }
/* De lichte kleine knop als link (Openen in Orca op een eigen 3MF, spec 2026-10-07, panelen omdraaien). */
button[type=submit].knop-klein.licht {
  border-color: transparent; background: transparent; text-decoration: underline; text-underline-offset: 3px;
}
/* Koppelen zonder "Choose files" (spec 2026-10-07, panelen omdraaien; core/widgets/_koppelen.html): de knop is het label
   van een visueel verborgen bestandsveld, licht zoals .knop-klein; .licht als een link. Het veld zelf krijgt de focus,
   het label de rand. */
.knop-label {
  display: inline-flex; align-items: center; height: var(--sj-knop); margin: 0; padding: 0 12px;
  border: 1px solid var(--rand); border-radius: var(--hoek-knop); background: var(--pagina); color: var(--tekst);
  font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; cursor: pointer;
}
.knop-label:hover { border-color: var(--donker); }
.knop-label.licht {
  border-color: transparent; background: transparent; text-decoration: underline; text-underline-offset: 3px;
  letter-spacing: .08em;
}
.visueel-verborgen:focus-visible + label { outline: 2px solid var(--donker); outline-offset: 2px; }
.koppelen input[type=file].visueel-verborgen { width: 1px; height: 1px; flex: none; }
.pvoet-knoppen form { margin: 0; }
.paneel [hidden] { display: none; }
/* Alleen voor een schermlezer: weg uit beeld, niet uit de toegankelijkheidsboom. */
.visueel-verborgen {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
/* `input[type=file] { width: 100% }` weegt zwaarder dan de klasse: een verborgen bestandsveld buiten .koppelen (Foto's,
   Details) bleef anders zo breed als zijn paneel en duwde de pagina opzij (browsercheck 2026-10-08). */
input[type=file].visueel-verborgen { width: 1px; height: 1px; padding: 0; }
/* Printbedden (spec 2026-09-30, C1): per bed de thumbnail als klein vlak (zonder beeld een grijs vak), de gegevens
   ernaast op eigen regels, de onderdelen als labels, "project" als klein etiket bij een projectbed. */
.bed-totaal { margin: 0 0 8px; font-weight: 500; }
.bedden { list-style: none; margin: 0; padding: 0; }
.bed { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--lijn); }
.bed:last-child { border-bottom: 0; }
.bed-vlak { flex: 0 0 72px; height: 72px; overflow: hidden; background: var(--grijsvlak); border-radius: 6px; }
.bed-vlak img { display: block; width: 100%; height: 100%; object-fit: contain; }
.bed-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bed-tekst .meta { display: block; white-space: normal; }
.bed-project { font-size: 11px; font-weight: 400; letter-spacing: .5px; text-transform: uppercase; color: var(--zacht); }
.bed-labels { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
/* Orca 3MF: Openen in Orca (een klein formulier) en Downloaden op één regel onder de 3MF. */
.orca-knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }
.orca-openen { margin: 0; }
/* Orca 3MF (spec 2026-10-07, panelen omdraaien): de 3MF van Corpus als witte kaart die omdraait (voorkant het icoon met de
   stand en de kerncijfers, achterkant de indeling per bed in twee kolommen); een andere 3MF als smalle regel; de uitleg
   over Openen in Orca achter een ? (een <details>, zodat het ook op een telefoon met aanraken werkt). */
.mfkaart { margin-bottom: 8px; }
.mfkaart-kant {
  display: flex; gap: 14px; padding: 14px; background: var(--pagina); border: 1px solid var(--rand); border-radius: 10px;
}
.omdraai-achter.mfkaart-kant { flex-direction: column; gap: 6px; }
.mfkaart-tekst { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; }
.widget .mfkaart-tekst .meta { display: block; white-space: normal; }   /* niet de nowrap van .widget .meta */
.mfkaart-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 14px; }
.bedindeling { margin: 0; padding-left: 1.4em; columns: 2; column-gap: 18px; font-size: 12px; }
.bedindeling li { break-inside: avoid; padding: 2px 0; }
/* De Orca 3MF-kaart (ontwerp 2026-10-16, mockups orca-kaart v2 en v3; _orcakaart.html): de nieuwste 3MF groot, met de
   bedden uit de 3MF naast elkaar (vier op een rij, twee op een telefoon), per bed ✓ gcode of gestippeld *geen gcode* in
   het brons van let op, de totalen eronder. Draaien met een klik op de hele kant (sinds 21 okt 2026; static/js/omdraaien.js
   laat links, knoppen en formulieren op de kaart met rust) of met de knop ↻ Alle info, die het toetsenbord bereikt; geen
   knop over de hele kant, want op de voorkant staan links en tekst die je moet kunnen selecteren. Bedden verbergen (static/js/orcakaart.js, .dicht) laat alleen de pillen staan.
   Monochroom zoals de huisstijl: ✓ donker, wat nog mist brons, wat afgekeurd is rood (--laat). */
.omdraai.orcakaart { margin-bottom: 10px; }
.omdraai.orcakaart.kan-draaien { perspective: 2200px; }
.orcakaart.kan-draaien .orcakaart-kant { cursor: pointer; }
.orcakaart-kant {
  display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 14px; background: var(--pagina);
  border: 1px solid var(--rand); border-radius: var(--hoek);
}
.orcakaart-kop { display: flex; align-items: flex-start; gap: 12px; }
.orcakaart-titel { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.orcakaart-naam { font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
.orcakaart-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; color: var(--zacht); }
.orcakaart .omdraai-knop.orcakaart-draai {
  position: static; flex: none; width: auto; height: 32px; padding: 0 12px; border: 1px solid var(--rand);
  border-radius: var(--hoek-knop); background: var(--pagina); color: var(--tekst); font: inherit; font-size: 12px;
  white-space: nowrap;
}
.orcakaart .omdraai-knop.orcakaart-draai[hidden] { display: none; }
.orcakaart .omdraai-knop.orcakaart-draai:hover { background: var(--vlak); }
.orcapil {
  display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; background: var(--vlak-2);
  color: var(--tekst); font-size: 11.5px; white-space: nowrap;
}
.orcapil.ok { background: var(--pagina); box-shadow: inset 0 0 0 1px var(--lijn); color: var(--donker); }
.orcapil.let { background: var(--let-vlak); color: var(--let); }
.orcapil.af { background: var(--laat-vlak); color: var(--laat); }
.orcakaart-stand { margin: 0; }
.bedregel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bedregel-titel { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--zacht); }
.bedregel-kort { display: none; flex-wrap: wrap; gap: 6px; }
.bedden-verbergen {
  margin-left: auto; padding: 0; border: 0; background: none; color: var(--zacht); font: inherit; font-size: 12px;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.bedden-verbergen[hidden] { display: none; }
.orcakaart.dicht .orcabedden { display: none; }
.orcakaart.dicht .bedregel-kort { display: flex; }
.orcabedden {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none;
}
.orcabed { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: 8px; background: var(--vlak); }
.orcabed-beeld { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--grijsvlak); }
.orcabed-beeld img { display: block; width: 100%; height: 100%; object-fit: contain; }
.orcabed-beeld.leeg { background: repeating-linear-gradient(45deg, #f1f1f0, #f1f1f0 6px, #e9e9e7 6px, #e9e9e7 12px); }
.orcabed.zonder .orcabed-beeld { outline: 1.5px dashed #c9b391; outline-offset: -6px; }
.orcabed-nummer {
  position: absolute; top: 8px; left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--pagina);
  color: var(--tekst); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
}
.orcabed-gc { position: absolute; top: 8px; right: 8px; }
.orcabed-info { display: flex; flex: 1; flex-direction: column; gap: 6px; min-width: 0; padding: 8px 10px 10px; font-size: 13px; }
.orcabed-tijd { display: flex; justify-content: space-between; gap: 6px; }
.orcabed-tijd b { font-weight: 500; }
.orcabed-mist { color: var(--let); font-size: 12.5px; }
.orcabed-gcode { color: var(--zacht); font-size: 11.5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.onderdeel-label.af { background: var(--laat-vlak); color: var(--laat); }
.orcasom {
  display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding-top: 10px; border-top: 1px solid var(--rand);
  font-size: 13px;
}
.orcasom dt { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--zacht); }
.orcasom dd { margin: 0; }
.orcasom .ok { color: var(--donker); }
.orcasom .let { color: var(--let); }
.orcasom .zacht { color: var(--zacht); }
/* Herprints (deel 2, mockup v3): een blok per afgekeurde print met een bronzen rand, het label Hn · HERPRINT op het beeld;
   goedgekeurd één regel. Op het bed de afgekeurde onderdelen rood met ✕ en de regel erover. */
.orcabed-af { color: var(--laat); font-size: 12px; }
.orcabed-af a { color: var(--laat); }
.herprints { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.herprint {
  display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 10px;
  border-left: 3px solid var(--let); border-radius: 8px; background: var(--vlak);
}
.herprint.klaar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; padding: 6px 10px; }
.herprint.klaar .herprint-label { position: static; }
.herprint-beeld {
  position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 6px; background: var(--grijsvlak);
}
.herprint-beeld img { display: block; width: 100%; height: 100%; object-fit: contain; }
.herprint-beeld.leeg { background: repeating-linear-gradient(45deg, #f1f1f0, #f1f1f0 6px, #e9e9e7 6px, #e9e9e7 12px); }
.herprint-beeld.wacht img { opacity: .35; filter: blur(1px); }
.herprint-label {
  position: absolute; top: 6px; left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--let);
  color: var(--pagina); font-size: 10.5px; letter-spacing: .08em; white-space: nowrap;
}
.herprint-tekst { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 13px; }
.herprint-delen { font-size: 14px; font-weight: 500; }
.herprint-waarom { color: var(--zacht); font-size: 12.5px; }
.herprint-stand { margin-top: 5px; }
.herprint-stand small { color: var(--zacht); }
.herprint-stand .let { color: var(--let); }
.herprint-acties { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.herprint-naar { font-size: 12px; }
.draaiend {
  display: inline-block; width: 10px; height: 10px; margin-right: 6px; border: 2px solid var(--lijn);
  border-top-color: var(--let); border-radius: 50%; vertical-align: -1px; animation: draaiend 1s linear infinite;
}
@keyframes draaiend { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .draaiend { animation: none; } }
@media (max-width: 640px) {
  .herprint { grid-template-columns: minmax(0, 1fr); }
  .herprint-beeld { width: 132px; }
  .herprint-acties { flex-direction: row; justify-content: flex-start; }
}
/* De gcode van een herprint in Gcodes: een bronzen rand en het label HERPRINT Hn. */
.herprintgcode .bedkaart { border-color: #d9c7a8; }
/* Gcodes ⇄ 3MF (19 okt 2026, mockup afkeuren-nieuwe-gcode deel 4; core/widgets/printbedden.py, static/js/gcodes3mf.js): één widget met
   een schakelaar Gcodes | 3MF (verborgen zonder JavaScript: dan staan de delen onder elkaar, elk met een kopje), de bedden als
   kaarten (vier op een rij, twee op een tablet) met de stand als pil op het beeld, en een eigen rij Reprints met de bronzen
   rand. Een vervangen gcode (G1) vaag; wat nog op een gcode wacht gestippeld. */
.gc3-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; }
.gc3-schakelaar { display: inline-flex; padding: 2px; border-radius: 999px; background: var(--vlak-2); }
.gc3-schakelaar[hidden] { display: none; }
.gc3-schakelaar button {
  padding: 3px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--zacht); font: inherit;
  font-size: 12.5px; cursor: pointer;
}
.gc3-schakelaar button[aria-pressed="true"] { background: var(--pagina); color: var(--tekst); box-shadow: 0 0 0 1px var(--rand); }
.gc3-schakelaar button:focus-visible { outline: 2px solid var(--donker); outline-offset: 1px; }
.gc3-meta { margin-left: auto; color: var(--zacht); font-size: 12px; }
.gc3-meta[hidden], .gc3-deel[hidden] { display: none; }
.gc3-deel + .gc3-deel { margin-top: 18px; }
.gc3.js .gc3-deel + .gc3-deel { margin-top: 0; }
.gc3-deelkop, .gc3-groep {
  display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 11px; font-weight: 400; letter-spacing: .14em;
  text-transform: uppercase; color: var(--zacht);
}
.gc3-groep { margin-top: 16px; }
.gc3.js .gc3-deelkop { display: none; }
.bedkaarten.gcodekaarten { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
.bedkaart-stand { position: absolute; top: 6px; right: 6px; }
.gcodekaarten .vervangen { opacity: .55; }
.gcodekaarten .vervangen .bedkaart-beeld img { filter: grayscale(1); }
.gcodekaarten .gcodewacht .bedkaart-beeld img { opacity: .35; filter: blur(1px); }
.gcodekaarten.reprints .bedkaart { border-color: #d9c7a8; }
.reprint3mf .bedkaart { border-color: #d9c7a8; }
.reprint3mf .bedkaart-tekst .meta { overflow-wrap: anywhere; }
/* Deel E (spec 2026-10-19, mockup planning-sturen-en-aantallen, deel 1): de voet van een gcode - op de itempagina (grijs),
   in de planning (blauw) of ingepland (groen) - met Naar planning of terughalen, boven de knop die de kaart omdraait; en
   bovenaan *2 van 4 in de planning* met Alles naar planning. */
.gc-voet {
  position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 6px; margin-top: auto; padding: 8px 10px; border-top: 1px solid var(--rand);
}
.gc-voet form { display: inline-flex; margin-left: auto; }
.gc-voet button[type=submit].knop { width: auto; min-height: 26px; margin: 0; padding: 0 10px; font-size: 9.5px; }
.gc-voet button[type=submit].link { width: auto; min-height: 0; margin: 0; padding: 0; background: none; color: var(--zacht);
  font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none; text-decoration: underline; }
.gc-planning button[type=submit].knop { width: auto; margin: 0; }
.gc-pil { padding: 1px 8px; border-radius: 999px; background: var(--vlak); color: var(--tekst); font-size: 10.5px; white-space: nowrap; }
.gc-pil.planning { background: #eef1f6; color: #2f4f7f; }
.gc-pil.ingepland { background: #e7f1e4; color: #2f6b45; }
.gc-planning { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 10px; margin: 0 0 10px; }
.gc-planning .meta { font-size: 12px; }
.gcodekaarten .omdraai-voor.bedkaart { min-height: 100%; }
@media (max-width: 900px) {
  .bedkaarten.gcodekaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .bedkaart-stand { top: auto; bottom: 6px; }       /* smal: niet over de titel van de kaart heen */
}
@media (max-width: 380px) {
  .bedkaarten.gcodekaarten { grid-template-columns: minmax(0, 1fr); }
}
.bedkaart-herprint {
  align-self: flex-start; padding: 0 7px; border-radius: 999px; background: var(--let); color: var(--pagina);
  font-size: 10px; letter-spacing: .08em;
}
.orcakaart-blokken { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; }
.orcakaart-blok { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.orcakaart-blok .achter-kop { margin-top: 8px; }
.orcakaart-blok .achter-kop:first-child { margin-top: 0; }
.orcaversies { margin: 0; padding: 0; list-style: none; }
.orcaversie {
  display: flex; align-items: baseline; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--rand); font-size: 13px;
}
.orcaversie:last-child { border-bottom: 0; }
.orcaversie.nu { font-weight: 500; }
.orcaversie-nr { flex: none; width: 22px; color: var(--zacht); }
.orcaversie-wie { flex: 1; min-width: 0; }
.orcaversie-wie small { color: var(--zacht); font-weight: 400; }
.orcaversie-tijd { flex: none; color: var(--zacht); font-size: 12px; }
.orcaversie a { font-size: 12px; }
.orcastart {
  display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 8px; background: var(--vlak);
  color: var(--tekst); font-size: 12.5px;
}
.orcastart b { font-weight: 500; }
.orcastart .let { color: var(--let); }
.orcatijdlijn { margin: 0; padding: 0; list-style: none; font-size: 13px; }
.orcatijdlijn li { display: flex; gap: 10px; padding: 3px 0; }
.orcatijdlijn time { flex: none; width: 92px; color: var(--zacht); font-size: 12px; }
.orcauitleg { margin: 0; white-space: normal; }
@media (max-width: 640px) {
  .orcabed-gc { top: auto; bottom: 8px; }           /* smal: niet over het bednummer heen */
}
@media (max-width: 900px) {
  .orcabedden { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .orcakaart-blokken { grid-template-columns: minmax(0, 1fr); }
}
.mfregels { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mfregel {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--pagina);
  border: 1px solid var(--rand); border-radius: 8px; font-size: 12px;
}
.mfregel .orca-knoppen { flex: none; margin: 0 0 0 auto; }
.soorticoon.klein { width: 30px; height: 30px; border-radius: 7px; font-size: 8px; }
.hulp { position: relative; display: inline-block; vertical-align: middle; }
.hulp summary {
  display: inline-grid; place-items: center; width: 18px; height: 18px; border: 1px solid #bdbdbb; border-radius: 50%;
  color: var(--tekst); font-size: 11px; list-style: none; cursor: pointer;
}
.hulp summary::-webkit-details-marker { display: none; }
.hulp-tekst {
  position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 5; width: min(320px, 80vw); margin: 0;
  padding: 10px 12px; background: var(--pagina); border: 1px solid var(--rand); border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .08); color: var(--tekst); font-size: 12px; white-space: normal;
}
@media (max-width: 550px) {
  .bedindeling { columns: 1; }
  .mfregel { flex-wrap: wrap; }
}
/* De stand van de 3MF-bouwer in de widget Orca 3MF (spec 2026-10-01, _bouwstand.html). */
.bouwstand { margin: 0 0 10px; }
.widget .bouwstand .meta { display: block; white-space: normal; }
.bouwbedden { margin: 4px 0; padding-left: 1.4em; font-size: 13px; }
.bouwmeldingen { margin: 4px 0; padding-left: 1.4em; font-size: 12px; color: var(--zacht); }
.bouwen { margin: 6px 0 0; }
/* De foto's in een vak: de viewer vult de breedte van het vak, met een begrensde hoogte - vierkant (aspect-ratio 1)
   blies hij de rij op tot de breedte van twee kolommen (browsercheck D3a). Zonder foto's een regel met Foto maken per
   aanzicht naast elkaar. */
.widget-fotos .viewer { max-width: none; }
.widget-fotos .viewer-groot { aspect-ratio: auto; height: 280px; }
.widget-fotos .viewer-duim { aspect-ratio: auto; height: 72px; }
.foto-maken-rij { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.foto-maken-rij .foto-maken { margin: 0; }
.foto-maken-rij .foto-maken .knop { display: inline-flex; align-items: center; height: var(--sj-knop); padding: 0 12px; }

/* --- De tracker (spec 2026-09-30, D3a; als kaart sinds spec 2026-10-06; templates/core/_tracker.html,
   static/js/tracker.js): een witte kaart over de hele breedte met Overzicht en de route als rondjes van 20 px met een
   lijn ertussen. Gedaan donker met ✓ en een donkere lijn naar de volgende; de huidige stap (actief of kan starten) een
   ring; nog te doen licht. Het label V2/r2 staat boven het rondje van de stap waar de ronde begon. Op de pc past de
   rij altijd in de breedte (Valentijn, 21 okt 2026: niet meer opzij schuiven): de stappen delen de strook (flex: 1 1
   0), de naam loopt over hoogstens drie regels en wordt anders afgekapt met … (de hele naam in title), en in een smalle
   stap worden letters en marges kleiner met clamp() tegen de breedte van de stap (een container). Alleen onder 768 px
   (een smal venster) schuift de rij nog binnen zijn eigen strook, zoals vroeger; de pagina nooit (min-width: 0 op de
   tracker en de strook). position: relative op de strook: daar rekent tracker.js offsetLeft tegen. Een raster met
   vlakken, zodat de tracker als planning (hieronder, spec 2026-10-09) dezelfde delen anders kan leggen --- */
.tracker {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "overzicht tijd teller knoppen";
  align-items: start; align-content: start; column-gap: 18px; min-width: 0; padding: 4px 16px 2px;
  background: var(--pagina); border: 1px solid var(--rand); border-radius: var(--hoek);
}   /* align-content: start - terwijl de hoogte meebeweegt (tracker_planning.js) rekken de rijen niet uit */
.tracker-overzicht {
  grid-area: overzicht; padding: 20px 0 10px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--zacht); text-decoration: none;
}
.tracker-overzicht[aria-current="page"] { color: var(--tekst); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
.tracker-tijd { grid-area: tijd; position: relative; min-width: 0; }
.tracker-rij { position: relative; display: flex; flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; list-style: none; }
.tracker-stap { position: relative; flex: 1 1 0; min-width: 0; max-width: 120px; container-type: inline-size; }
.tracker-stap::before {          /* de lijn vanuit de vorige stap, ter hoogte van het midden van de rondjes */
  content: ""; position: absolute; top: 27px; right: 50%; width: 100%; height: 1.5px; background: var(--rand);
  transition: opacity .25s;
}
.tracker-stap:first-child::before { display: none; }
.tracker-voltooid + .tracker-stap::before { background: var(--donker); }
.tracker-stap a {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 18px clamp(1px, 10cqi - 5px, 6px) 10px;
  color: inherit; text-align: center; text-decoration: none;
}
.tracker-stap a[aria-current="page"] .tracker-naam { text-decoration: underline; text-underline-offset: 3px; }
.tracker-baan { position: relative; display: flex; justify-content: center; }
.tracker-rondje {
  position: relative; z-index: 1; display: grid; place-items: center; width: 20px; height: 20px;
  border: 1.5px solid #cfcfcd; border-radius: 50%; background: var(--pagina); color: #fff; font-size: 10px; line-height: 1;
  overflow: hidden;
}
.tracker-voltooid .tracker-rondje { background: var(--donker); border-color: var(--donker); }
.tracker-actief .tracker-rondje, .tracker-kan-starten .tracker-rondje {
  border: 2px solid var(--donker); background: var(--donker); box-shadow: inset 0 0 0 3px var(--pagina);
}
.tracker-te-doen .tracker-rondje { border-color: #cfcfcd; }
/* Productie deel 1 (spec 2026-10-08): een overgeslagen stap een licht rondje met een streep; een open stap die niet
   meedoet (geen nabewerking) gestippeld, met de naam zacht. */
.tracker-overgeslagen .tracker-rondje { border-color: #cfcfcd; background: linear-gradient(to bottom right, transparent calc(50% - 0.75px), #cfcfcd calc(50% - 0.75px), #cfcfcd calc(50% + 0.75px), transparent calc(50% + 0.75px)); }
.tracker-overgeslagen + .tracker-stap::before { background: var(--donker); }
.tracker-slaat-over .tracker-rondje { border-style: dashed; }
.tracker-slaat-over .tracker-naam, .tracker-overgeslagen .tracker-naam { color: var(--zacht); }
/* Spec 2026-10-20 (deel 2, mockup B): een uitgezette stap - een licht, gestippeld rondje met een schuine streep, de naam
   zacht; de tooltip (title) zegt wie hem uitzette en waarom. Op de telefoon (.tb-uitgezet) net zo. */
.tracker-uitgezet .tracker-rondje, .tb-uitgezet .tb-rondje {
  border: 1px dashed #b9bcc0; background: linear-gradient(to bottom right, transparent calc(50% - 0.75px), #b9bcc0 calc(50% - 0.75px), #b9bcc0 calc(50% + 0.75px), transparent calc(50% + 0.75px));
}
.tracker-uitgezet .tracker-naam, .tracker-uitgezet .tracker-tekst { color: var(--zacht); }
.tracker-uitgezet a { cursor: help; }
.tracker-naam {
  display: -webkit-box; max-width: 100%; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  font-size: clamp(9px, 11.5cqi + 1.2px, 11px); line-height: 1.3; overflow-wrap: break-word; hyphens: auto;
}
.tracker-actief .tracker-naam, .tracker-kan-starten .tracker-naam { font-weight: 500; }
.tracker-naam .rondelabel { position: absolute; top: 0; left: 50%; transform: translateX(-50%); font-size: 9px; line-height: 14px; }
.tracker-tekst {
  display: -webkit-box; max-width: 100%; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  font-size: clamp(9px, 14cqi, 10px); line-height: 1.25; color: var(--zacht); overflow-wrap: break-word;
}
.tracker .tracker-rol, .tracker .tracker-gewenst, .tracker .tracker-toegezegd, .tracker .tracker-rooster, .tracker .tracker-plankop,
.tracker .tracker-onder { display: none; }   /* alleen uitgeklapt (hieronder); twee klassen: .planning-kop staat verderop */
/* Op te leveren (spec 2026-10-07): de teller rechts in de tracker, met een smal balkje. */
.tracker-teller {
  grid-area: teller; align-self: center; margin: 0; padding: 8px 0 8px 16px; border-left: 1px solid var(--rand);
  font-size: 11px; color: var(--zacht); white-space: nowrap;
}
.tracker-teller b { font-size: 15px; font-weight: 500; color: var(--tekst); }
.tracker-teller-balk {
  display: block; width: 64px; height: 4px; margin-top: 4px; overflow: hidden; border-radius: 2px; background: var(--vlak-2);
}
.tracker-teller-balk span { display: block; height: 100%; background: var(--donker); }

/* Te smal voor één regel (21 okt 2026): staat de rij naast Overzicht, de teller en de knop, dan blijft er voor dertien
   stappen te weinig over. Dan krijgt de rij een eigen regel over de hele breedte van de kaart, onder Overzicht met
   rechts de teller en de knop. Gemeten aan de breedte van .zone-waar (een container: de pagina met of zonder de
   zijbalk), en met het aantal stappen (:has met nth-child): tot 1100 px altijd, tot 1400 px vanaf elf stappen. Niet
   uitgeklapt (de planning legt zijn eigen raster) en niet onder 768 px (daar het raster van de media-query verderop). */
.zone-waar:has(> .tracker) { container: trackerzone / inline-size; }
@media (min-width: 768px) {
  @container trackerzone (max-width: 1099.98px) {
    .tracker:not(.is-open) { grid-template-areas: "overzicht . teller knoppen" "tijd tijd tijd tijd"; }
  }
  @container trackerzone (max-width: 1399.98px) {
    .tracker:not(.is-open):has(.tracker-stap:nth-child(11)) {
      grid-template-areas: "overzicht . teller knoppen" "tijd tijd tijd tijd";
    }
  }
}

/* --- De tracker wordt de planning (spec 2026-10-09; bijlage bijlagen/tracker/tracker-wordt-planning.html,
   static/js/tracker_planning.js). Rechts de knop (een link: zonder JavaScript ?planning=1) en de rode pil "n te laat".
   Drie standen als klasse op de tracker, elk een laag: .is-open legt de stappen onder elkaar (naam en afdeling links,
   het rondje op de linkerrand van de tijdlijn), .is-rooster rolt de weken uit en laat vandaag zakken, .is-balken schuift
   elk rondje naar zijn begin en rekt het uit tot zijn balk (--links, --breedte uit planning.tijdlijn), daarna de
   bolletjes van gewenst en toegezegd en de legenda. Het script zet ze na elkaar (de vlucht van .is-open met FLIP),
   .is-sluiten keert de vertraging om, .zonder-animatie en prefers-reduced-motion wisselen direct. De tijdlijn tekent
   zoals de widget Planning deed: gedaan donker, aan zet middengrijs, de rest licht, rood wat te laat is. --- */
.tracker-knoppen { grid-area: knoppen; align-self: center; display: flex; align-items: center; gap: 8px; }
.tracker-knop {
  display: inline-flex; align-items: center; height: 28px; padding: 0 14px; border-radius: 999px; background: var(--donker);
  color: #fff; font-size: 12px; font-weight: 500; letter-spacing: .02em; text-decoration: none; white-space: nowrap;
}
.tracker-knop:hover { background: #3d4043; color: #fff; }
.tracker-knop:focus-visible { outline: 2px solid var(--donker); outline-offset: 2px; }
.tracker-laat {
  padding: 1px 9px; border-radius: 9px; background: var(--laat-vlak); color: var(--laat); font-size: 11px; line-height: 16px;
  white-space: nowrap;
}
.tracker.lijn-weg .tracker-stap::before { opacity: 0; }

.tracker.is-open {
  grid-template-areas: "overzicht plankop teller knoppen" "tijd tijd tijd tijd" "onder onder onder onder";
  padding-bottom: 14px;
}
.tracker.is-open .tracker-plankop {
  grid-area: plankop; display: flex; align-self: center; margin: 0; padding: 14px 0 10px; transition: opacity .4s;
}
@starting-style { .tracker.is-open .tracker-plankop { opacity: 0; } }   /* zacht erin; niet met .zonder-animatie */
.tracker.is-open .tracker-tijd { --kolom: clamp(104px, 30%, 210px); margin-top: 4px; padding-top: 24px; }
.tracker.is-open .tracker-rij { display: block; overflow: visible; border-top: 1px solid transparent; transition: border-color .3s; }
.tracker.is-open .tracker-stap {
  width: auto; max-width: none; border-bottom: 1px solid transparent; transition: border-color .3s calc(var(--i, 0) * 25ms);
}
.tracker.is-open .tracker-stap::before { display: none; }
.tracker.is-open .tracker-stap a {
  display: grid; grid-template-columns: var(--kolom) minmax(0, 1fr); grid-template-rows: auto auto; align-content: center;
  align-items: center; justify-items: start; gap: 1px 0; min-height: 40px; padding: 4px 0; text-align: left;
}
.tracker.is-open .tracker-naam {
  display: block; grid-column: 1; grid-row: 1; max-width: calc(100% - 12px); overflow: hidden; font-size: 12px;
  white-space: nowrap; text-overflow: ellipsis; -webkit-line-clamp: none;
}
.tracker.is-open .tracker-naam .rondelabel { position: static; transform: none; margin-right: 2px; }
.tracker.is-open .tracker-tekst { display: none; }
.tracker.is-open .tracker-rol {
  display: block; grid-column: 1; grid-row: 2; max-width: calc(100% - 12px); overflow: hidden; font-size: 10px;
  color: var(--zacht); white-space: nowrap; text-overflow: ellipsis;
}
.tracker.is-open .tracker-stap a:hover .tracker-naam { text-decoration: underline; text-underline-offset: 3px; }
.tracker.is-open .tracker-baan { display: block; grid-column: 2; grid-row: 1 / 3; align-self: stretch; justify-self: stretch; }
/* Het rondje op de linkerrand van de tijdlijn; met .is-balken de balk. Geen transform: die is van de vlucht. */
.tracker.is-open .tracker-rondje {
  position: absolute; left: 0; top: 50%; margin: -10px 0 0 -10px;
  transition-property: left, width, height, margin, border-radius, border-width, background-color, border-color, box-shadow, color;
  transition-duration: .6s; transition-timing-function: cubic-bezier(.3, .7, .2, 1);
  transition-delay: calc(var(--i, 0) * 45ms);
}
.tracker.is-balken .tracker-rondje {
  left: var(--links); width: var(--breedte); min-width: 6px; height: 8px; margin: -4px 0 0; border-width: 0;
  border-radius: 4px; background: #d8d9db; box-shadow: none; color: transparent;
}
.tracker.is-balken .tracker-rondje[data-balk="klaar"] { background: var(--donker); }
.tracker.is-balken .tracker-rondje[data-balk="nu"] { background: #9fa2a6; }
/* Een oude ronde (spec 2026-10-09): waar hij stopte middengrijs met een bronzen eind, wat hij niet bereikte geen balk. */
.tracker.is-balken .tracker-rondje[data-balk="gestopt"] { background: #9fa2a6; box-shadow: inset -3px 0 0 var(--let); }
.tracker.is-balken .tracker-rondje[data-balk="niet"] { opacity: 0; }
/* Ronde 6: slepen aan het eind van de balk van een open stap die jij toezegt (static/js/tracker_slepen.js). Het rondje
   alleen met .is-balken en bij aanwijzen; de ballon toont de datum en het gevolg. Het formulier is verborgen. */
.tracker-greep { display: none; }
.tracker.is-balken .tracker-greep {
  display: block; position: absolute; z-index: 3; top: 50%; left: calc(var(--links) + var(--breedte)); width: 18px; height: 18px;
  margin: -9px 0 0 -9px; border: 2px solid var(--donker); border-radius: 50%; background: var(--pagina); cursor: ew-resize;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15); opacity: 0; transition: opacity .15s; touch-action: none; }
.tracker.is-balken .tracker-stap:hover .tracker-greep, .tracker-stap.sleept .tracker-greep { opacity: 1; }
.tracker-stap.sleept .tracker-rondje { transition: none; }
.tracker-ballon { position: absolute; z-index: 4; bottom: calc(50% + 14px); transform: translateX(-50%); padding: 3px 8px;
  border-radius: 6px; background: var(--donker); color: #fff; font-size: 11px; white-space: nowrap; pointer-events: none; }
.tracker-ballon.laat { background: var(--laat); }
.tracker-sleepform { display: none; }
.tracker.is-open .tracker-gewenst, .tracker.is-open .tracker-toegezegd {
  display: block; position: absolute; z-index: 2; left: var(--plek); top: 50%; width: 14px; height: 14px;
  margin: -7px 0 0 -7px; border-radius: 50%; opacity: 0; transition: opacity .3s;
}
.tracker-gewenst { border: 2px solid var(--donker); background: var(--pagina); }
.tracker-gewenst.laat { border-color: var(--laat); }
.tracker-toegezegd { background: var(--donker); }
.tracker-toegezegd.laat { background: var(--laat); }
.tracker.is-balken .tracker-gewenst, .tracker.is-balken .tracker-toegezegd {
  opacity: 1; transition-delay: calc(400ms + var(--i, 0) * 45ms);
}
/* Het weekrooster over de baan van de tijdlijn (vanaf --kolom), met de bronzen lijn op vandaag. */
.tracker.is-open .tracker-rooster {
  display: grid; grid-template-columns: repeat(var(--weken), minmax(0, 1fr)); position: absolute; top: 0; bottom: 0;
  left: var(--kolom); right: 0; pointer-events: none;
}
.tracker-week {
  position: relative; min-width: 0; padding: 5px 0 0 4px; overflow: hidden; font-size: 10px; line-height: 14px;
  color: var(--zacht); white-space: nowrap; opacity: 0; transition: opacity .3s calc(var(--w, 0) * 40ms);
}
.tracker-week::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: var(--lijn);
  transform: scaleY(0); transform-origin: top; transition: transform .5s cubic-bezier(.3, .7, .2, 1) calc(var(--w, 0) * 40ms);
}
.tracker-vandaag {
  position: absolute; z-index: 3; top: 22px; bottom: 0; left: var(--vandaag); width: 2px; margin-left: -1px;
  background: var(--let); transform: scaleY(0); transform-origin: top; transition: transform .6s cubic-bezier(.3, .7, .2, 1) .2s;
}
.tracker-vandaag-label {
  /* Een vak van vaste breedte rond vandaag, geklemd tussen de randen van het rooster (eindreview: met vandaag in de
     eerste week knipte het rooster het label af); de pil staat in het midden van het vak. */
  position: absolute; z-index: 4; top: 4px; left: clamp(0px, calc(var(--vandaag) - 3em), calc(100% - 6em)); width: 6em;
  display: flex; justify-content: center; font-size: 9px; line-height: 14px; opacity: 0; transition: opacity .3s .5s;
}
.tracker-vandaag-label > span {
  padding: 0 5px; border-radius: 3px; background: var(--let); color: #fff; white-space: nowrap;
}
.tracker.is-rooster .tracker-rij { border-top-color: var(--lijn); }
.tracker.is-rooster .tracker-stap { border-bottom-color: var(--lijn); }
.tracker.is-rooster .tracker-week, .tracker.is-rooster .tracker-vandaag-label { opacity: 1; }
.tracker.is-rooster .tracker-week::before, .tracker.is-rooster .tracker-vandaag { transform: scaleY(1); }
/* Onder de tijdlijn de legenda en de datums per stap (de lijst van de widget, met de formulieren). */
.tracker.is-open .tracker-onder { grid-area: onder; display: block; opacity: 0; transition: opacity .4s; }
.tracker.is-balken .tracker-onder { opacity: 1; transition-delay: .5s; }
.tracker-onder .planning-legenda { margin-top: 12px; }
.tracker-datums { margin-top: 12px; }
.tracker-datums > summary {
  width: max-content; cursor: pointer; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
}
.tracker-datums[open] > summary { margin-bottom: 8px; }
.tracker-datums a { font-weight: 400; }
.tracker-datums .gemarkeerd a { font-weight: 500; }
/* Terug: het uitklappen achteruit afgespeeld (fixgolf ronde 4). Elk deel houdt zijn duur en begint op --terug (de duur
   van rooster en balken samen, uit tracker_planning.js) min het moment waarop het bij het uitklappen klaar was; de
   curve gespiegeld in de tijd: GLAD (.3, .7, .2, 1) wordt (.8, 0, .7, .3), ease (.25, .1, .25, 1) wordt
   (.75, 0, .75, .9). Alleen met .is-open: daarna heeft het rondje geen overgang (de vlucht is van het script). */
.tracker.is-open.is-sluiten .tracker-rondje {
  transition-duration: .6s; transition-timing-function: cubic-bezier(.8, 0, .7, .3);
  transition-delay: calc(var(--terug) - 600ms - var(--i, 0) * 45ms);
}
.tracker.is-sluiten .tracker-gewenst, .tracker.is-sluiten .tracker-toegezegd {
  transition-timing-function: cubic-bezier(.75, 0, .75, .9); transition-delay: calc(var(--terug) - 700ms - var(--i, 0) * 45ms);
}
.tracker.is-sluiten .tracker-onder {
  transition-timing-function: cubic-bezier(.75, 0, .75, .9); transition-delay: calc(var(--terug) - 900ms);
}
.tracker.is-sluiten .tracker-week {
  transition-timing-function: cubic-bezier(.75, 0, .75, .9); transition-delay: calc(var(--terug) - 300ms - var(--w, 0) * 40ms);
}
.tracker.is-sluiten .tracker-week::before {
  transition-timing-function: cubic-bezier(.8, 0, .7, .3); transition-delay: calc(var(--terug) - 500ms - var(--w, 0) * 40ms);
}
.tracker.is-sluiten .tracker-vandaag {
  transition-timing-function: cubic-bezier(.8, 0, .7, .3); transition-delay: calc(var(--terug) - 800ms);
}
.tracker.is-sluiten .tracker-vandaag-label {
  transition-timing-function: cubic-bezier(.75, 0, .75, .9); transition-delay: calc(var(--terug) - 800ms);
}
.tracker.is-sluiten .tracker-rij { transition-timing-function: cubic-bezier(.75, 0, .75, .9); transition-delay: calc(var(--terug) - 300ms); }
.tracker.is-open.is-sluiten .tracker-stap {
  transition-timing-function: cubic-bezier(.75, 0, .75, .9); transition-delay: calc(var(--terug) - 300ms - var(--i, 0) * 25ms);
}
/* De kopregel verdwijnt met .is-open uit het raster: hij vervaagt in de laatste 0,4 s voor de vlucht. */
.tracker.is-sluiten .tracker-plankop {
  opacity: 0; transition-timing-function: cubic-bezier(.75, 0, .75, .9); transition-delay: calc(var(--terug) - 400ms);
}
.tracker.is-sluiten .tracker-stap::before { transition-timing-function: cubic-bezier(.75, 0, .75, .9); }
/* Tijdens de vlucht terug knipt de rij niet, zoals uitgeklapt: de rondjes en namen komen van onder en links uit de
   tijdlijn (bij het uitklappen vlogen ze er net zo onbegrensd heen); de tracker zelf knipt (overflow tijdens de vlucht). */
.tracker.is-landen .tracker-rij { overflow: visible; }
/* Het golden sample (ronde 4 aanpassingen): de laatste stap van de sampleroute is af - het rondje goud, en onder de naam
   "-000 Golden sample" als pilletje (`t.golden`, _tracker.html). */
.tracker-golden .tracker-rondje {
  border-color: #b08a2e; background: linear-gradient(135deg, #9c7724, #f0d27e 50%, #9c7724);
}
.tracker-gs {
  display: inline-block; padding: 1px 7px; border-radius: 999px; background: #f6efd9; color: #6e5212; font-size: 9px;
  font-weight: 500; letter-spacing: .02em; white-space: nowrap;
}
/* Overdragen (ronde 6; de goedgekeurde demo overdragen-demo-v4; static/js/tracker_overdragen.js, klassen ovd-): na je
   eigen klik op Overdragen of Afronden speelt de overgang op het scherm van de volgende stap, in deze volgorde:
   1. het rondje van de stap die je net overdroeg: indrukken (.82 → 1.12 → 1), vullen met een veer, het vinkje tekent,
      een golf (een ring die uitdijt en vervaagt) en zes vonkjes (.ovd-knal, samen ~0,7 s);
   2. de lijn loopt naar het volgende rondje (.ovd-lijn, 0,38 s; over meer lijnen verdeeld met --ovd-duur/--ovd-na);
   3. daar tekent de ring helemaal rond, vanaf links waar de lijn binnenkomt (.ovd-ring-aan, 0,5 s), en die stap is aan
      de beurt.
   Tot het script ze weghaalt staat de vorige stand: .ovd-voor op de overgedragen stap (het rondje zoals aan de beurt,
   naam vet), .ovd-leeg op de lijnen naar de volgende, .ovd-wacht op de volgende (nog te doen). Het golden sample in goud
   met een glans over het rondje (.ovd-glans) en het pilletje "-000 Golden sample" (.ovd-gs). De schijf en het vinkje
   zijn een SVG op het rondje (.ovd-svg) die in de eindstand blijft liggen (.ovd-klaar); de ring op de volgende gaat weg
   als hij rond is. De lijnen blijven de ::before van de stappen (aan de rondjes vast). */
.tracker-stap.ovd-leeg::before {
  background: linear-gradient(var(--donker), var(--donker)) 0 0 / 0% 100% no-repeat var(--rand);
}
.tracker-stap.ovd-leeg.ovd-lijn::before {
  background-size: 100% 100%;
  transition: background-size var(--ovd-duur, .38s) var(--ovd-na, 0s) cubic-bezier(.45, 0, .25, 1);
}
.tracker-stap.ovd-voor .tracker-rondje {
  border: 2px solid var(--donker); background: var(--donker); box-shadow: inset 0 0 0 3px var(--pagina); color: transparent;
}
.tracker-stap.ovd-wacht .tracker-rondje { border: 1.5px solid #cfcfcd; background: var(--pagina); box-shadow: none; }
.tracker-stap.ovd-naar .tracker-rondje { transition: background-color .25s, box-shadow .25s; }
.tracker-stap.ovd-voor:not(.ovd-knal) .tracker-naam { font-weight: 500; }
.tracker-stap.ovd-wacht .tracker-naam { font-weight: 400; }
.tracker-stap.ovd-voor .tracker-gs { opacity: 0; transform: translateY(-4px); }
.tracker-stap.ovd-gs .tracker-gs { opacity: 1; transform: none; transition: opacity .3s, transform .3s; }
.ovd-svg {
  position: absolute; left: 50%; top: 0; z-index: 2; width: 20px; height: 20px; margin-left: -10px; overflow: visible;
  pointer-events: none;
}
.tracker.is-open .ovd-svg { display: none; }       /* uitgeklapt is het rondje een balk */
.ovd-schijf { fill: var(--donker); transform: scale(0); transform-origin: 10px 10px; }
.ovd-vink {
  fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 12.1;
  stroke-dashoffset: 12.1;
}
.ovd-golf { fill: none; stroke: var(--donker); stroke-width: 1.5; opacity: 0; transform-origin: 10px 10px; }
.ovd-vonk { stroke: var(--donker); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 6; opacity: 0; }
.ovd-glans-vlak { fill: url(#ovd-glansverloop); opacity: 0; }
.ovd-ring {
  fill: none; stroke: var(--donker); stroke-width: 2; stroke-dasharray: 56.6; stroke-dashoffset: 56.6;
  transform: rotate(180deg); transform-origin: 10px 10px;
}
.ovd-ring-aan .ovd-ring { stroke-dashoffset: 0; transition: stroke-dashoffset .5s cubic-bezier(.5, 0, .3, 1); }
/* 1. Het vinkje: indrukken, vullen met een veer, het vinkje, de golf en de vonkjes. */
.ovd-knal .tracker-baan { animation: ovd-indruk .5s cubic-bezier(.3, 1.4, .5, 1) 1; }
.ovd-knal .ovd-schijf { animation: ovd-vul .38s .1s cubic-bezier(.3, 1.6, .5, 1) both; }
.ovd-knal .ovd-vink { animation: ovd-vink .28s .34s ease-out both; }
.ovd-knal .ovd-golf { animation: ovd-golf .7s .3s ease-out both; }
.ovd-knal .ovd-vonk { animation: ovd-vonk .55s .32s ease-out both; }
.ovd-klaar .ovd-schijf { transform: scale(1); }
.ovd-klaar .ovd-vink { stroke-dashoffset: 0; }
@keyframes ovd-indruk { 0% { transform: scale(1); } 25% { transform: scale(.82); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes ovd-vul { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes ovd-vink { from { stroke-dashoffset: 12.1; } to { stroke-dashoffset: 0; } }
@keyframes ovd-golf { 0% { opacity: .5; transform: scale(1); } 100% { opacity: 0; transform: scale(2.3); } }
@keyframes ovd-vonk { 0% { opacity: 0; stroke-dashoffset: 6; } 30% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: -6; } }
/* Het golden sample: hetzelfde in goud, met een glans over het rondje. */
.tracker-golden .ovd-ring, .tracker-golden .ovd-golf, .tracker-golden .ovd-vonk { stroke: #b08a2e; }
.tracker-golden .ovd-schijf { fill: url(#ovd-goud); }
.ovd-glans .ovd-glans-vlak { animation: ovd-glans 1s .7s ease-in-out 1 both; }
@keyframes ovd-glans { from { opacity: 1; transform: translateX(-18px); } to { opacity: 1; transform: translateX(18px); } }
/* #vt-anker (.vt-anker) staat direct onder de tracker, waar de inhoud begint: bij de stapwissel opent de nieuwe stap met
   die plek op dezelfde hoogte in het venster (static/js/overgang.js). De tracker plakt sinds ronde 7 niet meer. */
.vt-anker { display: block; height: 0; }
/* Zonder animatie: bij het laden in de onthouden stand, en met prefers-reduced-motion. */
.tracker.zonder-animatie, .tracker.zonder-animatie *, .tracker.zonder-animatie *::before {
  transition: none !important; animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .tracker, .tracker *, .tracker *::before { transition: none !important; animation: none !important; }
}

/* Op de telefoon (< 768 px; spec 2026-10-06, *Randgevallen*): twee kolommen, waarin een paneel (en breed en groot) de
   volle breedte neemt - één kolom - en twee kaarten naast elkaar passen; groot blijft twee rijen hoog. De titel kleiner,
   het tweede deel eronder. */
@media (max-width: 767px) {
  .raster-kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sjabloon h1 { font-size: 26px; }
  .titel-deel, .titel .stapkop { font-size: 12px; letter-spacing: .18em; }
  .schermkop-acties { margin-top: 0; }
  /* De tracker (spec 2026-10-09): Overzicht en de knop boven, de teller van Op te leveren op een eigen rij eronder
     (eindreview: naast elkaar viel hij over Overzicht), dan de rij of de tijdlijn; niets loopt over. Zonder teller
     is zijn rij leeg en nul hoog. */
  .tracker { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "overzicht knoppen" "teller teller" "tijd tijd"; }
  .tracker.is-open {
    grid-template-areas: "overzicht knoppen" "teller teller" "plankop plankop" "tijd tijd" "onder onder";
  }
  .tracker-overzicht { justify-self: start; padding: 12px 0 4px; }
  .tracker-teller { justify-self: start; padding: 2px 0 4px; border-left: 0; }
  /* Een smal venster (geen telefoon: die heeft de trackerbalk): de rij schuift binnen zijn strook, tracker.js zet het
     doel in beeld. Vanaf 768 px past hij altijd (hierboven). */
  .tracker:not(.is-open) .tracker-rij { overflow-x: auto; }
  .tracker:not(.is-open) .tracker-stap { flex: 0 0 auto; width: 104px; max-width: none; }
  .tracker.is-open .tracker-plankop { padding: 4px 0 6px; }
  .tracker.is-open .tracker-tijd { --kolom: clamp(96px, 36%, 160px); }
  .tracker.is-open .tracker-rooster { overflow-x: clip; }
  .tracker-week { padding-left: 2px; overflow: visible; font-size: 9px; }   /* het label loopt door over de lege week ernaast */
  .tracker-week:nth-child(even) { color: transparent; }
}

/* --- Het itemscherm (spec 2026-09-30, D3a; de huisstijl, spec 2026-10-06; templates/core/itemscherm.html,
   _item_object.html, _stap_actie.html, _stap_ontbreekt.html): Overzicht en de stapschermen op het sjabloon. Bovenaan
   over de hele breedte de kop (kruimelpad, de titel in twee delen, rechts de actie), zone 5 als er iets ontbreekt en
   de tracker; vanaf 1280 px daaronder zone 2 (het item, een paneel) links naast het werk (.zone-werk), smaller
   eronder. De rijen van het raster groeien mee met hun inhoud: een lijst bestanden of een viewer past niet in een vast
   vak zoals op het dashboard --- */
.schermkop {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 24px;
  margin: 0 0 20px;
}
.schermkop-tekst { min-width: 0; }
.schermkop .kruimels, .kruimel {
  margin: 0 0 8px; font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--zacht);
}
.schermkop .kruimels a { color: var(--zacht); text-decoration: none; }
.schermkop .kruimels a:hover { color: var(--tekst); text-decoration: underline; }
.titel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
/* Een naam met een woord langer dan de regel breekt alleen dat woord af (break-word), de rest niet (de opmaakwacht). */
.titel > h1 { min-width: 0; max-width: 100%; }
.titel-deel, .titel .stapkop {
  margin: 0; font-size: 14px; font-weight: 400; letter-spacing: .28em; text-transform: uppercase; color: var(--zacht);
}
.titel .stapkop::before { content: "/ "; }
.titel .stapkop .muted { margin-left: 6px; font-size: 12px; letter-spacing: .04em; text-transform: none; }
.schermkop .standzin { margin: 8px 0 0; font-size: 13px; }
/* De kop in één rustige regel (17 okt 2026, mockup stap-3d-model): onder de titel klein de stand, "namens" en toezeggen;
   rechts alleen de knoppen (Vragen, Nieuw, de actie van de stap). */
.kopregel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 8px 0 0; }
.kopregel > p { margin: 0; }
.schermkop .kopregel .standzin { margin: 0; }
.kopregel .namens { font-size: 12px; color: var(--zacht); }
/* Zone 5: wat ontbreekt, in het brons van "let op", onder de kop. */
.zone-ontbreekt {
  display: flex; align-items: center; gap: 10px; margin: 0 0 20px; padding: 10px 14px; font-size: 13px;
  color: var(--let); background: var(--let-vlak); border-radius: var(--hoek);
}
.zone-ontbreekt p { margin: 0; }
.zone-ontbreekt .eis { color: var(--let); }
.zone-ontbreekt-icoon { flex: none; }
.zone-ontbreekt-sluit { margin-left: auto; padding: 0 4px; color: var(--let); text-decoration: none; }
.zone-ontbreekt-sluit:hover { text-decoration: underline; }
/* De versie en revisie in de kop van het scherm (spec 2026-10-05; _revisiekop.html; sinds de huisstijl in de kop, keuze
   van Valentijn): de keuzelijst naast de titel en Nieuwe versie rechts als kleine uitklappers, en direct onder de kop
   de grijze balk als je een oudere revisie bekijkt. */
.revisieknop { position: relative; }
.revisieknop summary { list-style: none; cursor: pointer; }
/* Nieuwe versie en Nieuwe revisie: een gewone lichte knop (.knop) als je er één mag, anders samen onder Nieuw (.nw-). */
.revisieknop summary::-webkit-details-marker { display: none; }
.revisieformulier {
  position: absolute; left: 0; top: calc(100% + 4px); z-index: 3; min-width: 220px; margin: 0; padding: 8px 10px;
  list-style: none; font-size: 13px;
  background: var(--pagina); border: 1px solid var(--rand); border-radius: var(--radius); box-shadow: 0 8px 24px #1d26301f;
}
.revisieformulier { min-width: 280px; }
.revisieformulier textarea { width: 100%; margin: 4px 0 8px; }
.revisiebalk { margin: 0 0 12px; padding: 6px 10px; font-size: 13px; background: var(--vlak-2); color: var(--tekst);
               border-radius: var(--radius); }
/* De route per ronde (spec 2026-10-06): het label van een nieuwe ronde (V2, r2) op de tracker, de kaart, de widget
   Route en in Mijn taken als pilletje (grijs sinds de huisstijl); een klein V1 of r1 bij een stap die uit een eerdere ronde doorgeldt; een
   vervangen stap grijs; de tabbladen van de rondes op Overzicht; de wijzigingsbrief in zone 2. */
.kaart-ronde { margin: 6px 0 0; font-size: 12px; color: var(--donker); }
.tracker-uit { font-size: 10px; color: var(--zacht); }
.tracker-vervangen .tracker-rondje { border-color: var(--rand); background: var(--vlak-2); }
.tracker-vervangen .tracker-naam, .tracker-vervangen .tracker-tekst { color: var(--zacht); }
.routestap-vervangen td { color: var(--zacht); }
/* De versiebalk (spec 2026-10-09, _versiebalk.html): onder de kop de versies en binnen de gekozen versie de revisies
   als pillen, de gekozen donker, de huidige met een klein "huidig"; onder de huidige tracker de regel over waar de
   vorige ronde bleef. */
.versiebalk { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 12px; }
.versiebalk-kop { font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--zacht); }
.versiebalk-rij { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 8px 0 0; padding: 0; list-style: none; }
.versiebalk-rij a { display: inline-block; padding: 3px 14px; font-size: 12px; font-weight: 500; color: var(--tekst);
                    text-decoration: none; background: var(--vlak-2); border-radius: 999px; }
.versiebalk-rij a:hover { background: var(--rand); }
.versiebalk-rij a[aria-current="page"] { color: #fff; background: var(--donker); }
.versiebalk-huidig { font-size: 10px; color: var(--zacht); }
.tracker-vorige { margin: 6px 2px 0; font-size: 12px; color: var(--zacht); }
.tracker-vorige em { font-style: normal; color: var(--tekst); }
/* Een lege map in een nieuwe versie (_vorige_versie.html): "Nog niets in V2 · V1 bekijken (27 bestanden)". */
.vorige-versie { margin: 4px 0 8px; font-size: 13px; color: var(--zacht); }
.facts .vorige-versie { margin: 0; }
/* Weghalen (spec 2026-10-09, _weghalen.html en bestand_weghalen.html): een zachte link bij een bestand of foto, en de
   bevestigingspagina met wat er meegaat. */
a.weghalen { font-size: 12px; color: var(--zacht); }
a.weghalen:hover { color: var(--laat); }
.tegel-rechts + a.weghalen, .orca-knoppen a.weghalen { margin-left: 10px; }
.omdraai-achter > a.weghalen, .uitklap > a.weghalen { display: inline-block; margin-top: 6px; }
.weghalen-gevolgen { margin: 8px 0 14px; padding-left: 18px; font-size: 13px; }
.weghalen-gevolgen li { margin: 2px 0; }
.brief { margin: 0 0 14px; padding: 10px 12px; background: var(--pagina); border-left: 3px solid var(--donker);
         border-radius: 6px; }
.brief-kop { margin: 0 0 4px; font-size: 13px; }
.brief-tekst { margin: 0; font-size: 13px; }
.brief-bijlagen { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
/* De widget Onderdelen per revisie (spec 2026-10-05): de hulp, Vervalt en Toch geldig in de regel, de vervallen
   onderdelen ingeklapt. */
.onderdeel-hulp { font-size: 12px; color: var(--donker); }
.onderdeel-knop { display: inline; margin: 0; }
.vervallen { margin: 8px 0 0; font-size: 13px; }
.vervallen summary { cursor: pointer; color: var(--zacht); }
.vervallen s { color: var(--zacht); }
/* Zone 2: het item als paneel - het beeld, de drie kleine, en de gegevens als regels met een lijn ertussen. */
.zone-item { padding: 16px 18px; background: var(--vlak); border-radius: var(--hoek); }
.zone-beeld { margin: 0 0 14px; }
.zone-beeld .viewer { max-width: 420px; }
.zone-item .viewer-kop { margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--lijn); }
.zone-item .viewer-titel { font-size: 13px; font-weight: 300; letter-spacing: .07em; text-transform: uppercase; }
.zone-item .viewer-etiket { margin-right: 4px; font-size: 13px; font-weight: 700; letter-spacing: .07em; color: var(--tekst); }
.zone-item .viewer-titel strong { font-weight: 300; }
.zone-item-feiten { grid-template-columns: max-content minmax(0, 1fr); gap: 0 14px; margin: 0; font-size: 12px; }
.zone-item-feiten dt, .zone-item-feiten dd { padding: 6px 0; border-bottom: 1px solid var(--lijn); }
.zone-item-feiten dd { text-align: right; overflow-wrap: anywhere; }
.zone-item-feiten > .feit:last-child > :is(dt, dd) { border-bottom: 0; }
.zone-waar { margin-bottom: 20px; }
.zone-werk > .leeg { margin: 0 0 var(--sj-ruimte); }
/* Het briefing-scherm en de stap 3D-model (2026-10-14): zonder zone 2 staat de wijzigingsbrief van de ronde los boven
   het werk, met één keer de ruimte eronder. */
.zone-brief .brief { margin: 0 0 var(--sj-ruimte); }
.standzin { margin: 0; color: var(--zacht); }
/* Bladen op de telefoon (ronde 4 aanpassingen, app-gevoel onderdeel 5; static/js/blad.js): een <details data-blad>
   met zijn vak als .blad - Vragen, Nieuw en een losse Nieuwe versie of revisie. Op de computer een menuutje; op de
   telefoon (html.tel) en in de web-app (html.blad-standalone) schuift het vak als blad van onderen omhoog, met een
   grijpgreepje (.blad-greep, door het script gezet) en een donkerdere achtergrond (de laag van de summary: een tik erop
   sluit het). Met data-blad="alleen-tel" (de ronde knoppen van de itemkop, taak 4c) alleen op de telefoon, niet in de web-app op de pc. Omlaag vegen aan het greepje (> 80 px) sluit het ook (.blad-sleept tijdens het vegen). :root en [data-blad][open] wegen zwaar genoeg tegen de regels van de vakken zelf. */
.blad-greep { display: none; }
:root:is(.tel, .blad-standalone) [data-blad]:not([data-blad="alleen-tel"])[open] > summary::before,
:root.tel [data-blad="alleen-tel"][open] > summary::before {
  content: ""; position: fixed; inset: 0; z-index: 59; cursor: default; background: rgba(23, 28, 34, .38);
  animation: blad-achter .25s ease-out;
}
:root:is(.tel, .blad-standalone) [data-blad]:not([data-blad="alleen-tel"])[open] > .blad,
:root.tel [data-blad="alleen-tel"][open] > .blad {
  position: fixed; left: 0; right: 0; top: auto; bottom: 0; bottom: var(--toetsenbord, 0px); z-index: 60; display: grid;
  width: auto; min-width: 0; max-width: none; max-height: 82vh; max-height: min(82dvh, calc(var(--zichtbaar, 100dvh) - 12px));
  margin: 0; padding: 0 18px calc(20px + env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain; text-align: left; background: var(--pagina); border: 0;
  border-radius: 18px 18px 0 0; box-shadow: 0 -10px 30px rgba(0, 0, 0, .18);
  animation: blad-op .32s cubic-bezier(.3, .7, .2, 1); transition: transform .22s cubic-bezier(.3, .7, .2, 1);
}
:root:is(.tel, .blad-standalone) [data-blad]:not([data-blad="alleen-tel"])[open] > .blad > .blad-greep,
:root.tel [data-blad="alleen-tel"][open] > .blad > .blad-greep {
  display: block; position: sticky; top: 0; z-index: 1; height: 28px; margin: 0 -18px 4px; background: var(--pagina);
  touch-action: none; cursor: grab;
}
.blad-greep::before {
  content: ""; display: block; width: 40px; height: 5px; margin: 10px auto 0; border-radius: 3px; background: #d4d4cf;
}
:root [data-blad][open] > .blad.blad-sleept { transition: none; }
/* Fixgolf PR #86: zolang een blad open is, scrolt de pagina eronder niet mee (blad.js zet html.blad-open, alleen als
   blad, en maakt de rest inert). */
html.blad-open, html.blad-open body { overflow: hidden; }
@keyframes blad-op { from { transform: translateY(100%); } }
@keyframes blad-achter { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  :root [data-blad][open] > .blad, :root [data-blad][open] > summary::before { animation: none; transition: none; }
}
/* De actie rechts in de kop: de donkere knop, "namens" of "ligt bij" eronder. */
/* Rechts in de kop: Nieuwe versie (licht, _revisiekop.html) naast de actie van de stap (donker, _stap_actie.html),
   zoals de mockup; het formulier van Nieuwe versie klapt naar links uit. */
.schermkop-acties {
  display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: flex-start; gap: 8px; margin: 18px 0 0 auto;
  max-width: 100%;
}
.schermkop-acties .revisieformulier { left: auto; right: 0; text-align: left; }
/* De chip *Route Kort traject · aangepast* in de kop van het stapscherm van een zachte stap (PR 3, deel 3a-2 taak 2; spec 2026-10-31, § 8.3,
   PC 7; itemscherm.html): rustig, geen knop. */
.rk-chip {
  display: inline-flex; align-items: baseline; align-self: center; gap: 5px; padding: 3px 10px; border: 1px solid var(--rand);
  border-radius: 999px; background: var(--pagina); color: var(--zacht); font-size: 11.5px; white-space: nowrap;
}
.rk-chip b { color: var(--tekst); font-weight: 500; }
/* Ronde 6 (mockup route-datums.html deel 2): toezeggen rechtsboven onder de actie, op een eigen regel (_toezegvak.html). */
.toezegvak-rij { display: flex; flex-basis: 100%; justify-content: flex-end; }
.kopregel .toezegvak-rij { flex-basis: auto; justify-content: flex-start; }
.kopregel .toezegvak { justify-content: flex-start; padding: 2px 4px 2px 12px; }
.toezegvak { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 6px 6px 6px 12px; border-radius: 12px; background: var(--vlak); font-size: 12px; }
.toezegvak b { font-weight: 500; }
.toezegvak-vraag { color: var(--let); font-weight: 500; }
/* De knoppenbalk (ronde 4 aanpassingen, optie B; _revisiekop.html, deel `menu`): Nieuwe versie en Nieuwe revisie onder
   één lichte knop *Nieuw ▾*; het menu klapt naar links uit onder de knop, met per keuze een ondertitel; een keuze opent
   zijn formulier in het menu. Een klik ernaast valt op de laag van de summary en sluit het, ook zonder JavaScript. */
.nw-menu { position: relative; }
.nw-menu > summary { list-style: none; }
.nw-menu > summary::-webkit-details-marker { display: none; }
.nw-pijl { font-size: 10px; letter-spacing: 0; }
.nw-menu[open] > summary::before { content: ""; position: fixed; inset: 0; z-index: 39; cursor: default; }
.nw-menu[open] > .nw-knop { border-color: var(--donker); }
.nw-lijst {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: 280px; padding: 6px; text-align: left;
  background: var(--pagina); border: 1px solid var(--rand); border-radius: var(--hoek); box-shadow: 0 10px 26px #1d26301a;
}
.nw-optie { display: block; padding: 8px 10px; border-radius: 6px; font-size: 13px; line-height: 1.35; cursor: pointer; }
.nw-optie:hover, .nw-optie:focus-visible, .revisieknop[open] > .nw-optie { background: var(--vlak); }
.nw-titel { display: block; font-weight: 500; }
.nw-sub { display: block; font-size: 11px; color: var(--zacht); }
.nw-lijst .revisieformulier {
  position: static; min-width: 0; margin: 2px 0 4px; padding: 4px 10px 8px; border: 0; box-shadow: none;
}
@media (max-width: 550px) {
  /* Op de telefoon over de hele breedte met de gewone marge, zoals het vak van Vragen. */
  .nw-lijst { position: fixed; left: 16px; right: 16px; top: 64px; width: auto; max-height: calc(100dvh - 80px);
    overflow-y: auto; }
}
.zone-actie { text-align: right; }
.zone-actie .handeling { flex-direction: column; align-items: flex-end; gap: 4px; }
.zone-actie .handeling p { margin: 0; font-size: 13px; }
.zone-actie button[type=submit]:not(.link) { min-height: var(--sj-knop); padding: 0 20px; }
@media (min-width: 1280px) {
  /* align-content: start - de pagina is minstens zo hoog als het venster (body.app), en met `normal` rekken de rijen
     dan mee: boven zone 2 stond zo een lege strook. */
  .itemscherm {
    display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); column-gap: 28px; align-items: start;
    align-content: start;
  }
  .itemscherm > * { grid-column: 1 / -1; }
  .itemscherm > .zone-item { grid-column: 1; margin-bottom: 0; }
  .itemscherm > .zone-werk { grid-column: 2; }
  /* Het briefing-scherm en de stap 3D-model (2026-10-14): zonder zone 2 het werk over de hele breedte. */
  .itemscherm.zonder-item > .zone-werk { grid-column: 1 / -1; }
  .zone-beeld .viewer { max-width: none; }
}

/* --- De widgetgalerij (/beheer/widgets/): per widget een kop over de hele breedte, en het raster in rijen
   (niet dense), zodat elke widget bij zijn kop blijft --- */
.galerij .raster { display: block; }
/* De galerij en de bouwer houden het rooster van vier vakken: elke maat naast elkaar, om te keuren en te schuiven. */
.galerij .raster.galerij-rij, .raster.bouwer-raster {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sj-ruimte);
}
.galerij .raster.galerij-rij { grid-auto-rows: minmax(var(--sj-vak), auto); align-items: start; margin-bottom: 28px; }
.raster.bouwer-raster { grid-auto-rows: var(--sj-vak); grid-auto-flow: dense; }
.galerij-rij > .widget.breed, .galerij-rij > .widget.groot, .bouwer-raster > .widget.breed { grid-column: span 2; }
.galerij-rij > .widget.klein, .bouwer-raster > .widget.klein { grid-column: span 1; }
.bouwer-raster > .widget.groot { grid-column: span 2; grid-row: span 2; }
.bouwer-raster > .widget.vol { grid-column: 1 / -1; }   /* Widget.volle_breedte (bouwer.js): ook hier over de hele breedte */
.galerij-rij > .widget.vol { grid-column: 1 / -1; }      /* de maat VOL (3 nov 2026): de hele rij */
.galerij-kop { margin: 12px 0 10px; font-size: 15px; }
.galerij-leeg { grid-column: 1 / -1; }

/* --- De bouwer (spec 2026-09-30, D2; templates/core/dashboards.html, static/js/bouwer.js): links de lijst,
   rechts het raster van het beginscherm met het palet ernaast. Een vak is een .widget zoals op het dashboard;
   zijn kop is de greep om te slepen, en de inhoud is om te kijken (een link erin zou de bouwer verlaten).
   Onder 1024 px alleen de lijst en een zin --- */
.bouwerpagina { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; align-items: start; }
.bouwer-werk { min-width: 0; }
.dashboardlijst .widget-kop { margin-top: 20px; }
.dashboardlijst .widget-kop:first-child { margin-top: 6px; }
.dashboardlijst-regels { list-style: none; margin: 0; padding: 0; }
.dashboardlijst-regels li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 8px 0;
  border-bottom: 1px solid var(--rand);
}
.dashboardlijst-regels a { text-decoration: none; }
.dashboardlijst-regels a:hover { text-decoration: underline; }
.dashboardlijst-regels a.actief { font-weight: 500; }
.dashboardlijst-regels .meta { flex-basis: 100%; }
.dashboardlijst-maken { margin: 0 0 0 auto; }
/* De standaard (18 okt 2026): het aantal rechts; een rol zonder dashboard "volgt de standaard · + maken" rechts. */
.dashboardlijst-regels .meta.dashboardlijst-tal { flex-basis: auto; margin-left: auto; }
.dashboardlijst-open { margin: 0; }
.dashboardlijst-open .link { font-weight: 400; }
.dashboardlijst-volgt { display: inline-flex; align-items: baseline; gap: 4px; margin-left: auto; }
.dashboardlijst-volgt .meta { flex-basis: auto; }
.dashboardlijst-volgt .dashboardlijst-maken { margin: 0; }
/* Spec 2026-10-21 (mockup rollen-en-dashboard C): per dashboard *gebruikt door* - het aantal als pilletje rechts en de
   namen eronder; de eigen dashboards apart. */
.dashboardlijst-pil {
  margin-left: auto; min-width: 20px; padding: 1px 7px; border-radius: 999px; background: var(--vlak-2);
  font-size: 11px; font-weight: 500; text-align: center; color: var(--tekst);
}
.dashboardlijst-regels .meta.dashboardlijst-namen { flex-basis: 100%; }
/* De strook boven de tabbladen van de bouwer (spec 2026-10-21, mockup D; templates/core/_strook.html): voor wie dit
   dashboard geldt. Licht met een donkere rand links; een eigen dashboard groen. Geen oranje. */
.strook {
  display: flex; align-items: center; gap: 12px; margin: 0 0 var(--sj-ruimte); padding: 10px 14px;
  border: 1px solid var(--rand); border-left: 3px solid var(--donker); border-radius: 4px; background: var(--vlak);
}
.strook-eigen { border-left-color: var(--goed); background: var(--goed-vlak); }
.strook-icoon {
  display: grid; place-items: center; flex: none; width: 30px; height: 30px; border: 1px solid var(--rand);
  border-radius: 6px; background: var(--pagina);
}
.strook-icoon .icoon { width: 16px; height: 16px; }
.strook-tekst { min-width: 0; flex: 1 1 auto; }
.strook-zin { margin: 0; font-size: 13px; }
.strook-zin b { font-weight: 500; }
.strook-noot { margin: 2px 0 0; font-size: 12px; color: var(--zacht); }
.strook-namen { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin: 0; padding: 0; list-style: none; }
.strook-namen li {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 3px; border: 1px solid var(--rand);
  border-radius: 999px; background: var(--pagina); font-size: 12px;
}
.strook-letter {
  display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--donker);
  color: var(--pagina); font-size: 10px; font-weight: 500;
}
.strook-namen li.strook-meer { padding: 2px 9px; color: var(--zacht); }
.bouwer-wie-ziet { margin: 0 0 var(--sj-ruimte); padding: 10px 12px; font-size: 13px; background: var(--vlak); }
.bouwer-wie-ziet b { font-weight: 500; }
.dashboardlijst-nieuw { margin-top: 16px; }
.dashboardlijst-nieuw summary { cursor: pointer; font-weight: 500; }
.dashboardlijst-nieuw .knop { margin-top: 10px; }
.bouwer-balk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.bouwer-wie { display: flex; align-items: center; gap: 8px; margin: 0 auto 0 0; font-size: 13px; color: var(--tekst); }
.bouwer-wie select { width: auto; height: var(--sj-knop); padding: 0 10px; border-radius: var(--hoek-knop); }
.bouwer-status { font-size: 13px; font-weight: 500; color: var(--laat); }
.bouwer-melding { margin: 0 0 var(--sj-ruimte); font-size: 13px; }
.bouwer-melding:empty { display: none; }
.bouwer-midden { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: var(--sj-ruimte); align-items: start; }
.bouwer-raster { min-height: var(--sj-vak); }
.bouwer-raster > .palet-item { grid-column: span 2; }
.bouwer-leeg { margin: 0; padding: 24px; border: 1px dashed var(--rand); }
.bouwer-vak { overflow: hidden; }
.vak-kop { display: flex; align-items: flex-start; gap: 8px; }
.vak-greep { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: grab; }
.vak-knoppen { display: flex; flex: none; flex-wrap: wrap; justify-content: flex-end; gap: 2px; }
/* In een klein vak passen de kop en zes knoppen niet naast elkaar: de kop een eigen regel, de knoppen eronder. */
.bouwer-vak.klein .vak-kop { flex-wrap: wrap; gap: 4px; }
.bouwer-vak.klein .vak-greep { flex-basis: 100%; }
.bouwer-vak.klein .vak-knoppen { flex-basis: 100%; }
.vak-knop {
  min-width: 24px; height: 24px; padding: 0 5px; font: inherit; font-size: 11px; color: var(--tekst); cursor: pointer;
  background: var(--pagina); border: 1px solid var(--rand); border-radius: var(--hoek-knop);
}
.vak-knop[aria-pressed="true"] { background: var(--donker); border-color: var(--donker); color: var(--pagina); }
.vak-knop:disabled { color: var(--zacht); cursor: default; }
/* Een onmisbare widget (2026-10-23, stapindeling.ONMISBAAR): een slotje met de reden in plaats van ✕. */
.vak-slot {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px 0 7px; border-radius: 999px;
  background: var(--let-vlak); color: var(--let); border: 1px solid var(--rand); font-size: 11px; white-space: nowrap;
}
.vak-slot svg { width: 11px; height: 11px; flex: none; }
.vak-inhoud { flex: 1; min-height: 0; overflow: hidden; pointer-events: none; }
.vak-grijs { background: var(--vlak); }
.vak-grijs .vak-inhoud { font-size: 13px; color: var(--zacht); }
.bouwer-palet { position: sticky; top: 16px; }
.palet { list-style: none; margin: 0; padding: 0; }
.palet-item {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px; padding: 8px 10px; cursor: grab;
  background: var(--pagina); border: 1px solid var(--rand);
}
.palet-naam { flex: 1; min-width: 0; font-weight: 500; }
.palet-maten { font-size: 11px; letter-spacing: .08em; color: var(--zacht); }
.palet-plus {
  width: 26px; height: 26px; font: inherit; font-weight: 500; color: var(--tekst); cursor: pointer;
  background: var(--pagina); border: 1px solid var(--rand); border-radius: var(--hoek-knop);
}
.palet-plus:hover, .vak-knop:not(:disabled):hover { border-color: var(--donker); }
.sortable-ghost { opacity: .4; }
.bouwer-verwijderen { margin-top: 32px; font-size: 13px; }
.bouwer-verwijderen .muted { margin-left: 8px; }
.bouwer-zonder-js { padding: .6rem .8rem; background: var(--vlak); border: 1px solid var(--rand); }
/* De bouwer voor een scherm (spec 2026-10-01, D3b): de tracker en zone 5 grijs boven het raster - ze staan vast -, en
   een tabblad zonder eigen indeling dat zegt wat het scherm volgt. */
.bouwer-vast {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px;
  margin-bottom: var(--sj-ruimte); padding: 10px 12px; font-size: 13px; color: var(--zacht);
  background: var(--vlak); border: 1px dashed var(--rand);
}
.bouwer-vast-naam { font-weight: 500; }
/* De bouwer van Overzicht (spec 2026-10-29, *De indeling van de strook*): links de band en het figuur (vast), rechts de
   smalle kolom *Strook rechts* met de strookwidgets onder elkaar, zoals op het scherm (± 360 px). */
.bouwer-strook { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: var(--sj-ruimte);
  margin-bottom: var(--sj-ruimte); }
.bouwer-strook-vast { margin: 0; align-items: center; justify-content: center; min-height: 120px; }
.bouwer-strook-kolom { border: 1px solid var(--rand); border-radius: var(--hoek); padding: 10px; min-width: 0; }
.bouwer-strook-kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
/* Review groot scherm Z5: op de pc heeft Overzicht vast geen raster; de noot boven het raster zegt voor wie het nog geldt. */
.bouwer-noot { margin: 0 0 8px; }
.bouwer-strook-kop .widget-kop { margin: 0; }
.bouwer-strook-plus { position: relative; }
.bouwer-strook-plus > summary { list-style: none; cursor: pointer; width: 28px; height: 28px; display: grid;
  place-items: center; border: 1px solid var(--rand); border-radius: var(--hoek-knop); background: var(--pagina); }
.bouwer-strook-plus > summary::-webkit-details-marker { display: none; }
.bouwer-strook-plus > ul { position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; list-style: none; margin: 0;
  padding: 6px 0; min-width: 200px; background: var(--pagina); border: 1px solid var(--rand); border-radius: var(--hoek);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .08); }
.bouwer-strook-plus li button { display: block; width: 100%; text-align: left; padding: 6px 12px; text-decoration: none; }
.bouwer-strook-plus li button:hover { background: var(--vlak); }
.bouwer-strook-bak { display: grid; gap: 8px; }
.bouwer-strook-bak .bouwer-vak { grid-column: auto; }
/* De bouwer van een stapscherm (2026-10-23, mockup stapeditor-aanzichten): het scherm zoals de collega het krijgt. Het
   palet als strook boven het scherm (dan zijn editor en scherm even breed); de kop met de tracker en de linkerkolom
   grijs met een stippellijn en *staat vast* (views.dashboard_scherm_kader); het raster zoals core/dashboard.py `indeling`
   (bouwer.js `tekenEcht`), elk vak zo hoog als zijn inhoud - niets afgekapt. */
.bouwer-echt { display: flex; flex-direction: column; gap: var(--sj-ruimte); }
.bouwer-echt .bouwer-palet {
  order: -1; position: static; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 10px;
  border: 1px dashed var(--lijn); border-radius: 8px;
}
.bouwer-echt .bouwer-palet .widget-kop { margin: 0; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.bouwer-echt .palet { display: flex; flex-wrap: wrap; gap: 6px; }
.bouwer-echt .palet-item { margin: 0; padding: 3px 4px 3px 10px; border-radius: 999px; font-size: 12px; }
.bouwer-echt .palet-naam { font-weight: 400; }
.bouwer-echt .palet-maten { display: none; }
.bouwer-echt .palet-plus { width: 22px; height: 22px; border-radius: 50%; }
.bouwer-kader { position: relative; border-radius: var(--hoek); outline: 1.5px dashed var(--lijn); outline-offset: 4px; }
.bouwer-kader-inhoud { opacity: .5; filter: grayscale(1); pointer-events: none; min-height: 40px; }
.bouwer-vastlabel {
  position: absolute; top: -15px; left: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 5px;
  padding: 1px 9px 1px 7px; border: 1px solid var(--lijn); border-radius: 999px; background: var(--pagina);
  font-size: 11px; color: var(--zacht);
}
.bouwer-vastlabel .icoon { width: 11px; height: 11px; }
.bouwer-vastlabel .bouwer-vast-naam { font-weight: 400; }
.bouwer-kader-kop { margin: 16px 0 24px; padding-top: 12px; }
.bouwer-kader-kop .schermkop { margin-bottom: 8px; }
.bouwer-hoofd { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 16px; align-items: start; }
.bouwer-kader-links { padding-top: 12px; }
.bouwer-kader-links .zone-item { margin: 0; }
.bouwer-hoofd-werk { min-width: 0; }
.bouwer-echt .raster.bouwer-raster { display: flex; flex-direction: column; gap: var(--sj-ruimte); }
.bouwer-echt [data-bak] { min-height: 64px; }
.bouwer-echt .bouwer-vak, .bouwer-echt .vak-inhoud { overflow: visible; }
.bouwer-echt .vak-inhoud img { max-width: 100%; }
/* De knoppen van een vak (verplaats, S/M/L, ✕ of het slotje) een eigen regel boven de naam, zoals de mockup: in een
   halve kolom past het slotje anders niet naast de naam. */
.bouwer-echt .vak-kop { flex-wrap: wrap; gap: 4px 8px; }
.bouwer-echt .vak-knoppen { order: -1; flex-basis: 100%; padding-bottom: 6px; border-bottom: 1px dashed var(--lijn); }
.bouwer-echt .vak-greep { flex-basis: 100%; }
/* Een voorbeeld draait zonder zijn scripts: zonder JavaScript staat van een omdraaikaart de achterkant eronder en is
   de info van een beeld (ⓘ) open. In de bouwer alleen de voorkant en de info dicht, zoals het scherm met JavaScript. */
.bouwer-vak .omdraai-achter, .bouwer-vak [data-uitklap-vak], .bouwer-vak [data-verstuur] { display: none; }
.bouwer-volgt { padding: 16px; border: 1px dashed var(--rand); }
.bouwer-volgt p { margin: 0 0 12px; }
.bouwer-smal { display: none; }
@media (max-width: 1023px) {
  .bouwerpagina { grid-template-columns: minmax(0, 1fr); }
  .bouwer, .bouwer-zonder-js { display: none; }
  .bouwer-smal { display: block; padding: .6rem .8rem; background: var(--vlak); border: 1px solid var(--rand); }
}


/* --- Beheer › Op te leveren (spec 2026-10-07; templates/core/op_te_leveren.html, static/js/opleveren.js): links de
   stapnamen, rechts de regels als witte tegels op het paneel, met de greep, de tekst, verplicht, het paneel en ✕;
   onderaan gestippeld het toevoegen --- */
.opleverpagina { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; align-items: start; }
.opleverlijst-groep {
  margin: 16px 0 4px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--zacht);
}
.opleveren-opslaan { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.opleverregels { list-style: none; margin: 0 0 10px; padding: 0; }
.opleverregel {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto auto auto; gap: 10px; align-items: center;
  margin-bottom: 6px; padding: 8px 10px; background: var(--pagina); border: 1px solid var(--rand); border-radius: 8px;
}
.opleverregel.weg { opacity: .55; }
.opleverregel.weg .opleverregel-tekst input { text-decoration: line-through; }
.opleverregel-greep { color: var(--zacht); cursor: grab; letter-spacing: -2px; user-select: none; }
.opleverregel-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.opleverregel-tekst input { width: 100%; }
.opleverregel-soort { font-size: 11px; color: var(--zacht); }
.opleverregel-paneel {
  padding: 1px 9px; border-radius: 999px; background: var(--vlak-2); color: var(--donker); font-size: 11px; white-space: nowrap;
}
.opleverregel-weg { display: inline-flex; align-items: center; gap: 4px; color: var(--zacht); cursor: pointer; }
.schakelaar { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--zacht); white-space: nowrap; }
/* `.schakelaar` bestond al (over de hele breedte van een formulierraster) en `label` heeft een marge: in een regel
   staan ze in hun eigen kolom (browsercheck). */
.opleverregel .schakelaar, .opleverregel label { grid-column: auto; margin: 0; }
.opleveren-toevoegen { margin-top: 8px; padding: 10px 12px; border: 1.5px dashed #c9c9c7; border-radius: 8px; }
.opleveren-rij { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.opleveren-rij select, .opleveren-rij input[type=text] { width: auto; min-width: 0; }
.opleveren-map { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.opleveren-map[hidden] { display: none; }
.opleveren-uitleg { margin-top: 12px; }
@media (max-width: 900px) {
  .opleverpagina { grid-template-columns: minmax(0, 1fr); }
  .opleverregel { grid-template-columns: 18px minmax(0, 1fr); }
}

/* --- Planning (spec 2026-10-08, deel 3a; core/planning.py): gewenst klaar wijzigen (templates/core/widgets/
   _gewenst_klaar.html, op de projectpagina en in de tracker), de kopregel, de lijst met datums (_planning_lijst.html) en
   de legenda; sinds spec 2026-10-09 in de uitgeklapte tracker (de tijdlijn zelf staat bij de tracker). De globale regels
   voor label en button[type=submit] lekken hier niet in: de knoppen zijn .knop-klein, de labels staan expliciet. --- */
.gewenst-klaar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.gewenst-klaar p { margin: 0; }
.planning-wijzig, .planning-datum { position: relative; display: inline-block; }
.planning-wijzig summary, .planning-datum summary { list-style: none; cursor: pointer; }
.planning-wijzig summary::-webkit-details-marker, .planning-datum summary::-webkit-details-marker { display: none; }
.planning-wijzig summary {
  font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; text-decoration: underline;
  text-underline-offset: 3px;
}
.planning-form {
  position: absolute; z-index: 5; top: calc(100% + 4px); left: 0; display: grid; gap: 8px; min-width: 220px;
  max-width: calc(100vw - 32px); padding: 10px 12px; background: var(--pagina); border: 1px solid var(--rand);
  border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, .12); font-size: 12px; color: var(--tekst);
  text-transform: none; letter-spacing: 0;
}
.planning-form form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.planning-form label:not(.visueel-verborgen) {
  display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; color: var(--tekst);
}
.planning-form input[type=date] {
  width: auto; height: var(--sj-knop); padding: 0 6px; font: inherit; border: 1px solid var(--rand);
  border-radius: var(--hoek-knop);
}
.planning-keuzes { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; }
.planning-keuze { cursor: pointer; }
/* In de lijst loopt het formulier mee in zijn cel (eindreview B3): .planning-lijstwrap heeft overflow-x voor een smal
   scherm en zou een zwevend formulier bij de onderste stappen afknippen. Gewenst klaar in de kopregel blijft zwevend. */
.planning-lijst .planning-form {
  position: static; min-width: 0; max-width: none; margin-top: 6px; box-shadow: none; white-space: normal;
}
.planning-kop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 0 0 12px; }
.planning-kopregel { margin: 0; font-size: 13px; }
.planning-zacht { color: var(--zacht); }
.planning-laat { color: var(--laat); }
.planning-datum summary { display: inline-flex; align-items: center; gap: 4px; text-decoration: underline dotted; text-underline-offset: 3px; }
/* De lijst (vorm B). */
.planning-lijstwrap { position: relative; overflow-x: auto; }   /* relative: een .visueel-verborgen erin schuift de pagina niet op */
.planning-lijst {
  width: 100%; border-collapse: collapse; background: var(--pagina); border: 1px solid var(--rand); border-radius: 8px;
  font-size: 13px;
}
.planning-lijst th {
  padding: 7px 10px; border-bottom: 1px solid var(--rand); font-size: 10px; font-weight: 500; letter-spacing: .08em;
  text-align: left; text-transform: uppercase; color: var(--zacht); background: transparent;
}
.planning-lijst td { padding: 8px 10px; border-bottom: 1px solid var(--lijn); vertical-align: middle; }
.planning-lijst tr.gemarkeerd td { background: var(--vlak); }
.planning-nu td { height: 0; padding: 0; border-bottom: 2px solid var(--let); }
.planning-dat { white-space: nowrap; }
.planning-bol {
  display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 6px; border: 1.5px solid #cfcfcd;
  border-radius: 50%; font-size: 9px; vertical-align: -3px;
}
.planning-bol.klaar { background: var(--donker); border-color: var(--donker); color: #fff; }
.planning-bol.nu { border: 2px solid var(--donker); }
.planning-chip { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--vlak-2); color: var(--tekst); font-size: 11px; }
.planning-chip.leeg { background: transparent; border: 1px dashed #c9c9c7; color: var(--zacht); }
.planning-chip.laat { background: var(--laat-vlak); color: var(--laat); }
.planning-verwacht { display: block; margin-top: 2px; font-size: 11px; color: var(--zacht); }
.planning-verschil { font-size: 11px; color: var(--zacht); }
.planning-verschil.laat { color: var(--laat); }
.planning-legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 0; font-size: 11px; color: var(--zacht); }
.planning-teken { display: inline-block; width: 10px; height: 10px; margin-right: 4px; border-radius: 50%; vertical-align: -1px; }
.planning-teken.gewenst { border: 2px solid var(--donker); background: var(--pagina); }
.planning-teken.toegezegd { background: var(--donker); }
.planning-teken.laat { background: var(--laat); }
.planning-teken.vandaag { width: 2px; border-radius: 1px; background: var(--let); }
/* --- Beheer › Planning (spec 2026-10-08, deel 3a; templates/core/planning_beheer.html, _duurregel.html): links de duren
   per stapnaam, rechts de feestdagen en de eigen vrije dagen --- */
.planningbeheer { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 32px; align-items: start; }
.planningbeheer-opslaan { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.planningbeheer button[type=submit].knop { width: auto; margin-top: 0; padding: 0 18px; }
.duurtabel-groep th { padding-top: 16px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--zacht); }
.duurtabel-duur { white-space: nowrap; }
.duurtabel input[type=number] {
  width: 6rem; height: 32px; padding: 0 6px; font: inherit; border: 1px solid var(--rand); border-radius: var(--hoek-knop);
}
.vrijedagen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.vrijedagen-kop { margin: 0 0 8px; font-size: 13px; }
.dagenlijst { list-style: none; margin: 0 0 10px; padding: 0; font-size: 13px; }
.dagenlijst li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 5px 0; border-bottom: 1px solid var(--lijn); }
.dagenlijst-datum { min-width: 9rem; }
.dagenlijst-weg { margin: 0 0 0 auto; }
.dag-toevoegen {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; padding: 10px 12px;
  border: 1.5px dashed #c9c9c7; border-radius: 8px;
}
.dag-toevoegen label { margin: 0; }
.dag-toevoegen input[type=text] { flex: 1 1 10rem; width: auto; }
.dag-toevoegen input[type=date] {
  height: var(--sj-knop); padding: 0 6px; font: inherit; border: 1px solid var(--rand); border-radius: var(--hoek-knop);
}
@media (max-width: 900px) { .planningbeheer, .vrijedagen { grid-template-columns: minmax(0, 1fr); } }

/* Foto's maken met de telefoon (spec 2026-10-07, panelen omdraaien): op een smal scherm alles groot genoeg om te tikken
   (44 px), de drie aanzichtknoppen over de hele breedte en de details vier per rij; de foto staat boven het model in
   het paar zelf (.aanzichtpaar, spec 2026-10-10). */
@media (max-width: 550px) {
  .knop-label, button[type=submit].knop-klein, .knop { min-height: 44px; height: auto; }
  .aanzichtknoppen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .aanzichtknop { justify-content: center; min-height: 44px; }
  .detailtegels { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Details, Aanzichten, Van de fabriek en het fabrieksblok staan over de hele breedte van het raster (spec 2026-10-07,
   panelen omdraaien; ronde 6): sinds 2026-10-14 Widget.volle_breedte, de server zet ze in een eigen deel. */
/* Ronde 6: bovenaan zone 4 over de volle breedte van het scherm (itemscherm.html, views.VOLLE_BREEDTE), vanaf 1280 px boven
   het item en het werk in plaats van in de kolom naast het model (mockup samplemaken-fabriek.html). */
.zone-breed { margin-bottom: var(--sj-ruimte); }

/* Slepen in een paneel en de wachtrij (spec 2026-10-08, slepen en uploaden; static/js/wachtrij.js maakt de klassen).
   Tijdens het slepen: een donkere gestippelde rand van 2 px met de hoek van een paneel over het vlak (het paneel, of in
   Bestanden een mapkopje), en in het midden een witte pil "Laat los: in 05_Gcodes". Na het loslaten de wachtrij onderaan
   het paneel, boven de voetregel: per bestand een witte regel met de naam, de grootte, een balkje en ✓ of een bronzen
   melding. De globale regels voor label, button[type=submit] en progress lekken hier niet in: alles staat er expliciet. */
.widget.sleep-erboven, .widget-map.sleep-erboven { position: relative; }
.sleep-erboven::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border: 2px dashed var(--donker); border-radius: 10px;
}
.sleep-pil {
  position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%); pointer-events: none;
  max-width: calc(100% - 24px); padding: 6px 14px; border-radius: 999px; background: var(--pagina); color: var(--donker);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .14); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wachtrij { display: grid; gap: 4px; margin: 12px 0 0; padding: 0; list-style: none; }
.wachtrij-regel {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; padding: 6px 10px;
  border-radius: var(--hoek-knop); background: var(--pagina); color: var(--tekst); font-size: 12px;
}
.wachtrij-naam { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wachtrij-grootte { color: var(--zacht); white-space: nowrap; }
.wachtrij-balk { grid-column: 1 / -1; display: block; width: 100%; height: 4px; margin: 0; }
.wachtrij-balk[hidden] { display: none; }
.wachtrij-stand { grid-column: 1 / -1; }
.wachtrij-stand:empty { display: none; }
.wachtrij-regel.klaar .wachtrij-stand { grid-column: auto; grid-row: 1; grid-column-start: 3; color: var(--donker); }
.wachtrij-regel.klaar { grid-template-columns: minmax(0, 1fr) auto auto; }
.wachtrij-regel.fout { background: var(--let-vlak); color: var(--let); }
.wachtrij-regel.fout .wachtrij-grootte, .wachtrij-regel.fout .wachtrij-stand { color: var(--let); }
.wachtrij-voet { display: flex; justify-content: flex-end; }
.wachtrij-knop {
  display: inline-flex; align-items: center; width: auto; height: var(--sj-knop); min-height: 0; margin: 0;
  padding: 0 12px; border: 1px solid var(--rand); border-radius: var(--hoek-knop); background: var(--pagina);
  color: var(--tekst); font: inherit; font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer;
}
.wachtrij-knop:hover { border-color: var(--donker); }
.leeg-toestand.klein { flex-wrap: wrap; }
.leeg-toestand.klein .leeg-uitleg { margin: 0; }
/* De gestippelde kaart van Printbedden is zelf een .meta: zijn zin ("Sleep gcodes hierheen of …") mag afbreken. */
.widget .bedkaart-tekst.meta { white-space: normal; }

/* Productie deel 1 (spec 2026-10-08): nozzle en materiaal op de kaart van een bed; onbekend gestippeld. */
.bed-printstand { display: block; font-size: 11px; color: var(--zacht); }
.bed-printstand .onbekend { border-bottom: 1px dashed var(--zacht); }

/* De widget Printopdracht (spec 2026-10-08, productie deel 1; templates/core/widgets/printopdracht.html). Eigen klassen
   (po-…): de globale regels voor label, button en input lekken anders in de kleine formulieren. */
.po { display: flex; flex-direction: column; gap: 10px; }
.po-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.po-regel { margin: 0; font-size: 13px; }
.po-swatch { display: inline-block; width: 10px; height: 10px; margin-right: 4px; border: 1px solid var(--rand); border-radius: 50%; vertical-align: -1px; }
.po-pillen { display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: 4px; }
.po-weg { display: inline-block; padding: 1px 8px; border: 1px dashed #c9c7c1; border-radius: 999px; color: var(--zacht); font-size: 10.5px; white-space: nowrap; vertical-align: 1px; }
.po-pil { flex: none; padding: 2px 10px; border-radius: 999px; background: var(--vlak-2); font-size: 11px; white-space: nowrap; }
.po-pil[data-stand="printed"] { background: var(--donker); color: #fff; }
.po-pil[data-stand="cancelled"] { background: var(--laat-vlak); color: var(--laat); }
.po-pil[data-stand="collecting"] { background: var(--let-vlak); color: var(--let); }
.po-bolletjes { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; }
.po-bolletjes li { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--zacht); }
.po-bol { display: inline-block; width: 9px; height: 9px; border: 1.5px solid #cfcfcd; border-radius: 50%; }
.po-bolletjes .gedaan .po-bol { border-color: var(--zacht); background: var(--zacht); }
.po-bolletjes .huidig { color: var(--tekst); font-weight: 500; }
.po-bolnaam { white-space: nowrap; }
.po-aanmelden { margin: 0; }
.po-bolletjes .huidig .po-bol { border-color: var(--donker); background: var(--donker); }
.po-vervallen { margin: 0; color: var(--laat); font-size: 13px; }
.po-terug { margin: 2px 0 12px; padding: 8px 12px; border: 1px solid #b8c9bd; border-radius: 10px; background: var(--goed-vlak); color: var(--goed); font-size: 12.5px; }
.po-zacht { color: var(--zacht); font-size: 12px; }
p.po-zacht { margin: 0; }
.po-opmerking, .po-eis, .po-geprint, .po-wacht { margin: 0; font-size: 13px; }
.po-wacht { color: var(--let); }
/* De tab Hardware: hardware die na het printen op de stuklijst kwam - een regel in het brons met Bed toevoegen. */
.po-hwna { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.po-hwna li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.po-hwna form { margin: 0; }
.po-mist, .po-bedden, .po-prints { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
/* De tab Hardware (spec 2026-10-15): de bedden van hardware onder hun eigen kopje. */
.po-kopje { margin: 8px 0 0; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--zacht); }
.po-bed { display: flex; flex-direction: column; gap: 6px; }
.po-bedkop { font-size: 13px; overflow-wrap: anywhere; }
.po-vakjes { display: flex; flex-wrap: wrap; gap: 4px; }
/* Een foto bij een afkeur (spec 2026-10-14, Productie op de telefoon): een klein rondje naast de vakjes. */
.po-foto { margin-left: 6px; font-size: 12px; color: var(--laat); text-decoration: none; }
.po-vak { display: inline-grid; place-items: center; width: 18px; height: 18px; border: 1px solid #cfcfcd; border-radius: 3px; font-size: 11px; line-height: 1; }
.po-vak[data-stand="planned"] { background: var(--vlak-2); }
.po-vak[data-stand="printing"] { border-color: var(--donker); background: var(--donker); }
.po-vak[data-stand="approved"] { border-color: var(--donker); color: var(--donker); }
.po-vak[data-stand="rejected"] { border-color: var(--laat); color: var(--laat); }
.po-vak[data-stand="cancelled"] { background: linear-gradient(to bottom right, transparent calc(50% - 0.5px), #cfcfcd calc(50% - 0.5px), #cfcfcd calc(50% + 0.5px), transparent calc(50% + 0.5px)); }
.po-print { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.po-knoppen, .po-nieuw, .po-voet { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.po-uitklap > summary { cursor: pointer; font-size: 12px; color: var(--zacht); }
.po-form { display: flex; flex-direction: column; gap: 6px; max-width: 360px; margin-top: 6px; }
.po-form .po-label { display: block; margin: 0; font-size: 12px; color: var(--zacht); }
.po-form input[type=text], .po-form input[type=number], .po-form select, .po-form textarea { width: 100%; }
.po-keuzes { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 0; border: 0; }
.po-keuze { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-size: 12px; }

/* De widget Productiegegevens (spec 2026-10-08, productie deel 1; templates/core/widgets/productiegegevens.html). */
.pg { display: flex; flex-direction: column; gap: 12px; }
.pg-deel { display: flex; flex-direction: column; gap: 6px; }
.pg-kop { margin: 0; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
.pg-zacht { color: var(--zacht); font-size: 12px; font-weight: 400; text-transform: none; letter-spacing: 0; }
p.pg-zacht { margin: 0; }
.pg-kopje { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--zacht); }   /* het kopje van de hardware (2026-10-15) */
.pg-tegels { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pg-onbekend { border-bottom: 1px dashed var(--zacht); color: var(--zacht); }
/* Een bed in Productiegegevens (21 okt 2026, "bed 1" viel letter voor letter onder elkaar): het label en de specs
   breken nooit midden in een woord; de gcode-naam (alleen in de werkstand) breekt af waar de regel vol is, met de volle
   naam in title. Een raster: het label, de naam, en de specs onder de naam - in een smal vak (de telefoon, een smalle
   widget), in een breed vak (vanaf 36rem, een containerquery) naast de naam. */
.pg-bedden { container-type: inline-size; }
.pg-bed.met-naam {
  display: grid; flex: 1 1 100%; grid-template-columns: max-content minmax(0, 1fr); align-items: baseline;
  column-gap: 10px; row-gap: 2px;
}
.pg-bednr { flex: none; white-space: nowrap; }
.pg-bednaam { color: var(--zacht); font-size: 12px; word-break: break-all; }
.pg-bedspecs { overflow-wrap: normal; }
.pg-bed.met-naam .pg-bedspecs { grid-column: 2; }
@container (min-width: 36rem) {
  .pg-bed.met-naam { grid-template-columns: max-content minmax(0, 1fr) max-content; }
  .pg-bed.met-naam .pg-bedspecs { grid-column: auto; }
}
.pg-uitklap > summary { cursor: pointer; font-size: 12px; color: var(--zacht); }
.pg-form { display: flex; flex-direction: column; gap: 6px; max-width: 420px; margin-top: 6px; }
.pg-form .pg-label { display: block; margin: 0; font-size: 12px; color: var(--zacht); }
.pg-form input[type=text] { width: 100%; }
.pg-keuzes { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 0; border: 0; }
.pg-keuze { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-size: 12px; }
.pg-tabel { width: 100%; border-collapse: collapse; font-size: 12px; }
.pg-tabel th { text-align: left; font-weight: 500; color: var(--zacht); }
.pg-tabel input[type=number] { width: 5em; }
.pg-rij { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 0; }

/* De regels van een productieproject (spec 2026-10-08, productie deel 1; templates/core/_regels.html). Eigen klassen:
   de globale regels voor label en input lekken anders in de kleine formulieren. */
.tabel.regels tr.vervallen td { color: var(--zacht); text-decoration: line-through; }
.regel-acties td { padding-top: 0; }
.regel-uitklap { display: inline-block; margin-right: 12px; vertical-align: top; }
.regel-link { display: inline-block; margin-right: 12px; font-size: 12px; vertical-align: top; }
.regel-uitklap > summary { cursor: pointer; font-size: 12px; color: var(--zacht); }
.regel-nieuw { display: block; margin-top: 12px; }
.regel-nieuw > summary.knop { display: inline-block; }
.regel-form, .regel-zoek { display: flex; flex-direction: column; gap: 6px; max-width: 520px; margin-top: 8px; }
.regel-form .regel-label, .regel-zoek .regel-label { display: block; margin: 0; font-size: 12px; color: var(--zacht); }
.regel-form input[type=text], .regel-form textarea, .regel-zoek input[type=search] { width: 100%; }
.regel-rij { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; }
.regel-keuzes { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; padding: 0; border: 0; }
.regel-bronnen { flex-direction: column; align-items: flex-start; }
.regel-keuze { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-size: 13px; }
.regel-klein { width: 4.5em; }

/* --- De printplanning (spec 2026-10-08, productie deel 2; templates/core/printplanning.html, _printplanning_*.html,
   printplanning_inplannen.html, printers.html; static/js/printplanning.js). In de huisstijl van de bijlage: links het
   grijze paneel In te plannen met witte tegels, rechts een witte agenda met per printer een baan. Eigen klassen (pp-…):
   de globale regels voor label, button en input lekken anders in de kleine formulieren. --- */
.pp-kop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; margin: 0 0 14px; }
.pp-kop .weergave { margin: 0; }
.pp-indeling { display: grid; grid-template-columns: minmax(230px, 290px) minmax(0, 1fr); gap: 16px; align-items: start; }
.pp-inteplannen { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; }
.pp-inteplannen.sleep-doel { outline: 2px dashed var(--donker); outline-offset: -4px; }
.pp-groep + .pp-groep { margin-top: 14px; }
.pp-projectkop {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 6px; font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--zacht);
}
.pp-projectkop a { color: inherit; }
.pp-opdracht + .pp-opdracht { margin-top: 10px; }
.pp-opdrachtkop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0; font-size: 12px; font-weight: 500; }
.pp-opdrachtkop a { color: inherit; }
.pp-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 4px 0 6px; }
.pp-link { margin-left: auto; font-size: 11px; color: var(--zacht); }
.pp-zacht { font-size: 11px; font-weight: 400; color: var(--zacht); }
p.pp-zacht { margin: 0; }
.pp-reden { margin: 0 0 6px; }
.pp-tegel { align-items: flex-start; }
.pp-duim { flex: none; width: 30px; height: 30px; border-radius: 5px; background: var(--grijsvlak, #eceef0); object-fit: contain; }
.pp-swatch { display: inline-block; width: 9px; height: 9px; margin-right: 4px; border: 1px solid var(--rand); border-radius: 50%; vertical-align: -1px; }
.tegel-label.pp-deadline.krap, .tegel-label.pp-herprint { background: var(--let-vlak); color: var(--let); }
.tegel-label.pp-deadline.laat { background: var(--laat-vlak); color: var(--laat); }
.pp-komt { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--lijn); }
.pp-groepkop { margin: 10px 0 6px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--zacht); }
.pp-lijst { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 12px; }
.pp-lijst li { display: flex; flex-direction: column; }
.pp-lijst a { color: var(--zacht); }
.pp-leeg { margin: 6px 8px; font-size: 13px; color: var(--zacht); }

.pp-blader { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 8px; font-size: 12px; color: var(--zacht); }
.pp-blader a { color: var(--zacht); }
.pp-dagenkeuze { display: inline-flex; gap: 10px; }
.pp-dagenkeuze a[aria-current] { color: var(--tekst); font-weight: 500; }
.pp-agenda { background: var(--pagina); border: 1px solid var(--rand); border-radius: var(--hoek); }
.pp-rij { display: grid; grid-template-columns: 150px minmax(0, 1fr); min-height: 48px; border-bottom: 1px solid var(--lijn); }
.pp-rij:last-child { border-bottom: 0; }
.pp-naam { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 6px 8px; border-right: 1px solid var(--lijn); font-size: 12px; }
.pp-naamregel { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.pp-bezig { font-size: 10px; color: var(--zacht); }
.pp-chip { overflow: hidden; font-size: 10px; color: var(--zacht); white-space: nowrap; text-overflow: ellipsis; }
.pp-dagenrij { min-height: 0; }
.pp-dagenrij .pp-naam { font-size: 10px; color: var(--zacht); }
.pp-dagen { position: relative; min-height: 28px; }
.pp-dag {
  position: absolute; top: 0; bottom: 0; overflow: hidden; padding: 6px; border-left: 1px solid var(--lijn); font-size: 10px;
  color: var(--zacht); white-space: nowrap;
}
.pp-dag.vandaag { color: var(--tekst); font-weight: 500; }
.pp-dag small { display: block; font-size: 9px; font-weight: 400; }
.pp-baan { position: relative; min-height: 46px; }
.pp-nacht { position: absolute; top: 0; bottom: 0; background: rgba(0, 0, 0, .035); pointer-events: none; }
.pp-rij.storing .pp-baan { background: var(--laat-vlak); }
.pp-storingtekst { position: absolute; top: 50%; left: 8px; transform: translateY(-50%); font-size: 11px; color: var(--laat); }
.pp-nu { position: absolute; top: 0; bottom: 0; z-index: 3; width: 2px; background: var(--let); transform: translateX(-1px); pointer-events: none; }
.pp-print, .pp-blokkop { position: absolute; z-index: 2; min-width: 6px; margin: 0; }
.pp-print { top: 6px; bottom: 6px; }
.pp-print.in-blok { top: 18px; }
.pp-blokkop { top: 3px; height: 13px; }
.pp-print > summary, .pp-blokkop > summary, .pp-vak {
  display: block; height: 100%; overflow: hidden; padding: 3px 6px; border-radius: 5px; background: #9fa2a6; color: #fff;
  font-size: 10px; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; list-style: none; cursor: pointer;
}
.pp-print > summary::-webkit-details-marker, .pp-blokkop > summary::-webkit-details-marker, .pp-menu > summary::-webkit-details-marker { display: none; }
.pp-blokkop > summary { padding: 0 6px; background: var(--vlak-2); color: var(--donker); font-size: 9px; line-height: 13px; }
.pp-print.loopt > summary, .pp-print.loopt > .pp-vak { background: var(--donker); }
.pp-print.controleren > summary { box-shadow: inset 0 -3px 0 var(--let); }
.pp-print.ander > summary, .pp-print.ander > .pp-vak { outline: 2px solid var(--let); outline-offset: -2px; }
.pp-print.te-laat > summary { box-shadow: inset 0 0 0 2px var(--laat); }
.pp-print.laat-gestart > summary { border-left: 3px solid var(--let); }
.pp-print.voorstel > .pp-vak { border: 2px dashed var(--donker); background: var(--pagina); color: var(--tekst); }
.pp-print[open], .pp-blokkop[open] { z-index: 6; }
.pp-menu { position: relative; }
.pp-menu > summary { padding: 0 4px; color: var(--zacht); list-style: none; cursor: pointer; }
.pp-menu[open] { z-index: 6; }
.pp-menu-inhoud {
  position: absolute; top: 100%; left: 0; z-index: 6; display: flex; flex-direction: column; gap: 10px; width: 260px;
  margin-top: 4px; padding: 10px 12px; background: var(--pagina); border: 1px solid var(--rand); border-radius: var(--hoek);
  box-shadow: 0 8px 24px #1d26301f; white-space: normal; color: var(--tekst); cursor: auto;
}
.pp-print.rechts > .pp-menu-inhoud, .pp-blokkop.rechts > .pp-menu-inhoud { right: 0; left: auto; }
/* Weghalen uit In te plannen (spec 2026-10-19, mockup afkeuren-nieuwe-gcode, deel 3): het ⋯-menu van een order of gcode
   (_pd_weghalen_menu.html) en *n weggehaald* onderaan de wachtrij (_pd_weggehaald.html), op de pc en de telefoon. */
.pd-gmenu > summary { padding: 1px 6px; border-radius: 6px; font-size: 14px; line-height: 1.2; }
.pd-gmenu > summary:hover, .pd-gmenu[open] > summary { background: var(--vlak); color: var(--tekst); }
.pd-gmenu > .pd-gmenu-inhoud { left: auto; right: 0; width: 232px; gap: 2px; padding: 6px; font-size: 12px; }
.pd-gmenu-inhoud form { margin: 0; }
.pd-moptie, button[type=submit].pd-moptie {
  display: block; width: 100%; min-height: 0; margin: 0; padding: 7px 9px; border: 0; border-radius: 7px; background: none;
  color: var(--tekst); font: inherit; font-size: 12px; font-weight: 400; letter-spacing: 0; text-align: left;
  text-transform: none; text-decoration: none; cursor: pointer;
}
.pd-moptie:hover, button[type=submit].pd-moptie.hoofd { background: var(--vlak); }
.pd-moptie > span, .pd-moptie > small { display: block; }
.pd-moptie > small { color: var(--zacht); font-size: 10.5px; }
.pd-weglijst { margin-top: 4px; color: var(--zacht); font-size: 12px; }
.pd-weglijst > summary {
  display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px dashed #c9c7c1; border-radius: 10px;
  list-style: none; cursor: pointer;
}
.pd-weglijst > summary::-webkit-details-marker { display: none; }
.pd-weglijst u { color: var(--tekst); }
.pd-weglijst .pd-verbergen, .pd-weglijst[open] .pd-tonen { display: none; }
.pd-weglijst[open] .pd-verbergen { display: inline; }
.pd-vlijst { margin-top: 8px; padding: 2px 10px; background: var(--pagina); border-radius: 10px; }
.pd-vrij { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--rand); }
.pd-vrij:last-child { border-bottom: 0; }
.pd-vtekst { display: flex; flex-direction: column; min-width: 0; color: var(--tekst); font-size: 12px; line-height: 1.35; }
.pd-vtekst small { color: var(--zacht); font-size: 11px; }
.pd-vrij form { flex: none; margin: 0; }
.pd-vrij button[type=submit].knop { width: auto; min-height: 28px; padding: 0 10px; background: var(--pagina); color: var(--tekst); border: 1px solid var(--rand); }
.pd-vrij button[type=submit].knop:hover { border-color: var(--donker); }
.pp-form { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.pp-form .pp-label, .pp-label { font-size: 11px; color: var(--zacht); }
.pp-form input[type=text], .pp-form input[type=date], .pp-form input[type=time], .pp-form select {
  width: 100%; padding: 4px 6px; font-size: 12px;
}
.pp-rij-form { display: flex; gap: 4px; }
.pp-form button[type=submit]:not(.link) {
  align-self: flex-start; width: auto; min-height: 30px; margin-top: 2px; padding: 0 12px; font-size: 10px;
}
.pp-form button.knop:not(.primair) { background: var(--pagina); color: var(--tekst); border: 1px solid var(--rand); }
.pp-keuzes { display: flex; flex-direction: column; gap: 2px; }
.pp-rijkeuzes { flex-direction: row; flex-wrap: wrap; gap: 4px 12px; }
.pp-keuze { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.pp-uitklap > summary { font-size: 11px; color: var(--zacht); cursor: pointer; }
.pp-uitklap[open] { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
.pp-legenda { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; font-size: 11px; color: var(--zacht); }
.pp-teken { display: inline-block; width: 12px; height: 9px; margin-right: 4px; border-radius: 2px; background: #9fa2a6; vertical-align: -1px; }
.pp-teken.loopt { background: var(--donker); }
.pp-teken.ander { background: transparent; outline: 2px solid var(--let); outline-offset: -2px; }
.pp-teken.te-laat { background: transparent; box-shadow: inset 0 0 0 2px var(--laat); }
.pp-teken.nacht { background: rgba(0, 0, 0, .08); }
.pp-teken.nu { width: 2px; background: var(--let); }
.pp-teken.voorstel { background: transparent; border: 1.5px dashed var(--donker); }
.pp-meldingen { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 0; padding: 0; list-style: none; }
.pp-meldingen li, .pp-melding { padding: 6px 10px; border-radius: 6px; background: var(--let-vlak); color: var(--let); font-size: 12px; }
.pp-melding.laat { background: var(--laat-vlak); color: var(--laat); }
/* Slepen (static/js/printplanning.js): de schaduw op de baan onder de wijzer. */
[data-sleep] { touch-action: none; }
.pp-sleept { opacity: .45; }
.pp-schaduw {
  position: absolute; top: 4px; bottom: 4px; z-index: 7; overflow: visible; padding: 3px 6px; border: 2px dashed var(--donker);
  border-radius: 6px; background: rgba(255, 255, 255, .8); color: var(--tekst); font-size: 10px; white-space: nowrap;
  pointer-events: none;
}
body.pp-slepen { cursor: grabbing; user-select: none; }

/* Per project: een week, per project een rij met per printer een smalle regel. */
.pp-week { background: var(--pagina); border: 1px solid var(--rand); border-radius: var(--hoek); }
.pp-weekrij { display: grid; grid-template-columns: 200px minmax(0, 1fr) 230px; border-bottom: 1px solid var(--lijn); }
.pp-weekrij:last-child { border-bottom: 0; }
.pp-weeknaam { display: flex; flex-direction: column; gap: 2px; padding: 8px; border-right: 1px solid var(--lijn); font-size: 12px; }
.pp-weeknaam a { color: inherit; }
.pp-weeknaam > a { align-self: flex-start; }       /* ronde 6: het klikvlak alleen de naam, niet de hele cel */
.pp-weeknaam small { font-size: 10px; color: var(--zacht); }
.pp-weekbanen { display: flex; flex-direction: column; gap: 4px; padding: 6px 0; }
.pp-weekbaan { position: relative; height: 20px; }
.pp-weekleeg { padding: 0 8px; }
.pp-weekblok {
  position: absolute; top: 2px; bottom: 2px; overflow: hidden; padding: 0 5px; border-radius: 4px; background: #9fa2a6;
  color: #fff; font-size: 9px; line-height: 16px; white-space: nowrap; text-overflow: ellipsis; text-decoration: none;
}
.pp-weekblok.loopt { background: var(--donker); }
.pp-weekstand { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 8px; border-left: 1px solid var(--lijn); font-size: 12px; }
.pp-stand { padding: 1px 9px; border-radius: 9px; background: var(--vlak-2); font-size: 11px; }
.pp-stand.druk { background: var(--let-vlak); color: var(--let); }
.pp-stand.laat { background: var(--laat-vlak); color: var(--laat); }

/* Automatisch inplannen. */
.pp-inplannen-indeling { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-bottom: 12px; }
.pp-keuze-form { padding: 10px 12px; background: var(--pagina); border: 1px solid var(--rand); border-radius: 8px; }
.pp-schuif { display: flex; align-items: center; gap: 8px; }
.pp-schuif input[type=range] { flex: 1; }
.pp-schuif output { min-width: 2ch; font-weight: 500; }
.pp-uitkomst { display: flex; flex-direction: column; gap: 8px; }
.pp-cijfer { display: flex; flex-direction: column; padding: 8px 12px; background: var(--pagina); border: 1px solid var(--rand); border-radius: 8px; }
.pp-cijfer b { font-size: 16px; font-weight: 400; }
.pp-laat { color: var(--laat); }
.pp-voorstel { margin-bottom: 8px; }
.pp-voorstel .pp-print { cursor: default; }

/* Het tabblad Printers. */
.pp-tabelkop { margin: 0 0 10px; font-size: 13px; font-weight: 300; letter-spacing: .07em; text-transform: uppercase; }
.pp-storing { color: var(--laat); }
.pp-printers .pp-uitklap[open] { min-width: 240px; }

@media (max-width: 1023px) {
  .pp-indeling, .pp-inplannen-indeling { grid-template-columns: minmax(0, 1fr); }
  .pp-inteplannen { position: static; max-height: none; }
}
@media (max-width: 767px) {
  .pp-agenda { overflow-x: auto; }
  .pp-agenda > .pp-rij { min-width: 640px; }
  .pp-rij { grid-template-columns: 96px minmax(0, 1fr); }
  .pp-weekrij { grid-template-columns: minmax(0, 1fr); }
  .pp-weeknaam, .pp-weekstand { border: 0; }
}

/* Een paneel dat met een knop opengaat (spec 2026-10-09: geen uitklap-pijltjes). Een <details> zonder marker: de summary
   is een knop (.knop-uitklap, zoals .knop-klein) of een kleine link (.link-uitklap); werkt zonder JavaScript. De voetregel
   kan zelf de summary zijn (summary.pvoet). Eigen klassen: de globale regels voor label en button lekken anders. */
.paneelknop > summary { list-style: none; cursor: pointer; }
.paneelknop > summary::-webkit-details-marker { display: none; }
.knop-uitklap {
  display: inline-flex; align-items: center; height: var(--sj-knop); padding: 0 12px; border: 1px solid var(--rand);
  border-radius: var(--hoek-knop); background: var(--pagina); color: var(--tekst); font-size: 10px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
}
summary:hover .knop-uitklap, summary.knop-uitklap:hover { border-color: var(--donker); }
.paneelknop[open] > summary .knop-uitklap, .paneelknop[open] > summary.knop-uitklap {
  background: var(--donker); border-color: var(--donker); color: #fff;
}
.link-uitklap { font-size: 12px; color: var(--zacht); text-decoration: underline; text-underline-offset: 3px; }
.paneelknop > summary.pvoet { margin-top: 12px; }
@media (max-width: 550px) {
  .knop-uitklap { height: 44px; }
}

/* De widget Aanvraag (spec 2026-10-09; templates/core/widgets/aanvraag.html): per groep een kopje en de velden als witte
   tegels (nog niet bekend gestippeld), met de herkomst als een klein label - standaard zacht, afwijkend donker, gevraagd
   brons - en *bij Productie* als de afdeling het veld heeft. De wijzigingsverzoeken als tegels met de knoppen rechts.
   Eigen klassen (av-…): de globale regels voor label, input en button lekken anders in het formulier. */
.av { display: flex; flex-direction: column; gap: 12px; }
.av-groep { display: flex; flex-direction: column; gap: 6px; }
.av-kop { margin: 0; font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--zacht); }
.av-velden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.av-veld { flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.av-label { flex: 0 0 100%; font-size: 11px; color: var(--zacht); }
.av-waarde { min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.tegel.mist .av-waarde { font-weight: 400; }
.av-meta { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.av-herkomst, .av-slot {
  display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 4px; background: var(--vlak-2);
  color: var(--donker); font-size: 10px; line-height: 1; white-space: nowrap;
}
.av-herkomst[data-herkomst="afwijkend"] { background: var(--donker); color: var(--pagina); }
.av-herkomst[data-herkomst="gevraagd"] { background: var(--let-vlak); color: var(--let); white-space: normal; height: auto; padding: 3px 6px; }
.av-slot { background: transparent; border: 1px solid var(--lijn); color: var(--zacht); }
/* PR 3, taak 4c (spec § 23.2): ordernummer en itemcode onder Verzenden, twee leesregels met invullen (zoals Extra & levering van de strook). */
.av-stip { display: inline-block; width: 5px; height: 5px; margin-left: 6px; vertical-align: middle; border-radius: 50%; background: var(--let); }
.av-adm { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.av-adm-rij { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; font-size: 12px; min-width: 0; }
.av-adm-lb { color: var(--zacht); }
.av-adm-w { min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.av-adm-rij.mist .av-adm-w { font-weight: 400; color: #9a9c9f; }
.av-adm-act { margin-left: auto; font-size: 12px; color: var(--tekst); text-decoration: underline; text-underline-offset: 3px; }
.av-adm-act:hover { color: var(--zacht); }
.av-verzoeken .av-velden { grid-template-columns: minmax(0, 1fr); }
.av-verzoek { flex-wrap: wrap; align-items: flex-start; }
.av-verzoek-tekst { display: flex; flex: 1 1 16rem; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.av-reden { font-size: 12px; }
.av-zacht { color: var(--zacht); font-size: 12px; }
.av-knoppen { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; margin-left: auto; }
.av-knoppen form { margin: 0; }
.av-recent { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.av-form { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.av-form .av-veldlabel { display: block; margin: 4px 0 0; font-size: 12px; color: var(--zacht); }
.av-form input[type=text], .av-form input[type=number], .av-form select, .av-form textarea { width: 100%; max-width: 420px; }
.av-form input[type=number] { padding: .45rem .6rem; font: inherit; border: 1px solid var(--rand); border-radius: var(--radius); }
.av-form textarea { font: inherit; padding: .5rem .75rem; border: 1px solid var(--rand); border-radius: var(--radius); }
.av-form button[type=submit].knop-klein { align-self: flex-start; margin-top: 6px; }
/* De aanvraag in de tegels (ronde 4, spec 2026-10-12; templates/core/widgets/_aanvraag_tegel.html, static/js/
   aanvraag_inline.js): een tegel die je mag wijzigen is één knop met een potloodje bij hover; open krijgt hij een donkere
   rand en schaduw en staat het formulier in de tegel. Op slot (een wijzigingsverzoek) is de rand brons. De hardware
   opent over de volle breedte. De schakelaar is een rij keuzerondjes (.av-seg), ook zonder JavaScript. */
.av-veld { position: relative; }
.tegel.av-bewerkbaar { display: block; padding: 0; transition: border-color .15s, box-shadow .15s; }
.tegel.av-bewerkbaar:hover { border-color: #bdbdb8; }
.av-tegelknop {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 7px 28px 7px 10px; color: inherit;
  text-decoration: none; border-radius: 7px; cursor: pointer;
}
.av-tegelknop:focus-visible { outline: 2px solid var(--donker); outline-offset: 1px; }
.av-pen { position: absolute; top: 6px; right: 10px; font-size: 12px; color: var(--zacht); opacity: 0; transition: opacity .15s; }
.tegel.av-bewerkbaar:hover .av-pen, .av-tegelknop:focus-visible .av-pen { opacity: 1; }
.av-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.tegel.av-open { background: var(--pagina); border: 1.5px solid var(--donker); box-shadow: 0 4px 14px rgba(0, 0, 0, .08); }
.tegel.av-open.av-opslot { border-color: var(--let); }
.av-open .av-tegelknop .av-waarde, .av-open .av-tegelknop .av-meta, .av-open .av-pen { display: none; }
.av-slottekst { color: var(--let); }
.av-veld:not(.av-open) .av-slottekst { display: none; }
.av-velden > .av-vol.av-open { grid-column: 1 / -1; }
/* In een smal paneel (de widget breed naast andere) is een halve tegel te krap om in te werken: open over de hele rij. */
.av { container-type: inline-size; }
@container (max-width: 640px) {
  .av-velden > .av-open { grid-column: 1 / -1; }
}
.av-bewerk { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 0 10px 10px; }
.av-bewerk[hidden], .av-ondergrond[hidden], .av-fout[hidden] { display: none; }
.av-bewerk .av-veldlabel { display: block; margin: 2px 0 0; font-size: 12px; color: var(--zacht); }
/* input.av-in: even specifiek als de globale regel voor input[type=text] en select, en erna. */
.av-bewerk input.av-in, .av-bewerk select.av-in, .av-bewerk textarea.av-in {
  width: 100%; max-width: none; margin: 0; padding: 7px 9px; font: inherit; font-size: 13px; border: 1px solid var(--lijn);
  border-radius: 6px; background: var(--pagina);
}
.av-bewerk input.av-getal { width: 6em; }
.av-bewerk textarea.av-in { resize: vertical; }
.av-seg {
  display: inline-flex; flex-wrap: wrap; align-self: flex-start; gap: 2px; max-width: 100%; margin: 0; padding: 3px;
  border: 0; border-radius: 7px; background: var(--vlak);
}
.av-seg label { position: relative; display: inline-flex; margin: 0; font-size: 12px; color: var(--zacht); cursor: pointer; }
.av-seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.av-seg span { padding: 4px 10px; border-radius: 5px; }
.av-seg input:checked + span { background: var(--pagina); color: var(--tekst); font-weight: 500; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.av-seg input:focus-visible + span { outline: 2px solid var(--donker); outline-offset: 1px; }
.av-addons { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 6px 12px; }
.av-addon { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; font-size: 13px; color: var(--tekst); }
.av-addon.vast { flex-wrap: wrap; }   /* een add-on die niet meer te kiezen is: alleen lezen (review Fable 2, bevinding 1) */
.av-bewerk .av-zacht { margin: 0; }
.av-acties { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 12px; margin-top: 2px; }
.av-hint { margin-right: auto; font-size: 11px; color: var(--zacht); }
.av-acties .av-annuleer { font-size: 12px; font-weight: 400; color: var(--zacht); text-decoration: underline; text-underline-offset: 3px; }
.av-acties button[type=submit].knop-klein { height: 30px; }
.av-fout { margin: 0; font-size: 12px; color: var(--laat); }
.av-gemeld { position: absolute; top: 6px; right: 10px; padding-left: 6px; font-size: 11px; color: #3b7a32; background: var(--pagina); }
.av-melding { display: block; margin: 0 10px 8px; font-size: 12px; color: var(--let); }
.av-verzoekvak { display: contents; }
/* De hardware onder zijn kopjes (2026-10-15, mockup hardware-groepen; _aanvraag_tegel.html, _hardware_regel.html,
   _hardware_stand.html): per kopje een kleine hoofdletterkop met rechts standaard (zacht) of afwijkend (brons), de
   regels met het aantal rechts. Open per kopje de keuze, het aantal en ✕; *+ Fitting* en *Terug naar de standaard* als
   link (alleen met het script). Een zoeklijst in een open tegel opent ónder het veld en schuift mee met de pagina: in
   de stroom, geen tweede schuifbalk in de tegel; alleen een heel lange lijst krijgt een eigen hoogte. */
.av-waarde.hw-lezen { display: flex; flex: 1 1 100%; flex-direction: column; font-weight: 400; }
.hw-kopje-lezen { display: flex; flex-direction: column; gap: 1px; padding: 6px 0; border-top: 1px solid var(--rand); }
.hw-kopje-lezen:first-child { padding-top: 2px; border-top: 0; }
.hw-kop {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 10.5px; font-weight: 400;
  letter-spacing: .12em; text-transform: uppercase; color: var(--zacht);
}
.hw-naam { min-width: 0; overflow-wrap: anywhere; }
.hw-stand {
  flex: none; padding: 1px 7px; font-size: 10.5px; letter-spacing: 0; text-transform: none; color: var(--donker);
  background: var(--vlak-2); border-radius: 999px; white-space: normal;
}
.hw-stand[data-stand="afwijkend"] { color: var(--let); background: var(--let-vlak); }
.hw-stand[hidden] { display: none; }
.hw-regel-lezen { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.hw-x { flex: none; color: var(--zacht); }
.hw-geen { font-size: 13px; font-style: italic; color: var(--zacht); }
.hw-bewerk { display: flex; flex-direction: column; }
.hw-kopje { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; border-top: 1px solid var(--rand); }
.hw-kopje:first-child { padding-top: 2px; border-top: 0; }
.hw-regels { display: flex; flex-direction: column; gap: 6px; }
.hw-regels:empty { display: none; }
.hw-regel { display: grid; grid-template-columns: minmax(0, 1fr) 4.5em 28px; gap: 8px; align-items: start; }
.av-bewerk .hw-regel input.av-getal { width: 100%; }
.hw-weg {
  position: relative; display: grid; place-items: center; height: 34px; margin: 0; font-size: 15px; color: var(--zacht);
  cursor: pointer;
}
.hw-weg input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.hw-weg:has(input:focus-visible) { outline: 2px solid var(--donker); outline-offset: 1px; border-radius: 6px; }
.hw-weg:hover { color: var(--laat); }
.hw-regel:has(.hw-weg input:checked) { opacity: .45; text-decoration: line-through; }
.hw-regel:has(.hw-weg input:checked) .hw-weg { color: var(--laat); }
.av-bewerk button.link.hw-plus, .av-acties button.link.hw-terug { font-size: 12.5px; text-underline-offset: 3px; }
.av-bewerk button.link.hw-plus { align-self: flex-start; }
.hw-plus[hidden], .hw-terug[hidden] { display: none; }
.av-acties .hw-terug { margin-right: 6px; color: var(--zacht); font-size: 11px; }
.av-bewerk .zl-lijst { position: static; margin-top: 4px; max-height: 70vh; box-shadow: 0 6px 18px #1d26301a; }
.zl-geen { font-style: italic; color: var(--zacht); }
/* De tab Hardware (spec 2026-10-15; hardware/templates/hardware/): wat ook buiten de tab staat - de versie en *geprint*
   in de stuklijst, *Andere custom hardware* onder een kopje, de aanvragen in Mijn taken. De tab zelf: hardware.css. */
.ht-v { flex: none; margin-left: 6px; font-size: 11px; color: var(--zacht); }
.ht-geprint { flex: none; margin-left: 6px; padding: 0 7px; font-size: 10.5px; color: #3b7a32; background: #eaf3e7; border-radius: 999px; }
.ht-geprint.nog { color: var(--let); background: var(--let-vlak); }
.ht-meta { font-size: 12px; color: var(--zacht); }
.ht-tag { display: inline-block; padding: 1px 7px; font-size: 11px; color: var(--donker); background: var(--vlak-2); border-radius: 999px; }
.ht-tag.ht-brons { color: var(--let); background: var(--let-vlak); }
.ht-tag.ht-groen { color: #3b7a32; background: #eaf3e7; }
.ht-anders { margin-top: 4px; padding: 6px 10px; border: 1px dashed var(--rand); border-radius: var(--hoek); }
.ht-anders > summary { font-size: 12.5px; cursor: pointer; }
.ht-anders ul { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.ht-ander { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.ht-andertekst { flex: 1; min-width: 0; }
.ht-duim { display: block; flex: none; width: 36px; height: 36px; border-radius: 6px; background: var(--vlak-2); overflow: hidden; }
.ht-duim img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ht-aanvraagform { display: none; }
.ht-aanvragen { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ht-aanvraag {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px;
  border-left: 3px solid var(--let); background: var(--pagina); border-radius: 6px;
}
.ht-aanvraagtekst { flex: 1 1 260px; min-width: 0; font-size: 13.5px; }
.ht-knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ht-inline { display: inline; margin: 0; }
.ht-afwijzen > summary { list-style: none; }
.ht-afwijzen[open] { flex-basis: 100%; }
.ht-form { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.ht-label { margin: 0; font-size: 12px; color: var(--zacht); }
@media (max-width: 550px) {
  .av-velden { grid-template-columns: minmax(0, 1fr); }
  .av-hint { flex: 1 0 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .tegel.av-bewerkbaar, .av-pen { transition: none; }
}

/* De tegels van de bedden in Printopdracht (spec 2026-10-09): de thumbnail links, de tekst en de ene knop rechts. */
.po-bed { flex-direction: row; align-items: flex-start; gap: 10px; }
.po-beeld { display: block; flex: none; width: 64px; height: 64px; border-radius: 6px; background: var(--grijsvlak); overflow: hidden; }
.po-beeld img { display: block; width: 100%; height: 100%; object-fit: contain; }
.po-bedtekst { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; }
/* De printtijd van Corpus (spec 2026-11-07, deel 5, mockup snelheid-starten): onder de tijd (± Corpus, klein en grijs
   Orca) de regel *Inschatting van Corpus: Orca × 1,07 · uit 41 prints*, grijs (.po-zacht) en iets kleiner. */
.po-inschatting { font-size: 11.5px; overflow-wrap: anywhere; }
.po-stand { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.po-ander { color: var(--let); border-bottom: 1px dashed var(--let); }

/* Waar en wanneer (17 okt 2026, mockup printers-redesign, deel 4): per bed de printer en de tijd, de pil met de stand en
   een kleine tijdlijn *Op de printers* met dunne balkjes: printen donker, ingepland grijs. */
.po-plek { display: flex; flex-direction: column; gap: 1px; font-size: 12px; color: var(--zacht); }
.po-plekregel { overflow-wrap: anywhere; }
.po-plekpil { display: inline-block; margin-left: 6px; padding: 1px 9px; border-radius: 999px; background: var(--vlak-2); font-size: 11px; white-space: nowrap; vertical-align: 1px; }
.po-plekpil[data-stand="printing"] { background: var(--donker); color: #fff; }
.po-plekpil[data-stand="to_plan"] { background: var(--let-vlak); color: var(--let); }
.po-planning { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: #fff; }
.po-planningkop { margin: 0 0 8px; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--zacht); }
.po-tijdlijn { display: flex; flex-direction: column; }
.po-tl-kop, .po-tl-rij { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 8px; }
.po-tl-dagen, .po-tl-baan { position: relative; }
.po-tl-dagen { height: 18px; font-size: 10.5px; color: var(--zacht); }
.po-tl-dagen > span { position: absolute; top: 0; padding-left: 4px; border-left: 1px solid var(--rand, #e6e6e4); white-space: nowrap; overflow: hidden; }
.po-tl-rij { border-top: 1px solid var(--rand, #e6e6e4); }
.po-tl-printer { font-size: 12px; }
.po-tl-baan { height: 26px; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / var(--dagen) - 1px), var(--rand, #e6e6e4) calc(100% / var(--dagen) - 1px), var(--rand, #e6e6e4) calc(100% / var(--dagen))); }
.po-blok { position: absolute; top: 8px; height: 10px; min-width: 6px; border-radius: 5px; background: #b9bcbf; overflow: hidden; font-size: 0; text-decoration: none; }
.po-blok[data-stand="printing"] { background: var(--donker); }
a.po-blok:hover, a.po-blok:focus-visible { outline: 2px solid var(--let); outline-offset: 1px; }
.po-tl-nu { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--laat); }
.po-planningvoet { margin: 8px 0 0; font-size: 12px; }
/* De tabel Prints van de printopdracht (spec 2026-11-07, mockup snelheid-starten, deel 3): de laagste snelheid tijdens
   het printen, onder 100% een pil in brons. */
.po-prints { margin: 14px 0 0; }
.po-tabel { width: 100%; border-collapse: collapse; font-size: 13px; }
.po-tabel th { padding: 0 8px 6px 0; text-align: left; font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--zacht); }
.po-tabel td { padding: 6px 8px 6px 0; border-top: 1px solid var(--rand); }
.po-snelpil { display: inline-block; padding: 1px 7px; border-radius: 9px; background: var(--let-vlak); color: var(--let); font-size: 11.5px; }
.po-printsvoet { margin: 10px 0 0; }
.po-planlinks { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.po-knoppen form { margin: 0; }
.po-afkeuren[open] { flex-basis: 100%; }
.po-voet { margin-top: 2px; }
.po-klein[open] { flex-basis: 100%; }
.pg-paneel { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }

/* Spec 2026-10-12 (§ 6): interne vragen - Vraag stellen in de kop, de draadjes, @naam. */
.vr-kop { display: inline-flex; align-items: center; gap: 10px; position: relative; flex-wrap: wrap; }
.vr-stellen > summary { list-style: none; cursor: pointer; }
.vr-stellen > summary::-webkit-details-marker { display: none; }
/* De knop Vragen (ronde 4 aanpassingen, knoppenbalk optie B): een gewone lichte knop (.knop) met een klein rood
   tellertje als er open vragen zijn; het vak met bovenaan de open vragen en daaronder het formulier. */
.vr-knop { white-space: nowrap; }
.vr-teller {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--laat); color: #fff; font-size: 10px; font-weight: 500; letter-spacing: 0; line-height: 1;
}
.vr-paneel { display: none; }
.vr-stellen[open] .vr-paneel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: min(380px, calc(100vw - 32px));
  display: grid; gap: 6px; padding: 14px; border: 1px solid var(--lijn); border-radius: var(--hoek, 8px); background: #fff;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .08); text-align: left; }
.vr-kop.links .vr-stellen[open] .vr-paneel { left: 0; right: auto; }      /* review B1: de knop links, het vak ook */
@media (max-width: 550px) {
  /* Review B1 (fixgolf 2): op de telefoon over de hele breedte met de gewone marge, nooit buiten beeld. */
  .vr-stellen[open] .vr-paneel, .vr-kop.links .vr-stellen[open] .vr-paneel { position: fixed; left: 16px; right: 16px;
    top: 64px; width: auto;
    max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); overflow-y: auto; }
}
.vr-form { display: grid; gap: 6px; margin: 0; }
.vr-verzoek { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tekst); }   /* Marketing: Verzoek */
.vr-form textarea, .vr-form input[type="text"], .vr-form select { width: 100%; box-sizing: border-box; font: inherit; }
.vr-voet { display: flex; justify-content: space-between; }
.vr-paginakop { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.vr-vraag { padding: 12px 0; border-top: 1px solid var(--lijn); }
.vr-vraag:first-child { border-top: 0; }
.vr-vraag.vr-dicht { opacity: .75; }
.vr-vraagkop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.vr-pil { padding: 1px 8px; border-radius: 9px; font-size: 12px; background: var(--vlak-2); }
.vr-pil.open { background: var(--laat-vlak); color: var(--laat); }
.vr-knoppen { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin-top: 4px; }
.vr-knoppen form { margin: 0; }
.vr-noemen { position: relative; z-index: 45; margin: 2px 0 0; padding: 4px 0; list-style: none; border: 1px solid var(--lijn);
  border-radius: 6px; background: #fff; max-width: 320px; }
.vr-noemen li { padding: 4px 10px; cursor: pointer; font-size: 13px; }
.vr-noemen li.actief, .vr-noemen li:hover { background: var(--vlak); }
.vraag-hierover { margin-left: 8px; font-size: 12px; }

/* Spec 2026-10-12 (§ 7, § 9): het schakelaartje Lijst · Blokken (Printers, Productie). */
.weergave-keuze { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--hoek-knop); background: var(--vlak); }
.weergave-keuze a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px;
  border-radius: var(--hoek-knop); color: var(--zacht); text-decoration: none; font-size: 13px; }
.weergave-keuze a[aria-current] { background: var(--pagina); color: var(--tekst); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.weergave-keuze .icoon { width: 16px; height: 16px; }

/* Spec 2026-10-12 (§ 9): Productie als blokken - productieprojecten en printopdrachten als kaarten (klassen pr-). */
.pr-kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.pr-blokken { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.pr-blok { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border: 1px solid var(--rand);
  border-radius: var(--hoek); background: var(--pagina); color: var(--tekst); text-decoration: none; min-width: 0; }
.pr-blok:hover { border-color: var(--donker); }
.pr-blokkop { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-width: 0; }
.pr-blokkop b { font-weight: 500; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-renders { display: flex; gap: 6px; }
.pr-renders img { width: 48px; height: 64px; object-fit: contain; border-radius: 6px; background: var(--grijsvlak); }
.pr-feiten { font-size: 13px; color: var(--zacht); }
.pr-balk { display: block; height: 6px; border-radius: 3px; background: var(--vlak-2); overflow: hidden; }
.pr-balk i { display: block; height: 100%; background: var(--donker); }
.pr-voortgang { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.pr-opdracht { display: flex; gap: 12px; align-items: flex-start; }
.pr-render { flex: none; width: 56px; height: 72px; object-fit: contain; border-radius: 6px; background: var(--grijsvlak); }
.pr-render.leeg { display: inline-block; }
.pr-opdrachtinfo { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.pr-pil { padding: 1px 8px; border-radius: 999px; font-size: 12px; white-space: nowrap; background: var(--vlak-2); }
.pr-pil.pr-collecting { background: var(--let-vlak); color: var(--let); }
.pr-pil.pr-to_plan { background: #e6edf6; color: #2f5d8f; }
.pr-pil.pr-planned { background: #ece8f3; color: #5b4a85; }
.pr-pil.pr-printing { background: var(--donker); color: #fff; }
.pr-pil.pr-printed { background: #e3f0e6; color: #2f6b3e; }
@media (min-width: 768px) {
  .pr-blokken { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}

/* Spec 2026-10-12 (§ 8): losse gcodes - het label Los en de pagina. */
.pp-los { background: #ece8f3; color: #5b4a85; }
.lg-naam { display: inline-flex; align-items: center; gap: 10px; }
.lg-naam img, .lg-leeg { width: 44px; height: 44px; flex: none; object-fit: contain; border-radius: 6px; background: var(--vlak); }
.lg-aantal { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.lg-aantal input { width: 64px; }
.lg-acties form { display: inline; margin: 0 0 0 10px; }

/* Spec 2026-10-12, ronde 4 aanpassingen (§ 1, § 2): Vraag stellen sluit - ✕, Annuleren, Esc en een klik ernaast. De laag
   hoort bij de summary: een klik ernaast is een klik op de summary en klapt de <details> dicht, ook zonder JavaScript. */
.vr-stellen[open] > summary::before { content: ""; position: fixed; inset: 0; z-index: 39; cursor: default;
  background: rgba(29, 29, 27, .18); }
.vr-formkop { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 2px; }
.vr-formkop b { font-weight: 500; font-size: 14px; overflow-wrap: anywhere; }
.vr-sluit { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--vlak); color: var(--tekst); font-size: 15px; line-height: 1; text-decoration: none; }
.vr-sluit:hover, .vr-sluit:focus-visible { background: var(--vlak-2); }
.vr-voet { gap: 10px; align-items: center; }
.vr-annuleer { background: none; color: var(--zacht); }
/* Ronde 7 (mockup vragen-v2): de knoppen in de kop, het venster met Aan jou en Open als kaartjes, en de nieuwe vraag in
   drie stapjes (static/js/vraag_stellen.js zet .vr-js en data-vr-stand: één stand tegelijk; zonder JavaScript alles onder
   elkaar en de keuzelijst). */
.vr-aanjou { margin-left: 6px; color: var(--let); font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.vr-plus { border-style: dashed; white-space: nowrap; }
.vr-stellen.vr-js[data-vr-stand="nieuw"] [data-vr-lijst], .vr-stellen.vr-js[data-vr-stand="lijst"] [data-vr-form] { display: none; }
.vr-lijstvak, .vr-kaarten { display: grid; gap: 8px; }
.vr-kaarten { max-width: 760px; }
.vr-sectie { display: flex; justify-content: space-between; margin: 6px 0 0; font-size: 10px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--zacht); }
.vr-sectie span { letter-spacing: 0; }
.vr-kaart { display: grid; gap: 4px; padding: 10px 12px; border-radius: 8px; background: var(--vlak); font-size: 13px; }
.vr-kaart.vr-aan-jou { background: var(--let-vlak); }
.vr-kaart.vr-gemarkeerd { box-shadow: inset 0 0 0 2px var(--donker); scroll-margin: 12px; }   /* ?vraagkaart= (V1) */
.vr-kaartkop { display: flex; justify-content: space-between; gap: 8px; margin: 0; font-size: 11px; color: var(--tekst); }
.vr-wie b { font-weight: 500; }
.vr-waar { font-weight: 500; }
.vr-tijd { flex: none; color: var(--tekst); }
.vr-onderwerp { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.vr-tekst { margin: 0; font-size: 14px; overflow-wrap: anywhere; white-space: pre-line; }
.vr-plekpil { justify-self: start; padding: 1px 8px; border-radius: 9px; background: var(--pagina); font-size: 11px; color: var(--tekst); }
.vr-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 12px; }
.vr-acties form { margin: 0; }
.vr-acties a, .vr-acties .link, .vr-antw > summary { color: var(--tekst); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.vr-antw > summary { list-style: none; }
.vr-antw > summary::-webkit-details-marker { display: none; }
.vr-antw[open] { flex-basis: 100%; }
.vr-antwform { display: grid; gap: 6px; margin: 6px 0 0; }
.vr-antwform textarea { width: 100%; box-sizing: border-box; font: inherit; }
.vr-antwform .knop-klein { justify-self: end; }
.vr-leeg { margin: 0; font-size: 13px; color: var(--zacht); }
.vr-nieuwknop { display: block; padding: 10px; border: 1px dashed var(--rand); border-radius: 8px; text-align: center;
  font-size: 13px; font-weight: 500; color: var(--tekst); text-decoration: none; }
.vr-nieuwknop:hover, .vr-nieuwknop:focus-visible { background: var(--vlak); }
.vr-lijstvoet { margin: 0; font-size: 12px; color: var(--zacht); }
.vr-lijstvoet a { color: var(--zacht); }
.vr-voortgang { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 2px 0 4px; }
.vr-voortgang span { height: 3px; border-radius: 2px; background: var(--vlak-2); }
.vr-voortgang span.aan { background: var(--donker); }
.vr-stappen, .vr-stap, .vr-velden, .vr-zonderjs { display: grid; gap: 8px; }
.vr-stap[hidden], .vr-velden[hidden], .vr-zonderjs[hidden], .vr-onderwerpvak[hidden] { display: none; }
.vr-terug { justify-self: start; font-size: 12px; color: var(--zacht); text-decoration: none; }
.vr-stapkop { margin: 2px 0 0; font-size: 12px; color: var(--zacht); }
.vr-hint { margin: 0; font-size: 12px; color: var(--zacht); }
.vr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vr-chip { padding: 6px 12px; border: 1px solid var(--rand); border-radius: 999px; background: var(--pagina); color: var(--tekst);
  font: inherit; font-size: 12px; cursor: pointer; }
.vr-chip:hover, .vr-chip:focus-visible { border-color: var(--donker); }
.vr-keus { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--rand); border-radius: 8px; background: var(--pagina);
  color: var(--tekst); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.vr-keus b { font-weight: 500; }
.vr-keus small { font-size: 11px; color: var(--zacht); }
.vr-keus:hover, .vr-keus:focus-visible, .vr-keus.aan { border-color: var(--donker); }
.vr-mensen { display: grid; margin: 0; padding: 0; list-style: none; max-height: 240px; overflow-y: auto; }
.vr-mensen[hidden] { display: none; }
.vr-mens { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 4px; border: 0; border-bottom: 1px solid var(--rand);
  background: none; color: var(--tekst); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.vr-mens.ster { background: var(--vlak); border-radius: 6px; padding-left: 8px; }
.vr-mens:hover, .vr-mens:focus-visible { background: var(--vlak); }
.vr-mens small { margin-left: auto; color: var(--zacht); font-size: 11px; text-align: right; }
.vr-ster { color: var(--let); }
.vr-plek { justify-self: start; display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 2px 4px 2px 10px;
  border-radius: 999px; background: var(--let-vlak); font-size: 12px; color: var(--tekst); }
.vr-plek[hidden] { display: none; }
.vr-plekweg { padding: 0 4px; border: 0; background: none; color: var(--tekst); font: inherit; cursor: pointer; }
.vr-onderwerpknop { justify-self: start; font-size: 12px; }
.vr-onderwerpvak { display: grid; gap: 4px; }
.vr-js .vr-velden > .vr-tekstlabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }   /* de placeholder zegt het */
.vr-fout { margin: 0; font-size: 12px; color: var(--laat); font-weight: 500; }
.vr-fout[hidden] { display: none; }
/* De widget Mijn vragen (ronde 7, core/widgets/mijn_vragen.py): tabbladen met keuzerondjes, zonder JavaScript. */
.mv { display: grid; gap: 6px; }
.mv-keus { position: absolute; opacity: 0; pointer-events: none; }
.mv-tabs { display: flex; flex-wrap: wrap; gap: 4px 14px; border-bottom: 1px solid var(--rand); font-size: 12px; }
.mv-tab { margin: 0 0 -1px; padding: 4px 0 6px; border-bottom: 2px solid transparent; color: var(--zacht); cursor: pointer; }
.mv-tab b { font-weight: 500; }
.mv-keus:nth-of-type(1):checked ~ .mv-tabs .mv-tab:nth-child(1), .mv-keus:nth-of-type(2):checked ~ .mv-tabs .mv-tab:nth-child(2),
.mv-keus:nth-of-type(3):checked ~ .mv-tabs .mv-tab:nth-child(3) { border-bottom-color: var(--donker); color: var(--tekst); }
.mv-keus:focus-visible ~ .mv-tabs { outline: 2px solid var(--donker); outline-offset: 2px; }
.mv-lijst { display: none; gap: 4px; margin: 0; padding: 0; list-style: none; }
.mv-keus:nth-of-type(1):checked ~ .mv-aan, .mv-keus:nth-of-type(2):checked ~ .mv-van,
.mv-keus:nth-of-type(3):checked ~ .mv-wacht { display: grid; }
.mv-regel { display: grid; gap: 1px; padding: 6px 10px; border-radius: 8px; background: var(--pagina); color: var(--tekst); text-decoration: none; }
.mv-regel:hover, .mv-regel:focus-visible { background: var(--vlak); }
.mv-kop { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--zacht); }
.mv-tekst { font-size: 13px; overflow-wrap: anywhere; }

/* Spec 2026-10-12, ronde 4 aanpassingen (§ 3): de tekening van de productiebriefing over de grote render (Briefing & PO).
   Het vak sluit precies om het beeld: de img zonder vaste maat, met een max-breedte en max-hoogte (de verhouding blijft),
   de laag (fabriek/_briefing_laag.html) erover op 0..1000. */
.aanzichtvak.met-laag { display: flex; align-items: center; justify-content: center; }
.aanzicht-laag { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
.aanzichtvak.met-laag .aanzicht-laag img { position: static; display: block; width: auto; height: auto; max-width: 100%;
  max-height: min(70vh, 560px); object-fit: initial; user-select: none; }
.aanzicht-laag .bf-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.aanzicht-laag .bf-lijn { stroke: #b3261e; stroke-width: 2px; vector-effect: non-scaling-stroke; }
.aanzicht-laag .bf-pijlpunt { fill: #b3261e; }
.aanzicht-laag .bf-rond { fill: #fff; stroke: #b3261e; stroke-width: 2px; vector-effect: non-scaling-stroke; }
.aanzicht-laag .bf-nr { fill: #b3261e; font-size: 20px; text-anchor: middle; dominant-baseline: central; }
.aanzicht-laag .bf-waarde { fill: #b3261e; font-size: 26px; font-weight: 500; paint-order: stroke; stroke: #fff; stroke-width: 4px; }
.bf-teken { position: absolute; right: 12px; bottom: 12px; z-index: 2; }
.aanzichtvak a.bf-teken, .aanzichtvak a.bf-teken:visited { color: #fff; background: var(--donker); border-color: var(--donker); }
@media (max-width: 640px) {
  .aanzichtvak.met-laag .aanzicht-laag img { max-height: 62vh; }
}

/* --- De widget Agenda (spec 2026-10-12, ronde 4 aanpassingen, § 5; ronde 6; templates/core/widgets/agenda.html) -------
   Over de hele breedte van het raster (breed en groot), links het vak (week, maand, jaar of tijdlijn), rechts Komt eraan.
   Elk soort een eigen kleur: project gewenst klaar (Deadlines) rood, jouw stap blauw, prints (Printen) groen,
   ontwikkeling brons; op de tijdlijn is de periode bij de fabriek petrol. De schakelaar Week · Maand · Jaar · Tijdlijn
   heeft een donker pilletje dat met JavaScript glijdt (.ag-glij; zonder JavaScript is de huidige link donker). Een soort
   die uit staat (.zonder-<soort> op .ag, static/js/agenda.js) laat zijn blokjes wegglijden. De animaties van de wissels
   en het bladeren doet agenda.js; hier de blokjes die binnen schuiven (--i), de balken die groeien en vandaag met een
   rustig puntje (zes keer, dan stil: een oneindige puls kost op een telefoon accu; fixgolf). Met prefers-reduced-motion
   staat alles stil. */
.ag-kader { container: agenda / inline-size; }
.ag { --ag-klaar: #b3261e; --ag-stap: #2f6fbd; --ag-print: #3b7a32; --ag-rd: #a8742a; --ag-fabriek: #2a7383;
  --ag-glad: cubic-bezier(.3, .7, .2, 1);
  display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 18px; min-height: 0; }
.ag.laadt .ag-podium { opacity: .6; transition: opacity .2s; }
.ag-links, .ag-rechts { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ag-kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ag-titel { margin: 0; font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.ag-titel::first-letter { text-transform: uppercase; }
.ag-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ag-pijl { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--lijn); border-radius: 50%;
  background: var(--pagina); color: var(--zacht); text-decoration: none; transition: border-color .15s, color .15s; }
.ag-pijl:hover { border-color: var(--donker); color: var(--tekst); }
.ag-vandaagknop { font-size: 12px; text-decoration: none; padding: 0 4px; }
.ag-seg { position: relative; display: inline-flex; margin-left: 6px; padding: 2px; border: 1px solid var(--lijn);
  border-radius: 999px; background: var(--pagina); }
.ag-seg a { position: relative; z-index: 1; padding: 4px 12px; border-radius: 999px; color: var(--zacht); font-size: 12px;
  text-decoration: none; transition: color .25s; }
.ag-seg a:hover { color: var(--tekst); }
.ag-seg a[aria-current="true"] { background: var(--donker); color: #fff; }
.ag-glij { position: absolute; top: 2px; bottom: 2px; left: 0; width: 0; border-radius: 999px; background: var(--donker);
  opacity: 0; pointer-events: none; }
.ag-seg.glijdt .ag-glij { opacity: 1; }
.ag-seg.glijdt a[aria-current="true"] { background: none; }
.ag-podium { position: relative; min-height: 0; }
.ag-inhoud { min-width: 0; }

/* Week en maand */
.ag-rooster { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.ag-week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) repeat(2, minmax(0, .6fr)); gap: 6px; }
.ag-weekdagen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) repeat(2, minmax(0, .6fr)); gap: 6px;
  font-size: 11px; color: var(--zacht); padding: 0 6px; }
.ag-dag { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 8px; border-radius: 10px;
  background: var(--pagina); transition: transform .25s ease, box-shadow .25s ease; }
.ag-weekbeeld .ag-dag { min-height: clamp(150px, 16vh, 230px); }
.ag-maand .ag-dag { min-height: clamp(74px, 8vh, 120px); gap: 3px; padding: 5px 6px; }
.ag-dag:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, .06); }
.ag-dag.weekend { background: transparent; box-shadow: inset 0 0 0 1px var(--rand); }
.ag-dag.buiten { opacity: .45; }
.ag-dag.ag-vandaag { box-shadow: inset 0 0 0 2px var(--donker); }
.ag-datum { display: flex; align-items: baseline; gap: 6px; min-width: 0; overflow: hidden; font-size: 11px;
  color: var(--zacht); white-space: nowrap; }
.ag-datum b { font-size: 16px; font-weight: 500; color: var(--tekst); }
.ag-maand .ag-datum b { font-size: 13px; }
.ag-punt { display: inline-block; width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: var(--ag-klaar);
  align-self: center; animation: ag-puls 1.8s ease-out 6; }
@keyframes ag-puls { 0% { box-shadow: 0 0 0 0 rgba(179, 38, 30, .45); } 70% { box-shadow: 0 0 0 7px rgba(179, 38, 30, 0); }
  100% { box-shadow: 0 0 0 0 rgba(179, 38, 30, 0); } }
.ag-blok { display: block; max-height: 60px; padding: 4px 6px; border-left: 3px solid var(--donker); border-radius: 6px;
  background: var(--vlak); color: var(--tekst); font-size: 11px; line-height: 1.25; text-decoration: none; overflow: hidden;
  min-width: 0; white-space: nowrap; text-overflow: ellipsis; animation: ag-in .45s ease-out backwards;
  animation-delay: calc(var(--i, 0) * 70ms);
  transition: background .15s, max-height .3s var(--ag-glad), opacity .25s, margin .3s, padding .3s; }
.ag-maand .ag-blok { padding: 2px 5px; white-space: nowrap; font-size: 10.5px; }
.ag-blok:hover { background: var(--vlak-2); }
.ag-blok small { display: block; overflow: hidden; color: var(--zacht); font-size: 10.5px; text-overflow: ellipsis; }
.ag-dagblokken { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ag-maand .ag-dagblokken { gap: 3px; }
.ag-dmaand { display: none; }
.ag-dag .ag-blok.ag-extra { display: none; }
.ag-daglijst { display: none; flex-direction: column; gap: 4px; margin-top: 6px; padding: 8px; border-radius: 10px;
  background: var(--pagina); }
.ag-daglijst h4 { margin: 0 0 2px; font-size: 12px; font-weight: 500; }
.ag-blok.klaar { border-left-color: var(--ag-klaar); }
.ag-blok.stap { border-left-color: var(--ag-stap); }
.ag-blok.print { border-left-color: var(--ag-print); }
.ag-blok.rd { border-left-color: var(--ag-rd); }
@keyframes ag-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ag-meer { font-size: 11px; color: var(--zacht); }
/* Groter dagvak op een groot scherm (2 nov 2026): de dag groeit mee met de vensterhoogte, binnen grenzen, en toont meer blokjes.
   De server rendert er hooguit MAX_PER_DAG (core/agenda.py) en rekent het getal van "+ n" voor drie maten uit; hier kiest de breedte
   van het vak welke past: breed (>= 1400 px: maand 7 en week 9 blokjes), gewoon (maand 3, week 4) en smal (<= 560 px, de telefoon:
   maand 1, week 3, als altijd). Alleen een dag met een "+ n" van die maat verbergt blokjes; de rest staat in de daglijst van de telefoon. */
.ag-meer-breed, .ag-meer-smal { display: none; }
/* Een soort uit: de blokjes glijden weg (de dag houdt zijn hoogte). */
.zonder-klaar .ag-blok.klaar, .zonder-stap .ag-blok.stap, .zonder-print .ag-blok.print, .zonder-rd .ag-blok.rd {
  max-height: 0; margin-top: -5px; padding-top: 0; padding-bottom: 0; opacity: 0; pointer-events: none; }

/* Het jaar: twaalf mini-maanden, de drukte als grijstint, een deadline als rood puntje, vandaag omkaderd. */
.ag-jaarvak { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ag-mini { display: block; padding: 7px 9px 8px; border-radius: 10px; background: var(--pagina); color: var(--tekst);
  text-decoration: none; transition: box-shadow .2s, transform .2s; }
.ag-mini:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .08); transform: translateY(-1px); }
.ag-mini.huidig { box-shadow: inset 0 0 0 2px var(--donker); }
.ag-mini-kop { display: flex; justify-content: space-between; gap: 6px; margin-bottom: 6px; font-size: 11px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; }
.ag-jaar .ag-podium, .ag-tijdlijn .ag-podium { min-height: 120px; }
.ag-mini-kop small { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ag-klaar); white-space: nowrap; }
.ag-mini-dagen { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.ag-mini-dagen i { position: relative; display: grid; place-items: center; height: 15px; border-radius: 3px;
  background: var(--vlak); color: #a3a39d; font-size: 8px; font-style: normal; line-height: 1;
  transition: background .25s, color .25s; }
.ag-mini-dagen i.ag-leeg { background: none; }
.ag-mini-dagen i.we { background: #fafaf9; }
.ag-mini-dagen i.n1 { background: #e4e2dc; color: #77776f; }
.ag-mini-dagen i.n2 { background: #cfccc4; color: #55554f; }
.ag-mini-dagen i.n3 { background: #9e9a90; color: #fff; }
.ag-mini-dagen i.nu { outline: 2px solid var(--donker); outline-offset: -1px; }
.ag-mini-dagen i.dl::after { content: ""; position: absolute; bottom: 1px; left: 50%; width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%; background: var(--ag-klaar); }

/* De tijdlijn: per lopend project een balk van start tot gewenst klaar; donker de voortgang, een rode ruit de deadline,
   groen de periode Printen, petrol bij de fabriek, rood omrand te laat, een rode lijn vandaag (--p: procent). Een rij
   is een link naar het project. Op de telefoon schuift hij binnen het vak (.ag-tl-schuif). */
.ag-tl-schuif { overflow-x: auto; }
.ag-tl { --ag-naam: 190px; position: relative; min-width: 560px; padding: 4px 0 6px; border-radius: 10px;
  background: var(--pagina); }
.ag-tl-kop, .ag-tl-rij { display: grid; grid-template-columns: var(--ag-naam) minmax(0, 1fr); }
.ag-tl-kop { height: 26px; border-bottom: 1px solid var(--lijn); }
.ag-tl-weken { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); }
.ag-tl-hoek { position: sticky; left: 0; z-index: 2; background: var(--pagina); padding: 6px 0 0 10px; color: var(--zacht); font-size: 10px; letter-spacing: .04em; }
.ag-tl-weken span { padding: 6px 0 0 4px; border-left: 1px solid var(--rand); color: var(--zacht); font-size: 10px;
  letter-spacing: .04em; white-space: nowrap; overflow: hidden; }
.ag-tl-rij { color: var(--tekst); text-decoration: none; transition: background .15s; }
.ag-tl-rij:hover { background: var(--vlak); }
.ag-tl-naam { position: sticky; left: 0; z-index: 2; min-width: 0; padding: 7px 8px 7px 10px; border-bottom: 1px solid var(--rand);
  background: var(--pagina); font-size: 12px; }
.ag-tl-rij:hover .ag-tl-naam { background: var(--vlak); }
.ag-tl-naam b, .ag-tl-naam small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-tl-naam b { font-weight: 500; }
.ag-tl-naam small { color: var(--zacht); font-size: 11px; }
.ag-tl-baan { position: relative; height: 44px; border-bottom: 1px solid var(--rand); }
.ag-tl-balk { position: absolute; top: 14px; height: 16px; min-width: 4px; border-radius: 999px; background: #e4e2dc;
  overflow: hidden; transform-origin: left;
  animation: ag-groei .62s var(--ag-glad) backwards; animation-delay: calc(var(--i, 0) * 60ms + 120ms); }
.ag-tl-naam { animation: ag-in-links .32s var(--ag-glad) backwards; animation-delay: calc(var(--i, 0) * 50ms + 60ms); }
.ag-tl-label, .ag-tl-print, .ag-tl-fab, .ag-tl-dl { animation: ag-vervaag .3s ease-out backwards;
  animation-delay: calc(var(--i, 0) * 60ms + 500ms); }
@keyframes ag-in-links { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes ag-vervaag { from { opacity: 0; } to { opacity: 1; } }
@keyframes ag-groei-y { from { transform: scaleY(0); } to { transform: none; } }
/* De kopie van het oude vak die bij het bladeren wegschuift (agenda.js): zonder de binnenkomende animaties. */
.ag-kopie, .ag-kopie * { animation: none !important; }
.ag-tl-balk i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--donker); }
.ag-tl-balk.laat { box-shadow: 0 0 0 1.5px var(--ag-klaar); }
.ag-tl-rij.rd .ag-tl-balk { background: var(--ag-rd); opacity: .75; }
.ag-tl-label { position: absolute; top: 14px; padding-left: 8px; color: #fff; font-size: 10px; line-height: 16px;
  white-space: nowrap; pointer-events: none; mix-blend-mode: difference; }
.ag-tl-print, .ag-tl-fab { position: absolute; height: 4px; min-width: 3px; border-radius: 2px; transition: opacity .25s, transform .25s; }
.ag-tl-print { top: 32px; background: var(--ag-print); }
.ag-tl-fab { top: 37px; background: var(--ag-fabriek); }
.ag-tl-dl { position: absolute; top: 16px; width: 12px; height: 12px; margin-left: -6px; border-radius: 2px;
  background: var(--ag-klaar); transform: rotate(45deg); transition: opacity .25s, transform .25s; }
.ag-tl-nu { position: absolute; top: 30px; bottom: 6px; left: calc(var(--ag-naam) + (100% - var(--ag-naam)) * var(--p) / 100);
  width: 2px; margin-left: -1px; background: var(--ag-klaar); opacity: .7; pointer-events: none; transform-origin: top;
  animation: ag-groei-y .5s var(--ag-glad) .3s backwards; }
.ag-tl-uitleg { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 8px 0 0; color: var(--zacht);
  font-size: 11px; }
.ag-tl-uitleg span { display: inline-flex; align-items: center; gap: 6px; }
.ag-tl-uitleg a { margin-left: auto; font-size: 11px; }
.ag-tl-ruit { width: 8px; height: 8px; border-radius: 1px; background: var(--ag-klaar); transform: rotate(45deg); }
.ag-tl-streep { width: 14px; height: 4px; border-radius: 2px; }
.ag-tl-streep.print { background: var(--ag-print); }
.ag-tl-streep.fab { background: var(--ag-fabriek); }
.ag-tl-omrand { width: 16px; height: 8px; border-radius: 999px; background: #e4e2dc; box-shadow: 0 0 0 1.5px var(--ag-klaar); }
.zonder-klaar .ag-tl-dl, .zonder-print .ag-tl-print { opacity: 0; transform: scale(.6); }
.zonder-klaar .ag-tl-dl { transform: rotate(45deg) scale(.4); }
.zonder-rd .ag-tl-rij.rd { display: none; }

/* De soorten als knoppen aan/uit (de legenda). */
.ag-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; font-size: 11px; color: var(--zacht); }
.ag-tip { margin-right: 2px; }
.ag-cat { display: inline-flex; align-items: center; gap: 6px; min-height: 0; padding: 4px 11px 4px 9px;
  border: 1px solid var(--lijn); border-radius: 999px; background: var(--pagina); color: var(--tekst); font: inherit;
  font-size: 11px; letter-spacing: 0; text-transform: none; cursor: pointer; transition: opacity .25s, background .25s; }
.ag-cat:hover { border-color: var(--donker); background: var(--pagina); color: var(--tekst); }
.ag-cat i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; transition: transform .25s; }
.ag-cat.klaar i { background: var(--ag-klaar); }
.ag-cat.stap i { background: var(--ag-stap); }
.ag-cat.print i { background: var(--ag-print); }
.ag-cat.rd i { background: var(--ag-rd); }
.ag-cat[aria-pressed="false"] { opacity: .45; background: transparent; }
.ag-cat[aria-pressed="false"] i { transform: scale(.4); }

/* Eigen afspraken (spec 2026-10-31, mockup agenda-afspraken): paars, met een knop in de legenda. Een week-afspraak als
   balk boven de week (.ag-weekbalken in .ag-week, over alle kolommen); afgevinkt blijft staan, maar rustiger (.gedaan).
   Outlook grijs, gestippeld, zonder link. + Afspraak in de kop; het paneel (.af-paneel, static/js/afspraken.js) zweeft
   rechts, op de telefoon een vel van onderen. */
.ag { --ag-afspraak: #6c5a9c; --ag-afspraak-vlak: #efebf7; --ag-outlook: #9a9ea3; }
.ag-nav a.ag-plus { margin-left: 6px; padding: 4px 12px; border-radius: 999px; background: var(--donker); color: #fff;
  font-size: 12px; text-decoration: none; white-space: nowrap; }
.ag-nav a.ag-plus:hover { background: #1f2123; color: #fff; }
.ag-blok.afspraak { border-left-color: var(--ag-afspraak); background: var(--ag-afspraak-vlak); }
.ag-blok.afspraak:hover { background: #e4ddf2; }
.ag-blok.outlook { border-left: 3px dashed var(--ag-outlook); color: var(--zacht); }
.ag-blok.gedaan, .ag-weekbalk.gedaan { opacity: .55; text-decoration: line-through; }
.ag-weekbalken { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ag-weekbalk { display: block; max-height: 40px; overflow: hidden; padding: 3px 8px; border-left: 3px solid var(--ag-afspraak);
  border-radius: 6px; background: var(--ag-afspraak-vlak); color: var(--tekst); font-size: 11.5px; text-decoration: none;
  white-space: nowrap; text-overflow: ellipsis; animation: ag-in .45s ease-out backwards;
  transition: max-height .3s var(--ag-glad), opacity .25s; }
.ag-weekbalk small { color: var(--zacht); font-size: 10.5px; }
.ag-cat.afspraak i { background: var(--ag-afspraak); }
.ag-cat.outlook i { background: var(--ag-outlook); }
.zonder-afspraak .ag-blok.afspraak, .zonder-outlook .ag-blok.outlook, .zonder-afspraak .ag-weekbalk {
  max-height: 0; margin-top: -5px; padding-top: 0; padding-bottom: 0; opacity: 0; pointer-events: none; }
.zonder-afspraak .ag-weekbalken { gap: 0; }
.zonder-afspraak .ag-tl-rij.afspraak { display: none; }
.ag-tl-rij.afspraak .ag-tl-balk { background: var(--ag-afspraak); opacity: .8; }
.ag-outlook { margin-left: auto; font-size: 11px; color: var(--zacht); white-space: nowrap; }

/* Een afspraak of project vanaf een dag (PR 6, mockup agenda-dag-afspraak): de + in de hoek van een dag (bij aanwijzen en
   bij focus; op een scherm zonder aanwijzer altijd), het menu eronder (Afspraak, Project) en de gekozen dag met een paarse
   rand zolang het paneel open is. Op een smal vak (de telefoon) staan de knoppen bovenaan de daglijst. */
.ag-dag { position: relative; }
.ag-dag:hover, .ag-dag:focus-within, .ag-dag.af-menu-open { z-index: 3; }
.ag-dag.af-menu-open { z-index: 5; }       /* review Z5: het open menu boven een dag eronder die ook wordt aangewezen */
.ag-dagplus { position: absolute; top: 4px; right: 4px; }
.ag-dag:has(.ag-dagplus) .ag-datum { padding-right: 24px; }
.ag-dplus { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--rand); border-radius: 50%;
  background: var(--pagina); color: var(--zacht); font-size: 14px; line-height: 1; text-decoration: none; opacity: 0;
  transition: opacity .12s, border-color .15s, color .15s; }
.ag-dag:hover .ag-dplus, .ag-dag:focus-within .ag-dplus, .ag-dplus[aria-expanded="true"], .ag-dplus:focus-visible { opacity: 1; }
@media (hover: none) { .ag-dplus { opacity: 1; } }
.ag-dplus:hover { border-color: var(--ag-afspraak); color: var(--ag-afspraak); }
.ag-dmenu { position: absolute; top: 24px; right: 0; z-index: 4; min-width: 120px; padding: 4px; border: 1px solid var(--rand);
  border-radius: 10px; background: var(--pagina); box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
.ag-dmenu[hidden] { display: none; }
.ag-dmenu a { display: block; padding: 6px 10px; border-radius: 6px; color: var(--tekst); font-size: 13px; text-decoration: none; }
.ag-dmenu a:hover, .ag-dmenu a:focus-visible { background: var(--vlak); }
.ag-dag.af-gekozen, .ag-dag.ag-vandaag.af-gekozen { box-shadow: inset 0 0 0 2px var(--ag-afspraak); background: var(--ag-afspraak-vlak); }
.ag-dagknoppen { display: none; }
.ag-dagknoppenrij { display: flex; gap: 8px; margin: 2px 0 4px; }
.ag-dagknoppenrij .knop { flex: 1; justify-content: center; text-align: center; }

.af-paneel { --ag-afspraak-vlak: #efebf7; position: fixed; z-index: 60; top: 84px; right: 24px;
  width: min(400px, calc(100vw - 32px)); max-height: calc(100vh - 110px); overflow: auto; padding: 16px 18px;
  border: 1px solid var(--rand); border-radius: 14px; background: var(--pagina); box-shadow: 0 14px 40px rgba(0, 0, 0, .14); }
.af-paneel[hidden] { display: none; }
.af-paneelkop { margin: 0 0 6px; color: var(--zacht); font-size: 11px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; }
.af-titel { margin: 0 0 2px; font-size: 16px; font-weight: 500; letter-spacing: 0; text-transform: none; overflow-wrap: anywhere; }
.af-wanneer { margin: 0 0 8px; color: var(--zacht); font-size: 12px; }
.af-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; }
.af-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 3px; border-radius: 999px;
  background: var(--vlak); font-size: 12px; }
.af-chip.afdeling { background: #efebf7; }
.af-av { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--donker);
  color: #fff; font-size: 10px; }
.af-notitie { margin: 8px 0; font-size: 13px; overflow-wrap: anywhere; }
.af-koppel { font-size: 12px; color: var(--tekst); text-decoration: underline; text-underline-offset: 3px; }
.af-knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.af-knoppen form { margin: 0; }
/* De gewone submitknop is breed en donker (de knoppen bovenin dit bestand): in het paneel klein en licht, zoals .knop. */
.af-knoppen button[type=submit].knop, .af-rij button[type=submit].knop { width: auto; min-height: 30px; margin-top: 0;
  padding: 0 12px; border: 1px solid var(--rand); background: var(--pagina); color: var(--tekst); font-size: 10px; }
.af-knoppen button[type=submit].knop:hover, .af-rij button[type=submit].knop:hover { border-color: var(--donker); }
.af-knoppen button[type=submit].knop.primair { border-color: var(--donker); background: var(--donker); color: #fff; }
.af-rij { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 0; }
.af-rijkop { min-width: 92px; color: var(--zacht); font-size: 12px; }
.af-uitleg { margin: 10px 0 0; font-size: 11.5px; }
.af-vraag { margin: 6px 0; font-size: 13px; }
/* PR 6: Meer (plaats en bijlagen) in het formulier, en de plaats en de bijlagen in het paneel van een afspraak. */
.af-meer { margin-top: .8rem; }
.af-meer summary { cursor: pointer; font-size: 13px; }
.af-form .af-meer input[type=file] { width: 100%; box-sizing: border-box; margin-top: 2px; font-size: 12px; }
.af-bijlagen { margin: 4px 0; padding: 0; list-style: none; font-size: 13px; }
.af-bijlagen li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 3px 0; overflow-wrap: anywhere; }
.af-bijlagen a { color: var(--tekst); text-decoration: underline; text-underline-offset: 3px; }
.af-form .af-bijlagen label.af-weg { display: inline-flex; align-items: center; gap: 4px; margin: 0; color: var(--zacht); font-size: 12px; }
.af-inline { display: inline; margin: 0; }
.af-plaats { margin: 6px 0; font-size: 13px; overflow-wrap: anywhere; }
.af-plaats a, .af-notitie a { color: var(--tekst); text-decoration: underline; text-underline-offset: 3px; }
.af-bijlagenvak { margin: 8px 0; }
.af-bijlagenvak .af-rijkop { margin: 0 0 2px; }
.af-bijlageform { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 0; }
.af-bijlageform input[type=file] { flex: 1 1 160px; min-width: 0; font-size: 12px; }
.af-form label { margin-top: .6rem; }
.af-form input[type=text], .af-form input[type=date], .af-form input[type=time], .af-form input[type=number],
.af-form input[type=search], .af-form select, .af-form textarea { width: 100%; box-sizing: border-box; }
.af-form input[type=date], .af-form input[type=time], .af-form input[type=number], .af-form input[type=search],
.af-form textarea { padding: .55rem .65rem; font: inherit; font-size: 14px; border: 1px solid var(--rand);
  border-radius: var(--radius); background: var(--pagina); }
.af-form input[type=text], .af-form select { padding: .55rem .65rem; font-size: 14px; }
.af-twee { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.af-twee [hidden] { display: none; }
.af-tijden { display: flex; align-items: center; gap: 4px; }
.af-tijden input { min-width: 0; }
.af-form label.af-schakel { display: flex; align-items: center; gap: 6px; margin-top: .7rem; color: var(--tekst); font-size: 13px; }
.af-herhaling { margin-top: 6px; padding: 2px 10px 10px; border-radius: 10px; background: var(--vlak); }
.af-herhaling[hidden], .af-dagen[hidden] { display: none; }
.af-elke { display: flex; align-items: center; gap: 6px; }
.af-form .af-elke input { width: 70px; flex: none; }
.af-elke .muted { font-size: 11px; }
.af-dagen { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 8px 0 0; padding: 0; border: 0; }
.af-dagen legend { margin-bottom: 2px; padding: 0; color: var(--zacht); font-size: 12px; }
.af-form .af-dagen label { display: inline-flex; align-items: center; gap: 3px; margin: 0; color: var(--tekst); font-size: 12px; }
.af-uitnodigen { margin-top: .8rem; }
.af-uitnodigen summary { cursor: pointer; font-size: 13px; }
.af-zoek { margin-top: 6px; }
.af-keuzes { max-height: 210px; overflow: auto; margin-top: 6px; padding: 4px 8px; border: 1px solid var(--rand); border-radius: 8px; }
.af-groep { margin: 6px 0 2px; font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--zacht); }
.af-groep small { letter-spacing: 0; text-transform: none; font-weight: 400; }
.af-form label.af-keuze { display: flex; align-items: center; gap: 6px; margin: 2px 0; color: var(--tekst); font-size: 13px; }
.af-keuze[hidden] { display: none; }
.af-hint { display: block; margin-top: 3px; font-size: 11px; }
.af-hint.af-te-groot { color: var(--laat); font-weight: 500; }       /* review Z2: de bijlagen zijn samen te groot */
.af-fouten { margin: 6px 0; padding-left: 18px; font-size: 13px; }
.af-pagina { max-width: 560px; }
.af-terug { margin: 0 0 8px; font-size: 13px; }
.af-stappen { margin: 12px 0 0; padding-left: 20px; font-size: 13px; color: var(--zacht); }
.af-linkveld { width: 100%; box-sizing: border-box; font-family: ui-monospace, monospace; font-size: 12px; }
.af-kopieerrij { display: flex; align-items: center; gap: 8px; }
.af-kopieerrij .af-linkveld { flex: 1; min-width: 0; }
.af-ingesteld { font-size: 14px; }
.af-rustig { padding: 6px 10px; border-radius: 8px; background: var(--vlak); color: var(--zacht); font-size: 13px; }

/* Mijn taken: het blok Afspraken (een vinkje per keer, ieder voor zich; Outlook grijs zonder vinkje). */
.af-taken { margin: 0 0 6px; }
.af-taken.af-compact { margin: 2px 0 10px; padding: 6px 10px; border-radius: 10px; background: var(--vlak); }
.af-kop { margin: 2px 0 4px; color: var(--zacht); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.af-lijst { margin: 0; padding: 0; list-style: none; }
.af-taak { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-top: 1px solid var(--rand); }
.af-taak:first-child { border-top: 0; }
.af-vinkform { margin: 0; }
.af-vink, button[type=submit].af-vink { display: block; flex: none; width: 18px; height: 18px; min-height: 0;
  margin: 1px 0 0; padding: 0; border: 1.5px solid #bfbfbc; border-radius: 5px; background: var(--pagina); cursor: pointer; }
.af-vink:hover, button[type=submit].af-vink:hover { border-color: #6c5a9c; background: #efebf7; }
.af-vink.af-leeg { display: inline-block; border-style: dashed; cursor: default; }
.af-tekst { min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.af-tekst > a { color: var(--tekst); text-decoration: none; }
.af-tekst > a:hover { text-decoration: underline; }
.af-tekst small { display: block; color: var(--zacht); font-size: 12px; }
.af-pil { margin-left: 4px; padding: 1px 8px; border-radius: 99px; background: #efebf7; color: #6c5a9c; font-size: 11px; white-space: nowrap; }
.af-outlook .af-tekst { color: var(--zacht); }
.af-outlook .af-pil { background: var(--vlak-2); color: var(--tekst); }
/* Mijn taken: het blok Requests (spec 2026-10-31, § 12.8): nummer, titel met klant en afdeling, wat er van jou gevraagd
   wordt. Op de telefoon onder elkaar. */
.rq-taken { margin: 0; padding: 0; list-style: none; }
.rq-taak { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: baseline; gap: 4px 12px;
  padding: 8px 0; border-top: 1px solid var(--rand); font-size: 14px; }
.rq-taak:first-child { border-top: 0; }
.rq-nummer { font-weight: 500; white-space: nowrap; }
.rq-tekst { min-width: 0; overflow-wrap: anywhere; }
.rq-tekst b { font-weight: 500; }
.rq-tekst small, .rq-wat small { display: block; color: var(--zacht); font-size: 12px; }
.rq-wat { color: var(--zacht); font-size: 13px; text-align: right; }
@media (max-width: 600px) {
  .rq-taak { grid-template-columns: 56px minmax(0, 1fr); }
  .rq-wat { grid-column: 2; text-align: left; }
}
html.tel .af-paneel { top: auto; right: 0; bottom: 0; left: 0; width: auto; max-height: 85vh; border-radius: 16px 16px 0 0;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 600px) {
  .af-paneel { top: auto; right: 0; bottom: 0; left: 0; width: auto; max-height: 85vh; border-radius: 16px 16px 0 0; }
  .af-twee { grid-template-columns: minmax(0, 1fr); }
}

/* Komt eraan: links de dagen tot gewenst klaar (ZSM in brons, te laat in rood), in het midden naam, klant, items, datum
   en een streepje per stap (gedaan donker, die van nu gestreept), rechts waar het nu is. */
.ag-lijst { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ag-rij { display: grid; grid-template-columns: 58px minmax(0, 1fr) minmax(0, 120px); align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 10px; background: var(--pagina); color: var(--tekst); text-decoration: none;
  animation: ag-in .45s ease-out backwards; animation-delay: calc(var(--i, 0) * 80ms); transition: transform .2s ease; }
.ag-rij:hover { transform: translateX(2px); }
.ag-tel { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 44px; padding: 4px 2px;
  border-radius: 8px; background: var(--vlak); text-align: center; line-height: 1.1; }
.ag-tel b { font-size: 18px; font-weight: 500; }
.ag-tel small { margin-top: 2px; font-size: 10px; color: var(--zacht); }
.ag-rij.zsm .ag-tel { background: #f6efe2; }
.ag-rij.zsm .ag-tel b { color: var(--ag-rd); font-size: 13px; letter-spacing: .06em; }
.ag-rij.laat .ag-tel { background: var(--laat-vlak); }
.ag-rij.laat .ag-tel b { color: var(--laat); }
.ag-rijtekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; }
.ag-rijtekst b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-rijtekst .meta { overflow: hidden; font-size: 11px; color: var(--zacht); text-overflow: ellipsis; white-space: nowrap; }
.ag-stappen { display: flex; gap: 3px; margin-top: 5px; }
.ag-stappen i { flex: 1; height: 5px; border-radius: 3px; background: var(--lijn); transform-origin: left;
  animation: ag-groei .5s var(--ag-glad) backwards; animation-delay: calc(var(--i, 0) * 80ms + .15s); }
.ag-stappen i.k { background: var(--donker); }
.ag-stappen i.n { background: repeating-linear-gradient(90deg, var(--donker) 0 4px, #bdbdb8 4px 7px); }
.ag-rij.laat .ag-stappen i.k { background: var(--laat); }
@keyframes ag-groei { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ag-stand { font-size: 11px; color: var(--zacht); text-align: right; }
.ag-stand b { display: block; color: var(--tekst); font-size: 12px; font-weight: 500; overflow-wrap: anywhere; }
.ag-pil { padding: 1px 8px; border: 1px solid var(--lijn); border-radius: 999px; background: var(--pagina); font-size: 10.5px;
  white-space: nowrap; color: var(--zacht); }
.ag-pil.laat { background: var(--laat); border-color: var(--laat); color: #fff; }
.ag-alle { align-self: flex-start; font-size: 12px; text-decoration: none; }
/* Ronde 6 (bug van de gebruiker): responsief op de breedte van het VAK, niet van het venster - in de bouwer naast een
   ander vak, op een smal scherm en op de telefoon (.ag-kader is de container). Smaller dan 760 px Komt eraan onder de
   agenda; smaller dan 560 px de week als lijst per dag (de datum links, de blokjes rechts als regels; een leeg weekend
   samen op één regel), de maand compact met puntjes per dag (een tik toont de blokjes eronder, agenda.js), het jaar in
   twee kolommen; de tijdlijn schuift binnen het vak. Een blokje breekt nooit per letter af (nowrap met ellipsis). */
@container agenda (max-width: 760px) {
  .ag { grid-template-columns: minmax(0, 1fr); }
  .ag-jaarvak { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .ag-datum span { display: none; }
  .ag-tl { --ag-naam: 150px; }
}
@container agenda (max-width: 560px) {
  .ag-kop { align-items: flex-start; }
  .ag-seg { margin-left: 0; }
  .ag-seg a { padding: 4px 10px; }
  .ag-weekbeeld .ag-week { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .ag-weekbeeld .ag-dag { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 8px; min-height: 0;
    padding: 7px 10px; }
  .ag-weekbeeld .ag-dag.weekend:not(:has(.ag-blok)) { grid-column: auto; padding: 4px 10px; }
  .ag-weekbeeld .ag-datum { flex: none; width: 76px; }
  .ag-weekbeeld .ag-datum span, .ag-weekbeeld .ag-dmaand { display: inline; }
  .ag-weekbeeld .ag-datum b { font-size: 14px; }
  .ag-weekbeeld .ag-punt { margin-left: 0; }
  .ag-weekbeeld .ag-dagblokken { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
  .ag-weekbeeld .ag-blok { margin: 0; }
  .ag-maand .ag-week, .ag-maand .ag-weekdagen { gap: 3px; }
  .ag-maand .ag-weekdagen { padding: 0 3px; }
  .ag-maand .ag-dag { min-height: 44px; padding: 4px; gap: 2px; cursor: pointer; }
  .ag-maand .ag-dagblokken { display: flex; flex-wrap: wrap; gap: 2px; }
  .ag-maand .ag-dag .ag-blok { width: 6px; height: 6px; max-height: 6px; padding: 0; border: 0; border-radius: 50%; font-size: 0;
    animation: none; pointer-events: none; }
  .ag-maand .ag-dag .ag-blok.klaar { background: var(--ag-klaar); }
  .ag-maand .ag-dag .ag-blok.stap { background: var(--ag-stap); }
  .ag-maand .ag-dag .ag-blok.print { background: var(--ag-print); }
  .ag-maand .ag-dag .ag-blok.rd { background: var(--ag-rd); }
  .ag-maand .ag-meer { font-size: 9px; }
  .ag-maand .ag-dag.gekozen { box-shadow: inset 0 0 0 2px var(--ag-stap); }
  .ag-daglijst:not([hidden]) { display: flex; }
  .ag-dagplus { display: none; }
  /* Review M3: de + is hier weg, dus ook de ruimte voor de + (anders schuift het cijfer weg in de compacte maand). */
  .ag-dag:has(.ag-dagplus) .ag-datum { padding-right: 0; }
  .ag-jaarvak { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ag-mini-dagen i { height: auto; aspect-ratio: 1; }
  .ag-tl { --ag-naam: 120px; }
  .ag-rij { grid-template-columns: 52px minmax(0, 1fr); }
  .ag-stand { grid-column: 2; text-align: left; }
  .ag-stand b { display: inline; margin-right: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .ag, .ag *, .ag *::before, .ag *::after { animation: none !important; transition: none !important; }
}

/* --- De datumkiezer (ronde 6; templates/core/_datumkiezer.html, static/js/datumkiezer.js) ---------------------------
   Een pil met een kalendericoon en de datum in de korte vorm ("wo 21 okt"); leeg gestippeld ("toezeggen"), rood als
   toegezegd na gewenst. Zonder JavaScript het datumveld met de knop (.dk-vorm); met JavaScript (html.dk-js) de pil, die
   de popover opent: typen, snelle keuzes, de maandkalender (weekend en vrije dagen grijs, vandaag omkaderd, gewenst
   rood omrand) en het gevolg. .dk-vast: alle pillen even breed (118 px, de widget Route). .dk-tekst: dezelfde vorm
   zonder pil, voor wie niet mag. */
.dk { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.dk-vorm { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dk-vorm input[type=date] { width: auto; padding: 4px 6px; font: inherit; font-size: 12px; border: 1px solid var(--rand);
  border-radius: var(--hoek-knop); background: var(--pagina); }
.dk-vorm button[type=submit].knop-klein { height: 30px; margin: 0; }
.dk-pil { display: none; align-items: center; gap: 6px; min-height: 0; margin: 0; padding: 4px 11px 4px 9px;
  border: 1px solid var(--lijn); border-radius: 999px; background: var(--pagina); color: var(--tekst); font: inherit;
  font-size: 12px; letter-spacing: 0; line-height: 1.3; text-transform: none; white-space: nowrap; cursor: pointer;
  transition: border-color .2s, box-shadow .2s; }
.dk-js .dk-pil { display: inline-flex; }
.dk-js .dk .dk-vorm { display: none; }
.dk-pil:hover { border-color: var(--donker); }
.dk-pil.leeg { border-style: dashed; color: var(--zacht); }
.dk-pil.laat { border-color: var(--laat); color: var(--laat); }
.dk-pil:disabled { opacity: .5; cursor: default; }
.dk-pil.dk-flits { animation: dk-flits .6s; }
@keyframes dk-flits { from { box-shadow: 0 0 0 0 rgba(42, 44, 46, .35); } to { box-shadow: 0 0 0 10px rgba(42, 44, 46, 0); } }
.dk-icoon { width: 13px; height: 13px; flex: none; color: var(--zacht); }
.dk-pil.laat .dk-icoon { color: var(--laat); }
.dk-vast .dk-pil, .dk-tekst.dk-vast { width: 118px; justify-content: flex-start; }
.dk-tekst { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 9px; border: 1px solid transparent;
  font-size: 12px; white-space: nowrap; }
.dk-tekst.laat { color: var(--laat); }
.dk-tekst.klaar { color: #3b7a32; }
.dk-tekst.zsm { color: var(--let); font-weight: 500; letter-spacing: .06em; }
.dk-tekst.zacht { color: var(--zacht); }
input[type=date].dk-weg { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; }
.dk-pop { position: absolute; z-index: 60; width: 340px; max-width: calc(100vw - 16px); padding: 12px;
  border-radius: 14px; background: var(--pagina); box-shadow: 0 18px 48px rgba(0, 0, 0, .18); color: var(--tekst);
  font-size: 13px; opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top;
  transition: opacity .18s, transform .22s cubic-bezier(.3, .7, .2, 1); }
.dk-pop.open { opacity: 1; transform: none; }
.dk-pop[hidden] { display: none; }
.dk-pop.dk-onder { position: fixed; left: 8px; right: 8px; bottom: 8px; top: auto; width: auto; max-width: none;
  max-height: calc(100dvh - 16px); overflow-y: auto; transform-origin: bottom; }
.dk-pop input.dk-typ { width: 100%; padding: 9px 11px; border: 1px solid var(--lijn); border-radius: 10px; font: inherit;
  outline: none; }
.dk-pop input.dk-typ:focus { border-color: var(--donker); }
.dk-hint { min-height: 15px; margin: 5px 2px 8px; color: var(--zacht); font-size: 11px; }
.dk-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.dk-chip { padding: 4px 10px; border: 1px solid var(--lijn); border-radius: 999px; background: var(--pagina); color: var(--tekst);
  font: inherit; font-size: 11.5px; cursor: pointer; }
.dk-chip:hover { background: var(--vlak); }
.dk-mnd { display: flex; align-items: center; justify-content: space-between; margin: 4px 2px 6px; font-weight: 500; }
.dk-mtitel::first-letter { text-transform: uppercase; }
.dk-mpijl { width: 26px; height: 26px; border: 0; border-radius: 50%; background: var(--vlak); color: var(--tekst); font: inherit;
  cursor: pointer; }
.dk-kal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; text-align: center; }
.dk-wd { padding: 2px 0; color: var(--zacht); font-size: 10px; }
.dk-dag { position: relative; padding: 7px 0; border: 0; border-radius: 8px; background: none; color: var(--tekst); font: inherit;
  font-size: 12px; cursor: pointer; }
.dk-dag:hover { background: var(--vlak); }
.dk-dag.we, .dk-dag.vrij { color: #a9aaa4; }
.dk-dag.vrij::after { content: ""; position: absolute; bottom: 3px; left: 50%; width: 3px; height: 3px; margin-left: -1.5px;
  border-radius: 50%; background: #a9aaa4; }
.dk-dag.vandaag { box-shadow: inset 0 0 0 1px var(--donker); }
.dk-dag.wens { box-shadow: inset 0 0 0 1.5px var(--laat); color: var(--laat); }
.dk-dag.kies { background: var(--donker); color: #fff; }
.dk-dag:disabled { opacity: .3; cursor: default; }
.dk-gevolg { margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--vlak); font-size: 12px; }
.dk-gevolg b { font-weight: 500; }
.dk-laat { color: var(--laat); }
.dk-vroeg { color: #3b7a32; }
.dk-knoppen { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.dk-rechts { display: inline-flex; gap: 6px; margin-left: auto; }
.dk-knop { padding: 7px 12px; border: 1px solid var(--lijn); border-radius: var(--hoek-knop); background: var(--pagina);
  color: var(--tekst); font: inherit; font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer; }
.dk-knop:hover { border-color: var(--donker); }
.dk-knop.dk-zet { background: var(--donker); border-color: var(--donker); color: #fff; }
.dk-knop.dk-zet:disabled { opacity: .4; cursor: default; }
.dk-knop[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .dk-pop, .dk-pil { transition: none; }
  .dk-pil.dk-flits { animation: none; }
}

/* Spec 2026-10-12, ronde 4 aanpassingen (§ 5, *de bestaande planningsweergaven*): in de stijl van de Agenda een duidelijker
   "vandaag" in de tijdlijn van de tracker - een rustig puntje boven op de lijn (alleen bij de huidige ronde: .nu) - en
   een zachte overgang op de balken. Met prefers-reduced-motion stil (de regel van .tracker hierboven). */
.tracker-vandaag.nu::before { content: ""; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px;
  margin-left: -4px; border-radius: 50%; background: var(--let); animation: tracker-puls 1.8s ease-out 6; }
@keyframes tracker-puls { 0% { box-shadow: 0 0 0 0 rgba(127, 95, 48, .45); } 70% { box-shadow: 0 0 0 7px rgba(127, 95, 48, 0); }
  100% { box-shadow: 0 0 0 0 rgba(127, 95, 48, 0); } }
@media (prefers-reduced-motion: reduce) {
  .tracker-vandaag.nu::before { animation: none; }
}
/* Ronde 5, § 9: Marketing - 09_Marketing als tegels met hun stand, het verhaal, toegang en volgen. */
.mkt-beelden { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.mkt-beeld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mkt-beeld img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--hoek-knop); background: var(--grijsvlak); }
.mkt-beeld .meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mkt-stand { align-self: flex-start; padding: 1px 8px; border-radius: 9px; font-size: 12px; background: var(--vlak-2); }
.mkt-stand.mkt-approved { background: var(--donker); color: var(--pagina); }
.mkt-stand.mkt-requested { background: var(--let-vlak); color: var(--let); }
.mkt-stand.mkt-denied { background: var(--laat-vlak); color: var(--laat); }
.mkt-upload, .mkt-verhaal form, .mkt-vraag, .mkt-beslis { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.mkt-verhaal textarea, .mkt-vraag textarea { flex: 1 1 100%; font: inherit; }
.mkt-kies { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 4px 12px; border: 0; padding: 0; margin: 0; }
.mkt-dashboard h3 { margin: 8px 0 4px; font-size: 13px; }
.mkt-lijst { list-style: none; margin: 0 0 8px; padding: 0; }
.mkt-lijst li { padding: 4px 0; border-bottom: 1px solid var(--lijn); }
.mkt-groot { max-width: 100%; max-height: 60vh; border-radius: var(--hoek); }
.mkt-knoppen { display: flex; flex-wrap: wrap; gap: 8px; }
.volgknop { display: inline-flex; margin: 0 0 8px; }
.volgknop .icoon { width: 16px; height: 16px; vertical-align: -3px; }
.vr-pil.verzoek { background: var(--let-vlak); color: var(--let); }

/* --- Ronde 4 aanpassingen, § 12: de rustige kop van een project of collectie (templates/core/project.html,
   collectie.html). Links het terugpijltje, de kruimels en de titel met de code in grijs; rechts de knoppen bij elkaar;
   daaronder (sinds PR 3, taak 4b) de strook blokjes van static/css/projectkop.css (een leeg gegeven grijs met een bronzen stipje en de knop erachter). Op de telefoon lopen de knoppen en
   de chips door naar de volgende regel, zonder horizontale scroll. --- */
.pk-kop { position: relative; z-index: 30; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 24px; margin: 0 0 24px; }
/* z-index 30: de kop ligt boven de balk in de vloer van de line-up (`.vloerkop`, 6 en bij Kaarten 20) en boven de strook onder de
   vloer (25), want de formulieren en panelen die onder een blokje uitklappen (Wijzigen, Overnemen, Route, Mijlpalen, Uit Request)
   hangen over het grijze vlak heen en moeten klikbaar blijven (PR 3, fixronde 4b-2, review M3). De menu's in de kop (39/40) blijven
   erboven binnen dit vlak. */
.pk-tekst { flex: 1 1 320px; min-width: 0; }
.pk-tekst:has(> .kruimelrij.met-terug) { position: relative; padding-left: 48px; }
.pk-tekst > .kruimelrij.met-terug .terug { position: absolute; left: 0; top: 4px; }
.pk-tekst .kruimelrij { margin: 0 0 6px; }
.pk-tekst .kruimels { font-size: 10px; letter-spacing: .26em; text-transform: uppercase; }
.pk-tekst .kruimels a { text-decoration: none; }
.pk-tekst .kruimels a:hover { color: var(--tekst); text-decoration: underline; }
.pk-titel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; min-width: 0; }
.pk-titel h1 { margin: 0; font-size: 40px; overflow-wrap: anywhere; }
.pk-code { font-size: 22px; font-weight: 300; color: var(--zacht); }
/* Spec 2026-10-20 (deel 1, mockup C): de klant als titel, het projectnummer erachter, de P-code klein; de projectnaam
   eronder. De regel Administratie onder de chips: rustig, zonder vlak; wat nog mag wachten in brons, alles ingevuld in
   groen. */
.pk-nummer { font-size: 22px; font-weight: 300; color: var(--tekst); }
.pk-titel .pk-pcode { font-size: 11px; letter-spacing: .14em; color: #9aa0a8; }
.pk-naam { margin: 2px 0 0; font-size: 15px; color: var(--zacht); }
.admin-open { color: var(--let); }
.admin-klaar { color: var(--goed); }
.pk-zonder-code { margin: 0 0 10px; font-size: 13px; color: var(--let); }
.pk-zonder-code a { color: var(--tekst); }
.itemcode-regel { margin: 4px 0 0; font-size: 12px; color: var(--zacht); }
.itemcode-regel b { font-weight: 500; color: var(--tekst); }
.itemcode-regel.open { color: var(--let); }
.pk-acties { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-left: auto; }
.pk-groot .pk-tekst { min-width: 0; }            /* de kop van de interne projectpagina (projectkop.css, spec 2026-11-06) */
.pk-acties .volgknop { margin: 0; }
.pk-acties .volgknop button { display: inline-flex; align-items: center; gap: 6px; }
.pk-acties .vr-kop { gap: 8px; }
/* De knop Vragen is de gewone .knop van de knoppenbalk (_vraag_stellen.html), zoals + Item ernaast. */
.pk-item { white-space: nowrap; }
@media (max-width: 550px) {
  .pk-tekst:has(> .kruimelrij.met-terug) { padding-left: 54px; }
  .pk-titel h1 { font-size: 30px; }
  .pk-code { font-size: 17px; }
  .pk-acties { justify-content: flex-start; margin-left: 0; }
}

/* Het itemsvak is het sleepvlak (§ 12; _sleepvak_items.html, static/js/slepen.js): tijdens het slepen van bestanden
   over de pagina een gestippelde grijze rand en een laag met "Laat los: n modellen"; achteraan de items een gestippelde
   kaart *Nieuw item*. Met prefers-reduced-motion zonder overgang. */
.pk-items { position: relative; }
.pk-items.is-sleep { outline: 2px dashed var(--zacht); outline-offset: -6px; background: var(--vlak); }
.pk-aantal { font-weight: 400; color: var(--zacht); }
.pk-hint { margin: 0 0 0 auto; font-size: 12px; color: var(--zacht); }
.pk-hint[hidden] { display: none; }
label.pk-kies { display: inline; margin: 0; font-size: 12px; color: var(--zacht); text-decoration: underline; cursor: pointer; }
label.pk-kies:hover { color: var(--tekst); }
.pk-sleep { min-width: 0; }
.pk-melding { margin: 0; }
.pk-melding:not(:empty) { margin: 0 0 12px; }
.pk-controle { margin: 0 0 16px; }
.pk-laag {
  position: absolute; inset: 6px; z-index: 6; display: grid; place-items: center; padding: 16px; text-align: center;
  background: #f5f5f4d9; border-radius: var(--hoek); pointer-events: none; animation: pk-in .12s ease-out;
}
.pk-laag[hidden] { display: none; }
.pk-laagkaart {
  display: grid; gap: 4px; max-width: min(480px, 100%); padding: 14px 22px; background: var(--pagina);
  border-radius: var(--hoek); box-shadow: 0 8px 24px #1d26301a; overflow-wrap: anywhere;
}
.pk-laagkaart b { font-size: 16px; }
.pk-laagkaart span { font-size: 12px; color: var(--zacht); }
.pk-laag.fout .pk-laagkaart b { color: var(--let); }
@keyframes pk-in { from { opacity: 0; } to { opacity: 1; } }
.pk-nieuw {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 260px;
  margin: 0; padding: 16px; font-size: 12px; text-align: center; text-decoration: none; color: var(--zacht);
  background: var(--vlak); border: 1.5px dashed var(--lijn); border-radius: var(--radius); cursor: pointer;
}
.pk-nieuw[hidden] { display: none; }
.pk-nieuw:hover { color: var(--tekst); border-color: var(--zacht); }
.pk-nieuw:focus-visible { outline: 2px solid var(--donker); outline-offset: 2px; }
.pk-nieuw > span:not(.pk-plus) { color: var(--tekst); font-size: 13px; }
.pk-plus { font-size: 28px; font-weight: 300; line-height: 1; color: var(--tekst); }
.pk-nieuw.breed { flex-direction: row; flex-wrap: wrap; gap: 4px 8px; min-height: 72px; margin-top: 12px; }
.pk-nieuw.breed .pk-plus { font-size: 22px; }
@media (max-width: 550px) {
  .pk-nieuw { min-height: 140px; }
}
@media (prefers-reduced-motion: reduce) {
  .pk-laag { animation: none; }
}

/* --- Ronde 4 aanpassingen, § 13: de klant kiezen (templates/core/_klantkeuze.html, static/js/klantkeuze.js). Een eigen
   zoeklijst onder het veld (een ARIA-combobox): kopjes, per klant de naam met de treffer gemarkeerd en het aantal
   projecten, onderaan + Nieuwe klant; na de keuze een pil met wijzigen. Zonder JavaScript de keuzelijst (.kk-reserve)
   en het gewone veld. --- */
.kk { position: relative; }
.kk-reserve, .kk-veld { min-width: 0; }
.kk-zoek { position: relative; }
.kk-zoek[hidden], .kk-lijst[hidden], .kk-pil[hidden] { display: none; }
.kk-lijst {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; max-height: 300px; overflow-y: auto;
  padding: 4px 0; background: var(--pagina); border: 1px solid var(--rand); border-radius: var(--hoek);
  box-shadow: 0 10px 26px #1d26301a;
}
.kk-kopje { padding: 8px 12px 4px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--zacht); }
.kk-optie {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 12px; font-size: 14px;
  cursor: pointer;
}
.kk-optie:hover, .kk-optie[aria-selected="true"] { background: var(--vlak); }
.kk-naam { min-width: 0; overflow-wrap: anywhere; }
.kk-optie mark { padding: 0 1px; font-weight: 500; color: inherit; background: var(--vlak-2); border-radius: 2px; }
.kk-optie small { flex: none; font-size: 11px; color: var(--zacht); white-space: nowrap; }
.kk-nieuw { font-weight: 500; border-top: 1px solid var(--lijn); }
.kk-nieuw small { font-weight: 400; white-space: normal; text-align: right; }
.kk-leeg { padding: 9px 12px; font-size: 13px; color: var(--zacht); }
.kk-pil {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; max-width: 100%; padding: 8px 12px;
  background: var(--vlak); border-radius: var(--hoek-knop); overflow-wrap: anywhere;
}
.kk-pil small { font-size: 12px; color: var(--zacht); }
.kk-wijzig {
  padding: 0; font: inherit; font-size: 11px; color: var(--zacht); background: none; border: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.kk-wijzig:hover { color: var(--tekst); }
.kk-wijzig:focus-visible { outline: 2px solid var(--donker); outline-offset: 2px; }
@media (max-width: 550px) {
  .kk-optie { padding: 12px; }
  .kk-optie small { white-space: normal; text-align: right; }
}

/* --- Ronde 6: de keuzevakjes van de aanvraag als zoeklijst (templates/core/_zoeklijst.html, static/js/zoeklijst.js,
   core/keuzelijsten.py). Zelfde gevoel als de klantkeuze: onder het veld de lijst met kopjes (Bij deze klant gebruikt,
   Alle …), de treffer vet, bij een kleur een bolletje en de materialen; onderaan + eigen keuze, of Kies uit de lijst.
   Zonder JavaScript de keuzelijst en Anders:. --- */
.zl { position: relative; min-width: 0; }
.zl-zoek { position: relative; }
.zl-lijst[hidden] { display: none; }
.zl-lijst {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 14rem; max-height: 300px;
  overflow-y: auto; padding: 4px; background: var(--pagina); border: 1px solid var(--rand); border-radius: var(--hoek);
  box-shadow: 0 10px 26px #1d26301a; text-align: left;
}
.zl-kopje { padding: 8px 10px 4px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--zacht); }
.zl-optie {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; font-size: 13px;
  font-weight: 400; border-radius: var(--hoek-knop); cursor: pointer;
}
.zl-optie:hover, .zl-optie[aria-selected="true"] { background: var(--vlak); }
.zl-naam { min-width: 0; overflow-wrap: anywhere; }
.zl-optie mark { padding: 0; font-weight: 500; color: inherit; background: none; }
.zl-optie small { flex: none; max-width: 50%; font-size: 11px; color: var(--zacht); text-align: right; }
.zl-stip {
  display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -2px; border-radius: 3px;
  border: 1px solid #00000026;
}
.zl-eigen { margin-top: 4px; font-weight: 500; color: var(--donker); border-top: 1px solid var(--lijn); border-radius: 0; }
.zl-alleen, .zl-leeg { padding: 8px 10px; font-size: 13px; color: var(--zacht); }
.zl-alleen { margin-top: 4px; border-top: 1px solid var(--lijn); }
.zl-fout .zl-invoer, .av-bewerk .zl-fout input.zl-invoer { border-color: var(--let); }
.zl-anders { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--zacht); }
.av-eigen {
  display: inline-block; padding: 1px 7px; font-size: 11px; color: var(--let); background: var(--let-vlak);
  border-radius: 999px;
}
@media (max-width: 550px) {
  .zl-optie { padding: 12px 10px; }
}

/* --- Ronde 6: Beheer › Aanvraag (templates/core/aanvraaglijsten_beheer.html, verzendwijzen_beheer.html): per vakje de
   lijst, de schakelaar Eigen keuze toestaan (een knop met role=switch) en de eigen keuzes als bronzen pillen die
   openklappen met In de lijst opnemen en Negeren. --- */
.ab { padding: 6px 14px; }
.ab-tabel th[scope="row"] { font-size: 14px; font-weight: 500; color: var(--tekst); background: none; }
.ab-vorm { display: inline; margin: 0; }
.ab-schakel, button[type=submit].ab-schakel {
  display: inline-flex; align-items: center; gap: 8px; width: auto; min-height: 0; margin: 0; padding: 0; font: inherit;
  font-size: 13px; letter-spacing: normal; text-transform: none; color: var(--tekst); background: none; border: 0;
  cursor: pointer;
}
.ab-schakel i {
  position: relative; display: inline-block; width: 34px; height: 20px; background: #cfcfca; border-radius: 999px;
}
.ab-schakel i::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: var(--pagina);
  border-radius: 50%; transition: left .15s;
}
.ab-schakel.aan i { background: var(--donker); }
.ab-schakel.aan i::after { left: 16px; }
.ab-schakel[aria-disabled="true"] { color: var(--zacht); cursor: default; opacity: .6; }
.ab-schakel:focus-visible { outline: 2px solid var(--donker); outline-offset: 2px; }
.ab-uitleg { margin: 6px 0 0; font-size: 12px; color: var(--zacht); }
.ab-pil { display: inline-block; margin: 2px 4px 2px 0; vertical-align: top; }
.ab-pil summary {
  display: inline-block; padding: 2px 9px; font-size: 11px; color: var(--let); background: var(--let-vlak);
  border-radius: 999px; cursor: pointer; list-style: none;
}
.ab-pil summary::-webkit-details-marker { display: none; }
.ab-pil summary b { font-weight: 500; }
.ab-pil[open] summary { background: var(--let); color: var(--pagina); }
.ab-pilknoppen { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
.ab-wijze { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; }
.ab-wijze .beheer-naam { flex: 1 1 14rem; }
/* Beheer › Aanvraag › Hardware (2026-10-15, mockup hardware-groepen; templates/core/hardware_beheer.html): per kopje een
   wit vak met de soort rechts (één per figuur, meer mogelijk) en per hardware een rij: de naam, ★︎ standaard in het brons,
   het kopje en het aantal in de standaardset. */
.hb-kopje { background: var(--pagina); }
.hb-romp { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.hb-kop { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 4px; font-size: 14px; font-weight: 500; }
.hb-soort { font-size: 12px; font-weight: 400; color: var(--zacht); }
.hb-regel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; padding: 4px 0; border-top: 1px solid var(--rand); font-size: 13px; }
.hb-regel.uit { opacity: .6; }
.hb-naam { flex: 1 1 12rem; min-width: 0; color: var(--zacht); overflow-wrap: anywhere; }
.hb-std .hb-naam { color: var(--tekst); font-weight: 500; }
.hb-ster { color: var(--let); font-size: 12px; }
.hb-keuze { width: auto; max-width: 12rem; }
.hb-aantal { display: inline-flex; align-items: center; gap: 4px; margin: 0; color: var(--let); }
.hb-aantal input { width: 4.5em; }
.hb-leeg { margin: 0; font-size: 13px; }
/* De tab Hardware (spec 2026-10-15): per kopje de subcategorieën en de rechten (zien, bewerken) - ingeklapt. */
.hb-meer { margin-top: 6px; font-size: 13px; }
.hb-meer > summary { color: var(--zacht); cursor: pointer; }
.hb-subs { margin: 6px 0; padding: 0; list-style: none; }
.hb-sub { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 0; }
.hb-sub.uit { opacity: .6; }
.hb-pijlen { display: inline-flex; gap: 6px; margin: 0; }
.hb-rechten { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 6px; }
@media (prefers-reduced-motion: reduce) {
  .ab-schakel i::after { transition: none; }
}

/* Ronde 7, item verwijderen en archiveren (mockup item-verwijderen; core/views_verwijderen.py). Het menu ⋯ is het menu
   Nieuw (.nw-) met een paar eigen regels (.im-); de bevestigingen, de grijze regels, het archief en Beheer ›
   Verwijderverzoeken zijn .vw-. Rood alleen voor verwijderen. */
.im-knop { min-width: 40px; padding-left: 10px; padding-right: 10px; letter-spacing: 0; font-size: 16px; line-height: 1; }
.im-lijst { width: 260px; }
.im-lijn { display: block; height: 1px; margin: 4px 6px; background: var(--rand); }
.im-lijst a.nw-optie { color: var(--tekst); text-decoration: none; }
.im-lijst a.im-weg, .im-weg .nw-titel { color: var(--laat); }
.im-form { margin: 0; }
/* Terugzetten is een submitknop in het menu: zonder de vorm van button[type=submit]:not(.link). */
.im-lijst button[type=submit].im-optieknop { width: 100%; min-height: 0; margin: 0; padding: 8px 10px; border: 0;
  border-radius: 6px; background: none; color: var(--tekst); font-size: 13px; font-weight: 400; letter-spacing: 0;
  line-height: 1.35; text-align: left; text-transform: none; }
.im-lijst button[type=submit].im-optieknop:hover { background: var(--vlak); }
.im-op-kaart { position: absolute; top: 10px; right: 10px; z-index: 3; }
.im-op-kaart > .im-knop { min-height: 32px; padding: 0 8px; background: var(--pagina); }
.kaarten .kaart { position: relative; }
.vw-bevestig .vw-wat .meta { margin-top: 2px; }
.vw-gevolgen { margin: 8px 0 10px; padding-left: 18px; color: var(--zacht); font-size: 13px; }
.vw-niet { padding: 10px 12px; border-radius: var(--hoek); background: var(--vlak); color: var(--tekst); }
.vw-verzoek label, .vw-afwijzen label { display: block; margin: 10px 0 6px; font-size: 13px; }
.vw-verzoek textarea, .vw-afwijzen textarea { width: 100%; }
.vw-voet { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: flex-start; gap: 8px; margin-top: 12px; }
.vw-voet form { margin: 0; }
.vw-links { justify-content: flex-start; }
/* De submitknoppen hier zijn gewone knoppen (.knop) naast elkaar: niet de volle breedte en de marge van
   button[type=submit]:not(.link); licht, tenzij donker (.knop-donker) of rood (.vw-rood). */
.vw-voet button[type=submit].knop, .vw-balk button[type=submit].knop, .vw-rij button[type=submit].knop,
.vw-afwijzen button[type=submit].knop {
  width: auto; margin-top: 0; padding: 0 18px; border: 1px solid var(--rand); background: var(--pagina);
  color: var(--tekst); }
.vw-voet button[type=submit].knop-donker { background: var(--donker); border-color: var(--donker); color: #fff; }
.vw-rood, .vw-voet button[type=submit].vw-rood { background: var(--laat); border-color: var(--laat); color: #fff; }
.vw-rood:hover, .vw-voet button[type=submit].vw-rood:hover { background: #7f3029; border-color: #7f3029; }
.vw-balk { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin: 0 0 12px;
  padding: 10px 14px; border-radius: var(--hoek); background: var(--vlak-2); color: var(--tekst); font-size: 13px; }
.vw-balk p { margin: 0; }
.vw-balk form { margin: 0; }
.vw-sub { font-size: 12px; }
.vw-regel { margin: 0 0 12px; padding: 6px 10px; border-radius: var(--hoek); background: var(--vlak-2); color: var(--tekst);
  font-size: 13px; }
.vw-archief { margin-top: 16px; }
.vw-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.vw-lijst { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.vw-rij { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: var(--hoek); background: var(--vlak); }
.vw-rij form { margin: 0; }
.vw-teller { display: inline-block; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--laat);
  color: #fff; font-size: 12px; font-weight: 500; text-align: center; vertical-align: middle; }
.vw-verzoekkaart { margin-bottom: 12px; }
.vw-kop { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; }
.vw-reden { margin: 6px 0; }
.vw-afwijzen > summary { list-style: none; }
.vw-afwijzen > summary::-webkit-details-marker { display: none; }
.vw-afwijzen[open] { flex-basis: 100%; }
.vw-afwijzen form { margin-top: 4px; }
/* Project verwijderen (mockup project-verwijderen): Items archiveren… onder de knoppen van de bevestiging. */
.vw-archiveren { margin-top: 12px; }
.vw-archiveren textarea { width: 100%; }
/* Project archiveren (mockup project-archiveren): het filter Gearchiveerd op Projecten, met de uitleg eronder. */
.vw-archief .vw-regel { margin: 12px 0 0; }
.vw-archiveren button[type=submit].knop-donker { margin-top: 6px; background: var(--donker); border-color: var(--donker); color: #fff; }
.vw-beslist h2 { margin-top: 0; font-size: 15px; }

/* Bestanden op de zijbalk slepen (Productie op de pc, 2026-10-14; _zijbalk_slepen.html, static/js/zijbalk_slepen.js):
   altijd alleen een klein bakje bij Uitvoermap; tijdens het slepen van bestanden een stippelrand om de zijbalk, en
   erboven Uitvoermap omlijnd met de regel *Loslaten*. */
.uv-bak { margin-left: -6px; font-size: 11px; color: var(--zacht); opacity: .55; }
.uv-loslaten { display: none; margin: 4px 12px 0; font-size: 11px; color: var(--zacht); }
body.uv-sleept .zijbalk { outline: 1.5px dashed #c9c9c3; outline-offset: -6px; transition: outline-color .2s, background .2s; }
body.uv-sleept .uv-loslaten { display: block; }
body.uv-boven .zijbalk { outline-color: var(--donker); background: var(--vlak-2); }
body.uv-boven [data-uitvoer-doel] { box-shadow: inset 0 0 0 1.5px var(--donker); background: var(--pagina); color: var(--tekst); }
body.uv-boven .uv-loslaten { color: var(--tekst); }
.uv-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 60; max-width: min(720px, 90vw); padding: 10px 18px; border-radius: 16px;
  background: var(--donker); color: #fff; font-size: 12.5px; line-height: 1.45; transform: translateX(-50%) translateY(20px);
  opacity: 0; transition: opacity .3s, transform .3s;
}
.uv-toast.aan { opacity: 1; transform: translateX(-50%); }
.uv-toast.fout { background: var(--laat); }

/* De pagina Uitvoermap: bestanden naar je map, en per bestand het menu ⋯ (views_uitvoer, templates/core/uitvoermap.html). */
.uv-sturen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 16px; padding: 10px 14px; border: 1.5px dashed #c9c9c3; border-radius: var(--hoek); }
.uv-sturen > span { display: flex; flex: 1 1 320px; flex-direction: column; gap: 2px; font-size: 13px; }
.uv-sturen small { color: var(--zacht); font-size: 12px; }
.uv-sturen button[type=submit] { width: auto; min-height: 30px; margin: 0; }
.uv-acties { width: 1%; white-space: nowrap; text-align: right; }
.uv-menu { position: relative; display: inline-block; }
.uv-menu > summary { padding: 0 8px; color: var(--zacht); font-size: 16px; list-style: none; cursor: pointer; }
.uv-menu > summary::-webkit-details-marker { display: none; }
.uv-menu[open] { z-index: 6; }
.uv-menu-inhoud {
  position: absolute; right: 0; top: 100%; display: flex; flex-direction: column; gap: 12px; width: 300px; padding: 14px;
  background: var(--pagina); border: 1px solid var(--rand); border-radius: var(--hoek); box-shadow: 0 10px 28px #0000001f;
  text-align: left; white-space: normal;
}
.uv-menu-inhoud form { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.uv-menu-inhoud form + form { padding-top: 12px; border-top: 1px solid var(--rand); }
.uv-menu-inhoud small { color: var(--zacht); font-size: 11px; }
.uv-menu-inhoud button[type=submit] { align-self: flex-start; width: auto; min-height: 30px; margin: 0; }
.uv-veld { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.uv-keuzes { display: flex; gap: 12px; font-size: 12px; }
.uv-weg { color: var(--laat); }
@media (prefers-reduced-motion: reduce) {
  .uv-toast, body.uv-sleept .zijbalk { transition: none; }
}
.uv-sturen input[type=file] { width: auto; max-width: 100%; margin: 0; }
.uv-menu-inhoud .uv-weg { background: var(--pagina); color: var(--laat); border: 1px solid var(--laat); }
/* --- Het 3D-model groot (2026-10-14, mockups stap-3d-model-v2 en stap-3d-model; core/widgets/model_3d.py,
   templates/core/widgets/model_3d.html, static/js/model_3d.js). Op de stap 3D-model geen zone 2: het werk over de hele
   breedte (.zonder-item), het model bovenaan. Vier naast elkaar: elke rechte kant in een eigen vak, bijgesneden tot het
   figuur - .m3-uitsnede heeft de verhouding van het figuur (--breed, --hoog uit viewer.Model, delen van het beeld van
   1000 px) en de hoogte die het breedste figuur nog laat passen (--breedst), dus alle vier op dezelfde schaal; het beeld
   erin is 1/--breed zo breed en staat in het midden. Draaien: één beeld met een schuifbalk in vaste stappen. --- */
.m3 { --m3-h: 560px; }
.m3-gevraagd { margin: 0 0 12px; font-size: 12px; color: var(--zacht); }
.m3-gevraagd b { color: var(--tekst); }
.m3-punt::before { content: " · "; }
.m3-balk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.m3-weergave { display: flex; padding: 3px; background: var(--vlak-2); border-radius: 11px; }
.m3-weergave[hidden], .m3-vier[hidden], .m3-draai[hidden], .m3-ring[hidden] { display: none; }
.m3 .m3-knop {
  min-height: 0; padding: 6px 12px; font: inherit; font-size: 12px; letter-spacing: normal; text-transform: none;
  color: var(--tekst); background: transparent; border: 0; border-radius: 9px; cursor: pointer;
}
.m3 .m3-knop[aria-pressed="true"] { font-weight: 500; background: var(--pagina); box-shadow: 0 1px 3px rgba(0, 0, 0, .13); }
.m3-bestand { margin: 0 0 0 auto; font-size: 12px; color: var(--zacht); overflow-wrap: anywhere; }
.m3-bestand[hidden], .m3-uitleg[hidden], .m3-chips[hidden] { display: none; }
/* Vergelijken uitgeschakeld (geen twee versies met een eigen model): zacht, met de uitleg bij een tik (model_3d.js). */
.m3 .m3-knop.m3-uit { color: var(--zacht); opacity: .6; cursor: help; }
.m3-uitleg { margin: -2px 0 10px; font-size: 12px; color: var(--zacht); }
/* Zonder JavaScript (de schakelaar is er dan niet): Vier naast elkaar en Vergelijken als gewone links. */
.m3-zonderjs a.m3-knop { display: inline-block; text-decoration: none; }
.m3-zonderjs a.m3-knop[aria-current] { font-weight: 500; background: var(--pagina); box-shadow: 0 1px 3px rgba(0, 0, 0, .13); }
.m3-bestand b { color: var(--tekst); }
.m3-vier { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.m3-kant {
  position: relative; display: grid; place-items: center; margin: 0; padding: 30px 8px 12px; overflow: hidden;
  background: var(--grijsvlak); border-radius: 14px; container-type: inline-size;
}
.m3-kant figcaption {
  position: absolute; left: 12px; top: 10px; font-size: 11px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase;
}
.m3-uitsnede {
  position: relative; overflow: hidden; aspect-ratio: var(--breed, .72) / var(--hoog, .94);
  height: min(var(--m3-h), calc(100cqw * var(--hoog, .94) / var(--breedst, .72)));
}
.m3-uitsnede img {
  position: absolute; left: 50%; top: 50%; width: calc(100% / var(--breed, .72)); max-width: none; height: auto;
  transform: translate(-50%, -50%);
}
.m3-wacht figcaption { color: var(--zacht); }
.m3-skelet .m3-uitsnede {
  width: 46%; height: calc(var(--m3-h) * .8); aspect-ratio: auto; border-radius: 12px;
  background: linear-gradient(90deg, var(--vlak-2) 0%, var(--vlak) 40%, var(--vlak-2) 80%); background-size: 300% 100%;
  animation: m3-glans 1.4s linear infinite;
}
@keyframes m3-glans { to { background-position: -300% 0; } }
.m3-draai { position: relative; }
.m3-draaivlak {
  display: flex; align-items: center; justify-content: center; height: 620px; padding: 10px 0 90px; overflow: hidden; background: var(--grijsvlak);
  border-radius: 14px; cursor: grab; touch-action: pan-y; user-select: none;
}
.m3-draaivlak img { width: auto; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; pointer-events: none; }
.m3-schuif {
  position: absolute; left: 50%; bottom: 16px; width: min(560px, 80%); padding: 10px 16px 8px; transform: translateX(-50%);
  background: var(--pagina); border-radius: 16px; box-shadow: 0 4px 16px rgba(0, 0, 0, .07);
}
.m3-schuif input[type=range] { width: 100%; margin: 0; accent-color: var(--donker); }
.m3-stappen { display: flex; justify-content: space-between; margin-top: 2px; }
.m3 .m3-stap {
  min-height: 0; padding: 2px 0; font: inherit; font-size: 11px; letter-spacing: normal; text-transform: none;
  color: var(--zacht); background: none; border: 0; cursor: pointer;
}
.m3-stap.schuin { font-size: 14px; line-height: 1; }
.m3-stap.aan { font-weight: 500; color: var(--tekst); }
.m3-stand { margin: 8px 0 0; font-size: 12px; color: var(--zacht); }
.m3-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.m3 .m3-chip, .m3 button.m3-chip {
  width: auto; margin: 0; display: inline-flex; align-items: center; gap: 4px; min-height: 0; padding: 6px 10px; font: inherit; font-size: 12px;
  font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--tekst); text-decoration: none;
  background: var(--pagina); border: 1px solid var(--lijn); border-radius: 10px;
}
.m3 .m3-chip.ok { border-color: var(--donker); }
.m3 .m3-chip.let { color: var(--let); background: var(--let-vlak); border-color: var(--let-vlak); }
.m3-actie { cursor: pointer; }
.m3 .m3-actie:hover { border-color: var(--donker); }
.m3-vorm { display: inline-flex; gap: 6px; margin: 0; }
.m3-omhoog { position: relative; }
.m3-omhoog > summary { list-style: none; }
.m3-omhoog > summary::-webkit-details-marker { display: none; }
.m3-omhoog-menu {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 5; display: flex; align-items: center; gap: 8px;
  margin: 0; padding: 10px 12px; white-space: nowrap; background: var(--pagina); border: 1px solid var(--lijn);
  border-radius: var(--hoek); box-shadow: 0 6px 18px rgba(0, 0, 0, .1);
}
.m3-leeg { position: relative; }
.m3-sleep {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  min-height: 520px; margin: 0; padding: 24px 18px 110px; overflow: hidden; text-align: center;
  background: repeating-linear-gradient(45deg, var(--pagina) 0 14px, var(--vlak) 14px 28px);
  border: 2px dashed var(--lijn); border-radius: 18px;
}
.m3-icoon {
  display: grid; place-items: center; width: 96px; height: 96px; font-size: 40px; background: var(--pagina);
  border-radius: 24px; box-shadow: 0 10px 30px rgba(0, 0, 0, .07); animation: m3-zweef 3s ease-in-out infinite;
}
@keyframes m3-zweef { 50% { transform: translateY(-8px); } }
.m3-sleep-kop { font-size: 22px; font-weight: 300; }
.m3-sleep-uitleg { color: var(--zacht); }
.m3-sleep-knoppen { display: flex; gap: 8px; align-items: center; }
.m3-ring { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: var(--vlak); }
.m3-ring-binnen {
  display: grid; place-items: center; width: 150px; height: 150px; text-align: center; border-radius: 50%;
  background: radial-gradient(closest-side, var(--vlak) 84%, transparent 85%),
    conic-gradient(var(--donker) calc(var(--deel, 0) * 100%), var(--lijn) 0);
}
.m3-ring-binnen b { display: block; font-size: 30px; font-weight: 300; }
.m3-ring-binnen small { display: block; font-size: 11px; color: var(--zacht); }
.m3-uitvoer {
  position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 3; display: flex; align-items: center; gap: 12px;
  margin: 0; padding: 10px 12px; background: var(--pagina); border: 1px solid var(--lijn); border-radius: 14px;
}
.m3-soort {
  display: grid; flex: none; place-items: center; width: 42px; height: 42px; font-size: 10px; font-weight: 500;
  color: var(--zacht); background: var(--vlak); border-radius: 10px;
}
.m3-uitvoer-tekst { flex: 1; min-width: 0; }
.m3-uitvoer-tekst b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m3-uitvoer-tekst small { display: block; font-size: 11px; color: var(--zacht); }
.m3-uitvoer-te-groot { color: var(--let); }
.m3 .m3-zet, .m3 button.m3-zet {
  width: auto; margin: 0; flex: none; min-height: 34px; padding: 0 16px; font: inherit; font-size: 11px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--pagina); background: var(--donker); border: 0; border-radius: var(--hoek-knop);
  cursor: pointer;
}
.m3-geen[hidden] { display: none; }
.m3-geen {
  display: grid; place-items: center; gap: 10px; min-height: 260px; padding: 20px; text-align: center; color: var(--zacht);
  background: var(--grijsvlak); border-radius: 14px;
}
@media (max-width: 900px) {
  .m3-vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m3 { --m3-h: 420px; }
}
@media (prefers-reduced-motion: reduce) {
  .m3-skelet .m3-uitsnede, .m3-icoon { animation: none; }
}

/* Beheer bevestigd met de authenticator-app (18 okt 2026, accounts/beheerapp.py): klein rechtsboven op een pagina van
   Beheer (templates/accounts/_beheer_bevestigd.html). */
.beheer-bevestigd {
  display: inline-flex; align-items: center; gap: 6px; margin-right: 12px; padding: 4px 12px; border-radius: 999px;
  background: var(--vlak); font-size: 12px; color: var(--zacht); white-space: nowrap;
}
.beheer-bevestigd .icoon { width: 14px; height: 14px; }
.beheer-bevestigd b { color: var(--goed); font-weight: 500; }
html.tel .beheer-bevestigd { padding: 3px 8px; font-size: 11px; margin-right: 8px; }
/* Beveiliging onder Telefoon en meldingen in de zijbalk (18 okt 2026): op een eigen regel. */
.zijbalk-telefoon + .zijbalk-telefoon { display: block; margin-top: 4px; }

/* Afkeuren met een nieuwe gcode (spec 2026-10-19, mockup afkeuren-nieuwe-gcode). De tracker: onder Printen wat er bij R&D
   ligt (stapschermen.met_wacht). Mijn taken: de kaart *Nieuwe gcode nodig* (templates/core/_taak_nieuwe_gcode.html). */
.tracker-wacht {
  display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 999px; background: var(--let-vlak);
  color: var(--let); font-size: clamp(9px, 14cqi, 10.5px); max-width: 100%; overflow-wrap: break-word;
}   /* geen nowrap: in een smalle stap loopt de pil over twee regels in plaats van over de buren (21 okt 2026) */
.ng-taak { border: 1px solid var(--rand); border-radius: 14px; padding: 14px 16px; margin: 0 0 14px; max-width: 640px; }
.ng-kop { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ng-pil { font-size: 10.5px; border-radius: 999px; padding: 1px 8px; background: var(--laat-vlak); color: var(--laat); }
.ng-titel { font-size: 16px; font-weight: 500; margin: 6px 0 2px; }
.ng-sub { margin: 0; font-size: 12px; }
.ng-reden { background: var(--laat-vlak); color: var(--laat); border-radius: 10px; padding: 8px 10px; margin: 10px 0; font-size: 12px; }
.ng-reden b { font-weight: 500; }
.ng-fotos { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.ng-fotos img { width: 70px; height: 70px; border-radius: 9px; background: var(--grijsvlak); object-fit: cover; display: block; }
.ng-knoppen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ng-knoppen form { margin: 0; }
.ng-upload { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ng-kies input[type=file] { width: auto; max-width: 260px; padding: 0; font-size: 12px; }
.ng-taak button[type=submit] { width: auto; margin: 0; padding: 0 18px; }
.ng-bezig { font-size: 12px; margin: 10px 0 0; }
.ng-drop { border: 1.5px dashed var(--lijn); border-radius: 14px; padding: 12px 14px; background: #fafaf8; margin-top: 12px; font-size: 12.5px; }
.ng-drop > b { font-weight: 500; }
.ng-bestand {
  display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; background: var(--pagina);
  border: 1px solid var(--rand); border-radius: 12px; padding: 8px 10px; margin-top: 10px;
}
.ng-bestand img, .ng-bestand .ng-leeg { width: 56px; height: 56px; border-radius: 8px; background: var(--grijsvlak); object-fit: cover; display: block; }
.ng-bestand b { font-weight: 500; word-break: break-all; }
.ng-bestand small { display: block; color: var(--zacht); font-size: 11.5px; }
.ng-check { margin-top: 4px; font-size: 12px; }
.ng-check .ok { color: var(--goed); }
.ng-check .nee { color: var(--laat); }
.ng-noot { font-size: 12px; margin: 10px 0 0; }
@media (max-width: 600px) { .ng-bestand { grid-template-columns: 48px 1fr; } .ng-bestand form { grid-column: 1 / -1; } }
/* Deel E (review, punt 6): Mijn taken, de gcodes die nog naar de planning moeten. */
.naar-planning-lijst { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; }

/* Spec 2026-10-20 (deel 2, mockup B): Stappen aanpassen - per stap een schakelaar, vast of niet te wisselen grijs met een
   slotje en de reden; mockup A en C (de aanvraag, Beheer › Stappen) gebruiken dezelfde schakelaar. */
.sa-lijst { list-style: none; margin: 0 0 12px; padding: 0; }
.sa-stap { border-top: 1px solid var(--rand); }
.sa-stap:first-child { border-top: 0; }
.sa-schakel { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; cursor: pointer; }
.sa-stap.vast .sa-schakel { cursor: default; }
.sa-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sa-tekst b { font-weight: 500; }
.sa-stap.uit .sa-tekst b { color: var(--zacht); }
.sa-tekst small { margin: 0; color: var(--zacht); font-size: 12px; }
.sa-wie { font-style: italic; }
.sa-slot { display: inline-block; margin-right: 4px; color: var(--zacht); line-height: 0; vertical-align: -1px; }
.sa-slot .icoon { width: 11px; height: 11px; }
.sa-knop {
  appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 36px; height: 20px; margin: 0;
  border-radius: 999px; background: #d6d6d4; cursor: pointer; transition: background .15s;
}
.sa-knop::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px #0003; transition: transform .15s;
}
.sa-knop:checked { background: var(--donker); }
.sa-knop:checked::after { transform: translateX(16px); }
.sa-knop:disabled { opacity: .55; cursor: default; }
.sa-knop:focus-visible { outline: 2px solid var(--donker); outline-offset: 2px; }
.sa-noot { margin-top: 10px; font-size: 12px; }
.sa-geschiedenis { margin: 10px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--zacht); }
.sa-geschiedenis li { padding: 6px 0; border-top: 1px solid var(--rand); }
.sa-geschiedenis b { color: var(--tekst); font-weight: 500; }
.sa-historie { margin: 8px 0 0; font-size: 13px; }
.sa-historie summary { cursor: pointer; color: var(--zacht); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }

/* Spec 2026-10-20 (deel 2, mockup A): de nieuwe productieaanvraag - het formulier links, rechts *Zo gaat Corpus het
   aanmaken*; per item een kader, de stappen als rij met schakelaars (aan, uit, slim). Op de telefoon onder elkaar. */
.pa { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
.pa-intro { margin-top: -6px; max-width: 860px; }
.pa-vak { min-width: 0; margin: 0 0 18px; padding: 14px 0 0; border: 0; border-top: 1px solid var(--lijn); }
.pa-vak > legend { padding: 0 .4rem 0 0; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--zacht); }
.pa-vak > legend small { letter-spacing: 0; text-transform: none; font-size: 12px; margin-left: 6px; }
.pa-rij { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.pa-rij.pa-drie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pa-item { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--rand); border-radius: var(--hoek); }
.pa-itemkop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.pa-itemkop h3 { margin: 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.pa-soort, .pa-keus { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--rand); border-radius: var(--hoek-knop); overflow: hidden; }
.pa-soort label, .pa-keus label { display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 6px 12px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.pa-soort label:has(input:checked), .pa-keus label:has(input:checked) { background: var(--donker); color: #fff; }
.pa-soort input, .pa-keus input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pa-soort label:has(input:focus-visible), .pa-keus label:has(input:focus-visible) { outline: 2px solid var(--donker); outline-offset: -2px; }
.pa-gevonden { color: var(--goed); }
.pa-addons { min-width: 0; border: 0; padding: 0; margin: 0; }
.pa-addons legend { font-size: 13px; padding: 0; margin-bottom: 4px; }
.pa-chip { display: inline-flex; align-items: center; gap: 4px; margin: 0 6px 6px 0; padding: 4px 10px; border: 1px solid var(--rand); border-radius: 999px; font-size: 12px; cursor: pointer; }
.pa-chip:has(input:checked) { background: var(--donker); border-color: var(--donker); color: #fff; }
.pa-erbij { width: auto; }
.pa-slim { margin: 0 0 8px; padding: 8px 12px; border-radius: var(--hoek-knop); background: var(--goed-vlak); color: var(--goed); font-size: 13px; }
.pa-stappen .sa-schakel { cursor: default; }
.pa-rol { margin-left: auto; font-size: 12px; color: var(--zacht); white-space: nowrap; }
.pa-zo { position: sticky; top: 16px; padding: 16px 18px; border-radius: var(--hoek); background: var(--vlak); font-size: 13px; }
.pa-zo h2 { margin: 0 0 8px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--zacht); }
.pa-route { list-style: none; margin: 10px 0; padding: 0 0 0 4px; }
.pa-route li { position: relative; padding: 0 0 12px 22px; border-left: 1px solid #cfcfcd; }
.pa-route li:last-child { border-left-color: transparent; }
.pa-route li::before { content: ""; position: absolute; left: -7px; top: 1px; width: 12px; height: 12px; border-radius: 50%; background: var(--donker); box-shadow: inset 0 0 0 2px var(--vlak), 0 0 0 1px var(--donker); }
.pa-route li.uit::before, .pa-route li.aan:not(.vast)::before { background: var(--vlak); box-shadow: 0 0 0 1px #b9bcc0; }
.pa-route li span { display: block; }
.pa-route li small { color: var(--zacht); }
@media (max-width: 900px) {
  .pa { grid-template-columns: minmax(0, 1fr); }
  .pa-zo { position: static; }
  .pa-rij, .pa-rij.pa-drie { grid-template-columns: minmax(0, 1fr); }
}

/* Spec 2026-10-20 (deel 2, mockup C): Beheer › Stappen. */
.sb-tabel td { vertical-align: top; }
.sb-tabel tr.vast td { background: var(--vlak); }
.sb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sb-chip { display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 3px 10px; border: 1px solid var(--rand); border-radius: 999px; font-size: 12px; cursor: pointer; }
.sb-chip:has(input:checked) { background: var(--donker); border-color: var(--donker); color: #fff; }
.sb-chip.vast { background: #9a9da2; border-color: #9a9da2; color: #fff; cursor: default; }
.sb-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sb-chip:has(input:focus-visible) { outline: 2px solid var(--donker); outline-offset: 2px; }
.sb-noot { margin: 10px 0; font-size: 12px; }
/* Spec 2026-10-21 (zachte overdracht, mockup C): de kolom Volgende stap meteen oppakken. */
.sb-tabel { min-width: 980px; }      /* smal (telefoon): de tabel schuift opzij in .tabelwrap, de kolommen blijven leesbaar */
.sb-meteen, .sb-meteen-kop { min-width: 220px; }
.sb-meteen-kop small { display: block; margin-top: 4px; font-size: 11.5px; color: var(--zacht); line-height: 1.4; font-weight: 400; }
.sb-vink { display: flex; align-items: flex-start; gap: 8px; margin: 0; cursor: pointer; }
.sb-vink input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--donker); }
.sb-vink small, .sb-meteen > small { display: block; font-size: 12px; color: var(--zacht); line-height: 1.35; }
.sb-vink small b { color: var(--tekst); font-weight: 500; }
.sb-meteen > small.sb-werkt, .sb-meteen > small.sb-niemand { margin: 4px 0 0 26px; }
.sb-meteen > small.sb-niemand { color: var(--let); }

/* Spec 2026-10-20 (deel 2, mockup D): de widget Packing - links Te verpakken, rechts Verzending naar de klant. */
.pak-vrij { margin: 0 0 12px; padding: 8px 12px; border-radius: var(--hoek-knop); background: var(--goed-vlak); color: var(--goed); font-size: 13px; }
.pak-delen { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; }
.pak-lijst h3, .pak-verzending h3 { margin: 0 0 8px; font-size: 16px; font-weight: 500; }
.pak-stand { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pak-stand small { white-space: nowrap; color: var(--zacht); font-size: 12px; }
.pak-regels { list-style: none; margin: 0; padding: 0; }
.pak-regel { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 160px); align-items: center; gap: 12px; padding: 10px 8px; border-top: 1px solid var(--rand); }
.pak-regel.eigen { background: var(--vlak); border-radius: var(--hoek-knop); }
.pak-regel.af .pak-naam { text-decoration: line-through; }
.pak-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pak-tekst small { color: var(--zacht); font-size: 12px; }
.pak-vink { margin: 0; }
.pak-vak, .pak-vink button.pak-vak { display: grid; place-items: center; width: 26px; height: 26px; margin: 0; padding: 0; border: 1px solid #b9bcc0; border-radius: 4px; background: var(--pagina); color: #fff; font-size: 15px; cursor: pointer; }
.pak-regel.af .pak-vak, .pak-regel.af .pak-vink button.pak-vak { background: var(--donker); border-color: var(--donker); }
.pak-vak.alleen { cursor: default; }
.pak-aantal { text-align: right; font-size: 18px; font-weight: 300; }
.pak-aantal small { display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--zacht); }
.pak-verpakking { font-size: 13px; }
@media (max-width: 760px) {
  .pak-delen { grid-template-columns: minmax(0, 1fr); }
  .pak-regel { grid-template-columns: auto minmax(0, 1fr) auto; }
  .pak-verpakking { grid-column: 2 / -1; }
}
.pa input[type=number], .pa input[type=text], .pa input[type=date], .pa select, .pa textarea { width: 100%; }
.pa input[type=number], .pa input[type=date], .pa textarea {
  padding: .65rem .75rem; font: inherit; border: 1px solid var(--rand); border-radius: var(--radius); background: var(--pagina);
}
@media (max-width: 600px) {
  .pa-stappen .sa-schakel { flex-wrap: wrap; }
  .pa-stappen .sa-tekst { flex: 1 1 60%; }
  .pa-stappen .pa-keus { flex: 1 1 100%; justify-content: stretch; }
  .pa-stappen .pa-keus label { flex: 1; justify-content: center; }
}
.pak { display: block; }

/* Spec 2026-10-21 (mockup D): het zegel van de 3MF onder het deel 3MF, en de melding na een vanzelf gestarte r2. */
.mf-zegel { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rand); }
.mf-zegel p { margin: 7px 0 0; font-size: 12px; color: var(--zacht); }
.mf-zegelpil { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: 14px; background: var(--vlak-2); color: var(--donker); font-size: 12px; line-height: 1.35; }
.mf-zegelpil b { font-weight: 500; }
.mf-zegelpil.dicht { background: var(--donker); color: #fff; }
.mf-zegelpil.herprint { background: var(--let-vlak); color: var(--let); box-shadow: inset 0 0 0 1px #e3d6c1; }
.mf-zegelpil svg, .mf-r2 svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mf-r2 { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 12px; padding: 12px 14px; border: 1px solid #e3d6c1; border-radius: 12px; background: var(--let-vlak); }
.mf-r2 svg { width: 18px; height: 18px; margin-top: 2px; color: var(--let); }
.mf-r2-tekst { flex: 1; min-width: 0; }
.mf-r2-tekst b { display: block; font-weight: 500; font-size: 13.5px; }
.mf-r2-tekst small { display: block; margin-top: 3px; font-size: 12px; line-height: 1.4; }
.mf-r2 a.weghalen { flex: none; font-size: 12px; color: var(--zacht); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* Spec 2026-10-23 (mockup doorlooptijd): het rustige blok Doorlooptijd opgeven in Mijn taken (_doorlooptijd.html), het
   vel (static/js/doorlooptijd.js, in de vorm van .dk-pop) en het voorstel voor een vaste datum (_voorstel.html). */
.panel.rustig { background: var(--vlak); border-color: transparent; }
.dl-lijst { list-style: none; margin: 14px 0 0; padding: 0; }
.dl-regel { display: grid; grid-template-columns: 230px minmax(0, 1fr) auto; gap: 6px 18px; align-items: center;
  padding: 13px 0; border-top: 1px solid var(--lijn); font-size: 13px; }
.dl-wie b { font-weight: 500; }
.dl-waar { color: var(--tekst); }
.dl-waar .zacht, .dl-std, .dl-verwacht { color: var(--zacht); }
.dl-rechts { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px 12px; }
.dl-std { max-width: 150px; font-size: 11px; line-height: 1.3; text-align: right; }
.dl-knop, .dl-wd { gap: 7px; background: var(--pagina); }
.dl-knop svg.icoon, .dl-wd svg.icoon { width: 14px; height: 14px; }
.dl-gegeven { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
.dl-wd { display: inline-flex; align-items: center; padding: 3px 11px 3px 9px; border: 1px solid var(--lijn);
  border-radius: 999px; font-size: 12px; }
.dl-wd b, .dl-verwacht b { color: var(--tekst); font-weight: 500; }
.dl-verwacht { font-size: 12px; }
.dl-wijzig { padding: 0; border: 0; background: none; color: var(--zacht); font: inherit; font-size: 11px;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.dl-form { display: inline-flex; }
.dl-vorm { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dl-vorm input[type=number] { width: 64px; padding: 4px 6px; font: inherit; font-size: 12px; border: 1px solid var(--rand);
  border-radius: 6px; }
.dl-vorm button.knop-klein { height: 30px; margin: 0; }
.dl-knop, .dl-wijzig { display: none; }
.dl-js .dl-knop { display: inline-flex; }
.dl-js .dl-wijzig { display: inline; }
.dl-js .dl-form .dl-vorm { display: none; }
@media (max-width: 760px) {
  .dl-regel { grid-template-columns: minmax(0, 1fr) auto; }
  .dl-waar { grid-column: 1; font-size: 12px; color: var(--zacht); }
  .dl-rechts { grid-column: 2; grid-row: 1 / 3; }
  .dl-std { display: none; }
  .dl-gegeven { grid-column: 1 / -1; }
  .dl-regel:has(.dl-gegeven) .dl-rechts { grid-column: 1 / -1; grid-row: auto; justify-content: flex-start; }
}
.dl-pop { width: 380px; }
.dl-pop .dk-knop { white-space: nowrap; }
.dl-popkop { display: none; align-items: center; justify-content: space-between; margin: 0 0 8px; }
.dl-pop.dk-onder .dl-popkop { display: flex; }
.dl-oblabel { margin: 0; font-size: 11px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--zacht); }
.dl-sluit { width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--vlak); color: var(--tekst);
  font-size: 18px; cursor: pointer; }
.dl-wat { margin: 0 0 4px; font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--zacht); }
.dl-titel { margin: 0 0 12px; font-size: 16px; font-weight: 500; line-height: 1.3; }
.dl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.dl-chip { min-width: 40px; padding: 7px 12px; border: 1px solid var(--lijn); border-radius: 999px; background: var(--pagina);
  color: var(--tekst); font: inherit; font-size: 13px; cursor: pointer; }
.dl-chip.anders { color: var(--zacht); }
.dl-chip.sel { border-color: var(--donker); background: var(--donker); color: #fff; font-weight: 500; }
.dl-pop.dk-onder .dl-chips .dl-chip { flex: 1; min-width: 0; padding: 11px 0; font-size: 15px; }
.dl-stapper { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; padding: 6px;
  border: 1px solid var(--lijn); border-radius: 12px; }
.dl-stapper[hidden] { display: none; }
.st-knop { width: 38px; height: 38px; border: 0; border-radius: 9px; background: var(--vlak); color: var(--tekst);
  font: inherit; font-size: 18px; cursor: pointer; }
.st-waarde { text-align: center; line-height: 1.1; }
.st-waarde b { display: block; font-size: 24px; font-weight: 300; }
.st-waarde i { font-size: 11px; font-style: normal; color: var(--zacht); }
.dl-std2 { margin: 0 0 8px; font-size: 12px; color: var(--zacht); }
.dl-live b { font-weight: 500; }
.dl-live2 { display: block; margin-top: 3px; font-size: 11.5px; color: var(--zacht); }
.dl-live2 b { color: var(--tekst); }
.dl-pop .dk-knop.weetniet { border-color: transparent; background: var(--vlak); }
.dl-pop .dk-knop[hidden] { display: none; }
.dl-pop.dk-onder .dk-knoppen { flex-wrap: wrap; }
.dl-pop.dk-onder .dk-rechts { order: 1; flex: 1 1 100%; margin: 0; }
.dl-pop.dk-onder .dk-rechts .dk-knop { flex: 1; padding: 12px 16px; text-align: center; }
.dl-pop.dk-onder .dk-rechts .dk-zet { flex: 2; }
.dl-pop.dk-onder .dk-knop.weetniet { order: 3; flex: 1 1 100%; padding: 12px 16px; background: transparent; text-align: center; }

/* Het voorstel (mockup D): in de tabel van Dringend, op een kaart op de telefoon, en onder de titel van het stapscherm. */
.vs-cel { min-width: 300px; }
.dl-voorstel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 8px 8px 8px 12px;
  border-radius: 12px; background: var(--vlak); font-size: 12px; }
.vs-tekst { flex: 1 1 100%; }
.vs-tekst b { font-weight: 500; }
.vs-vraag { display: block; margin-top: 1px; color: var(--let); font-size: 11.5px; font-weight: 500; }
.vs-knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vs-klopt { display: inline-flex; margin: 0; }
.vs-klopt button[type=submit].knop-klein { height: 30px; padding: 0 14px; }
.kopregel .dl-voorstel { flex-wrap: nowrap; padding: 2px 4px 2px 12px; }
.kopregel .dl-voorstel .vs-tekst { flex: none; }
.kopregel .dl-voorstel .vs-vraag { display: inline; margin: 0 0 0 6px; }
.tk-voorstel { margin: 0 10px 10px; padding: 10px 10px 10px 12px; border-radius: 12px; background: var(--vlak); font-size: 12.5px; }
.tk-voorstel .vs-knoppen { margin-top: 9px; }
.tk-voorstel .vs-klopt, .tk-voorstel .vs-knoppen .dk { flex: 1; }
.tk-voorstel .vs-klopt button[type=submit].knop-klein { width: 100%; height: 36px; }
.tk-voorstel .dk-pil { width: 100%; justify-content: center; min-height: 36px; border-radius: var(--hoek-knop); }
.vs-knoppen .dk-pil.leeg { border-style: solid; color: var(--tekst); }
.dl-pop.dk-onder { box-shadow: 0 0 0 100vmax rgba(29, 31, 33, .42), 0 -10px 40px rgba(0, 0, 0, .18); }
/* Besluit 23 okt 2026: "schoof n werkdagen op" (lijst met datums en het toezegvak). */
.planning-verschoven, .tb-verschoven { color: var(--let); font-weight: 500; }
.toezegvak-verschoven { display: flex; align-items: center; gap: 4px; flex-basis: 100%; margin: 4px 0 0; color: var(--let);
  font-size: 11.5px; font-weight: 500; }
.toezegvak-verschoven svg.icoon { width: 12px; height: 12px; }

/* --- Toch goed (spec 2026-10-27, mockup bijlagen/toch-goed): in de widget Printopdracht onder een bed met een afgekeurde
   print de onderdelen, de knop, de herprint en de geschiedenis (_controleblok.html); de form in een <dialog>, als pagina en
   op de telefoon (_toch_goed_form.html). Brons voor de knop (aandacht), rood voor afgekeurd, groen voor goed. --- */
.tg-blok { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.tg-dl { margin: 6px 0 0; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--zacht); font-weight: 500; }
.tg-delen { margin: 0; padding: 0; list-style: none; border: 1px solid var(--rand); border-radius: var(--hoek); overflow: hidden; }
.tg-deel { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--rand); }
.tg-deel .tg-n { flex: none; }
.tg-t { flex: 1 1 140px; min-width: 0; overflow-wrap: anywhere; }
.tg-deel .tg-r { margin-left: auto; }
.tg-deel:first-child { border-top: 0; }
.tg-deel.af { background: #fdf8f7; }
.tg-n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--vlak-2); font-size: 11px; font-weight: 500; font-style: normal; }
.tg-deel.af .tg-n { background: var(--laat); color: #fff; }
.tg-t b { font-weight: 500; font-size: 13px; }
.tg-t small { display: block; color: var(--zacht); font-size: 11.5px; }
.tg-r { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.tg-pil { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--vlak-2); font-size: 10.5px; white-space: nowrap; }
.tg-pil.g { background: var(--goed-vlak); color: var(--goed); }
.tg-pil.l { background: var(--let-vlak); color: var(--let); }
.tg-pil.r { background: var(--laat-vlak); color: var(--laat); }
.knop.tg-knop { border-color: var(--let); color: var(--let); background: var(--pagina); }
.knop.tg-knop.uit, .knop.tg-knop[aria-disabled="true"] { opacity: .45; border-style: dashed; cursor: not-allowed; }
.tg-uitleg { margin: 0; padding: 8px 12px; border-radius: var(--hoek-knop); background: var(--vlak); color: var(--zacht); font-size: 12px; }
.tg-uitleg b { color: var(--tekst); font-weight: 500; }
.tg-herprint { display: flex; gap: 10px; align-items: flex-start; padding: 8px 12px; border: 1px solid var(--rand); border-radius: var(--hoek); font-size: 12.5px; }
.tg-herprint[data-soort="wacht"] { border-left: 3px solid var(--let); }
.tg-herprint[data-soort="vervallen"] { border-style: dashed; color: var(--zacht); }
.tg-herprint .tg-pil { flex: none; margin-top: 1px; }
.tg-herprint b { font-weight: 500; }
.tg-herprint small { display: block; color: var(--zacht); font-size: 11.5px; }
.tg-gesch { border-top: 1px solid var(--rand); padding-top: 6px; }
.tg-gesch summary { cursor: pointer; font-size: 12px; color: var(--zacht); }
.tg-gesch summary b { color: var(--tekst); font-weight: 500; }
.tg-gesch ul { list-style: none; margin: 6px 0 0; padding: 0; }
.tg-gesch li { position: relative; margin-left: 3px; padding: 5px 0 5px 14px; border-left: 2px solid var(--rand); font-size: 12.5px; }
.tg-gesch li::before { content: ""; position: absolute; left: -5px; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: #c9c7c1; }
.tg-gesch li.af::before { background: var(--laat); }
.tg-gesch li.toch::before { background: var(--goed); }
.tg-gesch li b { font-weight: 500; }
.tg-gesch li small { display: block; color: var(--zacht); font-size: 11.5px; }
.tg-wie { color: var(--zacht); }
.tg-dialoog { width: min(520px, calc(100vw - 32px)); border-radius: 16px; }
.tg-dialoog h2 { margin: 0 0 2px; font-size: 17px; font-weight: 500; }
.tg-form { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.tg-eerst { margin: 0 0 6px; color: var(--zacht); font-size: 12.5px; }
.tg-gebeurt { margin: 0 0 8px; padding: 10px 12px 10px 28px; border-radius: 12px; background: var(--let-vlak); font-size: 12.5px; }
.tg-gebeurt li { margin: 3px 0; }
.tg-lab { display: flex; justify-content: space-between; margin: 0; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--zacht); font-weight: 500; }
.tg-lab em { font-style: normal; color: var(--laat); letter-spacing: .06em; }
.tg-reden { width: 100%; min-height: 62px; font: inherit; font-size: 12.5px; padding: 8px 10px; border: 1px solid var(--tekst); border-radius: 10px; resize: vertical; }
.tg-moet { margin: 0; font-size: 11.5px; color: var(--zacht); }
.tg-knoppen { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.tg-form:has(.tg-reden:placeholder-shown) .tg-ja { opacity: .4; }
.tg-form:not(:has(.tg-reden:placeholder-shown)) .tg-moet { visibility: hidden; }
.tg-tel .tg-knoppen { flex-wrap: nowrap; }
.tg-tel .tg-knoppen .knop { flex: 1; width: auto; min-height: 44px; }
.tg-tel .tg-knoppen .tg-ja { flex: 1.4; }
.tg-nietmeer { margin: 0; color: var(--zacht); }
.po-bed:has(> .tg-blok) { flex-wrap: wrap; }
.po-bed > .tg-blok { flex: 1 0 100%; min-width: 0; }
.tg-form .tg-knoppen .knop { width: auto; margin: 0; }
.tg-form .tg-knoppen > .knop:not(.tg-ja) { background: var(--pagina); color: var(--tekst); border: 1px solid var(--rand); }

/* Fabrieksportaal v2 (spec 2026-10-27, plan stap 0): elk deel schrijft hier alleen tussen zijn eigen ankers. */
/* deel 5: het upload-pilletje */
/* --- fabrieksportaal v2, deel 5 --- */
/* Het upload-pilletje (spec 2026-10-27, § 8; templates/core/_uploadpil.html, static/js/uploads.js): rechtsonder op elke
   pagina, in de stijl van de meldingen-pil - klein, rustig, geen balk over de pagina. Ingeklapt een ring en een regel;
   de lijst (.up-vel) klapt erboven open, op de telefoon als vel van onderen. Bronzen bij geen verbinding, groen als
   alles klaar is. */
.up-pil { position: fixed; right: 18px; bottom: 18px; z-index: 50; font-size: 12px; }
.up-pil[hidden] { display: none; }
.up-knop {
  display: flex; align-items: center; gap: 9px; margin: 0; padding: 5px 14px 5px 6px; max-width: calc(100vw - 36px);
  background: var(--pagina); color: var(--tekst); border: 1px solid var(--lijn); border-radius: 99px;
  box-shadow: 0 4px 18px #0000001f; font: inherit; font-size: 12px; line-height: 1.4; white-space: nowrap;
  cursor: pointer;
}
.up-knop:focus-visible { outline: 2px solid var(--donker); outline-offset: 2px; }
.up-tekst { overflow: hidden; text-overflow: ellipsis; }
.up-tekst b { font-weight: 500; }
.up-ring { flex: none; width: 22px; height: 22px; transform: rotate(-90deg); }
.up-ring-vlak { fill: none; stroke: var(--vlak-2); stroke-width: 4; }
.up-ring-boog { fill: none; stroke: var(--donker); stroke-width: 4; stroke-linecap: round; transition: stroke-dasharray .3s; }
.up-chev {
  flex: none; width: 7px; height: 7px; margin: 3px 0 0 2px; border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor; transform: rotate(-135deg);
}
.up-knop[aria-expanded="true"] .up-chev { margin: -3px 0 0 2px; transform: rotate(45deg); }
.up-pil.weg .up-knop { background: var(--let-vlak); color: var(--let); border-color: currentColor; }
.up-pil.weg .up-ring-boog { stroke: var(--let); }
.up-pil.klaar .up-knop { background: var(--goed-vlak); color: var(--goed); border-color: currentColor; }
.up-pil.klaar .up-ring-boog { stroke: var(--goed); }
.up-pil.fout .up-knop { background: var(--laat-vlak); color: var(--laat); border-color: currentColor; }
.up-pil.fout .up-ring-boog { stroke: var(--laat); }
.up-vel {
  position: absolute; right: 0; bottom: calc(100% + 8px); width: 390px; max-width: calc(100vw - 36px);
  max-height: min(70vh, 560px); overflow-y: auto; overscroll-behavior: contain; background: var(--pagina);
  border: 1px solid var(--lijn); border-radius: 12px; box-shadow: 0 10px 34px #00000026;
}
.up-vel[hidden] { display: none; }
.up-kop {
  position: sticky; top: 0; display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--pagina);
  border-bottom: 1px solid var(--rand);
}
.up-kop b { font-size: 12.5px; font-weight: 500; }
.up-kop small { color: var(--zacht); font-size: 11px; }
.up-r { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.up-link {
  margin: 0; padding: 0; background: none; border: 0; color: var(--tekst); font: inherit; font-size: 11.5px;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.up-sluit { margin: 0; padding: 0 2px; background: none; border: 0; color: var(--zacht); font-size: 13px; cursor: pointer; }
.up-lijst { margin: 0; padding: 0; list-style: none; }
.up-rij {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 9px 14px;
  border-bottom: 1px solid var(--rand);
}
.up-ic {
  grid-row: span 3; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px;
  background: var(--vlak-2); color: var(--tekst); font-size: 8.5px; font-weight: 500; letter-spacing: .04em;
}
.up-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 500; }
.up-kn { grid-row: 1 / span 3; grid-column: 3; display: flex; gap: 4px; }
.up-rond {
  display: grid; place-items: center; width: 28px; height: 28px; margin: 0; padding: 0; border: 1px solid var(--lijn);
  border-radius: 50%; background: var(--pagina); color: var(--tekst); font-size: 11px; line-height: 1; cursor: pointer;
}
.up-naar {
  grid-column: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--zacht);
  font-size: 10.5px;
}
.up-bl {
  grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; color: var(--zacht);
  font-size: 10.5px;
}
.up-balk { flex: 1 1 110px; height: 4px; border-radius: 2px; background: var(--vlak-2); overflow: hidden; }
.up-balk i { display: block; height: 100%; background: var(--donker); transition: width .3s; }
.up-rij.weg .up-balk i { background: var(--let); }
.up-rij.klaar .up-balk i { background: var(--goed); }
.up-rij.fout .up-balk i { background: var(--laat); }
.up-st { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
.up-st.weg { color: var(--let); }
.up-st.klaar { color: var(--goed); white-space: nowrap; }
.up-st.klaar a { color: inherit; }
.up-st.fout { color: var(--laat); }
.up-noot { grid-column: 2; color: var(--tekst); font-size: 10.5px; }
.up-rij.geannuleerd .up-st { grid-column: 2; color: var(--tekst); font-size: 10.5px; }
.up-voet { margin: 0; padding: 9px 14px; color: var(--zacht); font-size: 10.5px; line-height: 1.45; }
.up-voet.up-hier { padding-top: 0; color: var(--let); }
/* De telefoon: boven de onderbalk (en boven de grote knop van een stap), de lijst als vel van onderen. */
html.tel .up-pil { right: 12px; bottom: calc(var(--onderbalk-hoogte) + env(safe-area-inset-bottom) + 12px); }
html.rk-aan.tel .up-pil { bottom: calc(var(--onderbalk-hoogte) + 98px + env(safe-area-inset-bottom)); }
html.tel .up-vel {
  position: fixed; left: 0; right: 0; bottom: 0; width: auto; max-width: none; max-height: 75vh;
  padding-bottom: env(safe-area-inset-bottom); border-radius: 16px 16px 0 0; box-shadow: 0 -10px 30px rgba(0, 0, 0, .18);
}
html.tel .up-knop[aria-expanded="true"] { visibility: hidden; }
/* Het portaal van de fabriek heeft rechtsonder de vaste knop Ask Hans Boodt (.fb-vraagknop): het pilletje staat erboven,
   en is weg zolang die vraag openstaat. */
body:has(.fb-vraagknop) .up-pil { bottom: 70px; }
html.tel body:has(.fb-vraagknop) .up-pil { bottom: calc(var(--onderbalk-hoogte) + env(safe-area-inset-bottom) + 66px); }
body:has(.fb-vraagknop[open]) .up-pil { display: none; }
@media print { .up-pil { display: none; } }
/* --- einde deel 5 --- */
/* Feedback (spec 2026-10-28; templates/core/_feedback.html, static/js/feedback.js): de ingang onderaan de zijbalk met de
   stip, het venster op de pc (een vast vak boven een lichte laag; op de telefoon en in de web-app het blad van blad.js),
   na versturen, je eerdere feedback en de pagina zonder JavaScript. Het venster staat vast, buiten het raster van de
   pagina, zodat het geen rij van body.app inneemt. */
.zijbalk-feedback {
  display: flex; align-items: center; gap: 8px; margin: 2px 0 6px; font-size: 12px; font-weight: 500;
  color: var(--tekst); text-decoration: none;
}
.zijbalk-feedback:hover { text-decoration: underline; }
.zijbalk-feedback .icoon { width: 16px; height: 16px; flex: none; }
.fdb-stip { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--let); }
.fdb-venster { position: fixed; top: 0; left: 0; width: 0; height: 0; z-index: 60; }
.fdb-venster > summary { position: absolute; width: 0; height: 0; overflow: hidden; list-style: none; }
.fdb-venster > summary::-webkit-details-marker { display: none; }
.fdb-venster[open] > summary::before {
  content: ""; position: fixed; inset: 0; z-index: 59; cursor: default; background: rgba(29, 31, 33, .25);
}
.fdb-venster[open] > .fdb-paneel {
  position: fixed; z-index: 60; top: 70px; left: 0; right: 0; width: min(460px, calc(100vw - 32px)); margin: 0 auto;
  max-height: calc(100vh - 100px); overflow-x: hidden; overflow-y: auto; padding: 20px 22px; background: var(--pagina);
  border-radius: 14px; box-shadow: 0 10px 40px rgba(0, 0, 0, .18); text-align: left;
}
.fdb h2 { font-size: 20px; font-weight: 300; margin: 0 0 2px; }
.fdb-sub { color: var(--zacht); font-size: 12px; margin: 0 0 12px; }
.fdb textarea {
  width: 100%; min-height: 120px; padding: 10px 12px; font: inherit; font-size: 13px; border: 1px solid var(--rand);
  border-radius: 10px; resize: vertical; background: var(--pagina);
}
.fdb-fout { margin: 6px 0 0; font-size: 12px; }
.fdb-bijlage { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 12px; }
.fdb .fdb-bijlageknop { display: inline; margin: 0; font-size: 12px; color: var(--zacht); text-decoration: underline; cursor: pointer; }
.fdb-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border: 1px solid var(--rand);
  border-radius: 999px; background: var(--vlak); font-size: 11.5px;
}
.fdb-chip[hidden] { display: none; }
.fdb-chipweg { padding: 0 2px; border: 0; background: none; color: var(--zacht); font: inherit; cursor: pointer; }
/* Feedback F-0004: plakken of slepen - de hint (niet op een aanraakscherm, niet naast een gekozen afbeelding), het kleine
   voorbeeld in de chip en de rand als er een bestand boven het venster hangt (static/js/feedback.js). */
.fdb-plakhint { color: var(--zacht); }
.fdb-bijlage.gekozen .fdb-plakhint { display: none; }
@media (hover: none) { .fdb-plakhint { display: none; } }
.fdb-duim { width: 28px; height: 28px; margin: 2px 0 2px -6px; border-radius: 6px; object-fit: cover; background: var(--pagina); }
.fdb-duim[hidden] { display: none; }
.fdb-venster.fdb-sleept .fdb-paneel { outline: 2px dashed var(--zacht); outline-offset: -8px; }
.fdb-mee { margin: 12px 0 14px; padding-top: 10px; border-top: 1px solid var(--rand); font-size: 11.5px; color: var(--zacht); }
.fdb-voet { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.fdb-link { font-size: 12px; color: var(--zacht); }
.fdb-knoppen { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-left: auto; }
.fdb-knoppen .knop { padding: 0 14px; }
.fdb button[type=submit].knop { width: auto; margin: 0; padding: 0 18px; }
.fdb-klaar { padding: 10px 0 4px; text-align: center; }
.fdb-vink {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-bottom: 8px;
  border-radius: 50%; background: var(--goed-vlak); color: var(--goed); font-size: 18px;
}
.fdb-klaarvak > .fdb-voet { margin-top: 12px; }
.fdb-eerdervak:not([hidden]), .fdb-klaarvak .fdb-eerder { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--rand); }
.fdb-sectie {
  display: block; margin-bottom: 6px; font-size: 10.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--zacht);
}
.fdb-r { padding: 5px 0; font-size: 12px; }
.fdb-r + .fdb-r { border-top: 1px solid var(--rand); }
.fdb-rkop { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.fdb-rtekst { min-width: 0; overflow-wrap: anywhere; }
.fdb-stand {
  flex: none; padding: 1px 8px; border: 1px solid var(--rand); border-radius: 999px; font-size: 10.5px;
  letter-spacing: .06em; white-space: nowrap; color: var(--zacht); background: var(--pagina);
}
.fdb-stand.update, .fdb-stand.in_update { background: var(--goed-vlak); border-color: #cfe2d6; color: var(--goed); }
.fdb-stand.for_claude { background: var(--let-vlak); border-color: #e4d8c2; color: var(--let); }
.fdb-stand.wont_do { background: var(--vlak); }
.fdb-antwoord { margin: 4px 0 0 12px; padding-left: 8px; border-left: 2px solid var(--rand); color: var(--tekst); }
.fdb-antwoord.nieuw { border-left-color: var(--let); }
.fdb-van { display: block; font-size: 11px; color: var(--zacht); }
.fdb-antwoord.nieuw .fdb-van { color: var(--let); }
.fdb-pagina .fdb-voet { margin-top: 4px; }
/* Beheer › Feedback (spec 2026-10-28; templates/core/feedback_beheer.html). */
.fdbb-werkbalk { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin: 14px 0 8px; }
.fdbb-filters { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--rand); border-radius: 8px; overflow: hidden; }
.fdbb-filters a { padding: 6px 12px; border-left: 1px solid var(--rand); font-size: 12px; color: var(--zacht); text-decoration: none; background: var(--pagina); }
.fdbb-filters a:first-child { border-left: 0; }
.fdbb-filters a[aria-current] { background: var(--donker); color: #fff; }
.fdbb-kopieform { margin: 0; }
.fdbb-kopieform button[type=submit].knop { width: auto; margin: 0; }
.fdbb-gekopieerd { margin: 0 0 8px; font-size: 12px; color: var(--goed); }
.fdbb-kopie {
  display: block; width: 100%; margin: 8px 0 12px; padding: 12px 14px; border: 1px solid var(--rand); border-radius: 10px;
  background: var(--vlak); font: 12px/1.5 ui-monospace, Consolas, monospace; white-space: pre-wrap;
}
.fdbb-kopie[hidden] { display: none; }
.fdbb-rij { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 0 10px; padding: 10px 4px; border-top: 1px solid var(--rand); }
.fdbb-vink { align-self: start; margin: 4px 0 0; }
.fdbb-kort {
  display: grid; grid-template-columns: 58px minmax(0, 1fr) 210px 120px; gap: 14px; align-items: start; cursor: pointer;
  list-style: none;
}
.fdbb-kort::-webkit-details-marker { display: none; }
.fdbb-nr { font-size: 12px; color: var(--zacht); }
.fdbb-tekst, .fdbb-wie { font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.fdbb-wie { font-size: 12px; }
.fdbb-tekst small, .fdbb-wie small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--zacht); }
.fdbb-clip {
  display: inline-block; width: 10px; height: 12px; margin-left: 6px; vertical-align: -1px; border: 1.5px solid var(--zacht);
  border-radius: 5px;
}
.fdbb-detail {
  display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; margin-top: 8px; padding: 12px 14px;
  border-radius: 10px; background: var(--vlak);
}
.fdbb-volledig { margin: 0 0 10px; overflow-wrap: anywhere; }
.fdbb-ctx { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 3px 10px; margin: 0; font-size: 12px; }
.fdbb-ctx dt { color: var(--zacht); }
.fdbb-ctx dd { margin: 0; overflow-wrap: anywhere; }
.fdbb-shot { display: inline-block; margin-top: 10px; font-size: 11px; color: var(--zacht); }
.fdbb-shot img { display: block; max-width: 100%; max-height: 240px; border: 1px solid var(--rand); border-radius: 8px; }
.fdbb-shotlink { display: inline-block; margin-top: 10px; font-size: 12px; }
.fdbb-acties { display: flex; flex-direction: column; gap: 10px; }
.fdbb-standen { display: flex; flex-wrap: wrap; gap: 6px; }
.fdbb-standen form, .fdbb-update { margin: 0; }
.fdbb-acties button[type=submit].knop { width: auto; margin: 0; }
.fdbb-acties button[type=submit].knop:not(.primair) { border: 1px solid var(--rand); background: var(--pagina); color: var(--tekst); }
.fdbb-acties button[type=submit].knop:not(.primair):hover { border-color: var(--donker); }
.fdbb-update label { margin: 0 0 4px; }
.fdbb-updaterij { display: flex; gap: 6px; align-items: center; }
.fdbb-updaterij input[type=date] { flex: 1 1 auto; min-width: 0; padding: 4px 6px; font: inherit; font-size: 12px; border: 1px solid var(--rand); border-radius: var(--radius); }
.fdbb-terug { border-top: 1px solid var(--rand); padding-top: 8px; font-size: 12px; }
.fdbb-terug textarea { width: 100%; min-height: 60px; margin-top: 6px; padding: 8px 10px; font: inherit; font-size: 12px; border: 1px solid var(--rand); border-radius: 8px; }
.fdbb-terug .fdbb-vinkje { display: flex; align-items: center; gap: 6px; margin: 3px 0; font-size: 12px; color: var(--tekst); }
.fdbb-terug .knop { margin-top: 4px; }
.fdbb-uitleg { margin-top: 14px; font-size: 12px; }
@media (max-width: 900px) {
  .fdbb-kort { grid-template-columns: 52px minmax(0, 1fr); }
  .fdbb-kort > :nth-child(3), .fdbb-kort > :nth-child(4) { grid-column: 2; }
  .fdbb-detail { grid-template-columns: minmax(0, 1fr); }
}

/* --- Het scherm van een zachte stap (spec 2026-10-31, § 10.6, PC 7; deel 3b, taak 7) ---------------------------------
   Het label *zacht* naast de stapnaam en de regel eronder (fase, duur, wie invoegde, de omschrijving); *Scherm
   aanpassen* als klein paneel onder de knop (_scherm_aanpassen.html, op .nw-menu, klassen schp-); de widgets Omschrijving, Notities en
   Foto's van de stap (core/widgets/omschrijving.py, notities.py, stapfotos.py). */
.zs-label {
  align-self: center; padding: 1px 8px; border: 1px dashed var(--let); border-radius: 999px; font-size: 11px;
  letter-spacing: .04em; color: var(--let);
}
.schermkop .zachtkop { margin: 6px 0 0; font-size: 12.5px; color: var(--zacht); }
.schp-knop { white-space: nowrap; }
.schp-knop .icoon { width: 15px; height: 15px; }
.schp-lijst { width: 320px; padding: 14px 16px; font-size: 12.5px; }
.schp-titel { margin: 0 0 4px; font-size: 14px; font-weight: 500; }
.schp-zin { margin: 0 0 10px; color: var(--zacht); }
.schp-optie {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1.5px solid var(--donker);
  border-radius: 8px;
}
.schp-optie b { display: block; font-weight: 500; }
.schp-optie small { display: block; margin-top: 2px; color: var(--zacht); font-size: 11.5px; }
.schp-rond {
  flex: none; width: 14px; height: 14px; margin-top: 2px; border: 1.5px solid var(--donker); border-radius: 50%;
  box-shadow: inset 0 0 0 3px var(--pagina); background: var(--donker);
}
.schp-noot { margin: 10px 0; font-size: 11.5px; color: var(--zacht); }
.schp-voet { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; }
.schp-voet small { font-size: 11px; color: var(--zacht); }
.widget-omschrijving .om-tekst { margin: 0 0 8px; font-size: 13px; line-height: 1.5; }
.widget-notities .nt-form { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; }
.nt-form textarea {
  width: 100%; min-height: 56px; padding: 8px 10px; font: inherit; font-size: 13px; resize: vertical;
  border: 1px solid var(--rand); border-radius: 8px; background: var(--pagina);
}
.nt-form button[type=submit].nt-bewaar { align-self: flex-end; width: auto; min-height: 30px; margin: 0; padding: 0 14px;
  font-size: 10px; }
.nt-lijst { margin: 0; padding: 0; list-style: none; }
.nt-notitie { padding: 8px 0; border-top: 1px solid var(--rand); }
.nt-notitie:first-child { border-top: 0; padding-top: 0; }
.nt-tekst { margin: 0 0 2px; font-size: 13px; line-height: 1.45; }
.nt-notitie .meta { margin: 0; }
.widget-stapfotos .sf-form { display: block; margin: 0; }     /* niet de flexrij van .koppelen: de vakjes over de hele breedte */
.sf-map { margin: 0 0 8px; font: inherit; font-size: 12px; }
.sf-vakken {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; margin: 0 0 8px; padding: 0;
  list-style: none;
}
.sf-vak { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 8px; background: var(--grijsvlak); }
.sf-vak a { display: block; height: 100%; }
.sf-vak img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-plus { background: transparent; border: 1.5px dashed #c9c9c7; }
.sf-plus label {
  display: grid; place-items: center; height: 100%; margin: 0; font-size: 22px; color: var(--zacht); cursor: pointer;
}
.sf-plus label:hover { color: var(--tekst); }
.sf-plus input:focus-visible + label { outline: 2px solid var(--donker); outline-offset: -2px; }

/* De widget Vraag Corpus (laag 3, spec 2026-11-02, core/widgets/vraag_corpus.py): de invoer, de chips en het antwoord;
   de bellen van het antwoord (hlp-v, hlp-a, hlp-bron, hlp-gezien) staan in hulp/static/hulp/hulp.css. */
.vc { display: grid; gap: 10px; }
.vc-invoer { display: flex; align-items: center; gap: 8px; margin: 0; background: var(--pagina); border: 1px solid var(--rand); border-radius: 99px; padding: 4px 4px 4px 14px; }
.vc-invoer input { flex: 1; min-width: 0; border: 0; font: inherit; font-size: 14px; background: transparent; outline: none; }
.vc-stuur { border: 0; border-radius: 99px; background: var(--tekst); color: var(--pagina); padding: 6px 16px; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.vc-stuur[disabled] { opacity: .5; cursor: default; }
.vc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vc-chip { border: 1px solid var(--rand); background: var(--pagina); border-radius: 99px; padding: 3px 11px; font: inherit; font-size: 12.5px; cursor: pointer; color: var(--tekst); }
.vc-chip:hover { border-color: var(--tekst); }
.vc-uit:empty { display: none; }
.vc-uit { background: var(--pagina); border-radius: var(--hoek); padding: 12px 14px; display: grid; gap: 8px; }
/* *Vraag* is een ronde pil binnen de balk (mockup vraag-corpus A, 3 nov 2026): 4 px rondom, zo hoog als de balk van
   binnen, in het midden. De algemene `button[type=submit]:not(.link)` (0,2,1) gaf hem anders margin-top, 38 px hoogte,
   hoekjes en hoofdletters, en `input[type=text]:not(.code-vak)` het veld de volle breedte met rand: deze regels wegen
   zwaarder (0,4,1 en 0,3,1); op de telefoon zet telefoon.css alleen de lettergrootte van het veld op 16 px. */
.vc .vc-invoer button[type=submit].vc-stuur {
  flex: none; align-self: stretch; width: auto; min-height: 0; margin: 0; border: 0; border-radius: 99px;
  background: var(--tekst); color: var(--pagina); padding: 0 16px; font: inherit; font-size: 13px; font-weight: 500;
  line-height: 1; letter-spacing: normal; text-transform: none; cursor: pointer;
}
.vc .vc-invoer button[type=submit].vc-stuur[disabled] { opacity: .5; cursor: default; }
.vc .vc-invoer input[type="text"] { flex: 1 1 auto; width: auto; min-width: 0; border: 0; border-radius: 0; padding: 6px 0; height: auto; min-height: 0; box-shadow: none; background: transparent; }

/* De to-do (2 nov 2026, spec 2026-11-02-todo-design; templates/afspraken/_todo.html, static/js/todo.js): rechts in de widget
   Agenda (met de schakelaar To-do | Komt eraan), in Mijn taken en op /todo/. Een wit vlak met de invoer bovenaan, het
   klokje dat een klein vak openklapt (B), de punten met een rondje, gedaan doorgestreept onderaan. In de agenda een wit
   blokje met een rondje (.ag-blok.todo). Komt eraan: een project op verwacht klaar grijs (.ag-rij.verwacht). */
.td { --td-rand: var(--rand); display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 14px;
  border-radius: 12px; background: var(--pagina); font-size: 14px; }
.td-takenpanel .td, .td-pagina .td, .td-widget .td { padding: 0; }
.td-widget { margin: 2px 0 10px; }
.td-invoer { position: relative; margin: 0; padding: 2px 0 8px; border-bottom: 1px solid var(--td-rand); }
.td-invoerrij { display: flex; align-items: center; gap: 8px; padding-right: 36px; }
.td-plus { flex: none; color: var(--zacht); font-size: 18px; line-height: 1; }
.td input.td-tekstveld { flex: 1; min-width: 0; width: auto; padding: 4px 0; border: 0; border-radius: 0; background: none;
  font-size: 14px; outline: none; }
.td input.td-tekstveld::placeholder { color: var(--zacht); }
.td-klokknop { position: absolute; top: 0; right: 0; display: grid; place-items: center; width: 28px; height: 28px;
  border: 1px solid var(--td-rand); border-radius: 50%; color: var(--zacht); font-size: 14px; list-style: none;
  cursor: pointer; transition: border-color .15s, color .15s; }
.td-klokknop::-webkit-details-marker { display: none; }
.td-klok[open] .td-klokknop, .td-klokknop:hover { border-color: var(--donker); color: var(--tekst); }
.td-pop { margin: 8px 0 2px; padding: 10px 12px; border: 1px solid var(--td-rand); border-radius: 12px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .08); background: var(--pagina); }
.td-chips, .td-rij2 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.td-rij2 { margin-top: 8px; font-size: 12.5px; }
.td label.td-chip { position: relative; display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 2px 10px;
  border: 1px solid var(--td-rand); border-radius: 999px; color: var(--tekst); font-size: 12.5px; cursor: pointer;
  white-space: nowrap; }
.td-chip input[type=radio] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.td label.td-chip:has(input[type=radio]:checked) { background: var(--donker); border-color: var(--donker); color: #fff; }
.td label.td-chip:has(input[type=radio]:focus-visible) { outline: 2px solid var(--donker); outline-offset: 1px; }
.td-kies input[type=date] { width: 0; padding: 0; border: 0; opacity: 0; font: inherit; font-size: 12px; background: none; }
.td-kies:focus-within input[type=date], .td-kies.gekozen input[type=date] { width: auto; opacity: 1; }
.td input.td-veld { width: 92px; padding: 3px 8px; border: 1px solid var(--td-rand); border-radius: 8px; font: inherit;
  font-size: 12.5px; background: var(--pagina); }
.td .td-bel select { width: auto; padding: 0; border: 0; background: none; font: inherit; font-size: 12.5px; color: inherit; }
.td-bel.uit { opacity: .45; }
.td-hint { margin-left: auto; color: var(--zacht); font-size: 12px; }
/* a10: de dag (vandaag is de standaard en staat pas als *× Vandaag* vooraan bij een andere dag), de tijd op een liniaal en de melding als schakelaar */
.td-chips:not(.td-andere) .td-chip-vandaag { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; visibility: hidden; padding: 0; border: 0; }
.td-chips.td-andere .td-chip-vandaag { background: #ededeb; }
.td-chips.td-andere .td-chip-vandaag span::before { content: "× "; }
/* het snelle paneel van + Afspraak (a10, 9 nov 2026; templates/afspraken/_formulier_snel.html) */
.af-paneel.af-snelpaneel { position: fixed; width: 560px; max-width: calc(100vw - 24px); max-height: calc(100vh - 100px); overflow: auto; padding: 0; border-radius: 20px;
  background: var(--pagina); border: 1px solid var(--rand); box-shadow: 0 18px 40px -22px rgba(29, 31, 33, .45); }
.af-snel { padding: 16px 18px 14px; gap: 0; background: none; border-radius: 0; }
.af-snel .af-form { display: flex; flex-direction: column; gap: 10px; }
.af-snel input.af-snel-titel { width: 100%; box-sizing: border-box; padding: 6px 0 8px; border: 0; border-bottom: 1px solid var(--rand); border-radius: 0; background: none;
  font-size: 18px; outline: none; }
.af-snel input.af-snel-titel:focus { border-bottom-color: var(--donker); }
.td button.td-chip, .af-snel button.af-chip { margin: 0; padding: 2px 10px; border: 1px solid var(--td-rand, var(--rand)); border-radius: 999px; background: var(--pagina); color: var(--tekst);
  font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.af-snel .af-chip.aan, .af-snel label.af-chip.aan { background: var(--donker); border-color: var(--donker); color: #fff; }
.af-snel .td-chips.td-andere .td-chip-vandaag { background: #ededeb; }
.af-snel .td-tijdrij { margin-top: 2px; }
.af-bereik { position: absolute; top: 10px; height: 8px; border-radius: 4px; background: rgba(42, 44, 46, .14); }
.td-greep.af-greep { outline: none; cursor: grab; }
.td-greep.af-greep:focus-visible::before { box-shadow: 0 0 0 3px rgba(42, 44, 46, .25); }
.af-snel .td-rij3 { margin-top: 2px; gap: 8px; flex-wrap: wrap; }
.af-snel .td-opslaan { margin-left: auto; }
.af-tot { margin: 0; font-size: 12.5px; color: var(--zacht); }
.af-tot small { color: var(--licht, var(--zacht)); }
.af-wie { display: flex; flex-direction: column; gap: 6px; }
.af-wie[hidden], .af-tot[hidden] { display: none; }
.af-wie .af-keuzes { max-height: 150px; overflow: auto; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.af-snel-meer > summary { cursor: pointer; color: var(--zacht); font-size: 12.5px; list-style: none; }
.af-snel-meer > summary::-webkit-details-marker { display: none; }
.af-snel-meer[open] { display: flex; flex-direction: column; gap: 8px; }
.af-snel-meer input[type=text], .af-snel-meer textarea { width: 100%; box-sizing: border-box; }
.td-rijlabel { display: inline-flex; align-items: center; gap: 5px; margin-right: 2px; color: var(--zacht); font-size: 12px; }
.td-chips.td-andere .td-rijlabel { display: none; }
.td-liniaalvak { position: relative; flex: 1; min-width: 150px; }
.td-hint2 { position: absolute; left: 0; right: 0; top: -9px; text-align: center; font-size: 11px; color: var(--zacht); pointer-events: none; }
.td-liniaal.leeg { opacity: .45; }
.td button.td-wis { margin: 0; padding: 0; border: 0; background: none; font: inherit; font-size: 11.5px; color: var(--zacht); cursor: pointer; text-align: left; }
.td button.td-wis:hover { color: var(--tekst); }
.td-seg.td-inklap label { max-width: 0; overflow: hidden; opacity: 0; transition: max-width .2s, opacity .2s; }
.td-seg.td-inklap label:has(input:checked), .td-seg.td-inklap:hover label, .td-seg.td-inklap:focus-within label, .td-seg.td-inklap.open label { max-width: 120px; opacity: 1; }
.td-liniaalvak .td-liniaal { width: 100%; }
@media (prefers-reduced-motion: reduce) { .td-seg.td-inklap label { transition: none; } }
.td-tijdrij { display: flex; align-items: center; gap: 14px; margin-top: 10px; flex-wrap: wrap; }
.td-tijdblok { display: flex; flex-direction: column; flex: none; }
.td-dagnaam { font-size: 11.5px; color: var(--zacht); line-height: 1.2; }
.td button.td-tijdgroot { flex: none; min-width: 64px; padding: 0; border: 0; background: none; color: var(--tekst); font: inherit;
  font-size: 22px; font-weight: 300; font-variant-numeric: tabular-nums; cursor: pointer; text-align: left; }
.td button.td-tijdgroot.leeg { color: var(--zacht); font-size: 15px; }
.td-liniaal { position: relative; flex: 1; min-width: 150px; height: 40px; cursor: pointer; touch-action: none; outline: none; }
.td-liniaal:focus-visible { outline: 2px solid var(--donker); outline-offset: 2px; border-radius: 6px; }
.td-spoor { position: absolute; left: 0; right: 0; top: 14px; height: 1px; background: var(--td-rand); }
.td-spoor i { position: absolute; top: 0; width: 1px; height: 6px; margin-left: -.5px; background: var(--td-rand); }
.td-uur { position: absolute; top: 24px; transform: translateX(-50%); font-size: 11px; font-weight: 400; color: var(--zacht); font-variant-numeric: tabular-nums; }
.td-greep { position: absolute; top: 2px; width: 3px; height: 24px; margin-left: -1.5px; border-radius: 2px; background: var(--donker); }
.td-greep::before { content: ""; position: absolute; left: -4px; top: -4px; width: 11px; height: 11px; border-radius: 50%; background: var(--donker); }
.td-rij3 { margin-top: 10px; flex-wrap: nowrap; }
.td-seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: #ededeb; color: var(--zacht); }
.td-seg .td-belletje { margin: 0 4px 0 8px; flex: none; }
.td-seg label { margin: 0; position: relative; }
.td-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.td-seg label span { display: block; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.td-seg label:has(input:checked) span { background: #fff; color: var(--tekst); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.td-seg label:has(input:focus-visible) span { outline: 2px solid var(--donker); }
.td-bel.uit { opacity: .45; }
.td button[type=submit].td-opslaan { width: auto; min-height: 0; margin: 0 0 0 auto; padding: 4px 16px; border: 0; border-radius: 999px; background: var(--donker); color: #fff;
  font: inherit; font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; cursor: pointer; }
.td button[type=submit].td-opslaan:hover { background: #3a3d40; }
.td-fout { margin: 4px 0 0; color: var(--laat); font-size: 12px; }
.td-lijst { margin: 2px 0 0; padding: 0; list-style: none; }
.td-regel { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px solid #f0f0ee; }
.td-vinkform { flex: none; margin: 0; }
.td button[type=submit].td-rondje, .ag-blok.todo button[type=submit].ag-tdvink { display: block; width: 15px; height: 15px;
  min-height: 0; margin: 0; padding: 0; border: 1.5px solid var(--donker); border-radius: 50%; background: var(--pagina);
  cursor: pointer; transform: translateY(2px); transition: background .15s; }
.td button[type=submit].td-rondje:hover, .ag-blok.todo button[type=submit].ag-tdvink:hover { background: var(--vlak-2); }
.td .td-regel.gedaan button[type=submit].td-rondje,
.ag-blok.todo.gedaan button[type=submit].ag-tdvink { background: var(--donker); }
.td .td-rondje-uit, .ag-blok.todo .ag-tdvink-uit { display: block; flex: none; box-sizing: border-box; width: 15px; height: 15px; border: 1.5px solid var(--donker);
  border-radius: 50%; background: var(--pagina); transform: translateY(2px); }       /* Bekijk als: een rondje zonder knop */
.ag-blok.todo .ag-tdvink-uit { width: 11px; height: 11px; transform: translateY(1px); }
.td .td-regel.gedaan .td-rondje-uit { background: var(--donker); }
.ag-blok.todo.gedaan .ag-tdvink-uit { background: var(--donker); }
.td-tekst { flex: 1; min-width: 0; overflow-wrap: anywhere; cursor: text; }
.td-regel.gedaan .td-tekst { color: var(--zacht); text-decoration: line-through; cursor: default; }
.td input.td-bewerkveld { width: 100%; margin: -2px 0; padding: 1px 4px; border: 1px solid var(--donker); border-radius: 6px;
  font: inherit; font-size: 14px; }
.td-tijdchip { flex: none; padding: 0 8px; border: 1px solid var(--td-rand); border-radius: 999px; color: var(--zacht);
  font-size: 11.5px; white-space: nowrap; }
.td-tijdchip.laat { color: var(--laat); border-color: #e8c4c1; }
.td-meer { position: relative; flex: none; }
.td-meer > summary { padding: 0 4px; color: var(--zacht); list-style: none; cursor: pointer; opacity: .4; }
.td-meer > summary::-webkit-details-marker { display: none; }
.td-regel:hover .td-meer > summary, .td-meer[open] > summary, .td-meer > summary:focus-visible { opacity: 1; }
.td-menu { position: absolute; top: 22px; right: 0; z-index: 30; display: flex; flex-direction: column; gap: 8px;
  width: 240px; max-width: calc(100vw - 48px); padding: 12px; border: 1px solid var(--td-rand); border-radius: 12px;
  background: var(--pagina); box-shadow: 0 10px 26px rgba(0, 0, 0, .1); }
.td-menu form { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.td label.td-mveld { display: flex; flex-direction: column; gap: 2px; margin: 0; font-size: 11px; }
.td .td-mveld input, .td .td-mveld select { width: 100%; padding: 4px 8px; border: 1px solid var(--td-rand);
  border-radius: 8px; background: var(--pagina); font: inherit; font-size: 13px; }
.td-mrij { display: flex; gap: 6px; }
.td-mrij .td-mveld { flex: 1; min-width: 0; }
.td-menu button[type=submit].knop { width: auto; margin: 0; }
.td-menu button[type=submit].td-weg { border: 1px solid var(--td-rand); background: var(--pagina); color: var(--laat); }
.td-leeg { margin: 8px 0 2px; color: var(--zacht); font-size: 12.5px; }
.td-klaarregel { margin: 6px 0 0; color: var(--zacht); font-size: 12px; }
.td-klaarregel a { color: inherit; }
.td-toon { display: none; }
.td-zonder-gedaan .td-regel.gedaan, .td-zonder-gedaan .td-verberg, .td-zonder-gedaan .td-meer-gedaan { display: none; }
.td-zonder-gedaan .td-toon { display: inline; }

/* De maat van "+ n" en de blokjes per dag kiezen op de breedte van het vak (zie boven, "Groter dagvak"). */
@container agenda (min-width: 561px) and (max-width: 1399px) {
  .ag-maand .ag-dagblokken:has(> .ag-meer-middel) > .ag-blok:nth-child(n+4),
  .ag-weekbeeld .ag-dagblokken:has(> .ag-meer-middel) > .ag-blok:nth-child(n+5) { display: none; }
}
@container agenda (min-width: 1400px) {
  .ag-meer-middel { display: none; }
  .ag-meer-breed { display: inline; }
}
@container agenda (max-width: 560px) {
  .ag-meer-middel { display: none; }
  .ag-meer-smal { display: inline; }
  .ag-maand .ag-dagblokken:has(> .ag-meer-smal) > .ag-blok:nth-child(n+2),
  .ag-weekbeeld .ag-dagblokken:has(> .ag-meer-smal) > .ag-blok:nth-child(n+4) { display: none; }
}

/* De schakelaar rechts in de widget Agenda en de vakken erachter. */
.ag-rkop { justify-content: flex-start; }
.ag-seg.ag-rseg { margin-left: 0; }
.ag-rseg a b { margin-left: 2px; font-weight: 500; }
.ag-rvak { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ag-rvak[hidden] { display: none; }

/* Een to-do in de agenda: wit met een dunne rand en een rondje (afvinken mag hier ook). */
.ag-blok.todo { display: flex; align-items: baseline; gap: 5px; border-left: 0; background: var(--pagina);
  box-shadow: inset 0 0 0 1px var(--rand); }
.ag-blok.todo:hover { background: var(--pagina); }
.ag-tdform { flex: none; margin: 0; }
.ag-blok.todo button[type=submit].ag-tdvink { width: 11px; height: 11px; transform: translateY(1px); }
.ag-tdtekst { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ag-dag .ag-blok.todo.ag-extra { display: none; }
.ag-cat.todo i { border: 1.5px solid var(--donker); border-radius: 50%; background: none; }
.zonder-todo .ag-blok.todo { max-height: 0; margin: -5px 0 0; padding-top: 0; padding-bottom: 0; opacity: 0;
  pointer-events: none; }
@container agenda (max-width: 560px) {
  .ag-maand .ag-dag .ag-blok.todo { background: none; box-shadow: inset 0 0 0 1.5px var(--donker); }
}

/* Komt eraan: een project zonder gewenst klaar op verwacht klaar, grijs met ±. */
.ag-rij.verwacht .ag-tel { background: var(--vlak); }
.ag-rij.verwacht .ag-tel b { color: var(--zacht); font-size: 15px; }