/* ==========================================================================
   WebhookLog — huisstijl Web-Bis IT.

   Alle waarden komen uit de stijlgids in Styleguid/. Oranje is vlakkleur en
   nooit kleine tekst: op licht is de actiekleur #B4531A met wit erop (5.01:1),
   op donker is dat #FF9A1F met inkt erop. Koppen staan in zinsvorm, niet in
   kapitalen, en de radius loopt niet boven 14px — knoppen staan op 6px, geen
   pills. Dat is het verschil dat je het eerst ziet.

   Twee thema's. Donker staat standaard aan; licht via de schakelaar. Alle kleur
   loopt via semantische tokens, zodat er per thema precies één plek is waar een
   waarde vandaan komt.

   Barlow Semi Condensed en IBM Plex Mono komen van Google Fonts, gelinkt vanuit
   de pagina's zelf.
   ========================================================================== */

:root {
  /* Merkkleuren uit het Web-Bis IT logo. Fel oranje is vlak- en accentkleur,
     nooit tekst en nooit met witte tekst erop. */
  --wb-orange-400: #ff9a1f;
  --wb-orange-500: #ff7a00;
  --wb-orange-600: #ff5a00;
  --wb-orange-700: #b4531a;
  --wb-orange-800: #93400f;

  --wb-ink-900: #1f2730;
  --wb-ink-800: #2f3742;
  --wb-ink-700: #35404c;
  --wb-ink-600: #46515f;

  --wb-brand-gradient: linear-gradient(135deg, #ff9a1f 0%, #ff5a00 100%);

  --font-sans: "Barlow Semi Condensed", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-h1: 2rem;
  --fs-h2: 1.5rem;
  --fs-h3: 1.1875rem;
  --fs-body: 1.0625rem;
  --fs-small: .9375rem;
  --fs-caption: .8125rem;

  --tracking-head: -.01em;
  --tracking-label: .06em;

  /* Rustig en rechthoekig: 14px is het maximum, knoppen staan op 6px. */
  --radius-xs: 3px;
  --radius-badge: 4px;
  --radius-btn: 6px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  --control-h: 44px;
  --control-h-lg: 48px;

  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-inout: cubic-bezier(.65,0,.35,1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
}

/* --- Donker: de standaard ------------------------------------------------
   Verankerd op #1A2027. Op antraciet mag merkoranje wél tekst zijn: #FF9A1F
   haalt daar 7.7:1, en daarom is dat hier de interactiekleur.
   ------------------------------------------------------------------------ */

:root, [data-theme="dark"] {
  color-scheme: dark;

  --bg: #1a2027;
  --surface: #232b34;
  --surface-2: #2c3641;
  --surface-3: #121820;

  --border: #35404c;
  --border-ctl: #808a95;

  --text: #f1f4f7;
  --text-2: #c3cad2;
  --text-3: #9aa3ad;
  --text-on-ink: #f1f4f7;

  --brand: #ff9a1f;
  --accent-text: #ffae55;

  --primary: #ff9a1f;
  --primary-hover: #ffb457;
  --on-primary: #16202b;
  --focus: #ff9a1f;
  --focus-ring-soft: rgb(255 154 31 / 24%);

  --danger: #f08074;
  --danger-hover: #f5a99f;
  --on-danger: #16202b;

  --ok-bg: #1c3a2b;   --ok-fg: #7fdcab;
  --warn-bg: #3d2e18; --warn-fg: #f5b25c;
  --err-bg: #40201d;  --err-fg: #f5a99f;
  --info-bg: #1d3a48; --info-fg: #8fd4ee;

  --code-bg: #121820;     --code-fg: #dfe6ee;
  --code-err-bg: #2c1310; --code-err-fg: #ffd7d2;

  /* De methodelabels dragen geen eigen kleuren in de stijlgids; ze lenen de
     statusparen, want de methode staat er ook letterlijk bij. */
  --m-get-bg: var(--info-bg);     --m-get-fg: var(--info-fg);
  --m-post-bg: var(--ok-bg);      --m-post-fg: var(--ok-fg);
  --m-put-bg: var(--warn-bg);     --m-put-fg: var(--warn-fg);
  --m-patch-bg: var(--surface-2); --m-patch-fg: var(--text);
  --m-delete-bg: var(--err-bg);   --m-delete-fg: var(--err-fg);

  --topbar-bg: rgb(26 32 39 / 82%);
  --live: var(--ok-fg);
  --flash-ring: rgb(255 154 31 / 45%);
  --flash-border: var(--brand);

  --demo-bg: var(--surface-3);
  --demo-border: var(--border);
  --demo-accent: var(--brand);

  --shadow-xs: 0 1px 2px rgb(0 0 0 / 34%);
  --shadow-sm: 0 2px 6px rgb(0 0 0 / 38%);
  --shadow-md: 0 6px 18px rgb(0 0 0 / 44%);
  --shadow-lg: 0 14px 36px rgb(0 0 0 / 50%);
  /* De stijlgids kent één schaduwschaal en geen gekleurde schaduw. */
  --shadow-primary: var(--shadow-lg);

  /* Het logo is voor licht getekend; op donker krijgt het deze ondergrond. */
  --logo-plate: #f7f8f9;
}

/* --- Licht -------------------------------------------------------------- */

[data-theme="light"] {
  color-scheme: light;

  --bg: #f7f8f9;
  --surface: #fff;
  --surface-2: #eff1f3;
  --surface-3: #1f2730;

  --border: #e2e5e9;
  --border-ctl: #79818c;

  --text: #1f2730;
  --text-2: #4c5661;
  --text-3: #6b737e;
  --text-on-ink: #f1f4f7;

  --brand: #ff7a00;
  --accent-text: #b4531a;

  --primary: #b4531a;
  --primary-hover: #93400f;
  --on-primary: #fff;
  --focus: #b4531a;
  --focus-ring-soft: rgb(180 83 26 / 20%);

  --danger: #b3271a;
  --danger-hover: #931f14;
  --on-danger: #fff;

  --ok-bg: #e6f2ea;   --ok-fg: #1e6141;
  --warn-bg: #fdeed9; --warn-fg: #8a4a08;
  --err-bg: #fbe9e7;  --err-fg: #97281c;
  --info-bg: #e7eef5; --info-fg: #2c4a63;

  --code-bg: #1f2730;     --code-fg: #e8ecf1;
  --code-err-bg: #3a1512; --code-err-fg: #ffdedb;

  --m-get-bg: var(--info-bg);     --m-get-fg: var(--info-fg);
  --m-post-bg: var(--ok-bg);      --m-post-fg: var(--ok-fg);
  --m-put-bg: var(--warn-bg);     --m-put-fg: var(--warn-fg);
  --m-patch-bg: var(--surface-2); --m-patch-fg: var(--text);
  --m-delete-bg: var(--err-bg);   --m-delete-fg: var(--err-fg);

  --topbar-bg: rgb(247 248 249 / 85%);
  --live: var(--ok-fg);
  --flash-ring: rgb(255 122 0 / 45%);
  --flash-border: var(--brand);

  --demo-bg: var(--surface-3);
  --demo-border: var(--wb-ink-700);
  --demo-accent: var(--wb-orange-400);

  --shadow-xs: 0 1px 2px rgb(31 39 48 / 7%);
  --shadow-sm: 0 2px 6px rgb(31 39 48 / 8%);
  --shadow-md: 0 6px 18px rgb(31 39 48 / 11%);
  --shadow-lg: 0 14px 36px rgb(31 39 48 / 14%);
  --shadow-primary: var(--shadow-lg);

  /* Op licht staat het logo gewoon op de pagina. */
  --logo-plate: transparent;
}

/* --- Basis --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  transition: background-color var(--dur-base) var(--ease-inout),
              color var(--dur-base) var(--ease-inout);

  /* De voettekst hoort onderaan, ook als de pagina korter is dan het scherm. Een kolom over de
     hele hoogte, en de voettekst duwt zichzelf naar beneden met de ruimte die overblijft. Op een
     lange pagina verandert er niets: dan is er niets te duwen. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-footer { margin-top: auto; }

/* Koppen staan in zinsvorm. Kapitalen zijn voorbehouden aan labels en eyebrows;
   dat is het meest zichtbare verschil met de vorige huisstijl. */
h1, h2 {
  margin: 0; font-weight: 700;
  letter-spacing: var(--tracking-head); line-height: var(--lh-tight, 1.15);
}

code, pre { font-family: var(--font-mono); }

/* Een expliciete display in deze stylesheet wint van het hidden-attribuut uit de
   browser-stylesheet. Verbergen moet verbergen, ook bij een knop of een chip. */
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.icon {
  width: 20px; height: 20px; flex: none;
  stroke: currentcolor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round; fill: none;
}
.icon-sm { width: 16px; height: 16px; stroke-width: 2; }

.eyebrow {
  font-size: var(--fs-caption); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--tracking-label); color: var(--accent-text); margin: 0;
}

/* Het logo is voor een lichte ondergrond getekend: de vier grijze kubussen halen op
   antraciet maar 1,1 tot 2,0:1 en verdwijnen dus. Op donker krijgt het daarom een licht
   plaatje eronder, zodat de tekening onaangetast blijft. */
.logo-plate {
  display: inline-flex; flex: none;
  background: var(--logo-plate);
  border-radius: var(--radius-sm);
  padding: var(--logo-plate-pad, 0);
  transition: background-color var(--dur-base) var(--ease-inout);
}
[data-theme="dark"] .logo-plate,
:root:not([data-theme="light"]) .logo-plate { --logo-plate-pad: 6px 8px; }

.topbar-logo { height: 30px; width: auto; display: block; }

/* De naam van het programma, met eronder klein van wie het is. Die tweede regel is dynamisch:
   draagt een team een eigen merk, dan staat daar de naam van die klant en niet die van ons.
   --text-2 en niet --text-3: die laatste haalt op een licht scherm 4,35:1 en dat is te weinig. */
.brand-lockup-bar { display: flex; flex-direction: column; justify-content: center; line-height: 1.15; }

.product-name {
  font-weight: 700; letter-spacing: var(--tracking-head); white-space: nowrap;
}

.maker {
  font-size: var(--fs-caption); color: var(--text-2); white-space: nowrap;
}

.brand-name { white-space: nowrap; }

/* --- Gedeelde onderdelen -------------------------------------------------
   Deze stonden in profiling.css, maar ze zijn niet van die pagina: een
   keuzelijst, een paneelkop en een blok voorgevormde tekst horen bij de
   huisstijl. De CSV-pagina heeft ze ook nodig, en twee kopieën van dezelfde
   knop lopen vroeg of laat uit elkaar.
   ------------------------------------------------------------------------ */

/* .wrap.wrap-wide en niet .wrap-wide: .wrap staat verderop in dit bestand met dezelfde
   gewichtsklasse, en won daarmee altijd. De brede pagina's stonden daardoor stilletjes op 1040px. */
.wrap.wrap-wide { max-width: 1400px; }

.select { min-width: 260px; }

.select {
  appearance: none;
  font: inherit; font-size: var(--fs-small); color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border-ctl);
  border-radius: var(--radius-md); padding: 11px 38px 11px 14px; min-height: 48px;
  background-image: linear-gradient(45deg, transparent 50%, currentcolor 50%),
                    linear-gradient(135deg, currentcolor 50%, transparent 50%);
  background-position: right 18px center, right 13px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.select:hover { border-color: var(--text); }
.select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring-soft); }

