/* ==========================================================================
   i-cu — globale stylesheet (shell v6)
   Kleuren en maten komen uit tokens.css (i-cu-blauw uit 2003); hier staan geen losse kleurcodes.
   Primitives: Button (.btn), Panel (.box/.card), Avatar (.avatar), StatusDot (.status-dot),
   ListRow (.feed-row/.mini-list), SectionHeading (.page-head/.section-title), EmptyState (.empty-state).
   ========================================================================== */

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Geen nagemaakt vet of cursief: IBM Plex Mono heeft geen cursief en gaat tot 700 */
html { -webkit-text-size-adjust: 100%; font-synthesis: none; -webkit-tap-highlight-color: color-mix(in srgb, var(--color-action) 16%, transparent); }
/* Canvas in de kleur van berichtenbalk en footer: doorveren boven en onder de pagina toont geen witte rand.
   Ankers en focus schuiven niet onder de vaste header (--header-h zet app.js). */
html { background-color: var(--color-ink); scroll-padding-top: calc(var(--header-h, 6.5rem) + var(--space-sm)); }
body {
  margin: 0; font: 400 var(--text-base)/var(--leading-body) var(--font-body); color: var(--color-text);
  background: var(--color-bg-pattern), var(--color-bg); background-color: var(--color-bg);
  min-height: 100vh; display: flex; flex-direction: column;
}
img { max-width: 100%; height: auto; }
button { font-family: inherit; } /* ook knoppen zonder eigen font-regel in Geist */
a { color: var(--color-action); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
/* Links in lopende tekst zijn ook zonder kleur herkenbaar */
p a:not([class]) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
/* Op zachte vlakken (lavendel) de donkerdere actiekleur voor AA-contrast */
.box.highlight a:not(.btn):not(.user), .notice a:not(.btn), .flash-info a { color: var(--color-action-hover); }
h1, h2, h3 { margin: 0 0 var(--space-sm); color: var(--color-heading); font-family: var(--font-display); line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); text-wrap: balance; }
h1 { font-size: var(--text-3xl); font-weight: 700; letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); }
h2 { font-size: var(--text-xl); font-weight: 700; }
h3 { font-size: var(--text-lg); font-weight: 700; }
p { margin: 0 0 var(--space-md); }
hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-lg) 0; }
/* Tekstflow (spec ruimte §4.4): een kop hoort bij wat eronder staat, dus meer ruimte erboven dan eronder */
:is(.card, .box-body, .article-body, .flow) > * + :is(h2, h3) { margin-top: var(--space-lg); }
.article-body > * + :is(h2, h3) { margin-top: var(--space-xl); }
/* Ingebouwde ruimte (spec afbreken §3): een blok of kaart zet 16 px tussen zijn onderdelen. De regel weegt als één element
   (:not(template, hr)): hij wint van de basisregel voor p, maar een onderdeel met een klasse en een eigen marge houdt die.
   Na een kop of kopachtige regel (.box-sub, .pf-card-head, .poll-q) geldt diens marge, hr houdt zijn eigen marge, en rijen
   met een eigen lijn (.post, .kv, .pf-log, .pf-old-poll, .qh-edit) sluiten op elkaar aan, net als lijsten die zelf een kaart
   zijn (ul/ol.card). Kaarten die zelf flex/grid zijn staan in :not() (anders telt de marge bij hun gap op);
   tests/witruimte_test.php bewaakt die lijst. */
