/* =============================================================================
   Instellingen — sectie Bedrijf (rail: chip B1, componentlaag: 10-09-2026)
   Handoff: 4. DESIGN HANDOFFS/02_PORTAAL/2026-09-08_bedrijfsinstellingen/

   Staat sinds N1 in de <head> van index.html en wordt NIET meer lui geladen.
   De markup van Bedrijf en Account is statisch (index.html), dus een blad dat
   pas bij de eerste klik in de head gaat hangen komt per definitie te laat: de
   kale markup staat dan al in beeld. Gemeten met een vertraagd blad: .card
   zonder rand, zonder vulling en zonder radius, .st-rail-item als kale
   systeemknop (2px outset), en een sprong van 244px horizontaal zodra het blad
   alsnog aansloeg. Lui laden past bij platform.css/delen.css/media.css/
   planning.css - daar bouwt een lazy ES-module de markup pas ná het blad op.

   Bewust NIET samengevoegd met styles.css: alles hier hoort bij één laag, en de
   generieke namen uit de handoff (.card, .field, .btn) staan daarom gescoped op
   .st-settings. Dat scheiden is de reden voor een eigen bestand; het lui laden
   was dat niet.

   Tekst en ruimte staan op de schaal van docs/schaal.md: een tekstdeclaratie
   zet --text-N én --lh-N, gap/padding/marge gebruiken --space-N (tokens in
   styles.css). Twee declaraties staan er bewust buiten (de kolomkop en de
   subregel van .tname, zie daar); tests/schaal-instellingen.test.js bewaakt
   het geheel.

   Alle kleuren komen uit de bestaande --hc-* tokens in styles.css; er staat
   hier geen enkele nieuwe kleurwaarde. Het vocabulaire (.st-*) is dat van de
   handoff, zodat deze en de platformbeheer-handoff dezelfde CSS-taal spreken.

   Twee bewuste keuzes, allebei meetbaar:
   - Railrij 38px hoog, niet de 36px uit het prototype. RULES.md legt de
     controlehoogte op 38 vast en dat weegt hier zwaarder dan twee pixels
     verschil met de tekening. .pf-rail in platformbeheer komt met padding
     8/12 op ~36 uit; wie die twee ooit gelijk wil trekken, doet dat daar.
   - De paginabreedte gaat van 1120 naar 1244 (220 rail + 24 gutter + 1000
     inhoud). RULES' 1120 is een maat voor de INHOUD; de rail is chrome die
     ernaast staat. Onder ~1544px viewport haalt de pagina die breedte toch
     nooit, dus in de praktijk raakt dit alleen zeer brede schermen.
   ========================================================================== */

/* De Bedrijf-pagina zelf. .account-page.company-page cap op 1120px is de
   inhoudsbreedte van vóór de rail; met de rail ernaast telt die 220 + 24 erbij.
   Twee klassen in de selector, want .account-page.company-page in styles.css is
   even specifiek — één klasse verliest daarvan en had de cap stil op 1120
   gelaten. */
.account-page.st-settings-page { max-width: 1244px; }

/* B4 — Account draagt dezelfde rail, maar niet dezelfde inhoudsbreedte.
   Bedrijf heeft brede panelen (tabellen, formulier + preview, kaartgrid) en
   gaat daarom naar 1000px inhoud. De accountpanelen zijn persoonlijke
   formulieren en stonden altijd in de 720px-leeskolom van .account-page; die
   breedte blijft, met de rail ernaast: 220 + 24 gutter + 720 = 964.
   Twee klassen in de selector om dezelfde reden als hierboven — .account-page
   in styles.css zet de cap op 720 en één klasse zou daarvan verliezen. */
.account-page.st-account-page { max-width: 964px; }

.st-settings {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

/* ══ De componentlaag uit de handoff ═══════════════════════════════════════
   instellingen-redesign.css levert naast de rail een complete woordenschat
   voor het BINNENWERK van een paneel: .card/.card-head/.kv/.pill/.chip/.btn/
   .field/.tbl/.meter/.empty plus de formulierritmiek (.frow/.form-foot/
   .grid-2). B1 nam alleen de rail over; daardoor vielen alle panelen terug op
   oudere portaalcomponenten (.account-card, .stack-form) en stond er geen
   enkele tweekoloms rij of vaste formuliervoet. Deze laag zet dat recht.

   Waarom de generieke namen op .st-settings gescoped staan: .card, .btn,
   .chip, .pill, .kv, .meter, .empty, .hint, .frow, .grid-2, .form-foot,
   .card-head, .sub, .tbl en .tname komen vandaag nergens anders in het portaal
   voor als eigen klasse. Eén nuance op de opdracht: .field bestaat wél, als
   `.login-view .field` (styles.css:282) — zelf al gescoped, dus ook die twee
   raken elkaar niet. Ze zijn generiek genoeg dat een latere sectie er onder
   dezelfde naam iets anders van maakt, en blijven daarom binnen deze kolom.
   De st-*-klassen blijven ongescoped, net als bij B1: die naam is uniek, en
   .st-seat (hoort op Gebruikers) en .st-operator-bar (hoort bóven de pagina)
   staan bewust buiten .st-settings. Eén uitzondering, met een andere reden dan
   naamsbotsing: .st-switch MOET gescoped staan om de centrale
   input[type="checkbox"]-regel te verslaan. Die staat bij de schakelaar
   hieronder uitgeschreven.

   Twee afwijkingen van het prototype. RULES.md is de meetlat:
   - Geen focus- of maatregels op .field-velden. styles.css:5056/5071 zet de
     veldmaat (38px, radius 8, border, wit) en :5125 de focusring centraal voor
     élk veld in het portaal, mét een expliciete waarschuwing om daar geen
     component-eigen variant naast te zetten (A244/A271). De laag zet hier dus
     alleen wat de portaalregel niet dekt.
   - Geen kaartschaduw. Het prototype zet een letterlijke rgba; RULES noemt
     shadow-sm, maar --shadow-sm bestaat in dit portaal alleen BINNEN
     .login-view (styles.css:239) en zou hier stil transparant worden. Het
     app-brede token is --shadow: none en elke andere kaart in het portaal is
     vlak — een schaduw op alleen deze acht panelen maakt Bedrijf de
     uitzondering in plaats van de norm.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Sectiekop boven de kaarten ──────────────────────────── */
/* De naam van de sectie stond tot deze ronde in de paginakop, bóven de rail en
   over de volle breedte — daar leest hij als paginatitel. In de handoff staat
   hij in de inhoudskolom, naast de railregel die hem benoemt. De paginakop is
   daarom weer wat hij in het prototype is: één vaste kop voor de hele sectie. */
.st-panel-head { margin-bottom: var(--space-4); }
.st-panel-head h2 { margin: 0; font-size: var(--text-16); line-height: var(--lh-16); letter-spacing: -0.02em; }
.st-panel-head p {
  margin: var(--space-1) 0 0;
  font-size: var(--text-13);
  line-height: var(--lh-13);
  color: var(--hc-muted);
  max-width: 620px;
  text-wrap: pretty;
}

/* ── Kleine typografie ───────────────────────────────────── */
.st-settings .eyebrow-sm {
  font-size: var(--text-11);
  line-height: var(--lh-11);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hc-muted);
}
.st-settings .mono-s {
  font-family: var(--mono-font);
  font-size: var(--text-12);
  line-height: var(--lh-12);
  color: var(--hc-muted);
}