.panel-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.panel-head h2 { font-size: 1.05rem; }
.panel-head .spacer { margin-left: auto; }

pre.doc {
  margin: 0; background: var(--code-bg); color: var(--code-fg); border-radius: var(--radius-md);
  padding: 16px 18px; font-size: var(--fs-caption); line-height: 1.6; overflow-x: auto;
  white-space: pre; tab-size: 2;
}
pre.doc mark {
  background: var(--flash-ring); color: inherit; border-radius: 4px;
  padding: 1px 3px; box-shadow: 0 0 0 1px var(--flash-border);
}

/* --- Releasepagina -------------------------------------------------------
   Lopende tekst, dus smal: een regel van honderdtwintig tekens leest niet.
   ------------------------------------------------------------------------ */

.notes { max-width: 74ch; }
.notes h2 {
  font-size: var(--fs-h2); margin: 40px 0 4px; padding-top: 22px;
  border-top: 1px solid var(--border);
}
.notes h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.notes h3 {
  font-size: var(--fs-h3); font-weight: 700; letter-spacing: var(--tracking-head);
  margin: 26px 0 6px;
}
.notes p { color: var(--text-2); margin: 0 0 10px; }
.notes ul { margin: 0 0 14px; padding-left: 20px; }
.notes li { color: var(--text-2); margin: 4px 0; }
.notes strong { color: var(--text); }
.notes code { font-size: .875em; color: var(--text); }
.notes-empty { color: var(--text-3); font-style: italic; }

/* --- Voettekst ------------------------------------------------------------
   Op elke pagina dezelfde regel: welke versie draait, en van wie dit product
   is. Klein en rustig; hij hoort er te staan, niet op te vallen.
   ------------------------------------------------------------------------ */

/* --text-2 en niet --text-3: die haalt op een licht scherm 4,35:1 tegen de achtergrond, en dat is
   te weinig voor tekst. Op donker maakt het niets uit; op licht scheelt het 4,35 tegen 6,70. */
.site-footer {
  display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 28px 24px 32px;
  font-size: var(--fs-caption); color: var(--text-2);
}
.site-footer > * + *::before {
  content: "·"; margin-right: 10px; color: var(--border-ctl);
}
.site-footer-number { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

@media print { .site-footer { display: none; } }

/* --- Knoppen ------------------------------------------------------------ */

.btn {
  font-family: inherit; font-weight: 700; font-size: var(--fs-small);
  border-radius: var(--radius-btn); padding: 12px 24px;
  border: 1.5px solid transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; cursor: pointer; text-decoration: none;
  transition: background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-hover); transform: translateY(-1px); box-shadow: var(--shadow-primary); }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border-ctl); }
.btn-ghost:hover { border-color: var(--text); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn-danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: var(--on-danger); transform: translateY(-1px); }
.btn-sm { min-height: 40px; padding: 8px 16px; font-size: var(--fs-caption); gap: 6px; }
.btn:active { transform: scale(.98); }

.btn-icon {
  width: 44px; height: 44px; padding: 0; border-radius: var(--radius-btn);
  background: transparent; border: 1.5px solid transparent; color: var(--text-2);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn-icon:hover { background: var(--surface-2); color: var(--text); }
.btn-icon:active { transform: scale(.94); }

/* Themaschakelaar: de twee iconen kruisen, geen bounce */
/* --- Venster voor de eigenaarssleutel ------------------------------------ */

.modal {
  position: fixed; inset: 0; z-index: 80; display: none;
  background: rgb(0 0 0 / 45%); padding: 24px;
}
.modal.is-open {
  display: grid; place-items: center;
  animation: modal-in var(--dur-base) var(--ease-out) both;
}
@keyframes modal-in { from { opacity: 0; } to { opacity: 1; } }

.modal-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 30px; width: min(480px, 100%);
  display: flex; flex-direction: column; gap: 22px;
  animation: modal-rise var(--dur-base) var(--ease-out) both;
}
@keyframes modal-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Het slot staat groot in het venster, in dezelfde kleur als in de balk: je ziet
   aan de vorm en aan de kleur waar je aan toe bent, niet alleen aan de tekst. */