:where(.box-body, .card:not(ul, ol, .form, .zoek-form, .st-card, .net-hero, .nieuws-item, .admin-nav, .bh-bulk, .article-item)) > :where(:not(h1, h2, h3, h4, h5, h6, input[type="hidden"], script, style, template, .sr-only, [hidden], .box-sub, .pf-card-head, .poll-q, .post, .kv, .pf-log, .pf-old-poll, .qh-edit)) + :not(template, hr) { margin-top: var(--space-md); }
code, kbd, samp { font-family: var(--font-code); font-size: .9em; }
.wrap { width: 100%; max-width: calc(var(--content-max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; z-index: 99; padding: var(--space-xs) var(--space-sm); background: var(--color-surface); color: var(--color-heading); border: 2px solid var(--color-action); border-radius: var(--radius-control); font-weight: 700; }
.skip:focus { left: 8px; top: 8px; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.muted { color: var(--color-text-muted); }
.small { font-size: var(--text-sm); }
.data, .mono { font-variant-numeric: tabular-nums; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.mt { margin-top: var(--space-md); }
.mb0 { margin-bottom: 0; }
.mb { margin-bottom: var(--space-md); }
.stack > * + * { margin-top: var(--space-md); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Vaste bovenkant ----------
   Berichtenbalk en header vormen één sticky blok: de balk schuift weg, de header (logo, zoeken, knoppen en
   navigatierail) blijft staan. Dit is ook de fix voor de waas bovenin de iOS-app (iOS 26+): WebKit vervaagt de
   bovenrand, behalve als daar een fixed/sticky vlak van (bijna) de volle breedte met een effen background-color ligt;
   dan krijgt de statusbalk die kleur. Houd .ticker en .site-header dus effen (geen verloop of afbeelding) en dit blok
   schermbreed. app.js zet --header-h (hoogte van .site-header) voor ankers en sticky zijkolommen. */
.site-top { position: sticky; top: calc(-1 * var(--ticker-h)); z-index: 50; }
/* Toetsenbordfocus in de berichtenbalk of het paneel open: de balk komt terug in beeld (focus nooit buiten beeld) */
.site-top:has(.ticker :focus-visible, .bb-panel:not([hidden])) { top: 0; }
/* Mobiel (spec mobiele-header §3.2): app.js zet .is-hidden bij omlaag scrollen; de header schuift dan helemaal weg */
@media (max-width: 959px) {
  .site-top { transition: transform 200ms ease; }
  .site-top.is-hidden { transform: translateY(-100%); }
}
@media (max-width: 959px) and (prefers-reduced-motion: reduce) {
  .site-top { transition: none; }
}

/* ---------- Berichtenbalk (spec docs/superpowers/specs/2026-09-30-berichtenbalk-design.md) ----------
   Eén regel van 40 px (38 px mobiel) die nooit wrapt: live-stip, berichtenvenster en rechts de dop met pauze en de knop
   voor het paneel (zonder JavaScript een link naar /berichtenbalk). De tickertape-gaatjes zijn een laag erboven
   (::before/::after); de balk zelf blijft effen (zie "Vaste bovenkant"). De server rendert de nieuwste berichten;
   berichtenbalk.js zet er een aria-hidden kopie achter en schuift de trein. Zonder JavaScript en bij prefers-reduced-motion
   staat de feed stil en is hij horizontaal te vegen. Selectors van de feed staan onder .ticker: de profielbalk
   (views/profiel/_hero.php, profiel.css) gebruikt ook .ticker-track en .ticker-item. */
.ticker { position: relative; z-index: 30; height: var(--ticker-h); overflow-x: clip; border-bottom: 1px solid var(--color-ink-line); font: 500 var(--text-sm)/var(--leading-snug) var(--font-body); }
.ticker::before, .ticker::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; pointer-events: none;
  background-image: radial-gradient(circle, var(--color-ticker-perf) 1px, transparent 1.4px); background-size: 8px 2px;
}
.ticker::before { top: 2px; }
.ticker::after { bottom: 2px; }
.ticker-row { position: relative; display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-sm); height: 100%; }
.ticker a { color: inherit; }
.ticker .live-dot { flex: none; width: .4375rem; height: .4375rem; border-radius: 50%; background: var(--color-highlight); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-highlight) 22%, transparent); }
.ticker .ticker-window {
  flex: 1 1 auto; min-width: 0; align-self: stretch; display: flex; align-items: center;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; scrollbar-width: none;
}
.ticker .ticker-window::-webkit-scrollbar { display: none; }
.ticker .ticker-train { display: flex; flex: none; width: max-content; }
.ticker .ticker-track { display: flex; align-items: center; gap: var(--space-lg); margin: 0; padding: 0 var(--space-lg) 0 0; list-style: none; white-space: nowrap; color: var(--color-on-ink); }
.ticker .ticker-item { display: inline-flex; align-items: center; gap: var(--space-2xs); white-space: nowrap; padding: var(--space-3xs) var(--space-2xs); border-radius: var(--radius-xs); }
.ticker .plus { color: var(--color-highlight); font: 500 var(--text-2xs) var(--font-body); letter-spacing: var(--tracking-caps); }
.ticker .ticker-av { display: block; flex: none; width: 18px; height: 18px; border-radius: var(--radius-xs); object-fit: cover; }
.ticker .ticker-item .user { font-weight: 700; }
.ticker .ticker-item .age { color: var(--color-on-ink-muted); }
.ticker .g-m { color: var(--g-m-on-ink); }
.ticker .g-v { color: var(--g-v-on-ink); }
.ticker .g-s { color: var(--g-s-on-ink); }
/* Dop rechts: pauze (alleen als de trein rijdt, WCAG 2.2.2) en de knop voor het paneel */
.ticker-dock { display: flex; flex: none; align-items: center; gap: var(--space-xs); align-self: stretch; padding-left: var(--space-sm); border-left: 1px solid var(--color-ink-line); }
.ticker-pause {
  position: relative; flex: none; display: none; place-items: center; width: 1.75rem; height: 1.75rem; padding: 0;
  border: 1px solid color-mix(in srgb, var(--color-on-ink) 35%, transparent); border-radius: var(--radius-sm);
  background: transparent; color: var(--color-on-ink); cursor: pointer;
}
.ticker-pause::after { content: ""; position: absolute; inset: -.3125rem -.25rem; }
.ticker-pause:hover { background: color-mix(in srgb, var(--color-on-ink) 12%, transparent); }
.ticker-pause svg { width: .875rem; height: .875rem; }
.ticker-pause .i-play, .ticker-pause[aria-pressed="true"] .i-pause { display: none; }
.ticker-pause[aria-pressed="true"] .i-play { display: block; }
.ticker.is-moving .ticker-pause { display: inline-grid; }
.ticker-open {
  position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs);
  height: 1.875rem; padding: 0 var(--space-xs); border: 1px solid color-mix(in srgb, var(--color-on-ink) 35%, transparent);
  border-radius: var(--radius-sm); background: transparent; color: var(--color-on-ink); font: inherit; cursor: pointer;
}
.ticker-open::after { content: ""; position: absolute; inset: -.3125rem -.125rem; } /* klikvlak tot de balkhoogte */
.ticker-open:hover { background: color-mix(in srgb, var(--color-on-ink) 12%, transparent); text-decoration: none; }
.ticker-open .icon { width: 1.125rem; height: 1.125rem; }
.ticker-open .ticker-chev { width: .875rem; height: .875rem; }
.ticker-count {
  display: inline-grid; place-items: center; min-width: 1.125rem; height: 1.125rem; padding: 0 var(--space-2xs);
  border-radius: var(--radius-pill); background: var(--color-live); color: var(--color-on-live);
  font: 700 var(--text-2xs)/1 var(--font-body); font-variant-numeric: tabular-nums;
}
.ticker-count[hidden] { display: none; }
/* Paneel open: de knop wordt een tabblad dat overgaat in het paneel eronder (top: 1px valt over de onderrand van de balk) */
.ticker-open[aria-expanded="true"] {
  align-self: flex-end; top: 1px; height: calc(100% - var(--space-2xs) + 1px); background: var(--color-surface); color: var(--color-heading);
  border-color: var(--color-surface); border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
@media (prefers-reduced-motion: no-preference) {
  .ticker.is-moving .ticker-window { overflow: hidden; mask-image: linear-gradient(90deg, transparent, currentColor .75rem, currentColor calc(100% - .75rem), transparent); }
  .ticker .ticker-item.is-new { animation: ticker-in 1.8s ease-out; }
  @keyframes ticker-in { from { background: color-mix(in srgb, var(--color-highlight) 45%, transparent); } to { background: transparent; } }
}
@media (max-width: 767px) {
  .ticker-row { gap: var(--space-xs); }
  .ticker-dock { padding-left: var(--space-xs); }
  .ticker-chev { display: none; }
  .ticker-open { min-width: 2.25rem; }
  .ticker .ticker-track { gap: var(--space-lg); padding-right: var(--space-md); }
}

/* ---------- Paneel van de berichtenbalk (spec §4) ----------
   Klapt uit onder de balk, rechts uitgelijnd op .wrap zodat het tabblad (.ticker-open open) erin overgaat; onder 768 px over
   de volle breedte. Kop, composer (ingelogd) of inlogregel, de laatste 20 berichten (live) en een voetregel. */
.bb-panel {
  position: absolute; top: var(--ticker-h); right: max(var(--gutter), (100% - var(--content-max)) / 2); z-index: 29;
  width: min(26.25rem, calc(100% - 2 * var(--gutter))); background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-border); border-top: 0; border-radius: var(--radius-panel) 0 var(--radius-panel) var(--radius-panel);
  box-shadow: var(--shadow-pop); overflow: hidden; font: 400 var(--text-sm)/var(--leading-ui) var(--font-body);
  /* Nooit langer dan het scherm onder de balk (.site-top staat vast zolang het paneel open is, scrollen helpt dan niet):
     alleen de lijst krimpt, kop, composer, label en voetregel blijven heel */
  display: flex; flex-direction: column; max-height: calc(100dvh - var(--ticker-h));
}
/* display:flex hierboven overschrijft het hidden-attribuut; zonder deze regel blijft het gesloten paneel zichtbaar */
.bb-panel[hidden] { display: none; }
.bb-head { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-xs) var(--space-xs) var(--inset-panel); }
.bb-live { display: inline-flex; align-items: center; gap: var(--space-2xs); color: var(--color-text-muted); font-size: var(--text-xs); }
.bb-live::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--color-online); }
.bb-all { font-size: var(--text-sm); white-space: nowrap; }
.bb-all-short { display: none; }
.bb-close { display: grid; place-items: center; width: var(--tap); height: var(--tap); padding: 0; border: 0; border-radius: var(--radius-sm); background: none; color: var(--color-text-muted); cursor: pointer; }
.bb-close:hover { background: var(--color-surface-muted); color: var(--color-heading); }
.bb-composer { padding: 0 var(--inset-panel) var(--space-sm); }
.bb-composer textarea { min-height: var(--tap); resize: none; } /* rows="2" bepaalt de hoogte, niet de 110 px van textarea */
.bb-composer-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); margin-top: var(--space-xs); }
.bb-login { margin: 0 var(--inset-panel) var(--space-sm); }
.bb-login p { margin: 0 0 var(--space-xs); }
.bb-login p:last-child { margin-bottom: 0; }
.bb-label {
  display: flex; justify-content: space-between; padding: var(--space-xs) var(--inset-panel); background: var(--color-surface-sunken);
  border-top: 1px solid var(--color-divider); color: var(--color-text-muted);
  font: 600 var(--text-2xs)/var(--leading-snug) var(--font-body); letter-spacing: var(--tracking-caps); text-transform: uppercase;
}
.bb-total { font-variant-numeric: tabular-nums; }
.bb-panel .bb-list { flex: 0 1 auto; min-height: 0; max-height: 17.5rem; overflow: auto; overscroll-behavior: contain; }
.bb-panel:has(.bb-login) .bb-list { max-height: 23.75rem; }
.bb-list { margin: 0; padding: 0; list-style: none; }
.bb-row { display: grid; grid-template-columns: 2.625rem 1.75rem minmax(0, 1fr) auto; gap: var(--space-sm); align-items: start; padding: var(--space-xs) var(--inset-panel); border-top: 1px solid var(--color-divider); }
.bb-row:first-child { border-top: 0; }
.bb-row .t { padding-top: var(--space-3xs); font: 500 var(--text-xs) var(--font-body); font-variant-numeric: tabular-nums; }
.bb-av { display: block; width: 1.75rem; height: 1.75rem; border-radius: var(--radius-xs); object-fit: cover; }
.bb-msg { min-width: 0; overflow-wrap: anywhere; }
.bb-status { padding: var(--space-md) var(--inset-panel); color: var(--color-text-muted); }
.bb-foot { margin: 0; padding: var(--space-xs) var(--inset-panel); border-top: 1px solid var(--color-divider); background: var(--color-bg); color: var(--color-text-muted); font-size: var(--text-xs); }
@media (prefers-reduced-motion: no-preference) {
  .bb-row.is-new { animation: bb-row-in 2.4s ease-out; }
  @keyframes bb-row-in { from { background: var(--color-info-soft); } to { background: var(--color-surface); } }
}
@media (max-width: 767px) {
  .bb-panel { left: 0; right: 0; width: auto; border-width: 0 0 1px; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
  .bb-panel .bb-list { max-height: 20.625rem; }
  .bb-all-long { display: none; }
  .bb-all-short { display: inline; }
}

/* ---------- /berichtenbalk pagina ---------- */
.bb-page .bb-composer { padding: 0; margin-bottom: var(--space-md); }
.bb-page .bb-row { padding-inline: 0; }

/* ---------- Header ----------
   Desktop: één regel van 66 px (woordmerk · ledenzoeker · accountacties) plus de navigatierail van 42 px.
   Onder 960 px: regel 1 merk · hoofdactie · menu, regel 2 zoeken (met Inloggen of de berichtenknoppen). */
.site-header { position: relative; z-index: 20; background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.header-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); min-height: var(--header-row-h); padding-top: calc((var(--header-row-h) - var(--tap)) / 2); padding-bottom: calc((var(--header-row-h) - var(--tap)) / 2); }
.logo { order: 1; flex: none; display: flex; align-items: center; min-height: var(--tap); border-radius: var(--radius-sm); }
.logo:hover { text-decoration: none; }
.logo-img { width: 148px; height: auto; aspect-ratio: 220 / 52; }
.logo-on-light { display: var(--logo-on-light); }
.logo-on-dark { display: var(--logo-on-dark); }
.header-search { order: 2; position: relative; flex: 1 1 22rem; max-width: 29.375rem; margin-left: auto; }
/* [type] erbij: anders wint de TextField-regel verderop en loopt de placeholder onder het vergrootglas */
.header-search input[type="search"] { padding-right: calc(var(--tap) + var(--space-3xs)); background-color: var(--color-surface-sunken); }
.header-search button { position: absolute; right: 0; top: 0; display: grid; place-items: center; width: var(--tap); height: var(--tap); border: 0; background: none; color: var(--color-text-muted); cursor: pointer; border-radius: var(--radius-control); }
.header-search button:hover { color: var(--color-action); }
.header-secondary { order: 3; display: flex; align-items: center; gap: var(--space-3xs); }
.header-primary { order: 4; display: flex; align-items: center; }
.icon-btn { position: relative; display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); border-radius: var(--radius-control); color: var(--color-heading); }
.icon-btn:hover { background: var(--color-surface-muted); text-decoration: none; }
button.icon-btn { border: 0; background: none; padding: 0; font: inherit; cursor: pointer; } /* menuknop en sluitknop: geen knop van de browser */
.badge {
  position: absolute; top: 3px; right: 1px; min-width: 1.15rem; height: 1.15rem; padding: 0 var(--space-2xs); border-radius: var(--radius-pill);
  display: grid; place-items: center; background: var(--color-live); color: var(--color-on-live);
  font: 700 var(--text-2xs)/1 var(--font-body); box-shadow: 0 0 0 2px var(--color-surface); font-variant-numeric: tabular-nums;
}

/* Accountmenu en mobiel menu: <details>, werkt zonder JavaScript */
.user-menu { position: relative; }
.user-menu summary { list-style: none; cursor: pointer; }
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu summary { display: flex; align-items: center; gap: var(--space-xs); min-height: var(--tap); padding: var(--space-2xs) var(--space-xs) var(--space-2xs) var(--space-2xs); border-radius: var(--radius-control); }
.user-menu summary:hover, .user-menu[open] summary { background: var(--color-surface-muted); }
.user-menu summary .avatar { width: 2.25rem; height: 2.25rem; padding: var(--space-3xs); }
.um-name { font-weight: 600; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown {
  position: absolute; right: 0; top: calc(100% + var(--space-xs)); z-index: 50; min-width: 230px; display: flex; flex-direction: column;
  padding: var(--space-2xs); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-panel); box-shadow: var(--shadow-pop);
}
.dropdown a, .dropdown .linklike { display: flex; align-items: center; min-height: 2.5rem; padding: 0 var(--space-sm); border-radius: var(--radius-control); color: var(--color-text); text-align: left; }
.dropdown a:hover, .dropdown .linklike:hover { background: var(--color-surface-muted); text-decoration: none; }
.dropdown strong { margin-left: .35em; font-variant-numeric: tabular-nums; }
.dropdown form { display: block; margin-top: var(--space-2xs); padding-top: var(--space-2xs); border-top: 1px solid var(--color-border); }
.dropdown .linklike { width: 100%; }
.dropdown :is(a, .linklike) { white-space: nowrap; } /* een menuregel is één regel; het menu wordt breder (spec afbreken §5) */

/* Mobiel (< 960 px): zoekknop, menuknop en de korte aanmeldtekst; vanaf 960 px verborgen */
.search-toggle, .menu-btn, .btn-short { display: none; }
.search-toggle .icon-close { display: none; }
.menu-dot {
  position: absolute; top: var(--space-xs); right: var(--space-xs); width: .5625rem; height: .5625rem; border-radius: 50%;
  background: var(--color-live); box-shadow: 0 0 0 2px var(--color-surface);
}

