/* ══════════════════════════════════════════════════════════════════════════
   SS-ONTWERPSYSTEEM: de gedeelde componentlaag van het portaal
   ──────────────────────────────────────────────────────────────────────────
   Normatief document: project-docs/ONTWERPSYSTEEM.md (PM-795/806). Elke klasse
   hieronder staat daar met wanneer, maat en bron (planning of werkbank).

   LADEN. Centraal: ssp_render_portal_open() zorgt dat dit bestand er is, en een
   style_loader_tag-filter zet het DIRECT achter ss-portal-style.css (zie
   inc/portal-nav.php §4a-bis). Daardoor staat het verhuisde ONTWERPSYSTEEM-blok
   (deel 1) op exact dezelfde plek in de cascade als toen het onderaan
   ss-portal-style.css stond, ook op pagina's die ss-portal-style zonder de
   shell laden. Wijzig die volgorde niet zonder de vóór/na-screenshots opnieuw
   te maken (R-20261007-02: /planning/ pixel-gelijk).

   VIJF DELEN.
   1. Het ONTWERPSYSTEEM-blok uit ss-portal-style.css (Ron 2026-09-15), verhuisd
      zonder wijziging, behalve .ss-kv/.ss-empty (zie de noot daar).
   2. De gidsklassen v3 (prototype R-20261006-15, gemeten op /planning/). Namen
      botsen niet met de oude klassen (§7 gids). .is-screen is hier gescopt op
      .ss-page: het wallboard gebruikt .is-screen al voor zijn eigen schermmodus.
   3. Nieuwe patronen §5.17 link naar andere pagina + §5.18 lightbox + embed-modus.
   4. Paginalayout (regel 7, §5.1, §5.6-bis, §5.19; R-20261007-13): breedteklassen,
      de band en de kop-uitlijning centraal via de shell, plus zijbalk, werkplek en
      zwevende wachtrij.
   5. SS-FORMULIER: de formulierladder (project-docs/STIJLRICHTLIJN-formulieren.md, Ron 17-10-2026,
      PM-939): tokens --ss-form-* en de klassen .ss-formulier__*. Oppervlakken koppelen hun bestaande
      klassen in hun eigen stylesheet aan deze tokens (intake: ss-intake.css SS-FORM-KOPPEL).
      BEWUSTE UITZONDERING op "alleen 400 en 700": --ss-fw-semibold (600), uitsluitend voor het
      veldlabel (PM-933: label en invoer even groot, het verschil zit in het gewicht).

   REGEL: geen hexcode buiten een :root, geen maat buiten de schaal.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   DEEL 1 — ONTWERPSYSTEEM-blok (verhuisd uit ss-portal-style.css, R-20261007-02)
   ══════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════
   ONTWERPSYSTEEM — de ene plek (Ron 2026-09-15)
   ──────────────────────────────────────────────────────────────────────────
   AANLEIDING. Na de wasstraat op de werkbank (PM-651/663) en Field
   (PM-716..721) vroeg Ron het voor de hand liggende: dit zou voor het hele
   platform gelijk moeten zijn, en op één plek te bedienen. Gemeten stand op dat
   moment: 683 losse kleurcodes in de zeven stylesheets, en 1.720 méér in 27
   PHP-bestanden — twee en een half keer zoveel buiten de stylesheets als erin.
   Dat is precies de val waar de Field-pass zelf in liep.

   WAT HIER STAAT, EN WAAROM JUIST DIT.
   1. Een TYPOGRAFIE-SCHAAL als token. Kleuren, ruimte en radius stonden al in
      :root, maar de schaal bestond alleen impliciet, uitgeschreven in de
      `.sdt-*`-regels van de werkbank. Daardoor moest hij bij elk nieuw oppervlak
      handmatig worden overgelezen — met afwijkingen als gevolg. De waarden
      hieronder zijn niet nieuw bedacht: ze zijn uitgelezen uit de werkbank, die
      Ron heeft goedgekeurd, en daarna op Field bewezen.
   2. Vijf GEDEELDE BOUWSTENEN. Lijstrij, paneel, chip, sleutel-waarderij en
      lege staat komen op élk oppervlak terug en worden nu overal opnieuw
      uitgevonden. Zolang die niet gedeeld zijn, betekent "op één plek aanpassen"
      alsnog 27 bestanden langs.

   HOE JE DIT GEBRUIKT: consumeer, herdefinieer niet. Een oppervlak dat afwijkt
   heeft een reden nodig, geen eigen hexcode. Nieuw oppervlak? Begin met deze
   klassen en voeg alleen toe wat echt eigen is aan dat scherm.

   BEWAKER: `.claude/scripts/design-scan.ps1` telt per bestand de losse
   kleurcodes en de maten buiten de schaal. Tokens werken alleen als niets ze
   omzeilt, en niets houdt een volgende sessie tegen om `#8AAAC8` te typen.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Typografie-schaal — uitgelezen uit de werkbank (.sdt-*), bewezen op Field.
     Zes rollen, meer heeft het platform niet nodig gehad. Alleen gewicht 400 en
     700: een derde en vierde trap is op een telefoonscherm niet te onderscheiden
     en leest als vaagheid in plaats van als nuance. */
  --ss-fs-title: 16px;    /* paneel- en schermtitel        (.sdt-bar h2, .sdt-dttl) */
  --ss-fs-item:  14px;    /* lijsttitel, kernregel         (.sdt-row .rt)           */
  --ss-fs-body:  13px;    /* lopende tekst, knoppen        (.sdt-msg, .sdt-btn)     */
  --ss-fs-sub:   12.5px;  /* onderregel bij een kernregel  (.sdt-row .rs, .sdt-dsub)*/
  --ss-fs-meta:  11px;    /* kleine meta, tellers          (.sdt-listcount)         */
  --ss-fs-label: 10.5px;  /* SECTIEKOP in kapitalen        (.sdt-rail h5)           */

  /* Zevende rol, toegevoegd bij de uitrol naar Customer en het pilot-dossier.
     Het blok hierboven zegt: wie een rol mist, voegt er HIER een toe -- niet
     lokaal een eigen maat. Die rol bleek te bestaan: een KPI-getal en een
     compacte schermtitel zijn op 16px onleesbaar als kop, en stonden daarom
     los van elkaar op 30px (pilot-dossier KPI) en 28px (pilot-detail hero).
     Display is GEEN lopende tekst -- gebruik hem alleen voor een enkel getal
     of een schermtitel, nooit voor een lijst of een alinea. */
  --ss-fs-display: 28px;

  --ss-fw-regular: 400;
  --ss-fw-bold: 700;
  --ss-ls-label: .07em;

  --ss-lh-tight: 1.3;     /* titels en lijstregels */
  --ss-lh-body: 1.45;     /* lopende tekst         */

  /* Rijmaten — `.sdt-row` is de maatstaf: ~56px per item. Alles daarboven leest
     als onnodig scrollwerk (Ron, bij het naast elkaar leggen van werkbank en
     Field). 44px is de ondergrens voor iets wat je aantikt. */
  --ss-row-pad: 10px 12px 9px;
  --ss-tap: 44px;
}

/* ── Typografie-rollen als klasse ─────────────────────────────────────────
   Gebruik deze in plaats van font-size/weight te herhalen. Wie een rol mist,
   voegt er hier één toe — niet lokaal een zevende maat. */
body.ss-portal-shell .ss-t-display { font-size: var(--ss-fs-display); font-weight: 700; line-height: 1.1; color: var(--ss-color-text); }
body.ss-portal-shell .ss-t-title { font-size: var(--ss-fs-title); font-weight: var(--ss-fw-bold); line-height: var(--ss-lh-tight); color: var(--ss-color-text); }
body.ss-portal-shell .ss-t-item  { font-size: var(--ss-fs-item);  font-weight: var(--ss-fw-bold); line-height: var(--ss-lh-tight); color: var(--ss-color-text); }
body.ss-portal-shell .ss-t-body  { font-size: var(--ss-fs-body);  font-weight: var(--ss-fw-regular); line-height: var(--ss-lh-body); color: var(--ss-color-text); }
body.ss-portal-shell .ss-t-sub   { font-size: var(--ss-fs-sub);   font-weight: var(--ss-fw-regular); line-height: var(--ss-lh-body); color: var(--ss-color-text-soft); }
body.ss-portal-shell .ss-t-meta  { font-size: var(--ss-fs-meta);  font-weight: var(--ss-fw-regular); color: var(--ss-color-text-soft); }
body.ss-portal-shell .ss-t-label {
  font-size: var(--ss-fs-label); font-weight: var(--ss-fw-bold);
  letter-spacing: var(--ss-ls-label); text-transform: uppercase;
  color: var(--ss-color-text-soft);
}