.modal-head { display: flex; gap: 16px; align-items: flex-start; }
.modal-mark {
  flex: none; width: 44px; height: 44px; border-radius: var(--radius-md);
  display: grid; place-items: center;
  background: var(--surface-2); color: var(--text-2);
  border: 1px solid var(--border);
}
.modal-mark[data-tone="locked"] { color: var(--accent-text); }
.modal-mark[data-tone="owner"]  { color: var(--live); }
.modal-mark .icon { width: 22px; height: 22px; }

.modal-card h2 { font-size: 1.2rem; margin-bottom: 6px; }
.modal-lede { margin: 0; font-size: var(--fs-small); color: var(--text-2); }

.modal-card form { display: flex; flex-direction: column; gap: 18px; }
.modal-hint { font-size: var(--fs-caption); color: var(--text-3); }

.modal-note {
  margin: 0; padding-left: 12px; border-left: 2px solid var(--border);
  font-size: var(--fs-caption); color: var(--text-3);
}

.modal-error {
  margin: 0; padding: 12px 14px; border-radius: var(--radius-md);
  background: var(--err-bg); color: var(--err-fg); font-size: var(--fs-small);
}

/* Wat je zelden doet staat apart en klein; wat je nu komt doen staat rechts. */
.modal-more {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding-top: 18px; border-top: 1px solid var(--border);
}
.modal-more + .modal-buttons { padding-top: 0; border-top: 0; }

.modal-buttons {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
  padding-top: 18px; border-top: 1px solid var(--border);
}
/* Een knop die iets onomkeerbaars doet, buiten het dialoogvenster ook. */
.btn.is-danger { color: var(--danger); border-color: var(--border-ctl); }
.btn.is-danger:hover { border-color: var(--danger); background: var(--surface-2); }
.btn-icon.is-danger:hover { color: var(--danger); border-color: var(--danger); }

.modal-more .btn.is-danger { color: var(--danger); border-color: var(--border-ctl); }
.modal-more .btn.is-danger:hover { border-color: var(--danger); background: var(--surface-2); }

.owner-lock[data-state="locked"] { color: var(--accent-text); }
.owner-lock[data-state="owner"] { color: var(--live); }

/* Uitleg bij een knop die alleen een plaatje draagt. Hij hangt onder de knop en loopt naar links
   uit, want deze knoppen staan rechts in de balk. Bij aanwijzen én bij tabben, want wie met het
   toetsenbord werkt heeft de uitleg net zo hard nodig. */
.tip-wrap { position: relative; display: inline-flex; }

.tip-panel {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 30;
  width: max-content; max-width: min(300px, calc(100vw - 32px));
  padding: 10px 12px; text-align: left;
  background: var(--surface); color: var(--text-2);
  border: 1px solid var(--border-ctl); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-size: var(--fs-caption); line-height: 1.45; white-space: normal;
  animation: tip-in var(--dur-fast) var(--ease-out);
}

.tip-panel strong { display: block; color: var(--text); margin-bottom: 2px; }

@keyframes tip-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.lang-toggle {
  font-family: inherit; font-size: var(--fs-caption); font-weight: 700;
  letter-spacing: .06em; width: auto; min-width: 40px; padding: 0 10px;
}

.theme-toggle { position: relative; overflow: hidden; }
.theme-toggle .icon { position: absolute; transition: opacity var(--dur-base) var(--ease-inout),
                                                     transform var(--dur-base) var(--ease-inout); }
.theme-toggle .i-sun  { opacity: 1; transform: none; }
.theme-toggle .i-moon { opacity: 0; transform: translateY(14px); }
[data-theme="light"] .theme-toggle .i-sun  { opacity: 0; transform: translateY(-14px); }
[data-theme="light"] .theme-toggle .i-moon { opacity: 1; transform: none; }

/* --- Schuifknop: aan of uit ----------------------------------------------
   Voor de twee standen die een endpoint zelf heeft — profileren, en maskeren. Een chip die "aan"
   heet zegt niet of hij aan stáát of dat je hem aan kunt zetten; een schuif laat dat zien.

   Het woord staat links, de schuif rechts. De stand hangt niet aan kleur alleen: de bol staat links
   of rechts en het spoor vult zich. Doorgerekend op het paneelvlak: de rand van het spoor 4,1:1 op
   donker en 4,0:1 op licht, het spoor als hij aanstaat 6,7:1 en 5,0:1, en de bol daarop 7,8:1 en
   5,0:1. */
.switch {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 4px 0 0;
  background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: var(--fs-caption); font-weight: 700;
  letter-spacing: .02em; color: var(--text-2);
}
.switch:hover { color: var(--text); }
.switch:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--radius-btn); }

.switch-track {
  position: relative; flex: none;
  width: 42px; height: 24px; border-radius: 999px;
  background: var(--surface-2); border: 1.5px solid var(--border-ctl);
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.switch-knob {
  position: absolute; top: 2px; left: 2px;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--border-ctl);
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.switch[aria-checked="true"] { color: var(--text); }
.switch[aria-checked="true"] .switch-track { background: var(--primary); border-color: var(--primary); }
.switch[aria-checked="true"] .switch-knob { background: var(--on-primary); transform: translateX(18px); }

.switch:disabled { cursor: not-allowed; color: var(--text-3); }
.switch:disabled .switch-track { border-color: var(--border); background: var(--surface-2); }
.switch:disabled .switch-knob { background: var(--border); }
.switch:disabled[aria-checked="true"] .switch-track { background: var(--border-ctl); border-color: var(--border-ctl); }
.switch:disabled[aria-checked="true"] .switch-knob { background: var(--surface); }

/* --- De thuispagina van een team: de endpoints als kaarten ----------------
   Dit scherm is om te kíjken, niet om te beheren: elke kaart is één endpoint en de hele kaart is
   de link naar zijn berichten. Daarom geen tabel met knoppen per rij, maar een raster waarin de
   naam het grootst is en de stand er met een plaatje naast staat.

   Heeft een endpoint geen naam, dan staat zijn sleutel er in het monospace-schrift: dan is dát hoe
   hij heet, en een sleutel lees je per teken. */
.team-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 22px;
}
.team-title { margin: 4px 0 6px; }
.team-lede { margin: 0; color: var(--text-2); font-size: var(--fs-small); }
.team-search { display: flex; align-items: center; gap: 12px; flex: 0 1 380px; }
.team-search .input { min-width: 0; }
.team-search .count { white-space: nowrap; }

.ep-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.ep-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px 20px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-xs);
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.ep-card:hover {
  transform: translateY(-2px); border-color: var(--border-ctl); box-shadow: var(--shadow-md);
}
.ep-card:active { transform: scale(.995); }
.ep-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

.ep-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ep-name {
  font-weight: 700; font-size: var(--fs-body); color: var(--text);
  letter-spacing: var(--tracking-head);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* De sleutel is hier de naam, dus hij staat er heel: liever twee regels dan een afgekapte sleutel
   waarvan je de helft moet raden. */
.ep-key {
  font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-2);
  overflow-wrap: anywhere; min-width: 0;
}

/* De stand: het plaatje en het woord samen. Nooit het plaatje alleen — een wereldbol leert een
   nieuwe gebruiker pas kennen nadat iemand het hem heeft verteld. */
.ep-state {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-size: var(--fs-caption); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-2);
}
.ep-state[data-state="private"] { color: var(--accent-text); }

.ep-meta { font-size: var(--fs-caption); color: var(--text-2); font-variant-numeric: tabular-nums; }
.ep-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ep-tag {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--radius-badge);
  background: var(--surface-2); color: var(--text-2);
}
.ep-tag.is-masked { color: var(--accent-text); }