/* Menulade (spec mobiele-header §3.4): popover in de top layer, rechts over de volle hoogte */
.drawer {
  inset: 0 0 0 auto; width: min(86vw, 22rem); height: 100dvh; max-height: none; margin: 0; padding: 0;
  flex-direction: column; overflow: hidden; border: 0; border-left: var(--border-thin);
  background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-pop);
}
.drawer:popover-open { display: flex; }
.drawer::backdrop { background: var(--color-scrim); }
@media (min-width: 960px) {
  .drawer { display: none !important; }
}
@media (prefers-reduced-motion: no-preference) {
  .drawer { transform: translateX(100%); transition: transform 200ms ease, overlay 200ms allow-discrete, display 200ms allow-discrete; }
  .drawer:popover-open { transform: none; }
}
@starting-style {
  .drawer:popover-open { transform: translateX(100%); }
}
/* Zonder popover (Safari < 17, Chrome < 114, Firefox < 125) valt de lade niet in de pagina: app.js zet .no-popover op <html>
   en opent hem met .is-open, met een eigen achtergrond links van de lade (tik erop sluit hem). Zonder JavaScript blijft hij weg. */
@supports not selector(:popover-open) {
  .drawer { display: none; }
}
.no-popover .drawer { display: none; position: fixed; z-index: 60; }
.no-popover .drawer.is-open { display: flex; transform: none; }
.no-popover .drawer.is-open::before { content: ""; position: fixed; top: 0; bottom: 0; left: 0; right: min(86vw, 22rem); background: var(--color-scrim); }
.drawer-head { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-md); border-bottom: var(--border-thin); }
.drawer-me { flex: 1; display: flex; align-items: center; gap: var(--space-sm); min-width: 0; min-height: var(--tap); color: var(--color-heading); font-weight: 700; }
.drawer-me .avatar { width: 2.5rem; height: 2.5rem; padding: var(--space-3xs); }
.drawer-me-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-points { flex: none; color: var(--color-text-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.drawer-logo { flex: 1; display: flex; align-items: center; min-height: var(--tap); }
.drawer-logo .logo-img { width: 104px; }
.drawer-close { flex: none; }
.drawer-body { flex: 1; display: flex; flex-direction: column; gap: var(--space-md); padding: var(--space-sm); overflow-y: auto; overscroll-behavior: contain; }
.drawer-label {
  margin: 0 0 var(--space-2xs); padding: 0 var(--space-xs); color: var(--color-text-muted);
  font: 600 var(--text-2xs)/var(--leading-snug) var(--font-body); letter-spacing: var(--tracking-caps); text-transform: uppercase;
}
.drawer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xs); }
.drawer-grid a {
  display: flex; align-items: center; gap: var(--space-xs); min-width: 0; min-height: var(--tap); padding: 0 var(--space-xs);
  border-radius: var(--radius-sm); color: var(--color-heading); font: 600 var(--text-base) var(--font-body); text-transform: lowercase;
}
.drawer-grid a .icon { flex: none; color: var(--color-action); }
.drawer-grid a[aria-current="page"] { background: var(--color-surface-muted); box-shadow: inset 3px 0 0 var(--color-action); }
.drawer-list { display: flex; flex-direction: column; }
.drawer-list a, .drawer-foot .linklike {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); width: 100%; min-height: var(--tap);
  padding: 0 var(--space-xs); border-radius: var(--radius-sm); color: var(--color-text); text-align: left;
}
.drawer a:hover, .drawer .linklike:hover { background: var(--color-surface-muted); text-decoration: none; }
.drawer-count {
  display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 var(--space-2xs); border-radius: var(--radius-pill);
  background: var(--color-live); color: var(--color-on-live); font: 700 var(--text-2xs)/1 var(--font-body); font-variant-numeric: tabular-nums;
}
.drawer-guest { padding: var(--inset-panel); border-radius: var(--radius-panel); background: var(--color-surface-muted); }
.drawer-guest p { margin: 0 0 var(--space-sm); }
.drawer-guest-actions { display: flex; gap: var(--space-xs); }
.drawer-guest-actions .btn { flex: 1; }
.drawer-foot { padding: var(--space-xs) var(--space-sm); border-top: var(--border-thin); }

/* Hoofdnavigatie: rustige lichtblauwe rail van 42 px; scrollt alleen horizontaal als hij ooit niet past */
.main-nav { border-top: 1px solid var(--color-border); background: var(--color-nav-rail); }
.nav-rail { display: flex; gap: var(--space-3xs); }
.main-nav a {
  display: inline-flex; align-items: center; flex: none; min-height: var(--nav-h); padding: 0 var(--space-sm);
  color: var(--color-heading); font: 600 var(--text-base) var(--font-body); white-space: nowrap; text-transform: lowercase;
  border-bottom: 3px solid transparent; border-top: 3px solid transparent;
}
.main-nav a:first-child { padding-left: 0; }
.main-nav a:hover { color: var(--color-action); text-decoration: none; }
.main-nav a[aria-current="page"] { border-bottom-color: var(--color-action); color: var(--color-action); }
.main-nav .nav-rail a:focus-visible { outline-offset: -3px; }

/* Mobiel (spec mobiele-header §3.1, §3.3): één balk van --header-row-h (56 px) met logo, zoekknop, knoppen en menu.
   Het zoekformulier verschijnt als tweede regel zolang .site-top de klasse .is-searching heeft (app.js). */
@media (max-width: 959px) {
  .logo { margin-right: auto; }
  .logo-img { width: 120px; }
  .header-bar { column-gap: var(--space-2xs); row-gap: var(--space-xs); }
  .header-search { display: none; order: 6; flex: 1 0 100%; max-width: none; margin-left: 0; }
  .site-top.is-searching .header-search { display: block; }
  .search-toggle { display: inline-grid; order: 2; }
  .site-top.is-searching .search-toggle { background: var(--color-surface-muted); }
  .site-top.is-searching .search-toggle .icon { display: none; }
  .site-top.is-searching .search-toggle .icon-close { display: block; }
  .header-secondary { order: 3; gap: var(--space-2xs); }
  .header-secondary .header-verzoeken, .header-login, .header-account { display: none; }
  .header-primary { order: 4; }
  .header-primary .btn { padding: 0 var(--space-sm); font-size: var(--text-sm); }
  .btn-long { display: none; }
  .btn-short { display: inline; }
  .menu-btn { display: inline-grid; order: 5; }
  .main-nav { display: none; }
}
@media (max-width: 767px) {
  .logo-img { width: 104px; }
}

/* ---------- Hoofdindeling ---------- */
.main { flex: 1; padding-top: var(--gap-panels); padding-bottom: var(--space-2xl); }
.cols { display: grid; gap: var(--gap-panels); align-items: start; }
.cols-side { grid-template-columns: minmax(0, 1fr) 300px; }
.cols-left { grid-template-columns: 260px minmax(0, 1fr); }
.col { display: flex; flex-direction: column; gap: var(--gap-panels); min-width: 0; }
@media (max-width: 860px) {
  .cols-side, .cols-left { grid-template-columns: minmax(0, 1fr); }
}

/* SectionHeading */
.page-head { display: flex; align-items: end; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; margin-bottom: var(--space-lg); }
.page-head h1 { margin: 0; }
.section-title { display: flex; align-items: center; gap: var(--space-xs); margin: 0 0 var(--space-sm); font: 700 var(--text-lg)/var(--leading-snug) var(--font-display); color: var(--color-heading); }
.section-title::before { content: "›"; color: var(--color-live); font-size: 1.2em; line-height: 1; }
.breadcrumbs { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-xs); }
.breadcrumbs a { color: var(--color-text-muted); }
.breadcrumbs a:hover { color: var(--color-action); }

/* ---------- Panel ("› Kop … » Meer") en kaarten ----------
   Eén opbouw voor elk blok (box_open/box_close in lib/view.php, spec docs/superpowers/specs/2026-09-30-zijblokken-design.md):
   kop (.box-head: titel links, teller rechts) · inhoud (.box-body: rijen, cijfers, tekst of lege staat) · voet (» Meer).
   Radius 12 px, dunne blauwgrijze rand, nauwelijks schaduw; kop van 44 px op een effen ijsblauw vlak. */
.box, .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-panel); box-shadow: var(--shadow-panel); }
.box { overflow: hidden; }
/* --pad-x: binnenmarge van de kaart; randloze tabellen en lijsten nemen hem over (sectie "Tabel") */
.card { --pad-x: var(--inset-card); padding: var(--pad-x); }
.card > :last-child { margin-bottom: 0; } /* mb0 is niet meer nodig */
.box-head {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-xs); row-gap: 0; min-height: var(--tap);
  padding: var(--space-sm) var(--inset-panel); background: var(--color-panel-head); border-bottom: 1px solid var(--color-divider);
}
.box-title { display: flex; flex: 1 1 auto; align-items: center; gap: var(--space-2xs); min-width: 0; margin: 0; color: var(--color-heading); font: 700 var(--text-base)/var(--leading-snug) var(--font-display); }
.box-title-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* één regel (spec afbreken §5) */
.box-title-text a:focus-visible { outline-offset: -3px; } /* de focusring valt binnen de afgekapte titel */
.box-title a { color: inherit; }
.box-title a:hover { color: var(--color-action); }
.chev { color: var(--color-live); }
/* › op vaste breedte, op de x-hoogte van de titel in plaats van op de basislijn van een groter glyph */
.box-title .chev { display: inline-grid; place-items: center; flex: none; width: .75rem; height: 1em; color: var(--color-live); font-size: 1.125em; line-height: 1; transform: translateY(-.06em); }
/* Teller (box_count): altijd getal + eenheid, getal vet in tekstkleur. Rechts in de kop (de titel vult de regel); past hij
   niet, dan staat hij links onder de titel als ondertitel */