/* ── Knoppen ─────────────────────────────────────────────── */
/* 38px en radius 8 conform RULES; de primaire knop draagt --hc-accent-on en
   niet een vaste voorgrond, zodat A288 bij een donkere klantkleur naar wit
   kantelt. Zelfde afspraak als .btn-lime in styles.css. */
.st-settings .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 38px;
  padding: 0 var(--space-4);
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-sm);
  background: var(--hc-white);
  color: var(--hc-ink);
  font: inherit;
  font-size: var(--text-13);
  line-height: var(--lh-13);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-out),
              background var(--dur-micro) var(--ease-out);
}
.st-settings .btn:hover { border-color: var(--hc-ink); }
.st-settings .btn:active { transform: scale(0.98); }
.st-settings .btn:focus-visible {
  outline: 2px solid var(--hc-accent-text);
  outline-offset: 2px;
}
.st-settings .btn.is-primary {
  background: var(--hc-saffron);
  border-color: var(--hc-saffron);
  color: var(--hc-accent-on);
}
.st-settings .btn.is-primary:hover {
  background: var(--hc-accent-hover);
  border-color: var(--hc-accent-hover);
}
.st-settings .btn.is-primary:active {
  background: var(--hc-accent-press);
  border-color: var(--hc-accent-press);
}
.st-settings .btn.is-quiet {
  border-color: transparent;
  background: transparent;
  color: var(--hc-muted);
}
.st-settings .btn.is-quiet:hover { background: var(--hc-beton); color: var(--hc-ink); }
.st-settings .btn[disabled] { opacity: 0.4; cursor: not-allowed; transform: none; }
.st-settings .btn svg { flex: none; }

.st-settings .btn-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--text-12);
  line-height: var(--lh-12);
  font-weight: 700;
  color: var(--hc-lime-deep);
  cursor: pointer;
}
.st-settings .btn-link:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .st-settings .btn:active { transform: none; }
}

/* ── Kaarten ─────────────────────────────────────────────── */
/* Radius 12 (RULES: kaarten), waar .account-card/.admin-card op 8 staan. Dat
   verschil is de zichtbare winst van deze laag en geen slordigheid. */
.st-settings .card {
  padding: var(--space-6);
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-md);
  background: var(--hc-white);
  box-shadow: var(--shadow);
}
.st-settings .card + .card { margin-top: var(--space-6); }
.st-settings .card h3 { margin: 0 0 var(--space-1); font-size: var(--text-14); line-height: var(--lh-14); }
.st-settings .card .sub {
  margin: 0 0 var(--space-4);
  font-size: var(--text-13);
  line-height: var(--lh-13);
  color: var(--hc-muted);
  max-width: 620px;
  text-wrap: pretty;
}
.st-settings .card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.st-settings .card-head > div { min-width: 0; }
.st-settings .card-head h3 { margin: 0; }
.st-settings .card-head .sub { margin: var(--space-1) 0 0; }

/* C8: twee bedieningen rechts in een card-head (het onderdeelfilter en
   Vernieuwen bij het logboek), waar elders één knop of één pill staat.

   ⚠️ De breedte van de select moet expliciet. `input, select, textarea` in
   styles.css zet elk veld op 100%; zonder deze regel duwt het filter de knop
   van de regel af en beslaat het de halve kaart. Zelfde valkuil als bij het
   getalveld hieronder en bij de statusfilter van de Gebruikers-tab (PR-023).
   Maten uit RULES.md: veld en knop 38px, 8px tussen twee bedieningen. */
.st-settings .st-head-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.st-settings .st-head-actions > select {
  flex: none;
  width: auto;
  min-width: 190px;
  min-height: 38px;
}

/* Twee kaarten naast elkaar. Onder 1080px terug naar één kolom — daar klapt de
   rail ook in, dus de inhoudskolom is dan smal genoeg om te vallen. */
.st-settings .grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: start;
}
.st-settings .grid-2 > .card + .card { margin-top: 0; }