/* Een blok per team op de beheerstart: de naam erboven, de kaarten eronder. Beheren doe je altijd
   ergens, en bij twee teams is "gebruikers" zonder die naam geen antwoord maar een vraag. */
.admin-block + .admin-block { margin-top: 32px; }
.admin-block-head {
  display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.admin-block-head h2 { margin: 0; font-size: 1.125rem; }
/* Vier kaarten per team horen op één regel te passen: met 300px eronder viel de vierde telkens
   alleen op een volgende rij. */
.admin-block .ep-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* --- De voordeur van het beheer ------------------------------------------
   Vier of vijf kaarten, elk naar een eigen scherm. Groter dan een knop en kleiner dan een pagina:
   dit is waar je kiest, niet waar je iets doet. */
.admin-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 20px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-xs);
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.admin-card:hover {
  transform: translateY(-2px); border-color: var(--border-ctl); box-shadow: var(--shadow-md);
}
.admin-card:active { transform: scale(.995); }
.admin-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

.admin-card-mark {
  width: 40px; height: 40px; margin-bottom: 4px; border-radius: var(--radius-md);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--accent-text);
}
.admin-card-title {
  font-weight: 700; font-size: var(--fs-body); color: var(--text);
  letter-spacing: var(--tracking-head);
}
.admin-card-note { font-size: var(--fs-caption); color: var(--text-2); }

/* --- Chips / badges ----------------------------------------------------- */

.chip {
  font-family: inherit; font-size: var(--fs-caption); font-weight: 700;
  padding: 8px 14px; min-height: 36px; border-radius: var(--radius-btn);
  border: 1.5px solid var(--border-ctl); color: var(--text-2);
  background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; letter-spacing: .02em;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.chip:hover { border-color: var(--text); color: var(--text); }
.chip[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.chip[aria-pressed="true"]:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--on-primary); }
.chip:active { transform: scale(.96); }
/* Uit omdat je de rol niet hebt: gedempt, en hij beweegt nergens meer op. De reden staat in de
   tooltip, want een chip heeft geen plek voor een zin. */
.chip:disabled { color: var(--text-3); border-color: var(--border); cursor: not-allowed; }
.chip:disabled:hover { color: var(--text-3); border-color: var(--border); }
.chip:disabled:active { transform: none; }

/* Een blok dat op slot staat omdat je de rol er niet voor hebt: `inert` houdt muis en toetsenbord
   er al buiten, dit laat het ook zien. Alleen de bedienbare dingen doven; de tekst eromheen houdt
   zijn contrast, want lezen mag je wel. */
[inert] button, [inert] input, [inert] select, [inert] textarea {
  opacity: .55; cursor: not-allowed;
}
.chip .icon-sm { opacity: 0; width: 0; transition: opacity var(--dur-fast) var(--ease-out), width var(--dur-fast) var(--ease-out); }
.chip[aria-pressed="true"] .icon-sm { opacity: 1; width: 14px; }

.badge {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--radius-btn);
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
.badge-ok  { background: var(--ok-bg);  color: var(--ok-fg); }
.badge-err { background: var(--err-bg); color: var(--err-fg); }

/* Methode-tint uit de merkschaal. De methode staat er ook letterlijk, dus
   kleur is nergens de enige drager van betekenis. */
.method {
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  padding: 5px 10px; border-radius: var(--radius-btn);
  text-align: center; justify-self: start; min-width: 72px;
  background: var(--surface-2); color: var(--text);
}
.m-GET    { background: var(--m-get-bg);    color: var(--m-get-fg); }
.m-POST   { background: var(--m-post-bg);   color: var(--m-post-fg); }
.m-PUT    { background: var(--m-put-bg);    color: var(--m-put-fg); }
.m-PATCH  { background: var(--m-patch-bg);  color: var(--m-patch-fg); }
.m-DELETE { background: var(--m-delete-bg); color: var(--m-delete-fg); }

/* --- Schermen ----------------------------------------------------------- */

.screen { display: none; }
.screen.is-active { display: block; animation: screen-in var(--dur-base) var(--ease-out) both; }
@keyframes screen-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* --- Landing ------------------------------------------------------------ */

/* De landingskaart vult wat er ná de voettekst overblijft. Niet met 100vh min een vast getal:
   dan scrollt de pagina zodra die voettekst een pixel anders uitvalt. De pagina wordt een kolom en
   de kaart neemt de rest — dan klopt het bij elke hoogte. */
body:has(> .landing) { min-height: 100vh; display: flex; flex-direction: column; }
.landing { position: relative; flex: 1; display: grid; place-items: center; padding: 48px 24px; }
.landing .theme-toggle { position: absolute; top: 20px; right: 20px; }
/* De taalknop wordt als eerste kind in de landing gehangen; zonder dit staat hij
   midden boven de kaart, want de landing centreert alles. */
.landing .lang-toggle { position: absolute; top: 20px; right: 64px; }
.landing-card {
  width: 100%; max-width: 460px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); overflow: hidden;
  transition: background-color var(--dur-base) var(--ease-inout),
              border-color var(--dur-base) var(--ease-inout);
}
/* het enige verloopvlak op dit scherm */
.landing-band { height: 6px; background: var(--wb-brand-gradient); }
.landing-body { padding: 40px 40px 36px; text-align: center; }
/* Op de landingspagina staat het hele logo, woordmerk en payoff inbegrepen. */
.brand-lockup { display: flex; justify-content: center; margin: 0 auto 28px; }
.brand-lockup .logo-plate { padding: var(--logo-plate-pad, 0); }
[data-theme="dark"] .brand-lockup .logo-plate,
:root:not([data-theme="light"]) .brand-lockup .logo-plate { --logo-plate-pad: 12px 18px; }
.brand-lockup .logo-plate { border-radius: var(--radius-md); }
.landing-logo { width: 220px; height: auto; display: block; }
.landing h1 { font-size: 2rem; margin-bottom: 6px; }
.landing .payoff { font-style: italic; color: var(--text-2); font-size: var(--fs-small); margin: 0; }
.landing .lead { color: var(--text-3); font-size: var(--fs-small); margin: 12px 0 28px; }
.landing form { display: flex; flex-direction: column; gap: 14px; }

.field { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.label {
  font-size: var(--fs-caption); font-weight: 700; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--text-2);
}
.input-wrap { position: relative; display: flex; align-items: center; }
.input {
  font-family: inherit; font-size: var(--fs-body); padding: 13px 16px;
  border: 1.5px solid var(--border-ctl); border-radius: var(--radius-md);
  background: var(--bg); color: var(--text); width: 100%; min-height: 48px;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.input::placeholder { color: var(--text-3); }
.input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring-soft); }
.input-wrap .input { padding-right: 52px; }
.input-wrap .btn-icon { position: absolute; right: 3px; }

/* Foutmelding schuift open, in plaats van alert() */
.field-error {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-inout);
  color: var(--danger); font-size: var(--fs-small); font-weight: 700; text-align: left;
}
.field-error > span { overflow: hidden; opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.field-error.is-shown { grid-template-rows: 1fr; }
.field-error.is-shown > span { opacity: 1; transition-delay: 80ms; }

.shake { animation: shake 320ms var(--ease-inout); }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}

/* --- Viewer: header ----------------------------------------------------- */