.box-count { flex: none; color: var(--color-text-muted); font: 500 var(--text-xs)/var(--leading-ui) var(--font-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.box-count b { color: var(--color-text); font-weight: 600; }
.box-count .status-dot { width: .5rem; height: .5rem; margin-right: var(--space-2xs); box-shadow: none; vertical-align: 1px; }
.box-body { --pad-x: var(--inset-panel); padding: var(--inset-panel); font-size: var(--text-sm); }
.box-body > :last-child { margin-bottom: 0; }
/* Beschrijving bovenaan de inhoud ("Leden van wie de antwoorden het vaakst hielpen"); aantallen horen in de teller */
.box-sub { margin: 0 0 var(--space-sm); color: var(--color-text-muted); font: 500 var(--text-xs)/var(--leading-ui) var(--font-body); font-variant-numeric: tabular-nums; }
/* Rijen (lijsten, kerncijfers) sluiten aan op kop en voet: geen dubbele marge, lijnen van rand tot rand */
.box-body > :is(.mini-list, .feed, .kv):first-child { margin-top: calc(-1 * var(--inset-panel)); }
.box-body > :is(.mini-list, .feed, .kv):last-child { margin-bottom: calc(-1 * var(--inset-panel)); }
/* Voet "» Meer": over de volle breedte, op rijhoogte, met een lijn erboven; sluit het blok af */
.box .more {
  display: flex; align-items: center; gap: var(--space-2xs); min-height: var(--row-h); margin: var(--inset-panel) calc(-1 * var(--inset-panel)) calc(-1 * var(--inset-panel));
  padding: 0 var(--inset-panel); border-top: 1px solid var(--color-divider); font: 600 var(--text-sm)/var(--leading-ui) var(--font-body);
}
.box .more:hover { background: var(--color-row-hover); text-decoration: none; }
.box-body > :is(.mini-list, .feed, .kv) + .more { margin-top: 0; }
/* Rustig uitgelicht: zacht communityvlak, kop zonder eigen vlak */
.box.highlight { --table-bg: var(--color-surface-muted); background: var(--color-surface-muted); border-color: var(--color-info-line); }
.box.highlight .box-head { background: transparent; border-bottom-color: var(--color-info-line); }
.box.highlight .more { border-top-color: var(--color-info-line); }
/* Uitleg ("Hoe werkt het?", "Spelregels"): punten zonder tabellijnen */
.rules { display: grid; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.rules > li { position: relative; padding-left: var(--space-md); }
.rules > li::before { content: ""; position: absolute; left: var(--space-3xs); top: calc(.5lh - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--color-live); opacity: .75; }
/* Genummerde regels (/info/regels): nummer in een rondje; ul.rules houdt de stip */
ol.rules { counter-reset: rule; }
ol.rules > li { counter-increment: rule; padding-left: var(--space-xl); }
ol.rules > li::before { content: counter(rule); top: 0; left: 0; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border-radius: 50%; background: var(--color-surface-muted); color: var(--color-action); font: 700 var(--text-xs)/1 var(--font-body); opacity: 1; }
/* Vinkjeslijst: Tabler-vinkje als masker in een groen rondje (geen tekst-vinkje) */
:root { --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E"); }
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.check-list li { position: relative; margin: 0; padding-left: var(--space-xl); }
.check-list li::before { content: ""; position: absolute; left: 0; top: calc(.5lh - .75rem); width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--color-success-soft); }
.check-list li::after { content: ""; position: absolute; left: .3125rem; top: calc(.5lh - .4375rem); width: .875rem; height: .875rem; background: var(--color-success); -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat; }

/* ---------- Menulijst: één rijstijl voor zijmenu's (accountblok, forum, info, beheer) ----------
   Spec docs/superpowers/specs/2026-09-30-accountblok-design.md. Rij op --row-h van rand tot rand, icoon 18 px in de actiekleur,
   label vult de rij (afgekapt met …), teller rechts als bolletje in --color-live zoals de badges in de header. */
.menu-list { list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); line-height: var(--leading-ui); }
.menu-list li + li { border-top: 1px solid var(--color-divider); }
.menu-list a { display: flex; align-items: center; gap: var(--space-xs); min-height: var(--row-h); padding: var(--space-2xs) var(--inset-panel); color: var(--color-text); font-weight: 500; }
.menu-list a:hover { background: var(--color-row-hover); color: var(--color-action); text-decoration: none; }
.menu-list a[aria-current="page"] { background: var(--color-surface-muted); color: var(--color-action); font-weight: 700; box-shadow: inset 3px 0 0 var(--color-live); }
.menu-list .icon { flex: none; width: 18px; height: 18px; color: var(--color-action); }
.ml-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-count { flex: none; min-width: 1.25rem; padding: 0 var(--space-2xs); border-radius: var(--radius-pill); background: var(--color-live); color: var(--color-on-live); font: 700 var(--text-2xs)/1.25rem var(--font-body); text-align: center; font-variant-numeric: tabular-nums; }
/* In een blok: tot aan kop, zijkanten en voet, zoals .mini-list */
.box-body > .menu-list { margin-inline: calc(-1 * var(--inset-panel)); }
.box-body > .menu-list:first-child { margin-top: calc(-1 * var(--inset-panel)); }
.box-body > .menu-list:last-child { margin-bottom: calc(-1 * var(--inset-panel)); }
.box-body > .menu-list + .more { margin-top: 0; }

/* ---------- Gegevenslijst (.facts): label → waarde, rijen van rand tot rand zoals tabellen en zijblokken ----------
   Spec docs/superpowers/specs/2026-09-30-infoblokken-design.md. <dl class="facts"><div><dt>Label</dt><dd>Waarde</dd></div>…</dl>.
   De labelkolom is zo breed als het langste label (max 12rem en 40 %); alle rijen lijnen via subgrid uit.
   Onder 20rem (zijkolom van 244 px) komt het label boven de waarde. Varianten: .legend, .facts-prose, .codes. */
.facts { container: facts / inline-size; display: grid; grid-template-columns: fit-content(min(var(--facts-label, 12rem), 40%)) minmax(0, 1fr); margin: 0 calc(-1 * var(--pad-x, 0px)); font-size: var(--text-sm); line-height: var(--leading-ui); font-variant-numeric: tabular-nums; }
.facts > div { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; column-gap: var(--space-md); align-items: baseline; padding: var(--space-xs) var(--pad-x, 0px); border-top: 1px solid var(--color-divider); }
.facts dt { min-width: 0; color: var(--color-text-muted); font-weight: 500; }
.facts dd { min-width: 0; margin: 0; color: var(--color-text); overflow-wrap: anywhere; }
.facts .icon { width: 18px; height: 18px; vertical-align: -3px; color: var(--color-action); }
.box-body > .facts:first-child, .card > .facts:first-child { margin-top: calc(-1 * var(--pad-x)); }
:is(.box-body, .card) > .facts:first-child > div:first-child { border-top: 0; }
.box-body > .facts:last-child { margin-bottom: calc(-1 * var(--inset-panel)); }
.box-body > .facts + .more { margin-top: 0; }
@container facts (width < 20rem) {
  .facts > div { display: block; }
  .facts dt { font-size: var(--text-xs); }
}
/* Lange uitleg als waarde (privacy, crew): leesgrootte, onderwerp in de kopkleur; onder 34rem het onderwerp erboven */
.facts-prose { --facts-label: 11rem; font-size: inherit; line-height: var(--leading-body); }
.facts-prose dt { color: var(--color-heading); font-size: var(--text-sm); font-weight: 600; }
@container facts (width < 34rem) {
  .facts-prose > div { display: block; }
  .facts-prose dt { margin-bottom: var(--space-3xs); }
}
/* Legenda: symbool → betekenis; symboolkolom in tekstkleur, rijen op rijhoogte */
.facts.legend { --facts-label: 10rem; }
.facts.legend > div { align-items: center; min-height: var(--row-h); }
.facts.legend dt { display: flex; align-items: center; gap: var(--space-2xs); color: var(--color-text); }
.facts.legend .crew-badge { width: 20px; height: 20px; font-size: var(--text-xs); }
/* Codelijst (UBB): wat · typ dit · zo ziet het eruit; op smal onder elkaar met het resultaat achter een lijntje */
.facts.codes { grid-template-columns: fit-content(min(11rem, 30%)) minmax(0, 1.1fr) minmax(0, 1fr); }
.facts.codes > div { align-items: center; }
.facts.codes dt { color: var(--color-text); font-weight: 600; }
.facts.codes .code-hint { display: block; color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 400; }
.facts.codes .code-src code { display: inline-block; max-width: 100%; padding: var(--space-3xs) var(--space-xs); background: var(--color-surface-sunken); border: 1px solid var(--color-divider); border-radius: var(--radius-xs); font-size: var(--text-xs); line-height: var(--leading-ui); white-space: pre-wrap; overflow-wrap: anywhere; }
.facts.codes .code-out > :is(.ubb-quote, .ubb-code, .ubb-spoiler, ul) { margin: 0; }
.facts.codes > .facts-cols { display: none; }
@container facts (width >= 34rem) {
  .facts.codes > div.facts-cols { display: grid; padding-block: var(--space-2xs); border-top: 0; background: var(--color-surface-sunken); color: var(--color-text-muted); font: 600 var(--text-2xs)/var(--leading-ui) var(--font-body); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
  .facts.codes > div.facts-cols :is(dt, dd) { color: inherit; font: inherit; }
}
@container facts (width < 34rem) {
  .facts.codes > div { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-2xs); padding-block: var(--space-sm); }
  .facts.codes .code-out { padding-left: var(--space-sm); border-left: 2px solid var(--color-border); }
}
/* Smilies: tegels, gezichtje · naam · codes; emoji-letterset zodat het gezichtje altijd in kleur staat */
.smiley-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); gap: var(--space-xs); }
.smiley-grid li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: var(--space-xs); align-items: center; padding: var(--space-xs) var(--space-sm); border: 1px solid var(--color-divider); border-radius: var(--radius-sm); background: var(--color-surface); }
.smiley-grid .smiley { grid-row: 1 / 3; font-size: 1.75em; line-height: 1; font-family: var(--font-emoji); text-align: center; }
.smiley-grid .smiley-name { font: 600 var(--text-sm)/var(--leading-snug) var(--font-body); color: var(--color-text); }
.smiley-grid .smiley-codes { display: flex; flex-wrap: wrap; gap: var(--space-3xs); }
.smiley-grid code { padding: 0 var(--space-2xs); background: var(--color-surface-sunken); border-radius: var(--radius-xs); font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; }
.hint-icon { width: 1.1em; height: 1.1em; vertical-align: -.2em; }
.mood { white-space: nowrap; }
.mood .icon { width: 1.125em; height: 1.125em; vertical-align: -.2em; color: var(--color-action); }
/* Iconen midden in een regel (pill, poll, "Dit hielp", "kaartje"): even groot als de tekst */
:where(.pill, .poll-bar em, .helped, .mini-list a.c) .icon { width: 1em; height: 1em; vertical-align: -.125em; }

/* ---------- Accountblok "Jouw i-cu" / "Inloggen" (account_blok(), partials/account_blok.php) ---------- */
.account-blok .box-count a { color: inherit; }
.account-blok .box-count a:hover { color: var(--color-action); text-decoration: none; }
.ab-me { display: flex; gap: var(--space-xs); align-items: center; margin: calc(-1 * var(--inset-panel)) calc(-1 * var(--inset-panel)) 0; padding: var(--space-sm) var(--inset-panel); border-bottom: 1px solid var(--color-divider); }
.ab-me .avatar { width: 40px; height: 40px; }
.ab-me-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.ab-me-text > a:last-child { font-size: var(--text-xs); font-weight: 600; }
.ab-logout .linklike { padding: 0; border: 0; background: none; color: var(--color-action); font: inherit; cursor: pointer; }
.ab-logout:hover { background: var(--color-row-hover); }
.ab-login { display: grid; gap: var(--space-sm); }
.ab-login .field { gap: var(--space-3xs); }
.ab-login .field > label { font-size: var(--text-xs); }
.ab-login input:not([type="checkbox"]) { width: 100%; }
.ab-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs); }
.ab-row .check { align-items: center; font-size: var(--text-xs); }
.ab-row .check input { margin-top: 0; }
.box-body > .ab-links { list-style: none; margin: var(--inset-panel) calc(-1 * var(--inset-panel)) calc(-1 * var(--inset-panel)); padding: 0; border-top: 1px solid var(--color-divider); font: 600 var(--text-sm)/var(--leading-ui) var(--font-body); }
.ab-links li + li { border-top: 1px solid var(--color-divider); }
.ab-links a { display: flex; align-items: center; min-height: var(--row-h); padding: 0 var(--inset-panel); }
.ab-links a:hover { background: var(--color-row-hover); text-decoration: none; }
/* Zodra de zijkolom onder de inhoud valt (.cols, 860 px) doen de header en de menulade dit al */
@media (max-width: 860px) {
  .col > .account-blok { display: none; }
}

