/* De fabriek en de inlogcodes (spec 2026-10-09, fabriek eerste toegang). Een eigen bestand naast corpus.css, met
   dezelfde tokens. */

/* De rode melding: een account dicht door het dagslot (het dashboard van beheer, Beheer › Inlogcodes). */
.melding-rood { padding: 10px 14px; border-radius: var(--hoek); background: var(--laat-vlak); color: var(--laat);
  margin: 0 0 20px; }
.melding-rood a { color: var(--laat); font-weight: 500; }
section.paneel.melding-rood { padding: 0; }
.teller.rood { background: var(--laat); color: #fff; }
code.inlogcode { font-size: 18px; letter-spacing: .15em; }

/* Het scherm van de fabriek. */
.fabriek-lijst td, .fabriek-lijst th { padding: 8px 10px; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.fabriek-stand { display: inline-block; padding: 1px 9px; border-radius: 9px; background: var(--vlak-2); font-size: 12px; }
.fabriek-stand.beurt { background: var(--donker); color: #fff; }
/* De indeling (spec 2026-10-10): één kolom op een telefoon, twee vanaf ±900 px; een paneel met `breed` neemt de volle
   breedte (het model, de aanzichten, de details, het pakket). */
.fabriek-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sj-ruimte); margin-top: var(--sj-ruimte);
  align-items: start; }
@media (min-width: 900px) { .fabriek-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fabriek-raster > .paneel { margin: 0; min-width: 0; }
.fabriek-raster > .paneel.breed { grid-column: 1 / -1; }
/* De tab Print files (fabriek/_tab_files.html): de schakelaar Parts · Plates, de tegels en de kaarten over de volle breedte
   (29 okt 2026, Valentijn): in één kolom van het raster stonden er maar twee kaarten naast elkaar en bleef rechts leeg. */
.fabriek-raster > .fp-printfiles { grid-column: 1 / -1; min-width: 0; }
.fabriek-aanzichten { display: flex; gap: 8px; flex-wrap: wrap; }
.fabriek-aanzichten figure { margin: 0; flex: 1 1 140px; background: var(--grijsvlak); border-radius: var(--hoek);
  overflow: hidden; text-align: center; }
.fabriek-aanzichten img { display: block; width: 100%; height: auto; }
.fabriek-aanzichten figcaption { font-size: 12px; color: var(--zacht); padding: 4px; background: var(--pagina); }
.fabriek-bestanden { list-style: none; padding: 0; margin: 0; }
.fabriek-bestanden li { padding: 6px 0; border-bottom: 1px solid var(--lijn); display: flex; gap: 10px;
  justify-content: space-between; flex-wrap: wrap; }
.fabriek-bestanden .meta { white-space: normal; }
.fabriek-brief { white-space: pre-wrap; margin: 0 0 8px; }
.fabriek-acties { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* De vragen: een draadje per item. */
.draad { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 8px; }
.draad li { padding: 8px 12px; border-radius: var(--hoek); background: var(--vlak); max-width: 85%; }
.draad li.van-fabriek { align-self: flex-start; }
.draad li.van-ons { align-self: flex-end; background: var(--vlak-2); }
.draad .wie { font-size: 12px; color: var(--zacht); display: block; }
.draad p { margin: 2px 0 0; white-space: pre-wrap; }
.draad-form textarea { width: 100%; min-height: 70px; box-sizing: border-box; }

/* De interne pagina Fabriek: delen per bestand. */
.delen-map { margin: 12px 0 4px; font-size: var(--sj-kop); text-transform: uppercase; letter-spacing: .08em;
  color: var(--zacht); display: flex; justify-content: space-between; }
.delen-lijst { list-style: none; padding: 0; margin: 0; }
.delen-lijst li { padding: 4px 0; }
.delen-lijst label { display: inline-flex; gap: 8px; align-items: center; }
.fabriek-vragen { margin: 0 0 20px; }

/* De verbindingstest. */
.verbinding-uitslag { font-size: 20px; margin: 4px 0; }
.verbinding-uitslag b { font-weight: 500; }
.verbinding progress { width: 100%; }
.verbinding-log { margin: 16px 0 0; }
.verbinding-log h2 { font-size: var(--sj-kop); text-transform: uppercase; letter-spacing: .08em; color: var(--zacht); margin: 0 0 6px; }
.verbinding-log ul { list-style: none; padding: 0; margin: 0; }
.verbinding-log li { padding: 3px 0; font-variant-numeric: tabular-nums; }
.fabriek-raster label.vinkje { display: inline-flex; gap: 6px; align-items: center; }

/* --- Projecten en poses (spec 2026-10-10) --------------------------------------------------------------------------- */
/* Een knop in de kop, bij bevestigen en in de tabel: niet de donkere knop over de hele breedte van
   button[type=submit]:not(.link) (even specifiek, dus hier erna). */
.fabriek-acties button[type=submit].knop, #bevestigen button[type=submit].knop,
.delen-categorieen button[type=submit].knop, #poses button[type=submit].knop, #standaard button[type=submit].knop {
  width: auto; margin-top: 0; padding: 0 18px; }
#bevestigen button[type=submit].knop:not(.primair), #poses button[type=submit].knop:not(.primair) {
  background: var(--pagina); color: var(--tekst); border: 1px solid var(--rand); }
/* De projectkaart met *n wacht op jullie* en de posekaart met haar stand (fb-wacht, fb-kaartstand) zijn sinds
   fabrieksportaal v2 (spec 2026-10-27, § 2) de kop en de itemkaart van deel 1 (fd-, onderaan). */

/* De drie pillen op een posekaart en in de tabel: donker met ✓ als dat deel klaar is. */
.fb-pillen { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.fb-pil { padding: 2px 9px; border-radius: 999px; background: var(--vlak-2); color: var(--donker); font-size: 11px;
  white-space: nowrap; }
.fb-pil.klaar { background: var(--donker); color: #fff; }
.pkop .fb-pillen { margin-left: auto; }

/* De tracker met drie bolletjes: navigatie én stand, in de stijl van de tracker intern (corpus.css, .tracker). */
.fb-tracker { margin: 0 0 var(--sj-ruimte); padding: 4px 16px 2px; background: var(--pagina); border: 1px solid var(--rand);
  border-radius: var(--hoek); }
.fb-tracker ol { display: flex; margin: 0; padding: 0; list-style: none; }
.fb-stap { position: relative; flex: 1 1 0; min-width: 0; }
.fb-stap::before { content: ""; position: absolute; top: 27px; right: 50%; width: 100%; height: 1.5px;
  background: var(--rand); }
.fb-stap:first-child::before { display: none; }
.fb-stap.klaar + .fb-stap::before { background: var(--donker); }
.fb-stap a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 18px 6px 10px; color: inherit; text-align: center; text-decoration: none; }
.fb-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; }
.fb-stap.klaar .fb-rondje { background: var(--donker); border-color: var(--donker); }
.fb-stap a[aria-current="page"] .fb-rondje { border: 2px solid var(--donker); box-shadow: inset 0 0 0 3px var(--pagina); }
.fb-stap.klaar a[aria-current="page"] .fb-rondje { box-shadow: none; }
.fb-naam { font-size: 12px; }
.fb-stap a[aria-current="page"] .fb-naam { font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.fb-tekst { font-size: 10px; color: var(--zacht); }
.fb-tabs { margin-top: 0; }

/* HBM info en Factory info. */
.fb-brief + .fb-brief { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--lijn); }
.fb-ouder { margin-top: 8px; font-size: 12px; color: var(--zacht); }
.fb-ouder summary { cursor: pointer; }
.fb-ouder .tegels { margin-top: 6px; }
.fb-upload label.knop-label { margin: 0; }
.fb-upload .fb-onderschrift { display: block; flex: 1 1 12rem; margin: 0; }
.fb-upload .fb-onderschrift input { margin: 0; }
.fabriek-raster .widget { overflow: visible; }

/* De interne pagina's Fabriek: de keuze per categorie en de tabel per pose. */
.delen-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.delen-cat { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 12px; }
.delen-cat-naam { color: var(--zacht); }
label.delen-keuze { position: relative; display: block; margin: 0; }   /* houdt het verborgen label binnen de tabel */
.delen-keuze select { min-width: 0; padding: .35rem .5rem; font-size: 12px; }
.delen-keuze.aan select { border-color: var(--donker); }
.delen-tabel th, .delen-tabel td { vertical-align: top; }
.delen-tabel td { padding: 8px 6px; }
.delen-tabel .delen-keuze select { width: auto; max-width: 150px; }
.delen-bestanden-rij td { padding-top: 0; border-bottom: 1px solid var(--lijn); }
.delen-bestanden-rij summary { cursor: pointer; font-size: 12px; color: var(--zacht); }
.delen-lijst li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 4px 0; }
.delen-stand { color: var(--zacht); }
.delen-lijst li.gedeeld .delen-stand { color: var(--donker); }
.delen-naam { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.delen-naam .meta { white-space: normal; }
.delen-knoppen { display: inline-flex; align-items: center; gap: 8px; }
.delen-knoppen button[type=submit].knop-klein { height: 30px; }
.delen-standaard label.vinkje { display: inline-flex; margin: 0; }
@media (max-width: 550px) {
  .fb-stap a { padding: 16px 2px 8px; }
}
/* De aanzichten altijd drie naast elkaar, ook op een telefoon (spec 2026-10-10). */
.fabriek-aanzichten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* De tabel per pose schuift binnen zijn strook; ook wat visueel verborgen (absoluut) in een cel staat, blijft erbinnen. */
#poses .tabelwrap, .fb-pil { position: relative; }
.delen-tabel td:first-child { min-width: 9rem; }
.delen-tabel td:first-child .muted { overflow-wrap: normal; }
/* De bestanden van een pose klappen open onder zijn rij: links vast in de strook en zo breed als wat je ziet, zodat de
   knoppen niet rechts buiten beeld vallen als de tabel schuift. */
.delen-bestanden-rij details { position: sticky; left: 0; width: min(760px, calc(100vw - 350px)); }
@media (max-width: 900px) {
  .delen-bestanden-rij details { width: calc(100vw - 110px); }
}

/* --- Grote beelden (spec 2026-10-10) ------------------------------------------------------------------------------ */
/* Het model groot bij Briefing: één groot beeld (contain op grijs) en drie kleine kaarten eronder. */
.fb-viewer-groot { margin: 0; }
.fb-viewer-groot[hidden] { display: none; }
.fb-viewer-groot img { display: block; width: 100%; height: min(72vh, 600px); object-fit: contain; border-radius: 8px;
  background: var(--grijsvlak); }
.fb-viewer-groot figcaption { margin-top: 6px; }
.fb-viewer-kanten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.fb-viewer-kant { display: flex; flex-direction: column; gap: 4px; padding: 6px; border: 1px solid var(--rand);
  border-radius: 8px; background: var(--pagina); color: var(--zacht); font-size: 12px; text-align: center;
  text-decoration: none; }
.fb-viewer-kant img { display: block; width: 100%; height: 90px; object-fit: contain; background: var(--grijsvlak);
  border-radius: 6px; }
.fb-viewer-kant.actief { border-color: var(--donker); color: var(--tekst); font-weight: 500; }
/* De foto's per aanzicht en de details: de voetregel met de formulieren, het formulier van het aanzicht dat dicht is weg. */
.fb-upload[hidden] { display: none; }
.fb-fotopaneel .aanzicht-widget { margin-top: 4px; }
.fabriek-raster .detailtegels { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
/* De zipknoppen (spec 2026-10-10, *Zips*): sinds fabrieksportaal v2 op Print files (de kop en From Hans Boodt); het
   oude Printing-pakket met zijn balk, totalen en kaarten is bij het samenvoegen weggehaald. */
a.fb-zipknop { display: inline-flex; align-items: center; width: auto; margin-top: 4px; padding: 0 14px;
  text-decoration: none; }
.fb-zipform { margin: 0; }
.fb-zipform button[type=submit].knop { width: auto; margin: 0; padding: 0 14px; }
.pkop .fb-zipform, .pkop .fb-zipknop { margin-left: 8px; }
.fb-zipknop.bezig { display: inline-flex; gap: 8px; align-items: center; font-size: 12px; color: var(--zacht); }
/* Ronde 6, het klikvlak: een tekstlink in een kolom (test-video) alleen zo breed als zijn tekst. */
.fb-media li > a.meta { align-self: flex-start; }
/* New since your last visit (spec 2026-10-10): een klein donker labeltje; het rode bolletje met ongelezen antwoorden. */
.fb-nieuw { display: inline-block; align-self: flex-start; width: fit-content; margin-left: 6px; padding: 0 6px; border-radius: 4px; background: var(--donker);
  color: var(--pagina); font-size: 10px; font-weight: 500; letter-spacing: .02em; vertical-align: middle; }
.fb-rood { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--laat); color: #fff; font-size: 11px; font-weight: 500; }
/* Technische tests (spec 2026-10-10): een paneel per test, de pogingen met video's, keuren. */
.fb-verplicht { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 4px; background: var(--vlak-2);
  font-size: 10px; font-weight: 500; vertical-align: middle; }
.fb-teststand.approved { color: var(--donker); font-weight: 500; }
.fb-teststand.rejected, .fb-reden b { color: var(--laat); }
.fb-poging { padding: 10px 0; border-top: 1px solid var(--lijn); }
.fb-poging.ingetrokken { opacity: .6; }
.fb-poging-tekst { margin: 4px 0; white-space: pre-wrap; }
.fb-uitslag.failed, .fb-oordeel.rejected { color: var(--laat); }
.fb-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 8px 0 0;
  padding: 0; list-style: none; }
.fb-media li { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fb-media video, .fb-media img { display: block; width: 100%; max-height: 360px; border-radius: 8px; background: #000;
  object-fit: contain; }
.fb-media img { background: var(--grijsvlak); }
.fb-reden { margin: 6px 0 0; }
.fb-keuren textarea { width: 100%; box-sizing: border-box; font: inherit; }
.fb-keuren { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.fb-keuren-knoppen { display: flex; gap: 8px; }
.fb-ontbreekt { padding: 2px 9px; border-radius: 9px; background: var(--let-vlak); color: var(--let); font-size: 12px; }
.fb-ontbreekt a { color: inherit; }
/* Van de fabriek (intern, spec 2026-10-10). */
.vdf .mapkop { margin: 14px 0 6px; }
.vdf .mapkop:first-of-type { margin-top: 0; }
.vdf-nieuw { margin: 0 0 8px; }
.vdf-nieuw .fb-nieuw { margin-left: 0; font-size: 11px; padding: 1px 8px; }
.vdf-test + .vdf-test { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--lijn); }
.vdf-test > p { margin: 0 0 4px; }
/* De snelle vraag (spec 2026-10-10): een vaste knop rechtsonder die een klein vak opent (een <details>). */
.fb-vraagknop { position: fixed; right: 16px; bottom: 16px; z-index: 40; max-width: min(360px, calc(100vw - 32px)); }
/* Op de telefoon boven de onderbalk (fixgolf ronde 4; --onderbalk-hoogte uit telefoon.css), en het open vak past tussen
   de topbalk en de knop, met een eigen scroll. Zonder onderbalk zoals hierboven. */
html.tel:has(.onderbalk) .fb-vraagknop { bottom: calc(var(--onderbalk-hoogte) + env(safe-area-inset-bottom) + 12px); }
html.tel .fb-vraagknop[open] .fb-vraagvak {
  max-height: calc(100dvh - 52px - var(--onderbalk-hoogte) - env(safe-area-inset-bottom) - 84px); overflow-y: auto;
}
.fb-vraagknop > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
  padding: 10px 16px; border-radius: 999px; background: var(--donker); color: var(--pagina); cursor: pointer;
  font-weight: 500; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); float: right; }
