/* GEGENEREERD door npm run css:sync — bewerk shared/design-components.css, niet dit bestand. */
/* ============================================================================
 * Stee — COMPONENT-LAAG (Laag 1 uit plans/DESIGN-SYSTEM-LANGETERMIJN.md)
 *
 * Eén thuis per component. Classes zijn de ENIGE manier om componenten te
 * stijlen; kleuren komen uit design-tokens.css (--stee-*). Geen hex hier.
 *
 * Gebruikt door web (JS/*.html laadt dit bestand) en app (app.css importeert
 * het). Gedeelde bron: shared/design-components.css (JS/ is een kopie).
 *
 * Knoppen:
 *   <button class="stee-btn stee-btn--primary">Bewaren</button>
 *   <button class="stee-btn stee-btn--success">Opslaan</button>
 *   <button class="stee-btn stee-btn--danger">Verwijderen</button>
 *   <button class="stee-btn stee-btn--info">Info</button>
 *   <button class="stee-btn stee-btn--secondary">Annuleren</button>
 *   <button class="stee-btn stee-btn--danger stee-btn--icon" aria-label="Sluiten">×</button>
 * Maten: stee-btn--sm (compact), standaard (md), stee-btn--lg (dik).
 * ========================================================================== */

/* ── Knop: basis ─────────────────────────────────────────────────────────── */
.stee-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--stee-space-2, 8px);
  padding: 10px 16px;
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: var(--stee-radius-md, 8px);
  font-family: var(--stee-font-heading, inherit);
  font-size: 0.9em;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.stee-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ── Knop: varianten (kleur uit tokens) ──────────────────────────────────── */
.stee-btn--primary {
  background: var(--stee-button-primary-bg);
  color: var(--stee-text-on-primary);
  border-color: var(--stee-button-primary-bg);
}
.stee-btn--primary:hover { background: var(--stee-color-primary-hover); border-color: var(--stee-color-primary-hover); }

/* 2026-09-09 (todo-…-f3yf6): "aan"-status voor toggle-knoppen (bv. Selecteren) —
   alleen een gloed/rand, nooit een andere afmeting of tekst. */
.stee-btn.is-active {
  box-shadow: 0 0 0 3px var(--stee-color-warning, #F59E0B);
}

.stee-btn--success {
  background: var(--stee-button-success-bg);
  color: var(--stee-text-on-primary);
  border-color: var(--stee-button-success-bg);
}
.stee-btn--success:hover { filter: brightness(1.08); }

.stee-btn--danger {
  background: var(--stee-button-danger-bg);
  color: var(--stee-text-on-primary);
  border-color: var(--stee-button-danger-bg);
}
.stee-btn--danger:hover { filter: brightness(1.08); }

.stee-btn--info {
  background: var(--stee-color-info);
  color: var(--stee-text-on-primary);
  border-color: var(--stee-color-info);
}
.stee-btn--info:hover { filter: brightness(1.08); }

.stee-btn--warning {
  background: var(--stee-color-warning);
  color: var(--stee-text-on-primary);
  border-color: var(--stee-color-warning);
}
.stee-btn--warning:hover { filter: brightness(1.08); }

.stee-btn--secondary {
  background: var(--stee-button-secondary-bg);
  color: var(--stee-color-primary);
  border: 1px solid var(--stee-border);
}
.stee-btn--secondary:hover { background: var(--stee-surface-2); border-color: var(--stee-border-strong); }

.stee-btn--ghost {
  background: transparent;
  color: var(--stee-text-normal);
  border: 1px solid transparent;
}
.stee-btn--ghost:hover { background: var(--stee-surface-2); }
/* Knop die eruitziet als onderstreepte tekst (bedrag dat klikbaar is). */
.stee-btn-bare { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }

/* ── Knop: tabblad-schakelaar (bv. Open/Controleren/Toekomst) ────────────────
   Neutrale surface-tint i.p.v. een merk-/statuskleur; alleen het actieve
   tabblad krijgt de "geselecteerd"-tint. Vervangt een inline background:var()
   (die de style-consistency-vangrail terecht afkeurt op een <button>). */
.stee-btn--tab {
  background: var(--stee-surface-1);
  color: var(--stee-text-normal);
  border: 1px solid transparent;
}
.stee-btn--tab:hover { background: var(--stee-surface-2); }
.stee-btn--tab-active {
  background: var(--stee-surface-selected);
  color: var(--stee-text-normal);
  border: 1px solid transparent;
}

/* ── Knop: maten ─────────────────────────────────────────────────────────── */
.stee-btn--sm {
  padding: 6px 12px;
  min-height: 30px;
  font-size: 0.82em;
  border-radius: var(--stee-radius-sm, 6px);
}
.stee-btn--lg {
  padding: 12px 20px;
  min-height: 44px;
  font-size: 1em;
}

/* ── Knop: icoon-only (rond/vierkant, bijv. × sluiten) ───────────────────── */
.stee-btn--icon {
  width: 28px;
  height: 28px;
  min-height: 0;
  padding: 0;
  border-radius: var(--stee-radius-pill, 999px);
  font-size: 1.05em;
  font-weight: 700;
  line-height: 1;
  flex: 0 0 auto;
}

/* ── Knop: volledige breedte ─────────────────────────────────────────────── */
.stee-btn--block { width: 100%; }

/* ── Pop-over / dropdown-menu (filter, account-kiezer) ───────────────────── */
.stee-popover {
  position: absolute;
  z-index: var(--stee-z-dropdown, 2000);
  background: var(--stee-surface-1);
  border: 1px solid var(--stee-border);
  border-radius: var(--stee-radius-md, 8px);
  padding: 10px;
  margin-top: 4px;
  box-shadow: var(--stee-shadow-md);
  min-width: 250px;
  box-sizing: border-box;
}

/* ── Kaart / paneel (losse informatie-blokken) ────────────────────────────── */
.stee-card {
  background: var(--stee-surface-1);
  color: var(--stee-text-normal);
  border: 1px solid var(--stee-border);
  border-radius: var(--stee-radius-lg, 12px);
  padding: var(--stee-space-4, 16px);
  box-shadow: var(--stee-shadow-sm);
  box-sizing: border-box;
}
.stee-card--flat {
  box-shadow: none;
}
.stee-card--accent {
  border: 2px solid var(--stee-color-primary);
}
.stee-card--danger {
  border: 2px solid var(--stee-color-danger);
}
.stee-card--info {
  border: 2px solid var(--stee-color-info);
}

/* ── Modal: overlay + paneel ─────────────────────────────────────────────── */
/* een class met display:* mag het [hidden]-kenmerk niet overrulen */
[hidden] { display: none !important; }

.stee-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--stee-z-modal, 10000);
  background: var(--stee-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--stee-space-5, 24px);
}
.stee-modal {
  background: var(--stee-surface-1);
  color: var(--stee-text-normal);
  border: 1px solid var(--stee-border);
  border-radius: var(--stee-radius-lg, 12px);
  box-shadow: var(--stee-shadow-lg);
  width: min(720px, 95vw);
  max-height: 85vh;
  overflow: auto;
  box-sizing: border-box;
}
.stee-modal__head {
  padding: var(--stee-space-4, 16px);
  border-bottom: 1px solid var(--stee-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--stee-space-3, 12px);
}
.stee-modal__body { padding: var(--stee-space-4, 16px); }
.stee-modal__actions {
  padding: var(--stee-space-3, 12px) var(--stee-space-4, 16px);
  border-top: 1px solid var(--stee-border);
  display: flex;
  gap: var(--stee-space-2, 8px);
  justify-content: flex-end;
}