/* ---------- Lijsten ---------- */
/* Compacte gegevenslijst: "17:38 Naam (16)". Rijhoogte uit --row-h (36, aanraken 40); rijen van twee regels houden xs */
.mini-list { list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); line-height: var(--leading-ui); }
.mini-list li { display: flex; gap: var(--space-xs); align-items: baseline; min-width: 0; min-height: var(--row-h); padding: var(--space-xs) 0; }
/* Eénregelige rij precies op --row-h. In @supports: een var()-waarde die pas bij het berekenen ongeldig blijkt (geen lh),
   valt terug op 0 en niet op de padding hierboven. */
@supports (padding-block: 1lh) {
  .mini-list li { padding-block: max(var(--space-xs), (var(--row-h) - 1lh) / 2); }
}
.mini-list li + li { border-top: 1px solid var(--color-divider); }
.mini-list .t { flex-shrink: 0; min-width: 2.9rem; color: var(--color-text-muted); font: 500 var(--text-xs) var(--font-body); font-variant-numeric: tabular-nums; }
.mini-list .c { color: var(--color-text-muted); font-size: var(--text-xs); }
.mini-list .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Een rij met een lid kapt de rij niet af: .who kort zelf de naam in en gaat als geheel naar de volgende regel (spec afbreken §1) */
.mini-list .grow:has(.who) { overflow: visible; white-space: normal; }
.mini-list li > :has(> .who) { min-width: 0; }
.list { list-style: none; margin: 0; padding: 0; }
.list > li { padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-border); }
.list > li:last-child { border-bottom: 0; }
.list .icon, .mini-list .icon { vertical-align: -4px; color: var(--color-action); margin-right: var(--space-2xs); }

/* ListRow: avatar/icoon → naam + activiteit → tijd */
/* De feed is zelf een container: in een smal paneel (< 30rem) staat de tijd onder de tekst, naast de pasfoto.
   Dit hing eerst aan de schermbreedte en ging tussen 481 en 767 px mis (tijd onder de pasfoto). */
.feed { list-style: none; margin: 0; padding: 0; container: feed / inline-size; }
.feed-row { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; gap: var(--space-sm); align-items: center; padding: var(--space-sm) 0; border-top: 1px solid var(--color-border); font-size: var(--text-sm); line-height: 1.4; }
.feed-row:first-child { border-top: 0; padding-top: 0; }
.feed-row:last-child { padding-bottom: 0; }
/* In een blok loopt de feed tot kop en voet (sectie Panel): dan houden de eerste en laatste rij hun ruimte */
.box-body > .feed > .feed-row { border-top-color: var(--color-divider); }
.box-body > .feed > .feed-row:first-child { padding-top: var(--space-sm); }
.box-body > .feed > .feed-row:last-child { padding-bottom: var(--space-sm); }
.feed-av { position: relative; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; }
.feed-av .avatar { width: 2.25rem; height: 2.25rem; }
.feed-av .icon { width: 1.25rem; height: 1.25rem; color: var(--color-action); }
.feed-icon { border-radius: var(--radius-control); background: var(--color-surface-muted); }
.feed-text { min-width: 0; overflow-wrap: anywhere; }
.feed-time { color: var(--color-text-muted); font: 500 var(--text-xs) var(--font-body); white-space: nowrap; font-variant-numeric: tabular-nums; }
@container feed (width < 30rem) {
  .feed-row { grid-template-columns: 2.25rem minmax(0, 1fr); row-gap: 0; }
  .feed-av { grid-row: span 2; align-self: start; }
  .feed-time { grid-column: 2; }
}
.feed-time time { color: inherit !important; font-weight: inherit !important; } /* één accent per rij: de naam */

/* ---------- Leden ---------- */
.user { position: relative; font-weight: 600; } /* houdt de sr-only "(online)" binnen afgekapte regels */
/* user_link() (spec afbreken §1): naam, leeftijd en badge staan samen op één regel die nooit breekt. Past het niet, dan
   krimpt alleen de naam met … (volledige naam in de title); leeftijd en badge blijven altijd staan. Geen ouder kapt af. */
.who { display: inline-flex; align-items: baseline; gap: var(--space-2xs); max-width: 100%; min-width: 0; white-space: nowrap; vertical-align: baseline; }
.who > .user { display: block; min-width: 0; overflow-x: clip; overflow-y: visible; text-overflow: ellipsis; }
.who > :is(.age, .crew-badge) { flex: none; }
.who > .crew-badge { align-self: center; }
/* "door <naam>" op één regel: het woord ervoor blijft staan, de naam krimpt */
.who-line { display: inline-flex; align-items: baseline; gap: var(--space-2xs); max-width: 100%; min-width: 0; white-space: nowrap; vertical-align: baseline; }
/* In een sleutelkolom (nowrap) zou een lange naam de hele kolom oprekken; daar krijgt hij een vaste bovengrens */
.table .c-key .who { max-width: 6rem; }
.g-m, a.g-m { color: var(--g-m); }
.g-v, a.g-v { color: var(--g-v); }
.g-s, a.g-s { color: var(--g-s); }
.g-x { color: var(--color-text-muted); }
.age { color: var(--color-text-muted); font: 400 .8em var(--font-body); font-variant-numeric: tabular-nums; }
/* Legenda van vroeger: naam onderstreept = online, leeftijd onderstreept = heeft pasfoto */
.user.is-online { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.age.has-photo { text-decoration: underline; text-underline-offset: 2px; }
/* Tijden: rood tot 15 min, blauw tot 1 uur, groen tot 24 uur */
.rec-15 { color: var(--rec-15) !important; font-weight: 600; }
.rec-60 { color: var(--rec-60) !important; }
.rec-24 { color: var(--rec-24) !important; }
.crew-badge { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: var(--radius-xs); font: 700 var(--text-2xs)/1 var(--font-body); color: var(--white); background: var(--crew-lid); vertical-align: 1px; }
.crew-mod { background: var(--crew-mod); }
.crew-admin { background: var(--crew-admin); }
.crew-webmaster { background: var(--crew-webmaster); }

/* Avatar: pasfoto met lichte rand, afgerond vierkant */
.avatar { flex-shrink: 0; aspect-ratio: 1; object-fit: cover; padding: var(--space-3xs); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-avatar); }
.avatar-s { width: 2rem; height: 2rem; padding: var(--space-3xs); border-radius: var(--radius-sm); }
.avatar-m { width: 72px; height: 72px; }
.avatar-l { width: 180px; height: 180px; }
.av { position: relative; display: inline-block; flex-shrink: 0; line-height: 0; }
/* StatusDot: altijd met tekstalternatief (sr-only) ernaast */
.status-dot, .online-dot { display: inline-block; flex-shrink: 0; width: .6rem; height: .6rem; border-radius: 50%; background: var(--color-online); box-shadow: 0 0 0 2px var(--color-surface); }
.av .status-dot { position: absolute; right: -3px; bottom: -3px; }
.member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: var(--space-sm); }
.member-card { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); min-width: 0; padding: var(--space-sm); text-align: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-panel); }
.member-card .avatar { width: 88px; height: 88px; }
.mc-name { min-width: 0; max-width: 100%; font-size: var(--text-sm); line-height: 1.3; }
.member-card .meta { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-muted); font-size: var(--text-xs); }
.spot { display: flex; gap: var(--space-sm); align-items: center; }
.spot > a, .spot > img { flex: none; line-height: 0; }
.spot > :not(a, img) { min-width: 0; } /* tekst met een naam krimpt mee (spec afbreken §1) */
.spot .avatar { width: 80px; height: 80px; }
.face-row { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.face-row .avatar { width: 44px; height: 44px; }

/* ---------- Button ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: var(--tap); padding: 0 var(--space-md); border: 1px solid transparent; border-radius: var(--radius-control);
  background: var(--color-action); color: var(--color-on-action); font: 600 var(--text-sm)/var(--leading-snug) var(--font-body);
  cursor: pointer; text-decoration: none; white-space: nowrap; transition: background var(--transition-fast), border-color var(--transition-fast);
}
.btn:hover { background: var(--color-action-hover); text-decoration: none; }
.btn-ghost { background: var(--color-surface); color: var(--color-heading); border-color: var(--color-border-control); }
.btn-ghost:hover { background: var(--color-surface-muted); border-color: var(--color-heading); }
/* Klein oogt compact, maar houdt 44 px klikvlak */
.btn-small { position: relative; min-height: 2.25rem; padding: 0 var(--space-sm); font-size: var(--text-sm); }
.btn-small::after { content: ""; position: absolute; inset: calc(-1 * var(--space-2xs)) 0; }
.btn-danger { background: var(--color-danger); color: var(--color-surface); }
.btn-danger:hover { background: var(--color-danger); filter: brightness(.9); }
.btn .icon { width: 18px; height: 18px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.linklike { background: none; border: 0; padding: 0; color: var(--color-action); font: inherit; cursor: pointer; }
.linklike:hover { text-decoration: underline; }
.inline-form { display: inline; }

/* ---------- Formulieren ---------- */
.form { display: grid; gap: var(--space-md); max-width: 40rem; }
.form-wide { max-width: none; }
.field { display: grid; gap: var(--space-xs); align-content: start; } /* naast een hoger veld niet uitrekken */
.field > label, .label { font-weight: 600; font-size: var(--text-sm); color: var(--color-heading); }
.field .hint, .hint { font-size: var(--text-sm); color: var(--color-text-muted); }
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.field > input + input { margin-top: 0; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-md); }
/* TextField: één primitive voor tekstvelden, keuzelijsten en tekstvakken. Minimaal 44 px hoog en 16 px tekst
   (kleiner laat iOS bij focus inzoomen); modules passen alleen breedte en flex aan, niet de maat. */
input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], input[type="number"], input[type="search"], input[type="url"], input[type="tel"], input:not([type]), select, textarea {
  width: 100%; min-height: var(--tap); padding: var(--space-xs) var(--space-sm); border: 1px solid var(--color-border-control); border-radius: var(--radius-control);
  background-color: var(--color-surface); color: var(--color-text); font: 400 var(--text-base)/var(--leading-ui) var(--font-body);
}
input::placeholder, textarea::placeholder { color: var(--color-text-muted); opacity: .85; }
textarea { min-height: 110px; resize: vertical; }
/* Datum en tijd blijven native kiezers, met dezelfde hoogte als andere velden (Chrome maakt ze anders 2 px hoger);
   iOS laat een leeg veld anders inklappen en centreert de waarde */