.fb-vraagknop > summary::-webkit-details-marker { display: none; }
.fb-vraagknop[open] > summary { margin-bottom: 8px; }
.fb-vraagvak { clear: both; display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid var(--rand);
  border-radius: var(--hoek); background: var(--pagina); box-shadow: 0 6px 24px rgba(0, 0, 0, .18); }
.fb-vraagvak label { margin: 0; }
.fb-vraagvak textarea, .fb-vraagvak select { width: 100%; box-sizing: border-box; font: inherit; }
.fb-vraagvak-voet, .draad-voet { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
.fb-vraagvak button[type=submit].knop { width: auto; margin: 0; padding: 0 18px; }
.fb-vraagplek { margin: 0; }
.fb-vraaglink { font-size: 11px; color: var(--zacht); }
.fb-vraagregel { margin: 4px 0 0; }
/* Feedback F-0005: een klein vraagteken bij elk veld van de aanvraag en elke regel hardware (Vraag hierover). */
.fp-vraagveld {
  display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 4px;
  border: 1px solid var(--rand); border-radius: 50%; font-size: 11px; line-height: 1; color: var(--zacht);
  text-decoration: none; vertical-align: 1px;
}
.fp-vraagveld:hover, .fp-vraagveld:focus-visible { color: var(--tekst); border-color: var(--zacht); }
@media (hover: none) { .fp-vraagveld { width: 22px; height: 22px; } }
/* De add-ons voor de fabriek (31 okt 2026, fabriek/_addons.html): onder de aanvraag, alleen lezen, per regel een ?. */
.fp-addons { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rand); }
.fp-addons-kop { margin: 0 0 4px; font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--zacht); }
.fp-addon { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--rand); font-size: 13px; }
.fp-addons-kop + .fp-addon { border-top: 0; }
.fp-addon-n { flex: none; min-width: 32px; color: var(--zacht); }
.fp-addon-naam { min-width: 0; overflow-wrap: anywhere; }
.fp-addon .fp-vraagveld { margin-left: auto; flex: none; }
.fp-addon-leeg { margin: 4px 0 0; }
.draad-plek { display: block; font-size: 11px; }
.draad-plek a { color: var(--zacht); }
.draad-foto img { display: block; max-width: 220px; max-height: 220px; margin-top: 6px; border-radius: 6px; }
.snel-antwoord { margin-top: 6px; }
.snel-antwoord summary { cursor: pointer; font-size: 12px; }
.snel-antwoord .draad-form { margin-top: 6px; }
/* Zodat de vaste knop niets onderaan bedekt. */
body:has(.fb-vraagknop) main { padding-bottom: 80px; }
.vraag-regel { margin: 6px 0 0; font-size: 12px; overflow-wrap: anywhere; }
/* Spec 2026-10-11: een eigen upload weghalen - de bevestiging. */
.fb-weghalen { max-width: 520px; }
.fb-weghalen-beeld { display: block; max-width: 100%; max-height: 50vh; margin: 8px 0; border-radius: 8px;
  object-fit: contain; background: var(--grijsvlak); }
/* Spec 2026-10-11 (§ 7.1): een lijst in Beheer met een greep om te slepen; zonder JavaScript ↑ ↓. Het uitlegveld is even
   breed als de naam, in het gewone lettertype. */
.beheerlijst { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.beheerregel { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--hoek);
  background: var(--vlak); }
.beheerregel.uit { opacity: .6; }
.beheerform { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; margin: 0; }
.beheer-naam, .beheer-uitleg { width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; }
.beheer-vinkjes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.greep { flex: none; padding: 6px 2px; color: var(--zacht); cursor: grab; user-select: none; letter-spacing: -2px; }
.sleepbaar .greep-pijlen { display: none; }
.greep-pijlen { display: flex; flex-direction: column; margin: 0; }
.greep-pijlen button { padding: 0 4px; text-decoration: none; }

/* --- Geen antwoord nodig ✓ en de melding in de topbalk (spec 2026-10-11, § 7.6) --- */
button.knop-geen-antwoord { font-size: 12px; color: var(--zacht); }
button.knop-geen-antwoord:hover { color: var(--tekst); }
.snel-regel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.snel-regel .snel-antwoord { flex: 1 1 16rem; }
.snel-sluiten, .fbk-sluiten, .draad-sluiten, .melding-sluiten { margin: 0; }
.fbk-sluiten { grid-column: 1 / -1; }
.draad-sluiten { margin: 4px 0 8px; text-align: right; }
.draad-af { display: block; font-size: 11px; color: var(--zacht); }
.topbar { gap: 20px; }
.melding { position: relative; margin-right: auto; }
.melding-pil { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border: 1px solid var(--lijn);
  border-radius: 999px; background: var(--pagina); color: var(--tekst); font-size: 12px; text-decoration: none; }
.melding-pil:hover, .melding-pil[aria-expanded="true"] { border-color: var(--zacht); }
/* Spec 2026-10-26 (mockup § 1): rustig - een grijze stip, bruin alleen bij een verplichte soort; een maantje in de stille
   uren. Geen gekleurde rand meer (voorkeur van de eigenaar: subtiel). */
.melding-stip { width: 7px; height: 7px; border-radius: 50%; background: var(--zacht); }
.melding-stip.verplicht { background: var(--laat); }
.melding-pil:not(.heeft-open) { color: var(--zacht); }
.melding-maan { margin-left: -2px; color: var(--zacht); font-size: 12px; }
/* Het paneel opent gecentreerd en altijd helemaal in beeld (fixgolf ronde 4): vast, horizontaal in het midden van het
   venster, onder de pil (`--mld-top`: melding.js meet de onderkant van de pil, ook met de kijkbalk erboven; zonder
   JavaScript is de pil een link). Op de telefoon (en in de telefoonlaag) gelijke marges links en rechts, boven de
   onderbalk, met een eigen scroll. */
.melding-paneel { position: fixed; top: var(--mld-top, 64px); left: 50%; transform: translateX(-50%); z-index: 50;
  box-sizing: border-box; width: min(460px, calc(100vw - 32px));
  max-height: min(70vh, calc(100dvh - var(--mld-top, 64px) - 16px)); overflow: auto; padding: 12px 14px;
  background: var(--pagina); border: 1px solid var(--lijn); border-radius: var(--hoek); box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
@media (max-width: 640px) {
  .melding-paneel { left: 16px; right: 16px; width: auto; transform: none;
    max-height: calc(100dvh - var(--mld-top, 64px) - var(--onderbalk-hoogte, 0px) - env(safe-area-inset-bottom) - 16px); }
}
html.tel .melding-paneel { left: 16px; right: 16px; width: auto; transform: none;
  max-height: calc(100dvh - var(--mld-top, 64px) - var(--onderbalk-hoogte, 0px) - env(safe-area-inset-bottom) - 16px); }
.melding-kop { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-size: 13px; }
.melding-kop a { font-size: 12px; }
.melding-vraag { padding: 10px 0; border-top: 1px solid var(--lijn); }
.melding-vraag p { margin: 0 0 6px; }
.melding-tekst { overflow-wrap: anywhere; }
.melding-antwoord textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; }
.melding-knoppen { display: flex; justify-content: flex-end; margin-top: 4px; }
.melding-sluiten { text-align: right; margin-top: 2px; }

/* Spec 2026-10-12 (§ 4): de persoonlijke meldingen in de pil - per groep, ongelezen vet, opgelost grijs met een vinkje. */
.mld-groep { margin-top: 6px; }
.mld-groepkop { display: flex; align-items: center; gap: 6px; margin: 8px 0 2px; font-size: 12px; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase; color: var(--zacht); }
.mld-n { min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--vlak); color: var(--tekst); font-size: 11px;
  text-align: center; letter-spacing: 0; }
/* Het belletje (mockup § 6): drie standen in een popover; doorgestreept als je het zelf uit zette. */
.volgbel { position: relative; display: inline-block; }
.volgbel > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.volgbel > summary::-webkit-details-marker { display: none; }
.volgbel .icoon { width: 15px; height: 15px; }
.volg-niet .volgbel-knop .icoon { opacity: .6; }
.volg-niet .volgbel-knop { text-decoration: line-through; color: var(--zacht); }
.volgbel .volgknop { position: absolute; right: 0; z-index: 40; display: flex; flex-direction: column; gap: 2px; width: 17rem;
  margin-top: 4px; padding: 6px; background: var(--pagina); border: 1px solid var(--lijn); border-radius: var(--hoek);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
.volgbel .volgknop button { display: block; width: 100%; padding: 6px 8px; border: 0; border-radius: 6px; background: none;
  text-align: left; font: inherit; color: var(--tekst); cursor: pointer; }
.volgbel .volgknop button small { display: block; color: var(--zacht); font-size: 12px; }
.volgbel .volgknop button[aria-pressed="true"] { background: var(--vlak); }
html.tel .volgbel-tekst { display: none; }
.mld-regel.mld-ongelezen .meta b { font-weight: 500; }
.mld-regel.mld-opgelost { color: var(--zacht); }
.mld-regel.mld-opgelost a { color: var(--zacht); }
.mld-door { display: flex; align-items: center; gap: 4px; margin: 0; font-size: 12px; }
.mld-door .icoon, .mld-icoon .icoon { width: 14px; height: 14px; }
.mld-icoon { display: inline-flex; vertical-align: -2px; margin-right: 4px; }
.mld-weg { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--lijn); font-size: 13px; }
.mld-weg summary { cursor: pointer; color: var(--zacht); }
.mld-pagina .melding-inhoud { max-width: 640px; }
/* Spec 2026-10-26 en 2026-10-27 (variant C, mockup bijlagen/meldingen-beheer-v2/): Beheer › Meldingen per groep een
   inklapbare tabel; keuzelijsten worden chips met een zoekbare lijst (static/js/meldingen_beheer.js), zonder script
   gewone keuzelijsten. Geen .tabelwrap: die zou de lijst onder een chip afknippen; smal worden de rijen blokken. */
.mld-werkbalk { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px;
  margin: 0 0 6px; }
.mld-werkbalk p { margin: 0; font-size: 12px; }
.mld-werkbalk b { font-weight: 500; color: var(--tekst); }
.mld-alles { background: none; border: 0; padding: 0; font: inherit; font-size: 12px; color: var(--zacht);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.mld-grp { border-top: 1px solid var(--rand); }
.mld-grp > summary { display: flex; align-items: center; gap: 10px; padding: 11px 4px; cursor: pointer; list-style: none; }
.mld-grp > summary::-webkit-details-marker { display: none; }
.mld-grp > summary::before { content: "▾"; width: 14px; color: var(--zacht); font-size: 11px; transition: transform .15s; }
.mld-grp:not([open]) > summary::before { transform: rotate(-90deg); }
.mld-grp-naam { font-size: var(--sj-kop); letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
  color: var(--zacht); }
.mld-grp-n { font-size: 12px; color: var(--zacht); }
.mld-grp-w { margin-left: auto; font-size: 12px; color: var(--let); }
.mld-tabel { width: 100%; table-layout: fixed; margin-bottom: 10px; }
.mld-tabel td, .mld-tabel th { text-align: left; vertical-align: top; }
.mld-tabel :is(td, th).c { text-align: center; }
.mld-tabel thead th { font-size: var(--sj-kop); letter-spacing: .08em; text-transform: uppercase; font-weight: 500;
  color: var(--zacht); }
.mld-k-soort { width: 14%; }
.mld-k-bereik { width: 12.5rem; }
.mld-k-bron { width: 17%; }
.mld-k-pers { width: 14%; }
.mld-k-vink { width: 6.5rem; }
.mld-tabel th[scope="row"] { font-weight: 400; background: transparent; }
.mld-soort { display: block; font-weight: 500; }
.mld-op-slot, .mld-op-slot .mld-soort { color: var(--zacht); }
.mld-onderwerp { display: block; margin: 0 0 2px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--zacht); }
.mld-blok + .mld-blok { margin-top: 8px; }
.mld-alle { margin: 0 0 6px; font-size: 12px; }
.mld-bundel { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; font-size: 12px; font-weight: 400;
  color: var(--zacht); }