/* ── Lightbox: afbeelding/PDF-viewer op de modale scrim (donker paneel) ───── */
/* Deelt de .stee-modal-overlay-scrim; de inhoud is bewust DONKER (wit op de
 * verduistering), in tegenstelling tot de lichte .stee-modal. Kleur uit tokens. */
.stee-lightbox {
  position: relative;
  max-width: 95vw;
  max-height: 95vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.stee-lightbox__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: var(--stee-space-2, 8px);
}
.stee-lightbox__title {
  font-weight: 700;
  color: var(--stee-surface-1, #fff);
  font-size: 0.95em;
  max-width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stee-lightbox__close {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: var(--stee-surface-1, #fff);
  cursor: pointer;
  font-size: 1.4em;
  padding: 4px 10px;
  border-radius: var(--stee-radius-sm, 6px);
}
.stee-lightbox__media {
  max-width: 90vw;
  max-height: 82vh;
  border-radius: var(--stee-radius-md, 8px);
  box-shadow: var(--stee-shadow-lg);
  object-fit: contain;
}
/* Inzoomen (bp1uu): de stage scrollt als de afbeelding groter is dan passend.
 * touch-action: none geeft knijpen en slepen aan de zoomcode, niet aan de pagina. */
.stee-lightbox__stage {
  max-width: 90vw;
  max-height: 82vh;
  overflow: hidden;
  touch-action: none;
  cursor: zoom-in;
  display: flex;
}
.stee-lightbox__stage.is-zoomed {
  overflow: auto;
  cursor: grab;
  display: block;
}
.stee-lightbox__stage.is-zoomed .stee-lightbox__media {
  max-width: none;
  max-height: none;
  border-radius: 0;
}
.stee-lightbox__pdf {
  width: min(900px, 90vw);
  height: 82vh;
  border: 0;
  background: var(--stee-surface-1, #fff);
}
.stee-lightbox__hint {
  margin-top: var(--stee-space-1, 4px);
  color: var(--stee-surface-1, #fff);
  opacity: 0.75;
  font-size: 0.8em;
}

/* ── Filter-chip / tab-pill (bijv. Alle/Nieuw/Uitgelezen, type-tabs) ───────── */
/* Een kleine schakelaar in een rij; de actieve gebruikt de succes-vulkleur. */
.stee-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--stee-space-1, 4px);
  padding: 3px 12px;
  border-radius: var(--stee-radius-pill, 999px);
  border: 1px solid var(--stee-border);
  background: var(--stee-surface-1);
  color: var(--stee-text-muted);
  font-size: 0.8em;
  line-height: 1.4;
  font-weight: 400;
  white-space: nowrap;
  cursor: pointer;
}
.stee-chip--active {
  border-color: var(--stee-color-success);
  background: var(--stee-color-success);
  color: var(--stee-text-on-primary);
  font-weight: 700;
}

/* ── Bron-badge op een ToDo-item (ui-todo.js sourceBadgeHtml) — laat zien van
 * welk account/huishouden een item komt in de beheer-aggregatie
 * (todo-plan-opruim-css-eigenaar, 2026-09-17). Had eerst zijn kleur inline
 * (background:#F59E0B/var(--stee-color-info,#2563EB) + color:#fff/#1a1200);
 * de class bestond al maar had geen eigen regel, dus dat was geen tweede
 * bron — nu wél. */
.app-todo-source-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--stee-radius-pill, 999px);
  font-weight: 700;
  font-size: 0.78em;
  white-space: nowrap;
}
.app-todo-source-badge--demo {
  background: var(--stee-color-warning);
  color: var(--stee-text-on-warning);
}
.app-todo-source-badge--other {
  background: var(--stee-color-info);
  color: var(--stee-text-on-primary);
}

/* ── Formuliervelden: consistente hoogte/border/box-sizing (cpvob/ovxb4) ──── */
.stee-field {
  padding: 8px 10px;
  min-height: 38px;
  border: 1px solid var(--stee-border);
  border-radius: var(--stee-radius-md, 8px);
  background: var(--stee-surface-1);
  color: var(--stee-text-normal);
  font-family: var(--stee-font-body, inherit);
  font-size: 0.92em;
  box-sizing: border-box;
}
.stee-field--sm {
  padding: 4px 8px;
  min-height: 30px;
  border-radius: var(--stee-radius-sm, 6px);
  font-size: 0.85em;
}
.stee-field:focus {
  outline: 2px solid var(--stee-color-primary);
  outline-offset: 1px;
  border-color: var(--stee-color-primary);
}
.stee-field[aria-invalid="true"] {
  /* u0zyd: verplicht veld leeg gelaten (prediction-form.js) */
  border-color: var(--stee-color-danger, #E14D4D);
}
.stee-field:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
select.stee-field {
  cursor: pointer;
}

/* ── Formulier-indeling (layout, geen kleur) ───────────────────────────────
 * Herhaalde rijen "label + veld" en actie-voetteksten in modals/pagina's.
 * Gebruikt door web (ui-modal.js) en app (gedeeld via design-components.css). */
.stee-form-row {
  display: flex;
  gap: var(--stee-space-3, 12px);
  align-items: center;
  flex-wrap: wrap;
}
.stee-form-row__label {
  font-weight: 700;
  width: 170px;
  flex: 0 0 auto;
}
.stee-form-row__field {
  flex: 1;
  max-width: 220px;
}
/* Compacte variant (betalingsregeling): 150px-label, 10px-tussenruimte. */
.stee-form-row--sm { gap: var(--stee-space-2, 10px); }
.stee-form-row--sm .stee-form-row__label { width: 150px; }

/* Actie-voettekst: knoppen rechts uitgelijnd. */
.stee-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--stee-space-2, 10px);
}
.stee-actions--mt { margin-top: var(--stee-space-4, 16px); }
/* Velden binnen een form-rij vullen de beschikbare breedte. */
.stee-form-row > .stee-field { flex: 1; max-width: 220px; }