.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--topbar-bg); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  transition: background-color var(--dur-base) var(--ease-inout),
              border-color var(--dur-base) var(--ease-inout);
}
.topbar-inner {
  max-width: 1040px; margin: 0 auto; padding: 12px 28px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.topbar .brand-name { font-size: var(--fs-small); }
.topbar-divider { width: 1px; height: 28px; background: var(--border); }

/* --- De tweede balk: alles wat over dít endpoint gaat ----------------------
   De bovenste balk is van het product: het logo, de weg terug en wie je bent. Die is op elke
   pagina hetzelfde. Wat eronder staat gaat over één endpoint — zijn naam, zijn pagina's, wat er
   afgeschermd is en in welke stand hij staat — en wisselt dus mee met waar je bent. Twee balken en
   niet één rij, omdat dat twee verschillende dingen zijn.

   Hij zit in dezelfde sticky header, zodat beide balken blijven staan als je scrolt. */
.subbar {
  /* Een eigen vlak, niet alleen een lijn: op --surface-2 zie je in één oogopslag dat dit een andere
     balk is dan die erboven. Tekst op dit vlak haalt 11,2:1 op donker en 12,0:1 op licht, de
     gedempte tekst van de paginaknoppen 7,4:1 en 6,3:1. */
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  transition: background-color var(--dur-base) var(--ease-inout);
}
.subbar-inner {
  max-width: 1040px; margin: 0 auto; padding: 8px 28px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
/* De knoppen in deze balk vielen op hun eigen vlak: --surface-2 is nu de balk zelf. Op deze balk
   is het lichtere kaartvlak het verschil. */
.subbar .topnav-link:hover { background: var(--surface); }
.subbar .topnav-link.is-current { background: var(--surface); }

.subbar-right {
  margin-left: auto; display: inline-flex; align-items: center;
  flex-wrap: wrap; justify-content: flex-end; gap: 6px;
}
/* Elk van deze vier hangt zichzelf op zodra zijn antwoord van de server terug is, en dat is elke
   pagina in een andere volgorde. Wie leest hoort ze wél altijd op dezelfde plek te zien staan, dus
   ligt de volgorde hier vast en niet in de volgorde van binnenkomst. */
   Sommige hangen in een tooltip-omhulsel en andere niet, dus telt zowel het ding zelf als het
   omhulsel eromheen mee. Wat hier niet genoemd wordt sluit de rij. */
.subbar-right > * { order: 5; }
.subbar-right > .people, .subbar-right > :has(.people) { order: 1; }
.subbar-right > .statusmenu, .subbar-right > :has(.statusmenu) { order: 2; }
.subbar-right > .gdpr-badge, .subbar-right > :has(.gdpr-badge) { order: 3; }
.subbar-right > .live, .subbar-right > :has(.live) { order: 4; }

.endpoint-name { display: flex; align-items: center; gap: 4px; min-width: 0; }
.endpoint-name .name-text {
  font-weight: 700; font-size: var(--fs-body); letter-spacing: var(--tracking-head);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px;
}
.endpoint-name .name-text.is-empty { color: var(--text-3); font-weight: 400; font-style: italic; }
.name-input {
  font-family: inherit; font-size: var(--fs-body); font-weight: 700;
  padding: 6px 10px; border: 1.5px solid var(--primary); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); width: 240px;
  box-shadow: 0 0 0 3px var(--focus-ring-soft);
}
.name-input:focus { outline: none; }

/*
  Afbreken moet, anders loopt de balk van het scherm af. De rij als geheel breekt al af binnen
  .topbar-inner, maar zonder dit blijven de knoppen zelf op één regel staan en schuift de pagina
  horizontaal. In het Nederlands gebeurde dat al op 400px — "Teamwachtwoord" en "Afmelden" zijn
  nu eenmaal langer dan "Team password" en "Sign out" — en in het Engels op 360px.
*/
.topbar-right {
  margin-left: auto; display: inline-flex; align-items: center;
  flex-wrap: wrap; justify-content: flex-end; gap: 6px;
}
.live {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-caption); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-2);
}
/* Het lampje is een knop geworden: de opvangstand is te verzetten. De reset houdt hem eruitzien
   als het lampje dat hij altijd was. --warn-fg haalt op --bg in beide thema's ruim 4,5:1. */
button.live { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.live[data-state="muted"], .live[data-state="paused"] { color: var(--warn-fg); }
.live[data-state="muted"] .live-dot, .live[data-state="paused"] .live-dot { background: var(--warn-fg); }
.live[data-state="muted"] .live-dot::after, .live[data-state="paused"] .live-dot::after { animation: none; opacity: 0; }
/* De teller naast het lampje: hoeveel een gedempte of gepauzeerde stand heeft afgewend. */
.capture-away {
  margin-left: 8px; font-size: var(--fs-caption); color: var(--text-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--live); position: relative; }
.live-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--live); animation: ping 2.4s var(--ease-out) infinite;
}
@keyframes ping { 0% { opacity: .55; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(2.6); } }

/* --- Viewer: endpoint-paneel -------------------------------------------- */

/* width: 100% hoort bij de kolom die body sinds de vaste voettekst is: een flex-item met auto-
   marges krimpt anders naar zijn inhoud in plaats van te centreren. */
.wrap { width: 100%; max-width: 1040px; margin: 0 auto; padding: 28px 28px 96px; }

.panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: 26px 28px; margin-bottom: 24px;
  transition: background-color var(--dur-base) var(--ease-inout),
              border-color var(--dur-base) var(--ease-inout);
}

.url-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.url-box {
  flex: 1 1 340px; min-width: 0; display: flex; align-items: center; gap: 10px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 11px 14px;
}
.url-box code {
  font-size: var(--fs-small); color: var(--text); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}

.panel-sep { height: 1px; background: var(--border); margin: 22px 0; border: 0; }

.settings { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.settings-label {
  font-size: var(--fs-caption); font-weight: 700; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--text-2); margin-right: 4px;
}
.schema-state {
  display: inline-flex; align-items: center; gap: 8px; margin-left: auto;
  font-size: var(--fs-small); color: var(--text-3);
}

/* --- Viewer: toolbar ---------------------------------------------------- */

.toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 16px; flex-wrap: wrap;
}
.count {
  font-size: var(--fs-caption); font-weight: 700; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--text-2); font-variant-numeric: tabular-nums;
}

/* --- Viewer: berichten -------------------------------------------------- */

.list { display: flex; flex-direction: column; gap: 12px; }

.msg {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-inout);
}
.msg:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* Vaste kolommen, anders schuift de tijd per rij op zodra er wel of geen
   validatiebadge staat en is de lijst niet meer te scannen. */