.mld-bundel input { width: 4rem; }
.mld-noot { font-size: 12px; }
/* Het bereik als schakelaar met twee standen (gewone keuzerondjes, ook zonder script). */
.mld-seg { display: inline-flex; border: 1px solid var(--rand); border-radius: var(--hoek-knop); overflow: hidden;
  background: var(--pagina); }
.mld-seg label { position: relative; display: block; margin: 0; padding: 0; cursor: pointer; }
.mld-seg label + label { border-left: 1px solid var(--rand); }
.mld-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mld-seg span { display: block; padding: 3px 9px; font-size: 12px; color: var(--zacht); white-space: nowrap; }
.mld-seg input:checked + span, .mld-seg-slot span { background: var(--donker); color: var(--pagina); }
.mld-seg input:focus-visible + span { outline: 2px solid var(--donker); outline-offset: -2px; }
/* De waarschuwing (brons, subtiel; de voorkeur van de eigenaar: geen balken). */
.mld-wrn { position: relative; margin: 6px 0 0; padding-left: 12px; font-size: 12px; font-weight: 400;
  line-height: 1.4; color: var(--let); }
.mld-wrn::before { content: ""; position: absolute; left: 0; top: .45em; width: 6px; height: 6px; border-radius: 50%;
  background: var(--let); }
.mld-wrn small { display: block; color: var(--let); }
.mld-wrn[hidden] { display: none; }
/* De ⓘ bij de bronnen: een popover (data-wegtikken). */
.mld-tip { position: relative; display: inline-block; vertical-align: middle; margin-left: 4px; }
.mld-tip > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 16px;
  height: 16px; border: 1px solid var(--lijn); border-radius: 50%; background: var(--pagina); color: var(--zacht);
  font-size: 10px; line-height: 1; cursor: help; text-transform: none; letter-spacing: 0; }
.mld-tip > summary::-webkit-details-marker { display: none; }
.mld-tipbox { position: absolute; z-index: 60; left: -8px; top: 22px; width: min(320px, 80vw); padding: 10px 12px;
  border-radius: var(--hoek); background: var(--donker); color: var(--pagina); font-size: 12px; line-height: 1.45;
  font-weight: 400; text-transform: none; letter-spacing: 0; }
.mld-tipbox dl { margin: 0; }
.mld-tipbox dt { font-weight: 500; }
.mld-tipbox dd { margin: 0 0 6px; }
/* Keuzelijsten met chips (static/js/meldingen_beheer.js). */
.mld-ms { width: 100%; max-width: 100%; font: inherit; font-size: 12px; }
.mld-ms-vak { position: relative; }
.mld-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.mld-chip-k { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 3px 2px 9px;
  border-radius: 999px; background: var(--vlak-2); font-size: 12px; }
.mld-chip-k > span { min-width: 0; line-height: 1.35; overflow-wrap: normal; }
.mld-chip-bijzonder { background: var(--vlak); border: 1px dashed var(--lijn); }
.mld-chip-weg { width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: none;
  color: var(--zacht); font-size: 13px; line-height: 1; cursor: pointer; }
.mld-chip-weg:hover, .mld-chip-weg:focus-visible { background: var(--rand); color: var(--tekst); }
.mld-leeg { font-size: 12px; color: var(--zacht); }
.mld-erbij { padding: 2px 10px; border: 1px dashed var(--lijn); border-radius: 999px; background: var(--pagina);
  color: var(--zacht); font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
.mld-erbij:hover, .mld-erbij:focus-visible { border-color: var(--donker); color: var(--tekst); }
.mld-lijst { position: absolute; z-index: 40; top: 100%; left: 0; width: 280px; max-width: 80vw; margin-top: 5px;
  padding: 8px; border: 1px solid var(--rand); border-radius: var(--hoek); background: var(--pagina);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .12); }
.mld-zoek { width: 100%; height: 30px; margin-bottom: 6px; padding: 0 9px; border: 1px solid var(--rand);
  border-radius: var(--hoek-knop); font: inherit; }