/* cpvob — "veld + vast bedragveld"-rij (categorie 1/2 in het transactiemodal).
 *
 * Dit was tot 2026-09-08 een flexrij. Flex laat de breedte van een <select>
 * afhangen van zijn automatische minimumgrootte (min-content = de langste
 * optie); dat is precies waarom categorie 1 telkens breder uitviel dan
 * categorie 2, en het bleef fragiel: één regel die `min-width` of `width`
 * overschrijft (en een ID-selector wint altijd van deze klassen) bracht het
 * verschil meteen terug.
 *
 * De rij is nu een GRID met twee expliciete sporen: `minmax(0,1fr)` en een
 * vaste bedragkolom. Een gridspoor van 1fr kan per definitie niet groter
 * worden dan zijn aandeel — inhoud, min-width en width doen er niet meer toe.
 * Twee rijen met dezelfde sporen zijn daarmee rekenkundig even breed, wat er
 * ook nog aan `width` gezet wordt.
 *
 * De `:is(...)`-variant hieronder is dezelfde regel, maar geschreven met de
 * modal-ID erbij zodat ze ook wint van `#transactionModal .modal-content
 * input/select/textarea` in stee-design.css. Dat is bewust géén tweede bron:
 * het is dezelfde declaratie, hier op één plek, zodat er nergens anders nog
 * iets over deze breedtes gezegd hoeft te worden. */
.stee-form-row--split,
#transactionModal .modal-content .stee-form-row--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--stee-split-amount-width, 120px);
  gap: var(--stee-space-2, 10px);
  align-items: center;
  width: 100%;
}
.stee-form-row--split > .stee-field--grow,
#transactionModal .modal-content .stee-form-row--split > .stee-field--grow,
.stee-form-row--split > .stee-field--fixed-sm,
#transactionModal .modal-content .stee-form-row--split > .stee-field--fixed-sm {
  width: 100%;
  min-width: 0;
  max-width: none;
  flex: none;
}
.stee-form-row--split > .stee-field--fixed-sm,
#transactionModal .modal-content .stee-form-row--split > .stee-field--fixed-sm {
  text-align: right;
}

/* todo-…-wwwwb: autosave zet een bewerkbaar veld in <span class="stee-autosave-wrap">
   met een ↶-knop. Naast het veld kostte die knop 36px, dus na een wijziging was
   het veld van categorie 2..n smaller dan dat van categorie 1 (alleen-lezen,
   zonder ↶). In een categorieregel ligt de ↶ daarom ín het veld: bij het bedrag
   links (de tekst staat rechts), bij de keuzelijst vóór het pijltje. */
.stee-form-row--split > .stee-autosave-wrap,
#transactionModal .modal-content .stee-form-row--split > .stee-autosave-wrap {
  display: block;
  position: relative;
  width: 100%;
  min-width: 0;
}
.stee-form-row--split > .stee-autosave-wrap > .stee-field,
#transactionModal .modal-content .stee-form-row--split > .stee-autosave-wrap > .stee-field {
  width: 100%;
  min-width: 0;
  max-width: none;
  box-sizing: border-box;
}
.stee-form-row--split > .stee-autosave-wrap > .stee-field--fixed-sm { text-align: right; }
.stee-themed .stee-form-row--split > .stee-autosave-wrap > .stee-field-undo {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  font-size: .9em !important;
}
.stee-themed .stee-form-row--split > .stee-autosave-wrap > .stee-field--fixed-sm + .stee-field-undo { left: 4px; }
.stee-themed .stee-form-row--split > .stee-autosave-wrap > .stee-field--grow + .stee-field-undo { right: 26px; }

/* Terugval voor plekken die de modifiers nog zonder --split gebruiken. */
.stee-form-row > .stee-field--grow {
  flex: 1 1 0%;
  width: 0;
  min-width: 0;
  max-width: none;
}
.stee-form-row > .stee-field--fixed-sm {
  flex: 0 0 120px;
  width: 120px;
  max-width: 120px;
  text-align: right;
}

/* ── Detailraster: label+veld-rijen onder elkaar (todo-1789219478103-vw74i,
 * todo-1789473417068-awssh)
 * De schuldmodal (overzichten-page.js, showDebtTransactions) verhuisde een
 * ronde eerder naar het gedeelde modal-mechanisme (renderSettingsModal), maar
 * de INHOUD bleef de oude opsomming van label/waarde-paren met vaste,
 * losstaande breedtes — in de smallere gedeelde modal liepen die velden over
 * elkaar heen. Dit raster hergebruikt bewust het BESTAANDE
 * .stee-form-row/--sm + .stee-form-row__label-patroon (ui-modal.js,
 * betalingsregeling-velden) — geen derde label/veld-variant, alleen een grid
 * eromheen. Stond eerst op twee kolommen naast elkaar, maar met zes/zeven
 * regels erin (Totaalbedrag t/m Bron) las dat als losse velden i.p.v. één
 * lijst — daarom altijd één kolom, ongeacht schermbreedte. Label en veld
 * blijven wél op één regel naast elkaar staan: dat is het bestaande
 * .stee-form-row-patroon zelf, dat hier ongewijzigd blijft. */
.stee-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--stee-space-3, 12px) var(--stee-space-4, 16px);
  margin: 12px 0;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.stee-detail-grid .stee-form-row { flex-wrap: nowrap; }