.msg-head {
  width: 100%; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: inherit; font-size: inherit; color: inherit;
  padding: 14px 18px; display: grid; align-items: center; gap: 14px;
  grid-template-columns: 72px 124px auto minmax(0, 1fr) auto 16px;
}
.msg-badge { justify-self: start; }
.msg-time { font-size: var(--fs-small); color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.msg-path {
  font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.msg-ip { font-size: var(--fs-caption); color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.msg-chevron { color: var(--text-3); transition: transform var(--dur-base) var(--ease-inout); }

/* De kop is zelf een knop, dus de prullenbak kan er niet in staan. Hij staat
   ernaast in dezelfde rij — niet erboven zwevend, want dan legt hij zich over
   het IP-adres heen — en hij houdt zijn plek ook als hij onzichtbaar is, zodat
   de rij niet verspringt zodra je hem aanwijst. Op een aanraakscherm staat hij
   altijd aan, want daar wijs je niets aan. */
.msg-row { display: flex; align-items: center; }
.msg-row .msg-head { flex: 1 1 auto; min-width: 0; }

.msg-delete {
  flex: none; margin-right: 10px; color: var(--text-3);
  opacity: 0; transition: opacity var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.msg:hover .msg-delete, .msg-delete:focus-visible { opacity: 1; }
.msg-delete:hover { color: var(--danger); background: var(--surface-2); }
@media (hover: none) { .msg-delete { opacity: 1; } }

/* Een Reader mag berichten lezen en niet weggooien; dan hoort het prullenbakje er ook niet te
   staan. De lijst wordt bij elke ronde opnieuw opgebouwd, dus dit staat hier en niet in de
   render-functie: zo geldt het ook voor wat er zo meteen binnenkomt. */
.read-only .msg-delete { display: none; }

/* Hetzelfde op de instellingen: het kruisje waarmee je een pad van het masker haalt, is een knop en
   hoort dus weg zodra je alleen mag lezen. */
.read-only .value-chip [data-drop] { display: none; }

.pager { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.pager .count { margin-left: auto; }
.msg[data-open="true"] .msg-chevron { transform: rotate(180deg); }

/* Uitklappen zonder hoogte te meten: 0fr -> 1fr */
.msg-body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-inout);
}
.msg[data-open="true"] .msg-body { grid-template-rows: 1fr; }
.msg-body > div { overflow: hidden; }
.msg-body-inner { padding: 0 18px 18px; border-top: 1px solid var(--border); }

.kv-title {
  font-size: var(--fs-caption); font-weight: 700; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--text-2); margin: 16px 0 7px;
}
pre.code {
  background: var(--code-bg); color: var(--code-fg); padding: 14px 16px;
  border-radius: var(--radius-md); overflow-x: auto; font-size: var(--fs-caption);
  line-height: 1.55; margin: 0; white-space: pre-wrap; word-break: break-word;
}
pre.code.is-error { background: var(--code-err-bg); color: var(--code-err-fg); }

/* --- Een waarde in een payload waar je op kunt klikken ---------------------
   Het codeblok is in beide thema's donker, dus de kleuren hier rekenen tegen
   antraciet af en niet tegen de pagina: --wb-orange-400 haalt daar 7.7:1 en is
   de enige kleur die hier bij komt. De waarde zelf blijft de kleur van de code,
   want een payload die half oranje is leest niet meer als een payload. */
pre.code .jv {
  font: inherit; color: inherit; background: none; padding: 0; margin: 0;
  /* Een gedempte witte haarlijn, geen merkkleur: het codeblok is in beide thema's donker en de
     tekst erop is vrijwel wit, dus dit is diezelfde kleur zachter gezet. Op volle sterkte onder
     zeventig velden tegelijk leest de payload niet meer als een payload. */
  border: 0; border-bottom: 1px dotted rgb(255 255 255 / 30%); border-radius: 0;
  cursor: pointer; text-align: left;
}
pre.code.is-clickable .jv:hover {
  color: var(--wb-orange-400); border-bottom-color: var(--wb-orange-400);
}
pre.code .jv:focus-visible {
  outline: 2px solid var(--wb-orange-400); outline-offset: 2px; border-radius: var(--radius-xs);
}
/* Null draagt geen waarde, dus er valt niet op te zoeken; hij blijft wel aanwijsbaar
   voor "welke berichten hebben dit veld wél gevuld". */
pre.code .jv-null { opacity: .7; }

/* Het menu bij een aangeklikte waarde. Zweeft boven de pagina, dus hier gelden
   de gewone paginakleuren weer. */
.quickmenu {
  position: fixed; z-index: 60; min-width: 260px; max-width: min(420px, calc(100vw - 24px));
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); padding: 6px;
}
.quickmenu-head {
  font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-2);
  margin: 0; padding: 8px 10px 6px; word-break: break-all;
}
.quickmenu-item {
  display: block; width: 100%; text-align: left; min-height: 44px;
  background: none; border: 0; border-radius: var(--radius-sm); cursor: pointer;
  padding: 10px; font: inherit; font-size: var(--fs-small); color: var(--text);
}
.quickmenu-item:hover { background: var(--surface-2); }
.quickmenu-item:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.quickmenu-form {
  display: flex; gap: 6px; padding: 8px 10px 10px; margin-top: 4px;
  border-top: 1px solid var(--border);
}
/* .input is op een formulier 100% breed; hier staan er drie op een rij, dus die breedte moet
   eraf — anders duwt de keuzelijst het invoerveld tot niets weg. */
.quickmenu-form .input {
  width: auto; min-width: 0; font-size: var(--fs-small);
  padding: 9px 12px; min-height: 44px;
}
.quickmenu-form select.input { flex: 0 0 auto; }
.quickmenu-form input.input { flex: 1 1 auto; }

/* De balk die zegt waarop er gezocht wordt. De scrollmarge houdt rekening met de kopbalk en de
   subbalk, die allebei blijven staan: zonder die marge scrolt de pagina de balk er precies
   achter, en zie je een andere lijst zonder te lezen waarom. */
.searchbar {
  scroll-margin-top: 150px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 12px;
  font-size: var(--fs-small); color: var(--text-2);
}
.searchbar #searchWhat { font-family: var(--font-mono); color: var(--text); word-break: break-word; }
.searchbar .btn { margin-left: auto; }

/* Entree van een nieuw bericht: fade + kleine opwaartse schuif, plus een
   korte accentrand zodat je ziet welke er net bij kwam. */
.msg.is-new { animation: msg-in var(--dur-base) var(--ease-out) both; }
@keyframes msg-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.msg.is-flash { animation: msg-in var(--dur-base) var(--ease-out) both, flash var(--dur-slow) var(--ease-out) var(--dur-base) both; }
@keyframes flash {
  from { box-shadow: 0 0 0 3px var(--flash-ring); border-color: var(--flash-border); }
  to   { box-shadow: var(--shadow-xs); border-color: var(--border); }
}
.msg.is-leaving { animation: msg-out var(--dur-fast) var(--ease-inout) both; }
@keyframes msg-out { to { opacity: 0; transform: translateY(-6px); } }

/* --- Lege staat --------------------------------------------------------- */