input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"] { height: var(--tap); }
input::-webkit-date-and-time-value { min-height: 1.4em; text-align: left; }
/* Enkelvoudige keuzelijst oogt als een tekstveld, met een chevron in een tokenkleur. multiple/size blijven native. */
select:not([multiple]):not([size]) {
  -webkit-appearance: none; appearance: none; padding-right: var(--space-xl); text-overflow: ellipsis;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%), linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%; /* hele pixels: scherpe punt */
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
input:focus, select:focus, textarea:focus { outline: 3px solid color-mix(in srgb, var(--color-focus) 30%, transparent); outline-offset: 0; border-color: var(--color-focus); }
input:disabled, select:disabled, textarea:disabled { opacity: .6; cursor: not-allowed; background-color: var(--color-surface-sunken); }
input:user-invalid, select:user-invalid, textarea:user-invalid { border-color: var(--color-danger); }
input:user-invalid:focus, select:user-invalid:focus, textarea:user-invalid:focus { outline-color: color-mix(in srgb, var(--color-danger) 30%, transparent); }
input[type="checkbox"], input[type="radio"] { width: 1.1rem; height: 1.1rem; accent-color: var(--color-action); }
input[type="file"] { max-width: 100%; min-width: 0; font: inherit; } /* min-width: in een grid-.field telt max-width anders niet (/beheer/design liep op 360 px uit beeld) */
.check { display: flex; gap: var(--space-xs); align-items: flex-start; font-size: var(--text-base); }
.check > span { min-width: 0; overflow-wrap: anywhere; } /* lange naam zonder spaties in het label breekt af (spec afbreken §5) */
.check input { margin-top: var(--space-2xs); flex-shrink: 0; }
.error-text { color: var(--color-danger); font-size: var(--text-sm); font-weight: 500; }
.form-errors { padding: var(--space-sm) var(--space-md); background: var(--color-danger-soft); color: var(--color-danger); border: 1px solid var(--color-danger-line); border-radius: var(--radius-control); }
.form-errors ul { margin: 0; padding-left: var(--space-md); }

/* UBB-werkbalk: één balk van 10 iconknoppen; lijntjes als schaduw links en boven (buiten de balk weggeknipt),
   groepjes opmaak · invoegen · extra met een donkerder lijntje.
   De wrapper .ubb-bar is een container: in een smal veld vult de balk de breedte, en onder 17.5rem worden het 2 rijen van 5,
   zodat een knop nooit smaller wordt dan ±27 px en de balk het veld niet breder maakt (eindreview: kaartformulier op 1024 px). */
.ubb-bar { container: ubb / inline-size; margin-bottom: var(--space-2xs); }
.ubb-toolbar { display: grid; grid-template-columns: repeat(10, 2.5rem); gap: 0; width: max-content; max-width: 100%; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-control); overflow: hidden; }
.ubb-toolbar button { display: grid; place-items: center; min-width: 0; height: 2.25rem; padding: 0; border: 0; border-radius: 0; background: var(--color-surface); color: var(--color-text); cursor: pointer; box-shadow: -1px -1px 0 var(--color-divider); }
.ubb-toolbar button:is(:nth-child(5), :nth-child(8)) { box-shadow: -1px 0 0 var(--color-border), -1px -1px 0 var(--color-divider); }
.ubb-toolbar button:hover, .ubb-toolbar button[aria-expanded="true"] { background: var(--color-row-hover); color: var(--color-action); }
.ubb-toolbar .icon { width: 18px; height: 18px; }
@container ubb (width < 26rem) { .ubb-toolbar { width: 100%; grid-template-columns: repeat(10, minmax(0, 1fr)); } }
@container ubb (width < 17.5rem) { .ubb-toolbar { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* Korte werkbalk (berichtenbalk): zes knoppen, altijd op één rij; de kleurknop (5e) houdt zijn scheidingslijn */
.ubb-toolbar.is-kort { width: max-content; grid-template-columns: repeat(6, 2.5rem); }
.smiley-picker { display: none; flex-wrap: wrap; gap: var(--space-3xs); padding: var(--space-2xs); margin-bottom: var(--space-2xs); background: var(--color-surface-muted); border: 1px solid var(--color-border); border-radius: var(--radius-control); }
.smiley-picker.open { display: flex; }
.smiley-picker button { min-width: 2.25rem; min-height: 2.25rem; background: none; border: 0; font-size: var(--text-xl); font-family: var(--font-emoji); cursor: pointer; border-radius: var(--radius-sm); }
.smiley-picker button:hover { background: var(--color-surface); }

/* ---------- Meldingen en lege staten ---------- */
.flash { margin-bottom: var(--space-md); padding: var(--space-sm) var(--space-md); border: 1px solid; border-radius: var(--radius-control); font-weight: 500; }
.flash-success { background: var(--color-success-soft); color: var(--color-success); border-color: var(--color-success-line); }
.flash-error { background: var(--color-danger-soft); color: var(--color-danger); border-color: var(--color-danger-line); }
.flash-info { background: var(--color-info-soft); color: var(--color-heading); border-color: var(--color-info-line); }
/* EmptyState (empty_state() in lib/view.php): een uitnodiging, geen foutmelding. Zacht vlak met een icoon, een korte kop
   (één regel) en een hint; in een lijst staat hij in een eigen rij. In een blok is het een band van rand tot rand, net als de
   rijen: dan past een kop van ~166 px naast het icoon, ook in de zijkolom van 244 px. Het icoon staat altijd vóór de tekst;
   in een smal vak loopt de tekst naast het icoon door. Links uitgelijnd, zonder eigen buitenmarge (spec afbreken §3-4). */
.empty-state { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-xs) var(--space-sm); padding: var(--space-sm); text-align: start; background: var(--color-surface-sunken); border-radius: var(--radius-control); }
:is(.box.highlight, .flash, .notice) .empty-state { background: var(--color-surface); }
.empty-icon { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--color-surface); color: var(--color-action); box-shadow: 0 0 0 1px var(--color-divider); }
.empty-icon .icon { width: 1.125rem; height: 1.125rem; margin: 0; vertical-align: 0; }
.empty-text { display: grid; flex: 1 1 0; gap: 0; min-width: 0; margin: 0; font-size: var(--text-sm); line-height: var(--leading-ui); text-wrap: pretty; }
.empty-title { color: var(--color-text); font-weight: 600; }
.empty-hint { color: var(--color-text-muted); font-size: var(--text-xs); }
.empty-hint a { color: var(--color-action); font-weight: 600; }
.empty-hint a:hover { color: var(--color-action-hover); }
.mini-list > li.is-empty, .list > li.is-empty { display: block; padding-block: var(--inset-panel); border: 0; }
.box-body > .empty-state { margin-inline: calc(-1 * var(--pad-x)); }
:is(.box-body > .empty-state, .box-body > .mini-list > li.is-empty > .empty-state) { padding: var(--space-sm) var(--pad-x); border-radius: 0; }
.box-body > .empty-state:first-child { margin-top: calc(-1 * var(--inset-panel)); }
.box-body > .empty-state:last-child { margin-bottom: calc(-1 * var(--inset-panel)); }
.box-body > .empty-state + .more { margin-top: 0; }
.box-body > .mini-list > li.is-empty { padding: 0; }
.notice { padding: var(--space-sm) var(--space-md); background: var(--color-surface-muted); border: 1px dashed var(--color-info-line); border-radius: var(--radius-control); }

/* ---------- Tabel (primitive) ----------
   Eén tabel voor de hele site (spec docs/superpowers/specs/2026-09-28-tabellen-design.md). table_open()/table_close()
   (lib/view.php) maken de omhulling en de kop; de view zet op elke cel zijn kolomsoort: c-main (hoofdzaak), c-key (korte
   sleutelwaarde), c-num, c-time, c-who (lid), c-meta (bijzaak), c-full (eigen regel), c-act (acties).
   Randloos in .box-body/.card: de eerste en laatste cel nemen de binnenmarge van de kaart over (--pad-x).
   .table-wrap is een container. Lijstmodus (.is-list): onder 34rem kaartbreedte een compacte rij (hoofdzaak + sleutelwaarde,
   daaronder de bijzaken als één grijze regel). .p3 (lage prioriteit) verdwijnt onder 48rem; in de compacte rij staat hij weer
   op de grijze regel. Datamodus (.is-data) scrolt daarna binnen zijn eigen vak; app.js maakt dat vak dan een benoemde,
   focusbare region en zet ARIA-rollen op lijsttabellen (Safari verliest die bij flexrijen). Geen media queries op tabellen. */
:is(.box-body, .card) > .table-wrap { margin-inline: calc(-1 * var(--pad-x)); }
.box-body > .table-wrap:first-child { margin-top: calc(-1 * var(--inset-panel)); }
.box-body > .table-wrap:last-child { margin-bottom: calc(-1 * var(--inset-panel)); }
.card > .table-wrap:first-child { margin-top: calc(-1 * var(--pad-x)); }
.card > .table-wrap:last-child { margin-bottom: calc(-1 * var(--pad-x)); }
.card:has(> .table-wrap) { overflow: clip; }
/* Randloze lijsten (spec 4.1): scheidingslijnen tot de kaartrand, tekst op één lijn met de kaarttitel */
:is(.box-body, .card) > :is(.feed, .mini-list) { margin-inline: calc(-1 * var(--pad-x)); }
:is(.box-body, .card) > :is(.feed, .mini-list) > li { padding-inline: var(--pad-x); }
.table-wrap {
  position: relative; /* houdt sr-only-labels ("Acties") binnen het scrollvak */
  container: tbl / inline-size; overflow-x: auto; overscroll-behavior-inline: contain;
  /* Scrollschaduw als hint: de dekvlakken schuiven mee (local) en verbergen de schaduw aan een kant waar niets meer staat */
  background:
    linear-gradient(to right, var(--table-bg, var(--color-surface)) 30%, transparent) left / 2rem 100% no-repeat local,
    linear-gradient(to left, var(--table-bg, var(--color-surface)) 30%, transparent) right / 2rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--color-scroll-shadow), transparent) left / .75rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--color-scroll-shadow), transparent) right / .75rem 100% no-repeat scroll;
}
.table-wrap:focus-visible { outline-offset: -3px; } /* de kaart knipt alles buiten het vak af */
table.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); line-height: 1.45; }
.table th, .table td { padding: var(--space-xs) var(--space-sm); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--color-divider); overflow-wrap: break-word; }
.table :is(th, td):first-child { padding-left: var(--pad-x, var(--space-sm)); }
.table :is(th, td):last-child { padding-right: var(--pad-x, var(--space-sm)); }
.table th { height: 2.25rem; padding-block: var(--space-xs); background: var(--color-surface-sunken); color: var(--color-text-muted); font: 600 var(--text-xs)/var(--leading-snug) var(--font-body); text-transform: uppercase; letter-spacing: var(--tracking-caps); white-space: nowrap; }
.table td { height: var(--tap); }
.table tbody tr:last-child > td { border-bottom: 0; }
.table .fill { width: 100%; }
.table td.c-main, .table .break { overflow-wrap: anywhere; }
.table td:is(.c-meta, .c-full) { overflow-wrap: anywhere; } /* ledentekst zonder spaties (woonplaats, antwoord, details) laat de tabel niet scrollen */
.table :is(.c-num, .c-time, .c-key, .c-act) { text-align: right; white-space: nowrap; }
.table :is(.c-num, .c-time) { font-variant-numeric: tabular-nums; }
.table .c-key { font-variant-numeric: tabular-nums; }
.table .c-act > * + * { margin-left: var(--space-2xs); }
.table .sub { display: block; margin-top: var(--space-3xs); color: var(--color-text-muted); font-size: var(--text-xs); }
/* Forumtabellen: een subregel met een naam ("door <naam> · datum") telt niet mee voor de kolombreedte (width 0), maar
   vult de cel (min-width 100%), zodat de naam zich aan de kolom aanpast in plaats van de tabel op te rekken (spec afbreken
   §1). Alleen hier, waar de titel in dezelfde cel de breedte draagt; elders kreeg de hoofdkolom dan te weinig ruimte. */