/* Een opsomming in een kaart. Staat niet in het prototype — daar heeft geen
   enkele kaart een kale <ul> — maar de vier abonnementspanelen bouwen er wel
   een op vanuit app.js. Zonder deze regel verliezen ze de ritmiek die ze van
   .admin-card (flexkolom, gap 18px) kregen. */
.st-settings .card > ul {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-5);
  font-size: var(--text-13);
  line-height: var(--lh-13);
}
.st-settings .card > ul > li + li { margin-top: var(--space-2); }

/* ── Sleutel/waarde ──────────────────────────────────────── */
.st-settings .kv {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  row-gap: var(--space-2);
  column-gap: var(--space-4);
  margin: 0;
  font-size: var(--text-13);
  line-height: var(--lh-13);
}
.st-settings .kv dt { color: var(--hc-muted); }
.st-settings .kv dd {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  min-width: 0;
  margin: 0;
  font-weight: 600;
}
.st-settings .kv dd .mono {
  font-family: var(--mono-font);
  font-size: var(--text-12);
  line-height: var(--lh-12);
  font-weight: 500;
}
/* Bijzin naast een pill in een kv-waarde ("Actief · sinds 2 juni 2026"): geen
   tweede vetgedrukte waarde op dezelfde regel. */
.st-settings .kv dd .st-note {
  font-size: var(--text-12);
  line-height: var(--lh-12);
  font-weight: 500;
  color: var(--hc-muted);
}

/* ── Pills en chips ──────────────────────────────────────── */
/* Bewust vóór de railregels hieronder: .st-rail .pill weegt even zwaar, dus de
   verfijning van B1 (gap 4 om het slotje) blijft winnen. */
.st-settings .pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 22px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-11);
  line-height: var(--lh-11);
  font-weight: 700;
  white-space: nowrap;
}
.st-settings .pill.ok   { background: var(--hc-status-done-bg);  color: var(--hc-status-done-fg); }
.st-settings .pill.warn { background: var(--hc-status-busy-bg);  color: var(--hc-status-busy-fg); }
.st-settings .pill.act  { background: var(--hc-status-act-bg);   color: var(--hc-status-act-fg); }
.st-settings .pill.mut  { background: var(--hc-status-draft-bg); color: var(--hc-status-draft-fg); }

.st-settings .chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 26px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--hc-beton);
  color: var(--hc-ink);
  font-size: var(--text-12);
  line-height: var(--lh-12);
  font-weight: 600;
}
/* display:inline-flex en niet het inline van het prototype: daar staat er een
   &times; in, hier een Lucide-pad van 16px dat anders op de tekstbasislijn gaat
   hangen. */
.st-settings .chip button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--hc-muted);
  font: inherit;
  line-height: 1;
  cursor: pointer;
}
.st-settings .chip button:hover { color: var(--hc-ink); }
.st-settings .chip button svg { display: block; }
/* Een gearchiveerd projecttype blijft leesbaar maar staat op de achtergrond. */
.st-settings .chip.is-archived { opacity: 0.6; }
.st-settings .chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ── C5: Deelbeleid ──────────────────────────────────────── */
/* Twee composities die de ontwerplaag nog niet had: een getalveld rechts in een
   .st-switch-row (waar anders een schakelaar staat) en een invoerveld met een
   knop ernaast. Alle maten komen uit RULES.md: veld en knop 38px, 16px tussen
   velden, 8px binnen een regel.

   ⚠️ De breedte moet expliciet: `input, select, textarea` in styles.css zet elk
   veld op 100%, en zonder deze regel loopt het getalveld over de hele kaart. */
.st-settings .st-switch-row > input[type="number"] {
  flex: none;
  width: 96px;
  min-height: 38px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* De domeinlijst staat onder zijn eigen uitleg in plaats van ernaast: een
   invoerveld, een knop en een groeiende chiprij passen niet in de smalle
   rechterkolom waar normaal een schakelaar staat.

   ⚠️ De selector draagt BEIDE klassen met opzet. `.st-settings .st-switch-row`
   staat verderop in dit bestand en heeft dezelfde specificiteit (twee klassen),
   dus een losse `.st-domain-block` verloor stil van de `display: flex` daar —
   in de browser gemeten: de kaart klapte samen tot nul breed. */
.st-settings .st-switch-row.st-domain-block { display: block; }
.st-settings .st-domain-row {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-4);
  max-width: 480px;
}
.st-settings .st-domain-row input { min-height: 38px; }
.st-settings .st-domain-row .btn { flex: none; }
.st-settings .st-domain-block .chips { margin-top: var(--space-4); }
.st-settings .st-domain-block .error:empty { display: none; }
.st-settings .st-domain-block .error { margin-top: var(--space-2); font-size: var(--text-12); line-height: var(--lh-12); }

/* ── Formulieren ─────────────────────────────────────────── */
/* .field is de wikkel om label + veld + hulptekst. De veldmaat zelf komt uit
   styles.css (38px, radius 8, focusring); hier staat alleen de opbouw. */
.st-settings .field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  font-size: var(--text-12);
  line-height: var(--lh-12);
  font-weight: 600;
  color: var(--hc-muted);
}
.st-settings .field > input,
.st-settings .field > select,
.st-settings .field > textarea {
  font-size: var(--text-13);
  line-height: var(--lh-13);
  font-weight: 500;
  color: var(--hc-ink);
}
.st-settings .field > textarea { min-height: 76px; resize: vertical; }
.st-settings .field :disabled {
  background: var(--hc-soft);
  color: var(--hc-muted);
  cursor: not-allowed;
}
.st-settings .hint,
.st-settings .field .hint {
  font-size: var(--text-11);
  font-weight: 500;
  line-height: var(--lh-11);
  color: var(--hc-muted);
}