/* Afgeleide (niet-bewerkbare) waarde: zelfde label, platte tekst i.p.v. een
 * invoerveld dat toch niets opsloeg (maandbedrag, betaald, resterend, …). */
.stee-detail-grid__value {
  flex: 1;
  min-width: 0;
}
/* Op smalle schermen mag label+veld alsnog naar twee regels afbreken i.p.v.
 * over de rand van de modal heen te lopen — dat gedrag stond hier al vóór
 * de éénkolomswijziging en blijft nodig, ook nu er geen tweede kolom meer
 * wegvalt op dezelfde breedte. */
@media (max-width: 768px) {
  .stee-detail-grid .stee-form-row { flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABBLADEN — .stee-tabs / .stee-tab
   2026-09-11 (todo-…-xzxgt "trek de indeling overal gelijk", todo-…-8bk2s
   "erg veel spacing tussen de tabbladen").

   Vóór deze component had ELKE pagina zijn eigen tabbladen: .settings-sidebar-link
   (Instellingen), .settings-tab (Kasboekje), .overview-tab (Overzichten),
   .tab-btn/.cat-tab (Boodschappen) en .agenda-tab (Agenda) — vijf implementaties,
   verspreid over paginalokale <style>-blokken en stee-design.css, met vijf
   verschillende paddings, radii en actief-stijlen. Daarom verschilde de indeling
   per pagina, op pc én op mobiel.

   Desktop volgt bewust de INSTELLINGEN-stijl (gevraagd in xzxgt): rustige chip
   met rand, 8px radius, heading-font, gevulde actieve staat.

   Mobiel is het één horizontaal schuivende rij. Dat is niet alleen compacter dan
   afbreken over meerdere regels — het is ook de vangrail tegen een oorzaak die
   todo-…-1s4ym veroorzaakte: een tabbladenrij die breder is dan het scherm rekt
   anders de layout-viewport op, en juist dáéraan plakt de browser de vaste
   menubalk onderin (die dus meescrolde). overflow-x houdt de breedte binnen dit
   element in plaats van in de pagina.
   ═══════════════════════════════════════════════════════════════════════════ */
.stee-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  margin: 0 0 var(--stee-space-4, 16px);
  /* Segmentbalk (audit C2, Remco 2026-10-15): één gesegmenteerde balk overal,
     zoals de hub-tabs van Kasboek en Agenda (.stee-hub-tabs). */
  padding: 3px;
  border: 1px solid var(--stee-border, #E0E0E0);
  border-radius: 12px;
  background: var(--stee-surface-1, #fff);
  width: fit-content;
  max-width: 100%;
}

.stee-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--stee-space-2, 8px);
  padding: 8px 14px;
  font-family: var(--stee-font-heading, system-ui);
  font-size: 0.85em;
  font-weight: 500;
  line-height: 1.2;
  color: var(--stee-text-muted, #6B7280);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.stee-tab:hover {
  color: var(--stee-text-normal, #1F2937);
  background: var(--stee-surface-2, #F5F5F5);
}

/* .is-active is de canonieke vorm; .active blijft werken voor bestaande markup. */
.stee-tab.is-active,
.stee-tab.active {
  color: var(--stee-color-primary);
  background: var(--stee-surface-selected);
  border-color: transparent;
  font-weight: 600;
}

.stee-tab[disabled],
.stee-tab:disabled {
  opacity: .55;
  cursor: default;
}

@media (max-width: 768px) {
  .stee-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    gap: 4px;
    margin-bottom: var(--stee-space-3, 12px);
    /* De schuifbalk zelf zou op een telefoon alleen maar hoogte kosten. */
    scrollbar-width: none;
  }

  .stee-tabs::-webkit-scrollbar { display: none; }

  .stee-tab {
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 6px 10px;
    font-size: 0.78em;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABBLADEN — .stee-tabs--settings-style (VARIANT van .stee-tabs hierboven)
   2026-09-13 (todo-…-xzxgt vervolg, "2 en 3 moeten aangepast worden naar
   element 1"). De aanname hierboven (2026-09-11) dat .stee-tab al gelijk was
   aan de instellingen-navigatie klopte alleen in kleur (zelfde tokens) — niet
   structureel. Element 1, de MAAT, is .settings-sidebar-link in
   stee_settings.html (ONGEWIJZIGD, eigen implementatie, raak die niet aan):
   geen volledige randbox, en een actieve rij krijgt alleen een dunne
   accentlijn i.p.v. een rondom gekleurde rand. .stee-tab tekent bij "active"
   juist een volledige gekleurde rand rondom een gevulde chip — drukker dan
   de instellingen-vorm.

   Deze variant geeft Boodschappen en Overzichten (element 2 en 3) op de pc
   diezelfde rustigere vorm, ZONDER aan .stee-tab zelf — en dus ook niet aan
   de instellingen-navigatie, die er niet van erft — te raken. De extra
   klassen in de selector (i.p.v. gewoon .stee-tab overschrijven) zijn nodig
   om betrouwbaar te winnen van de oudere .tab-btn/.cat-tab-regels
   (stee-theme.css/stee-design.css) die Boodschappen nog meestuurt.

   Mobiel blijft de gewone horizontaal schuivende chiprij hierboven — vandaar
   de min-width-media-query, zodat er onder 768px NIETS van deze variant
   binnensijpelt. */
@media (min-width: 769px) {
  .stee-tabs--settings-style .stee-tab {
    background: transparent;
    border-color: transparent;
    border-radius: var(--stee-radius-md, 8px);
  }

  .stee-tabs--settings-style .stee-tab:hover {
    background: var(--stee-surface-2, #F5F5F5);
    border-color: transparent;
    color: var(--stee-text-normal, #1F2937);
  }

  .stee-tabs--settings-style .stee-tab.is-active,
  .stee-tabs--settings-style .stee-tab.active {
    background: var(--stee-surface-selected);
    color: var(--stee-color-primary);
    border-color: transparent;
    border-bottom: 2px solid var(--stee-color-primary);
    border-radius: var(--stee-radius-md, 8px) var(--stee-radius-md, 8px) 0 0;
    font-weight: 600;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ZIJDELINGSE PAGINANAVIGATIE — .stee-side-nav (Ronde O, todo-…-l9sls +
   todo-…-xzxgt-vervolg, "het gaat niet om opmaak, het gaat om de locatie").
   De instellingen-navigatie (.settings-sidebar, stee_settings.html) is DE
   MAAT en blijft haar eigen, ongewijzigde implementatie — dit is een LOSSE,
   gedeelde component die dezelfde indeling (een verticale lijst links van
   de inhoud, op mobiel één knop die de lijst als zwevend paneel opent) geeft
   aan andere pagina's: Overzichten en Boodschappen (element 2 en 3, die
   eerder horizontale tabbladenrijen waren) en optioneel Agenda.

   Twee losse stukken:
   - .stee-side-nav-collapsible: alléén het mobiele "knop ⇄ zwevend paneel"-
     mechanisme (toggle/menu/backdrop). Bruikbaar op ELKE root, ook één die
     op de pc gewoon zijn eigen (bv. horizontale) vorm houdt (Agenda).
   - .stee-side-nav: bovenop .stee-side-nav-collapsible ook de STEE 200px-
     kolom op de pc (Overzichten/Boodschappen, die net als Instellingen een
     linkerkolom krijgen).
   De open/dicht-/label-logica zelf zit in mobile-nav.js
   (SteeMobileNav.createSectionNavToggle) — deze CSS regelt alleen hoe dat
   er op elk breedtepunt uitziet. Positionering van het geopende paneel gaat
   via JS (positionFloatingPopover, ui-filters.js) — vandaar geen eigen
   left/top hieronder buiten wat hier als vaste basis nodig is.
   ═══════════════════════════════════════════════════════════════════════════ */
.stee-page-with-side-nav {
  display: flex;
  gap: var(--stee-space-4, 16px);
  align-items: flex-start;
}
.stee-side-nav-content {
  flex: 1;
  min-width: 0;
}

.stee-side-nav {
  width: 200px;
  flex-shrink: 0;
  padding: var(--stee-space-2, 8px) 0;
  position: sticky;
  top: 60px;
  align-self: flex-start;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}

.stee-side-nav-group { margin-bottom: var(--stee-space-4, 16px); }
.stee-side-nav-group-title {
  font-size: 0.7em;
  font-weight: 700;
  color: var(--stee-text-muted, #9CA3AF);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--stee-space-2, 8px) var(--stee-space-3, 12px) var(--stee-space-1, 4px);
  font-family: var(--font-heading, system-ui);
}

.stee-side-nav-link {
  display: flex;
  align-items: center;
  gap: var(--stee-space-2, 8px);
  margin: 2px var(--stee-space-2, 8px);
  padding: var(--stee-space-2, 8px) var(--stee-space-3, 12px);
  font-size: 0.85em;
  font-weight: 500;
  color: var(--stee-text-muted, #6B7280);
  text-decoration: none;
  border: 1px solid transparent;
  background: var(--stee-surface-1, #fff);
  cursor: pointer;
  width: calc(100% - var(--stee-space-4, 16px));
  text-align: left;
  font-family: var(--font-heading, system-ui);
  transition: all 0.15s ease;
  border-radius: 8px;
}
.stee-side-nav-link:hover {
  color: var(--stee-text-normal, #1F2937);
  background: var(--stee-surface-2, #F5F5F5);
}
.stee-side-nav-link.active {
  color: var(--stee-color-primary);
  background: var(--stee-surface-selected);
  font-weight: 600;
  border-right: 2px solid var(--stee-color-primary);
}

/* Boodschappen: hoofdgroep-knop (Boodschappenlijsten/Voorraadbeheer) ziet
   er hetzelfde uit als .stee-side-nav-link, maar klapt zijn eigen sublijst
   open/dicht i.p.v. meteen te "activeren" — vandaar een los pijltje. */
.stee-side-nav-link--group { justify-content: space-between; }
.stee-side-nav-link--group .stee-side-nav-caret {
  transition: transform 0.15s ease;
  flex-shrink: 0;
}
.stee-side-nav-link--group.active .stee-side-nav-caret { transform: rotate(180deg); }

.stee-side-nav-sublist {
  display: flex;
  flex-direction: column;
  margin: 2px var(--stee-space-2, 8px) var(--stee-space-2, 8px) calc(var(--stee-space-2, 8px) + 14px);
}
.stee-side-nav-sublist .stee-side-nav-link {
  width: calc(100% - var(--stee-space-2, 8px));
  font-size: 0.8em;
  margin: 1px 0;
}
.stee-side-nav-sublist-title {
  font-size: 0.72em;
  font-weight: 700;
  color: var(--stee-text-muted, #9CA3AF);
  padding: var(--stee-space-1, 4px) var(--stee-space-2, 8px) 2px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.stee-side-nav-toggle { display: none; }

@media (max-width: 768px) {
  /* Kolom: kinderen rekken mee tot de schermbreedte. Met flex-start werd de
     inhoud zo breed als zijn breedste rij en liep de pagina opzij (u4x5y). */
  .stee-page-with-side-nav {
    flex-direction: column;
    align-items: stretch;
  }
  .stee-page-with-side-nav > .stee-side-nav-content {
    width: 100%;
  }

  .stee-side-nav {
    position: static;
    top: auto;
    left: auto;
    bottom: auto;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;
    margin: 0 0 var(--stee-space-2, 8px);
    padding: 0;
    overflow: visible;
  }

  .stee-side-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--stee-space-2, 8px);
    width: 100%;
    box-sizing: border-box;
    padding: var(--stee-space-2, 8px) var(--stee-space-3, 12px);
    font-size: 0.9em;
    font-weight: 600;
    font-family: var(--font-heading, system-ui);
    color: var(--stee-text-normal, #1F2937);
    background: var(--stee-surface-1, #fff);
    border: 1px solid var(--stee-border, #E0E0E0);
    border-radius: 8px;
    cursor: pointer;
  }
  .stee-side-nav-toggle-caret { transition: transform 0.15s ease; }
  .stee-side-nav-collapsible.nav-open .stee-side-nav-toggle-caret { transform: rotate(180deg); }

  .stee-side-nav-menu { display: none; }
  .stee-side-nav-collapsible.nav-open .stee-side-nav-menu {
    display: flex;
    flex-direction: column;
    /* left/top/max-height komen van JS (positionFloatingPopover) — losstaand
       van elke scroll-ouder, zelfde aanpak als de instellingen-navigatie. */
    position: fixed;
    background: var(--stee-surface-1, #fff);
    border: 1px solid var(--stee-border, #E0E0E0);
    border-radius: 8px;
    box-shadow: var(--stee-shadow-lg, 0 8px 24px rgba(0,0,0,.28));
    padding: var(--stee-space-2, 8px);
    gap: 4px;
    z-index: 300;
    width: min(86vw, 320px);
    max-height: min(70vh, 480px);
    overflow-y: auto;
    box-sizing: border-box;
  }
  /* Binnen het zwevende paneel mogen ook gedeelde .stee-tab-knoppen (Agenda)
     vol-breed en links uitgelijnd staan i.p.v. als horizontale chip. */
  .stee-side-nav-menu .stee-tab {
    width: 100%;
    text-align: left;
  }
  .stee-side-nav-group { margin-bottom: 0; }
  .stee-side-nav-group-title { width: 100%; }
  .stee-side-nav-link {
    padding: var(--stee-space-1, 4px) var(--stee-space-2, 8px);
    font-size: 0.85em;
    border-radius: var(--stee-radius-md, 8px);
  }
  .stee-side-nav-sublist {
    margin-left: calc(var(--stee-space-2, 8px) + 14px);
  }

  .stee-side-nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .42);
    z-index: 290;
  }
  .stee-side-nav-backdrop.active { display: block; }
}

/* ─── Huishouden: inactiviteitsvraag, keukentablet koppelen, agenda per tabblad (todo-…-d54iu) ─── */
.stee-inactivity { display: grid; gap: var(--stee-space-2, 8px); margin: var(--stee-space-3, 12px) 0; }
.stee-inactivity[hidden] { display: none; }
.stee-inactivity-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--stee-space-2, 8px);
  padding: var(--stee-space-3, 12px); border-radius: var(--stee-radius-md, 8px);
  background: var(--stee-surface-warning-tint); border: 1px solid var(--stee-color-warning-tint-border, var(--stee-border));
  color: var(--stee-text-normal);
}
.stee-inactivity-row small { color: var(--stee-text-muted); display: block; }
.stee-inactivity-actions { display: flex; gap: var(--stee-space-2, 8px); flex-wrap: wrap; }
.stee-pair-modal { width: min(420px, 95vw); padding: var(--stee-space-5, 20px); text-align: center; }
.stee-pair-modal h2 { margin: 0 0 var(--stee-space-2, 8px); }
.stee-pair-help { color: var(--stee-text-muted); font-size: 0.9em; margin: var(--stee-space-2, 8px) 0; }
.stee-pair-field { display: grid; gap: 4px; text-align: left; margin: var(--stee-space-3, 12px) 0; }
.stee-pair-code { font: 700 2.2em/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; margin: var(--stee-space-3, 12px) 0; color: var(--stee-text-strong); }
.stee-pair-qr { display: flex; justify-content: center; }
.stee-pair-qr svg { width: 200px; height: 200px; background: #fff; border-radius: var(--stee-radius-sm, 6px); }
.stee-pair-error { color: var(--stee-color-danger); }
.stee-pair-actions { display: flex; justify-content: flex-end; gap: var(--stee-space-2, 8px); margin-top: var(--stee-space-4, 16px); }
/* ⚡ Snel toevoegen in het kasboek (todo-…-4evj8) */
.quick-add { width: min(400px, 95vw); padding: var(--stee-space-5, 20px); display: grid; gap: var(--stee-space-3, 12px); }
.quick-add h2 { margin: 0; }
.quick-add-amount { display: grid; gap: var(--stee-space-2, 8px); }
.quick-add-amount input { font-size: 1.8em; font-weight: 700; text-align: right; }
.quick-add-sign { display: flex; gap: var(--stee-space-4, 16px); }
.quick-add-sign label, .quick-add-check { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.quick-add input[type="radio"], .quick-add input[type="checkbox"] { width: auto; height: auto; margin: 0; }
.quick-add .stee-field { width: 100%; box-sizing: border-box; margin: 0; }
.quick-add-field { display: grid; gap: 4px; }
.quick-add-check { font-size: 0.9em; color: var(--stee-text-muted); }
.quick-add-pair { display: grid; gap: var(--stee-space-2, 8px); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.quick-add-pair [hidden] { display: none; }
.quick-add-more { font-size: 0.85em; color: var(--stee-text-muted); }
.quick-add-error { color: var(--stee-color-danger); margin: 0; }
.quick-add-actions { display: flex; justify-content: flex-end; gap: var(--stee-space-2, 8px); }
.access-devices { margin: var(--stee-space-3, 12px) 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--stee-space-2, 8px); }
.access-device-actions { white-space: nowrap; }
.access-cal-toggle { margin-left: 4px; }
/* kt8qt: Huisgenoten in blokjes met een kopje; per huisgenoot een kaartje. */
.access-block { margin: var(--stee-space-4, 16px) 0 0; padding-top: var(--stee-space-3, 12px); border-top: 1px solid var(--stee-border); min-width: 0; }
.access-block h4 { margin: 0 0 var(--stee-space-2, 8px); font-size: 1em; display: flex; align-items: center; gap: 6px; }
/* kt8qt vervolg: Huisgenoten weer als tabel; cellen zijn tekst, wijzigen via ✏.
   De tabel scrolt zo nodig binnen de kaart en loopt er nooit uit. */
.access-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--stee-border); border-radius: var(--stee-radius-md, 10px); }
.access-table { width: 100%; border-collapse: collapse; font-size: .88em; }
.access-table th, .access-table td { padding: 8px 10px; border-bottom: 1px solid var(--stee-border); text-align: left; vertical-align: middle; white-space: nowrap; }
.access-table tbody tr:last-child > * { border-bottom: 0; }
.access-table thead th { color: var(--stee-text-muted); font-weight: 600; background: var(--stee-surface-app); }
.access-table thead th .stee-ico { vertical-align: -2px; margin-right: 4px; }
.access-table .access-name { display: table-cell; font-weight: 600; }
.access-table .access-name .stee-ico { vertical-align: -2px; margin-right: 4px; }
.access-level--write { color: var(--stee-color-success); }
.access-level--none { color: var(--stee-text-muted); }
.access-actions { text-align: right; }
.access-actions .stee-btn { margin-left: 2px; }
.access-block--first { margin-top: 0; padding-top: 0; border-top: 0; }
@media (max-width: 700px) { .access-th-label { display: none; } }
/* Gebruikersronde 3: op een telefoon is de tabel een lijst. Per huisgenoot een
   blokje; elke cel toont zijn kolomnaam (data-label) vóór de waarde. */
@media (max-width: 560px) {
  .access-table-wrap { overflow-x: visible; }
  .access-table thead { display: none; }
  .access-table, .access-table tbody, .access-table tr { display: block; width: 100%; }
  .access-table tr { padding: 8px 10px; border-bottom: 1px solid var(--stee-border); }
  .access-table tbody tr:last-child { border-bottom: 0; }
  .access-table th, .access-table td { border-bottom: 0; padding: 2px 0; }
  .access-table .access-name { display: block; padding-bottom: 4px; white-space: normal; }
  .access-table td[data-label] { display: flex; justify-content: space-between; gap: 12px; }
  .access-table td[data-label]::before { content: attr(data-label); color: var(--stee-text-muted); font-weight: 400; }
  .access-table .access-actions { display: block; text-align: right; }
  .access-table .access-actions:empty { display: none; }
}
.access-rights { display: grid; gap: var(--stee-space-2, 8px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); margin-top: var(--stee-space-2, 8px); }
.access-right { display: grid; gap: 2px; font-size: .85em; min-width: 0; }
.access-right__label { display: inline-flex; align-items: center; gap: 4px; color: var(--stee-text-muted); }
.access-right select { width: 100%; min-width: 0; }
.access-right--check { display: flex; align-items: center; gap: 6px; align-self: end; min-height: 36px; }
.access-cal-row { margin-top: var(--stee-space-2, 8px); padding: var(--stee-space-2, 8px); border-radius: var(--stee-radius-sm, 6px); background: var(--stee-surface-app); }
.access-names { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; }
.access-name-chip { display: inline-flex; align-items: center; gap: 4px; }
.access-name-chip__x { border: 0; background: none; padding: 0 2px; cursor: pointer; color: var(--stee-text-muted); display: inline-flex; }
/* tfjj9: veld en knop op één lijn en even hoog (de knop rekte eerst op). */
.access-name-form { display: flex; gap: var(--stee-space-2, 8px); flex-wrap: wrap; align-items: center; margin-top: var(--stee-space-2, 8px); }
.access-name-form input { flex: 1 1 180px; min-width: 0; }
.access-name-form .stee-btn { height: 38px; min-height: 38px; padding-block: 0; white-space: nowrap; }
.access-cal-list { display: flex; flex-wrap: wrap; gap: var(--stee-space-2, 8px) var(--stee-space-4, 16px); }
.access-cal-item { display: inline-flex; align-items: center; gap: 6px; }
.access-cal-note { margin: 6px 0 0; font-size: 0.8em; color: var(--stee-text-muted); }

/* ── Hulp: ?-bolletje en uitlegvenster (stee-help.js, todo-…-4y6k3) ─────── */
.stee-help-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.15em; height: 1.15em; margin-left: 4px; vertical-align: middle;
  border-radius: var(--stee-radius-pill, 999px);
  background: var(--stee-color-primary-tint); color: var(--stee-color-primary);
  border: 1px solid var(--stee-color-primary);
  font-size: 0.8em; font-weight: 700; line-height: 1; cursor: help; user-select: none;
}
/* Met het ?-icoon uit de sprite: het icoon is zelf al het rondje. */
.stee-help-dot:has(> .stee-ico) { background: none; border: 0; width: auto; height: auto; font-size: 1em; }
.stee-help-dot > .stee-ico { width: 1.05em; height: 1.05em; }
.stee-help-dot:focus-visible { outline: 2px solid var(--stee-color-primary); outline-offset: 2px; }
.stee-help-pop { z-index: var(--stee-z-modal, 3000); min-width: 0; color: var(--stee-text-normal); font-size: 0.92em; }
.stee-help-pop p { margin: 6px 0 8px; }
.stee-help-faq h3 { margin: var(--stee-space-4, 16px) 0 var(--stee-space-2, 8px); }
.stee-help-faq details { border-top: 1px solid var(--stee-border); padding: var(--stee-space-2, 8px) 0; }
.stee-help-faq summary { cursor: pointer; font-weight: 600; }
.stee-help-faq details p { margin: 6px 0 0; color: var(--stee-text-muted); }

/* 8x2d1: één gerechtformulier (meal-form.js) voor het receptvenster en de
   maaltijdplanner: Naam | Personen, Link, Ingrediënten als regels, Bereiding. */
.meal-form { display: grid; gap: 12px; }
.meal-form-pair { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) 110px; }
/* y5sgc: datum (dd-mm-jjjj), naam en personen (max. 2 cijfers) op één rij; smal: datum erboven */
.meal-form-pair--date { grid-template-columns: 160px minmax(0, 1fr) 72px; }
@media (max-width: 520px) { .meal-form-pair--date { grid-template-columns: minmax(0, 1fr) 72px; } .meal-form-pair--date > :first-child { grid-column: 1 / -1; } }
.meal-form-field { display: grid; gap: 4px; font-weight: 600; font-size: .9em; min-width: 0; }
.meal-form-field .stee-field { width: 100%; font-weight: 400; box-sizing: border-box; }
.meal-form-field textarea { resize: vertical; }
.meal-form-field small { font-weight: 400; color: var(--stee-text-muted); }
.meal-ing-rows { display: grid; gap: 4px 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.meal-ing-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) 72px 78px auto; gap: 6px; align-items: center; }
.meal-ing-row--plain { grid-template-columns: minmax(0, 1fr) 72px 78px auto; }
.meal-ing-sauslabel { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--stee-text-muted); cursor: pointer; }
.meal-ing-saus { width: 18px; height: 18px; margin: 0; accent-color: var(--stee-color-primary, currentColor); }
.meal-ing-row .stee-field { width: 100%; min-width: 0; box-sizing: border-box; margin: 0; min-height: 34px; padding: 5px 8px; }
/* f194v: knopje nodig ☐ / in huis ✓ / besteld 🚚. */
.meal-ing-state { width: 30px; height: 30px; margin: 0; padding: 0; display: grid; place-items: center; border: 1px solid var(--stee-border); border-radius: var(--stee-radius-sm, 6px); background: var(--stee-surface-1); color: var(--stee-text-muted); font-size: 16px; line-height: 1; cursor: pointer; }
.meal-ing-state[data-state="inhuis"] { background: var(--stee-color-success-tint); border-color: var(--stee-color-success-tint-border); color: var(--stee-color-success); font-weight: 700; }
.meal-ing-state[data-state="besteld"] { background: var(--stee-color-info-tint); border-color: var(--stee-color-info-tint-border); }
.agenda-meal-modal { width: min(820px, 96vw); }

/* hdph6: app-slot in de Android-app (stee-app-lock.js). Bedekt alles tot je
   ontgrendelt met vingerafdruk of pincode. */
.stee-app-lock { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; padding: 24px; background: var(--stee-surface-app, #f6f5fb); }
.stee-app-lock__box { display: grid; gap: 14px; justify-items: center; text-align: center; width: min(340px, 100%); }
.stee-app-lock__box > .stee-ico { width: 48px; height: 48px; }
.stee-app-lock__box h2 { margin: 0; }
.stee-app-lock__box > .stee-btn, .stee-app-lock__pin { width: 100%; }
.stee-app-lock__pin { display: flex; gap: 8px; }
.stee-app-lock__pin input { flex: 1; min-width: 0; text-align: center; letter-spacing: .3em; }
.stee-app-lock__status { min-height: 1.2em; margin: 0; color: var(--stee-color-danger, #c62828); }
html.stee-app-locked body { overflow: hidden; }

/* 6g0st/ji61e: tabs in Instellingen die niet bij dit onderdeel of je rechten
   horen. Eigen kenmerken, zodat het zoekveld ze niet terugzet. */
[data-scope-out], [data-access-out] { display: none !important; }
.settings-scope-head { display: grid; gap: 4px; padding: 4px 4px 12px; }
.settings-scope-head h2 { margin: 0; font-size: 1.1em; }
.settings-scope-back { font-size: .9em; font-weight: 600; color: var(--stee-color-primary); text-decoration: none; }
.stee-manage-link { display: inline-flex; align-items: center; gap: 4px; }
.stee-manage-link .stee-ico { width: 1em; height: 1em; }

/* q9q95: PDF-voorbeeld bij een bijlage: precies één A4-pagina hoog bij de beschikbare breedte. */
.stee-attachment-pdf {
  width: 100%;
  aspect-ratio: 210 / 297;
  height: auto;
  max-height: 85vh;
  border: 1px solid var(--stee-border, #ccc);
  border-radius: 6px;
  margin-top: 10px;
}

/* Rondleiding (lh6ya): donkere laag met een "gat" om het uitgelichte blok en een ballon met uitleg.
   JS/stee-rondleiding.js zet alleen top/left/width/height van het gat en de plek van de ballon. */
.stee-rl {
  position: fixed;
  inset: 0;
  z-index: 10060;
}
.stee-rl--dim { background: var(--stee-overlay, rgba(0, 0, 0, 0.55)); }
.stee-rl-hole {
  position: fixed;
  border-radius: var(--stee-radius-md, 8px);
  box-shadow: 0 0 0 9999px var(--stee-overlay, rgba(0, 0, 0, 0.55));
  outline: 3px solid var(--stee-color-primary, #7B3FA0);
  pointer-events: none;
}
.stee-rl-hole[hidden], .stee-rl-balloon[hidden] { display: none; }
.stee-rl-balloon {
  position: fixed;
  box-sizing: border-box;
  width: min(360px, calc(100vw - 32px));
  padding: var(--stee-space-4, 16px);
  background: var(--stee-surface-1, #fff);
  color: var(--stee-text-normal, #1F2937);
  border: 1px solid var(--stee-border, #E5E7EB);
  border-radius: var(--stee-radius-lg, 12px);
  box-shadow: var(--stee-shadow-lg);
}
.stee-rl-balloon h2 { margin: 0 0 var(--stee-space-1, 4px); padding-right: 32px; font-size: 1.05em; }
.stee-rl-balloon p { margin: 0 0 var(--stee-space-3, 12px); line-height: 1.45; }
.stee-rl-x { position: absolute; top: 8px; right: 8px; }
.stee-rl-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--stee-space-2, 8px); flex-wrap: wrap; }
.stee-rl--film .stee-rl-foot, .stee-rl--film .stee-rl-balloon p + .stee-rl-foot { display: none; }
.stee-rl-count { color: var(--stee-text-muted, #6B7280); font-size: 0.85em; }
.stee-rl-actions { display: flex; gap: var(--stee-space-2, 8px); flex-wrap: wrap; }
/* Smal scherm: de ballon is een strook onderin (of bovenin als het doel laag staat). */
@media (max-width: 600px) {
  .stee-rl-balloon { left: 8px !important; right: 8px; width: auto; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); top: auto !important; }
  .stee-rl-balloon.stee-rl-top { top: calc(8px + env(safe-area-inset-top, 0px)) !important; bottom: auto; }
}

/* Herhaalvenster "Aangepast…" (stee-herhaling-venster.js): ronde weekdagknoppen zoals Google Agenda. */
.stee-herh { display: grid; gap: var(--stee-space-3, 12px); }
.stee-herh__row { display: flex; align-items: center; gap: var(--stee-space-2, 8px); }
.stee-herh__row input, .stee-herh__row select, .stee-herh__row > span { min-width: 0; }
.stee-herh__row input[type="number"] { width: 4.5em; }
.stee-herh__row input, .stee-herh__row select { box-sizing: border-box; min-height: 40px; padding: 0 var(--stee-space-2, 8px); border: 1px solid var(--stee-border); border-radius: var(--stee-radius-md, 8px); background: var(--stee-surface-1); color: inherit; font: inherit; }
.stee-herh__row select { flex: 1 1 auto; }
.stee-herh__days { display: flex; gap: var(--stee-space-1, 4px); flex-wrap: wrap; }
.stee-herh__dag { width: 36px; height: 36px; padding: 0; border: 1px solid var(--stee-border); border-radius: var(--stee-radius-pill, 999px); background: var(--stee-surface-1); color: inherit; font: inherit; font-size: .85em; cursor: pointer; }
.stee-herh__dag[aria-pressed="true"] { background: var(--stee-color-primary); border-color: var(--stee-color-primary); color: var(--stee-text-on-primary); }
.stee-herh [hidden] { display: none; }