.mld-opties { max-height: 230px; overflow: auto; }
.mld-optie { display: flex; width: 100%; gap: 9px; align-items: center; padding: 5px 6px; border: 0;
  border-radius: var(--hoek-knop); background: none; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.mld-optie[hidden] { display: none; }
.mld-optie:hover, .mld-optie:focus-visible { background: var(--vlak); }
.mld-optie small { margin-left: auto; font-size: 11px; color: var(--zacht); }
.mld-bx { display: flex; flex: none; width: 15px; height: 15px; align-items: center; justify-content: center;
  border: 1px solid var(--lijn); border-radius: 4px; font-size: 10px; color: transparent; }
.mld-optie.aan .mld-bx { background: var(--donker); border-color: var(--donker); color: var(--pagina); }
.mld-geen { margin: 4px 6px; font-size: 12px; }
@media (max-width: 900px) {
  .mld-tabel, .mld-tabel tbody, .mld-tabel tr, .mld-tabel td, .mld-tabel th { display: block; width: auto; }
  .mld-tabel thead, .mld-tabel colgroup { display: none; }
  .mld-tabel tr { padding: 8px 0; border-top: 1px solid var(--rand); }
  .mld-tabel :is(td, th) { border: 0; padding: 4px 4px; }
  .mld-tabel :is(td, th).c { display: inline-flex; flex-direction: row-reverse; gap: 6px; align-items: center;
    margin-right: 14px; text-align: left; }
  .mld-tabel td.c[data-kop]::before { display: inline; letter-spacing: 0; text-transform: none; font-size: 12px; }
  .mld-tabel td[data-kop]::before { content: attr(data-kop); display: block; font-size: 11px; letter-spacing: .06em;
    text-transform: uppercase; color: var(--zacht); }
}
/* Waarom krijg ik dit? (mockup § 2): één grijze regel onder de melding; de items van een projectmelding (§ 3). */
.mld-reden { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 2px 0 0; font-size: 12px; color: var(--zacht); }
.mld-reden form { display: inline; margin: 0; }
.mld-items { margin: 2px 0 4px; padding: 0; list-style: none; font-size: 12px; }
.mld-items li { display: inline; }
.mld-items li + li::before { content: " · "; color: var(--zacht); }
/* Spec § 15: onderwerp wijzigen en doorsturen onder het draadje (intern). */
.fb-onderwerp { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; font-size: 13px; }
.fb-onderwerp-form { display: flex; align-items: center; gap: 6px; margin: 0; }

/* Spec 2026-10-12 (§ 1): de kijkmodus - een vaste balk bovenaan, en zonder JavaScript zijn knoppen in een formulier dat
   iets opslaat niet te klikken (de server weigert ze toch). */
.kijkbalk { position: sticky; top: 0; z-index: 100; grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 4px 16px; padding: 8px 16px; background: #8a5a14; color: #fff; font-size: 14px; }
.kijkbalk form { margin: 0; }
/* Review K1 (fixgolf 2): de balk is de eerste rij van het raster over de volle breedte; de zijbalk begint eronder en
   blijft eronder staan bij het scrollen (`--kijkbalk`: de hoogte van de balk). Op de telefoon scrolt de balk mee weg,
   zodat hij de rij knoppen van de zijbalk niet bedekt. */
body.app.kijkmodus { --kijkbalk: 40px; grid-template-rows: auto var(--kophoogte, 48px) 1fr; }
body.app.kijkmodus .kijkbalk { grid-row: 1; box-sizing: border-box; min-height: var(--kijkbalk); }
body.app.kijkmodus .zijbalk { grid-row: 2 / -1; top: var(--kijkbalk); height: calc(100vh - var(--kijkbalk));
  height: calc(100dvh - var(--kijkbalk)); }
@media (max-width: 900px) {
  body.app.kijkmodus { grid-template-rows: auto auto auto 1fr; }
  body.app.kijkmodus .kijkbalk { position: static; }
  body.app.kijkmodus .zijbalk { grid-row: auto; top: 0; height: auto; }
}

/* Ronde 5, § 8: Bekijk als rol of gebruiker - groot, ook op de telefoon. */
.kijkbalk.groot { font-size: 1.15rem; padding-top: .9rem; padding-bottom: .9rem; }
.kijkbalk.groot b { font-weight: 500; }
.bekijk-lijst { list-style: none; margin: 0; padding: 0; }
.bekijk-lijst li { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between; align-items: center; padding: .45rem 0; border-bottom: 1px solid var(--lijn, #e5e5e5); }
.kijkbalk .link { color: #fff; text-decoration: underline; font-weight: 500; }
body.kijkmodus form[method="post"] button, body.kijkmodus form[method="post"] input[type="submit"],
body.kijkmodus form[method="post"] .knop-label { pointer-events: none; opacity: .5; }
body.kijkmodus .kijkbalk form[method="post"] button { pointer-events: auto; opacity: 1; }
.kijkknop { display: inline-flex; margin: 0; }
.kijkknop .icoon { width: 16px; height: 16px; vertical-align: -3px; }

/* Spec 2026-10-12 (§ 14): tabbladen per poging met de stand als gekleurde pil en het
   bronzen label van een ingetrokken poging (intern). */
.fb-pogingtabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.fb-pogingtab { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--lijn);
  border-radius: 999px; color: inherit; text-decoration: none; font-size: 13px; }
.fb-pogingtab.actief { border-color: var(--tekst, #1f2328); background: var(--vlak); }
.fb-pogingpil { padding: 1px 8px; border-radius: 999px; font-size: 12px; background: var(--vlak-2); }
.fb-pogingpil.open { background: #f3e7d3; color: #8a5a14; }
.fb-pogingpil.approved { background: #e3f0e6; color: #2f6b3e; }
.fb-pogingpil.rejected { background: var(--laat-vlak); color: var(--laat); }
.fb-pogingpil.withdrawn { background: #efe6da; color: #8a5a14; }
.fb-ingetrokken { display: inline-block; margin: 4px 0; padding: 2px 10px; border-radius: 999px; background: #efe6da;
  color: #8a5a14; font-size: 12px; }
.fb-poging.ingetrokken { opacity: 1; }

/* Ronde 4 aanpassingen (spec 2026-10-12, *Technische tests als kaarten*): de tests als kaarten in de vorm van de
   projectkaarten (.kaart, .kaart-vlak …) met Snel, en de testpagina (templates/fabriek/test.html). Voorvoegsel .ft-;
   .fb-stap blijft van de tracker. */
.ft-paneel .pkop { flex-wrap: wrap; }
.ft-samen { margin-left: auto; font-size: 12px; color: var(--zacht); }
.ft-samen b { color: var(--tekst); font-weight: 500; }
.kaarten.ft-kaarten { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; align-items: start; }
.ft-kaart { background: var(--pagina); }
.ft-vlak { height: auto; aspect-ratio: 16 / 10; overflow: hidden; }
.ft-vlak video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.ft-vlak.ft-leeg { background: repeating-linear-gradient(45deg, var(--vlak) 0 8px, var(--pagina) 8px 16px);
  border: 1.5px dashed var(--rand); }
.ft-leegtekst { font-size: 12px; color: var(--zacht); text-align: center; padding: 0 16px; }
.ft-speel { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: #1d1f2180; }
.ft-speel::after { content: ""; position: absolute; left: 18px; top: 14px; border-left: 14px solid #fff;
  border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.ft-speel.klein { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
.ft-speel.klein::after { left: 8px; top: 6px; border-left-width: 8px; border-top-width: 5px; border-bottom-width: 5px; }
.ft-meer { position: absolute; right: 10px; bottom: 10px; padding: 1px 8px; border-radius: 999px; background: #1d1f21b3;
  color: #fff; font-size: 11px; }
.ft-pil { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--vlak-2); color: var(--donker);
  font-size: 11px; white-space: nowrap; }
.ft-pil.review { background: #e8eef7; color: #2f5f9e; }
.ft-pil.approved { background: #e3f0e6; color: #2f6b3e; }
.ft-pil.rejected { background: var(--laat-vlak); color: var(--laat); }
.ft-vlak .ft-pil { position: absolute; left: 10px; bottom: 10px; }
.ft-kaart .kaart-tekst h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 16px; }
.ft-verplicht { padding: 1px 7px; border: 1px solid var(--rand); border-radius: 999px; font-size: 10px; font-weight: 400;
  letter-spacing: .06em; text-transform: uppercase; color: var(--zacht); }
.ft-kaart .kaart-sub { margin: 0 0 4px; }
.ft-uitleg { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ft-reden, .ft-pg-reden { color: var(--laat); }

/* Snel (Quick): een <details> onderaan de kaart; alleen die kaart klapt uit. */
.ft-snel { margin: 4px 2px 2px; border-top: 1px solid var(--lijn); }
.ft-snel > summary { display: flex; gap: 6px; align-items: center; padding: 8px 6px 4px; font-size: 12px; color: var(--zacht);
  cursor: pointer; list-style: none; }
.ft-snel > summary::-webkit-details-marker { display: none; }
.ft-snel > summary::before { content: "▸"; color: var(--tekst); }
.ft-snel[open] > summary::before { content: "▾"; }
.ft-snel > summary b { color: var(--tekst); font-weight: 500; }
.ft-snel-inhoud { display: grid; gap: 8px; margin: 6px 0 2px; padding: 10px; border-radius: 8px; background: var(--vlak);
  font-size: 12px; overflow: visible; }
.ft-snel-inhoud .fb-upload { display: block; }
.ft-snel-inhoud .fb-upload .knop-label { display: flex; justify-content: center; height: auto; min-height: 44px; padding: 10px;
  border: 1.5px dashed var(--rand); border-radius: 8px; white-space: normal; text-align: center; text-transform: none;
  letter-spacing: 0; font-size: 12px; font-weight: 400; color: var(--zacht); }
.ft-mini { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ft-mini li { position: relative; width: 52px; height: 38px; overflow: hidden; border-radius: 5px; background: var(--grijsvlak); }
.ft-mini img, .ft-mini video { width: 100%; height: 100%; object-fit: cover; }
.ft-insturen { display: grid; gap: 8px; margin: 0; }
.ft-insturen textarea { margin: 0; font: inherit; }
.ft-insturen button[type=submit] { width: 100%; margin: 0; }
.fb-uitslagen { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; border: 0; }
.fb-uitslagen label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; }
.ft-intrekken, .ft-nieuw { margin: 0; }
.ft-intrekken p { margin: 0 0 8px; }

/* De testpagina: links de test en de pogingen, rechts groot de media en daaronder de uitslag. */
.ft-kopregel { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.ft-kop .fabriek-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ft-raamwerk { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sj-ruimte); }
@media (min-width: 900px) { .ft-raamwerk { grid-template-columns: 260px minmax(0, 1fr); align-items: start; } }
.ft-links { display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.ft-klein { margin: 0; font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.ft-uitlegtekst { margin: 0; white-space: pre-wrap; }
.ft-feiten { margin: 0; }
.ft-feiten div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--lijn); }
.ft-feiten dt { color: var(--zacht); }
.ft-feiten dd { margin: 0; font-weight: 500; }
.ft-pogingen { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ft-pg { display: flex; flex-direction: column; gap: 2px; padding: 7px 10px; border: 1px solid transparent; border-radius: 8px;
  background: var(--pagina); color: inherit; text-decoration: none; }
.ft-pg:hover { border-color: var(--rand); }
.ft-pg.aan { border-color: var(--donker); }
.ft-pg-regel { font-weight: 500; }
.ft-pg-sub { font-size: 12px; color: var(--zacht); }
.ft-pg-reden { font-size: 12px; }
.ft-rechts { display: grid; gap: var(--sj-ruimte); min-width: 0; }
.ft-teller { margin-left: auto; font-size: 11px; color: var(--zacht); white-space: nowrap; }
.ft-groot { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 10px; }
.ft-podium { position: relative; display: flex; align-items: center; justify-content: center; min-height: 240px;
  aspect-ratio: 16 / 10; overflow: hidden; border-radius: 8px; background: #1d1f21; }
.ft-podium img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; }
.ft-podium video { display: block; width: 100%; height: 100%; object-fit: contain; }
.ft-podium.ft-leeg { background: repeating-linear-gradient(45deg, var(--vlak-2) 0 8px, var(--pagina) 8px 16px);
  border: 1.5px dashed var(--rand); }
.ft-podium.ft-leeg label { cursor: pointer; }
.ft-vol { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; margin: 0; padding: 0; border: 0;
  border-radius: 50%; background: #1d1f21b3; color: #fff; font-size: 18px; line-height: 36px; cursor: pointer; }
.ft-vol[hidden] { display: none; }
.ft-duimen { display: flex; flex-direction: column; gap: 8px; max-height: 480px; margin: 0; padding: 0; overflow-y: auto;
  list-style: none; }
.ft-duim { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border: 2px solid transparent;
  border-radius: 6px; background: var(--grijsvlak); }
.ft-duim.aan { border-color: var(--donker); }
.ft-duim img, .ft-duim video { width: 100%; height: 100%; object-fit: cover; }
.ft-erbij { display: flex; align-items: center; justify-content: center; border: 1.5px dashed var(--rand); background: var(--pagina);
  color: var(--zacht); font-size: 11px; cursor: pointer; }
.ft-voetregel { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 10px 0 0; font-size: 12px; color: var(--zacht); }
.ft-bestand { min-width: 0; overflow-wrap: anywhere; }
.ft-voetregel a[hidden] { display: none; }
.ft-twee { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.ft-vak { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px; border-radius: 8px; background: var(--pagina); }
.ft-vak .meta { margin: 0; }
.ft-vak button[type=submit] { width: auto; margin: 0; align-self: flex-start; }
.ft-notitie { margin: 0; white-space: pre-wrap; }
@media (max-width: 900px) {
  .ft-groot { grid-template-columns: minmax(0, 1fr); }
  .ft-duimen { flex-direction: row; max-height: none; overflow-x: auto; overflow-y: hidden; }
  .ft-duimen li { flex: 0 0 72px; }
  .ft-twee { grid-template-columns: minmax(0, 1fr); }
  .ft-podium { min-height: 0; }
}

/* De lichtbak (static/js/lichtbak.js): een donkere laag met het beeld zo groot als past, ‹ › en ✕. */
html.lichtbak-open { overflow: hidden; }
.lichtbak { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  background: #0d0e0f; animation: lichtbak-in .15s ease-out; }
.lichtbak-beeld { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%;
  height: 100%; padding: 56px 64px; }
.lichtbak-media { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.lichtbak-teller { position: absolute; top: 18px; left: 20px; color: #fff; font-size: 13px; }
.lichtbak button { position: absolute; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%;
  background: #ffffff26; color: #fff; font-size: 26px; line-height: 44px; cursor: pointer; }
.lichtbak button:hover, .lichtbak button:focus-visible { background: #ffffff4d; }
.lichtbak button[hidden] { display: none; }
.lichtbak-sluit { top: 10px; right: 12px; font-size: 18px; }
.lichtbak-pijl.vorige { left: 12px; top: 50%; margin-top: -22px; }
.lichtbak-pijl.volgende { right: 12px; top: 50%; margin-top: -22px; }
@media (max-width: 550px) {
  .lichtbak-beeld { padding: 56px 8px 72px; }
  .lichtbak-pijl.vorige, .lichtbak-pijl.volgende { top: auto; bottom: 14px; margin-top: 0; }
}
@keyframes lichtbak-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lichtbak { animation: none; } }

/* De klok bij een fabriek (spec 2026-10-12, ronde 4; templates/core/_klok.html, _klok_kort.html; static/js/klok.js; naar
   bijlagen/ronde4-aanpassingen/klok.html). Klassen kl-. Het puntje is groen bij werktijd en grijs anders; het woord (werktijd,
   nacht) staat er altijd bij, dus kleur is nooit het enige. */
.kl-klok, .kl-kort { --kl-groen: #3b7a32; }
.kl-klok { display: flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%; min-width: 0; box-sizing: border-box;
  margin: 0 0 10px auto; padding: 8px 14px; border-radius: 12px; background: var(--vlak); }
.kl-intern, .kl-fabriek { color: var(--tekst); }
/* Rechtsboven in de kop van een pagina (.zone-object): vanaf 700 px zweeft hij rechts, de titel krijgt ruimte; daaronder
   staat hij in de stroom, rechts uitgelijnd. In een flexkop (Fabrieken) duwt margin-left: auto hem naar rechts. */
.kl-rechtsboven { margin-bottom: 8px; }
.zone-object:has(> .kl-rechtsboven) { position: relative; }
@media (min-width: 700px) {
  .kl-rechtsboven { position: absolute; top: 0; right: 0; margin: 0; }
  .zone-object:has(> .kl-rechtsboven) > .titel, .zone-object:has(> .kl-rechtsboven) > .ondertitel { padding-right: 300px; }
}
.kl-wijzerplaat { flex: none; width: 38px; height: 38px; }
.kl-rand { fill: var(--pagina); stroke: var(--donker); stroke-width: 2.5; }
.kl-uur, .kl-minuut { stroke: var(--donker); stroke-linecap: round; transform-origin: 20px 20px;
  transition: transform .6s ease-in-out; }
.kl-uur { stroke-width: 2.6; }
.kl-minuut { stroke: #555; stroke-width: 2; }
@media (prefers-reduced-motion: reduce) { .kl-uur, .kl-minuut { transition: none; } }
.kl-tijd { min-width: 0; line-height: 1.3; }
.kl-uurtijd { display: block; font-size: 20px; font-weight: 500; letter-spacing: .02em; }
.kl-sub { display: block; font-size: 11px; color: var(--zacht); }
.kl-puntje { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #c9c9c4;
  vertical-align: baseline; }
.kl-puntje.werk { background: var(--kl-groen); }
.kl-naam { color: var(--tekst); }
/* Op Fabrieken: bij elke fabriek kort "00:30 · nacht", in het tabblad. */
.kl-kort { margin-left: 6px; font-size: 11px; opacity: .85; white-space: nowrap; }
.kl-kort .kl-puntje { margin-right: 4px; }
/* Bij de fabriek op een telefoon: klein, "HB 18:30 ●". */
.kl-hb { display: none; font-size: 12px; font-weight: 500; white-space: nowrap; }
@media (max-width: 550px) {
  .kl-fabriek { padding: 4px 10px; border-radius: 999px; }
  .kl-fabriek .kl-wijzerplaat, .kl-fabriek .kl-tijd { display: none; }
  .kl-fabriek .kl-hb { display: inline; }
  .kl-hb .kl-puntje { margin: 0 0 0 2px; }
  .kl-intern .kl-sub { white-space: normal; }
}
.fbk-tab.actief .kl-puntje.werk { background: #8fd683; }
.kl-flex { margin: 0 0 0 auto; }

/* --- Camera van de fabriek (ronde 6; templates/fabriek/camera.html, static/js/fabriek_camera.js): per pose een vlak met
   het render-duimpje, posecode en naam, het label, de pillen Front/Side/Back (donker: haar foto staat erop; gestippeld
   in brons: ontbreekt) en rechts de ronde camerknop. Het formulier eronder toont alleen de voortgang en de melding. --- */
.fc-lijst { display: grid; gap: 10px; max-width: 640px; }
.fc-pose {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 10px;
  border-radius: 14px; background: var(--vlak);
}
.fc-beeld { display: grid; place-items: center; width: 64px; height: 84px; overflow: hidden; border-radius: 10px; background: var(--grijsvlak); }
.fc-beeld img { width: 100%; height: 100%; object-fit: contain; }
.fc-tekst { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.fc-naam { color: var(--tekst); text-decoration: none; overflow-wrap: anywhere; }
.fc-naam b { font-weight: 500; }
.fc-label { font-size: 12px; color: var(--zacht); }
.fc-pillen { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.fc-pil {
  padding: 2px 8px; border: 1px dashed var(--let); border-radius: 999px; background: var(--pagina); color: var(--let);
  font-size: 10px; line-height: 1.4;
}
.fc-pil.klaar { border: 1px solid var(--donker); background: var(--donker); color: var(--pagina); }
.fc-knop {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--donker);
  color: var(--pagina);
}
.fc-knop:hover { background: #3d4043; color: var(--pagina); }
.fc-knop:focus-visible { outline: 2px solid var(--donker); outline-offset: 2px; }
.fc-knop .icoon { width: 22px; height: 22px; }
.fc-form { grid-column: 1 / -1; margin: 0; }
.fc-form .foto-voortgang { width: 100%; }
.fc-lijst.bezig .fc-knop { opacity: .5; pointer-events: none; }   /* foto_sturen.js: de lijst is het paneel */

/* --- Het fabrieksblok (ronde 6; templates/fabriek/_fw_blok.html, core/fabriek_weergave.py): Fabrieken › een pose en de
   widget Bij de fabriek op Sample maken. De kop met chips, de klok en de knoppen; de tracker met de vier bolletjes; links
   per deel de vinkjes (aan, half = een streepje, uit) en wat de fabriek stuurde, rechts de vragen en de tests. --- */
.fw { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fw-paginakop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; }
.fw-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fw-chip { padding: 2px 10px; border: 1px solid var(--rand); border-radius: 999px; background: var(--pagina); font-size: 12px; }
.fw-chip.fw-nieuw { border-color: var(--laat-vlak); background: var(--laat-vlak); color: var(--laat); font-weight: 500; }
.fw-chip.fw-zacht { color: var(--zacht); }
.fw-klok { margin: 0; }
.fw-knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.fw-knoppen .kijkknop { margin: 0; }
.fw-tracker { display: flex; padding: 10px 14px; border: 1px solid var(--rand); border-radius: var(--hoek); background: var(--pagina); }
.fw-stap { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--zacht); font-size: 12px; text-decoration: none; }
.fw-stap::before { content: ""; position: absolute; top: 9px; right: calc(50% + 11px); left: calc(-50% + 11px); height: 2px;
  background: var(--rand); }
.fw-stap:first-child::before { display: none; }
.fw-stap.klaar::before { background: var(--donker); }
.fw-stap i { display: block; width: 18px; height: 18px; border: 2px solid #cfcfcd; border-radius: 50%; background: var(--pagina); }
.fw-stap.klaar i { border-color: var(--donker); background: var(--donker); }
.fw-stap.nu span { color: var(--tekst); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
.fw-stap.nu i { border-color: var(--donker); }
.fw-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 1100px) { .fw-raster { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.fw-hoofd, .fw-zij { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fw-paneel { min-width: 0; padding: 12px 14px; border-radius: var(--hoek); background: var(--vlak); }
.fw-paneelkop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 10px;
  margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--lijn); font-size: 11px; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase; }
.fw-paneelkop .meta { letter-spacing: 0; text-transform: none; }
.fw-rood { color: var(--laat); letter-spacing: 0; text-transform: none; }
.fw-groepen { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 10px; }
.fw-groep { padding: 10px 12px; border-radius: 10px; background: var(--pagina); }
.fw-groepkop { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.fw-groepkop b { font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.fw-groepkop .meta { margin-left: auto; }
.fw-vinkform { display: inline-flex; margin: 0; }
.fw-vink { position: relative; flex: none; width: 18px; height: 18px; margin: 0; padding: 0; border: 1.5px solid #9b9b94;
  border-radius: 4px; background: var(--pagina); cursor: pointer; }
.fw-vink.vast { cursor: default; }
.fw-vink.uit { background: var(--pagina); }
.fw-vink.aan, .fw-bestand.gedeeld .fw-vink { border-color: var(--donker); background: var(--donker); }
.fw-vink.aan::after, .fw-bestand.gedeeld .fw-vink::after { content: ""; position: absolute; left: 5px; top: 1px; width: 4px;
  height: 9px; border: solid var(--pagina); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.fw-vink.half { border-color: var(--donker); }
.fw-vink.half::after { content: ""; position: absolute; left: 3px; right: 3px; top: 6.5px; height: 2px; background: var(--donker); }
.fw-vink:focus-visible { outline: 2px solid var(--donker); outline-offset: 2px; }
/* Niet de gewone submitknop (corpus.css: volle breedte, donker): het vinkje blijft een vakje van 18 px. */
button[type=submit].fw-vink { width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; border: 1.5px solid #9b9b94;
  border-radius: 4px; background: var(--pagina); }
button[type=submit].fw-vink.aan, .fw-bestand.gedeeld button[type=submit].fw-vink { border-color: var(--donker);
  background: var(--donker); }
button[type=submit].fw-vink.half { border-color: var(--donker); }
.fw-bestanden { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 0; padding: 0 0 0 4px; list-style: none; }
.fw-bestand { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12px; }
.fw-duim { flex: none; width: 34px; height: 34px; border-radius: 6px; object-fit: cover; background: var(--grijsvlak); }
.fw-naam { min-width: 0; overflow-wrap: anywhere; color: var(--tekst); text-decoration: none; }
.fw-naam:hover { text-decoration: underline; }
.fw-uitz { flex: none; margin-left: auto; padding: 1px 7px; border-radius: 4px; background: var(--vlak-2); font-size: 10px; }
.fw-uitleg { margin: 10px 0 0; }
.fw-details { margin-top: 10px; }
.fw-testlijst { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 12px; }
.fw-testlijst li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 10px;
  border-radius: 8px; background: var(--pagina); }
.fw-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.fw-filters a { padding: 3px 11px; border: 1px solid var(--rand); border-radius: 999px; background: var(--pagina);
  color: var(--tekst); font-size: 12px; text-decoration: none; }
.fw-filters a span { color: var(--zacht); }
.fw-filters a[aria-current="true"] { border-color: var(--donker); background: var(--donker); color: var(--pagina); }
.fw-filters a[aria-current="true"] span { color: var(--pagina); }
.kaarten.fw-testkaarten { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; align-items: start; }
.fw-testkaart { background: var(--pagina); }
.fw-keur { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; padding: 0 6px 8px; }
.fw-keur form { margin: 0; }
.fw-afkeur > summary { list-style: none; cursor: pointer; }
.fw-afkeur > summary::-webkit-details-marker { display: none; }
.fw-afkeurform { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 6px; }
.fw-afkeurform textarea { width: 100%; }
.ft-pil.todo { background: var(--vlak-2); color: var(--donker); }
html.tel .fw-knoppen { margin-left: 0; }

/* De tab Hardware (spec 2026-10-15, *De fabriek*): de gedeelde hardware bij de aanvraag op de posepagina
   (hardware/_fabriek.html): foto, advies en downloads. */
.ht-fabriek { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--rand); }
.ht-paneelkop { margin: 0 0 8px; font-size: 11px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--zacht); }
.ht-fabriekregel { display: flex; gap: 12px; align-items: flex-start; padding: 6px 0; }
.ht-fabriekfoto { flex: none; width: 72px; height: 72px; object-fit: contain; border-radius: 6px; background: var(--vlak-2); }
.ht-advies { margin: 4px 0; font-size: 13px; }
.ht-downloads { margin: 4px 0 0; padding: 0; list-style: none; font-size: 13px; }

/* 23 okt 2026: het figuur rondom in het portaal (core/fabriek_figuur.py, templates/fabriek/_figuur.html; mockup
   mockups-productie/fabriek-figuur). Links het figuur op het grijsvlak met het draaiwiel (.dbk, figuur.css), rechts het
   gekozen onderdeel en de lijst; onder 768 px onder elkaar, het gekozen onderdeel vast boven de onderbalk. */
.ff-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 768px) { .ff-raster { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 20px; } }
.ff-links, .ff-rechts { min-width: 0; }
.ff-vlak { background: var(--grijsvlak); border-radius: var(--hoek); padding: 14px 14px 10px; }
/* De maat van het figuur: zo hoog als --ff-hoog, de breedte uit de verhouding van het beeld (--ff-b / --ff-h, inline),
   maar nooit breder dan de kolom - dan wordt hij ook lager (aspect-ratio). Niet een vaste hoogte met max-width: dan werd
   het beeld in een smalle kolom horizontaal samengeknepen (2 nov 2026, zoals .fo-vlak). */
.ff-fig { --ff-hoog: 520px; position: relative; margin: 0 auto;
  width: min(100%, calc(var(--ff-hoog) * var(--ff-b, 1) / var(--ff-h, 2))); max-width: 100%;
  touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.ff-fig.ff-sleept { cursor: grabbing; }
.ff-fig:focus-visible { outline: 2px solid var(--donker); outline-offset: 4px; }
.ff-beeld, .ff-laag { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.ff-draai { margin-top: 8px; }
.ff-hint { margin: 4px 0 0; text-align: center; font-size: 11px; color: var(--zacht); }
.ff-gekozen { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 4px 0 16px;
  border-bottom: 1px solid var(--rand); margin-bottom: 14px; }
.ff-niets, .ff-naam { display: flex; flex-direction: column; min-width: 0; }
.ff-niets b, .ff-naam b { font-size: 26px; font-weight: 300; letter-spacing: -.4px; line-height: 1.15; }
.ff-niets b { color: var(--zacht); }
.ff-niets small, .ff-naam small { font-size: 12px; color: var(--zacht); }
.ff-niets[hidden], .ff-keuze[hidden] { display: none; }
.ff-keuze { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.ff-naam { flex: 1; }
.ff-vraag { flex: none; width: auto; margin: 0; }
.ff-los { flex: none; color: var(--zacht); font-size: 22px; line-height: 1; padding: 6px 4px; text-decoration: none; }
.ff-kop { margin: 0 0 8px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--zacht);
  font-weight: 500; display: flex; justify-content: space-between; }
.ff-kop span { letter-spacing: 0; }
.ff-delen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; }
.ff-deel { display: block; border: 1px solid var(--rand); border-radius: var(--hoek); padding: 9px 12px; font-size: 12px;
  color: var(--tekst); background: var(--pagina); text-decoration: none; overflow-wrap: break-word; min-width: 0; }
.ff-deel:hover { border-color: var(--zacht); }
.ff-deel.ff-sel { background: var(--donker); border-color: var(--donker); color: var(--pagina); }
html.tel .ff-fig { --ff-hoog: 290px; }
html.tel .ff-delen { display: flex; flex-wrap: wrap; gap: 6px; }
html.tel .ff-deel { border-radius: 16px; padding: 7px 12px; }
html.tel .ff-gekozen { border: 0; padding: 0; margin: 0 0 10px; }
html.tel .ff-gekozen:not(.ff-aan) .ff-niets b { font-size: 14px; font-weight: 500; }
html.tel .ff-gekozen.ff-vast {
  position: fixed; left: 0; right: 0; z-index: 26; margin: 0; flex-direction: column; align-items: stretch;
  bottom: calc(var(--onderbalk-hoogte) + env(safe-area-inset-bottom)); padding: 10px 16px; gap: 8px;
  background: var(--pagina); border-top: 1px solid var(--rand); box-shadow: 0 -6px 16px #1d26300d;
}
html.tel .ff-gekozen.ff-vast .ff-keuze { flex-wrap: wrap; gap: 8px; }
html.tel .ff-gekozen.ff-vast .ff-naam b { font-size: 16px; font-weight: 500; letter-spacing: 0; }
html.tel .ff-gekozen.ff-vast .ff-vraag { order: 3; flex: 1 1 100%; min-height: 48px; }
/* Ask Hans Boodt boven die balk (de knop staat anders op dezelfde plek); is het vak open, dan wijkt de balk. */
html.tel:has(.onderbalk) body:has(.ff-gekozen.ff-vast):not(:has(.fb-vraagknop[open])) .fb-vraagknop {
  bottom: calc(var(--onderbalk-hoogte) + env(safe-area-inset-bottom) + var(--balk-h, 120px));
}
html.tel body:has(.fb-vraagknop[open]) .ff-gekozen.ff-vast { display: none; }
/* Het kleine beeld van een onderdeel: in het vak Ask Hans Boodt en als chip bij een vraag (static/js/figuur_chip.js). */
.ff-mini { position: relative; display: inline-block; height: 22px; flex: none; border-radius: 4px; overflow: hidden;
  background: var(--grijsvlak); vertical-align: middle; }
.ff-mini img, .ff-mini canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ff-over { display: flex; align-items: center; gap: 10px; background: var(--vlak); border-radius: var(--hoek); padding: 6px 10px; }
.ff-over .ff-mini { height: 40px; }
.ff-chip { display: inline-flex; align-items: center; gap: 6px; }
.ff-chip > a { display: inline-flex; align-items: center; gap: 6px; }
.fbk-plek.ff-chip { vertical-align: middle; }
.ff-gevolg { margin: 4px 0 0; font-size: 11.5px; }
.ff-gevolg[hidden] { display: none; }

/* Spec 2026-10-26 (mockup § 5): Mijn meldingen - per soort Uit · Pil · Push; grijs wat beheer niet toestaat. */
.melding-kop .mld-instellen { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; margin-right: 10px; }
.mm-groep { margin: 10px 0; padding: 0; border: 0; }
.mm-groep legend { font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--zacht); }
.mm-rij { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px;
  padding: 6px 0; border-top: 1px solid var(--lijn); }
.mm-naam small { display: block; }
.mm-kanalen { display: inline-flex; gap: 2px; padding: 2px; background: var(--vlak); border-radius: 999px; }
.mm-kanaal { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px;
  border-radius: 999px; font-size: 12px; cursor: pointer; }
.mm-kanaal:has(input:checked) { background: var(--pagina); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.mm-kanaal input { position: absolute; opacity: 0; pointer-events: none; }
.mm-kanaal:has(input:focus-visible) { outline: 2px solid var(--zacht); }
.mm-grijs { color: var(--zacht); opacity: .5; cursor: not-allowed; }
.mm-op-slot .mm-kanalen { opacity: .7; }
.mm-knoppen { display: flex; gap: 12px; align-items: center; }
.mm-gevolgd { margin: 0; padding: 0; list-style: none; }
.mm-gevolgd li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-top: 1px solid var(--lijn);
  font-size: 13px; }

/* Fabrieksportaal v2 (spec 2026-10-27, plan stap 0): elk deel schrijft hier alleen tussen zijn eigen ankers. */
/* deel 1: dashboard, My projects, signalen */
/* --- fabrieksportaal v2, deel 1 --- */
/* Spec 2026-10-27, § 1-2 (mockup v4): het dashboard van de fabriek (fabriek/dashboard.html), My projects met koppen en
   itemkaarten (fabriek/_projectkop.html, _itemkaart.html), de vier bolletjes (fabriek/_vier.html) en de signalen van de
   fabriek (core/_signalen.html met de soorten beurt, nieuw en antwoord). */
.sg-bol.sg-beurt { background: var(--donker); }
.sg-bol.sg-nieuw { background: var(--let); }
.sg-bol.sg-antwoord { background: #3f6c8f; }

/* De vier tegels: rustig, een getal groot; een tegel springt naar zijn blok. */
.fd-tegels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 var(--sj-ruimte); }
.fd-tegel { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 14px; border-radius: var(--hoek);
  background: var(--vlak); color: var(--tekst); text-decoration: none; }
.fd-tegel:hover { background: var(--vlak-2); }
.fd-tegel small { font-size: var(--sj-kop); letter-spacing: .1em; text-transform: uppercase; color: var(--zacht);
  overflow-wrap: anywhere; }
.fd-tegel b { font-size: 26px; font-weight: 300; line-height: 1.2; font-variant-numeric: tabular-nums; }
.fd-tegel span { font-size: 12px; color: var(--zacht); overflow-wrap: anywhere; }
.fd-tegel.fd-laat span { color: var(--laat); }

/* Twee kolommen: links To do en Running, rechts Questions, New, Quick links en R&D. */
.fd-raster { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--sj-ruimte); align-items: start; }
.fd-kolom { display: flex; flex-direction: column; gap: var(--sj-ruimte); min-width: 0; }
.fd-blok { margin: 0; min-width: 0; }
.fd-blok .pkop a.pkop-nummer { color: var(--zacht); }
.fd-leeg { margin: 4px 0; font-size: 13px; color: var(--zacht); }
.fd-knoppen { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }

/* To do: per regel een duimpje, het stipje van de soort, de taak, de knop, en eronder het item met een detail. */
.fd-taken { margin: 0; padding: 0; list-style: none; }
.fd-taak { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto;
  grid-template-areas: "duim tekst knop" "duim detail knop";
  column-gap: 12px; row-gap: 2px; align-items: center; padding: 9px 0; border-top: 1px solid var(--lijn); }
.fd-taak:first-child { border-top: 0; padding-top: 0; }
.fd-taak .fd-duim { grid-area: duim; }
.fd-taak-tekst { grid-area: tekst; min-width: 0; font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.fd-taak-tekst a { color: var(--tekst); text-decoration: none; }
.fd-taak-tekst a:hover { text-decoration: underline; }
.fd-taak-knop { grid-area: knop; }
.fd-taak-knop form { margin: 0; }
.fd-taak-knop button[type=submit].knop { width: auto; margin-top: 0; padding: 0 12px; min-height: 30px; font-size: 10px; }
.fd-taak-detail { grid-area: detail; min-width: 0; font-size: 12px; color: var(--zacht); overflow-wrap: anywhere; }
.fd-taak-detail b { color: var(--tekst); font-weight: 500; }
.fd-stip { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; vertical-align: 2px;
  background: var(--donker); }
.fd-stip.fd-nieuw { background: var(--let); }
.fd-stip.fd-laat { background: var(--laat); }
.fd-laat, td.fd-laat, .fd-taak-detail .fd-laat { color: var(--laat); }
.fd-duim { position: relative; display: block; width: 40px; height: 40px; border-radius: 6px; background: var(--grijsvlak);
  overflow: hidden; flex: none; }
.fd-duim img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

/* Running: een tabel; op de telefoon valt het project weg. */
.fd-lopend { width: 100%; border-collapse: collapse; font-size: 13px; }
.fd-lopend th { padding: 0 8px 6px 0; font-size: var(--sj-kop); font-weight: 400; letter-spacing: .1em; text-align: left;
  text-transform: uppercase; color: var(--zacht); }
.fd-lopend td { padding: 8px 8px 8px 0; border-top: 1px solid var(--lijn); vertical-align: middle; overflow-wrap: anywhere; }
.fd-lopend td small { display: block; font-size: 11px; color: var(--zacht); }
.fd-lopend td.fd-laat small { color: var(--laat); }
.fd-pose { display: flex; align-items: center; gap: 10px; color: var(--tekst); text-decoration: none; min-width: 0; }
.fd-pose b { display: block; font-weight: 500; }
.fd-pose small { display: block; font-size: 11px; color: var(--zacht); }
td.fd-sgc { width: 30px; }
.fd-sgc .sg, .fd-kop .sg { width: 26px; height: 22px; flex: none; }
.fd-sgc .sg-hoofd, .fd-kop .sg-hoofd { top: 0; right: auto; left: 0; }
.fd-sgc .sg-uit { top: 0; right: 30px; }
.fd-sgc .sg-tip { top: 28px; }
.fd-kop .sg-uit { top: 0; left: 30px; right: auto; }
.fd-kop .sg-tip { top: 28px; left: 0; right: auto; }

/* Questions, New, Quick links, R&D. */
.fd-groep { display: flex; gap: 6px; align-items: baseline; margin: 10px 0 4px; font-size: var(--sj-kop); font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase; color: var(--zacht); }
.fd-groep:first-of-type { margin-top: 0; }
.fd-groep em { font-style: normal; color: var(--tekst); }
.fd-vraag { display: block; padding: 6px 0; border-top: 1px solid var(--lijn); color: var(--tekst); text-decoration: none; }
.fd-vraag:hover .fd-vraagtekst { text-decoration: underline; }
.fd-wie { display: block; font-size: 11.5px; color: var(--zacht); overflow-wrap: anywhere; }
.fd-wie b { color: var(--tekst); font-weight: 500; }
.fd-plek { padding: 0 6px; border-radius: 8px; background: var(--vlak-2); color: var(--tekst); }
.fd-vraagtekst { display: block; font-size: 13px; overflow-wrap: anywhere; }
.fd-nieuw, .fd-rd { margin: 0; padding: 0; list-style: none; font-size: 13px; }
.fd-nieuw li, .fd-rd li { padding: 6px 0; border-top: 1px solid var(--lijn); overflow-wrap: anywhere; }
.fd-nieuw li:first-child, .fd-rd li:first-child { border-top: 0; }
.fd-nieuw a, .fd-rd a:not(.knop) { color: var(--tekst); text-decoration: none; }
.fd-nieuw b, .fd-rd b { font-weight: 500; }
.fd-rd li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.fd-rd small { color: var(--zacht); }
.fd-nieuwpil { padding: 1px 7px; border-radius: 8px; background: var(--let-vlak); color: var(--let); font-size: 11px; }
.fd-meer { display: block; margin: 6px 0 0; font-size: 12px; color: var(--zacht); }
.fd-draden .fd-vraag:first-child { border-top: 0; }
.fd-snel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.fd-snel a { padding: 8px 10px; border: 1px solid var(--rand); border-radius: var(--hoek-knop); background: var(--pagina);
  color: var(--tekst); font-size: 12.5px; text-decoration: none; overflow-wrap: anywhere; }
.fd-snel a:hover { border-color: var(--donker); }

/* De vier bolletjes: een ring die zich vult, het label en de stand eronder. */
.fd-vier { display: flex; gap: 4px; margin: 8px 0 0; padding: 0; list-style: none; }
.fd-bol { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center; }
.fd-bol svg { width: 18px; height: 18px; transform: rotate(-90deg); }
.fd-bol circle { fill: none; stroke-width: 2; }
.fd-ring { stroke: var(--lijn); }
.fd-boog { stroke: var(--donker); }
.fd-bol circle.fd-vol { fill: var(--donker); stroke: var(--donker); }
.fd-vink { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transform: rotate(90deg); transform-origin: 9px 9px; }
.fd-bol em { font-style: normal; font-size: 10px; color: var(--zacht); overflow-wrap: anywhere; }
.fd-bol span { font-size: 10px; color: var(--tekst); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fd-lopend .fd-vier { margin: 0; max-width: 260px; }

/* My projects: de filterchips, per project een kop en de itemkaarten. */
.fd-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--sj-ruimte); }
.fd-chip { padding: 5px 12px; border: 1px solid var(--rand); border-radius: 999px; background: var(--pagina);
  color: var(--tekst); font-size: 12px; text-decoration: none; }
.fd-chip b { margin-left: 4px; font-weight: 500; }
.fd-chip[aria-current] { background: var(--donker); border-color: var(--donker); color: #fff; }
.fd-project { margin: 0 0 28px; }
.fd-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 12px; }
.fd-kop h2 { margin: 0; font-size: 20px; font-weight: 400; overflow-wrap: anywhere; min-width: 0; }
.fd-kop h1 { margin: 0; overflow-wrap: anywhere; min-width: 0; }
.fd-kop h2 a { color: var(--tekst); text-decoration: none; }
.fd-kop h2 a:hover { text-decoration: underline; }
.fd-kop-sub { margin: 0; font-size: 12.5px; color: var(--zacht); }
.fd-kop-sub b { color: var(--tekst); font-weight: 500; }
:where(.page.breed) .kaarten.fd-kaarten { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.kaart-vlak.fd-beeld { height: 230px; }
.fd-ik .kaart-tekst h2 { font-size: 15px; }
.fd-code { margin-bottom: 6px; }
.fd-pil { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--vlak-2); color: var(--donker);
  font-size: 11px; }
.fd-pil.fd-beurt, .fd-pil.fd-bezig { background: var(--donker); color: #fff; }
.fd-pil.fd-klaar { background: var(--goed-vlak); color: var(--goed); }
.fd-voet { margin: 8px 0 0; font-size: 12px; color: var(--zacht); }
.fd-voet.fd-laat { color: var(--laat); }
.fd-ik.fd-stil { opacity: .78; }

@media (max-width: 1100px) {
  .fd-raster { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
  .fd-tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .fd-tegel b { font-size: 22px; }
  .fd-smal-weg { display: none; }
  .fd-taak { grid-template-columns: 34px minmax(0, 1fr); grid-template-areas: "duim tekst" "duim detail" ". knop"; }
  .fd-taak .fd-duim { width: 34px; height: 34px; }
  .fd-taak-knop { justify-self: start; margin-top: 4px; }
  .fd-lopend .fd-vier { max-width: none; }
  .fd-lopend .fd-pose .fd-duim { display: none; }
  .kaart-vlak.fd-beeld { height: 200px; }
}
/* --- einde deel 1 --- */
/* deel 2: de itempagina */
/* --- fabrieksportaal v2, deel 2 --- */
/* De itempagina van de fabriek (spec 2026-10-27, § 3; klassen `fp-`, mockup v4): de kop, de tracker met zijn standen, de tabs
   met hun aantallen, de Overview in drie kolommen (figuur · wat we vragen · briefing), het kaartje van een onderdeel. */
.fp-kopregel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 6px 0 10px; font-size: 13px; }
.fp-kopregel .fabriek-stand { margin: 0; }
.fp-versie { display: inline-block; padding: 1px 10px; border: 1px solid var(--rand); border-radius: 999px; font-size: 12px;
  color: var(--tekst); background: var(--pagina); white-space: nowrap; }
.fp-gewenst b { font-weight: 500; color: var(--tekst); }
.fp-laat { color: var(--laat); font-weight: 500; }
.fp-acties { margin-top: 2px; row-gap: 6px; }
.fp-nog-niet { opacity: .62; }                       /* nog niet klaar om over te dragen; de knop blijft klikbaar */
.fp-nodig { font-size: 12px; }
.fp-nodig-deel.blokkeert { font-weight: 500; }
/* De tracker: een halve ring als het deel begonnen is; de stand eronder past op een regel (of breekt af). */
.fb-stap.half .fb-rondje { border-color: transparent; background: conic-gradient(var(--donker) 0 50%, #cfcfcd 50% 100%);
  -webkit-mask: radial-gradient(circle, transparent 5px, #000 5.5px); mask: radial-gradient(circle, transparent 5px, #000 5.5px); }
.fp-tracker .fb-tekst { max-width: 100%; text-align: center; }
/* De tabs: een rij die op een telefoon scrolt; het aantal als pilletje (rood bij nieuwe antwoorden). */
.fp-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.fp-tabs::-webkit-scrollbar { display: none; }
.fp-tabs a { flex: none; white-space: nowrap; }
.fp-aantal { display: inline-block; margin-left: 7px; padding: 0 7px; min-width: 20px; border-radius: 999px; background: var(--vlak-2);
  color: var(--tekst); font-size: 11px; line-height: 18px; text-align: center; font-weight: 400; }
.fp-aantal.rood { background: var(--laat); color: #fff; }
/* De Overview: figuur · wat we vragen · briefing. Eén kolom op een telefoon, twee vanaf 900 px (het figuur over twee rijen),
   drie vanaf 1180 px; zonder figuur (een fabriek die niet print) twee. */
.fp-overview { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sj-ruimte); align-items: start; }
.fp-overview > .paneel { margin: 0; min-width: 0; }
@media (min-width: 900px) {
  .fp-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fp-overview.met-figuur .fp-figuurpaneel { grid-row: span 2; }
}
@media (min-width: 1180px) {
  .fp-overview.met-figuur { grid-template-columns: minmax(0, 360px) minmax(0, 1fr) minmax(0, 340px); }
  .fp-overview.met-figuur .fp-figuurpaneel { grid-row: auto; }
}
.fp-vol { margin-top: var(--sj-ruimte); }
.fp-tabkop .fp-bevestigen { margin-top: 4px; }
.fp-bevestigen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 12px 0 4px; }
.fp-bevestigen p { margin: 0; }
.fp-bevestigen button[type=submit].knop { width: auto; margin-top: 0; padding: 0 16px; }
.fp-bevestigen button[type=submit].knop:not(.primair) { background: var(--pagina); color: var(--tekst); border: 1px solid var(--rand); }
/* Wat we van je vragen. */
.fp-taken { list-style: none; margin: 0; padding: 0; }
.fp-taak { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; padding: 12px 0;
  border-top: 1px solid var(--lijn); }
.fp-taak:first-child { border-top: 0; padding-top: 2px; }
.fp-stip { display: grid; place-items: center; width: 18px; height: 18px; margin-top: 3px; border: 1.5px solid #cfcfcd;
  border-radius: 50%; background: var(--pagina); color: #fff; font-size: 10px; line-height: 1; }
.fp-taak.klaar .fp-stip { background: var(--donker); border-color: var(--donker); }
.fp-taaktekst { min-width: 0; }
.fp-taaktekst > b { display: block; font-weight: 500; }
.fp-taaktekst .meta { display: block; white-space: normal; }
.fp-taak.klaar .fp-taaktekst > b { color: var(--zacht); font-weight: 400; }
.fp-taak > .knop, .fp-taak > .fp-taakform { justify-self: end; }
.fp-taakform { margin: 0; }
.fp-taakform button[type=submit].knop { width: auto; min-height: 30px; margin-top: 0; padding: 0 12px; font-size: 10px;
  background: var(--pagina); color: var(--tekst); border: 1px solid var(--rand); }
.fp-taakform button[type=submit].knop:hover { border-color: var(--donker); }
.fp-subtaken { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fp-subtaak { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; background: var(--pagina);
  border: 1px solid var(--rand); border-radius: var(--hoek-knop); font-size: 13px; }
.fp-subtaak.klaar { color: var(--zacht); }
.fp-subtekst { min-width: 0; }
/* De briefing kort en wat nieuw is. */
.fp-notitie { margin: 0 0 12px; padding: 10px 12px; background: var(--pagina); border: 1px solid var(--rand); border-radius: var(--hoek-knop); }
.fp-notitie p { margin: 0; }
.fp-notitie .meta { margin-bottom: 2px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.fp-aanvraag { margin: 4px 0 0; }
.fp-pdf { margin: 12px 0 0; }
.fp-tussenkop { margin: 18px 0 6px; font-size: var(--sj-kop); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--zacht); }
.fp-nieuwlijst { margin: 0; padding: 0; list-style: none; }
.fp-nieuwlijst li { position: relative; padding: 3px 0 3px 16px; overflow-wrap: anywhere; }
.fp-nieuwlijst li::before { content: ""; position: absolute; left: 3px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--laat); }
.fp-nieuwlijst li.meta::before { display: none; }
/* Het figuur: in de smalle kolom, met Yours / Ours, Print status en het kaartje van een onderdeel. */
.fp-figuurpaneel .pkop { flex-wrap: wrap; }
.fp-wissel { display: inline-flex; padding: 2px; border-radius: 999px; background: var(--vlak-2); margin-left: auto; }
.fp-wisselknop { height: 26px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: 12px;
  color: var(--zacht); cursor: pointer; }
.fp-wisselknop.actief { background: var(--pagina); color: var(--tekst); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.fp-ff[hidden] { display: none; }
.fp-ff .ff-vlak { position: relative; }
.fp-ff .ff-fig { --ff-hoog: 480px; }
.fp-status { position: absolute; top: 8px; right: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; margin: 0;
  font-size: 11px; color: var(--zacht); }
.fp-status input { margin: 0; }
.fp-legenda { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin: 6px 0 0; padding: 0; list-style: none;
  font-size: 11px; color: var(--zacht); }
.fp-legenda li::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 2px;
  vertical-align: -1px; border: 1px solid rgba(0, 0, 0, .18); background: #fff; }
.fp-legenda .geprint::before { background: #9bcdb2; border-color: #9bcdb2; }
.fp-legenda[hidden] { display: none; }
.ff-kaart { margin-top: 10px; padding: 12px; background: var(--pagina); border: 1px solid var(--rand); border-radius: var(--hoek); }
.ff-kaart[hidden] { display: none; }
.ff-kaart-kop { display: flex; align-items: center; gap: 8px; }
.ff-kaart-kop b { flex: 1; min-width: 0; font-weight: 500; font-size: 15px; }
.ff-kaart .ff-plaat { margin: 2px 0 0; white-space: normal; }
.ff-kaart [hidden] { display: none; }
.ff-vraagvorm textarea { font: inherit; display: block; width: 100%; min-height: 58px; margin: 8px 0; }
.ff-kaart-knoppen { display: flex; flex-wrap: wrap; gap: 8px; }
.ff-kaart-knoppen button[type=submit].knop { width: auto; margin: 0; padding: 0 14px; }
.ff-lijst { margin-top: 10px; }
.ff-lijst > summary { cursor: pointer; }
.ff-lijst .ff-delen { margin-top: 8px; }
.ff-lijst .ff-delen > span.ff-deel { cursor: default; }
html.tel .fp-ff .ff-fig { --ff-hoog: 300px; }
html.tel .fp-taak { grid-template-columns: 20px minmax(0, 1fr); }
html.tel .fp-taak > .knop, html.tel .fp-taak > .fp-taakform { grid-column: 2; justify-self: start; }
html.tel .fp-kopregel { font-size: 12px; }
/* --- einde deel 2 --- */
/* deel 3: Print files, haar bedden, het sleepvlak */
/* --- fabrieksportaal v2, deel 3 --- */
/* Print files (spec 2026-10-27, § 4, mockup v4): de kop met Parts · Gcodes · 3MF en de versies, twee kolommen From Hans
   Boodt / From you, de bedkaarten met hun stand, de platen, het sleepvlak; intern Hun bedden. */
.pf { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pf-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.pf-seg { display: inline-flex; background: var(--vlak-2); border-radius: 99px; padding: 3px; gap: 2px; }
.pf-seg a { display: inline-flex; gap: 6px; align-items: baseline; padding: 4px 12px; border-radius: 99px; font-size: 12px;
  color: var(--tekst); text-decoration: none; }
.pf-seg a small { font-size: 10.5px; }
.pf-seg a.aan { background: var(--pagina); font-weight: 500; box-shadow: 0 1px 2px #0000001a; }
.pf-versies { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--zacht); }
.pf-versies a { letter-spacing: 0; text-transform: none; background: var(--vlak-2); color: var(--tekst); border-radius: 99px;
  padding: 2px 10px; text-decoration: none; }
.pf-versies a.aan { background: var(--donker); color: var(--pagina); font-weight: 500; }
.pf-rechts { margin-left: auto; font-size: 11.5px; color: var(--zacht); }
.pf-ouder-zin, .pf-zin { margin: 0; font-size: 12px; color: var(--zacht); }
.pf-twee { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pf-kaart { background: var(--pagina); border: 1px solid var(--rand); border-radius: var(--hoek); padding: 12px 14px;
  min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.pf-kaartkop { display: flex; align-items: flex-start; gap: 10px; }
.pf-kaartkop > div { flex: 1; min-width: 0; }
.pf-kaartkop b { display: block; font-size: 12.5px; font-weight: 500; }
.pf-kaartkop small { font-size: 11px; color: var(--zacht); }
.pf-ic { width: 34px; height: 34px; border-radius: 8px; background: var(--donker); color: var(--pagina); font-size: 10px;
  font-weight: 500; display: grid; place-items: center; flex: none; }
.pf-ic.pf-hun { background: var(--pagina); color: var(--tekst); border: 1.5px solid var(--donker); }
.pf-lijst { list-style: none; margin: 0; padding: 0; }
.pf-lijst li { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border-top: 1px solid var(--rand);
  font-size: 12px; }
.pf-lijst li b { font-weight: 500; min-width: 0; }
.pf-lijst li small { color: var(--zacht); font-size: 11px; white-space: nowrap; }
.pf-lijst li a { margin-left: auto; font-size: 11.5px; }
.pf-leeg { margin: 0; font-size: 12px; color: var(--zacht); }
.pf-totalen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; background: var(--pagina);
  border: 1px solid var(--rand); border-radius: 9px; }
.pf-totalen div { padding: 8px 14px; border-right: 1px solid var(--rand); min-width: 0; }
.pf-totalen div:last-child { border-right: 0; }
.pf-totalen dt { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--zacht); }
.pf-totalen dd { margin: 0; font-size: 14px; font-weight: 500; }
.pf-groep { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 500; color: var(--zacht); }
.pf-groep em { font-style: normal; letter-spacing: 0; text-transform: none; font-weight: 300; font-size: 11px; }
.pf-groep > span:last-child:not(.pf-tel) { margin-left: auto; letter-spacing: 0; text-transform: none; font-weight: 300; }
.pf-tel { background: var(--let-vlak); color: var(--let); border-radius: 99px; padding: 0 8px; letter-spacing: 0; }
.pf-bedden { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 10px; list-style: none;
  margin: 0; padding: 0; }
.pf-bed { position: relative; display: flex; flex-direction: column; background: var(--pagina); border: 1px solid var(--rand);
  border-radius: var(--hoek); overflow: hidden; min-width: 0; }
.pf-bed.pf-herprint { border-color: #d9c39b; }
.pf-bed.pf-vaag { opacity: .6; }
.pf-bed.pf-licht { border-color: var(--donker); box-shadow: 0 0 0 2px var(--donker); }
.pf-bed.pf-mist { border: 1.5px dashed #c9c9c5; background: transparent; }
.pf-bed.pf-mist .pf-beeld img { opacity: .35; }
.pf-beeld { position: relative; height: 138px; background: var(--grijsvlak); display: flex; align-items: center;
  justify-content: center; }
.pf-beeld img { max-width: 100%; max-height: 100%; display: block; }
.pf-nr { position: absolute; left: 8px; top: 8px; background: var(--pagina); border-radius: 99px; padding: 1px 9px;
  font-size: 11px; font-weight: 500; box-shadow: 0 1px 3px #0000001a; }
.pf-beeld .pf-pil { position: absolute; right: 8px; top: 8px; }
.pf-pil { display: inline-block; border-radius: 99px; padding: 1px 9px; font-size: 10.5px; background: var(--pagina);
  border: 1px solid var(--rand); color: var(--tekst); }
.pf-pil.pf-printed { background: var(--goed-vlak); border-color: var(--goed-vlak); color: var(--goed); }
.pf-pil.pf-printing { background: var(--let-vlak); border-color: var(--let-vlak); color: var(--let); }
.pf-pil.pf-failed { background: var(--laat-vlak); border-color: var(--laat-vlak); color: var(--laat); }
.pf-tekst { padding: 9px 11px 10px; display: flex; flex-direction: column; gap: 3px; font-size: 11px; flex: 1; min-width: 0; }
.pf-tekst strong { font-size: 13px; font-weight: 500; }
.pf-m { color: var(--zacht); }
.pf-labels { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.pf-labels span { background: var(--vlak-2); color: var(--tekst); border-radius: 5px; padding: 0 6px; font-size: 10px;
  line-height: 17px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-voet { border-top: 1px solid var(--rand); padding: 7px 10px; display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px; font-size: 10.5px; color: var(--zacht); }
.pf-reden { color: var(--laat); }
.pf-knoppen { margin-left: auto; display: flex; gap: 5px; align-items: center; }
.pf-knop { display: inline; margin: 0; }
.pf-knop button[type=submit].knop { width: auto; margin: 0; padding: 0 12px; }
.pf-knop button[type=submit].knop:not(.primair) { background: var(--pagina); color: var(--tekst); border-color: var(--lijn); }
.pf-mislukt { width: 100%; }
.pf-mislukt summary { cursor: pointer; font-size: 11px; color: var(--laat); }
.pf-mislukt form { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.pf-mislukt label { display: flex; flex-direction: column; gap: 3px; color: var(--tekst); }
.pf-achter > summary { position: absolute; right: 8px; top: 110px; list-style: none; cursor: pointer; font-size: 10px;
  color: var(--tekst); background: var(--pagina); border-radius: 99px; padding: 1px 8px; z-index: 3; }
.pf-achter > summary::-webkit-details-marker { display: none; }
.pf-achter[open] > summary { top: auto; bottom: 6px; }
.pf-achterkant { position: absolute; inset: 0; background: var(--pagina); padding: 11px 12px 26px; font-size: 11px;
  display: flex; flex-direction: column; gap: 4px; z-index: 2; overflow: auto; }
.pf-achterkant h4 { margin: 0 0 2px; font-size: 12.5px; font-weight: 500; }
.pf-naam { font-size: 10.5px; }
.pf-rij { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--rand); }
.pf-rij span { color: var(--zacht); }
.pf-rij b { font-weight: 400; text-align: right; min-width: 0; }
.pf-acties { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 0; }
.pf-platen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; list-style: none; margin: 0;
  padding: 0; }
.pf-plaat { border: 1px solid var(--rand); border-radius: 8px; overflow: hidden; background: var(--pagina); min-width: 0; }
.pf-plaat .pf-beeld { height: 92px; }
.pf-plaat .pf-nr { left: 6px; top: 6px; padding: 0 7px; font-size: 10px; }
.pf-plaat .pf-tekst { padding: 5px 7px 6px; font-size: 10px; gap: 4px; }
.pf-vraag { font-size: 10.5px; }
.pf-controle { margin: 0; font-size: 11.5px; background: var(--goed-vlak); color: var(--goed); border-radius: 8px;
  padding: 7px 10px; }
.pf-controle.let { background: var(--let-vlak); color: var(--let); }
.pf-melding { display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 8px 12px; border-radius: 8px;
  background: var(--let-vlak); color: var(--tekst); font-size: 12px; }
.pf-melding b { color: var(--let); font-weight: 500; }
.pf-melding .pf-m { color: var(--tekst); }
.pf-ouder { border-top: 1px solid var(--lijn); padding-top: 8px; font-size: 11.5px; color: var(--zacht); }
.pf-ouder ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pf-ouder li { display: flex; gap: 8px; align-items: baseline; }
.pf-sleep { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 14px; padding: 13px 16px;
  border: 1.5px dashed #b9bbbd; border-radius: var(--hoek); background: var(--pagina); }
.pf-sleep.pf-erboven { border-color: var(--donker); border-style: solid; }
.pf-pijl { width: 36px; height: 36px; border-radius: 50%; background: var(--vlak-2); display: grid; place-items: center;
  font-size: 17px; flex: none; }
.pf-sleep-tekst { flex: 1; min-width: 220px; font-size: 12px; }
.pf-sleep-tekst b { display: block; font-size: 13px; font-weight: 500; }
.pf-soorten { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pf-soorten span { background: var(--vlak-2); color: var(--tekst); border-radius: 99px; padding: 1px 9px; font-size: 10.5px; }
.pf-kies { cursor: pointer; }
.pf-wachtrij { width: 100%; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pf-wachtrij:empty { display: none; }
.pf-wachtrij li { display: grid; grid-template-columns: minmax(0, 180px) 22px minmax(0, 1fr); gap: 10px; align-items: center;
  background: var(--pagina); border: 1px solid var(--rand); border-radius: 8px; padding: 7px 12px; font-size: 11.5px; }
.pf-wachtrij li.pf-w-nee { border-color: var(--laat-vlak); background: var(--laat-vlak); color: var(--laat); }
.pf-wachtrij li.pf-w-ok { border-color: var(--goed-vlak); }
.pf-wpijl { color: var(--zacht); text-align: center; }
.pf-wachtrij li.pf-w-nee .pf-wpijl { color: var(--laat); }
.pf-wwaar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pf-chip { border: 1px solid var(--lijn); background: var(--pagina); border-radius: 99px; padding: 2px 10px; font-size: 11px;
  cursor: pointer; }
.pf-chip:hover { border-color: var(--donker); }
.pf-hb-platen { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; list-style: none;
  margin: 8px 0 0; padding: 0; }
.pf-hb-plaat { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 11px; }
.pf-hb-beeld { height: 72px; background: var(--grijsvlak); border-radius: 6px; display: flex; align-items: center;
  justify-content: center; overflow: hidden; }
.pf-hb-beeld img { max-width: 100%; max-height: 100%; }
.pf-hb-nr { font-weight: 500; }
.pf-hb-plaat .pf-pil { align-self: flex-start; }
.pf-hb-reden { color: var(--laat); }
@media (max-width: 767px) {
  .pf-twee { grid-template-columns: minmax(0, 1fr); }
  .pf-totalen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-totalen div { border-right: 0; border-bottom: 1px solid var(--rand); }
  .pf-rechts { margin-left: 0; }
  .pf-bedden { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .pf-platen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-wachtrij li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .pf-wpijl { display: none; }
}
/* Print files als kaarten (spec 2026-10-28; mockup v4; fabriek/_plaatkaart.html, _printfiles.html, _fw_printbestanden.html,
   static/js/fabriek_klaar.js): een kaart per plaat die omdraait (static/js/omdraaien.js; .kan-draaien zet de 3D-opmaak
   aan, zonder het script staat de achterkant onder de voorkant), met rechtsonder het vinkje klaar: het rondje springt
   groen, het vinkje tekent zich, een ring dijt uit (.pop) en de kaart krijgt een groene rand (.klaar). */
.pfk-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.pfk-totalen { flex: 1; min-width: 260px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pfk-alles { margin: 0; }
.pfk-alles button[type=submit] { width: auto; margin: 0; padding: 0 18px; }
.pfk-alles button[disabled] { opacity: .45; cursor: default; }
/* Zoveel kaarten als er passen: op 1440 px vijf, op een telefoon een of twee (hieronder), intern in het fabrieksblok drie. */
.pfk-kaarten { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.pfk { position: relative; min-width: 0; }
.pfk-anker { position: absolute; top: 0; left: 0; }
.pfk-kant { display: flex; flex-direction: column; border: 1px solid var(--rand); border-radius: 14px; background: var(--pagina);
  overflow: hidden; min-width: 0; }
.pfk-voor { height: 380px; }
.pfk.kan-draaien { perspective: 1200px; }
.pfk.kan-draaien .omdraai-binnen { transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.pfk.kan-draaien .pfk-kant { height: 380px; }
.pfk.kan-draaien .pfk-voor { cursor: pointer; }
.pfk-achter { padding: 12px 14px; font-size: 12px; gap: 0; }
.pfk.kan-draaien .pfk-achter { overflow: auto; }
.pfk-beeld { position: relative; flex: 1; min-height: 0; background: var(--grijsvlak); display: flex; align-items: center;
  justify-content: center; }
.pfk-beeld img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pfk-geen { color: var(--zacht); font-size: 11.5px; text-align: center; padding: 0 18px; }
.pfk-geen i { display: block; width: 56px; height: 96px; margin: 0 auto 8px; border-radius: 28px 28px 14px 14px;
  background: linear-gradient(#dcdcd8, #cfcfca); opacity: .7; }
.pfk-nr { position: absolute; left: 8px; top: 8px; font-size: 10.5px; background: var(--pagina); border: 1px solid var(--rand);
  border-radius: 99px; padding: 0 8px; color: var(--zacht); }
.pfk-draai { display: none; position: absolute; left: 8px; bottom: 8px; font-size: 10.5px; color: var(--zacht);
  background: #ffffffd9; border-radius: 99px; padding: 0 8px; }
.pfk.kan-draaien .pfk-draai { display: inline; }
.pfk-tekst { padding: 10px 70px 12px 14px; min-width: 0; }
.hn-groot { display: block; font-weight: 500; font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; }
.hn-org { display: block; font-size: 12px; color: var(--let); overflow-wrap: anywhere; }
.hn .hn-org { display: inline; font-size: inherit; color: var(--zacht); }
.hn .hn-vertaald { font-weight: 500; }
.pfk-naam { display: flex; flex-direction: column; }
.pfk-naam.klein .hn-groot { font-size: 13px; }
.pfk-klaarlabel { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--goed); opacity: 0;
  transition: opacity .3s; }
.pfk.klaar .pfk-klaarlabel { opacity: 1; }
/* De cijfers lopen nooit onder het vinkje (29 okt 2026): past het gewicht niet naast de printtijd, dan gaat het eronder,
   binnen de 70 px rechts van .pfk-tekst. */
.pfk-cijfers { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; align-items: baseline; }
.pfk-cijfers span { display: block; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--zacht); }
.pfk-cijfers b { font-size: 17px; font-weight: 500; white-space: nowrap; }
.pfk-mist { margin: 0; font-size: 12px; color: var(--zacht); }
.pfk-zonder .pfk-voor { border-style: dashed; border-color: #c9c9c5; }
.pfk-licht .pfk-voor { border-color: var(--donker); box-shadow: 0 0 0 2px var(--donker); }
/* Het vinkje (rechtsonder op de voorkant, boven de knop die de kaart omdraait). */
.pfk-vinkvak { position: absolute; right: 12px; bottom: 12px; z-index: 2; margin: 0; }
.pfk-vink { position: relative; width: 46px; height: 46px; border-radius: 50%; border: 2px solid #cfcfca; background: var(--pagina);
  padding: 0; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px #00000014;
  transition: border-color .25s, background .25s, transform .15s; }
/* De algemene knop (corpus.css, button[type=submit]) is breed, donker en hoekig: het vinkje is een rondje. */
button[type=submit].pfk-vink { width: 46px; min-height: 0; margin: 0; padding: 0; border: 2px solid #cfcfca; border-radius: 50%;
  background: var(--pagina); color: inherit; letter-spacing: 0; cursor: pointer; }
button[type=submit].pfk-vink:hover { border-color: var(--goed); }
button.pfk-vink:active { transform: scale(.92); }
.pfk-vink svg { width: 24px; height: 24px; }
.pfk-vink path { fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .35s .12s ease-out; }
.pfk-vink::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--goed); opacity: 0;
  pointer-events: none; }
.pfk-alleen-kijken { box-shadow: none; cursor: default; }
.pfk.klaar .pfk-vink, .pfk.klaar button[type=submit].pfk-vink { background: var(--goed); border-color: var(--goed); }
.pfk.klaar .pfk-vink path { stroke-dashoffset: 0; }
.pfk.pop .pfk-vink { animation: pfk-pop .45s ease-out; }
.pfk.pop .pfk-vink::after { animation: pfk-ring .6s ease-out; }
@keyframes pfk-pop { 0% { transform: scale(1); } 35% { transform: scale(1.22); } 70% { transform: scale(.95); } 100% { transform: scale(1); } }
@keyframes pfk-ring { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }
.pfk.klaar .pfk-voor { border-color: #bcd7c5; box-shadow: 0 0 0 1px #bcd7c5 inset; }
.pfk.klaar .pfk-beeld::before { content: ""; position: absolute; inset: 0; background: #2f6b450f; pointer-events: none; }
/* De achterkant. */
.pfk-achter h4 { margin: 0 0 2px; font-size: 15px; font-weight: 500; }
.pfk-achter .pfk-naam { margin-bottom: 6px; }
.pfk-uitleg { margin: 4px 0; font-size: 11px; color: var(--zacht); }
.pfk-achter .pf-labels { margin: 6px 0 0; }
.pfk-bestand { margin: 6px 0 0; font-size: 11px; color: var(--zacht); }
.pfk-downloads { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 0; }
.pfk-downloads .knop { width: 100%; }
.pfk-sinds { margin: 8px 0 0; }
.pfk-acties { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 8px 0 0; font-size: 11.5px; }
.pfk-achter .omdraai-hint { text-align: center; margin-top: 10px; text-decoration: underline; }
.pfk-van-ons { margin-top: 6px; display: flex; flex-direction: column; gap: 10px; }
@media (prefers-reduced-motion: reduce) {
  .pfk.kan-draaien .omdraai-binnen { transition: none; }
  .pfk.pop .pfk-vink, .pfk.pop .pfk-vink::after { animation: none; }
  .pfk-vink path, .pfk-klaarlabel { transition: none; }
}
@media (max-width: 767px) {
  .pfk-kaarten { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
  .pfk-totalen { min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* --- einde deel 3 --- */
/* deel 4: haar onderdelen */
/* --- fabrieksportaal v2, deel 4 --- */
/* Haar onderdelen (spec 2026-10-27, § 6 en § 7; mockup v3): de twee figuren die samen draaien, de lijst What is
   different, de stand van de render en het blok Your parts op de Overview (templates/fabriek/_onderdelen.html,
   _your_parts.html, _fw_onderdelen.html, _fo_*.html; static/js/fabriek_onderdelen.js). Klassen fo-. De kleuren in het
   figuur tekent static/js/draaibalk.js (CorpusDraaibalk.KLEUREN); de blokjes in de lijst hebben dezelfde tint. */
.fo { margin-top: 16px; }
.fo-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 10px; }
.fo-kop h3 { margin: 0; font-size: 14px; font-weight: 500; }
.fo-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; border-radius: 8px; background: var(--vlak-2); }
.fo-seg button { border: 0; background: none; padding: 3px 10px; border-radius: 6px; font: inherit; font-size: 12px;
  color: var(--zacht); cursor: pointer; }
.fo-seg button.aan { background: #fff; color: var(--tekst); box-shadow: 0 1px 2px #1d26301a; }
.fo-kop .fo-seg { margin-left: auto; }
.fo-intern .fo-seg { margin: 0 0 10px; }
.fo-raster { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 14px; align-items: start; }
.fo-raster.fo-met-ons { grid-template-columns: minmax(0, 270px) minmax(0, 270px) minmax(0, 1fr); }
.fo-figkop { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 6px; font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--zacht); }
.fo-figkop b { color: var(--tekst); font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.fo-grijs { background: var(--grijsvlak); border-radius: var(--hoek); padding: 10px 10px 4px; }
.fo-vlak { position: relative; width: min(100%, calc(400px * var(--fo-b, 1) / var(--fo-h, 2)));
  margin: 0 auto; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent; outline-offset: 4px; }
.fo-vlak.fo-sleept { cursor: grabbing; }
.fo-beeld, .fo-laag { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.fo-beeld { object-fit: contain; }
.fo-hint { margin: 6px 0 0; min-height: 1.5em; font-size: 11px; color: var(--zacht); text-align: center;
  overflow-wrap: anywhere; }
.fo-lijst { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.fo-lijst li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 2px 8px; padding: 7px 0;
  border-bottom: 1px solid var(--lijn); }
.fo-lijst li:last-child { border-bottom: 0; }
.fo-lijst b { font-weight: 500; overflow-wrap: anywhere; }
.fo-lijst small { grid-column: 2; color: var(--zacht); font-size: 11px; overflow-wrap: anywhere; }
.fo-k { width: 11px; height: 11px; border-radius: 3px; margin-top: 3px; display: block; }
.fo-k-zelfde { background: #fff; border: 1px solid #b9bbbd; }
.fo-k-anders { background: #d6b98a; }
.fo-k-gesplitst { background: #8fb1cf; }
.fo-k-extra { background: #b7a5d6; }
.fo-k-ontbreekt { background: #d9a39d; }
.fo-stil .fo-k { opacity: .35; }
.fo-let { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--let-vlak); color: var(--let); font-size: 12px; }
.fo-let b { display: block; font-weight: 500; }
.fo-let small { display: block; color: var(--tekst); }
.fo-voet { margin: 10px 0 0; font-size: 11px; color: var(--zacht); }
/* Het uitlijnen (31 okt 2026): één kleine regel bij haar figuur, uitgelijnd op ons model of niet. */
.fo-uitlijning { margin: 6px 0 0; font-size: 11px; color: var(--zacht); }
.fo-uitlijning.fo-niet { color: var(--let); }
.fo .fo-let.fo-spiegel, .fo .fo-let + .fo-let { margin-top: 6px; }
/* De stand van de render (v3): het gestreepte vlak met de vier stappen, de zin en de balk. */
.fo-wacht { min-height: 220px; border-radius: 8px; padding: 16px;
  background: repeating-linear-gradient(135deg, var(--grijsvlak) 0 10px, #eceef0 10px 20px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center;
  font-size: 12px; color: var(--zacht); }
.fo-wacht b { color: var(--tekst); font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.fo-wacht.fo-mislukt b { color: var(--laat); }
.fo-reden { color: var(--tekst); }
.fo-stappen { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; font-size: 10px; }
.fo-stappen span { white-space: nowrap; padding: 1px 8px; border-radius: 99px; background: #fff; border: 1px solid var(--lijn); }
.fo-stappen span.aan { background: var(--donker); color: #fff; border-color: var(--donker); }
.fo-stappen span.ok { background: var(--goed-vlak); border-color: var(--goed); color: var(--goed); }
.fo-mislukt .fo-stappen span.aan { background: var(--laat-vlak); border-color: var(--laat); color: var(--laat); }
.fo-balk { width: 180px; max-width: 100%; height: 6px; border-radius: 3px; background: #d8d9d6; overflow: hidden; }
.fo-balk i { display: block; height: 100%; background: var(--donker); transition: width .4s; }
.fo-tag { font-size: 11px; color: var(--zacht); font-weight: 400; }
.fo-opnieuw { margin: 10px 0 0; }
.fo-intern .fo-let { margin-top: 10px; }
/* Your parts op de Overview */
.fo-yp { margin-top: 10px; background: #fff; border: 1px solid var(--rand); border-radius: 9px; padding: 10px 12px;
  font-size: 12px; }
.fo-yp-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 6px; }
.fo-yp-kop b { font-size: 12.5px; font-weight: 500; }
.fo-yp-knop { margin-left: auto; }
.fo-yp-lijst { margin: 0; padding-left: 16px; color: var(--zacht); }
.fo-yp-lijst li { overflow-wrap: anywhere; }
.fo-yp-anders { color: var(--let); }
.fo-yp-gesplitst { color: #3f6c96; }
.fo-yp-ontbreekt { color: var(--laat); }
.fo-yp-zin { margin: 0; color: var(--zacht); }
.fo-pil-mislukt { background: var(--laat-vlak); color: var(--laat); }
.fo-pil-bezig, .fo-pil-wachtrij, .fo-pil-ontvangen { background: var(--let-vlak); color: var(--let); }
/* Smal (het blok zelf: de Print files van de pagina of het fabrieksblok intern) en op de telefoon: de figuren naast
   elkaar, de lijst eronder. */
.fo { container-type: inline-size; }
@container (max-width: 820px) {
  .fo-raster, .fo-raster.fo-met-ons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fo-raster > .fo-verschil { grid-column: 1 / -1; }
}
@container (max-width: 520px) {
  .fo-raster:not(.fo-met-ons) { grid-template-columns: minmax(0, 1fr); }
  .fo-kop .fo-seg { margin-left: 0; }
}
html.tel .fo-raster, html.tel .fo-raster.fo-met-ons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
html.tel .fo-raster > .fo-verschil { grid-column: 1 / -1; }
html.tel .fo-raster:not(.fo-met-ons) { grid-template-columns: minmax(0, 1fr); }
html.tel .fo-grijs { padding: 6px 6px 2px; }
/* --- einde deel 4 --- */
/* deel 5: het upload-pilletje */
/* --- fabrieksportaal v2, deel 5 --- */
/* --- einde deel 5 --- */

/* PR 2 deel C (de line-up in het portaal, besluit A): de pil *Arms option of B-00028 ›* in de kop van de itempagina van
   een optie waarvan de pose ook gedeeld is (fabriek/_itemkop.html, fabriek_pagina.optie_van). */
.fl-optiepil { margin: 2px 0 4px; }
.fl-optiepil a { display: inline-block; padding: 2px 10px; border: 1px solid var(--rand); border-radius: 999px; font-size: 12px;
  color: var(--tekst); text-decoration: none; }
.fl-optiepil a:hover { border-color: var(--donker); }