/* Formulierkolom max 480px (RULES), tweekoloms 640. 16px tussen velden. */
.st-settings .frow {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  max-width: 480px;
}
.st-settings .frow.c2 { grid-template-columns: 1fr 1fr; max-width: 640px; }
.st-settings .frow.wide { max-width: none; }

.st-settings .form-foot {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-6);
}
.st-settings .form-foot .note { font-size: var(--text-12); line-height: var(--lh-12); color: var(--hc-muted); }
/* Een invoerveld in de voet (de toevoegrij bij Projecttypes) houdt een eigen
   breedte in plaats van de knop weg te duwen — zelfde maat als het prototype. */
.st-settings .form-foot > .field { flex: 0 1 280px; }
/* De A289-meldingsregel hoort bij de knop, maar krijgt een eigen regel: een
   volledige zin naast de knop zou hem bij elke fout laten verspringen.
   Op role en niet op .success/.error: setProjectTypesCardFeedback() zet
   className opnieuw en zou een klasse hier wegvagen. */
.st-settings .form-foot > p[role="status"] {
  flex-basis: 100%;
  margin: 0;
  min-height: 1em;
  font-size: var(--text-12);
  line-height: var(--lh-12);
}

/* ── Schakelaar ──────────────────────────────────────────── */
/* De vorige ronde liet .st-switch bewust liggen omdat RULES alleen
   checkbox-rijen kent. Het prototype benoemt de schakelaar zelf als nieuwe
   component mét reden (README §Nieuw t.o.v. RULES: een aan/uit-instelling leest
   niet als formulierveld, en de checkbox blijft in tabellen). Die keuze is voor
   Fotokeuring en Planning nu overgenomen — dat zijn precies twee losse
   aan/uit-instellingen.

   Twee afwijkingen van het prototype, allebei met reden:

   (1) Het prototype tekent een <button role="switch" aria-checked>. Hier blijft
   het de <input type="checkbox"> die er al stond, met dezelfde id en dezelfde
   name. De drie werkwijze-formulieren lezen `.checked` en zetten hun disabled
   via form.querySelectorAll("input, button"); een knop zou daar een eigen
   aan/uit-toestand naast zetten en die twee lopen op een dag uit elkaar.
   role="switch" op een checkbox is geldige ARIA en houdt de bediening
   (spatie, label-klik) die de gebruiker al kent.

   (2) Wél gescoped op .st-settings, waar de andere st-*-namen dat niet zijn:
   styles.css:5073 zet input[type="checkbox"] op 16x16 en dat weegt (0,1,1).
   Een kale .st-switch weegt (0,1,0), verliest dat en zou stil een vierkant
   vinkje blijven — zichtbaar noch als foutmelding.

   Geen focusring hier: input:focus-visible in styles.css (A244/A271) dekt élk
   veldtype en waarschuwt er expliciet voor om daar een component-eigen variant
   naast te zetten. Geen schaduw op de knop: het prototype zet een letterlijke
   rgba en --shadow-sm bestaat in dit portaal alleen BINNEN .login-view — hij
   zou hier stil niets doen (zelfde afweging als bij de kaarten hierboven).
   De rand van --hc-line doet wat de schaduw daar deed: de witte knop van de
   beton-baan scheiden. */
.st-settings .st-switch-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--hc-line-soft);
}
.st-settings .st-switch-row:first-of-type { border-top: 0; padding-top: 0; }
.st-settings .st-switch-row .txt { flex: 1; min-width: 0; }
.st-settings .st-switch-row .txt b { display: block; font-size: var(--text-13); line-height: var(--lh-13); }
.st-settings .st-switch-row .txt label { cursor: pointer; }
.st-settings .st-switch-row .txt span {
  display: block;
  max-width: 520px;
  margin-top: var(--space-1);
  font-size: var(--text-12);
  font-weight: 500;
  line-height: var(--lh-12);
  color: var(--hc-muted);
}
.st-settings .st-switch {
  flex: none;
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 40px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-full);
  background: var(--hc-beton);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
/* 2px binnen de 38x20 padding-box, dus links en rechts even veel lucht:
   2 + 16 + 18 = 36, met 2px over aan de rechterkant. */
.st-settings .st-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-full);
  background: var(--hc-white);
  transition: transform var(--dur-fast) var(--ease-out);
}
.st-settings .st-switch:checked {
  background: var(--hc-saffron);
  border-color: var(--hc-saffron);
}
.st-settings .st-switch:checked::after { transform: translateX(18px); }
.st-settings .st-switch:disabled { opacity: 0.4; cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
  .st-settings .st-switch,
  .st-settings .st-switch::after { transition: none; }
}

/* ── Tabellen ────────────────────────────────────────────── */
/* Rij en kop volgen RULES: kop 40px, 10px uppercase met tracking .09em. In
   gebruik bij Locaties; C2 (rechten per gebruiker) en C4 (apparaten) vinden de
   woordenschat zo kant-en-klaar. */
.st-settings .tbl-wrap {
  overflow-x: auto;
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-md);
  background: var(--hc-white);
}
.st-settings .tbl { width: 100%; border-collapse: collapse; font-size: var(--text-13); line-height: var(--lh-13); }
/* Schaal (docs/schaal.md): deze kolomkop blijft op 0.66rem (10,56px) staan en
   gaat NIET naar --text-11. De bodem van de schaal is 11, dus de regel wilde
   hem 0,44px groter maken. Gemeten in docs/harness-schaal-instellingen.html:
   de kolomkoppen staan op nowrap met 0.09em tracking en bepalen de minimum-
   breedte van de tabel. De rechtentabel is op 1440px al breder dan zijn
   omhulsel (866,8 tegen 846px) en wordt op 11px nog 8,5px breder (875,3px).
   Een vast blok dat breder wordt is precies wat de schaal niet mag doen;
   Andries beslist (zie de PR). De regelhoogte is wél het token. */