.empty {
  text-align: center; padding: 64px 24px;
  border: 1.5px dashed var(--border-ctl); border-radius: var(--radius-lg);
  color: var(--text-3); animation: screen-in var(--dur-base) var(--ease-out) both;
}
.empty svg { width: 44px; height: 44px; stroke: var(--border-ctl); stroke-width: 1.75; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.empty h2 { font-size: 1.1rem; margin: 14px 0 6px; color: var(--text); }
.empty p { margin: 0; font-size: var(--fs-small); }

/* --- Toast -------------------------------------------------------------- */

.toasts {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 60; display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none;
}
.toast {
  background: var(--text); color: var(--bg); padding: 12px 20px;
  border-radius: var(--radius-btn); box-shadow: var(--shadow-lg);
  font-size: var(--fs-small); font-weight: 700;
  display: inline-flex; align-items: center; gap: 9px;
  animation: toast-in var(--dur-base) var(--ease-out) both;
}
.toast.is-leaving { animation: toast-out var(--dur-fast) var(--ease-inout) both; }
@keyframes toast-in  { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }

@media (max-width: 860px) {
  .topbar-inner { padding: 12px 18px; }
  .subbar-inner { padding: 8px 18px; }
  .wrap { padding: 20px 18px 96px; }
  .panel { padding: 20px; }
  .msg-path, .msg-ip { display: none; }
  .msg-head { grid-template-columns: 72px 124px minmax(0, 1fr) 16px; }
  /* Op volle breedte moet hij ook mogen afbreken, anders duwt de knop Upload schema de rij
     voorbij de rand van het scherm. */
  .schema-state { margin-left: 0; width: 100%; flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .msg-head { grid-template-columns: auto auto minmax(0, 1fr) 16px; gap: 10px; padding: 12px 14px; }
  .msg-time { justify-self: end; }
  .method { min-width: 0; }
  .endpoint-name .name-text { max-width: 120px; }
  .badge { font-size: 10px; padding: 4px 8px; }
  .badge svg { display: none; }
  .live span:last-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}


/* Het dialoogvenster draagt ook onomkeerbare acties; die krijgen de dangerkleur. */
.modal-mark[data-tone="trash"] { color: var(--danger); }

/* Het versienummer in de voettekst is een link naar de releasepagina. */
a.site-footer-version { color: inherit; text-decoration: none; border-bottom: 1px solid var(--border-ctl); }
a.site-footer-version:hover { color: var(--text); }

a.site-footer-mail { color: inherit; text-decoration: none; border-bottom: 1px solid var(--border-ctl); }
a.site-footer-mail:hover { color: var(--text); }

/* Een klantlogo dat zelf al op donker kan, hoeft niet op het lichte vlak. Zie branding.json. */
.logo-plate.is-flat { background: transparent; padding: 0; }

/* Het uitlegvenster van de OAuth-mock: de URL bovenaan, daaronder de voorwaarden onder elkaar. */
.modal-note { display: flex; flex-direction: column; gap: 8px; }
.modal-url {
  display: block; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px 10px; color: var(--text);
  font-size: var(--fs-caption); word-break: break-all;
}

/*
  De uitnodiging zoals hij straks in een mail staat: regeleindes op hun plek, dus pre-wrap en geen
  gewone alinea. --text-2 en niet --text-3: dit is de tekst die je gaat lezen vóór je hem verstuurt,
  geen bijschrift. Op --surface-2 haalt --text-2 6,6:1 en --text-3 maar 4,35:1.
*/
.invite-text {
  display: block; margin: 0; white-space: pre-wrap; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 12px; color: var(--text-2);
  /* Een pre staat standaard in een schreefloze monospace. Dit is geen code maar de tekst van een
     mail, dus hij houdt het lettertype van de app; alleen de regeleindes zijn preformatted. */
  font-family: inherit; font-size: var(--fs-caption); line-height: 1.5;
  cursor: text;
}

/* Aanwijzen laat zien dat er iets te halen valt; klikken selecteert het geheel. */
.invite-text:hover { border-color: var(--border-ctl); }

/* ==========================================================================
   De publieke landingspagina

   Breder dan de inlogkaart, want er staat meer op dan één veld. De kaart zelf
   blijft bestaan voor de teamdeur en /beheer; dit is de pagina eromheen.
   ========================================================================== */

.home { flex: 1; width: 100%; max-width: 940px; margin: 0 auto; padding: 24px 24px 64px; }

.home-top { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-height: 48px; }

/* De hero is het enige verloopvlak op dit scherm. */
.home-hero {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  overflow: hidden; text-align: center; margin-top: 8px;
}
.home-hero .landing-band { height: 6px; background: var(--wb-brand-gradient); }
.home-hero-body { padding: 48px 32px 40px; }
.home-hero h1 { font-size: var(--fs-h1); margin-bottom: 6px; }
.home-hero .payoff { font-style: italic; color: var(--text-2); font-size: var(--fs-small); margin: 0; }
.home-hero .lead {
  color: var(--text-2); font-size: var(--fs-body); line-height: 1.6;
  margin: 16px auto 0; max-width: 62ch;
}

/* Drie getallen. Cijfers op tabular-nums, anders springt de breedte tijdens het optellen. */
.stat-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px;
}
.stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-xs);
  padding: 24px 16px; text-align: center;
}
.stat-number {
  display: block; font-size: 2rem; font-weight: 700; color: var(--text);
  letter-spacing: var(--tracking-head); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.stat-label {
  display: block; margin-top: 8px; font-size: var(--fs-caption); font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-2);
}

/* Wat je eraan hebt, in gewone taal. */
.home-points {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px;
}
.home-point {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 24px; box-shadow: var(--shadow-xs);
}
.home-point .icon { width: 24px; height: 24px; color: var(--accent-text); margin-bottom: 12px; }
.home-point h2 { font-size: var(--fs-h3); margin-bottom: 8px; }
.home-point p { color: var(--text-2); font-size: var(--fs-small); line-height: 1.6; margin: 0; }

/* De balk die niet weggaat zolang het uitgiftewachtwoord het uitgeleverde is. Rood omdat het een
   openstaand slot is en geen mededeling; de tekst zegt wat je eraan doet. */
.shipped-warning {
  border-color: var(--danger); background: var(--err-bg);
  margin-bottom: 20px;
}
.shipped-warning p { color: var(--err-fg); margin: 0; max-width: 80ch; line-height: 1.6; }
.shipped-warning code { color: inherit; }

/* De balk die zegt dat de noodtoegang openstaat.

   Bovenaan elke pagina, voor iedereen en niet alleen voor wie hem gebruikt: zo merkt een collega
   het als jij vergeet hem dicht te doen. Er zit geen kruisje op, en dat is het punt — een balk die
   je weg kunt klikken is binnen een dag onzichtbaar en daarmee nutteloos.

   Oranje en niet rood: er is niets stuk, er staat iets open. Rood is voor wat je nú moet repareren,
   en dat verschil moet blijven kloppen of geen van beide kleuren zegt nog iets. */
.emergency-bar {
  background: var(--warn-bg);
  color: var(--warn-fg);
  border-bottom: 1px solid var(--warn-fg);
  padding: 10px 24px;
  font-size: var(--fs-small);
  line-height: 1.5;
  text-align: center;
}

/* --- Wie er is aangemeld --------------------------------------------------
   Een poppetje uiterst rechts in de balk, met daaronder de naam, het adres en de afmeldknop. De
   groene rand zegt dat er iemand binnen is; het poppetje alleen zou ook de aanmeldknop kunnen zijn.
   Rand op --ok-fg haalt 9,1:1 op de donkere balk en 7,0:1 op de lichte, ruim boven de 3:1 die een
   grens van iets bedienbaars nodig heeft. */
.user-menu { position: relative; display: inline-flex; }