/* ── 1. Paneel ────────────────────────────────────────────────────────────
   Vlak, haarlijn, één tint. Geen slagschaduw: die was de vorige generatie en
   maakt een scherm met zes panelen rommelig. */
body.ss-portal-shell .ss-panel {
  background: var(--ss-color-surface);
  border: 1px solid var(--ss-color-border);
  border-radius: var(--ss-radius-md);
  padding: var(--ss-space-4);
}
body.ss-portal-shell .ss-panel__title {
  font-size: var(--ss-fs-label); font-weight: var(--ss-fw-bold);
  letter-spacing: var(--ss-ls-label); text-transform: uppercase;
  color: var(--ss-color-text-soft);
  margin: 0 0 var(--ss-space-2);
}
/* Full-bleed variant voor telefoonschermen: geen radius, alleen haarlijnen. */
body.ss-portal-shell .ss-panel--flush {
  border-left: 0; border-right: 0; border-radius: 0;
}

/* ── 2. Lijstrij ──────────────────────────────────────────────────────────
   Twee regels: kernregel en onderregel. Dit is de vorm van de werkbanklijst,
   de Field-ticketlijst en de open meldingen op /piket/ — drie oppervlakken die
   hem los van elkaar hadden uitgevonden. */
body.ss-portal-shell .ss-list {
  display: block;
  background: var(--ss-color-surface);
  border-top: 1px solid var(--ss-color-border);
}
body.ss-portal-shell .ss-list__row {
  display: block; position: relative;
  padding: var(--ss-row-pad);
  border-bottom: 1px solid var(--ss-color-border);
  border-left: 4px solid transparent;   /* ruggengraat: status/fase/eigenaar */
  text-decoration: none; color: inherit; cursor: pointer;
  transition: background var(--ss-transition);
}
body.ss-portal-shell .ss-list__row:hover { background: var(--ss-color-bg); }
body.ss-portal-shell .ss-list__row.is-selected {
  background: #E1EDFF; border-left-color: var(--ss-color-primary);
}
body.ss-portal-shell .ss-list__rt {
  display: block;
  font-size: var(--ss-fs-item); font-weight: var(--ss-fw-bold);
  line-height: var(--ss-lh-tight); color: var(--ss-color-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.ss-portal-shell .ss-list__rs {
  display: block; margin-top: 3px;
  font-size: var(--ss-fs-sub); color: var(--ss-color-text-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── 3. Chip ──────────────────────────────────────────────────────────────
   Tekst op een lichte tint, dus de ink-varianten. LET OP: op een DONKERE
   ondergrond draait de rolverdeling om — daar wordt de tekst wit en draagt een
   bolletje de kleur. Een ink-token is geen platform-brede waarheid maar een
   waarheid op een licht vlak; dat ging bij de Field-statuspil mis (PM-722). */
body.ss-portal-shell .ss-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 999px;
  font-size: var(--ss-fs-meta); font-weight: var(--ss-fw-bold);
  background: var(--ss-color-bg); color: var(--ss-color-text-soft);
  white-space: nowrap;
}
body.ss-portal-shell .ss-chip--success { background: #DBF3E5; color: var(--ss-color-success-ink); }
body.ss-portal-shell .ss-chip--warning { background: #FEEFCE; color: var(--ss-color-warning-ink); }
body.ss-portal-shell .ss-chip--danger  { background: #FDE2E2; color: var(--ss-color-danger-ink); }
body.ss-portal-shell .ss-chip--info    { background: #E1EDFF; color: var(--ss-color-primary-ink); }
/* Op donker: tekst wit, bolletje draagt de kleur. */
body.ss-portal-shell .ss-chip--on-dark { background: rgba(255,255,255,.16); color: #fff; }
body.ss-portal-shell .ss-chip__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

/* ── 4. Sleutel-waarderij en 5. Lege staat ──────────────────────────────────
   Verhuisd naar de gidslaag hieronder (.ss-kv, .ss-empty; ONTWERPSYSTEEM.md §5.9 en
   §5.13). Geen markup gebruikte de oude maten (gemeten R-20261007-02), dus de gids
   is hier de enige definitie; twee definities met verschillende specificiteit zou
   de gids stil overrulen. */

/* ── 6. Inhoudsopgave ─────────────────────────────────────────────────────
   Vervallen in R-20261007-24: portalbeheer gebruikt nu de index-zijbalk van de
   paginalayout (.ss-layout/.ss-side, DEEL 4 c, ONTWERPSYSTEEM.md §5.19). */

/* ══════════════════════════════════════════════════════════════════════════
   DEEL 2 — GIDSKLASSEN v3 (ONTWERPSYSTEEM.md §2-§5.16; bron per patroon in de gids)
   v3 = GEMETEN op de computed styles van /planning/ (Week), niet afgeleid.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  /* Tinten: bestonden alleen als losse hex in .ss-chip--* en in de planning-bak. */
  --ss-tint-info: #E1EDFF;
  --ss-tint-success: #DBF3E5;
  --ss-tint-warning: #FEEFCE;
  --ss-tint-danger: #FDE2E2;
  --ss-tint-wait: #FFFAF1;          /* kopband van de wachtrij-kaart (.ssp-bak-head) */
  --ss-line-wait: #ECD9BF;          /* rand van de wachtrij-kaart (.ssp-bak) */
  --ss-line-wait-soft: #F2E6D3;     /* v2: lijn onder de kopband van de wachtrij-kaart (.ssp-bak-head) */
  --ss-scrim: rgba(17, 35, 59, .45);/* overlay achter dialoog/zijpaneel (.ssp-edit-ov) */
  --ss-shadow-pop: 0 12px 44px rgba(0, 0, 0, .22);
  --ss-radius-xs: 4px;              /* tag */
  --ss-radius-ctl: 7px;             /* v2: segment, kleine knop, invoer (planning gebruikt 7px, niet 8) */
  --ss-fs-small: 12px;              /* v2: gemeten rol "klein": kaart-uitleg, rij-meta, nummer, kleine knop */
  /* Paginabreedte: de kolom van de planning. v1 had een brede variant voor het wallboard;
     dat was de oorzaak van "loopt over de volle breedte". */
  --ss-w-page: 1080px;
  --ss-sheet-w: min(880px, 64vw);
}

/* ── Pagina ─────────────────────────── (.ssp-plan-wrap: max 1080, 8px 4px 40px) */
/* Staat BINNEN .ss-app-main (max 1200, padding 0 24 48) van de portal-shell; die blijft standaard
   (geen width=>wide). Lettergrootte op de container zetten is alleen een vangnet: de body staat op
   22px (theme), de planning zet elk element apart. Regelhoogte 1.5: dat erft alles in de planning
   van de body (gemeten: label 16,5px op 11px, rijtitel 19,5px op 13px); v1 zette 1.45. */
.ss-page { max-width: var(--ss-w-page); margin: 0 auto; padding: var(--ss-space-2) var(--ss-space-1) 40px;
  font-size: var(--ss-fs-body); line-height: 1.5; color: var(--ss-color-text); }
.ss-page--screen { max-width: none; padding: var(--ss-space-3) var(--ss-space-4); }

/* ── Paginakop-kaart ──────────────────── (.ssp-plan-bar / h2 / .ssp-plan-lbl) */
.ss-pagebar { display: flex; flex-wrap: wrap; gap: var(--ss-space-2) 14px; align-items: center;
  background: var(--ss-color-surface); border: 1px solid var(--ss-color-border); border-radius: var(--ss-radius-md);
  padding: var(--ss-space-3) var(--ss-space-4); margin-bottom: 18px; }
/* v2: titel staat op een eigen regel (flex 100%), zoals "Planning — alle geplande werk". */
.ss-pagebar__title { flex: 1 1 100%; margin: 0; font-size: var(--ss-fs-title); font-weight: var(--ss-fw-bold); color: var(--ss-color-text); }
.ss-pagebar__end { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.ss-lbl { font-size: var(--ss-fs-meta); font-weight: var(--ss-fw-regular); text-transform: uppercase; letter-spacing: .04em; color: var(--ss-color-text-soft); margin-right: 2px; }
/* v3: filtergroep = label + zijn knoppen als één ondeelbaar geheel. Bij een smal scherm breekt de
   regel tússen groepen, nooit tussen een label en zijn knoppen (Ron: "ERNST stond niet naast de knoppen"). */
.ss-fgroup { display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: nowrap; white-space: nowrap; }

/* ── Segmentknoppen ───────────────────── (.ssp-plan-seg a) */
/* v2: inactieve tekst is primary-ink. Zo ZIET de planning eruit: body.ss-portal-shell a wint daar
   van de bedoelde grijze tekst, en dat blauw-op-grijs is wat Ron goedkeurde. */
.ss-seg { display: inline-flex; flex-wrap: wrap; gap: var(--ss-space-1); }
.ss-seg > a, .ss-seg > button { font: inherit; font-size: var(--ss-fs-sub); font-weight: var(--ss-fw-regular); line-height: 1; white-space: nowrap;
  color: var(--ss-color-primary-ink); background: var(--ss-color-border); border: 0; border-radius: var(--ss-radius-ctl); padding: 5px 11px; cursor: pointer; text-decoration: none; }
body.ss-portal-shell .ss-seg > a { color: var(--ss-color-primary-ink); text-decoration: none; }
.ss-seg > .is-on, .ss-seg > [aria-selected="true"], body.ss-portal-shell .ss-seg > a.is-on { background: var(--ss-color-primary); color: var(--ss-color-text-on-dark); }
.ss-seg__n { margin-left: 5px; opacity: .8; }

/* ── Knoppen ── drie maten, elk gemeten:
   .ss-button        34px · 0 16px · r8 · 13px  (.ssp-plan-btn "Vastleggen")
   .ss-button--sm    28px · 0 12px · r7 · 12px  (.ssp-bak-go "Inplannen")
   .ss-button--xs    26px · 0 10px · r8 · 11px  (.ssp-bez-refresh "ververs")
   v2: gewicht 400 (v1 had 700; de planning heeft geen vette knoppen).
   Bewuste afwijking: font erft het portalfont; in de planning valt de knop terug op Arial
   (browserstandaard, <button> erft geen font). */
.ss-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; height: 34px; padding: 0 16px;
  font: inherit; font-size: var(--ss-fs-body); font-weight: var(--ss-fw-regular); line-height: 1;
  border-radius: var(--ss-radius-sm); border: 1px solid var(--ss-color-border); background: var(--ss-color-surface); color: var(--ss-color-text-soft); cursor: pointer; text-decoration: none; white-space: nowrap; }
.ss-button:hover { background: var(--ss-color-bg); }
body.ss-portal-shell a.ss-button { color: var(--ss-color-text-soft); text-decoration: none; }
body.ss-portal-shell a.ss-button--primary, body.ss-portal-shell a.ss-button--go { color: var(--ss-color-text-on-dark); }
.ss-button--sm { height: 28px; padding: 0 12px; font-size: var(--ss-fs-small); border-radius: var(--ss-radius-ctl); }
.ss-button--xs { height: 26px; padding: 0 10px; font-size: var(--ss-fs-meta); }
.ss-button--primary { background: var(--ss-color-primary); border-color: transparent; border-width: 0; color: var(--ss-color-text-on-dark); }
.ss-button--go { background: var(--ss-color-success); border-color: transparent; border-width: 0; color: var(--ss-color-text-on-dark); }
.ss-button--primary:hover { background: var(--ss-color-primary); filter: brightness(.95); }
.ss-button--go:hover { background: var(--ss-color-success); filter: brightness(.95); }
.ss-link { background: none; border: 0; padding: 0; font: inherit; font-size: var(--ss-fs-body); font-weight: var(--ss-fw-bold); color: var(--ss-color-primary-ink); cursor: pointer; text-decoration: none; }

/* ── Sectiekaart met kopregel en teller ── (.ssp-bak > .ssp-bak-head; neutraal = .ssp-bez/.ssp-bez-top)
   Kaart: wit, rand 1px, radius 12, GEEN schaduw, 16px eronder.
   Kopregel: titel 14 vet · teller-pil · uitleg 12px rechts; 10px 16px, kopband grijs. */
.ss-blok { background: var(--ss-color-surface); border: 1px solid var(--ss-color-border); border-radius: var(--ss-radius-md); overflow: hidden; margin-bottom: var(--ss-space-4); }
.ss-blok__head { display: flex; align-items: center; gap: 9px; padding: 10px var(--ss-space-4); border-bottom: 1px solid var(--ss-color-border); background: var(--ss-color-bg); }
.ss-blok__title { margin: 0; font-size: var(--ss-fs-item); font-weight: var(--ss-fw-bold); color: var(--ss-color-text); }
.ss-blok__sub { margin-left: auto; font-size: var(--ss-fs-small); color: var(--ss-color-text-soft); }
.ss-blok__end { display: flex; align-items: center; gap: 10px; }
.ss-blok__body { padding: var(--ss-space-3) var(--ss-space-4); font-size: var(--ss-fs-body); line-height: var(--ss-lh-body); }
/* Wachtrij-variant: werk dat op actie wacht ("Te plannen"), nooit ingeklapt. */
.ss-blok--wait { border-color: var(--ss-line-wait); }
.ss-blok--wait > .ss-blok__head { background: var(--ss-tint-wait); border-bottom-color: var(--ss-line-wait-soft); }
/* Teller-pil (.ssp-bak-count): 11 vet, 1px 8px, radius 11. Kleur = statuskleur van de inhoud. */
.ss-count { display: inline-block; border-radius: 11px; padding: 1px 8px; font-size: var(--ss-fs-meta); font-weight: var(--ss-fw-bold); line-height: 1.6;
  background: var(--ss-color-text-soft); color: var(--ss-color-text-on-dark); }
.ss-count--warn { background: var(--ss-color-warning); }
.ss-count--danger { background: var(--ss-color-danger); }
.ss-count--info { background: var(--ss-color-primary); }
/* v3: inklapbare sectiekaart (<details class="ss-blok ss-blok--fold">, de <summary> is de kopregel).
   Voor wat secundair is (robots zonder bijzonderheden, onderdelen van een dossier). Nooit voor een
   wachtrij. Een ingeklapte kaart onderaan een lijst heeft altijd een filter in de paginakop (§5.6). */
.ss-blok--fold > summary { list-style: none; cursor: pointer; }
.ss-blok--fold > summary::-webkit-details-marker { display: none; }
.ss-blok--fold > summary::before { content: '▸'; color: var(--ss-color-text-soft); font-size: var(--ss-fs-meta); width: 8px; }
.ss-blok--fold[open] > summary::before { content: '▾'; }
.ss-blok--fold:not([open]) > .ss-blok__head { border-bottom: 0; }
.ss-blok--fold > summary:hover { background: var(--ss-color-border); }

/* ── Rij in een kaart: tag · nummer · titel · meta · leeftijd · actie ── (.ssp-bak-main)
   v2: ÉÉN regel, geen gekleurde zijstreep (v1 had een linkerrand per ernst; komt in de planning
   niet voor). Ernst/soort zit in de tag. Tweede regel tekst hoort in het dossier. */
.ss-row { box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: var(--ss-space-1) 10px; width: 100%; margin: 0;
  padding: var(--ss-space-2) var(--ss-space-4); border: 0; border-bottom: 1px solid var(--ss-color-border); background: var(--ss-color-surface);
  font: inherit; text-align: left; color: inherit; }
.ss-row:last-child { border-bottom: 0; }
/* ontwerp-uitzondering: een klikbare rij krijgt hover; de planning-rij is niet klikbaar (alleen de knop). */
button.ss-row { cursor: pointer; }
button.ss-row:hover { background: var(--ss-color-bg); }
.ss-row.is-selected { background: var(--ss-tint-info); }
.ss-row__ref { font-size: var(--ss-fs-small); color: var(--ss-color-text-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ss-row__t { flex: 1 1 220px; min-width: 0; font-size: var(--ss-fs-body); font-weight: var(--ss-fw-bold); color: var(--ss-color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-row__meta { font-size: var(--ss-fs-small); color: var(--ss-color-text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.ss-row__age { font-size: var(--ss-fs-meta); color: var(--ss-color-text-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ss-row__age.is-old { color: var(--ss-color-danger); font-weight: var(--ss-fw-bold); }
/* v3: een rij met sleutel-waarde (dossier): label 12px zacht links, waarde 13px rechts, zelfde maat als een lijstrij. */
.ss-row--kv { cursor: default; }
.ss-row--kv .ss-row__k { flex: 0 0 180px; font-size: var(--ss-fs-small); color: var(--ss-color-text-soft); }
.ss-row__v { flex: 1 1 0; min-width: 0; font-size: var(--ss-fs-body); color: var(--ss-color-text); }
.ss-row__t--plain { font-weight: var(--ss-fw-regular); }
.ss-col-chance { width: 220px; }
.ss-row--text { display: block; font-size: var(--ss-fs-body); color: var(--ss-color-text); cursor: default; }
/* Puntenlijst (ONTWERPSYSTEEM §5.7-bis, stijlregel Ron 13-10): tekst als korte punten, één zin per punt. */
.ss-pts { margin: 0 var(--ss-space-4) var(--ss-space-2); padding-left: 1.2em; font-size: var(--ss-fs-body); color: var(--ss-color-text); }
.ss-pts li { margin: var(--ss-space-1) 0; }
.ss-pts .ss-chance { margin-left: var(--ss-space-2); }
/* Accenten: wat aandacht vraagt springt eruit, de rest blijft rustig. */
.ss-bad { color: var(--ss-color-danger-ink); font-weight: var(--ss-fw-bold); }
.ss-warn { color: var(--ss-color-warning-ink); font-weight: var(--ss-fw-bold); }
.ss-good { color: var(--ss-color-success-ink); }
.ss-soft { color: var(--ss-color-text-soft); }

/* ── Tag ───────────────────────────────── (.ssp-bak-badge)
   v2: VOL gekleurd met witte tekst, zoals de werksoort-badge in de planning (v1 had lichte tint
   met donkere tekst; dat patroon bestaat in de planning niet). */
.ss-tag { display: inline-block; font-size: var(--ss-fs-label); font-weight: var(--ss-fw-bold); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap;
  border-radius: var(--ss-radius-xs); padding: 1px 6px; line-height: 1.5; background: var(--ss-color-text-soft); color: var(--ss-color-text-on-dark); }
.ss-tag--danger { background: var(--ss-color-danger); }
.ss-tag--warning { background: var(--ss-color-warning); }
.ss-tag--success { background: var(--ss-color-success); }
.ss-tag--info { background: var(--ss-color-primary); }

/* ── Meer-regel onderaan een kaart ── (.ssp-bak-new > summary: 9px 16px, 12,5 vet primair, grijze band) */
.ss-more { display: block; width: 100%; box-sizing: border-box; padding: 9px var(--ss-space-4); border: 0; border-top: 1px solid var(--ss-color-border); background: var(--ss-color-bg);
  font: inherit; font-size: var(--ss-fs-sub); line-height: 1.5; font-weight: var(--ss-fw-bold); color: var(--ss-color-primary); cursor: pointer; text-align: left; }
.ss-more span { font-weight: var(--ss-fw-regular); color: var(--ss-color-text-soft); }

/* ── Legenda in de kopregel ───────────── (.ssp-bez-legend-inline / .ssp-bez-key) */
.ss-legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: var(--ss-fs-meta); color: var(--ss-color-text-soft); }
.ss-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; margin-right: 4px; background: var(--ss-color-text-soft); }
.ss-key--danger { background: var(--ss-color-danger); } .ss-key--warning { background: var(--ss-color-warning); } .ss-key--info { background: var(--ss-color-primary); }

/* ── Lege toestand ─────────────────────── (.ssp-bak-empty / .ssp-plan-empty) */
.ss-empty { margin: 0; padding: var(--ss-space-3) var(--ss-space-4); font-size: var(--ss-fs-sub); color: var(--ss-color-text-soft); }
.ss-empty--block { background: var(--ss-color-surface); border: 1px dashed var(--ss-color-border); border-radius: var(--ss-radius-md); padding: 36px 20px; text-align: center; font-size: var(--ss-fs-item); }

/* ── Accordion ─────────────── bron werkbank: .sdt-rail details.blk, .sdt-step */
.ss-fold { border-top: 1px solid var(--ss-color-border); }
.ss-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 8px; padding: 9px 0; font-size: var(--ss-fs-body); font-weight: var(--ss-fw-bold); color: var(--ss-color-primary-ink); }
.ss-fold > summary::-webkit-details-marker { display: none; }
.ss-fold > summary::before { content: '▸'; color: var(--ss-color-text-soft); width: 10px; }
.ss-fold[open] > summary::before { content: '▾'; }
.ss-fold__n { font-weight: var(--ss-fw-regular); color: var(--ss-color-text-soft); font-size: var(--ss-fs-sub); }
.ss-fold__body { padding: 0 0 var(--ss-space-3) 18px; font-size: var(--ss-fs-body); line-height: var(--ss-lh-body); }

/* ── Zijpaneel (dossier) + overlay ── bron werkbank: .sdt-detail/.sdt-dhead/.sdt-dl */
.ss-scrim { position: fixed; inset: 0; background: var(--ss-scrim); z-index: 9990; opacity: 0; pointer-events: none; transition: opacity var(--ss-transition); }
.ss-scrim.is-on { opacity: 1; pointer-events: auto; }
/* v3: het paneel is een kleine pagina in de planningstijl: grijze ondergrond, kop als paginakop-kaart
   (wit, 16px vet, uitleg 12px), inhoud als losse (inklapbare) sectiekaarten met rijen van één regel.
   v2 had grote lappen tekst en grijze tabellen direct op wit ("grijze tekstbrij"). */
.ss-sheet { position: fixed; top: 0; right: 0; bottom: 0; width: var(--ss-sheet-w); max-width: 100vw; z-index: 9991; background: var(--ss-color-bg);
  box-shadow: var(--ss-shadow-pop); transform: translateX(105%); transition: transform var(--ss-transition); display: flex; flex-direction: column; font-size: var(--ss-fs-body); line-height: 1.5; color: var(--ss-color-text); }
.ss-sheet.is-on { transform: none; }
.ss-sheet__head { display: flex; align-items: flex-start; gap: 10px; padding: var(--ss-space-3) var(--ss-space-4); background: var(--ss-color-surface); border-bottom: 1px solid var(--ss-color-border); }
.ss-sheet__title { margin: 0; font-size: var(--ss-fs-title); font-weight: var(--ss-fw-bold); color: var(--ss-color-text); }
.ss-sheet__sub { font-size: var(--ss-fs-small); color: var(--ss-color-text-soft); margin-top: 2px; }
.ss-sheet__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 6px; }
.ss-sheet__x { margin-left: auto; border: 0; background: none; font-size: 24px; line-height: 1; color: var(--ss-color-text-soft); cursor: pointer; }
.ss-sheet__body { flex: 1; overflow: auto; padding: var(--ss-space-4); }
.ss-sheet__body > .ss-blok:last-child { margin-bottom: 0; }
/* Telling die zichzelf uitlegt: kleursleutel + aantal + woord, met infoballon (vervangt "3 NU · 2 DREIGT"). */
.ss-tally { display: inline-flex; align-items: center; gap: 4px; font-size: var(--ss-fs-small); color: var(--ss-color-text); white-space: nowrap; }
.ss-tally b { font-weight: var(--ss-fw-bold); }
/* Kans-balk in een tabelcel. */
.ss-chance { display: flex; align-items: center; gap: 8px; }
.ss-chance .ss-bar { flex: 1 1 auto; min-width: 60px; }
.ss-chance b { width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.ss-back { font-size: var(--ss-fs-sub); }
.ss-kv { display: flex; gap: 12px; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid var(--ss-color-border); font-size: var(--ss-fs-sub); }
.ss-kv__k { color: var(--ss-color-text-soft); } .ss-kv__v { color: var(--ss-color-text); text-align: right; }

/* ── Compacte tabel ─── v3: kopcel gemeten op de planning-kolomkop (.ssp-bez-name: 12,5 vet, 7px 10px,
   grijze band, haarlijn); cellen 12,5px, 6px 10px. In een sectiekaart loopt de tabel tot de rand. */
.ss-datatable { width: 100%; border-collapse: collapse; font-size: var(--ss-fs-sub); font-variant-numeric: tabular-nums; }
.ss-datatable th { text-align: left; font-size: var(--ss-fs-sub); font-weight: var(--ss-fw-bold); color: var(--ss-color-text); background: var(--ss-color-bg); padding: 7px 10px; border-bottom: 1px solid var(--ss-color-border); white-space: nowrap; }
.ss-datatable td { padding: 6px 10px; border-bottom: 1px solid var(--ss-color-border); color: var(--ss-color-text); vertical-align: top; }
.ss-datatable tr:last-child td { border-bottom: 0; }
.ss-datatable th:first-child, .ss-datatable td:first-child { padding-left: var(--ss-space-4); }
.ss-datatable th:last-child, .ss-datatable td:last-child { padding-right: var(--ss-space-4); }
.ss-datatable tr.is-muted td { color: var(--ss-color-text-soft); }
.ss-datatable tr.is-muted .ss-strike { text-decoration: line-through; }
.ss-r { text-align: right; }

/* ── Infoballon en balkje ── */
.ss-tip { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--ss-color-border); font-size: var(--ss-fs-label); font-weight: var(--ss-fw-bold); color: var(--ss-color-text-soft); cursor: help; vertical-align: 1px; }
.ss-bar { height: 6px; border-radius: 3px; background: var(--ss-color-bg); overflow: hidden; }
.ss-bar > i { display: block; height: 100%; width: calc(var(--ss-v, 0) * 1%); background: var(--ss-color-primary); }

/* ── Invoer ─────────────── bron werkbank: .sdt-editgrid / .sdt-ctl select */
.ss-input { box-sizing: border-box; width: 100%; height: 34px; border: 1px solid var(--ss-color-border); border-radius: var(--ss-radius-ctl); padding: 0 10px; font: inherit; font-size: var(--ss-fs-body); background: var(--ss-color-surface); color: var(--ss-color-text); }
/* Tekstvak (§5.16): min-hoogte, verticaal rekbaar; .is-over = langer dan toegestaan, met de teller eronder. */
textarea.ss-input { height: auto; min-height: 34px; padding: 7px 10px; line-height: var(--ss-lh-body); resize: vertical; }
.ss-input.is-over { border-color: var(--ss-color-danger); }
.ss-charcount { font-size: var(--ss-fs-meta); color: var(--ss-color-text-soft); text-align: right; margin: 2px 0 0; }
.ss-charcount.is-over { color: var(--ss-color-danger-ink); font-weight: var(--ss-fw-bold); }

/* ── Zwevende assistent (AI) ─────────── (merkbeeld: wit robotje op roze cirkel) */
.ss-fab { position: fixed; right: 22px; bottom: 22px; z-index: 9980; display: flex; align-items: center; gap: 10px; }
.ss-fab__btn { width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--ss-color-hero); box-shadow: var(--ss-shadow-md); cursor: pointer; display: grid; place-items: center; padding: 0; }
.ss-fab__btn img { width: 34px; height: 34px; }
.ss-fab__bubble { background: var(--ss-color-surface); color: var(--ss-color-text); border: 1px solid var(--ss-color-border); border-radius: var(--ss-radius-md) var(--ss-radius-md) var(--ss-radius-xs) var(--ss-radius-md);
  padding: 7px 12px; font-size: var(--ss-fs-body); font-weight: var(--ss-fw-bold); box-shadow: var(--ss-shadow-sm); white-space: nowrap; }
.ss-pop { position: fixed; right: 22px; bottom: 90px; z-index: 9985; width: min(420px, calc(100vw - 44px)); max-height: min(620px, calc(100vh - 120px)); display: none; flex-direction: column;
  background: var(--ss-color-surface); border: 1px solid var(--ss-color-border); border-radius: var(--ss-radius-md); box-shadow: var(--ss-shadow-pop); overflow: hidden; font-size: var(--ss-fs-body); line-height: var(--ss-lh-body); color: var(--ss-color-text); }
.ss-pop.is-on { display: flex; }
.ss-pop__head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--ss-color-hero); color: var(--ss-color-text-on-dark); }
.ss-pop__head img { width: 22px; height: 22px; }
.ss-pop__head .ss-sheet__x { color: var(--ss-color-text-on-dark); }
.ss-pop__body { padding: var(--ss-space-3) 14px; overflow: auto; }

/* ── Groot scherm: één trap groter, zelfde vormen ── */
.ss-page.is-screen, .ss-page--screen { --ss-fs-body: 14px; --ss-fs-sub: 13px; --ss-fs-small: 13px; --ss-fs-item: 16px; }

/* ══════════════════════════════════════════════════════════════════════════
   §5.17 LINK NAAR EEN ANDERE PAGINA en §5.18 LIGHTBOX (regel 5, Ron 2026-10-07)
   ──────────────────────────────────────────────────────────────────────────
   Regel 5 "niet wegleiden": een link naar een andere pagina draagt een vast
   symbool en haalt de gebruiker niet weg uit zijn bezigheid. Markup komt uit
   ssp_link_extern() (inc/portal-nav.php), het gedrag uit
   assets/js/ss-ontwerpsysteem.js. API en keuzeregel (lightbox / zijpaneel /
   nieuw venster): project-docs/ONTWERPSYSTEEM.md §5.17-5.18.
   STABIEL CONTRACT: F1b (doorlink-helper) en de wallboard-ombouw bouwen hierop.
   Klassen hernoemen = de gids én die twee sporen bijwerken.
   ══════════════════════════════════════════════════════════════════════════ */

/* §5.17 Het symbool: een pijl uit een kader, in de linkkleur (mask = currentColor,
   dus ook juist op een donker vlak). Staat achter de tekst en breekt er niet los van. */
.ss-link--extern { white-space: nowrap; }
.ss-link--extern::after {
  content: ''; display: inline-block; width: .78em; height: .78em; margin-left: 3px; vertical-align: -.06em;
  background: currentColor; opacity: .75;
  -webkit-mask: var(--ss-icon-extern) center / contain no-repeat; mask: var(--ss-icon-extern) center / contain no-repeat;
}
.ss-link--extern:hover::after { opacity: 1; }
body.ss-portal-shell a.ss-link--extern { color: var(--ss-color-primary-ink); text-decoration: none; }
body.ss-portal-shell a.ss-link--extern:hover { text-decoration: underline; }
/* Binnen een rijtitel of tabelcel erft de link de maat en het gewicht van zijn plek. */
.ss-row__t .ss-link--extern, .ss-datatable .ss-link--extern, .ss-row__v .ss-link--extern { font-size: inherit; font-weight: inherit; }
/* In een tabelcel mag een lange naam afbreken; nowrap duwt de tabel anders buiten zijn kaart (F1b, gemeten op deployment-admin en locatie-adressen). */
td .ss-link--extern { white-space: normal; }

:root {
  --ss-icon-extern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9 1h6v6h-2V4.4L7.7 9.7 6.3 8.3 11.6 3H9V1z'/%3E%3Cpath d='M3 3h4v2H4v7h7V9h2v5H2V3h1z'/%3E%3C/svg%3E");
  --ss-lightbox-w: min(1180px, 94vw);
  --ss-lightbox-h: min(860px, 90vh);
}

/* §5.18 Lightbox: de doelpagina in een venster óp de huidige pagina. Overlay = de
   .ss-scrim van §5.9, kop = de kop van het zijpaneel, inhoud = de doelpagina in
   ?embed=1 (zonder portalkop). Sluit bij Esc, kruisje en klik op de overlay. */
.ss-lightbox {
  position: fixed; left: 50%; top: 50%; z-index: 9991; width: var(--ss-lightbox-w); height: var(--ss-lightbox-h);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--ss-color-bg); border-radius: var(--ss-radius-md); box-shadow: var(--ss-shadow-pop);
  transform: translate(-50%, -48%); opacity: 0; pointer-events: none;
  transition: opacity var(--ss-transition), transform var(--ss-transition);
}
.ss-lightbox.is-on { transform: translate(-50%, -50%); opacity: 1; pointer-events: auto; }
.ss-lightbox__head { display: flex; align-items: center; gap: 10px; padding: 10px var(--ss-space-4); background: var(--ss-color-surface); border-bottom: 1px solid var(--ss-color-border); }
.ss-lightbox__title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: var(--ss-fs-title); font-weight: var(--ss-fw-bold); color: var(--ss-color-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-lightbox__head .ss-sheet__x { margin-left: 0; }
.ss-lightbox__frame { flex: 1 1 auto; width: 100%; border: 0; background: var(--ss-color-bg); }
.ss-lightbox__wait { position: absolute; left: 0; right: 0; top: 50%; text-align: center; font-size: var(--ss-fs-sub); color: var(--ss-color-text-soft); }
.ss-lightbox.is-loaded .ss-lightbox__wait { display: none; }
html.ss-noscroll, html.ss-noscroll body { overflow: hidden; }
@media (max-width: 700px) {
  .ss-lightbox { --ss-lightbox-w: 100vw; --ss-lightbox-h: 100vh; border-radius: 0; }
}

/* Embed-modus (?embed=1, ssp_portal_is_embed()): dezelfde pagina zonder portalkop,
   roze band en adminbalk, zodat hij in een lightbox past. */
body.ss-portal-shell.is-embed .ss-app-shell { background: var(--ss-color-bg); min-height: 0; }
body.ss-portal-shell.is-embed .ss-app-main { padding-top: var(--ss-space-4); }

/* ══════════════════════════════════════════════════════════════════════════
   DEEL 4 — PAGINALAYOUT (ONTWERPSYSTEEM.md regel 7, §5.1, §5.6-bis, §5.19)
   ──────────────────────────────────────────────────────────────────────────
   Voorstel R-20261007-10 (v2, goedgekeurd door Ron 2026-10-07), centraal gebouwd
   in R-20261007-13. Alles hangt aan de shell (ssp_render_portal_open): body-klasse
   ss-w--{read|page|wide|screen}, ss-band-off en ss-is-work. Een pagina erft het
   zonder eigen CSS; ze zet geen eigen -40px en geen eigen max-width op haar
   buitenste blok.
   Buiten deze regel (eigen kop, geen ss-w-klasse): field-app (/fae/, werkbon),
   pilot-dossier en pilot-singles, vlootdashboard, fleet-analytics, login.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --ss-band-overlap: 40px;   /* inhoud steekt in de roze band: precies de lege onderrand van de portalkop */
  --ss-w-read: 820px;        /* leesbreed: formulier en instellingen zonder zijbalk, intake */
  --ss-w-wide: 1440px;       /* breed: werkplek en analyse (werkbank, planning met zijbalk, verkenner) */
  --ss-w-cur: var(--ss-w-page);
  --ss-side-w: 232px;        /* zijbalk (index of bediening) */
  --ss-side-gap: 24px;
  --ss-sticky-top: 12px;     /* afstand van een zwevend element tot de vensterrand */
  --ss-float-top: var(--ss-sticky-top); /* bovenrand van een zwevende wachtrij (§5.6-bis); smal: onder de zijbalkstrook */
}

/* ── (a) Contentvlak in de band (§5.1 a) ──────────────────────────────────
   De portalkop heeft 40px lege onderrand. Die trekt de shell centraal in, zodat de
   eerste kaart direct onder het menu begint, op elke breedte. Vervangt de losse
   -40px-regels op .ss-portal-grid, .ss-form-card, .ss-portal-tiles.
   Uit met 'band' => false
   (ss-band-off). Embed (lightbox) heeft geen kop en dus geen band. */
body.ss-portal-shell[class*="ss-w--"]:not(.is-embed):not(.ss-band-off) .ss-app-main > .ss-portal-hero-bar {
  margin-bottom: calc(-1 * var(--ss-band-overlap));
}

/* ── (b) Breedteklassen + uitlijning van de portalkop (§5.1 b) ────────────
   De klasse zet --ss-w-cur, en daaruit volgen de kolom van <main>, de binnenkant
   van de portalkop en de inhoud. Logo en eerste menu-item staan recht boven de
   linkerrand van de inhoud, bel, Uitloggen en Instellingen recht boven de
   rechterrand. De goot komt alleen nog van <main> (24px, mobiel 12-16px). */
body.ss-w--read { --ss-w-cur: var(--ss-w-read); }
body.ss-w--page { --ss-w-cur: var(--ss-w-page); }
body.ss-w--wide { --ss-w-cur: var(--ss-w-wide); }
body[class*="ss-w--"] .ss-app-main { max-width: calc(var(--ss-w-cur) + 2 * var(--ss-space-5)); }
body.ss-w--screen .ss-app-main { max-width: none; }
body[class*="ss-w--"] .ss-app-main > .ss-portal-hero-bar { max-width: none; padding-left: 0; padding-right: 0; }
/* Oude buitenste wrappers die de volle kolom bedoelen (eigen max-width 1080-1280 +
   4-24px zijpadding) lijnen zo ook uit met de kop, tot hun pagina gemigreerd is naar
   .ss-page (stap 2-5). Bovenpadding 0: de eerste kaart staat op de bandlijn.
   kanalen-admin is in stap 5 groep 4 (R-20261008-04) gemigreerd naar .ss-page met
   'width' => 'read' en staat hier dus niet meer apart. machine-locaties, qr-stickers en
   deployment-voorstellen zijn in stap 5 "lijsten run 1" (R-20261008-06) gemigreerd naar
   .ss-page en staan hier dus niet meer apart (.ml-wrap/.qs-wrap/.dv-wrap bestaan niet
   meer). sporen, dispatch-cleanup, locatie-adressen en intake zijn in stap 5 "lijsten
   run 2" (R-20261008-08) gemigreerd naar een expliciete breedteklasse ('page' resp.
   'read' voor intake) en staan hier dus niet meer apart (.ssx-wrap, .ssdc-wrap,
   .ssp-la-wrap en .ssp-intake-wrap zetten zelf geen max-width meer). pilots en
   werkbonnen zijn in stap 5 expliciet op 'page' gezet (R-20261008-11), hadden al geen
   eigen wrapper. .ssp-ct-wrap bestaat niet meer (contact-admin liet die in een eerdere
   stap al vervallen) en staat hier dus niet meer. */
body[class*="ss-w--"] :is(.ss-page, .ss-portal-tiles, .ssp-plan-wrap, .sdt-wrap,
  .ssp-cw-wrap) {
  max-width: none; margin-top: 0; padding-top: 0; padding-left: 0; padding-right: 0;
}
/* Een kaart uit de field-laag (.ssp-fae-card, eigen max 640 + centreren) vult in een
   portalpagina de kolom: zo valt haar rechterrand onder die van de kop (portalbeheer,
   R-20261007-24). De field-app zelf heeft geen ss-w-klasse en houdt haar 640. */
body[class*="ss-w--"] :is(.ss-page, .ss-layout__main) > .ssp-fae-card { max-width: none; margin: 0; width: 100%; }

/* ── (c) Zijbalk: index of bediening, zwevend (§5.19) ─────────────────────
   .ss-layout = zijbalk + inhoud. De zijbalk blijft staan terwijl de inhoud scrolt
   en scrolt zelf als hij langer is dan het venster. Gedrag (open/dicht per
   breedte, actieve sectie) in ss-ontwerpsysteem.js via [data-ss-side]. */
.ss-layout { display: grid; grid-template-columns: var(--ss-side-w) minmax(0, 1fr); gap: var(--ss-side-gap); align-items: start; }
.ss-layout > .ss-layout__main { min-width: 0; }
.ss-side {
  position: sticky; top: var(--ss-sticky-top);
  max-height: calc(100vh - 2 * var(--ss-sticky-top)); overflow-y: auto; overscroll-behavior: contain;
  background: var(--ss-color-surface); border: 1px solid var(--ss-color-border); border-radius: var(--ss-radius-md);
  padding: var(--ss-space-3) var(--ss-space-4);
  font-size: var(--ss-fs-body); line-height: 1.5; color: var(--ss-color-text);
}
.ss-side__sum { display: none; }
.ss-side__title { margin: 0 0 var(--ss-space-2); font-size: var(--ss-fs-item); font-weight: var(--ss-fw-bold); }
/* Bediening: groep = label boven, knoppen eronder (in 232px past label-naast-knoppen niet). */
.ss-side__group { padding: var(--ss-space-2) 0; border-top: 1px solid var(--ss-color-border); }
.ss-side__group:first-of-type { border-top: 0; padding-top: 0; }
.ss-side__group > .ss-lbl { display: block; margin: 0 0 6px; }
.ss-side__group > .ss-seg { flex-wrap: wrap; gap: 6px 4px; }
.ss-side__group > .ss-seg--col { display: flex; flex-direction: column; align-items: stretch; }
.ss-side__group > .ss-seg--col > a, .ss-side__group > .ss-seg--col > button { text-align: left; }
/* Bladeren (‹ periode ›): de middelste knop rekt op, zo staan de pijlen aan de randen. */
.ss-side__group > .ss-seg--nav { display: flex; flex-wrap: nowrap; }
.ss-side__group > .ss-seg--nav > a:nth-child(2) { flex: 1 1 auto; min-width: 0; padding-left: 6px; padding-right: 6px; text-align: center; overflow: hidden; text-overflow: ellipsis; }
.ss-side__group > .ss-seg--nav > a:first-child, .ss-side__group > .ss-seg--nav > a:last-child { flex: 0 0 28px; padding-left: 0; padding-right: 0; text-align: center; }
/* Index: sectielinks met actieve markering (overgenomen van .ss-toc, portalbeheer). */
.ss-side__ix { list-style: none; margin: 0 0 var(--ss-space-2); padding: 0; }
.ss-side__ix a {
  display: block; padding: 5px var(--ss-space-2); border-left: 3px solid transparent;
  border-radius: 0 var(--ss-radius-sm) var(--ss-radius-sm) 0;
  font-size: var(--ss-fs-body); line-height: var(--ss-lh-tight); color: var(--ss-color-text); text-decoration: none;
}
body.ss-portal-shell .ss-side__ix a { color: var(--ss-color-text); }
.ss-side__ix a:hover { background: var(--ss-color-bg); }
.ss-side__ix a.is-active, body.ss-portal-shell .ss-side__ix a.is-active {
  border-left-color: var(--ss-color-primary); background: var(--ss-color-bg); color: var(--ss-color-primary-ink); font-weight: 700;
}
.ss-side__grp { margin: var(--ss-space-3) 0 var(--ss-space-1); }
.ss-side__grp:first-child { margin-top: 0; }
.ss-side__top { display: block; margin-top: var(--ss-space-3); padding-top: var(--ss-space-2);
  border-top: 1px solid var(--ss-color-border); font-size: var(--ss-fs-sub); }
/* Een anker in de inhoud landt net onder de vensterrand, niet ertegenaan; smal onder de strook. */
.ss-layout__main [id] { scroll-margin-top: var(--ss-space-4); }
/* Smal (< 1100px): de zijbalk wordt een zwevende strook boven de inhoud, één regel
   met de huidige keuze; tik = uitklappen. Zo blijft bediening ook op een tablet in beeld. */
@media (max-width: 1099px) {
  .ss-layout { display: block; }
  .ss-side { z-index: 20; top: 0; max-height: none; overflow: visible; margin-bottom: var(--ss-space-3);
    padding: 0; border-radius: var(--ss-radius-md); box-shadow: var(--ss-shadow-pop); }
  .ss-side__sum { display: flex; align-items: center; gap: var(--ss-space-2); min-height: var(--ss-tap);
    padding: 0 var(--ss-space-4); cursor: pointer; list-style: none; font-weight: 700; }
  .ss-side__sum::-webkit-details-marker { display: none; }
  .ss-side__sum .ss-t-meta { font-weight: 400; color: var(--ss-color-text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ss-side__sum::after { content: "▾"; margin-left: auto; color: var(--ss-color-primary-ink); }
  .ss-side[open] .ss-side__sum::after { content: "▴"; }
  .ss-side__body { padding: 0 var(--ss-space-4) var(--ss-space-3); max-height: 70vh; overflow-y: auto; }
  /* Een zwevende wachtrij naast de strook schuift eronder in plaats van erachter. */
  .ss-layout { --ss-float-top: calc(var(--ss-tap) + var(--ss-space-3)); }
  .ss-layout__main [id] { scroll-margin-top: calc(var(--ss-tap) + var(--ss-space-4)); }
}

/* ── Werkplek: lijst-zijbalk + dossier, vult het venster (§5.19) ──────────
   Master-detail (werkbank, stap 2). De pagina zelf scrolt niet; lijst en dossier
   scrollen elk binnen hun kolom. De rij is minmax(0, 1fr) en de kolommen min-height
   0: zonder die twee groeit de rij mee met een lang dossier (een grid-item krimpt
   standaard niet onder zijn inhoud) en scrolt de zoekbalk weg. --ss-work-h zet de
   pagina (venster min bovenkant werkvlak min 16px, minimaal 480). */
.ss-work { display: grid; grid-template-columns: 340px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: var(--ss-space-3);
  height: var(--ss-work-h, 660px); min-height: 480px; }
.ss-work > * { min-height: 0; }
/* 'layout' => 'work': geen 48px witruimte onder het werkvlak, anders scrolt de pagina alsnog net. */
body.ss-is-work .ss-app-main { padding-bottom: 0; }
/* Het dichte megamenu van de portalkop is onzichtbaar maar telt mee voor de paginahoogte; op een
   laag venster scrolde de werkbank daardoor toch (gemeten R-20261007-16: 7px op 1280x720, ~70px op
   een laptop met browserbalk). Op een werkplek staat het dichte menu daarom uit de opmaak. */
body.ss-is-work .ss-pillar:not(:hover):not(:focus-within):not(.is-open) > .ss-mega { display: none; }
@media (max-width: 900px) { .ss-work { display: block; height: auto; } }

/* ── (d) Paginakop met acties, geen losse blokken erboven (§5.1 d) ────────
   Filters in de zijbalk: titel en acties op één regel. Een actie met een eigen
   formulier is een knop met uitklap; een terugmelding is één regel in de kop. */
.ss-pagebar--one { flex-wrap: nowrap; }
.ss-pagebar--one > .ss-pagebar__title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-pagebar__note { flex: 1 1 100%; margin: 0; padding: 6px 10px; border-radius: var(--ss-radius-ctl);
  font-size: var(--ss-fs-small); background: var(--ss-tint-success); color: var(--ss-color-success-ink); }
.ss-pagebar__note--err { background: var(--ss-tint-danger); color: var(--ss-color-danger-ink); }
.ss-dropdown { position: relative; }
.ss-dropdown > summary { list-style: none; }
.ss-dropdown > summary::-webkit-details-marker { display: none; }
.ss-dropdown > summary::after { content: "▾"; margin-left: 6px; font-size: var(--ss-fs-meta); }
.ss-dropdown__panel { position: absolute; z-index: 40; top: calc(100% + 6px); right: 0; width: min(380px, 90vw);
  background: var(--ss-color-surface); border: 1px solid var(--ss-color-border); border-radius: var(--ss-radius-md);
  box-shadow: var(--ss-shadow-pop); padding: var(--ss-space-3) var(--ss-space-4); font-size: var(--ss-fs-body); line-height: 1.5; }
.ss-dropdown__panel p { margin: 0 0 var(--ss-space-2); }
.ss-dropdown__row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--ss-space-2); }

/* ── Zwevende wachtrij-kaart (§5.6-bis) ───────────────────────────────────
   Een wachtrij (§5.6 .ss-blok--wait) boven een lange inhoud waarin je zoekt
   (planning: "Te plannen" boven de agenda). Blijft bovenin staan, inklapbaar met
   teller, eigen scroll vanaf ~3 rijen. Een tabelkop eronder zweeft ONDER de
   kaart: de pagina zet --ss-float-h (hoogte van de kaart). Een overflow hidden/auto
   op een voorouder breekt sticky: gebruik daar overflow: clip. */
.ss-blok--float { position: sticky; top: var(--ss-float-top, var(--ss-sticky-top)); z-index: 6; }
.ss-blok--float.is-stuck { box-shadow: var(--ss-shadow-pop); }
.ss-blok__fold { margin-left: var(--ss-space-2); border: 0; background: none; padding: 0 4px; cursor: pointer;
  font: inherit; font-size: var(--ss-fs-small); color: var(--ss-color-primary-ink); }
.ss-blok__scroll { max-height: min(184px, 30vh); overflow-y: auto; overscroll-behavior: contain; }
.ss-blok--float.is-folded .ss-blok__scroll { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   SS-FORMULIER: de formulierladder (geratificeerd Ron 17-10-2026, project-docs/STIJLRICHTLIJN-formulieren.md)
   DEEL 5. Bron: project-docs/_voorbeelden/stijlrichtlijn-formulieren.html (zelfde blok).
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  /* Ladder: maat per niveau (mobiel; desktop-overrides hieronder) */
  --ss-form-fs-blok: 20px;      /* 1 onderdeel / blok        */
  --ss-form-fs-par: 17px;       /* 2 paragraaf / subblok     */
  --ss-form-fs-label: 16px;     /* 3 groepskop + veldlabel   */
  --ss-form-fs-input: 16px;     /* 4 invoer (nooit < 16: iOS-zoom) */
  --ss-form-fs-option: 15px;    /*   keuze-optie (vinkje/radio) */
  --ss-form-fs-hint: 13px;      /* 5 toelichting, (…) achter titel, (i)-ballon */
  --ss-fw-semibold: 600;        /* alleen voor veldlabels (PM-933) */
  --ss-form-color-par: var(--ss-color-accent);
  --ss-color-placeholder: #7B8593;
  --ss-form-tint-info: #F6F9FD;
  --ss-form-color-info: #3D4652;
  /* Ritme (alles op de bestaande ruimteschaal) */
  --ss-form-gap-label: var(--ss-space-1);   /*  4  label → invoer            */
  --ss-form-gap-hint: var(--ss-space-1);    /*  4  invoer → hint             */
  --ss-form-gap-field: var(--ss-space-4);   /* 16  veld → veld               */
  --ss-form-gap-group: var(--ss-space-5);   /* 24  groep → groep             */
  --ss-form-gap-par: var(--ss-space-6);     /* 32  paragraaf → paragraaf     */
  --ss-form-gap-actions: var(--ss-space-5); /* 24  laatste veld → knoppenrij */
  --ss-form-pad-blok: var(--ss-space-4);    /* 16  binnenrand blok (desktop 24) */
  /* Knoppen */
  --ss-form-btn-h: 40px;
  --ss-form-btn-pad: 0 var(--ss-space-4);
  --ss-form-btn-fs: 14px;
}
@media (min-width: 900px) {
  :root { --ss-form-fs-blok: 22px; --ss-form-fs-par: 18px; --ss-form-pad-blok: var(--ss-space-5); --ss-form-btn-h: 36px; }
}

.ss-formulier { font-size: var(--ss-form-fs-input); line-height: 1.45; color: var(--ss-color-text); }

/* 1 Onderdeel / blok */
.ss-formulier__blok { background: var(--ss-color-surface); border: 1px solid var(--ss-color-border);
  border-radius: var(--ss-radius-md); margin: 0 0 var(--ss-space-4); }
.ss-formulier__blok > summary, .ss-formulier__blok-kop { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--ss-space-2);
  margin: 0; padding: var(--ss-space-3) var(--ss-form-pad-blok); list-style: none; cursor: pointer;
  font-size: var(--ss-form-fs-blok); font-weight: var(--ss-fw-bold); line-height: 1.25; color: var(--ss-color-text); }
.ss-formulier__blok > summary::-webkit-details-marker { display: none; }
.ss-formulier__blok > summary::after { content: "▾"; margin-left: auto; font-size: var(--ss-form-fs-hint); color: var(--ss-color-text-soft); }
.ss-formulier__blok:not([open]) > summary::after { content: "▸"; }
.ss-formulier__blok[open] > summary, .ss-formulier__blok-kop { border-bottom: 1px solid var(--ss-color-border); }
.ss-formulier__body { padding: var(--ss-space-4) var(--ss-form-pad-blok) var(--ss-form-pad-blok); }

/* Toelichting achter een titel: hint-stijl, nooit de titelmaat of het titelgewicht */
.ss-formulier__toel { font-size: var(--ss-form-fs-hint); font-weight: var(--ss-fw-regular); color: var(--ss-color-text-soft); }

/* 2 Paragraaf / subblok */
.ss-formulier__par { margin: var(--ss-form-gap-par) 0 var(--ss-space-3); font-size: var(--ss-form-fs-par);
  font-weight: var(--ss-fw-bold); line-height: 1.3; color: var(--ss-form-color-par); }
.ss-formulier__body > .ss-formulier__par:first-child { margin-top: 0; }

/* 3 Groepskop (legend) en veldlabel: zelfde maat; groepskop vet + meer ruimte erboven */
.ss-formulier__groep { margin: var(--ss-form-gap-group) 0 0; padding: 0; border: 0; min-width: 0; }
.ss-formulier__groep:first-child, .ss-formulier__par + .ss-formulier__groep { margin-top: 0; }
.ss-formulier__groep > legend { padding: 0; margin: 0 0 var(--ss-space-2); font-size: var(--ss-form-fs-label);
  font-weight: var(--ss-fw-bold); line-height: 1.3; color: var(--ss-color-text); }
.ss-formulier__veld { margin: 0 0 var(--ss-form-gap-field); }
.ss-formulier__veld:last-child { margin-bottom: 0; }
.ss-formulier__label { display: block; margin: 0 0 var(--ss-form-gap-label); font-size: var(--ss-form-fs-label);
  font-weight: var(--ss-fw-semibold); line-height: 1.3; color: var(--ss-color-text); text-transform: none; letter-spacing: normal; }

/* 4 Invoer */
.ss-formulier input:not([type=checkbox]):not([type=radio]):not([type=hidden]), .ss-formulier select, .ss-formulier textarea {
  box-sizing: border-box; width: 100%; min-height: var(--ss-tap); padding: 0 var(--ss-space-3);
  font: inherit; font-size: var(--ss-form-fs-input); font-weight: var(--ss-fw-regular); color: var(--ss-color-text);
  background: var(--ss-color-surface); border: 1px solid var(--ss-color-border); border-radius: var(--ss-radius-ctl); }
.ss-formulier textarea { padding: var(--ss-space-2) var(--ss-space-3); min-height: 88px; }
.ss-formulier ::placeholder { color: var(--ss-color-placeholder); font-size: var(--ss-form-fs-input); opacity: 1; }
.ss-formulier__optie { display: flex; align-items: center; gap: var(--ss-space-2); min-height: var(--ss-tap);
  font-size: var(--ss-form-fs-option); font-weight: var(--ss-fw-regular); }

/* 5 Toelichting / hint / (i)-ballon */
.ss-formulier__hint { margin: var(--ss-form-gap-hint) 0 0; font-size: var(--ss-form-fs-hint); line-height: 1.4; color: var(--ss-color-text-soft); }
.ss-formulier__info { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: 6px;
  border: 1px solid var(--ss-color-border); border-radius: 50%; background: var(--ss-color-surface);
  font: italic 700 12px/1 Georgia, serif; color: var(--ss-color-text-soft); vertical-align: 1px; }
.ss-formulier__ballon { display: block; margin: var(--ss-space-1) 0 var(--ss-space-2); padding: 6px 9px; border-radius: 6px;
  background: var(--ss-form-tint-info); font-size: var(--ss-form-fs-hint); font-weight: var(--ss-fw-regular); line-height: 1.4; color: var(--ss-form-color-info); }

/* Knoppen: compact, gecentreerd onder de inhoud, vaste ruimte erboven */
.ss-formulier__acties { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--ss-space-2);
  margin-top: var(--ss-form-gap-actions); }
.ss-formulier__knop { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  height: var(--ss-form-btn-h); padding: var(--ss-form-btn-pad); border-radius: var(--ss-radius-sm);
  font: inherit; font-size: var(--ss-form-btn-fs); font-weight: var(--ss-fw-bold); line-height: 1; white-space: nowrap; cursor: pointer;
  background: var(--ss-color-surface); color: var(--ss-color-primary-ink); border: 1px solid var(--ss-color-border); }
.ss-formulier__knop--primair { background: var(--ss-color-primary); color: var(--ss-color-text-on-dark); border-color: transparent; }
.ss-formulier__knop--tekst { background: none; border-color: transparent; padding: 0 var(--ss-space-2); }
/* De enige volle breedte: de vaste opslagbalk onderaan het scherm */
.ss-formulier__opslagbalk { position: sticky; bottom: 0; display: flex; align-items: center; gap: var(--ss-space-3);
  padding: var(--ss-space-2) var(--ss-space-4); background: var(--ss-color-surface); border-top: 1px solid var(--ss-color-border); }
.ss-formulier__opslagbalk .ss-formulier__knop { margin-left: auto; }
.ss-formulier__opslagstatus { font-size: var(--ss-form-fs-hint); color: var(--ss-color-text-soft); }