.st-settings .tbl th {
  height: 40px;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--hc-line);
  background: var(--hc-soft);
  color: var(--hc-muted);
  font-size: 0.66rem;
  line-height: var(--lh-11);
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}
.st-settings .tbl td {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--hc-line-soft);
  vertical-align: middle;
}
.st-settings .tbl tbody tr:first-child td { border-top: 0; }
.st-settings .tbl .r { text-align: right; font-variant-numeric: tabular-nums; }
.st-settings .tbl .c { text-align: center; }
.st-settings .tname b { display: block; font-size: var(--text-14); line-height: var(--lh-14); }
/* Schaal: de subregel (0.74rem, 11,84px) blijft staan en gaat NIET naar
   --text-11. Het langste woord van die regel bepaalt de minimumbreedte van de
   naamkolom; op 11px wordt die kolom 4,8px smaller en wikkelt de vetgedrukte
   naam in de locatietabel op 375px naar een extra regel (rij +14,8px, kaart
   +0,54px). Gemeten in het harnas; Andries beslist. De regelhoogte is wél het
   token. */
.st-settings .tname span { font-size: 0.74rem; line-height: var(--lh-11); color: var(--hc-muted); }

/* C6: bijzin onder een cel ("Uitnodigingen die nog openstaan tellen mee"). De
   bestaande .st-note is gescoped op .kv dd en werkt hier dus niet; .tname is
   een hele naamcel met een eigen b/span-paar en zou de regel erboven mee
   verkleinen. Vandaar deze ene regel in plaats van een van de twee oprekken. */
.st-settings .tbl td .st-sub {
  display: block;
  margin-top: 2px;
  font-size: var(--text-12);
  line-height: var(--lh-12);
  color: var(--hc-muted);
}

/* Locaties: het logo hoort bij de naam en niet in een eigen kolom. De <td>
   blijft daarom een table-cell — display:flex erop zou de cel uit de
   kolomuitlijning trekken — en de flexwikkel zit erbinnen. Het logo staat naast
   béide regels en niet alleen naast de naam: anders schuift het adres onder de
   40px-tegel door en wordt de rij 83px in plaats van 64px.
   `.tname .ident b` zet terug wat `.tname span` van de wikkels zou maken. */
.st-settings .tname .ident { display: flex; align-items: center; gap: var(--space-3); }
.st-settings .tname .ident .lines { min-width: 0; }
.st-settings .tname .ident b { font-size: var(--text-14); line-height: var(--lh-14); color: var(--hc-ink); }

/* Kleurstip in een pill: de markerkleur van de locatie, dezelfde kleur die de
   kaart gebruikt. De kleur zelf komt per rij uit de data en staat dus als
   inline style op het element — net als de beginletter-tegel ernaast. */
.st-settings .pill .dot {
  flex: none;
  width: 10px;
  height: 10px;
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-full);
}

/* Meerdere tekstacties in één actiekolom. */
.st-settings .tbl td.r > .btn-link + .btn-link { margin-left: var(--space-4); }
.st-settings .btn-link.is-danger { color: var(--danger); }

/* ── Meters ──────────────────────────────────────────────── */
.st-settings .meters { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.st-settings .meter { display: flex; flex-direction: column; gap: var(--space-1); min-width: 120px; }
.st-settings .meter em {
  font-style: normal;
  font-size: var(--text-13);
  line-height: var(--lh-13);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.st-settings .meter em span { color: var(--hc-muted); font-weight: 500; }
.st-settings .meter i {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: var(--hc-beton);
  overflow: hidden;
}
.st-settings .meter i b {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--hc-saffron);
}
.st-settings .meter.ok i b  { background: var(--success); }
.st-settings .meter.hot i b { background: var(--danger); }

/* ── Lege staat ──────────────────────────────────────────── */
/* RULES: icoon in bone-cirkel 56px, één zin, max één actie. */
.st-settings .empty { padding: var(--space-10) var(--space-6); text-align: center; }
.st-settings .empty .ico {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-4);
  border-radius: 50%;
  background: var(--hc-bone);
  color: var(--hc-muted);
}
.st-settings .empty h4 { margin: 0 0 var(--space-1); font-size: var(--text-14); line-height: var(--lh-14); }
.st-settings .empty p {
  margin: 0 auto;
  max-width: 420px;
  font-size: var(--text-13);
  line-height: var(--lh-13);
  color: var(--hc-muted);
}
.st-settings .empty .btn { margin-top: var(--space-4); }