.user-avatar {
  width: 44px; height: 44px; padding: 0; border-radius: 50%;
  background: var(--surface); color: var(--text-2);
  border: 2px solid var(--ok-fg);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.user-avatar:hover { background: var(--surface-2); color: var(--text); }
.user-avatar:active { transform: scale(.94); }
.user-menu.is-open .user-avatar { background: var(--surface-2); color: var(--text); }

.user-panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 30;
  min-width: 232px; max-width: 320px;
  padding: 14px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  animation: user-panel-in var(--dur-fast) var(--ease-out);
}
@keyframes user-panel-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.user-panel-name {
  margin: 0; font-weight: 700; color: var(--text); font-size: var(--fs-small);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Een adres breekt liever af dan dat het het menu breed maakt. */
.user-panel-mail {
  margin: 0; color: var(--text-2); font-size: var(--fs-caption); overflow-wrap: anywhere;
}
/* Waar je bij hoort en wat je er bent. Het team van deze pagina staat bovenaan en draagt het
   accent; de rest is er om te weten dat het er is. */
.user-teams {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 6px;
}
.user-team {
  margin: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: var(--fs-caption); color: var(--text-2);
  padding: 4px 6px; margin-left: -6px; margin-right: -6px;
  border-radius: var(--radius-btn); text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.user-team:hover { background: var(--surface-2); }
.user-team:hover .user-team-name { color: var(--text); }
.user-team:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.user-team-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-team-role { flex: none; color: var(--text-3); }
.user-team.is-current .user-team-name { color: var(--text); font-weight: 700; }
.user-team.is-current .user-team-role { color: var(--accent-text); font-weight: 700; }
.user-team.is-server { color: var(--accent-text); font-weight: 700; }
.user-team.is-none { color: var(--text-3); font-style: italic; }

/* Wat je te beheren hebt. Onder je teams, want eerst waar je bij hoort en dan wat je er doet. */
.user-tasks {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 2px;
}
.user-task {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 6px; margin: 0 -6px; border-radius: var(--radius-btn);
  font-size: var(--fs-caption); font-weight: 700; color: var(--text-2); text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.user-task:hover { background: var(--surface-2); color: var(--text); }
.user-task:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

.user-panel-out { margin-top: 12px; justify-content: center; }

/* --- Hoe sterk een wachtwoord eruitziet -----------------------------------
   Drie blokjes en een woord. Het woord draagt de betekenis, de kleur alleen de
   nadruk: wie kleur niet ziet leest "te kort", "prima" of "sterk". */
.pw-meter { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.pw-bar { display: flex; gap: 4px; }
.pw-bar i { width: 26px; height: 4px; border-radius: 2px; background: var(--border); }
.pw-word { font-size: var(--fs-caption); color: var(--text-2); }

.pw-meter[data-score="1"] .pw-bar i:nth-child(1) { background: var(--danger); }
.pw-meter[data-score="2"] .pw-bar i:nth-child(-n+2) { background: var(--accent-text); }
.pw-meter[data-score="3"] .pw-bar i { background: var(--ok-fg); }

/* --- Branding beheren ----------------------------------------------------
   Twee plaatjes naast elkaar met hun knoppen eronder, en daaronder de velden.
   Het voorbeeldvlak is licht, ook in het donkere thema: een logo dat voor wit
   papier is getekend verdwijnt anders, en dan lijkt het alsof er niets staat. */
.brand-slots { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; }

.brand-slot {
  flex: 0 1 260px; border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 14px;
}
.brand-slot .label { margin-bottom: 8px; }

.brand-preview {
  display: flex; align-items: center; justify-content: center;
  background: var(--logo-plate, #f8f9fb); border-radius: var(--radius-sm);
  min-height: 96px; padding: 12px; margin-bottom: 8px;
}
[data-theme="dark"] .brand-preview,
:root:not([data-theme="light"]) .brand-preview { background: #f8f9fb; }

.brand-preview img { max-height: 72px; max-width: 100%; }
.brand-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.brand-fields { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 20px; align-items: flex-end; }
.brand-fields .field { flex: 1 1 260px; margin: 0; }
.brand-check {
  display: flex; align-items: center; gap: 8px; flex: 1 1 100%;
  font-size: var(--fs-small); color: var(--text-2);
}

/* Waar de app voor gebruikt wordt. Twee kolommen en niet drie: dat onderscheidt deze twee van de
   drie kaarten erboven, die over de functies gaan en niet over de aanleiding. */
.home-uses { margin-top: 28px; }
.home-uses .eyebrow { margin-bottom: 12px; }
.home-uses-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

/* Vragen: geen kaart, want dan staan er twee onder elkaar en gaat de aanmeldkaart minder wegen. */
.home-ask { margin: 28px auto 0; max-width: 460px; text-align: center; }
.home-ask h2 { font-size: var(--fs-h3); margin-bottom: 6px; }
.home-ask .lead { color: var(--text-2); font-size: var(--fs-small); line-height: 1.6; margin: 0; }
.home-ask-note {
  color: var(--text-2); font-size: var(--fs-caption); line-height: 1.6; margin: 10px 0 0;
}
.home-ask-mail { margin-top: 14px; }
.home-ask-mail a { color: var(--primary); text-decoration: none; border-bottom: 1px solid var(--border-ctl); }
.home-ask-mail a:hover { border-bottom-color: currentColor; }

/* Aanmelden: één veld en één knop, gecentreerd onder de rest. */
.home-signin {
  margin: 32px auto 0; max-width: 460px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 32px;
}
.home-signin h2 { font-size: var(--fs-h3); margin-bottom: 6px; text-align: center; }
.home-signin .lead {
  color: var(--text-2); font-size: var(--fs-small); margin: 0 0 20px; text-align: center;
}
.home-signin form { display: flex; flex-direction: column; gap: 14px; }

@media (max-width: 760px) {
  .stat-row, .home-points, .home-uses-grid { grid-template-columns: 1fr; }
  .home-hero-body { padding: 32px 20px 28px; }
  .home { padding: 16px 16px 48px; }
}

/* De AVG/GDPR-badge in de balk. Een indicator, geen knop: geen hover, geen cursor, geen
   focusring. De accentkleur haalt op beide thema's ruim 4.5:1 tegen het paneel eronder. */
.gdpr-badge { display: inline-flex; align-items: center; color: var(--accent-text); }
/* 32px naast knoppen van 44: hoog genoeg om erbij te horen, laag genoeg om niet als knop te
   lezen. Een indicator die even groot is als de knoppen ernaast wordt aangeklikt. */
.gdpr-badge-mark { display: block; height: 32px; width: auto; }

/* De navigatiebalk van een endpointpagina: dezelfde plek op elke pagina. */
.topnav { display: flex; align-items: center; gap: 4px; }
.topnav-link {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 12px;
  border: 1px solid transparent; border-radius: var(--radius-btn);
  color: var(--text-2); font-size: var(--fs-small); font-weight: 700;
  text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.topnav-link:hover { background: var(--surface-2); color: var(--text); }
.topnav-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* De pagina waar je op staat draagt de accentkleur en een lijn eronder; kleur alleen zou
   het enige verschil zijn, en dat is te weinig om op te leunen. */
.topnav-link.is-current {
  color: var(--accent-text); background: var(--surface-2);
  border-color: var(--border); box-shadow: inset 0 -2px 0 var(--accent-text);
}
/* Op een smal scherm blijft het icoon staan en verdwijnt het woord. */
@media (max-width: 720px) {
  .topnav-link span { display: none; }
  .topnav-link { padding: 0 10px; }
}

/* Het statusmenu: waar het slotje stond, nu met het woord erbij. */
.statusmenu { position: relative; display: inline-flex; }
.statusmenu-button { gap: 8px; }
.statusmenu-button[data-state="open"] { color: var(--text-2); }
.statusmenu-button[data-state="locked"],
.statusmenu-button[data-state="owner"] { color: var(--accent-text); }

.statusmenu-list {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40;
  min-width: 300px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 2px;
}
.statusmenu-list hr { border: 0; border-top: 1px solid var(--border); margin: 4px 2px; }

.statusmenu-item {
  display: flex; align-items: flex-start; gap: 10px; width: 100%;
  min-height: 44px; padding: 8px 10px; text-align: left;
  background: none; border: 0; border-radius: var(--radius-sm);
  color: var(--text); font: inherit; cursor: pointer;
}
.statusmenu-item:hover:not(:disabled) { background: var(--surface-2); }
.statusmenu-item:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
/* Een stand waar je niet heen kunt blijft leesbaar: je moet kunnen zien waar het endpoint in
   staat, ook als je er niets aan mag veranderen. */
.statusmenu-item:disabled { color: var(--text-3); cursor: default; }
.statusmenu-item.is-action { color: var(--accent-text); font-weight: 700; min-height: 40px; }

.statusmenu-dot {
  flex: none; width: 14px; height: 14px; margin-top: 4px;
  border: 2px solid var(--border-ctl); border-radius: 50%;
}
.statusmenu-item[aria-checked="true"] .statusmenu-dot {
  border-color: var(--accent-text); background: var(--accent-text);
  box-shadow: inset 0 0 0 3px var(--surface);
}
.statusmenu-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.statusmenu-text b { font-size: var(--fs-small); }
.statusmenu-text small { font-size: var(--fs-caption); color: var(--text-2); line-height: 1.4; }
.statusmenu-item:disabled .statusmenu-text small { color: var(--text-3); }

/* De poppetjes ernaast: kijkt er nog iemand mee? */
.people { display: inline-flex; align-items: center; color: var(--text-2); }
.people.is-alone { color: var(--accent-text); }