:is(.topic-table .c-main, .forum-table .c-full) .sub:has(.who) { width: 0; min-width: 100%; }
.table .small { font-size: var(--text-xs); }
.table th.g-m { color: var(--g-m); }
.table th.g-v { color: var(--g-v); }
.table th.g-s { color: var(--g-s); }
.table :is(.u, .only-compact) { display: none; }
.clamp-1, .clamp-2 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-1 { -webkit-line-clamp: 1; line-clamp: 1; }
.clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.table.is-hover tbody tr:hover { background: var(--color-row-hover); }
.table tr.is-mark { background: var(--color-row-mark); }
.table.is-data :is(th, td):first-child { position: sticky; left: 0; z-index: 1; background: var(--table-bg, var(--color-surface)); }
.table.is-data th:first-child { background: var(--color-surface-sunken); }
@container tbl (width < 48rem) {
  .table .p3 { display: none; }
}
@container tbl (width < 34rem) {
  .table.is-list thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .table.is-list, .table.is-list tbody { display: block; }
  .table.is-list tbody tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3xs) var(--space-xs); padding: var(--space-xs) var(--pad-x, var(--space-sm)); border-bottom: 1px solid var(--color-divider); }
  .table.is-list tbody tr:last-child { border-bottom: 0; }
  .table.is-list tbody tr::after { content: ""; order: 2; flex-basis: 100%; }
  .table.is-list td { display: block; min-width: 0; height: auto; padding: 0; border: 0; text-align: left; white-space: normal; } /* wint op volgorde van de first/last-child-marge */
  .table.is-list td.c-main:has(> .rank) { display: flex; align-items: center; gap: var(--space-xs); } /* rangnummer en naam op één regel; de naam krimpt (spec afbreken §1) */
  .table.is-list .c-main { order: 0; flex: 1 1 0; min-width: 0; }
  .table.is-list .c-key { order: 1; margin-left: auto; text-align: right; white-space: nowrap; }
  .table.is-list :is(.c-num, .c-time, .c-who, .c-meta) { order: 3; color: var(--color-text-muted); font: 400 var(--text-xs)/var(--leading-ui) var(--font-body); }
  .table.is-list :is(.c-num, .c-time, .c-who, .c-meta) ~ :is(.c-num, .c-time, .c-who, .c-meta)::before { content: "·" / ""; margin-right: var(--space-xs); }
  .table.is-list :is(.c-full, .c-act) { order: 4; flex-basis: 100%; margin-top: var(--space-xs); }
  .table.is-list .c-act { text-align: right; }
  .table.is-list :is(.u, .only-compact) { display: inline; }
  .table.is-list .hide-compact { display: none; }
}

/* ---------- Tabs en andere horizontale menu's ----------
   ScrollRow: een menu op één regel dat alleen horizontaal scrollt (tabs, profieltabs, crew- en beheermenu op mobiel).
   Geen verticale scrollruimte; verticaal vegen scrollt gewoon de pagina. De scrollbalk blijft zichtbaar als hint,
   de focusring staat binnen het item zodat de scroller hem niet afknipt. */
.tabs, .scroll-row {
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; scroll-padding-inline: var(--space-md);
  -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.tabs a:focus-visible { outline-offset: -3px; }        /* onderstreepte tabs raken de rand: ring binnen het item */
.scroll-row a:focus-visible { outline-offset: 0; }     /* menu's met binnenruimte: ring past erbinnen */
.tabs { display: flex; gap: var(--space-3xs); margin-bottom: var(--space-md); box-shadow: inset 0 -1px 0 var(--color-border); } /* lijn binnen de scroller: geen overloop */
.tabs a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--space-sm); white-space: nowrap; color: var(--color-text-muted); font-weight: 600; border-bottom: 3px solid transparent; }
.tabs a:hover { color: var(--color-heading); text-decoration: none; }
.tabs a[aria-current="page"] { color: var(--color-heading); border-bottom-color: var(--color-action); }
.tabs .count { margin-left: var(--space-xs); padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-pill); background: var(--color-surface-muted); color: var(--color-text-muted); font: 600 var(--text-xs) var(--font-body); font-variant-numeric: tabular-nums; }

/* ---------- Paginering ---------- */
.pagination { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin: var(--space-md) 0; }
.pagination a, .pagination span { display: inline-grid; place-items: center; min-width: 2.5rem; min-height: 2.5rem; padding: 0 var(--space-sm); border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface); font: 500 var(--text-sm) var(--font-body); font-variant-numeric: tabular-nums; }
.pagination a:hover { border-color: var(--color-action); text-decoration: none; }
.pagination .current { background: var(--color-action); color: var(--color-on-action); border-color: var(--color-action); font-weight: 700; }

/* ---------- Berichten / reacties ---------- */
.post { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-md); padding: var(--space-md) 0; border-bottom: 1px solid var(--color-border); }
.post:last-child { border-bottom: 0; }
.post .avatar { width: 56px; height: 56px; }
.post-head { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: baseline; margin-bottom: var(--space-2xs); font-size: var(--text-sm); }
.post-head time { color: var(--color-text-muted); font: 500 var(--text-xs) var(--font-body); font-variant-numeric: tabular-nums; }
.post-body { overflow-wrap: anywhere; }
.post-actions { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-text-muted); }
.post-actions a, .post-actions button { color: var(--color-text-muted); }
.post-actions a:hover, .post-actions button:hover { color: var(--color-action); }
.post-private { background: color-mix(in srgb, var(--color-live) 8%, transparent); border-radius: var(--radius-control); padding-left: var(--space-xs); padding-right: var(--space-xs); }
.owner-reply { margin-top: var(--space-xs); padding: var(--space-xs) var(--space-sm); border-left: 3px solid var(--color-action); background: var(--color-surface-muted); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: var(--text-sm); }
.ubb-quote { margin: var(--space-xs) 0; padding: var(--space-xs) var(--space-sm); border-left: 3px solid var(--color-border-control); background: var(--color-surface-sunken); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.ubb-quote cite { display: block; font-style: normal; font-weight: 700; font-size: var(--text-sm); color: var(--color-text-muted); }
.ubb-code { background: var(--color-surface-sunken); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); overflow-x: auto; font: var(--text-sm) var(--font-code); }
.ubb-center { text-align: center; }
.ubb-img { max-height: 420px; border-radius: var(--radius-sm); }
.ubb-size-1 { font-size: .75em; } .ubb-size-2 { font-size: .9em; } .ubb-size-3 { font-size: 1em; } .ubb-size-4 { font-size: 1.3em; } .ubb-size-5 { font-size: 1.6em; }
.ubb-spoiler { background: var(--color-surface-muted); border-radius: var(--radius-sm); padding: var(--space-xs) var(--space-sm); }
.smiley { font-size: 1.1em; line-height: 1; }
.mention { font-weight: 600; }

/* ---------- Profiel (gedeeld) ---------- */
.profile-hero { position: relative; margin-bottom: var(--space-md); overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-panel); }
.profile-banner { height: 170px; background: var(--pc, var(--color-surface-muted)); background-size: cover; background-position: center; }
.profile-id { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: flex-end; margin-top: -70px; padding: 0 var(--inset-card) var(--inset-card); }
.profile-id .avatar-l { width: 150px; height: 150px; padding: var(--space-3xs); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: 0 0 0 4px var(--color-surface); }
.profile-id h1 { margin: 0; }
.profile-id .status-line { color: var(--color-text-muted); font-style: italic; }
.profile-facts { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-text-muted); }
.profile-actions { margin-left: auto; display: flex; gap: var(--space-xs); flex-wrap: wrap; }
/* Label/waarde: naast elkaar zolang de waarde minstens 14rem krijgt, anders eronder (zonder media query) */
.tagcloud { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.tag { padding: var(--space-3xs) var(--space-xs); border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface-muted); font-size: var(--text-xs); }
@media (max-width: 600px) {
  .profile-id { margin-top: -50px; }
  .profile-id .avatar-l { width: 110px; height: 110px; }
  .profile-actions { margin-left: 0; width: 100%; }
}

/* ---------- Foto's ---------- */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-sm); }
.photo-grid a, .photo-grid figure { position: relative; display: block; margin: 0; overflow: hidden; aspect-ratio: 1; background: var(--color-surface-muted); border-radius: var(--radius-control); }
.photo-grid img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
  .photo-grid img { transition: transform .2s; }
  .photo-grid a:hover img { transform: scale(1.03); }
}
.photo-grid .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-md) var(--space-xs) var(--space-xs); font-size: var(--text-xs); color: var(--white); background: linear-gradient(transparent, rgb(0 0 0 / .65)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.photo-view { text-align: center; }
.photo-view img { max-height: 75vh; border-radius: var(--radius-control); }

/* ---------- Cijfers geven (contests) ---------- */
.rate { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.rate button { width: var(--tap); height: var(--tap); border: 1px solid var(--color-border-control); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-text); font: 700 var(--text-base) var(--font-body); cursor: pointer; font-variant-numeric: tabular-nums; }
.rate button:hover, .rate button.chosen { background: var(--color-action); color: var(--color-on-action); border-color: var(--color-action); }
.score { color: var(--color-action); font: 700 var(--text-lg) var(--font-body); font-variant-numeric: tabular-nums; }
.rank { display: inline-grid; place-items: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--color-surface-muted); font: 700 var(--text-xs) var(--font-body); font-variant-numeric: tabular-nums; }
.rank-1 { background: var(--rank-1); color: var(--rank-1-text); } .rank-2 { background: var(--rank-2); color: var(--rank-2-text); } .rank-3 { background: var(--rank-3); color: var(--rank-3-text); }