/* ── De rail ─────────────────────────────────────────────── */
/* Sticky binnen .account-page: dat is de scroller van deze pagina, niet het
   venster. top:0 laat de rail meelopen zodra de paginakop weggescrolld is.

   B5 — de rail heeft sinds C8 zijn EIGEN scroller, en dat is geen opsmuk.
   BEDRIJF_SECTIONS telt 19 secties in 5 groepen; bij 38px per knop en 34px per
   groepskop is dat een rail van ~890px. Sticky alléén helpt daar niet: zodra de
   rail hóger is dan het zichtbare gebied vallen de onderste secties eronder, en
   zijn ze alleen te bereiken door de HELE pagina te scrollen - waarna het
   paneel rechts boven de vouw staat. Dat is de klacht die deze chip oplost.

   De hoogte staat in --st-rail-max en wordt door syncRailHoogte() in app.js
   GEMETEN, niet gegokt. De layout eromheen:
     .app-view      height: 100vh; overflow: hidden      (styles.css)
     .main-area     flex: 1        binnen die 100vh
     .main-section  flex: 1; overflow: hidden
     .account-page  flex: 1; overflow-y: auto            <- DE SCROLLER
     .account-page-header + 28px padding + 18px gap      <- boven de rail

   ⚠️ `100vh` zou hier FOUT zijn, en dat is in de browser aangetoond. 100vh is
   pas de juiste maat zodra de rail vastgeplakt zit; zolang de pagina bovenaan
   staat begint de rail ONDER de paginakop, en dan loopt hij precies die
   kophoogte onder de vouw door — de onderste regel blijft onbereikbaar, wat de
   hele ingreep zinloos maakt. Gemeten op 1280x800: rail begint op y=120
   (28 padding + 74 kop + 18 gap), dus er past 680px, niet 800.

   Die 120 is bovendien geen constante. Staat de knop "Inrichting opnieuw
   doorlopen" in de kop (owner met een ingericht portaal), dan breekt die naar
   een tweede regel en wordt de kop 130px: offset 176, ruimte 624. Eén
   hardgecodeerd getal is dus in één van beide standen verkeerd — vandaar de
   meting per render.

   De terugval in de var() is de gemeten SLECHTSTE stand (176). Die is veilig:
   te kort is hinderlijk, te lang maakt de onderste sectie onbereikbaar. Hij
   geldt alleen tussen de eerste verf en de eerste meting. De demo-balk hoeft
   hier niets extra's: syncRailHoogte leest clientHeight van de scroller, en die
   is dan vanzelf al die balkhoogte kleiner. */
.st-rail {
  position: sticky;
  top: 0;
  max-height: var(--st-rail-max, calc(100vh - 176px));
  overflow-y: auto;
  /* Doorscrollen naar de pagina eronder stopt bij de railrand: anders schuift
     een doorgedraaid muiswiel in de rail de hele pagina weg, en dat is precies
     wat deze scroller moest voorkomen. */
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  /* De scrollbar eet breedte uit de kolom. Met 8px negatieve marge groeit de
     rail de 24px-gutter in en met 8px padding blijft de balk van de knoppen af.
     Gemeten op 1280x800 (kolom 220px, start x=268): rail 268-496, balk 486-496
     (dus grotendeels in de gutter), knoppen 268-478, het pakketslot eindigt op
     466 - 20px speling. De knoppen houden 210 van de 220px; het langste label
     ("Projecttypes & filtering") is 142px, dus er kapt niets af. */
  padding-right: var(--space-2);
  margin-right: -8px;
  /* Onderaan dezelfde lucht als de pagina eronder heeft, zodat de laatste
     railregel niet tegen de vensterrand plakt. */
  padding-bottom: var(--space-2);
  /* N1: de schuifbalkstijl die hier stond (`scrollbar-width: thin` +
     `scrollbar-color`, plus de :hover-variant) is naar styles.css verhuisd en
     geldt nu voor alle scrollende vlakken van het portaal - verzoek Andries
     12-09. Deze rail was de bron; .st-rail staat in de gedeelde lijst, dus er
     verandert hier niets aan het beeld. De meting waaróp die stijl rust (geen
     ::-webkit-scrollbar ernaast, want die wordt genegeerd zodra
     `scrollbar-width` er staat) is met de regels meeverhuisd. */
}
.st-rail-group {
  margin: 0;
  padding: var(--space-4) var(--space-3) var(--space-2);
  font-size: var(--text-11);
  line-height: var(--lh-11);
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--hc-muted);
}
.st-rail-group:first-child { padding-top: 0; }
.st-rail button {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  min-height: 38px;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--hc-ink);
  font: inherit;
  font-size: var(--text-13);
  line-height: var(--lh-13);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out);
}
.st-rail button:hover { background: var(--hc-beton); }
.st-rail button:active { transform: scale(0.98); }
.st-rail button.is-active {
  background: var(--hc-accent-select-bg);
  color: var(--hc-accent-select-fg);
  font-weight: 600;
}
.st-rail button:focus-visible {
  outline: 2px solid var(--hc-accent-text);
  outline-offset: 2px;
}

/* Pakketslot in de railregel. Bewust gescoped op .st-rail: .pill is de naam uit
   de handoff, maar een ongescoped .pill in het portaal zou botsen met wat een
   volgende chip onder diezelfde naam bouwt. */
.st-rail .pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 22px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-11);
  line-height: var(--lh-11);
  font-weight: 700;
  white-space: nowrap;
}
.st-rail .pill.mut {
  background: var(--hc-status-draft-bg);
  color: var(--hc-status-draft-fg);
}
.st-rail .pill svg { flex: none; }

/* Eén regel uitleg onder een verkorte rail: zonder die regel leest "er staan
   maar twee secties" als een fout in plaats van als een rol. */
.st-rail-note {
  margin: var(--space-4) 0 0;
  padding: var(--space-4) var(--space-3) 0;
  border-top: 1px solid var(--hc-line-soft);
  font-size: var(--text-11);
  line-height: var(--lh-11);
  color: var(--hc-muted);
}

/* ── Inhoudskolom ────────────────────────────────────────── */
/* De vier bestaande panelen droegen hun eigen bovenmarge omdat ze onder een
   horizontale tabrij hingen. In de rail zijn ze het eerste element van hun
   kolom en hoort die marge weg. */
.st-panels > .bedrijf-tab-panel { margin-top: 0; }
.st-panels .project-types-card { margin-top: 0; }
/* B4 — idem voor de accountpanelen. Die hingen onder een horizontale tabrij en
   droegen daarom hun eigen bovenmarge; in de rail zijn ze het eerste element
   van hun kolom.
   ⚠️ .account-page is een flexkolom met gap 18px en dat is wat de kaarten
   binnen één paneel uit elkaar hield. In .st-panels bestaat die kolom niet, dus
   zonder de tweede regel raken MFA, Wachtwoord en Deze sessie elkaar. Zelfde
   24px als #abonnement-panels hieronder: de ritmiek van de ontwerplaag. */
.st-panels > .account-tab-panel { margin-top: 0; }
.st-panels .account-card + .account-card { margin-top: var(--space-6); }

/* B3 — de stapel abonnements- en plekpanelen.
   Op Gebruikers stonden ze los in .admin-page, en die is een flexkolom met
   gap 18px; dat is wat ze uit elkaar hield. In .st-panels bestaat die kolom
   niet, dus zonder deze regel raken twee witte kaarten elkaar zodra er naast
   de abonnementskaart ook een aanvraag openstaat. Zelfde 18px, zodat de
   afstand niet verandert door de verhuizing.
   Een leeg paneel krijgt .hidden (display:none !important), telt daardoor niet
   mee als flexitem en laat dus ook geen gat achter.

   De flexkolom blijft staan en `.card + .card` wordt hier uitgezet: die
   aangrenzende-broer-selector kijkt naar de DOM en niet naar wat er getekend
   wordt, dus met een verborgen eerste paneel zou de zichtbare tweede alsnog
   24px marge bovenaan krijgen — precies het gat dat de flexkolom voorkomt.
   De afstand gaat van 18 naar 24px, de ritmiek van de ontwerplaag (RULES:
   24px tussen blokken); alle kaarten in deze kolom staan nu even ver uit
   elkaar. */
#abonnement-panels {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
#abonnement-panels > .card + .card { margin-top: 0; }

/* ── Ingeklapte en mobiele stand ─────────────────────────── */
/* Eén rulesset voor twee ingangen. .is-collapsed is de handmatige stand: de
   haak staat klaar, maar B1 bouwt er bewust géén knop bij — zonder een plek om
   de keuze te bewaren (dat vraagt een migratie op update_my_onboarding) zou hij
   bij elke navigatie terugklappen. De media query hieronder is wat er vandaag
   op af gaat. */
.st-railbar {
  display: none;
  position: sticky;
  top: 0;
  /* Boven de panelen, ver onder de modals (800). De sheet erft dit vlak. */
  z-index: var(--z-slideover);
  padding: 0 0 var(--space-4);
  background: var(--hc-paper);
}
.st-railbar > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  max-width: 420px;
  min-height: 38px;
  padding: 0 var(--space-3);
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-sm);
  background: var(--hc-white);
  color: var(--hc-ink);
  font: inherit;
  font-size: var(--text-13);
  line-height: var(--lh-13);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-out);
}
.st-railbar > button:hover { border-color: var(--hc-ink); }
.st-railbar > button:active { transform: scale(0.98); }
.st-railbar > button:focus-visible {
  outline: 2px solid var(--hc-accent-text);
  outline-offset: 2px;
}
.st-railbar > button svg { flex: none; color: var(--hc-muted); }

.st-sheet {
  display: none;
  position: absolute;
  margin-top: var(--space-1);
  width: min(420px, 100%);
  max-height: 60vh;
  overflow-y: auto;
  padding: var(--space-2);
  background: var(--hc-white);
  border: 1px solid var(--hc-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.st-settings.is-collapsed { grid-template-columns: minmax(0, 1fr); }
.st-settings.is-collapsed > .st-rail { display: none; }
.st-settings.is-collapsed .st-railbar { display: block; }
.st-settings.is-collapsed.is-sheet-open .st-sheet { display: block; }
.st-settings.is-collapsed .st-sheet .st-rail { display: flex; position: static; }
.st-settings.is-collapsed .st-sheet .st-rail-note { display: none; }

/* B5: in het uitklappaneel scrollt de SHEET al (max-height 60vh hierboven).
   Zonder deze regel krijgt de rail daarbinnen zijn eigen tweede scroller - twee
   balken naast elkaar en een lijst die je op twee manieren moet verschuiven. De
   negatieve marge moet hier ook weg: die duwt de knoppen in de 8px-padding van
   het paneel in plaats van in een gutter die hier niet bestaat.
   Eén selector voor beide ingangen; de media query onderaan schrijft dezelfde
   drie regels niet nog eens over. */
.st-sheet .st-rail {
  max-height: none;
  overflow-y: visible;
  padding-right: 0;
  margin-right: 0;
  padding-bottom: 0;
}

/* ── Meldingen bij een sectie ────────────────────────────── */
/* .st-alert vervangt .account-callout als de melding over het PAKKET gaat:
   getint vlak, radius 12, geen linker-accentrand. .is-quiet is de rustige
   variant voor "je mag dit lezen maar niet wijzigen". */
.st-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--hc-status-act-bg);
  color: var(--hc-status-act-fg);
  font-size: var(--text-13);
  line-height: var(--lh-13);
}
.st-alert svg { flex: none; margin-top: 1px; }
.st-alert.is-quiet {
  background: var(--hc-soft);
  color: var(--hc-ink);
}
/* Aanvullingen uit de handoff op de melding die B1 al goed had staan: een
   eigen kopregel, een tweede alinea en ruimte voor een knop. Bewust GEEN
   tweede .st-alert-definitie ernaast — de basis en .is-quiet blijven van B1. */
.st-alert b { display: block; font-size: var(--text-13); line-height: var(--lh-13); }
.st-alert p { margin: var(--space-1) 0 0; max-width: 560px; text-wrap: pretty; }
.st-alert .btn { margin-top: var(--space-4); }
/* Boven de kaarten in plaats van erin: het pakketslot geldt voor de hele
   sectie, ook voor een tweede kaart ernaast. Geen tweede .st-alert-definitie —
   alleen de marges van deze ene plek, want de basis staat hierboven. */
.st-panel-head + .st-alert { margin-top: 0; margin-bottom: var(--space-6); }

/* Velden blijven leesbaar maar staan uit. Het uitschakelen zelf gebeurt op de
   controls (disabled); dit is alleen de zichtbare bevestiging daarvan. */