/* ---------- Stembus ---------- */
.poll-q { font-weight: 700; margin-bottom: var(--space-sm); }
.poll-opt { margin: var(--space-xs) 0; }
.poll-bar { position: relative; height: 30px; overflow: hidden; background: var(--color-surface-muted); border-radius: var(--radius-sm); }
.poll-bar > span { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--color-action) 28%, transparent); }
.poll-bar em { position: relative; z-index: 1; display: flex; align-items: center; height: 100%; justify-content: space-between; gap: var(--space-xs); padding: 0 var(--space-sm); font-style: normal; font-size: var(--text-sm); }
.poll-bar em span:last-child { font-variant-numeric: tabular-nums; }
.poll-bar em span { position: static; inset: auto; background: none; }
.poll-bar em > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.poll-form label { display: flex; gap: var(--space-xs); align-items: center; min-height: 2.25rem; cursor: pointer; }

/* ---------- Forum ---------- */
.prefix { display: inline-block; margin-right: var(--space-2xs); padding: 0 var(--space-2xs); border-radius: var(--radius-xs); background: var(--color-live); color: var(--color-on-live); font: 700 var(--text-2xs)/var(--leading-body) var(--font-body); vertical-align: 1px; }
.pill { display: inline-block; padding: var(--space-3xs) var(--space-xs); border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface-muted); color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 700; white-space: nowrap; overflow-wrap: normal; }
.pill-accent { background: var(--color-live); color: var(--color-on-live); border-color: transparent; }
.pill-primary { background: var(--color-action); color: var(--color-on-action); border-color: transparent; }

/* ---------- Hoofdkaart (.hero): inkt, geen verloop ---------- */
.hero { position: relative; padding: var(--inset-card) var(--inset-card) var(--space-xl); overflow: hidden; border: 1px solid var(--color-ink-line); background: var(--color-ink); color: var(--color-on-ink); border-radius: var(--radius-panel); box-shadow: var(--shadow-panel); }
.hero h1, .hero h2, .hero h3 { color: var(--color-on-ink); }
.hero p { max-width: 62ch; color: var(--color-on-ink-muted); }
.hero a:not(.btn) { color: var(--color-on-ink); text-decoration: underline; text-underline-offset: 2px; }
.hero .age, .ink .age { color: var(--color-on-ink-muted); }
.hero .btn-ghost { background: transparent; color: var(--color-on-ink); border-color: color-mix(in srgb, var(--color-on-ink) 40%, transparent); }
.hero .btn-ghost:hover { background: color-mix(in srgb, var(--color-on-ink) 10%, transparent); border-color: var(--color-on-ink); }
.hero :focus-visible { outline-color: var(--color-highlight); }
.eyebrow { display: inline-flex; align-items: center; gap: var(--space-xs); margin: 0 0 var(--space-sm); color: var(--color-highlight); font: 700 var(--text-xs)/1 var(--font-body); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.eyebrow::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.stats-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--space-sm); }
.stat-tile { padding: var(--space-md); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-panel); }
.stat-tile .n { color: var(--color-heading); font: 700 var(--text-2xl)/var(--leading-snug) var(--font-display); letter-spacing: var(--tracking-snug); font-variant-numeric: tabular-nums; }
.stat-tile .l { color: var(--color-text-muted); font-size: var(--text-sm); }
.bars { display: grid; gap: var(--space-xs); }
.bar-row { display: grid; grid-template-columns: 130px minmax(0, 1fr) 60px; gap: var(--space-xs); align-items: center; font-size: var(--text-sm); }
.bar { height: 14px; overflow: hidden; background: var(--color-surface-muted); border-radius: var(--radius-xs); }
.bar span { display: block; height: 100%; background: var(--color-action); border-radius: var(--radius-xs); }

/* ---------- E-kaarten ---------- */
.ecard { display: flex; flex-direction: column; justify-content: center; min-height: 200px; padding: var(--space-xl); border-radius: var(--radius-panel); color: var(--white); text-align: center; font-size: var(--text-lg); box-shadow: 0 8px 24px rgb(0 0 0 / .15); }
.ecard h3 { font-size: var(--text-2xl); color: inherit; }
.ecard-verjaardag { background: var(--ecard-verjaardag); }
.ecard-liefde { background: var(--ecard-liefde); }
.ecard-vriendschap { background: var(--ecard-vriendschap); }
.ecard-sterkte { background: var(--ecard-sterkte); }
.ecard-feest { background: var(--ecard-feest); }
.ecard-zomaar { background: var(--ecard-zomaar); }
.ecard-kerst { background: var(--ecard-kerst); }
.card-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--space-sm); }
.card-picker label { cursor: pointer; }
.card-picker input { position: absolute; opacity: 0; }
.card-picker .ecard { min-height: 90px; padding: var(--space-sm); font-size: var(--text-sm); outline: 3px solid transparent; outline-offset: 2px; }
.card-picker input:checked + .ecard { outline-color: var(--color-text); }
.card-picker input:focus-visible + .ecard { outline-color: var(--color-focus); }

/* ---------- Diversen ---------- */
.error-page { text-align: center; max-width: 560px; margin: var(--space-2xl) auto; }
/* Smalle formulierkaart (inloggen, wachtwoord vergeten/herstellen) */
.auth-narrow { max-width: 28.75rem; margin: var(--space-lg) auto; }
.error-code { margin: 0; color: var(--color-action); font: 700 var(--text-4xl)/var(--leading-tight) var(--font-display); letter-spacing: var(--tracking-tight); }
.kv { display: flex; justify-content: space-between; gap: var(--space-xs); padding: var(--space-xs) 0; border-bottom: 1px dashed var(--color-border); font-size: var(--text-sm); }
.kv:last-child { border-bottom: 0; }
/* Kerncijfers in een blok: dezelfde rij als een lijst (rijhoogte, lijn van rand tot rand), getal rechts */
.box-body > .kv { align-items: center; min-height: var(--row-h); margin-inline: calc(-1 * var(--pad-x)); padding: var(--space-xs) var(--pad-x); border-bottom-style: solid; border-bottom-color: var(--color-divider); color: var(--color-text-muted); }
.box-body > .kv:has(+ .more) { border-bottom: 0; }
.box-body > .kv > :last-child { color: var(--color-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.box-body > .kv > a:last-child { color: var(--color-action); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--gap-panels); }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--gap-panels); }
.tile-link { display: flex; gap: var(--space-sm); align-items: flex-start; padding: var(--space-md); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-panel); color: var(--color-text); }
.tile-link:hover { border-color: var(--color-action); text-decoration: none; }
.tile-link .icon { width: 28px; height: 28px; color: var(--color-action); flex-shrink: 0; }
.tile-link strong { display: block; color: var(--color-heading); font-family: var(--font-display); }
.tile-link span { color: var(--color-text-muted); font-size: var(--text-sm); }
.article-body { font-size: var(--text-base); line-height: 1.65; max-width: 70ch; }
.birthday-list { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-sm); }

/* ---------- Gedeelde onderdelen (gebruikt door meerdere modules) ---------- */
/* "Melden"-link (report_link()), honeypotveld tegen spambots, filterbalk, afbeeldingsvoorbeeld en pil-navigatie */
.report-link { color: var(--muted); font-size: var(--text-xs); white-space: nowrap; }
.report-link:hover { color: var(--color-danger); }
.report-link { display: inline-flex; align-items: center; gap: var(--space-3xs); }
.report-link .icon { width: 14px; height: 14px; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.admin-filter { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; margin-bottom: var(--space-sm); }
.admin-filter input:not([type="checkbox"]) { flex: 1 1 200px; width: auto; }
.admin-filter select { width: auto; flex: 0 1 auto; }
.admin-thumb { display: block; width: 120px; height: 120px; object-fit: cover; border-radius: var(--radius-s); border: 1px solid var(--line); margin: var(--space-2xs) 0; }
.admin-thumb[hidden] { display: none; }
.ld-pills { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-sm); }
.ld-pills a { padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--surface); font-size: var(--text-sm); font-weight: 600; color: var(--text); }
.ld-pills a:hover { border-color: var(--primary); text-decoration: none; }
.ld-pills a[aria-current="page"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }

/* ---------- Footer ---------- */
.site-footer { padding: var(--space-xl) 0; font-size: var(--text-sm); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-lg) var(--space-2xl); align-items: start; }
.footer-logo { display: block; width: 132px; height: auto; aspect-ratio: 220 / 52; margin-bottom: var(--space-sm); }
.footer-history { margin: 0 0 var(--space-xs); color: var(--color-on-ink); }
.footer-slogan { margin: 0; color: var(--color-on-ink-muted); font: 400 var(--text-xs)/var(--leading-body) var(--font-body); }
.site-footer .totals { margin: 0 0 var(--space-sm); color: var(--color-on-ink-muted); font: 500 var(--text-xs)/var(--leading-body) var(--font-body); font-variant-numeric: tabular-nums; }
.site-footer .totals .g-m, .site-footer .totals .g-v, .site-footer .totals .g-s { font-weight: 700; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 var(--space-2xs); margin: 0 0 var(--space-sm) calc(-1 * var(--space-xs)); }
.footer-links a { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 var(--space-xs); color: var(--color-on-ink); border-radius: var(--radius-sm); }
.footer-links a:hover { background: color-mix(in srgb, var(--color-on-ink) 10%, transparent); text-decoration: none; }
.site-footer .copy { margin: 0; color: var(--color-on-ink-muted); font-size: var(--text-xs); }
@media (max-width: 767px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Trek-om-te-vernieuwen in de iOS-app (app.js): pil bovenin, alleen zichtbaar tijdens het trekken */
.ptr {
  position: fixed; top: var(--space-md); left: 50%; z-index: 90; display: none; align-items: center; gap: var(--space-xs);
  min-height: 2.25rem; padding: 0 var(--space-sm) 0 var(--space-xs); border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  background: var(--color-surface); color: var(--color-heading); box-shadow: var(--shadow-pop); font: 600 var(--text-sm)/1 var(--font-body);
  white-space: nowrap; pointer-events: none; opacity: var(--pull, 0); transform: translate(-50%, calc((var(--pull, 0) - 1) * 150%));
}
.ptr svg { width: 1rem; height: 1rem; transform: rotate(calc(var(--pull, 0) * 270deg)); }
.ptr.is-visible { display: inline-flex; }
.ptr.is-armed, .ptr.is-loading { border-color: var(--color-action); box-shadow: var(--shadow-pop), inset 0 0 0 1px var(--color-action); color: var(--color-action); }
@media (prefers-reduced-motion: no-preference) {
  .ptr.is-loading svg { animation: ptr-spin .8s linear infinite; }
  @keyframes ptr-spin { to { transform: rotate(360deg); } }
}

@media print {
  .ticker, .site-header, .site-footer { display: none; }
  body { background: var(--white); }
}