.st-locked-form { opacity: 0.72; }

/* Een waarde die je rol niet mag zien (eigenaar-only veld, beheerder kijkt
   mee). Nog ongebruikt; C8 (factuurgegevens) heeft hem nodig. De gestippelde
   rand is de enige buiten de dropzone en staat als bewuste afwijking in de
   handoff: een gewone rand zou als leeg invoerveld lezen. .is-mask is de
   gedeeltelijke variant — laatste vier cijfers, monospace, dichte rand. */
.st-locked-value {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border: 1px dashed var(--hc-line);
  border-radius: var(--radius-sm);
  background: var(--hc-soft);
  color: var(--hc-muted);
  font-size: var(--text-12);
  line-height: var(--lh-12);
  font-weight: 600;
}
.st-locked-value svg { flex: none; }
.st-locked-value.is-mask {
  border-style: solid;
  color: var(--hc-ink);
  font-family: var(--mono-font);
  letter-spacing: 0.06em;
}

/* ── Een schakelaar met zijn uitleg (C1) ─────────────────── */
/* .stack-form is een grid met gap 14px. Een losse uitlegregel zou daardoor
   precies even ver van zijn eigen vinkje staan als van het volgende — dan
   leest hij als een zelfstandige alinea in plaats van als toelichting.
   Vandaar het blokje: 8px binnen, 14px ertussen. */
.st-setting { display: grid; gap: var(--space-2); }
.st-setting .panel-copy { margin: 0; }
/* De 14px die .stack-form als gridgap gaf, is met de ontwerplaag weg; een
   schakelblok houdt nu dezelfde 16px als een .frow, en dezelfde leesbreedte
   als de rest van de laag. */
.st-settings .st-setting { margin-bottom: var(--space-4); max-width: 620px; }

/* ── Panelspecifieke aansluitingen ───────────────────────── */
/* Blokken die vóór deze ronde hun ruimte van de gridgap van .stack-form
   kregen. Ze staan hier en niet in styles.css omdat ze alleen binnen deze
   kolom voorkomen. */
.st-settings .branding-color-suggestion { margin-bottom: var(--space-4); max-width: 480px; }
/* De toelichting die bij Fotokeuring ná het formulier staat: 24px, de afstand
   tussen twee blokken (RULES). */
.st-settings .card > form + .panel-copy { margin-top: var(--space-6); }
/* C7: dezelfde afstand voor de slotregel van Factuurgegevens. Dat blok heeft
   geen formulier maar een kv-lijst met een knoppenvoet eronder, dus het valt
   buiten de regel hierboven. */
.st-settings .card > .form-foot + .panel-copy { margin-top: var(--space-6); }

/* ── Nog ongebruikt, bewust meegenomen ───────────────────── */
/* Drie vormen uit de handoff die de acht panelen van deze ronde niet nodig
   hebben, maar de volgende wel. Ze staan hier zodat C2 t/m C9 de woordenschat
   kant-en-klaar vinden in plaats van hem elk opnieuw te bedenken.
   Alle drie ONGESCOPED: .st-seat hoort op Gebruikers en .st-operator-bar boven
   de pagina — allebei buiten .st-settings. */

/* Eén module met zijn uitleg en een schakelstand (C9 — Modules). */
.st-module {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--hc-line-soft);
}
.st-module:first-of-type { border-top: 0; padding-top: 0; }
.st-module .txt { flex: 1; min-width: 0; }
.st-module .txt b { display: block; font-size: var(--text-13); line-height: var(--lh-13); }
.st-module .txt span { font-size: var(--text-12); line-height: var(--lh-12); color: var(--hc-muted); }

/* B5: .st-seat stond hier en is naar styles.css verhuisd, bij de andere regels
   van de Gebruikers-pagina. Reden: dit blad wordt lui geladen en tot B5 door
   precies één aanroeper (setBedrijfTab). De plekkenregel hoort op Gebruikers,
   en wie daar komt zonder ooit Bedrijf te openen had hem ONGESTYLED gekregen.
   Dezelfde afweging die een paar regels verderop in styles.css al voor
   .btn-link was gemaakt. */

/* Balk boven de pagina als een partner meekijkt. */
.st-operator-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-6);
  background: var(--hc-status-act-bg);
  color: var(--hc-status-act-fg);
  font-size: var(--text-13);
  line-height: var(--lh-13);
  font-weight: 600;
}
.st-operator-bar span { font-weight: 400; }

/* ── Breekpunten ─────────────────────────────────────────── */
/* Onder 1080px klapt de rail altijd in: 220px naast een formulierkolom van
   480px laat te weinig over. Onder 860px verdwijnt de zijbalk zoals elders in
   het portaal — dat gebeurt in styles.css, hier hoeft niets extra's. */
@media (max-width: 1080px) {
  .st-settings { grid-template-columns: minmax(0, 1fr); }
  .st-settings > .st-rail { display: none; }
  .st-settings .st-railbar { display: block; }
  .st-settings.is-sheet-open .st-sheet { display: block; }
  .st-settings .st-sheet .st-rail { display: flex; position: static; }
  .st-settings .st-sheet .st-rail-note { display: none; }
  /* Twee kaarten naast elkaar worden er één. Zelfde breekpunt als de rail:
     zodra die inklapt is de kolom breed genoeg om ze te stapelen zonder dat
     de pagina eronder verschuift. */
  .st-settings .grid-2 { grid-template-columns: minmax(0, 1fr); }
}

/* Onder 860px verdwijnt de zijbalk (styles.css) en is er geen ruimte meer voor
   twee velden naast elkaar. */
@media (max-width: 860px) {
  .st-settings .frow.c2 { grid-template-columns: minmax(0, 1fr); }
}