/* devbord — huisstijl Graphite, dezelfde als de iOS-app (ios/Devbord/Design/Tokens.swift)
   Kleuren: grafiet #0A0B0D, papier #F5F5F2, limoen #C8F751 (vlakken) en #4A7300 (tekst op licht), amber #F5B83D, mint #1F9D63, rood #D6383A
   Letters: het systeemlettertype voor tekst en titels, monospace voor opschriften, tellers en datums.
   Figtree blijft geladen voor het whiteboard: tekst moet daar op elk toestel even breed zijn. */

@font-face { font-family: 'Figtree'; src: url('/fonts/figtree.woff2') format('woff2'); font-weight: 300 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215; }
@font-face { font-family: 'Figtree'; src: url('/fonts/figtree-ext.woff2') format('woff2'); font-weight: 300 900; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Figtree'; src: url('/fonts/figtree-italic.woff2') format('woff2'); font-weight: 300 900; font-style: italic; font-display: swap; }

:root {
  --ink: #101113;
  --ink-2: #50545b;
  --ink-3: #646971;
  --paper: #f5f5f2;
  --surface: #ffffff;
  --surface-2: #ecece8;
  --surface-3: #e0e1db;
  --line: #dcddd7;
  --line-strong: #868b94;
  /* accent is het limoenvlak voor de hoofdactie, met on-accent als tekst erop. signal is dezelfde tint als tekst,
     icoon of rand op een neutrale achtergrond; signal-ink is de tekst op een vlak in signal. */
  --accent: #c8f751;
  --on-accent: #0a0b0d;
  --signal: #4a7300;
  --signal-ink: #ffffff;
  --signal-soft: #ebf5cc;
  --amber: #f5b83d;
  --amber-soft: #fff3d6;
  --amber-ink: #7a5200;
  --mint: #1f9d63;
  --mint-soft: #dcf5e8;
  --mint-ink: #146c43;
  --red: #d6383a;
  --red-soft: #fde4e4;
  --red-ink: #b3261e;
  --list-bg: #ecece8;
  /* Aanwezigheid (online, even weg, niet storen): in beide thema's dezelfde tint. */
  --pres-online: #22c55e; --pres-idle: #f0b232; --pres-dnd: #f23f43;
  /* Prioriteit als etiket: vlak en tekst per niveau. */
  --prio-urgent-bg: #fde4e4; --prio-urgent-ink: #b42325; --prio-high-bg: #ffe9d6; --prio-high-ink: #9a4a08;
  --prio-medium-bg: #fff3cc; --prio-medium-ink: #8a6a00; --prio-low-bg: #e1efff; --prio-low-ink: #1a5f9e;
  /* Kleuren van labels en lijsten als bolletje of streepje: per thema een tint die op elk vlak zichtbaar blijft (3:1),
     dezelfde als in de iOS-app. Als vlak met tekst erop (omslag, kalender) blijft de vaste kleur uit COLORS gelden. */
  --c-green: #1e8e55; --c-yellow: #a07800; --c-orange: #d9621a; --c-red: #d13438; --c-purple: #7c4ddb; --c-blue: #2f6feb; --c-sky: #1390bd; --c-lime: #5e8f12; --c-pink: #c83c8c; --c-black: #3b4252; --c-gray: #808894;
  --card-shadow: 0 1px 0 rgba(16, 17, 19, .12);
  --pop-shadow: 0 12px 32px -8px rgba(16, 17, 19, .26), 0 0 0 1px rgba(16, 17, 19, .06);
  /* Schalen. Gebruik deze in plaats van losse waarden: zo blijven tekst en hoeken overal gelijk.
     Tekst in rem, zodat ze de lettergrootte van de browser volgt (bij 16px: 11, 12, 13, 14, 15, 16, 18, 20, 24, 28, 32).
     2xs en xs voor labels en tellers, sm en md voor knoppen en lijsten, base voor lopende tekst, lg en hoger voor titels. */
  --fs-2xs: .6875rem; --fs-xs: .75rem; --fs-sm: .8125rem; --fs-md: .875rem; --fs-base: .9375rem;
  --fs-lg: 1rem; --fs-xl: 1.125rem; --fs-2xl: 1.25rem; --fs-3xl: 1.5rem; --fs-4xl: 1.75rem; --fs-title: 2rem;
  /* Hoeken: xs voor labels, sm voor kleine knoppen en badges, md voor knoppen, velden en kaarten, lg voor menu's,
     xl voor panelen en vensters, 2xl voor grote vlakken, pill voor ronde chips. */
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 10px; --r-xl: 12px; --r-2xl: 16px; --r-pill: 999px;
  /* Lagen, van onder naar boven. Binnen een onderdeel (1 tot 10) mag een los getal; alles wat over de pagina heen
     ligt, gebruikt een van deze. */
  --z-dock: 58; --z-drawer: 60; --z-scrim: 65; --z-nav: 66; --z-modal: 70; --z-popover: 90; --z-toast: 100; --z-bar: 400; --z-skip: 500;
  /* Hoogte van knoppen en invoervelden: naast elkaar zijn ze even hoog. */
  --ctrl-h: 36px; --ctrl-h-sm: 28px;
  --r-card: var(--r-md);
  --r-ctrl: var(--r-md);
  --r-panel: var(--r-xl);
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  --green: var(--mint);
  --border: var(--line);
  --font-ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --font-display: var(--font-ui);
  --topbar: 0px;
  --nav: 0px;
  --sidebar: 264px;
  --nav-bg: #101113;
  --nav-ink: #f2f3f5;
  --nav-ink-2: #a3a8b1;
  --nav-ink-3: #8a909a;
  --nav-line: rgba(255, 255, 255, .09);
  --nav-hover: rgba(255, 255, 255, .07);
  --nav-active: rgba(255, 255, 255, .13);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #f2f3f5; --ink-2: #a3a8b1; --ink-3: #8a909a; --paper: #0a0b0d; --surface: #15171a; --surface-2: #1d2024;
  --line-strong: #6b717b; --signal-ink: #0a0b0d; --mint-ink: #5fd49b; --red-ink: #ff9a9a; --amber-ink: #f5c560;
    --surface-3: #282b30; --line: #26292e; --signal: #c8f751; --signal-soft: #232b12; --amber-soft: #3b2f12; --mint-soft: #133826;
    --red-soft: #431b1d; --list-bg: #0f1012; --card-shadow: 0 1px 0 rgba(0, 0, 0, .5); --nav-bg: #0f1012; --c-green: #3dd68c; --c-yellow: #f2c94c; --c-orange: #ff8b3e; --c-red: #f2555a; --c-purple: #a98bff; --c-blue: #5b9bff; --c-sky: #4cc9f0; --c-lime: #a6d94a; --c-pink: #f472b6; --c-black: #8a93a3; --c-gray: #8a93a3; --prio-urgent-bg: #4a1c1e; --prio-urgent-ink: #ff9b9c; --prio-high-bg: #4a2e14; --prio-high-ink: #ffb877; --prio-medium-bg: #42380f; --prio-medium-ink: #ffd75e; --prio-low-bg: #15304d; --prio-low-ink: #8cc4ff;
    --pop-shadow: 0 16px 40px -8px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .06); color-scheme: dark;
  }
}
/* Ook de vlakken die altijd grafiet zijn (het paneel naast het inlogformulier, de kop van de startpagina)
   krijgen deze waarden: daarbinnen gelden de gewone tokens. */
:root[data-theme="dark"], .auth-art, .lp-hero {
  --ink: #f2f3f5; --ink-2: #a3a8b1; --ink-3: #8a909a; --paper: #0a0b0d; --surface: #15171a; --surface-2: #1d2024;
  --line-strong: #6b717b; --signal-ink: #0a0b0d; --mint-ink: #5fd49b; --red-ink: #ff9a9a; --amber-ink: #f5c560;
  --surface-3: #282b30; --line: #26292e; --signal: #c8f751; --signal-soft: #232b12; --amber-soft: #3b2f12; --mint-soft: #133826;
  --red-soft: #431b1d; --list-bg: #0f1012; --card-shadow: 0 1px 0 rgba(0, 0, 0, .5); --nav-bg: #0f1012; --c-green: #3dd68c; --c-yellow: #f2c94c; --c-orange: #ff8b3e; --c-red: #f2555a; --c-purple: #a98bff; --c-blue: #5b9bff; --c-sky: #4cc9f0; --c-lime: #a6d94a; --c-pink: #f472b6; --c-black: #8a93a3; --c-gray: #8a93a3; --prio-urgent-bg: #4a1c1e; --prio-urgent-ink: #ff9b9c; --prio-high-bg: #4a2e14; --prio-high-ink: #ffb877; --prio-medium-bg: #42380f; --prio-medium-ink: #ffd75e; --prio-low-bg: #15304d; --prio-low-ink: #8cc4ff;
  --pop-shadow: 0 16px 40px -8px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .06); color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; overflow-x: clip; }
body { margin: 0; font: var(--fs-base)/1.45 var(--font-ui); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
body.no-scroll { overflow: hidden; }
#app { min-height: 100%; display: flex; flex-direction: column; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin: 0; }
h1 { font-size: var(--fs-4xl); } h2 { font-size: var(--fs-2xl); } h3 { font-size: var(--fs-xl); } h4 { font-size: var(--fs-base); }
p { margin: 0; }
/* Opschrift boven een groep of veld: klein, monospace, kapitalen. Eén rol voor de hele site; kleur en witruimte per plek. */
.menu-title, .pop-head, .section-head h3, .cm-section-head h3, .sb-title, .sb-timer-title,
.ps-group, .cmdk-group, .bm-title, .guide-kicker,
.gh-day, .cm-rel-type, .page-over, .lp-eyebrow,
.lv-pill, .lv-colhead > div, .cal-side-sep, .cal-set-group h4, .er-nav-head:not(.sub) { font-family: var(--mono); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.page-over, .lp-eyebrow { font-size: var(--fs-xs); }
a { color: var(--signal); }
::selection { background: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--ink); }
input, textarea, [contenteditable] { caret-color: var(--signal); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.ic { flex-shrink: 0; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.muted { color: var(--ink-3); }
.small { font-size: var(--fs-sm); }
/* Laadpagina: het merkteken groot op grafiet. Het bouwt zich op en blijft daarna glanzen en wippen tot de app er staat. */
.boot { position: fixed; inset: 0; display: grid; place-items: center; background: #0a0b0d; }
.boot .brand-mark { font-size: clamp(96px, 24vmin, 168px); color: var(--accent); }
.boot-over { z-index: 10000; transition: opacity .25s ease; }
.boot-over.out { opacity: 0; }
/* Grijze vlakken zolang de inhoud laadt */
.sk { display: block; border-radius: var(--r-md); background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: sk-shine 1.3s ease-in-out infinite; }
@keyframes sk-shine { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.sk-title { width: 220px; height: 30px; }
.sk-wrap { display: flex; gap: 12px; }
.sk-tiles { flex-wrap: wrap; margin-top: 22px; }
.sk-tiles .sk { width: 190px; height: 92px; flex: none; }
.sk-rows { flex-direction: column; gap: 8px; }
.sk-rows .sk { height: 44px; }
.sk-card { flex-direction: column; gap: 10px; padding: 26px 24px 30px; }
.sk-card .sk { height: 20px; } .sk-card .sk:first-child { height: 34px; width: 60%; margin-bottom: 8px; } .sk-card .sk:last-child { height: 90px; }
.is-loading { opacity: .5; pointer-events: none; transition: opacity .15s; }
.sk-lists { padding: 64px 12px 0; align-items: flex-start; }
.sk-lists .sk { width: 272px; height: 220px; flex: none; opacity: .7; }
.sk-lists .sk:nth-child(2) { height: 140px; } .sk-lists .sk:nth-child(3) { height: 180px; } .sk-lists .sk:nth-child(4) { height: 96px; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack-sm { display: flex; flex-direction: column; gap: 6px; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.row.between { justify-content: space-between; }
.row.nowrap { flex-wrap: nowrap; }
.grow { flex: 1; min-width: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; } }

/* ---------- Knoppen & velden ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--ctrl-h); padding: 6px 13px; border-radius: var(--r-ctrl); border: 1px solid transparent; background: var(--surface-2); color: var(--ink); font-weight: 600; font-size: var(--fs-md); white-space: nowrap; text-decoration: none; }
.btn:hover { background: var(--surface-3); }
.btn.primary { background: var(--accent); color: var(--on-accent); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { background: var(--red); color: #fff; }
.btn.ghost { background: transparent; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.outline { background: transparent; border-color: var(--line); }
.btn.sm { min-height: var(--ctrl-h-sm); padding: 3px 9px; font-size: var(--fs-sm); }
.btn.block { width: 100%; justify-content: flex-start; }
.btn.block.center { justify-content: center; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.discord { background: #5865f2; color: #fff; }
.icon-btn { display: inline-grid; place-items: center; width: var(--ctrl-h); height: var(--ctrl-h); border-radius: var(--r-ctrl); border: 0; background: transparent; color: inherit; position: relative; }
.icon-btn:hover { background: rgba(127, 140, 160, .18); }
.icon-btn.sm { width: var(--ctrl-h-sm); height: var(--ctrl-h-sm); }
.icon-btn.active { color: var(--amber); }
.input, select.input, textarea.input { width: 100%; padding: 6px 10px; border-radius: var(--r-ctrl); border: 1px solid var(--line-strong); background: var(--surface); min-height: var(--ctrl-h); }
.input:focus { outline: 2px solid var(--signal); outline-offset: -1px; border-color: transparent; }
textarea.input { resize: vertical; line-height: 1.45; }
.label { display: flex; flex-direction: column; gap: 5px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
.label > .input, .label > select, .label > textarea { font-weight: 400; color: var(--ink); font-size: var(--fs-base); }
.check { display: flex; align-items: center; gap: 8px; font-size: var(--fs-md); cursor: pointer; }
.check input { width: 17px; height: 17px; accent-color: var(--signal); }
.kbd { font: var(--fs-2xs)/1 var(--mono); padding: 2px 5px; border-radius: var(--r-xs); border: 1px solid var(--line); background: var(--surface-2); }
/* ---------- Tabs en keuzeknoppen: twee vormen voor de hele app ----------
   .tabs  = tabs van een pagina, met een streep onder de gekozen tab (verderop in dit bestand).
   .seg   = keuzeknoppen in een vakje: een weergave, periode of soort kiezen binnen een paneel.
            .fill laat de knoppen de volle breedte verdelen. De chat-tabs zijn dezelfde vorm.
   De zijnavigatie van instellingen (.ps-tabs), de emoji-categorieën en de themakiezer zijn eigen onderdelen. */
.seg, .chat-tabs { display: inline-flex; background: var(--surface-2); padding: 3px; border-radius: var(--r-md); gap: 2px; }
.seg button, .chat-tab {
  border: 0; background: transparent; padding: 5px 11px; border-radius: var(--r-sm); font: inherit; font-weight: 600; font-size: var(--fs-sm);
  color: var(--ink-2); display: inline-flex; gap: 6px; align-items: center; cursor: pointer;
}
.seg button:hover, .chat-tab:hover { color: var(--ink); }
.seg button.on, .chat-tab.on { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.seg.fill, .chat-tabs, .cd-seg { display: flex; }
.seg.fill button, .chat-tab, .cd-seg button { flex: 1; justify-content: center; }

/* ---------- Knoppen en tags: gedeelde vormen ----------
   .btn en .icon-btn zijn de gewone knoppen (hoogte uit --ctrl-h). Daarnaast:
   - stille knoppen: zonder vlak tot je erover gaat (navigatie, onderbalk, timerbalk, "toevoegen" in lijsten);
   - ronde actieknoppen: één pictogram in een cirkel (timer starten, lid toevoegen);
   - labeltags: een vast kenmerk van een kaart (prioriteit, lijst in de agenda, groep in de lijstweergave).
   Kleur en maat staan bij het onderdeel zelf; de vorm staat enkel hier. */
.nav-btn, .dock-btn, .tb-btn, .tt-fav-go, .lv-add-btn, .lv-head-add { display: inline-flex; align-items: center; border: 0; border-radius: var(--r-md); font-weight: 600; cursor: pointer; }
.tb-btn { border: 1px solid transparent; }
.tt-go, .tb-go, .add-chip { border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.tt-go, .tb-go { color: var(--on-accent); }
.prio, .lv-pill { display: inline-flex; align-items: center; border-radius: var(--r-sm); font-size: var(--fs-xs); font-weight: 700; }

/* ---------- Badges en tellers: één vorm voor de hele app ----------
   Een badge is een korte status of eigenschap (abonnement, rol, soort bijlage). Kleur per soort staat bij de soort zelf;
   vorm en tekstgrootte staan enkel hier. */
.badge, .ps-tag, .tt-tag, .att-tag, .plan-badge, .pres-pill, .lb-badge, .sub-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 600; white-space: nowrap;
}
.plan-badge { font-family: var(--mono); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.pres-pill { gap: 5px; padding: 1px 8px 1px 6px; }
/* een teller is het bolletje met een aantal (meldingen, inbox, ongelezen) */
.notif-count, .dock-count, .sb-badge {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill);
  font-size: var(--fs-2xs); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}
.sb-badge { flex: none; }
.badge { background: var(--surface-2); color: var(--ink-2); }
.badge.red { background: var(--red-soft); color: var(--red-ink); } .badge.green { background: var(--mint-soft); color: var(--mint-ink); }
.badge.amber { background: var(--amber-soft); color: var(--amber-ink); } .badge.blue { background: var(--signal-soft); color: var(--signal); }
.divider { height: 1px; background: var(--line); margin: 6px 0; border: 0; }
.spinner { width: 26px; height: 26px; border: 3px solid var(--line); border-top-color: var(--signal); border-radius: 50%; animation: spin .8s linear infinite; margin: 30px auto; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty { text-align: center; padding: 48px 16px; color: var(--ink-3); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.empty h3 { color: var(--ink); }
.mention { color: var(--signal); font-weight: 600; background: var(--signal-soft); padding: 0 3px; border-radius: var(--r-xs); }

/* ---------- Avatars ---------- */
.avatar[style*="--signal"] { color: var(--signal-ink) !important; }
.avatar { display: inline-grid; place-items: center; border-radius: 50%; color: #fff; font-family: var(--mono); font-weight: 700; overflow: hidden; flex-shrink: 0; line-height: 1; user-select: none; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatars { display: flex; }
.avatars .avatar { margin-left: -6px; box-shadow: 0 0 0 2px var(--surface); }
.avatars .avatar:first-child { margin-left: 0; }
.presence-dot { position: relative; }
/* het bolletje steekt buiten de ronde avatar uit en ligt in een rij boven de volgende avatar */
.avatar.presence-dot, .avatar.online-dot { overflow: visible; }
.avatar.presence-dot img, .avatar.online-dot img { border-radius: 50%; }
.avatars .presence-dot::after, .avatars .online-dot::after { z-index: 1; }
.avatars .av-wrap.deco:has(> .presence-dot, > .online-dot) { z-index: 1; }
.presence-dot::after { content: ''; position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--pres-online); box-shadow: 0 0 0 2px var(--surface); }

/* ---------- Topbalk ---------- */
.brand { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-2xl); letter-spacing: -.02em; color: inherit; text-decoration: none; padding: 4px 8px; border-radius: var(--r-md); }
.brand > span:last-child, .sb-brand-name { text-transform: lowercase; }
/* Het merkteken: een kolom en twee kaarten die samen een "D" vormen, zoals Mark in de iOS-app. Maten in em: font-size is de breedte. */
.brand-mark { flex: none; width: 1em; height: 1em; font-size: 22px; display: grid; grid-template-columns: .27em 1fr; grid-template-rows: 1fr 1fr; gap: .09em; color: var(--signal); }
.brand-mark i { background: currentColor; border-radius: .07em; }
.brand-mark i:nth-child(1) { grid-row: 1 / 3; } .brand-mark i:nth-child(2) { border-top-right-radius: .36em; } .brand-mark i:nth-child(3) { border-bottom-right-radius: .36em; }
/* Eén keer per geladen pagina bouwt het merkteken zich op: de kolom veert omhoog, de kaarten vallen erin en er glijdt een glans over. */
@property --mark-sheen { syntax: '<number>'; inherits: false; initial-value: -1.8; }
.brand-mark i:nth-child(n+2) { --mark-x: .36em; --mark-dir: -1; }
.brand-mark i:nth-child(3) { --mark-y: -.545em; --mark-dir: 1; }
html:not(.mark-played) .brand-mark i, .boot .brand-mark i { background-image: linear-gradient(75deg, transparent 43%, rgb(255 255 255 / .6) 50%, transparent 57%); background-repeat: no-repeat; background-size: 3em 1em; background-position: calc(var(--mark-sheen) * 1em - var(--mark-x, 0em)) var(--mark-y, 0em); transform-origin: 50% 100%; animation: mark-col .52s cubic-bezier(.34, 1.56, .64, 1) both, mark-sheen .7s ease-in-out 1.2s both; }
html:not(.mark-played) .brand-mark i:nth-child(n+2), .boot .brand-mark i:nth-child(n+2) { transform-origin: center; animation-name: mark-card, mark-sheen; animation-duration: .56s, .7s; animation-delay: .24s, 1.2s; }
html:not(.mark-played) .brand-mark i:nth-child(3) { animation-delay: .44s, 1.2s; }
html .boot .brand-mark i { animation: mark-col .52s cubic-bezier(.34, 1.56, .64, 1) both, boot-sheen 1.8s ease-in-out .9s infinite; }
html .boot .brand-mark i:nth-child(n+2) { animation: mark-card .56s cubic-bezier(.34, 1.56, .64, 1) .2s both, boot-sheen 1.8s ease-in-out .9s infinite, boot-bob 1.8s ease-in-out .9s infinite; }
html .boot .brand-mark i:nth-child(3) { animation-delay: .36s, .9s, 1.05s; }
@keyframes mark-col { from { transform: scaleY(0); } }
@keyframes mark-card { from { transform: translate(.4em, calc(var(--mark-dir) * .16em)) rotate(calc(var(--mark-dir) * -10deg)); opacity: 0; } }
@keyframes mark-sheen { to { --mark-sheen: -.2; } }
@keyframes boot-sheen { 40%, 100% { --mark-sheen: -.2; } }
@keyframes boot-bob { 12% { translate: 0 -.05em; } 28%, 100% { translate: 0; } }
.nav-btn:hover { background: var(--surface-2); }
.nav-btn.on { background: var(--signal-soft); color: var(--signal); }
.searchbox { flex: 0 1 300px; position: relative; margin-left: auto; }
.searchbox input { width: 100%; height: 34px; padding: 0 10px 0 34px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-2); }
.searchbox .ic { position: absolute; left: 10px; top: 8px; opacity: .7; }
.notif-count { position: absolute; top: 3px; right: 3px; background: var(--red); color: #fff; }

/* ---------- Popovers, modals, toasts ---------- */
.popover { position: fixed; z-index: var(--z-popover); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--pop-shadow); max-height: calc(100vh - 16px); overflow: auto; }
.pop-head { display: flex; align-items: center; justify-content: center; position: relative; padding: 11px 40px; color: var(--ink-3); border-bottom: 1px solid var(--line); }
.pop-head .icon-btn { position: absolute; right: 6px; top: 5px; }
.pop-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.menu { display: flex; flex-direction: column; margin: -4px -4px; }
.menu > button, .menu > a { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: var(--r-sm); background: transparent; font-size: var(--fs-md); color: inherit; text-decoration: none; }
.menu > button:hover, .menu > a:hover { background: var(--surface-2); }
.menu > button.danger { color: var(--red-ink); }
.menu-title { color: var(--ink-3); padding: 8px 10px 4px; }
.overlay { position: fixed; inset: 0; background: rgba(10, 11, 13, .55); z-index: var(--z-modal); display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 48px 16px; }
.modal { background: var(--surface); border-radius: var(--r-panel); width: 100%; max-width: 560px; box-shadow: var(--pop-shadow), 0 0 0 1px var(--line); position: relative; animation: pop .16s ease-out; }
.modal-sm { max-width: 420px; }
.modal-wide { max-width: 880px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 0 20px; }
.modal-body { padding: 16px 20px 20px; }
@keyframes pop { from { transform: translateY(6px) scale(.985); opacity: 0; } }
/* Minder beweging: wat verschuift, draait of stuitert valt weg. Kleur en doorzichtigheid tonen nog dat iets gebeurde, en
   gaan snel. Wat laadt of loopt, pulseert rustig in plaats van te draaien of te schuiven. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-property: color, background-color, border-color, outline-color, opacity, box-shadow, fill, stroke !important; transition-duration: .12s !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .spinner, .sk, .sb-timer-dot, .boot .brand-mark { animation: rm-pulse 1.6s ease-in-out infinite !important; }
  .sk { background-position: 0 0; }
}
@keyframes rm-pulse { 50% { opacity: .4; } }
@media (max-width: 640px) { .overlay { padding: 0; } .modal { border-radius: 0; min-height: 100%; } }
#toasts { position: fixed; bottom: 18px; left: calc(50% + var(--nav) / 2); transform: translateX(-50%); z-index: var(--z-toast); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 8px; background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: var(--r-md); font-size: var(--fs-md); box-shadow: var(--pop-shadow); max-width: min(92vw, 520px); transition: opacity .3s, transform .3s; pointer-events: auto; }
.toast-error { background: var(--red); color: #fff; }
.toast-success .ic { color: #4ade80; }
.toast.out { opacity: 0; transform: translateY(8px); }

/* ---------- Inloggen ---------- */
.auth-wrap { flex: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, 1fr); min-height: 100vh; }
.auth-art { background: linear-gradient(135deg, var(--surface-2) 0%, var(--paper) 55%, #050506 100%); color: var(--ink); padding: 48px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; position: relative; }
.auth-art .brand-mark, .sidebar .brand-mark, .mobilebar .brand-mark { color: var(--accent); }
.auth-art { overflow: hidden; gap: 20px; }
.auth-art h1 { font-size: clamp(30px, 3.5vw, 46px); line-height: 1.04; max-width: 14ch; letter-spacing: -.03em; font-weight: 700; text-wrap: balance; }
.auth-art p { max-width: 40ch; color: var(--ink-2); margin-top: 14px; font-size: var(--fs-lg); }
.auth-art .hero-stage { max-width: min(540px, 54vh); margin-top: clamp(16px, 4vh, 40px); }
.auth-art ::selection { background: var(--accent); color: var(--on-accent); }
.auth-form { display: flex; align-items: center; justify-content: center; padding: 32px 20px; background: var(--surface); }
.auth-card { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 14px; }
.auth-card h2 { font-size: var(--fs-4xl); letter-spacing: -.025em; line-height: 1.1; text-wrap: balance; }
.auth-card > .page-over { margin-bottom: -8px; }
.auth-card .input { min-height: 44px; }
.auth-card .btn.block { min-height: 46px; font-size: var(--fs-lg); }
.auth-brand { display: none; position: absolute; top: 18px; left: 20px; color: var(--ink); text-decoration: none; }
.or { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: var(--fs-sm); }
.or::before, .or::after { content: ''; height: 1px; flex: 1; background: var(--line); }
.form-error { background: var(--red-soft); color: var(--red-ink); padding: 9px 12px; border-radius: var(--r-md); font-size: var(--fs-md); }
.form-ok { background: var(--mint-soft); color: var(--mint-ink); padding: 9px 12px; border-radius: var(--r-md); font-size: var(--fs-md); }
.code-input { font-size: var(--fs-4xl); letter-spacing: .35em; text-align: center; font-variant-numeric: tabular-nums; }
.qr { background: #fff; padding: 10px; border-radius: var(--r-lg); width: 200px; height: 200px; margin: 0 auto; }
.qr svg { width: 100%; height: 100%; display: block; }
.secret { font: 600 14px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--surface-2); padding: 8px 10px; border-radius: var(--r-md); word-break: break-all; text-align: center; letter-spacing: .08em; }
.codes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; font: 600 15px ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--surface-2); padding: 12px; border-radius: var(--r-lg); }
@media (max-width: 860px) { .auth-wrap { grid-template-columns: 1fr; } .auth-art { display: none; } .auth-brand { display: flex; } }

/* ---------- Pagina's ---------- */
.page { width: 100%; max-width: 1180px; margin: 0 auto; padding: 28px 20px 60px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head h1 { font-size: var(--fs-title); letter-spacing: -.03em; line-height: 1.1; }
.page-over { margin-bottom: 4px; color: var(--signal); }
.section { margin-bottom: 34px; }
.section-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--ink-3); }
.section-head h3 { color: var(--ink-3); }
.section-head > .ic { width: 14px; height: 14px; }
.section-head .badge { background: none; padding: 0; font-family: var(--mono); color: var(--ink-3); }
.board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.board-tile { position: relative; min-height: 84px; border-radius: var(--r-md); padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; overflow: hidden; text-align: left; }
.board-tile:hover { border-color: var(--line-strong); }
.board-tile b { font-size: var(--fs-base); font-weight: 600; line-height: 1.25; }
.tile-swatch { flex: none; width: 22px; height: 22px; border-radius: 5px; }
.board-tile .meta { display: flex; justify-content: space-between; align-items: center; min-height: 22px; font-family: var(--mono); font-size: var(--fs-2xs); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.board-tile .star { opacity: 0; color: var(--ink-3); }
.board-tile:hover .star, .board-tile .star.on { opacity: 1; }
.board-tile .star.on { color: var(--signal); }
.board-tile.new { background: transparent; border-style: dashed; color: var(--ink-3); align-items: center; justify-content: center; font-weight: 600; gap: 6px; flex-direction: row; }
.board-tile.new:hover { background: var(--surface-2); color: var(--ink); }
.bg-picker { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.bg-swatch { aspect-ratio: 4/3; border-radius: var(--r-sm); border: 2px solid transparent; cursor: pointer; }
.bg-swatch.on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--surface) inset; }
.list-rows { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.list-row .muted.small { margin-top: 2px; font-family: var(--mono); font-size: var(--fs-2xs); }
.list-row .swatch { width: 22px; border-radius: 5px; }
.list-row .badge { font-family: var(--mono); border-radius: var(--r-xs); }
.list-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line); text-decoration: none; color: inherit; }
.list-row:first-child { border-top: 0; }
.list-row:hover { background: var(--surface-2); }
.swatch { width: 28px; height: 22px; border-radius: var(--r-sm); flex-shrink: 0; }

/* ---------- Bord ---------- */
.board-page { flex: none; display: flex; flex-direction: column; min-height: 0; height: 100vh; height: 100dvh; margin-top: calc(-1 * var(--topbar)); padding-top: var(--topbar); background: var(--paper); }
/* Een bord staat op grafiet, zoals in de iOS-app; de kleur van het project is het vlakje naast de naam. Enkel een geüploade foto
   vult het bord (body.photo-board), en dan staan de balk en de knoppen er wit en doorschijnend op. */
.board-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.photo-board .board-head { color: #fff; background: rgba(10, 11, 13, .45); border-bottom-color: transparent; }
.board-swatch { flex: none; width: 22px; height: 22px; border-radius: 5px; }
.photo-board .board-swatch { display: none; }
.board-title { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; padding: 3px 8px; border-radius: var(--r-md); border: 0; background: transparent; color: inherit; letter-spacing: -.02em; max-width: 420px; }
.board-title:hover { background: var(--surface-2); }
.photo-board .board-title:hover { background: rgba(255, 255, 255, .16); }
.board-title-sep { color: var(--ink-3); opacity: .8; font-size: var(--fs-xl); margin: 0 -4px; }
.board-sub { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: var(--fs-xl); max-width: 300px; }
.board-sub span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-sub:disabled { cursor: default; background: transparent; opacity: 1; }
.guide-wrap { flex: 1; display: grid; place-items: center; padding: 24px 16px; overflow: auto; }
.guide { width: min(520px, 100%); background: var(--surface); color: var(--ink); border-radius: var(--r-2xl); padding: 26px 26px 20px; box-shadow: 0 18px 50px rgba(0, 0, 0, .28); display: flex; flex-direction: column; gap: 10px; }
.guide h2 { font-family: var(--font-display); font-size: var(--fs-2xl); margin: 0; }
.guide p { margin: 0; min-height: 66px; line-height: 1.5; }
.guide-kicker { color: var(--signal); }
.guide-ico { width: 52px; height: 52px; border-radius: var(--r-2xl); display: grid; place-items: center; background: var(--signal-soft); color: var(--signal); }
.guide-dots { display: flex; gap: 6px; margin: 4px 0; }
.guide-dots button { width: 22px; height: 6px; border-radius: 3px; border: 0; padding: 0; background: var(--line); }
.guide-dots button.on { background: var(--signal); }
.guide-foot { gap: 8px; flex-wrap: wrap; }
input.board-title { background: var(--surface); color: var(--ink); width: 320px; }
.board-head .btn { background: transparent; border-color: var(--line); }
.board-head .btn:hover { background: var(--surface-2); }
.board-head .btn.on { background: var(--signal-soft); border-color: transparent; color: var(--signal); }
.photo-board .board-head .btn { background: rgba(255, 255, 255, .18); border-color: transparent; color: #fff; }
.photo-board .board-head .btn:hover { background: rgba(255, 255, 255, .28); }
.photo-board .board-head .btn.on { background: #fff; color: #101113; }
.photo-board .board-head .icon-btn:hover { background: rgba(255, 255, 255, .18); }
.photo-board .board-head .seg { background: rgba(0, 0, 0, .3); }
.photo-board .board-head .seg button { color: rgba(255, 255, 255, .85); }
.photo-board .board-head .seg button.on { background: #fff; color: #101113; }
.board-head .avatars .avatar { box-shadow: 0 0 0 2px var(--paper); }
.photo-board .board-head .avatars .avatar { box-shadow: 0 0 0 2px rgba(0, 0, 0, .25); }
.board-body { flex: 1; min-height: 0; overflow: auto; position: relative; }
.lists { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px 24px; height: 100%; }
.list { flex: 0 0 280px; width: 280px; background: var(--list-bg); border-radius: var(--r-panel); display: flex; flex-direction: column; max-height: 100%; border: 1px solid var(--line); }
/* ingeklapt: altijd een smalle strook, ook bij Compact/Groot en op een telefoon */
.list.collapsed { flex-basis: 44px !important; width: 44px !important; cursor: pointer; }
.list.collapsed .list-head { writing-mode: vertical-rl; padding: 12px 6px; height: auto; }
.list.collapsed .list-cards, .list.collapsed .list-foot, .list.collapsed .list-head .icon-btn { display: none; }
.list-head { display: flex; align-items: center; gap: 6px; padding: 8px 6px 4px 14px; }
.list-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
.list.collapsed .list-dot { margin-bottom: 4px; }
.list-head .list-name { flex: 1; font-weight: 700; font-size: var(--fs-md); padding: 4px 6px; margin-left: -6px; border-radius: var(--r-sm); cursor: text; overflow-wrap: anywhere; }
.list-head input { flex: 1; font-weight: 700; font-size: var(--fs-md); }
.list-count { font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink-3); font-weight: 500; }
.list-count.over { color: var(--red-ink); }
.list-strip { height: 4px; border-radius: 12px 12px 0 0; }
.list-cards { flex: 1; overflow-y: auto; padding: 4px 8px; display: flex; flex-direction: column; gap: 8px; min-height: 8px; }
.list-foot { padding: 4px 8px 8px; }
.list-foot .btn { width: 100%; justify-content: flex-start; background: transparent; color: var(--ink-2); }
.list-foot .btn:hover { background: var(--surface-3); color: var(--ink); }
.list.add-list { background: transparent; border-style: dashed; color: var(--ink-3); padding: 6px; }
.list.add-list .btn { background: transparent; color: inherit; justify-content: flex-start; width: 100%; }
.photo-board .list.add-list:not(.open) { background: rgba(10, 11, 13, .45); border-color: transparent; color: #fff; }
.list.add-list.open { background: var(--list-bg); border-style: solid; color: var(--ink); }
.composer { display: flex; flex-direction: column; gap: 6px; }
.composer textarea { min-height: 62px; border: 0; box-shadow: var(--card-shadow); border-radius: var(--r-card); padding: 8px 10px; resize: none; }

.card { position: relative; background: var(--surface); border-radius: var(--r-card); box-shadow: 0 0 0 1px var(--line) inset; cursor: pointer; overflow: hidden; outline-offset: -2px; text-align: left; color: inherit; display: block; width: 100%; border: 0; padding: 0; font: inherit; }
.card { --card-ring: var(--signal); }
.card.card-ghost { opacity: .65; pointer-events: none; }
.card.has-accent { --card-ring: var(--card-accent); }
.card:hover { box-shadow: 0 0 0 2px var(--card-ring) inset; }
.card.is-template { box-shadow: none; outline: 1px dashed var(--ink-3); outline-offset: -1px; }
.card-cover { height: 34px; }
.card-cover.img { height: auto; max-height: 220px; background: var(--surface-2); display: flex; justify-content: center; }
.card-cover.img img { width: 100%; max-height: 220px; object-fit: cover; display: block; }
.card.full-cover { color: #fff; }
.card.full-cover .card-title { font-weight: 700; font-size: var(--fs-base); }
.card-inner { padding: 9px 11px 10px; display: flex; flex-direction: column; gap: 7px; }
.card-labels { display: flex; flex-wrap: wrap; gap: 5px; }
.lbl { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: var(--r-xs); border: 1px solid var(--line); background: transparent; color: var(--ink-2); font-family: var(--mono); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lbl::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--lbl, var(--ink-3)); }
.card-labels.compact .lbl { height: 4px; min-width: 22px; padding: 0; border: 0; border-radius: 2px; background: var(--lbl); font-size: 0; }
.card-labels.compact .lbl::before { display: none; }
.card-title { font-size: var(--fs-md); font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.card-num { color: var(--ink-3); font-family: var(--mono); font-weight: 500; font-size: var(--fs-xs); margin-right: 5px; }
.card-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-family: var(--mono); font-size: var(--fs-2xs); font-weight: 500; color: var(--ink-3); }
.card-badges > span { display: inline-flex; align-items: center; gap: 3px; }
.card-badges .due { border-radius: var(--r-xs); font-weight: 600; }
.card-badges .due:is(.overdue, .soon, .done) { padding: 2px 6px; }
.due.overdue { background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red-ink); }
.due.soon { background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber-ink); }
.due.done { background: color-mix(in srgb, var(--mint) 14%, transparent); color: var(--mint-ink); }
.card-badges .done-checks { color: var(--mint-ink); font-weight: 600; }
.card-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; }
.card-foot .avatars { margin-left: auto; }
.card-fields { display: flex; flex-wrap: wrap; gap: 4px; }
.card-fields .badge { font-size: var(--fs-xs); }
.card-viewers { position: absolute; top: 6px; right: 6px; display: flex; }
.card-quick { position: absolute; top: 4px; right: 4px; opacity: 0; background: var(--surface); border-radius: var(--r-sm); }
.card:hover .card-quick, .card:focus-visible .card-quick { opacity: .95; }
.sortable-ghost { opacity: .35; }
.sortable-drag { transform: rotate(2.5deg); box-shadow: var(--pop-shadow) !important; }
.card.dim { opacity: .3; }

/* ---------- Kaartvenster ---------- */
.card-modal { max-width: 860px; }
.card-modal .cm-cover { height: 110px; border-radius: var(--r-panel) var(--r-panel) 0 0; display: flex; justify-content: center; background: var(--surface-2); overflow: hidden; }
.card-modal .cm-cover img { max-height: 160px; object-fit: contain; }
.card-modal .cm-cover.img { height: 160px; }
.cm-top { display: flex; gap: 12px; padding: 18px 20px 0; align-items: flex-start; }
.cm-title { flex: 1; font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 700; letter-spacing: -.025em; border: 0; background: transparent; resize: none; padding: 3px 6px; margin-left: -6px; border-radius: var(--r-sm); line-height: 1.25; overflow: hidden; width: 100%; }
.cm-title:focus { background: var(--surface); outline: 2px solid var(--signal); }
.cm-sub { padding: 2px 20px 0 50px; color: var(--ink-3); font-size: var(--fs-md); }
.cm-sub button { border: 0; background: none; padding: 0; color: var(--ink-2); text-decoration: underline; font-size: inherit; }
.cm-grid { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 22px; }
.cm-main { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.cm-side { display: flex; flex-direction: column; gap: 6px; }
.cm-side .menu-title { padding: 6px 0 2px; }
.cm-side .btn { justify-content: flex-start; width: 100%; font-weight: 500; }
@media (max-width: 700px) { .cm-grid { grid-template-columns: 1fr; } .cm-side { order: -1; display: grid; grid-template-columns: 1fr 1fr; } .cm-sub { padding-left: 20px; } }
.cm-section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cm-section-head h3 { flex: 1; color: var(--ink-3); }
.cm-section-head > .ic { width: 15px; height: 15px; color: var(--ink-3); }
.cm-meta { display: flex; flex-wrap: wrap; gap: 18px; }
.cm-meta-block .menu-title { padding: 0 0 4px; }
.cm-meta-block .row { gap: 4px; }
.lbl.big { height: 30px; padding: 0 10px; font-size: var(--fs-xs); border-radius: var(--r-sm); min-width: 48px; cursor: pointer; }
.lbl.big::before { width: 8px; height: 8px; }
button.lbl { border: 1px solid var(--line) !important; }
.add-chip { width: 32px; height: 32px; background: var(--surface-2); }
.add-chip.sq { border-radius: var(--r-sm); width: 32px; height: 30px; }
.due-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: var(--r-sm); background: var(--surface-2); border: 0; font-weight: 500; }
.due-chip input { width: 16px; height: 16px; accent-color: var(--mint); }
.desc-view { cursor: pointer; border-radius: var(--r-md); min-height: 40px; }
.desc-view.empty-desc { background: var(--surface-2); padding: 12px; color: var(--ink-3); }
.md { overflow-wrap: anywhere; }
.md > :first-child { margin-top: 0; } .md > :last-child { margin-bottom: 0; }
.md p, .md ul, .md ol, .md pre, .md blockquote { margin: 0 0 .6em; }
.md p, .md li, .md blockquote { max-width: 75ch; }
.md code { background: var(--surface-2); padding: 1px 5px; border-radius: var(--r-xs); font-size: .9em; }
.md pre { background: var(--surface-2); padding: 10px 12px; border-radius: var(--r-md); overflow-x: auto; }
.md pre code { background: none; padding: 0; }
.md img { max-width: 100%; border-radius: var(--r-sm); }
.md blockquote { border-left: 3px solid var(--line); padding-left: 10px; color: var(--ink-2); }
.md h1, .md h2, .md h3 { margin: .6em 0 .3em; font-size: 1.1em; }
.md table { border-collapse: collapse; } .md td, .md th { border: 1px solid var(--line); padding: 4px 8px; }
.md hr { border: 0; border-top: 1px solid var(--line); margin: .9em 0; }
.md li.task { list-style: none; position: relative; }
.md li.task::before { content: ''; position: absolute; left: -23px; top: .22em; width: 15px; height: 15px; box-sizing: border-box; border: 1.5px solid var(--ink-3); border-radius: var(--r-xs); }
.md li.task.done::before { border-color: var(--signal); background: var(--signal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.4 4.6-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .md li.task.done::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.4 4.6-5' fill='none' stroke='%230a0b0d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } }
:root[data-theme="dark"] .md li.task.done::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.4 4.6-5' fill='none' stroke='%230a0b0d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.md li.task.done { color: var(--ink-3); }
.desc-view h1, .rte-area h1 { font-size: 1.45em; } .desc-view h2, .rte-area h2 { font-size: 1.25em; }
.rte { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.rte:focus-within { border-color: var(--signal); box-shadow: 0 0 0 1px var(--signal); }
.rte-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px 6px; border-bottom: 1px solid var(--line); border-radius: 10px 10px 0 0; background: var(--surface); position: sticky; top: 0; z-index: 2; }
.rte-bar button { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-2); font: inherit; font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; }
.rte-bar button:hover { background: var(--surface-2); }
.rte-bar button.on { background: var(--signal-soft); color: var(--signal); }
.rte-bar .rte-italic { font-style: italic; } .rte-bar .rte-strike { text-decoration: line-through; }
.rte-sep { width: 1px; height: 18px; margin: 0 4px; background: var(--line); }
.rte-area { min-height: 140px; padding: 12px 14px; outline: none; }
.rte.compact .rte-area { min-height: 38px; padding: 8px 12px; }
.rte.compact:not(.open) .rte-bar { display: none; }
.rte-area { position: relative; }
.rte-area.is-empty::before { content: attr(data-placeholder); position: absolute; left: 14px; right: 14px; color: var(--ink-3); pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rte.compact .rte-area.is-empty::before { left: 12px; right: 12px; }
.rte-area li.task::before { cursor: pointer; }
.rte-area pre { white-space: pre-wrap; }
.rte-area td, .rte-area th { min-width: 70px; }
.rte-slash { width: 230px; padding: 6px; max-height: 300px; }
.rte-slash .menu { margin: 0; }
.rte-slash .menu > button.on { background: var(--surface-2); }
.rte-glyph { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink-2); font-size: var(--fs-xs); font-weight: 700; flex: none; }
.progress { height: 8px; border-radius: var(--r-xs); background: var(--surface-3); overflow: hidden; flex: 1; }
.progress > i { display: block; height: 100%; background: var(--signal); border-radius: var(--r-xs); transition: width .2s; }
.progress.done > i { background: var(--mint); }
.cl-item { display: flex; align-items: flex-start; gap: 8px; padding: 4px 6px; margin: 0 -6px; border-radius: var(--r-sm); }
.cl-item:hover { background: var(--surface-2); }
.cl-item input[type=checkbox] { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--mint); flex-shrink: 0; }
.cl-item .cl-text { flex: 1; cursor: text; overflow-wrap: anywhere; }
.cl-item.checked .cl-text { text-decoration: line-through; color: var(--ink-3); }
.cl-item .cl-tools { display: flex; gap: 2px; opacity: 0; align-items: center; }
.cl-item:hover .cl-tools, .cl-item:focus-within .cl-tools { opacity: 1; }
.att { display: flex; gap: 12px; align-items: center; padding: 6px; margin: 0 -6px; border-radius: var(--r-md); }
.att:hover { background: var(--surface-2); }
.att-thumb { width: 88px; height: 62px; border-radius: var(--r-sm); background: var(--surface-3); display: grid; place-items: center; overflow: hidden; flex-shrink: 0; font-weight: 700; color: var(--ink-3); font-size: var(--fs-sm); text-decoration: none; }
.att-thumb img { width: 100%; height: 100%; object-fit: cover; }
.att-info { flex: 1; min-width: 0; }
.att-info b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-info .row button { border: 0; background: none; padding: 0; text-decoration: underline; color: var(--ink-3); font-size: var(--fs-sm); }
.dropzone { border: 2px dashed var(--signal); border-radius: var(--r-lg); padding: 18px; text-align: center; color: var(--signal); background: var(--signal-soft); }
.comment { display: flex; gap: 10px; }
.comment-body { flex: 1; min-width: 0; }
.comment-bubble { background: var(--surface); border: 1px solid var(--line); border-radius: 0 10px 10px 10px; padding: 8px 11px; margin-top: 3px; }
.comment-actions { display: flex; gap: 10px; align-items: center; font-size: var(--fs-sm); color: var(--ink-3); margin-top: 3px; flex-wrap: wrap; }
.comment-actions button { border: 0; background: none; padding: 0; color: var(--ink-3); text-decoration: underline; font-size: inherit; }
.reaction { border: 1px solid var(--line) !important; border-radius: var(--r-pill); padding: 0 7px !important; text-decoration: none !important; background: var(--surface) !important; }
.reaction.mine { border-color: var(--signal) !important; background: var(--signal-soft) !important; color: var(--signal) !important; }
.activity-item { display: flex; gap: 10px; font-size: var(--fs-md); align-items: flex-start; }
.activity-item .muted { font-size: var(--fs-sm); }
.mention-list { position: absolute; z-index: 95; }
.color-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.color-grid button { height: 30px; border-radius: var(--r-sm); border: 2px solid transparent; }
.color-grid button.on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--surface) inset; }
.pick-row { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: var(--r-sm); cursor: pointer; border: 0; background: transparent; width: 100%; text-align: left; }
.pick-row:hover { background: var(--surface-2); }
.pick-row .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-row .lbl { flex: 1; height: 30px; font-size: var(--fs-sm); border-radius: var(--r-sm); }

/* ---------- Filter & zijpaneel ---------- */
.drawer { position: fixed; top: var(--topbar); right: 0; bottom: 0; width: 360px; max-width: 100vw; background: var(--surface); box-shadow: var(--pop-shadow); z-index: var(--z-drawer); display: flex; flex-direction: column; animation: slidein .18s ease-out; }
@keyframes slidein { from { transform: translateX(20px); opacity: 0; } }
.drawer-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.drawer-head h3 { flex: 1; }
.drawer-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.filter-active { background: var(--signal-soft) !important; border-color: transparent !important; color: var(--signal) !important; }
.photo-board .filter-active { background: #fff !important; color: #101113 !important; }

/* ---------- Tabellen (beheer, tabelweergave) ---------- */
.table-wrap { overflow-x: auto; background: var(--surface); border-radius: var(--r-lg); border: 1px solid var(--line); }
table.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.tbl th { text-align: left; font-weight: 700; font-size: var(--fs-sm); color: var(--ink-3); padding: 9px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface); position: sticky; top: 0; cursor: default; }
.tbl th.sortable { cursor: pointer; }
.tbl td { padding: 9px 12px; border-top: 1px solid var(--line); vertical-align: middle; }
.tbl tr:hover td { background: var(--surface-2); }
.tbl tr.clickable { cursor: pointer; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.tabs button { border: 0; background: none; padding: 9px 12px; font-weight: 600; color: var(--ink-3); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.tabs button.on { color: var(--signal); border-bottom-color: var(--signal); }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px; }
.panel + .panel { margin-top: 14px; }
.panel h3 { margin-bottom: 4px; }
.public-main .panel > h2 { font-size: var(--fs-xl); margin-bottom: 4px; }
.setting { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.setting:first-of-type { border-top: 0; }
.setting .txt { flex: 1; }
.setting .txt b { display: block; }
.switch { position: relative; display: inline-block; vertical-align: middle; width: 42px; height: 24px; flex-shrink: 0; }
.switch input { opacity: 0; width: 100%; height: 100%; position: absolute; margin: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; background: var(--line-strong); border-radius: var(--r-xl); transition: background .15s; }
.switch span::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform .15s; }
.switch input:checked + span { background: var(--signal); }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { outline: 2px solid var(--signal); outline-offset: 2px; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px; }
.stat b { display: block; font-family: var(--font-display); font-size: var(--fs-4xl); }

/* ---------- Kaartweergave ---------- */
.map-wrap { position: absolute; inset: 0; }
.leaflet-container { font: inherit; }

/* ---------- Mobiel ---------- */
@media (max-width: 640px) {
  .list { flex-basis: 86vw; width: 86vw; }
  .board-head { padding: 8px 10px; }
  .page { padding: 18px 14px 50px; }
}

.modal.dropping { outline: 3px dashed var(--signal); outline-offset: -8px; }
.main { flex: 1; }

.setting > select.input, .setting > input.input, .setting > .input { width: min(320px, 48%); flex: 0 0 auto; }
.setting .txt { min-width: 180px; }
@media (max-width: 640px) { .setting { flex-direction: column; } .setting > select.input, .setting > input.input, .setting > .input { width: 100%; } }
.modal:focus { outline: none; }

/* eigen achtergrondkleur */
.bg-swatch.bg-custom { position: relative; display: grid; place-items: center; cursor: pointer; background: repeating-conic-gradient(#e5e7eb 0 25%, #f8fafc 0 50%) 50% / 12px 12px; color: var(--ink-2); overflow: hidden; }
.bg-swatch.bg-custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.site-bg-picker { margin-top: 8px; }
.site-bg-picker .bg-picker { max-width: 360px; }

/* back-ups */
.bk-targets { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.bk-target { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-lg); flex-wrap: wrap; }
.bk-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 280px; }
.bk-main .muted { overflow-wrap: anywhere; }
.bk-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bk-keep { width: 70px; padding: 4px 8px; }
.bk-error { color: var(--red); }
.bk-choose { display: flex; flex-direction: column; gap: 6px; }
.bk-choice { display: flex; gap: 12px; align-items: center; text-align: left; padding: 12px; }
.bk-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.bk-uri { flex: 1; min-width: 0; overflow-wrap: anywhere; padding: 6px 8px; background: var(--surface-2); border-radius: var(--r-sm); font-size: var(--fs-sm); }
.badge .spinner { width: 10px; height: 10px; }
.code-block { background: var(--surface-2); padding: 10px 12px; border-radius: var(--r-md); overflow-x: auto; margin: 0; font-size: var(--fs-sm); white-space: pre; }
.bk-actions input.bk-keep { width: 72px; min-width: 72px; height: 32px; flex: none; appearance: auto; }

/* voettekst */
.site-footer { text-align: center; padding: 18px 16px 22px; font-size: var(--fs-sm); color: var(--ink-3); }
.site-footer a, .auth-foot a { color: inherit; font-weight: 600; text-decoration: none; }
.site-footer b, .auth-foot b { font-weight: 600; }
.site-footer a:hover, .auth-foot a:hover { text-decoration: underline; }
.auth-foot { display: flex; gap: 8px; flex-wrap: wrap; font-size: var(--fs-sm); opacity: .8; }
#app { display: flex; flex-direction: column; min-height: 100vh; }

/* werkruimtes en abonnementen */
.plan-badge { height: 20px; background: var(--surface-3); color: var(--ink-2); }
.plan-badge.plan-standard { background: var(--signal-soft); color: var(--signal); }
.plan-badge.plan-premium { background: var(--accent); color: var(--on-accent); }
.plan-badge.plan-unlimited { background: var(--mint-soft); color: var(--mint-ink); }
.plan-lock { margin-left: auto; color: var(--ink-3); display: inline-flex; }
.ws-head { flex-wrap: wrap; gap: 8px; }
.ws-head h3 { margin: 0; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-members { display: flex; flex-direction: column; }
.ws-member { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.ws-member:first-child { border-top: 0; }
.ws-member .input.sm { width: auto; padding: 4px 8px; height: 32px; }
.invite-result { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding: 12px; border-radius: var(--r-lg); background: var(--surface-2); }
.price-note { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin: 0 0 16px; padding: 12px 16px; border-radius: var(--r-lg); background: var(--amber-soft); color: var(--amber-ink); font-size: var(--fs-lg); font-weight: 600; }
.price-note svg { flex: none; }
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; align-items: start; }
.price-card { border: 1px solid var(--line); border-radius: var(--r-2xl); padding: 18px; background: var(--surface); display: flex; flex-direction: column; gap: 10px; }
.price-card.featured { border-color: var(--signal); box-shadow: 0 0 0 1px var(--signal); }
.price-card h2 { margin: 0; font-family: var(--font-display); }
.price-card .price b { font-size: var(--fs-4xl); font-family: var(--font-display); }
.price-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: var(--fs-md); }
.price-list li { display: flex; gap: 8px; align-items: flex-start; }
.price-list li svg { flex: none; margin-top: 3px; color: var(--mint); }
.price-list li.off { color: var(--ink-3); }
.price-list li.off svg { color: var(--ink-3); }
.upgrade { text-align: center; }
.upgrade .row.end { justify-content: center; }
.upgrade-icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto; background: var(--signal-soft); color: var(--signal); }
.join-card { max-width: 460px; margin: 40px auto; text-align: center; display: flex; flex-direction: column; gap: 12px; }
.row.center { justify-content: center; }
.public-bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; border-bottom: 1px solid var(--line); background: var(--surface); }
.public-bar .brand { color: var(--ink); }
.danger-zone { border-color: color-mix(in srgb, var(--red) 40%, var(--line)); }
.locked-opt { opacity: .7; }

/* publieke startpagina */
.lp-bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px clamp(16px, 4vw, 48px); background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.lp-bar .brand { color: var(--ink); }
.lp-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lp-nav > a:not(.btn) { color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: var(--fs-md); padding: 6px 10px; border-radius: var(--r-md); }
.lp-nav > a:not(.btn):hover { background: var(--surface-2); }
.lp { flex: 1; }
.lp-hero { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 78% 40%, var(--surface-2) 0%, var(--paper) 58%); color: var(--ink); border-bottom: 1px solid var(--line); color-scheme: dark; }
.lp-hero-in { display: grid; grid-template-columns: 1fr 1.08fr; gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(40px, 7vw, 88px) clamp(16px, 4vw, 48px); max-width: 1240px; margin: 0 auto; }
.lp-hero ::selection { background: var(--accent); color: var(--on-accent); }
.lp-eyebrow { color: var(--signal); margin: 0 0 14px; }
.lp-hero h1 { font-family: var(--font-display); font-size: clamp(40px, 5.8vw, 68px); font-weight: 700; line-height: 1; letter-spacing: -.035em; margin: 0 0 20px; text-wrap: balance; }
.lp-lead { font-size: clamp(16px, 1.6vw, 19px); color: var(--ink-2); max-width: 34em; margin: 0 0 26px; }
.lp-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.lp-cta.center { justify-content: center; }
.btn.lg { min-height: 48px; padding: 12px 22px; font-size: var(--fs-lg); }
.lp-note { color: var(--ink-3); font-size: var(--fs-sm); margin-top: 14px; }
/* Het voorbeeldbord is altijd grafiet, zoals het app-icoon: limoen op donker. */
/* Het beeld naast de kop: het merkteken in 3D voor een klein bord. Alle maten volgen de breedte van het beeld (cqw). */
.hero-stage { position: relative; width: 100%; container-type: inline-size; aspect-ratio: 1 / .8; perspective: 1400px; --px: 0; --py: 0; }
.hero-floor { position: absolute; inset: 46% -30% -22%; background: linear-gradient(rgb(255 255 255 / .07) 1px, transparent 1px) 0 0 / 100% 44px, linear-gradient(90deg, rgb(255 255 255 / .07) 1px, transparent 1px) 0 0 / 44px 100%; transform: perspective(520px) rotateX(64deg); transform-origin: 50% 0; mask-image: radial-gradient(60% 75% at 50% 30%, #000 0%, transparent 100%); }
.hero-glow { position: absolute; left: -12%; bottom: -4%; width: 44%; height: 18%; background: radial-gradient(closest-side, rgb(200 247 81 / .3), transparent); filter: blur(10px); translate: calc(var(--px) * -10px) 0; transition: translate .5s cubic-bezier(.16, 1, .3, 1); }
.hero-scene { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(calc(7deg - var(--py) * 7deg)) rotateY(calc(-15deg + var(--px) * 9deg)); transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.hero-win { position: absolute; left: 7%; top: 0; width: 97%; font-size: max(7px, 2.1cqw); transform: translateZ(-8cqw); background: var(--paper); border: 1px solid var(--line); border-radius: 1.3em; box-shadow: 0 3.4em 5em -2.6em rgb(0 0 0 / .85), 0 0 0 1px rgb(255 255 255 / .03); overflow: hidden; }
.hw-bar { display: flex; align-items: center; gap: .6em; padding: .9em 1.1em; border-bottom: 1px solid var(--line); color: var(--ink-3); font-size: 1.1em; }
.hw-bar b { color: var(--ink); font-weight: 650; letter-spacing: -.01em; }
.hw-swatch { width: 1.1em; height: 1.1em; border-radius: .3em; background: #2f5bea; }
.hw-people { margin-left: auto; display: flex; }
.hw-people i { width: 2em; height: 2em; margin-left: -.5em; border-radius: 50%; display: grid; place-items: center; font: 700 .62em/1 var(--mono); color: #fff; background: #1f9d8b; box-shadow: 0 0 0 .2em var(--paper); }
.hw-people i:nth-child(2) { background: #c98a1b; } .hw-people i:nth-child(3) { background: #b7479e; }
.hw-lists { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: .8em; padding: 1em; }
.hw-list { background: var(--list-bg); border: 1px solid var(--line); border-radius: .9em; padding: .7em; min-height: 23em; }
.hw-list > b { display: flex; align-items: center; gap: .5em; padding: .15em .2em .65em; font-size: 1em; font-weight: 650; color: var(--ink); }
.hw-list > b i { width: .5em; height: .5em; border-radius: 50%; background: var(--ink-3); }
.hw-list.is-done-list > b i { background: var(--accent); }
.hw-n { margin-left: auto; font: 500 .85em/1 var(--mono); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.hw-cards { display: flex; flex-direction: column; gap: .6em; }
.hw-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .55em; padding: .75em; background: var(--surface); border-radius: .7em; box-shadow: inset 0 0 0 1px var(--line); }
.hw-card.is-moving { z-index: 2; box-shadow: inset 0 0 0 1px var(--line-strong), 0 1.4em 2em -.8em rgb(0 0 0 / .9); }
.hw-lbl { display: inline-flex; align-items: center; gap: .45em; padding: .28em .55em; border: 1px solid var(--line); border-radius: .4em; font: 600 .68em/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.hw-lbl::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: var(--lbl); }
.hw-title { display: flex; gap: .5em; font-size: .98em; font-weight: 500; line-height: 1.25; color: var(--ink); }
.hw-check { flex: none; width: 1.25em; height: 1.25em; margin-top: .02em; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line-strong); color: transparent; transition: background-color .3s, color .3s, box-shadow .3s; }
.hw-check svg { width: .8em; height: .8em; }
.hw-card.is-done .hw-check { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.hw-card.is-done .hw-title > span:last-child { color: var(--ink-3); }
.hw-card small { font: 500 .75em/1 var(--mono); color: var(--ink-3); }
.hw-tabs { display: flex; gap: .2em; margin-left: .5em; }
.hw-tab { display: flex; align-items: center; gap: .4em; padding: .35em .5em; border-radius: .5em; font-size: .88em; font-weight: 600; color: var(--ink-3); transition: color .3s, background-color .3s; }
.hw-tab svg { width: 1.15em; height: 1.15em; }
.hw-tab > span { display: none; }
.hw-tab.is-on { color: var(--ink); background: var(--surface-2); box-shadow: inset 0 -1px 0 var(--accent); }
.hw-tab.is-on > span { display: inline; }
.hw-views { position: relative; }
.hw-pane { transition: opacity .45s cubic-bezier(.16, 1, .3, 1), translate .45s cubic-bezier(.16, 1, .3, 1), visibility 0s; }
.hw-pane:not(.hw-pane-board) { position: absolute; inset: 0; padding: 1em; }
.hw-pane:not(.is-on) { opacity: 0; translate: 0 .8em; visibility: hidden; transition-delay: 0s, 0s, .45s; }
.hw-cal { display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: auto repeat(3, 1fr); gap: .35em; }
.hw-cal > b { padding: 0 .4em .2em; font: 600 .68em/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.hw-day { min-width: 0; overflow: hidden; padding: .45em; display: flex; flex-direction: column; gap: .3em; background: var(--list-bg); border: 1px solid var(--line); border-radius: .6em; }
.hw-day > span { font: 600 .78em/1 var(--mono); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.hw-day.is-today > span { align-self: flex-start; padding: .25em .4em; margin: -.25em -.4em; border-radius: .5em; background: var(--accent); color: var(--on-accent); }
.hw-day > i { padding: .35em .45em; border-radius: .4em; font-style: normal; font-size: .72em; font-weight: 600; line-height: 1.15; color: var(--ink); background: color-mix(in srgb, var(--lbl) 26%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lbl) 45%, transparent); overflow-wrap: anywhere; }
.hw-pane.is-on .hw-day > i { animation: hw-pop .5s cubic-bezier(.16, 1, .3, 1) calc(.15s + var(--d)) backwards; }
.hw-tl { display: flex; flex-direction: column; }
.hw-tl-days { display: grid; grid-template-columns: repeat(14, 1fr); padding-bottom: .6em; border-bottom: 1px solid var(--line); }
.hw-tl-days b { text-align: center; font: 600 .72em/1.6 var(--mono); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.hw-tl-days b.is-today { color: var(--accent); }
.hw-tl-rows { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; background: linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / calc(100% / 14) 100%; }
.hw-tl-now { position: absolute; top: 0; bottom: 0; left: calc(100% / 14 * 3.5); width: 1px; background: var(--accent); }
.hw-tl-row { display: grid; grid-template-columns: repeat(14, 1fr); }
.hw-tl-row span { padding: .6em .7em; border-radius: .5em; font-size: .78em; font-weight: 600; line-height: 1; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: color-mix(in srgb, var(--lbl) 30%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lbl) 55%, transparent); transform-origin: 0 50%; }
.hw-pane.is-on .hw-tl-row span { animation: hw-grow .7s cubic-bezier(.16, 1, .3, 1) calc(.15s + var(--d)) backwards; }
.hw-dash { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; gap: .8em; }
.hw-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: .8em; }
.hw-stats > div, .hw-chart { padding: .8em .9em; background: var(--list-bg); border: 1px solid var(--line); border-radius: .8em; }
.hw-stats b { display: block; font-size: 1.9em; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.hw-stats span, .hw-chart small, .hw-bars span { font: 600 .66em/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.hw-stats span { display: block; margin-top: .7em; }
.hw-chart { min-height: 0; display: flex; flex-direction: column; gap: .8em; }
.hw-bars { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: .6em; }
.hw-bars > div { min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: .5em; }
.hw-bars i { border-radius: .35em .35em .1em .1em; background: var(--surface-3); transform-origin: 50% 100%; }
.hw-bars i.is-done { background: var(--accent); }
.hw-bars span { font-size: .52em; letter-spacing: .04em; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hw-pane.is-on .hw-bars i { animation: hw-rise .7s cubic-bezier(.16, 1, .3, 1) calc(.15s + var(--d)) backwards; }
.hw-line { flex: 1; min-height: 0; }
.hw-line svg, .hw-wb > svg { width: 100%; height: 100%; overflow: visible; }
.hw-line path { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.hw-pane.is-on .hw-line svg { animation: hw-wipe 1.3s cubic-bezier(.16, 1, .3, 1) .2s backwards; }
.hw-wb { background: radial-gradient(circle, rgb(255 255 255 / .11) 1px, transparent 1.5px) 0 0 / 1.6em 1.6em; }
.hw-wb > svg { position: absolute; inset: 0; }
.hw-wb path { fill: none; stroke: var(--ink-2); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.hw-pane.is-on .hw-wb path { animation: hw-pop .6s cubic-bezier(.16, 1, .3, 1) .7s backwards; transform-box: fill-box; transform-origin: center; }
.hw-pane.is-on .hw-wb path + path { animation-delay: 1.1s; }
.hw-note { position: absolute; width: 10.5em; padding: .9em; border-radius: .3em; font-size: .92em; font-weight: 600; line-height: 1.25; color: #14160f; box-shadow: 0 .9em 1.2em -.6em rgb(0 0 0 / .7); }
.hw-note.n1 { left: 8%; top: 14%; rotate: -4deg; background: #f2c94c; --d: 0s; }
.hw-note.n2 { left: 58%; top: 26%; rotate: 3deg; background: #c8f751; --d: .25s; }
.hw-note.n3 { left: 24%; top: 62%; rotate: 2deg; background: #8fb8ff; --d: .5s; }
.hw-pane.is-on .hw-note { animation: hw-pop .55s cubic-bezier(.16, 1, .3, 1) calc(.15s + var(--d)) backwards; }
.hw-cursor { position: absolute; left: 62%; top: 60%; display: flex; align-items: flex-start; color: var(--c-purple); }
.hw-cursor svg { width: 1.3em; height: 1.3em; fill: currentColor; }
.hw-cursor b { margin: .9em 0 0 -.1em; padding: .3em .5em; border-radius: .4em; font: 700 .68em/1 var(--mono); background: var(--c-purple); color: #14101f; }
.hw-pane.is-on .hw-cursor { animation: hw-cursor 3.6s cubic-bezier(.45, 0, .2, 1) .3s both; }
@keyframes hw-pop { from { opacity: 0; scale: .8; } }
@keyframes hw-grow { from { opacity: 0; transform: scaleX(0); } }
@keyframes hw-rise { from { transform: scaleY(0); } }
@keyframes hw-wipe { from { clip-path: inset(-10% 100% -10% 0); } to { clip-path: inset(-10% -5% -10% 0); } }
@keyframes hw-cursor { from { translate: 9em 6em; opacity: 0; } 25% { opacity: 1; } 60% { translate: 0 0; } to { translate: -6.5em -1.6em; opacity: 1; } }

.hero-mark { position: absolute; left: 0; bottom: 3%; width: 1em; height: 1em; font-size: 31cqw; transform-style: preserve-3d; transform: translateZ(17cqw) rotateY(30deg) rotateX(-6deg); animation: hm-sway 11s ease-in-out infinite; --step: .0135em; }
.hm-part { position: absolute; transform-style: preserve-3d; animation: hm-in 1.1s cubic-bezier(.16, 1, .3, 1) backwards, hm-float 6s ease-in-out 1.2s infinite; }
.hm-part.col { left: 0; top: 0; width: .27em; height: 1em; --r: .07em; animation-name: hm-in, none; }
.hm-part.c1 { left: .36em; top: 0; width: .64em; height: .455em; --r: .07em .36em .07em .07em; animation-delay: .12s, 1.3s; }
.hm-part.c2 { left: .36em; top: .545em; width: .64em; height: .455em; --r: .07em .07em .36em .07em; animation-delay: .24s, 4.3s; }
.hm-part i { position: absolute; inset: 0; border-radius: var(--r); background: #7da31c; transform: translateZ(calc(var(--i) * var(--step) * -1)); }
.hm-part i:nth-child(n+9) { background: #5c7a12; }
.hm-part i:last-child { background: #2c3b08; box-shadow: 0 .5em .7em -.1em rgb(0 0 0 / .55); }
.hm-part i:first-child { background: linear-gradient(105deg, transparent 42%, rgb(255 255 255 / .7) 50%, transparent 58%) no-repeat 0 0 / 300% 100%, linear-gradient(160deg, #d9ff6e, #c8f751 45%, #b4e23c); animation: hm-sheen 7s ease-in-out 2s infinite backwards; box-shadow: inset 0 .02em 0 rgb(255 255 255 / .5); }
@keyframes hm-in { from { translate: 0 0 2.2em; opacity: 0; } }
@keyframes hm-float { 50% { transform: translateZ(.1em); } }
@keyframes hm-sway { 0%, 100% { transform: translateZ(17cqw) rotateY(30deg) rotateX(-6deg); } 50% { transform: translateZ(17cqw) rotateY(-22deg) rotateX(5deg); } }
@keyframes hm-sheen { 0% { background-position: 120% 0, 0 0; } 30%, 100% { background-position: -60% 0, 0 0; } }
@media (prefers-reduced-motion: reduce) { .hero-mark, .hm-part, .hm-part i:first-child { animation: none !important; } }
.lp-shot { margin: 0; }
.lp-shot img { display: block; width: 100%; height: auto; border-radius: var(--r-xl); border: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .08); background: var(--surface-2); }
.lp-show { max-width: 1240px; margin: 0 auto; padding: clamp(8px, 2vw, 24px) clamp(16px, 4vw, 48px) clamp(24px, 5vw, 56px); display: flex; flex-direction: column; gap: clamp(40px, 7vw, 88px); }
.lp-show-row { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; }
.lp-show-row:nth-child(even) .lp-shot { order: 2; }
.lp-show-row:nth-child(even) { grid-template-columns: 1fr 1.35fr; }
.lp-app { max-width: 1240px; margin: 0 auto; padding: clamp(24px, 5vw, 56px) clamp(16px, 4vw, 48px); display: grid; grid-template-columns: 1fr 1.9fr; gap: clamp(24px, 5vw, 64px); align-items: center; }
.lp-phones { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 2.4vw, 28px); }
.lp-phone { margin: 0; padding: 3%; background: #0b0c0e; border: 1px solid var(--line-strong); border-radius: 17.4% / 8.2%; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .1); }
.lp-screen { display: block; position: relative; border-radius: 15.4% / 7.1%; overflow: hidden; }
.lp-screen::before { content: ""; position: absolute; top: 1.6%; left: 50%; width: 31%; aspect-ratio: 286 / 83; translate: -50% 0; border-radius: 999px; background: #000; }
.lp-screen img { display: block; width: 100%; height: auto; }
.lp-show-copy h2 { font-family: var(--font-display); font-size: clamp(24px, 3vw, 34px); letter-spacing: -.01em; margin: 0 0 12px; }
.lp-show-copy p { color: var(--ink-2); font-size: clamp(16px, 1.5vw, 18px); margin: 0; max-width: 30em; }
.lp-features { max-width: 1240px; margin: 0 auto; padding: clamp(32px, 6vw, 72px) clamp(16px, 4vw, 48px); }
.lp-features h2, .lp-end h2 { font-family: var(--font-display); font-size: clamp(26px, 3.4vw, 38px); font-weight: 700; letter-spacing: -.03em; margin: 0 0 24px; }
.lp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.lp-feature { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 20px; }
.lp-feature h3 { margin: 14px 0 6px; font-size: var(--fs-xl); letter-spacing: -.015em; }
.lp-feature p { margin: 0; color: var(--ink-2); font-size: var(--fs-base); }
.lp-ic { width: 36px; height: 36px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); color: var(--signal); }
.lp-end { text-align: center; padding: clamp(40px, 7vw, 80px) 16px; }
.lp-end p { color: var(--ink-2); margin: 0 0 22px; }
@media (max-width: 860px) {
  .lp-hero-in { grid-template-columns: 1fr; }
  .hero-stage { max-width: 520px; margin: 0 auto; }
  .hero-win { left: 9%; width: 86%; }
  .hero-mark { left: 9%; }
  .lp-show-row, .lp-show-row:nth-child(even) { grid-template-columns: 1fr; }
  .lp-show-row .lp-shot, .lp-show-row:nth-child(even) .lp-shot { order: 0; }
  .lp-app { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .lp-phones { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(64vw, 260px); overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * clamp(16px, 4vw, 48px)); padding: 0 clamp(16px, 4vw, 48px) 28px; scrollbar-width: none; }
  .lp-phone { scroll-snap-align: center; }
  .lp-nav > a:not(.btn) { display: none; }
}
.auth-back { position: absolute; top: 20px; right: 24px; text-decoration: none; } .auth-form { position: relative; }
.interval-seg { grid-column: 1 / -1; justify-self: start; background: var(--surface-2); } .interval-seg button.on { background: var(--surface); }
.restore-warn { display: flex; gap: 12px; padding: 12px 14px; border-radius: var(--r-lg); background: color-mix(in srgb, var(--red) 12%, var(--surface)); color: var(--ink); }
.restore-warn svg { color: var(--red); flex: none; margin-top: 2px; }
.restore-warn p { margin: 4px 0 0; }
.lang-switch { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--r-md); background: color-mix(in srgb, currentColor 10%, transparent); }
.lang-switch button { border: 0; background: transparent; color: inherit; font: inherit; font-size: var(--fs-xs); font-weight: 700; min-height: 28px; padding: 3px 9px; border-radius: var(--r-sm); cursor: pointer; opacity: .7; }
.lang-switch button.on { background: var(--surface); color: var(--ink); opacity: 1; }
.auth-foot .lang-switch button.on { color: var(--on-accent); background: var(--accent); }
@media (max-width: 600px) {
  .ws-member { flex-wrap: wrap; row-gap: 6px; }
  .ws-member > .grow { flex: 1 1 calc(100% - 60px); }
  .ws-member .input.sm { flex: 1 1 auto; min-width: 0; }
  .ws-invite .row, .ws-invite form { flex-wrap: wrap; }
  .ws-invite .input { min-width: 0; flex: 1 1 100%; }
}
@media (max-width: 600px) { .ws-invite form > .row > * { flex: 1 1 100%; } }
button.att-thumb { border: 0; padding: 0; cursor: zoom-in; position: relative; }
.att-thumb video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.att-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(0, 0, 0, .28); }
.media-view { display: block; max-width: 100%; max-height: 72vh; margin: 0 auto; border-radius: var(--r-md); background: #000; }
.ann-modal.modal-wide { width: min(1200px, 96vw); }
.ann-bar { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.ann-bar .row { gap: 6px; flex-wrap: wrap; }
.ann-bar .btn.on { background: var(--accent); color: var(--on-accent); }
.ann-color { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); cursor: pointer; padding: 0; }
.ann-color.on { outline: 3px solid var(--signal); outline-offset: 1px; }
.ann-stage { background: #111; border-radius: var(--r-md); display: grid; place-items: center; overflow: hidden; }
.ann-canvas { display: block; max-width: 100%; max-height: 68vh; touch-action: none; cursor: crosshair; }
@media (max-width: 600px) { .ann-label { display: none; } }
.tabs::-webkit-scrollbar { display: none; }

/* tijdregistratie */
.tt { display: flex; align-items: center; gap: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 3px 4px 3px 10px; min-width: 0; flex: 0 1 380px; margin-left: auto; }
.tt-desc { flex: 1; min-width: 60px; border: 0; background: transparent; color: inherit; font: inherit; font-size: var(--fs-md); outline: none; }
.tt-desc::placeholder { color: inherit; opacity: .6; }
.tt-icon { border: 0; background: transparent; color: inherit; opacity: .6; padding: 4px; border-radius: var(--r-sm); cursor: pointer; display: grid; }
.tt-icon.on { opacity: 1; color: var(--signal); }
.tt-clock { font-variant-numeric: tabular-nums; font-size: var(--fs-sm); font-weight: 600; min-width: 58px; text-align: right; opacity: .7; }
.tt.running .tt-clock { opacity: 1; }
.tt-go { width: 30px; height: 30px; background: var(--accent); color: var(--on-accent); }
.tt.running .tt-go { background: var(--red); color: #fff; }
.tt-go .ic { fill: currentColor; }
@media (max-width: 1100px) { .tt { flex-basis: 260px; } }
@media (max-width: 760px) { .tt-desc, .tt-icon { display: none; } .tt { flex: 0 0 auto; padding-left: 6px; } }
.time-page .tt-toolbar { margin-bottom: 14px; flex-wrap: wrap; gap: 10px; }
.tt-day { margin-bottom: 16px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); overflow: hidden; }
.tt-day-head { display: flex; justify-content: space-between; padding: 10px 14px; background: var(--surface-2); }
.tt-day-head b::first-letter { text-transform: uppercase; }
.tt-row { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-top: 1px solid var(--line); }
.tt-row.running { background: color-mix(in srgb, var(--signal) 8%, var(--surface)); }
.tt-row-main { flex: 1; min-width: 0; }
.tt-row-desc { width: 100%; border: 0; background: transparent; font: inherit; font-weight: 600; color: var(--ink); padding: 3px 4px; border-radius: var(--r-sm); }
.tt-row-desc:hover, .tt-row-desc:focus { background: var(--surface-2); outline: none; }
.tt-row-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding-left: 4px; font-size: var(--fs-sm); }
.tt-chip { color: var(--signal); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.tt-tag { background: var(--surface-2); color: var(--ink-2); }
.tt-bill { border: 1px solid var(--line); background: transparent; color: var(--ink-3); border-radius: var(--r-sm); width: 28px; height: 28px; font-weight: 700; cursor: pointer; }
.tt-bill.on { color: #fff; background: var(--mint); border-color: var(--mint); }
.tt-range { border: 0; background: transparent; color: var(--ink-2); font-variant-numeric: tabular-nums; cursor: pointer; padding: 4px 6px; border-radius: var(--r-sm); white-space: nowrap; }
.tt-range:hover { background: var(--surface-2); }
.tt-dur { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 64px; text-align: right; }
.tt-empty { padding: 20px; text-align: center; }
.tt-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.tt-filters .input { width: auto; }
.tt-bars { display: flex; align-items: flex-end; gap: 6px; height: 160px; padding-top: 8px; overflow-x: auto; }
.tt-bar { flex: 1 0 28px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.tt-bar i { display: block; width: 100%; max-width: 40px; background: var(--signal); border-radius: 5px 5px 0 0; }
.tt-bar span { font-size: var(--fs-2xs); color: var(--ink-3); white-space: nowrap; }
.tt-groups { display: flex; flex-direction: column; }
.tt-group { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.tt-group:first-child { border-top: 0; }
.tt-group a { color: inherit; }
.tt-share { width: 120px; height: 8px; border-radius: var(--r-xs); background: var(--surface-3); overflow: hidden; flex: none; }
.tt-share i { display: block; height: 100%; background: var(--signal); }
.tt-card-total { margin-left: auto; font-variant-numeric: tabular-nums; }
.tt-card-users { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 6px; }
.btn.timer-on { background: var(--red); color: #fff; }
@media (max-width: 600px) { .tt-row { flex-wrap: wrap; } .tt-row-main { flex-basis: 100%; } .tt-share { width: 60px; } }

.nav-btn { gap: 6px; height: var(--ctrl-h); padding: 0 10px; background: transparent; color: inherit; font-size: var(--fs-md); text-decoration: none; white-space: nowrap; }
.time-page .stat-grid { margin: 8px 0 4px; }
.tt-settings { margin-bottom: 14px; }
.tt-settings > summary { cursor: pointer; font-weight: 700; display: flex; align-items: center; gap: 6px; list-style: none; }
.tt-settings > summary::-webkit-details-marker { display: none; }
.tt-settings[open] > summary { margin-bottom: 8px; }
.tt-settings .stack-sm label { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.tt-check { text-align: center; }
.tt-check-icon { color: var(--signal); display: grid; place-items: center; }
.tt-check-q { font-size: var(--fs-lg); margin: 0; }
.tt-check .row.end { justify-content: center; flex-wrap: wrap; }
.role-card .role-name { max-width: 260px; font-weight: 700; }
.role-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.perm-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 6px 18px; margin-top: 10px; }
.perm-row { display: flex; gap: 10px; align-items: flex-start; padding: 6px 4px; border-radius: var(--r-md); cursor: pointer; }
.perm-row:hover { background: var(--surface-2); }
.perm-row input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--signal); flex: none; }
.perm-row span { display: flex; flex-direction: column; gap: 2px; }
.role-badge { white-space: nowrap; }
.upsell { border-color: var(--signal); }
.role-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.role-add > .grow { flex: 1 1 240px; }
.role-add > select { flex: 0 1 220px; width: auto; }
.role-card .role-color { width: auto; flex: none; }
.role-card .row.nowrap.grow { gap: 10px; }

/* ---------- Chat per kaart ---------- */
.card-chat { margin: 18px 0; }
.card-chat .cm-section-head .btn.on { background: var(--signal-soft); color: var(--signal); }
.chat-list { max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); }
.chat-msg { display: flex; gap: 8px; align-items: flex-start; max-width: 92%; }
.chat-msg.mine { margin-left: auto; flex-direction: row-reverse; }
.chat-bubble { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 7px 10px; min-width: 0; overflow-wrap: anywhere; }
.chat-msg.mine .chat-bubble { background: var(--signal-soft); border-color: transparent; }
.chat-msg.open-q .chat-bubble { border-left: 3px solid var(--amber); }
.chat-msg.flash .chat-bubble { outline: 2px solid var(--signal); }
.chat-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-sm); margin-bottom: 2px; }
.chat-body { font-size: var(--fs-md); }
.chat-body p { margin: 0 0 4px; }
.chat-body p:last-child { margin-bottom: 0; }
.chat-quote { display: block; width: 100%; text-align: left; font-size: var(--fs-sm); color: var(--ink-3); border-left: 3px solid var(--line); padding: 2px 8px; margin: 2px 0 4px; background: none; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 3px; }
.chat-actions button { background: none; border: 0; padding: 0; font-size: var(--fs-xs); color: var(--ink-3); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.chat-actions button:hover { color: var(--signal); }
.chat-compose { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.chat-compose textarea { resize: none; min-height: 40px; }
.chat-reply { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 8px; margin-top: 6px; border-left: 3px solid var(--signal); background: var(--signal-soft); border-radius: var(--r-sm); }
.chat-reply.hidden { display: none; }
.chat-typing { min-height: 18px; padding: 2px 4px; }
.chat-empty { text-align: center; padding: 14px 6px; }
.chat-more { align-self: center; }
.card-badges .chat-badge.open { color: var(--amber-ink); font-weight: 700; }
.card-badges .chat-badge.unread { color: var(--signal); font-weight: 600; }
.card.full-cover .card-title, .card.full-cover .card-badges { color: inherit; }
.card.full-cover .card-badges { opacity: .88; }
.cover-custom { width: 40px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: var(--r-sm); background: none; cursor: pointer; }

/* ---------- Onderbalk: Inbox, Planner, Bord, Wissel van bord ---------- */
.board-split { flex: 1; min-height: 0; display: flex; gap: 10px; }
.board-split > .board-body { flex: 1; min-width: 0; }
.board-split.board-hidden > .board-body { display: none; }
.board-split .lists { padding-bottom: 76px; }
.dock-panels { display: flex; gap: 10px; padding: 12px 0 76px 14px; flex: 0 0 auto; min-height: 0; }
.board-split.board-hidden .dock-panels { flex: 1; padding-right: 14px; }
.board-split.board-hidden .dock-panel { flex: 1; max-width: 560px; }
.dock-panels[hidden], .dock-panel[hidden] { display: none; }
.dock-panel { width: 300px; display: flex; flex-direction: column; gap: 8px; background: var(--list-bg); border-radius: var(--r-panel); padding: 10px; box-shadow: 0 1px 0 rgba(0, 0, 0, .12); overflow-y: auto; min-height: 0; max-height: 100%; }
.dock-head { display: flex; align-items: center; gap: 8px; }
.dock-head h3 { font-size: var(--fs-base); font-weight: 700; }
.dock-hint { margin: 0; font-size: var(--fs-sm); color: var(--ink-3); }
.dock-empty { color: var(--ink-3); font-size: var(--fs-sm); text-align: center; padding: 18px 6px; margin: 0; }
.inbox-list { display: flex; flex-direction: column; gap: 6px; }
.inbox-item { display: flex; gap: 8px; align-items: flex-start; background: var(--surface); border-radius: var(--r-card); padding: 8px 10px; box-shadow: var(--card-shadow); cursor: pointer; font-size: var(--fs-md); }
.inbox-item input[type=checkbox] { margin-top: 3px; accent-color: var(--signal); }
.inbox-item.done .inbox-title { text-decoration: line-through; color: var(--ink-3); }
.inbox-item.dragging { opacity: .45; }
.inbox-item.editing { cursor: default; }
.inbox-title { overflow-wrap: anywhere; }
.inbox-note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-move { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--line); padding-top: 6px; }
.inbox-move select { flex: 1; min-width: 0; }
.list.inbox-drop { outline: 2px dashed var(--signal); outline-offset: 2px; }
.inbox-drop-mark { height: 34px; border-radius: var(--r-card); background: var(--signal-soft); border: 2px dashed var(--signal); margin: 2px 0 8px; }
.planner-nav { display: flex; align-items: center; gap: 4px; }
.planner-days { display: flex; flex-direction: column; gap: 6px; }
.planner-day { border-radius: var(--r-md); padding: 6px; background: var(--surface-2); display: flex; flex-direction: column; gap: 4px; min-height: 44px; }
.planner-day.today { box-shadow: inset 3px 0 0 var(--signal); }
.planner-day.today .planner-date b { color: var(--signal); }
.planner-day.past { opacity: .75; }
.planner-day.drop { background: var(--signal-soft); outline: 2px dashed var(--signal); }
.planner-date { font-size: var(--fs-sm); color: var(--ink-2); text-transform: capitalize; }
.planner-free { padding-left: 2px; }
.planner-card { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: var(--surface); border: 0; border-radius: var(--r-md); padding: 6px 8px; box-shadow: var(--card-shadow); cursor: pointer; color: var(--ink); font: inherit; }
.planner-card:hover { box-shadow: 0 0 0 2px var(--signal); }
.planner-card .grow { display: flex; flex-direction: column; }
.planner-title { font-size: var(--fs-md); overflow-wrap: anywhere; }
.planner-card.done .planner-title { text-decoration: line-through; color: var(--ink-3); }
.planner-card.is-inbox { color: var(--ink-2); }
.planner-swatch { width: 6px; align-self: stretch; border-radius: 3px; flex: 0 0 6px; }
.dock { position: fixed; left: calc(50% + var(--nav) / 2); bottom: 16px; transform: translateX(-50%); z-index: 40; display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: var(--r-2xl); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(10px); box-shadow: var(--pop-shadow); }
.dock-btn:hover { background: var(--surface-2); color: var(--ink); }
.dock-btn.on { background: var(--signal-soft); color: var(--signal); }
.dock-btn.on::after { content: ''; position: absolute; left: 50%; bottom: 3px; width: 14px; height: 3px; margin-left: -7px; border-radius: 2px; background: var(--signal); }
.dock-sep { width: 1px; align-self: stretch; margin: 6px 4px; background: var(--line); }
.dock-count { background: var(--accent); color: var(--on-accent); }
.switch-list .pick-row.on { background: var(--signal-soft); }
body.dock-dragging .list .list-cards { min-height: 40px; }
@media (max-width: 720px) {
  .dock { bottom: 10px; gap: 2px; padding: 4px; }
  .dock-btn { padding: 8px 10px; }
  .dock-label { display: none; }
  .dock-panels { position: absolute; inset: 0; z-index: 30; padding: 8px 8px 70px; }
  .dock-panel { flex: 1; width: auto; }
  .board-split { position: relative; }
}
.inbox-panel textarea, .chat-compose textarea { resize: none; }
body:has(.dock) #toasts { bottom: 80px; }
/* lijst met eigen kleur: het hele lijstvenster in die kleur */
.chat-panel { width: 340px; }
.chat-threads { display: flex; flex-direction: column; gap: 6px; }
.chat-thread { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: var(--surface); border: 0; border-radius: var(--r-md); padding: 8px 10px; box-shadow: var(--card-shadow); cursor: pointer; color: var(--ink); font: inherit; }
.chat-thread .grow { display: flex; flex-direction: column; }
.chat-thread:hover { box-shadow: 0 0 0 2px var(--signal); }
.chat-thread.unread .planner-title { font-weight: 700; }
.chat-badge-q { color: var(--amber); font-weight: 700; font-size: var(--fs-sm); }
/* chat in de onderbalk */
.chip.on { background: var(--signal-soft); color: var(--signal); border-color: transparent; font-weight: 600; }
.chat-thread-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.chat-thread-head b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-md); }
.chat-thread-ic { width: 28px; height: 28px; flex: 0 0 28px; border-radius: var(--r-md); background: var(--signal-soft); color: var(--signal); display: inline-flex; align-items: center; justify-content: center; }
.card-chat.compact { margin: 0; display: flex; flex-direction: column; flex: 1; min-height: 0; }
.card-chat.compact .cm-section-head { display: none; }
.card-chat.compact .chat-list { max-height: none; flex: 1; min-height: 160px; border: 0; background: transparent; padding: 4px 0; }
.card-chat.compact .chat-msg { max-width: 100%; }
.card-chat.compact .chat-bubble { background: var(--surface); }
.card-chat.compact .chat-msg.mine .chat-bubble { background: var(--signal-soft); }
.card-chat.compact .chat-compose { background: var(--surface); border-radius: var(--r-lg); padding: 6px; margin-top: 4px; box-shadow: var(--card-shadow); }
.card-chat.compact .chat-compose textarea { border: 0; background: transparent; box-shadow: none; }
.chat-panel { display: flex; flex-direction: column; }
.chat-panel .dock-empty { padding: 28px 10px; }
/* verfijning: chatberichten en onderbalk */
.chat-actions { gap: 2px; margin-top: 4px; opacity: 0; transition: opacity .12s; }
.chat-msg:hover .chat-actions, .chat-msg:focus-within .chat-actions { opacity: 1; }
@media (hover: none) { .chat-actions { opacity: 1; } }
.chat-actions button { text-decoration: none; padding: 2px 7px; border-radius: var(--r-sm); font-weight: 600; }
.chat-actions button:hover { background: var(--surface-2); text-decoration: none; }
.chat-msg.mine .chat-actions { justify-content: flex-end; }
.chat-msg.mine .chat-head { justify-content: flex-end; }
.chat-bubble { border-radius: var(--r-2xl); border: 0; box-shadow: var(--card-shadow); }
.chat-msg.mine .chat-bubble { border-top-right-radius: 4px; }
.chat-msg:not(.mine) .chat-bubble { border-top-left-radius: 4px; }
.dock { border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.dock-btn.on { background: color-mix(in srgb, var(--signal) 13%, transparent); }
.dock-btn:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }
.chat-bubble { position: relative; }
.chat-actions { position: absolute; top: -14px; right: 8px; margin: 0; flex-wrap: nowrap; background: var(--surface); border-radius: var(--r-md); padding: 2px; box-shadow: var(--pop-shadow); pointer-events: none; z-index: 1; }
.chat-msg:hover .chat-actions, .chat-msg:focus-within .chat-actions { pointer-events: auto; }
.chat-msg.mine .chat-actions { right: auto; left: 8px; }
.chat-actions button { white-space: nowrap; }
@media (hover: none) { .chat-actions { position: static; box-shadow: none; background: none; pointer-events: auto; flex-wrap: wrap; } }
.chat-list { padding-top: 16px; }
.chat-msg.mine .chat-actions { left: auto; right: 8px; }
.chat-msg:not(.mine) .chat-actions { right: auto; left: 8px; }
.chat-list { gap: 14px; }
/* klantenbeheer */
.cu-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 14px; }
.cu-stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 12px 14px; }
.cu-stat.accent { background: var(--signal-soft); border-color: transparent; }
.cu-stat.warn { background: var(--amber-soft); border-color: transparent; }
.cu-stat-label { font-size: var(--fs-sm); color: var(--ink-3); font-weight: 600; }
.cu-stat-value { font-size: var(--fs-3xl); font-weight: 700; font-family: var(--font-display); margin: 2px 0; }
.cu-stat-sub { font-size: var(--fs-xs); color: var(--ink-3); }
.cu-row { cursor: pointer; }
.cu-row:hover td { background: var(--surface-2); }
.cu-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cu-detail .panel { margin: 0; }
.cu-kv { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-md); }
.cu-kv > span:last-child { text-align: right; overflow-wrap: anywhere; }
@media (max-width: 720px) { .cu-detail { grid-template-columns: 1fr; } }
.mobile-only { display: none !important; }
@media (max-width: 560px) {
  .mobile-only { display: flex !important; }
}
@media (max-width: 720px) {
  .dock-panels .dock-panel { flex: 1 1 100%; width: 100%; max-width: none; }
  .dock-panels { background: rgba(0, 0, 0, .25); }
}
/* QA: kaartvenster op gsm, planner-datum, dock niet over de inhoud */
.cm-side .menu-title { grid-column: 1 / -1; }
.planner-date { text-transform: none; }
.planner-date b { text-transform: capitalize; }
.board-split .v-host { padding-bottom: 80px !important; }
.chat-quote { border: 0; border-left: 3px solid var(--signal); border-radius: 0 6px 6px 0; background: var(--surface-2); padding: 3px 8px; }
.card-chat.compact .chat-list { gap: 18px; }
.card.full-cover .card-num { color: inherit; opacity: .8; }
/* chat: bijlagen */
.chat-pending { display: flex; flex-wrap: wrap; gap: 6px; }
.chat-pending.hidden { display: none; }
.chat-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; padding: 3px 4px 3px 4px; border-radius: var(--r-md); background: var(--surface-2); font-size: var(--fs-sm); }
.chat-chip img { width: 28px; height: 28px; object-fit: cover; border-radius: var(--r-sm); }
.chat-chip .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-chip.busy { opacity: .7; }
.chat-files { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.chat-media { display: grid; grid-template-columns: repeat(2, minmax(0, 160px)); gap: 4px; }
.chat-media.single { grid-template-columns: minmax(0, 280px); }
.chat-img { padding: 0; border: 0; background: var(--surface-2); border-radius: var(--r-md); overflow: hidden; cursor: zoom-in; display: block; }
.chat-img img { display: block; width: 100%; max-height: 220px; object-fit: cover; }
.chat-media.single .chat-img img { object-fit: contain; max-height: 320px; }
.chat-video { width: 100%; max-height: 260px; border-radius: var(--r-md); background: #000; }
.chat-file { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: var(--r-md); background: var(--surface-2); color: var(--ink); text-decoration: none; font-size: var(--fs-sm); }
.chat-file .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-lightbox img { display: block; max-width: 100%; max-height: 75vh; margin: 0 auto 10px; border-radius: var(--r-md); }
.card-chat.drop .chat-list { outline: 2px dashed var(--signal); outline-offset: -4px; }
/* peilingen */
.poll { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; padding: 10px; border-radius: var(--r-lg); background: var(--surface-2); min-width: min(260px, 100%); }
.poll-head { display: flex; align-items: center; gap: 6px; font-size: var(--fs-md); }
.poll-options { display: flex; flex-direction: column; gap: 5px; }
.poll-opt { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--fs-md); text-align: left; cursor: pointer; overflow: hidden; }
.poll-opt:disabled { cursor: default; }
.poll-opt:not(:disabled):hover { border-color: var(--signal); }
.poll-opt.mine { border-color: var(--signal); }
.poll-bar { position: absolute; left: 0; top: 0; bottom: 0; background: var(--signal-soft); transition: width .25s; z-index: 0; }
.poll-opt > *:not(.poll-bar) { position: relative; z-index: 1; }
.poll-check { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--ink-3); display: grid; place-items: center; flex: 0 0 16px; }
.poll-opt.mine .poll-check { background: var(--signal); border-color: var(--signal); color: var(--signal-ink); }
.poll-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.poll-opt.top .poll-text { font-weight: 600; }
.poll-pct { font-variant-numeric: tabular-nums; font-size: var(--fs-sm); color: var(--ink-2); }
.poll-voters { display: inline-flex; }
.poll-voters .avatar { margin-left: -5px; box-shadow: 0 0 0 2px var(--surface); }
/* ---------- Kaartvenster (vernieuwd) ---------- */
.card-modal { max-width: 1120px; width: min(1120px, 96vw); }
.cm-bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 3; background: var(--surface); border-radius: var(--r-panel) var(--r-panel) 0 0; }
.cm-cover + .cm-bar { border-radius: 0; }
.cm-list-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--r-md); border: 0; background: var(--surface-2); color: var(--ink); font: inherit; font-size: var(--fs-md); font-weight: 700; cursor: pointer; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-list-pill:hover { background: var(--surface-3); }
.cm-list-pill.static { cursor: default; }
.cm-num { color: var(--ink-3); font-family: var(--mono); font-size: var(--fs-xs); font-weight: 500; }
.cm-bar .icon-btn.on { color: var(--signal); }
.card-modal .cm-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 0; align-items: stretch; }
.card-modal .cm-main { padding: 18px 22px 26px; min-width: 0; }
.card-modal .cm-aside { border-left: 1px solid var(--line); background: var(--surface-2); padding: 14px 14px 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0; border-radius: 0 0 var(--r-panel) 0; }
.cm-aside .chat-tabs { background: var(--surface-3); }
.cm-aside .card-chat.compact .chat-list { min-height: 260px; max-height: 60vh; }
.cm-aside .chat-bubble, .cm-aside .card-chat.compact .chat-compose { background: var(--surface); }
.cm-tabcount { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 700; }
.cm-titlerow { display: flex; align-items: flex-start; gap: 10px; }
.cm-titlerow .cm-title { flex: 1; font-size: var(--fs-3xl); }
.cm-done { width: 22px; height: 22px; flex: 0 0 22px; margin-top: 9px; border-radius: 50%; border: 2px solid var(--ink-3); background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; transition: background .15s, border-color .15s; }
.cm-done:hover:not(:disabled) { border-color: var(--mint); }
.cm-done.on { background: var(--mint); border-color: var(--mint); }
.cm-quick { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 16px 32px; }
.cm-chip:hover { background: var(--surface-2); border-color: var(--ink-3); }
.cm-chip.timer-on { color: var(--red); border-color: var(--red); }
.card-modal .cm-meta { margin-left: 32px; }
.cm-addlist { display: flex; flex-direction: column; gap: 2px; }
.cm-addrow { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; background: none; border-radius: var(--r-md); text-align: left; cursor: pointer; color: var(--ink); font: inherit; }
.cm-addrow:hover { background: var(--surface-2); }
.cm-addrow .grow { display: flex; flex-direction: column; }
.cm-addrow b { font-size: var(--fs-md); }
.cm-addic { width: 32px; height: 32px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); flex: 0 0 32px; }
.cm-addrow:hover .cm-addic { background: var(--signal-soft); color: var(--signal); }
.cm-polls .poll { background: var(--surface-2); }
.cm-rel-group + .cm-rel-group { margin-top: 10px; }
.cm-rel-type { color: var(--ink-3); margin-bottom: 4px; }
.cm-rel { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 10px; border-radius: var(--r-md); background: var(--surface-2); min-height: var(--ctrl-h); }
.cm-rel + .cm-rel { margin-top: 4px; }
.cm-rel-link { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.cm-rel-link:hover .cm-rel-title { text-decoration: underline; }
.cm-rel-link .ic { flex: none; color: var(--red-ink); }
.cm-rel.closed .cm-rel-link .ic { color: var(--mint-ink); }
.cm-rel.closed .cm-rel-title { text-decoration: line-through; color: var(--ink-3); }
.cm-rel-num { color: var(--ink-3); font-variant-numeric: tabular-nums; flex: none; }
.cm-rel-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-rel-list { flex: none; max-width: 30%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-rel-results { max-height: 260px; overflow-y: auto; }
.board-public { color: var(--amber-ink); }
.card-blocked { color: var(--red-ink); font-weight: 600; }
@media (max-width: 900px) {
  .card-modal .cm-grid { grid-template-columns: 1fr; }
  .card-modal .cm-aside { border-left: 0; border-top: 1px solid var(--line); border-radius: 0; }
  .cm-quick, .card-modal .cm-meta { margin-left: 0; }
}
.card-modal .cm-main { gap: 16px; }
.card-modal .cm-quick { margin: 0 0 0 32px; }
/* prioriteit */
.prio { gap: 3px; padding: 1px 6px; line-height: 1.5; }
.prio .ic { fill: currentColor; }
.prio-urgent { background: var(--prio-urgent-bg); color: var(--prio-urgent-ink); }
.prio-high { background: var(--prio-high-bg); color: var(--prio-high-ink); }
.prio-medium { background: var(--prio-medium-bg); color: var(--prio-medium-ink); }
.prio-low { background: var(--prio-low-bg); color: var(--prio-low-ink); }
.prio.big { font-size: var(--fs-md); padding: 4px 10px; border-radius: var(--r-md); }
.card-badges .prio { margin-left: -2px; }
.card.full-cover .prio { background: rgba(255, 255, 255, .85); }
.prio-btn { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 0; cursor: pointer; color: var(--ink-2); }
.prio-dot { width: 22px; height: 22px; border-radius: var(--r-sm); display: inline-grid; place-items: center; color: #fff; flex: 0 0 22px; }
.prio-dot .ic { fill: currentColor; }
.prio-dot.none { background: var(--surface-3); color: var(--ink-3); }
/* API */
.api-code { background: var(--surface-2); padding: 10px 12px; border-radius: var(--r-md); overflow-x: auto; margin: 0; font-size: var(--fs-sm); line-height: 1.5; }
.api-docs .panel { margin-bottom: 14px; }
.api-tbl td { vertical-align: top; font-size: var(--fs-md); }
.api-tbl td:nth-child(2) { white-space: nowrap; }
.api-m { display: inline-block; min-width: 56px; text-align: center; padding: 2px 6px; border-radius: var(--r-sm); font-size: var(--fs-xs); font-weight: 700; font-family: ui-monospace, monospace; }
.api-get { background: var(--mint-soft); color: var(--mint-ink); }
.api-post { background: var(--signal-soft); color: var(--signal); }
.api-patch, .api-put { background: var(--amber-soft); color: var(--amber-ink); }
.api-delete { background: var(--red-soft); color: var(--red-ink); }
.wh-events { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 12px; max-height: 220px; overflow-y: auto; padding: 6px; border: 1px solid var(--line); border-radius: var(--r-md); }
.wh-events.hidden { display: none; }
.wh-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.wh-url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.wh-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-3); flex: 0 0 9px; }
.wh-dot.ok { background: var(--mint); } .wh-dot.bad { background: var(--red); } .wh-dot.off { background: var(--surface-3); }
.api-tbl td:first-child { width: 72px; } .api-tbl td:nth-child(2) { width: 290px; }
/* op een telefoon: de uitleg onder het pad in plaats van ernaast, zodat niets buiten beeld valt */
@media (max-width: 600px) {
  .api-tbl, .api-tbl tbody { display: block; }
  .api-tbl tr { display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .api-tbl td:nth-child(2) { width: auto; min-width: 0; }
  .api-tbl td:nth-child(2), .api-tbl td:nth-child(2) code { white-space: normal; overflow-wrap: anywhere; }
  .api-tbl td:nth-child(3) { grid-column: 1 / -1; padding-top: 0; border-top: 0; }
  .api-docs li code { overflow-wrap: anywhere; }
}
/* statistiektegels: altijd ruimte eronder en dezelfde stijl als bij Klanten */
.stat-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-bottom: 14px; }
.stat { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--r-panel); min-width: 0; }
.stat b { font-size: var(--fs-3xl); line-height: 1.2; }
.stat .muted { overflow-wrap: anywhere; }
.admin-body > .panel + .panel, .ws-page .panel + .panel, .page > .panel + .panel { margin-top: 14px; }
.admin-body > .stat-grid + .panel { margin-top: 0; }
.admin-code { font-family: var(--mono, ui-monospace, monospace); font-size: var(--fs-xs); background: var(--surface-2); padding: 6px 8px; border-radius: var(--r-sm); word-break: break-all; }
.vat-status { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--border); }
.vat-status .badge { align-self: flex-start; }
.vat-status.red { border-color: rgba(220, 60, 60, .45); }
.vat-status.amber { border-color: rgba(220, 160, 40, .45); }
.vat-status.green { border-color: rgba(60, 170, 100, .45); }
.board-tile .tile-more { opacity: 0; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin: -4px -6px 0 4px; border-radius: var(--r-sm); color: var(--ink-3); flex: none; }
.board-tile:hover .tile-more, .board-tile .tile-more:focus-visible { opacity: 1; }
.board-tile .tile-more:hover { background: var(--surface-2); color: var(--ink); }
@media (hover: none) { .board-tile .tile-more { opacity: .85; } }
/* snel afvinken op een kaart */
.card-check { display: inline-flex; align-items: center; justify-content: center; vertical-align: -3px; width: 0; height: 16px; margin-right: 0; border-radius: 50%; border: 0 solid var(--ink-3); color: transparent; overflow: hidden; opacity: 0; cursor: pointer; transition: width .15s, margin .15s, opacity .15s; box-sizing: border-box; }
.card:hover .card-check, .card:focus-within .card-check, .card-check.on { width: 16px; margin-right: 6px; opacity: 1; border-width: 1.5px; }
.card-check:hover { border-color: var(--mint); color: var(--mint); }
.card-check.on { background: var(--mint); border-color: var(--mint); color: #fff; }
.card-check svg { width: 11px; height: 11px; }
.card-title.is-done { opacity: .8; }
@media (hover: none) { .card-check:not(.on) { display: none; } }
/* kaarten in een scrollende lijst nooit samendrukken */
.list-cards > * { flex-shrink: 0; }
.list-cards { overscroll-behavior: contain; }
.online-dot { position: relative; }
.online-dot::after { content: ''; position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--surface); border: 2px solid var(--pres-online); box-sizing: border-box; box-shadow: 0 0 0 2px var(--surface); }
.acc-status { color: var(--ink-3); }
.acc-status::before { content: '·'; margin-right: 6px; }
.acc-status.here { color: var(--mint-ink); font-weight: 600; }
.acc-status.online { color: var(--mint-ink); }
.update-bar { position: fixed; left: calc(50% + var(--nav) / 2); top: 64px; transform: translateX(-50%); z-index: var(--z-bar); display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; border-radius: var(--r-xl); background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); font-size: var(--fs-md); max-width: calc(100vw - 32px); }
/* GitHub-paneel in de onderbalk */
.gh-panel { width: 340px; }
.gh-list { display: flex; flex-direction: column; gap: 6px; }
.gh-day { color: var(--ink-3); margin: 8px 2px 0; }
.gh-ev { display: flex; gap: 8px; padding: 8px 10px; background: var(--surface); border-radius: var(--r-md); border-left: 3px solid transparent; }
.gh-ev.ok { border-left-color: var(--mint); } .gh-ev.bad { border-left-color: var(--red); } .gh-ev.merged { border-left-color: #8b5cf6; } .gh-ev.closed { border-left-color: var(--ink-3); }
.gh-ic { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--ink-2); }
.gh-ev.ok .gh-ic { color: var(--mint-ink); } .gh-ev.bad .gh-ic { color: var(--red); } .gh-ev.merged .gh-ic { color: #8b5cf6; }
.gh-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.gh-title { font-size: var(--fs-md); font-weight: 600; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.gh-meta { font-size: var(--fs-xs); color: var(--ink-3); overflow-wrap: anywhere; }
.gh-body { font-size: var(--fs-sm); color: var(--ink-2); white-space: pre-line; max-height: 7.5em; overflow: hidden; overflow-wrap: anywhere; font-family: var(--mono, ui-monospace, monospace); }
.gh-cards { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.gh-card { border: 0; background: var(--signal-soft); color: var(--signal); border-radius: var(--r-sm); padding: 2px 7px; font-size: var(--fs-xs); font-weight: 600; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gh-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 18px 8px; color: var(--ink-2); }
.gh-new { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--signal); }
.gh-steps { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); }
.gh-steps .bk-uri, .gh-link .bk-uri { font-size: var(--fs-xs); word-break: break-all; }
.gh-link { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; background: var(--surface); border-radius: var(--r-md); }
.gh-help p { margin: 4px 0 0; }
.card-gh { display: flex; flex-direction: column; gap: 6px; }
/* achtergrond vastnemen om opzij te schuiven */
.board-body { cursor: default; }
.board-body.drag-scrolling, .board-body.drag-scrolling * { cursor: grabbing !important; user-select: none; }
.gh-history { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
.gh-history p { margin: 0; }
.gh-howto summary { cursor: pointer; color: var(--signal); }
.gh-howto .gh-steps { margin-top: 6px; }
.lp-why .lp-grid, #lp-features .lp-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
/* op een breed scherm: tabs die niet op één regel passen, lopen door naar een tweede regel in plaats van onzichtbaar te scrollen */
@media (min-width: 760px) { .tabs { flex-wrap: wrap; overflow: visible; row-gap: 2px; } }
.hp-field { position: absolute !important; left: -10000px !important; top: auto; width: 1px; height: 1px; overflow: hidden; } /* lokveld tegen bots */
.email-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: -4px; }
/* omslagfoto in het kaartvenster: klik = groot bekijken */
.card-modal .cm-cover-btn { position: relative; width: 100%; border: 0; padding: 0; cursor: zoom-in; font: inherit; color: inherit; }
.card-modal .cm-cover-btn:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }
.cm-cover-zoom { position: absolute; right: 10px; bottom: 10px; display: inline-flex; padding: 6px; border-radius: var(--r-pill); background: rgba(0,0,0,.55); color: #fff; opacity: 0; transition: opacity .15s; }
.cm-cover-btn:hover .cm-cover-zoom, .cm-cover-btn:focus-visible .cm-cover-zoom { opacity: 1; }
@media (hover: none) { .cm-cover-zoom { opacity: .85; } }
/* foto groot bekijken: zo groot mogelijk, klik om in te zoomen tot ware grootte */
.modal.modal-media { width: min(96vw, 1600px); max-width: none; }
.media-stage { max-height: max(240px, calc(100vh - 290px)); max-height: max(240px, calc(100dvh - 290px)); overflow: hidden; border-radius: var(--r-md); background: #000; cursor: zoom-in; display: flex; touch-action: pan-x pan-y pinch-zoom; }
.media-stage .media-view { max-height: max(240px, calc(100vh - 290px)); max-height: max(240px, calc(100dvh - 290px)); max-width: 100%; margin: auto; border-radius: 0; user-select: none; -webkit-user-drag: none; }
.media-stage.zoomed { overflow: auto; cursor: grab; display: block; }
.media-stage.zoomed:active { cursor: grabbing; }
.media-stage.zoomed .media-view { max-width: none; max-height: none; margin: 0; }

/* ---- kaartvenster: rustiger en duidelijker (okt 2026) ---- */
/* omslag: foto over de volle breedte, met een vervaagde versie als achtergrond in plaats van lege vlakken */
.card-modal .cm-cover.img { height: 220px; position: relative; isolation: isolate; background: #0d1117; }
.card-modal .cm-cover-bg { position: absolute; inset: -24px; background-size: cover; background-position: center; filter: blur(22px) saturate(1.15) brightness(.55); transform: scale(1.1); z-index: -1; }
.card-modal .cm-cover.img img { max-height: 220px; height: 100%; width: auto; max-width: 100%; object-fit: contain; box-shadow: 0 6px 28px rgba(0, 0, 0, .45); }
.cm-cover-zoom { gap: 6px; padding: 6px 10px 6px 8px; font-size: var(--fs-sm); font-weight: 600; align-items: center; }
/* snelle acties: compacter, zonder randen */
.card-modal .cm-quick { gap: 6px; margin: 2px 0 6px 32px; }
.cm-chip { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-weight: 600; cursor: pointer; padding: 5px 10px; border: 0; background: var(--surface-2); color: var(--ink-2); font-size: var(--fs-sm); border-radius: var(--r-md); }
.cm-chip svg { opacity: .8; }
.cm-chip:hover { background: var(--surface-3); color: var(--ink); border-color: transparent; }
.cm-chip.timer-on { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red); }
/* bijlagen: één regel met naam en gegevens, acties rechts */
.att { gap: 14px; padding: 8px; margin: 0 -8px; }
.att-thumb { width: 104px; height: 68px; border: 0; padding: 0; cursor: zoom-in; position: relative; }
a.att-thumb { cursor: pointer; }
.att-info b { font-size: var(--fs-base); }
.att-info .muted.small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 2px; }
.att-tag { background: var(--signal-soft); color: var(--signal); }
.att-actions { display: flex; gap: 2px; opacity: .75; }
.att:hover .att-actions, .att:focus-within .att-actions { opacity: 1; }
@media (hover: none) { .att-actions { opacity: 1; } }
/* links in een beschrijving: duidelijk, maar niet schreeuwerig */
.card-modal .md a { color: var(--signal); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--signal) 35%, transparent); }
.card-modal .md a:hover { border-bottom-color: currentColor; }
@media (max-width: 900px) {
  .card-modal .cm-quick, .card-modal .cm-meta { margin-left: 0; }
}
@media (max-width: 700px) {
  .card-modal .cm-cover.img { height: 180px; }
  .card-modal .cm-cover.img img { max-height: 180px; }
}
/* eigen kaartknoppen: aparte rij, in de kleur van de site, zodat ze niet verward worden met de vaste knoppen */
.card-modal .cm-btns { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 6px 32px; padding-top: 10px; border-top: 1px dashed var(--line); }
.cm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 0; border-radius: var(--r-md); background: var(--signal-soft); color: var(--signal); font: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; }
.cm-btn:hover { background: color-mix(in srgb, var(--signal) 24%, transparent); }
.cm-btn:disabled { opacity: .6; cursor: progress; }
.cm-btn:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.cm-btn-ic { font-size: var(--fs-md); line-height: 1; }
@media (max-width: 900px) { .card-modal .cm-btns { margin-left: 0; } }

/* ---------- Kaartweergave: grootte, stijl en extra info ---------- */
.card-excerpt { font-size: var(--fs-sm); line-height: 1.4; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.card-progress { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.card-progress-bar { flex: 1; height: 5px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.card-progress-bar > span { display: block; height: 100%; background: var(--signal); border-radius: inherit; }
.card-progress.done .card-progress-bar > span { background: var(--mint); }
.card-progress.done { color: var(--mint); font-weight: 600; }
.card-age { opacity: .85; }
.card-foot .avatar.more { background: var(--surface-3); color: var(--ink-2); font-size: var(--fs-2xs); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.card.full-cover .card-excerpt, .card.full-cover .card-progress { color: inherit; opacity: .9; }

/* grootte */
.lists.cd-size-compact .list { flex-basis: 250px; width: 250px; }
.lists.cd-size-compact .list-cards { gap: 5px; }
.lists.cd-size-compact .card-inner { padding: 5px 8px 6px; gap: 3px; }
.lists.cd-size-compact .card-title { font-size: var(--fs-md); line-height: 1.3; }
.lists.cd-size-compact .card-labels.compact .lbl { height: 6px; min-width: 30px; }
.lists.cd-size-compact .card-badges { font-size: var(--fs-xs); gap: 3px 8px; }
.lists.cd-size-compact .card-cover:not(.img) { height: 22px; }
.lists.cd-size-compact .card-cover.img, .lists.cd-size-compact .card-cover.img img { max-height: 120px; }
.lists.cd-size-large .list { flex-basis: 330px; width: 330px; }
.lists.cd-size-large .card-inner { padding: 10px 12px 11px; gap: 7px; }
.lists.cd-size-large .card-title { font-size: var(--fs-lg); font-weight: 600; line-height: 1.35; }
.lists.cd-size-large .card-labels .lbl:not(:empty) { height: 20px; font-size: var(--fs-xs); }
.lists.cd-size-large .card-badges { font-size: var(--fs-sm); }
.lists.cd-size-large .card-cover:not(.img) { height: 44px; }
.lists.cd-size-large .card-cover.img, .lists.cd-size-large .card-cover.img img { max-height: 260px; }
@media (max-width: 640px) { .lists.cd-size-compact .list, .lists.cd-size-large .list { flex-basis: 86vw; width: 86vw; } }

/* stijlen */
.lists.cd-style-outline .card { box-shadow: 0 0 0 1px var(--line) inset; }
.lists.cd-style-outline .card:hover { box-shadow: 0 0 0 2px var(--card-ring) inset; }
.lists.cd-style-float .card { border-radius: var(--r-xl); box-shadow: 0 1px 2px rgba(16, 17, 19, .08), 0 6px 16px -6px rgba(16, 17, 19, .28); transition: transform .12s ease-out; }
.lists.cd-style-float .card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(16, 17, 19, .1), 0 12px 24px -8px rgba(16, 17, 19, .35), 0 0 0 2px var(--card-ring) inset; }
.lists.cd-style-float .list-cards { gap: 10px; }
.lists.cd-style-stripe .card.has-accent:not(.full-cover) { box-shadow: var(--card-shadow), 4px 0 0 var(--card-accent) inset; }
.lists.cd-style-stripe .card.has-accent:not(.full-cover) .card-inner { padding-left: 14px; }
.lists.cd-style-stripe .card.has-accent:not(.full-cover):hover { box-shadow: var(--card-shadow), 4px 0 0 var(--card-accent) inset, 0 0 0 2px var(--card-ring) inset; }
.lists.cd-style-soft .card.has-accent:not(.full-cover) { background: color-mix(in srgb, var(--card-accent) 13%, var(--surface)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--card-accent) 30%, transparent) inset; }
.lists.cd-style-soft .card.has-accent:not(.full-cover):hover { box-shadow: 0 0 0 2px var(--card-ring) inset; }
@media (prefers-reduced-motion: reduce) { .lists.cd-style-float .card, .lists.cd-style-float .card:hover { transition: none; transform: none; } }

/* paneel */
.cd-section { display: flex; flex-direction: column; gap: 7px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.cd-section:last-of-type { border-bottom: 0; }
.cd-title { font-weight: 700; font-size: var(--fs-sm); color: var(--ink-2); }
.cd-styles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.cd-style-opt { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 6px 2px 5px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); cursor: pointer; }
.cd-style-opt:hover { background: var(--surface-2); }
.cd-style-opt.on { border-color: var(--signal); box-shadow: 0 0 0 1px var(--signal) inset; color: var(--ink); }
.cd-mini { display: block; width: 100%; padding: 5px 6px; background: var(--list-bg); border-radius: var(--r-sm); }
.cd-mini-card { --card-accent: #3f8fd8; display: flex; flex-direction: column; gap: 3px; padding: 5px; background: var(--surface); border-radius: var(--r-xs); box-shadow: var(--card-shadow); }
.cd-mini-lbl { width: 45%; height: 4px; border-radius: 2px; background: var(--card-accent); }
.cd-mini-line { height: 3px; border-radius: 2px; background: var(--ink-3); opacity: .55; }
.cd-mini-line.short { width: 60%; }
.cd-mini.cd-style-outline .cd-mini-card { box-shadow: 0 0 0 1px var(--line) inset; }
.cd-mini.cd-style-float .cd-mini-card { border-radius: var(--r-sm); box-shadow: 0 4px 8px -3px rgba(16, 17, 19, .35); }
.cd-mini.cd-style-stripe .cd-mini-card { box-shadow: var(--card-shadow), 3px 0 0 var(--card-accent) inset; padding-left: 7px; }
.cd-mini.cd-style-soft .cd-mini-card { background: color-mix(in srgb, var(--card-accent) 16%, var(--surface)); box-shadow: none; }
.cd-group { display: flex; flex-direction: column; gap: 3px; }
.cd-sub { font-weight: 600; }
.cd-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px; }
.cd-check { font-size: var(--fs-sm); gap: 6px; }
.cd-check.is-off { opacity: .5; }
.cd-foot { display: flex; flex-direction: column; gap: 8px; }

/* ---------- Animaties (uit te zetten in Kaartweergave; nooit bij "minder beweging") ----------
   Er wordt bewust met de losse eigenschappen translate/scale geanimeerd en niet met transform:
   Sortable schuift kaarten bij het slepen met transform, en die mag een animatie niet overschrijven. */
@keyframes card-enter { from { opacity: 0; translate: 0 8px; scale: .98; } }
@keyframes card-settle { 0% { scale: 1.035; } 55% { scale: .985; } 100% { scale: 1; } }
@keyframes list-enter { from { opacity: 0; translate: 0 10px; } }
@keyframes pop-in { from { opacity: 0; translate: 0 -4px; scale: .98; } }
.popover { animation: pop-in .14s cubic-bezier(.2, .8, .2, 1); transform-origin: top center; }
.lists.cd-anim .card.card-enter { animation: card-enter .32s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: var(--enter-delay, 0ms); }
.lists.cd-anim .card.card-settle { animation: card-settle .34s cubic-bezier(.2, .8, .2, 1); }
.lists.cd-anim.cd-first > .list { animation: list-enter .3s cubic-bezier(.2, .8, .2, 1) backwards; }
.lists.cd-anim.cd-first > .list:nth-child(2) { animation-delay: 30ms; }
.lists.cd-anim.cd-first > .list:nth-child(3) { animation-delay: 60ms; }
.lists.cd-anim.cd-first > .list:nth-child(4) { animation-delay: 90ms; }
.lists.cd-anim.cd-first > .list:nth-child(n+5) { animation-delay: 120ms; }
/* slepen: kaart komt los van het bord, de lege plek is een zachte stippellijn */
.lists.cd-anim .card.sortable-chosen { scale: 1.02; box-shadow: var(--pop-shadow); }
.lists.cd-anim .card.sortable-ghost { opacity: 1; background: color-mix(in srgb, var(--signal) 10%, transparent); box-shadow: none; outline: 2px dashed color-mix(in srgb, var(--signal) 55%, transparent); outline-offset: -2px; }
.lists.cd-anim .card.sortable-ghost > * { visibility: hidden; }
.lists.cd-anim .card-check { transition: width .15s, margin .15s, opacity .15s, background-color .2s, scale .2s cubic-bezier(.3, 1.6, .5, 1); }
.lists.cd-anim .card-check.on { scale: 1.08; }
.lists.cd-anim .card-progress-bar > span { transition: width .4s cubic-bezier(.2, .8, .2, 1); }

/* ---------- Foto's bekijken: bladeren ---------- */
.media-frame { position: relative; }
.media-frame.from-right { animation: media-in-right .22s cubic-bezier(.2, .8, .2, 1); }
.media-frame.from-left { animation: media-in-left .22s cubic-bezier(.2, .8, .2, 1); }
@keyframes media-in-right { from { opacity: .3; translate: 28px 0; } }
@keyframes media-in-left { from { opacity: .3; translate: -28px 0; } }
.media-nav { position: absolute; top: 50%; translate: 0 -50%; width: 46px; height: 46px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
  background: rgba(10, 11, 13, .55); color: #fff; backdrop-filter: blur(4px); box-shadow: 0 2px 10px rgba(0, 0, 0, .3); transition: background .15s, scale .15s; z-index: 2; }
.media-nav:hover { background: rgba(10, 11, 13, .8); scale: 1.06; }
.media-nav.prev { left: 12px; }
.media-nav.next { right: 12px; }
.media-count { position: absolute; left: 50%; bottom: 12px; translate: -50% 0; padding: 3px 10px; border-radius: var(--r-pill); background: rgba(10, 11, 13, .6); color: #fff; font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; pointer-events: none; z-index: 2; }
.media-stage.zoomed ~ .media-count { display: none; }
.media-strip { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 4px; }
.media-thumb { flex: 0 0 auto; width: 84px; height: 56px; padding: 0; border-radius: var(--r-sm); overflow: hidden; border: 2px solid transparent; background: #000; cursor: pointer; opacity: .6; transition: opacity .15s, border-color .15s; }
.media-thumb img, .media-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-thumb:hover { opacity: .9; }
.media-thumb.on { border-color: var(--signal); opacity: 1; }
@media (max-width: 640px) { .media-nav { width: 38px; height: 38px; } .media-nav.prev { left: 6px; } .media-nav.next { right: 6px; } }

/* ---------- Tekst bij muis over een kaart ----------
   Licht gehouden: enkel de titel beweegt (kort, zonder vertraging); de rest wisselt meteen van kleur. */
/* geen lijn meer onder de kaarttitel bij muis erover (de kaart zelf krijgt al een rand) */
.lists.cd-anim .card:hover .card-num { color: var(--card-ring); }
.lists.cd-anim .card:hover .card-excerpt { color: var(--ink); }

/* ---------- Emoji: kiezer en reacties ---------- */
.pop-body.emoji-pop { padding: 8px; gap: 6px; }
.emoji-search { min-height: 34px; }
.emoji-tabs { display: flex; gap: 2px; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.emoji-tab { border: 0; background: none; font-size: var(--fs-xl); line-height: 1; padding: 5px 4px; border-radius: var(--r-sm); cursor: pointer; filter: grayscale(.6); opacity: .8; }
.emoji-tab:hover { background: var(--surface-2); filter: none; opacity: 1; }
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; max-height: 260px; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
.emoji-cat { grid-column: 1 / -1; font-size: var(--fs-xs); font-weight: 700; color: var(--ink-3); padding: 6px 2px 2px; position: sticky; top: 0; background: var(--surface); z-index: 1; }
.emoji-btn { border: 0; background: none; font-size: var(--fs-3xl); line-height: 1; aspect-ratio: 1; border-radius: var(--r-md); cursor: pointer; display: grid; place-items: center; padding: 0; transition: background .1s, scale .12s; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.emoji-btn:hover, .emoji-btn:focus-visible { background: var(--surface-2); scale: 1.15; }
.emoji-btn.more { color: var(--ink-3); font-size: var(--fs-lg); }
.emoji-none { grid-column: 1 / -1; text-align: center; padding: 18px 0; }
.pop-body.emoji-quick { padding: 5px; }
.emoji-quick .emoji-btn { width: 36px; font-size: var(--fs-2xl); }

.reactions { display: inline-flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.reactions .reaction { display: inline-flex; align-items: center; gap: 4px; height: 26px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); cursor: pointer; transition: scale .12s cubic-bezier(.3, 1.6, .5, 1), background-color .15s, border-color .15s; }
.reactions .reaction:hover { scale: 1.06; border-color: var(--ink-3) !important; }
.reactions .reaction:active { scale: .94; }
.reactions .reaction-e { font-size: var(--fs-base); line-height: 1; }
.reactions .reaction.add { color: var(--ink-3); padding: 0 6px !important; gap: 1px; opacity: .75; }
.reactions .reaction.add:hover { opacity: 1; color: var(--ink); }
.reactions .reaction-plus { font-size: var(--fs-2xs); font-weight: 700; }
.reactions .reaction[disabled] { cursor: default; }
.cm-reactions { margin: -2px 0 6px 32px; }
.chat-reactions { margin-top: 5px; }
.chat-reactions .reaction { height: 24px; }
.chat-actions .chat-react-btn { font-size: var(--fs-md); text-decoration: none; }

.card-reacts { display: flex; flex-wrap: wrap; gap: 4px; }
.card-react { display: inline-flex; align-items: center; gap: 3px; height: 21px; padding: 0 6px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface-2); font: inherit; font-size: var(--fs-xs); color: var(--ink-2); cursor: pointer; line-height: 1; }
.card-react span { font-size: var(--fs-sm); }
.card-react b { font-weight: 600; font-variant-numeric: tabular-nums; }
.card-react.mine { border-color: var(--signal); background: var(--signal-soft); color: var(--signal); }
.card-react.more { cursor: default; }
.card.full-cover .card-react { background: rgba(0, 0, 0, .25); border-color: transparent; color: inherit; }
.lists.cd-anim .card-react { transition: scale .14s cubic-bezier(.3, 1.6, .5, 1); }
.lists.cd-anim .card-react:hover { scale: 1.08; }
.lists.cd-size-compact .card-react { height: 18px; padding: 0 5px; font-size: var(--fs-2xs); }

/* ---------- Ranglijst, kroontje en badges ---------- */
.av-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.av-award { position: absolute; top: -7px; right: -5px; font-size: var(--fs-sm); line-height: 1; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .45)); pointer-events: none; }
.av-wrap.has-crown .av-award { top: -9px; right: auto; left: 50%; translate: -50% 0; rotate: -12deg; font-size: var(--fs-md); }
.avatars .av-wrap + .av-wrap, .avatars .avatar + .av-wrap, .avatars .av-wrap + .avatar { margin-left: -6px; }
.list-done { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--mint); color: #fff; flex: 0 0 auto; }
.lb-card { grid-column: 1 / -1; margin-bottom: 12px; }
.lb-head { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-start; justify-content: space-between; }
.lb-title h3 { margin: 0; }
.lb-title p { margin: 2px 0 0; max-width: 520px; }
.lb-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lb-seg button { font-size: var(--fs-sm); padding: 4px 9px; }
.lb-controls select.lb-mode { width: auto; min-height: 32px; font-size: var(--fs-sm); padding: 4px 8px; }
.lb-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lb-row { display: grid; grid-template-columns: 34px auto minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: var(--r-lg); background: var(--surface-2); }
.lb-row.first { background: linear-gradient(90deg, color-mix(in srgb, #f5b301 18%, var(--surface-2)), var(--surface-2) 70%); box-shadow: 0 0 0 1px color-mix(in srgb, #f5b301 40%, transparent) inset; }
.lb-rank { font-size: var(--fs-2xl); text-align: center; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.lb-who { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lb-name { font-weight: 700; display: flex; gap: 6px; align-items: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-crown { font-size: var(--fs-base); }
.lb-bars { display: flex; flex-direction: column; gap: 3px; max-width: 360px; }
.lb-bar { height: 6px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.lb-bar > span { display: block; height: 100%; border-radius: inherit; transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.lb-bar.done > span { background: var(--mint); }
.lb-bar.claimed > span { background: var(--signal); }
.lb-nums { display: flex; gap: 14px; text-align: center; }
.lb-nums b { display: block; font-size: var(--fs-xl); font-variant-numeric: tabular-nums; line-height: 1.1; }
.lb-nums div:first-child b { color: var(--mint); }
.lb-nums div:last-child b { color: var(--signal); }
.lb-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.lb-badge-e { font-size: var(--fs-sm); }
.lb-badge-x { border: 0; background: none; color: var(--ink-3); padding: 2px; border-radius: 50%; cursor: pointer; display: inline-grid; place-items: center; }
.lb-badge-x:hover { background: var(--surface-3); color: var(--ink); }
.lb-give { white-space: nowrap; }
.lb-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.lb-preset { display: flex; gap: 6px; align-items: center; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-md); padding: 5px 8px; font: inherit; font-size: var(--fs-sm); cursor: pointer; text-align: left; color: var(--ink); }
.lb-preset:hover { background: var(--surface-2); }
.lb-preset span { font-size: var(--fs-lg); }
.lb-em { font-size: var(--fs-2xl); width: 44px; justify-content: center; padding: 0; }
.lb-empty { margin: 14px 0 4px; }
.lb-foot { margin: 10px 0 0; }
@media (max-width: 640px) {
  .lb-row { grid-template-columns: 28px auto minmax(0, 1fr) auto; row-gap: 6px; }
  .lb-who { grid-column: 3 / -1; }
  .lb-nums { grid-column: 3; grid-row: 2; gap: 12px; text-align: left; font-size: var(--fs-xs); }
  .lb-nums b { display: inline; font-size: var(--fs-base); margin-right: 3px; }
  .lb-give { grid-column: 4; grid-row: 2; justify-self: end; }
  .lb-bars { display: none; }
}
.lb-badges { min-width: 0; }
.lb-badge { padding: 1px 4px 1px 7px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); max-width: 100%; min-width: 0; }
.lb-badge-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ---------- Verend effect links/rechts op het bord ---------- */
.board-body.h-release > .lists > * { transition: transform .4s cubic-bezier(.2, .8, .2, 1); }

/* ---------- Geanimeerde randen rond avatars (badge-decoraties) ----------
   De ring zit net buiten de avatar; de avatar ligt erboven, dus enkel de rand is zichtbaar. */
.av-wrap.deco { isolation: isolate; }
.av-wrap.deco > .avatar { position: relative; z-index: 1; box-shadow: 0 0 0 1.5px var(--surface); }
.av-wrap.deco::before { content: ''; position: absolute; inset: -3px; border-radius: 50%; z-index: 0; pointer-events: none; }
.av-wrap.deco > .av-award { z-index: 3; }
@keyframes deco-spin { to { rotate: 360deg; } }
@keyframes deco-pulse { 50% { opacity: .55; scale: 1.06; } }
@keyframes deco-flicker { 0%, 100% { filter: brightness(1) saturate(1.1); } 30% { filter: brightness(1.35) saturate(1.4); } 60% { filter: brightness(.9); } }
@keyframes deco-neon { 0%, 100% { box-shadow: 0 0 6px 1px #22e1ff, 0 0 0 2px #22e1ff; } 50% { box-shadow: 0 0 9px 2px #ff3df2, 0 0 0 2px #ff3df2; } }
@keyframes deco-twinkle { 0%, 100% { opacity: 0; scale: .4; } 45% { opacity: 1; scale: 1; } }
@keyframes deco-float { 0% { opacity: 0; translate: 0 2px; scale: .6; } 30% { opacity: 1; } 100% { opacity: 0; translate: 0 -14px; scale: 1; } }

.deco-glow::before { background: var(--signal); filter: blur(3px); animation: deco-pulse 2.2s ease-in-out infinite; }
.deco-rainbow::before { background: conic-gradient(#ff4d4d, #ffb84d, #f5f54d, #4dff88, #4dd2ff, #7a4dff, #ff4dd8, #ff4d4d); animation: deco-spin 3s linear infinite; }
.deco-fire::before { inset: -3.5px; background: conic-gradient(from 0deg, #ff2d00, #ff8a00, #ffd000, #ff5a00, #ff2d00, #ffb000, #ff2d00); animation: deco-spin 1.6s linear infinite, deco-flicker .9s ease-in-out infinite; box-shadow: 0 0 8px 1px rgba(255, 110, 0, .55); }
.deco-sparkle::before { background: conic-gradient(#ffe27a, #fff6c9, #ffd23f, #fff6c9, #ffe27a); animation: deco-spin 5s linear infinite; }
.deco-neon::before { inset: -2px; background: transparent; animation: deco-neon 2.4s ease-in-out infinite; }
.deco-gold::before { background: conic-gradient(#b8860b, #ffd700, #fff3b0, #ffd700, #b8860b, #ffcc33, #b8860b); animation: deco-spin 4s linear infinite; box-shadow: 0 0 7px rgba(255, 200, 40, .55); }
.deco-ice::before { background: conic-gradient(#bdf2ff, #5fd3ff, #ffffff, #8be4ff, #bdf2ff); animation: deco-spin 6s linear infinite; box-shadow: 0 0 7px rgba(120, 220, 255, .6); }
.deco-love::before { background: conic-gradient(#ff5fa2, #ff9ac8, #ff2d7a, #ff9ac8, #ff5fa2); animation: deco-spin 4s linear infinite; }

/* sterretjes en hartjes rond de avatar */
.deco-fx { position: absolute; inset: -6px; z-index: 2; pointer-events: none; }
.deco-fx::before, .deco-fx::after { position: absolute; font-size: 9px; line-height: 1; }
.deco-sparkle .deco-fx::before { content: '✦'; color: #ffe27a; top: 0; right: 0; animation: deco-twinkle 1.8s ease-in-out infinite; }
.deco-sparkle .deco-fx::after { content: '✦'; color: #fff; bottom: 1px; left: -1px; font-size: 7px; animation: deco-twinkle 1.8s ease-in-out .9s infinite; }
.deco-love .deco-fx::before { content: '♥'; color: #ff4f93; top: -2px; right: 2px; animation: deco-float 2.2s ease-out infinite; }
.deco-love .deco-fx::after { content: '♥'; color: #ff9ac8; top: 0; left: 1px; font-size: 7px; animation: deco-float 2.2s ease-out 1.1s infinite; }

/* animaties uit (Kaartweergave) */
body.dv-noanim .av-wrap.deco::before, body.dv-noanim .deco-fx::before, body.dv-noanim .deco-fx::after { animation: none; }

/* badge-dialoog: voorbeeld en keuze van de rand */
.lb-preview { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: var(--r-lg); background: var(--surface-2); }
.lb-decos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.lb-deco { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 2px 5px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); cursor: pointer; color: var(--ink-2); font: inherit; }
.lb-deco small { font-size: var(--fs-2xs); font-weight: 600; }
.lb-deco:hover { background: var(--surface-2); }
.lb-deco.on { border-color: var(--signal); box-shadow: 0 0 0 1px var(--signal) inset; color: var(--ink); }
.lb-deco-dot { width: 22px; height: 22px; background: var(--surface-3); }
.lb-deco-none { width: 22px; height: 22px; display: grid; place-items: center; color: var(--ink-3); font-size: var(--fs-base); }
.lb-pick { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 6px; display: flex; flex-direction: column; gap: 6px; }
.lb-pick.hidden { display: none; }

/* ---------- Meer randen (in de stijl van avatar-decoraties in Discord) ---------- */
@keyframes deco-hue { to { filter: hue-rotate(360deg); } }
@keyframes deco-fall { 0% { opacity: 0; translate: 0 -8px; rotate: 0deg; } 20% { opacity: 1; } 100% { opacity: 0; translate: 4px 16px; rotate: 160deg; } }
@keyframes deco-rise { 0% { opacity: 0; translate: 0 6px; scale: .5; } 25% { opacity: .9; } 100% { opacity: 0; translate: 0 -16px; scale: 1.1; } }
@keyframes deco-zap { 0%, 100% { opacity: 0; } 8%, 14% { opacity: 1; } 10% { opacity: .2; } 50% { opacity: 0; } 54%, 58% { opacity: 1; } }
@keyframes deco-wave { 0%, 100% { border-radius: 50% 46% 52% 48%; rotate: 0deg; } 50% { border-radius: 46% 52% 48% 54%; rotate: 180deg; } }
@keyframes deco-glitch { 0%, 100% { translate: 0 0; } 20% { translate: -1px 1px; } 40% { translate: 1px -1px; } 60% { translate: -1px 0; } 80% { translate: 1px 1px; } }
@keyframes deco-drip { 0% { opacity: 0; translate: 0 0; scale: .5; } 30% { opacity: 1; scale: 1; } 100% { opacity: 0; translate: 0 12px; scale: .6; } }
@keyframes deco-matrix { 0% { opacity: 0; translate: 0 -10px; } 30% { opacity: 1; } 100% { opacity: 0; translate: 0 14px; } }
@keyframes deco-ghost { 0%, 100% { translate: 0 0; opacity: .85; } 50% { translate: 0 -4px; opacity: 1; } }

.deco-galaxy::before { background: conic-gradient(#2a0a5e, #6b2bd9, #1b8fff, #e04dff, #2a0a5e, #9b5cff, #2a0a5e); animation: deco-spin 6s linear infinite; box-shadow: 0 0 8px rgba(140, 80, 255, .55); }
.deco-ocean::before { background: conic-gradient(#0077b6, #00b4d8, #90e0ef, #00b4d8, #0077b6, #48cae4, #0077b6); animation: deco-wave 4s ease-in-out infinite; box-shadow: 0 0 7px rgba(0, 180, 216, .5); }
.deco-lightning::before { background: conic-gradient(#fff7a8, #ffe600, #6ec6ff, #ffffff, #ffe600, #6ec6ff, #fff7a8); animation: deco-spin 1.1s linear infinite, deco-flicker .35s steps(2) infinite; box-shadow: 0 0 9px rgba(255, 240, 80, .7); }
.deco-toxic::before { background: conic-gradient(#39ff14, #b3ff00, #00ff9c, #2bd600, #39ff14); animation: deco-spin 3s linear infinite, deco-pulse 1.6s ease-in-out infinite; box-shadow: 0 0 9px rgba(57, 255, 20, .6); }
.deco-sakura::before { background: conic-gradient(#ffc0d9, #ff8fb8, #ffe3ee, #ff8fb8, #ffc0d9); animation: deco-spin 7s linear infinite; }
.deco-snow::before { background: conic-gradient(#ffffff, #d6f3ff, #a9e4ff, #ffffff, #d6f3ff); animation: deco-spin 8s linear infinite; box-shadow: 0 0 6px rgba(200, 240, 255, .7); }
.deco-spooky::before { background: conic-gradient(#ff7a00, #3b0a57, #ff7a00, #1a1a1a, #ff7a00); animation: deco-spin 4s linear infinite; box-shadow: 0 0 8px rgba(255, 122, 0, .5); }
.deco-cyber::before { inset: -2.5px; border-radius: 30%; background: conic-gradient(#00f0ff 0 25%, transparent 0 30%, #ff00c8 0 55%, transparent 0 60%, #00f0ff 0 85%, transparent 0); animation: deco-spin 2.5s steps(12) infinite, deco-glitch .3s steps(2) infinite; filter: drop-shadow(0 0 3px #00f0ff); }
.deco-aurora::before { background: conic-gradient(#00ffa3, #00c3ff, #a855f7, #ff4fd8, #00ffa3); animation: deco-spin 5s linear infinite, deco-hue 9s linear infinite; filter: blur(.6px); box-shadow: 0 0 10px rgba(0, 255, 180, .45); }
.deco-lava::before { background: conic-gradient(#3a0000, #ff3d00, #ffb000, #b30000, #ff5a00, #3a0000); animation: deco-wave 3s ease-in-out infinite, deco-flicker 1.4s ease-in-out infinite; box-shadow: 0 0 9px rgba(255, 70, 0, .55); }
.deco-matrix::before { background: conic-gradient(#003b00, #00ff41, #008f11, #00ff41, #003b00); animation: deco-spin 3s steps(16) infinite; box-shadow: 0 0 7px rgba(0, 255, 65, .55); }
.deco-rgb::before { background: conic-gradient(#ff0000, #ff8000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000); animation: deco-spin 1.2s linear infinite, deco-hue 2.4s linear infinite; box-shadow: 0 0 8px rgba(255, 0, 255, .45); }
.deco-bubbles::before { background: conic-gradient(#7fd8ff, #c8f1ff, #4fb6ff, #c8f1ff, #7fd8ff); animation: deco-spin 6s linear infinite; }
.deco-orbit::before { inset: -4px; background: transparent; border: 1.5px dashed color-mix(in srgb, var(--signal) 70%, white); animation: deco-spin 6s linear infinite; }

/* deeltjes */
.deco-galaxy .deco-fx::before { content: '✦'; color: #e9d5ff; top: -1px; left: 1px; font-size: 8px; animation: deco-twinkle 2.2s ease-in-out infinite; }
.deco-galaxy .deco-fx::after { content: '✧'; color: #a5d8ff; bottom: 0; right: 0; font-size: 8px; animation: deco-twinkle 2.2s ease-in-out 1.1s infinite; }
.deco-lightning .deco-fx::before { content: '⚡'; top: -3px; right: -2px; font-size: 10px; animation: deco-zap 1.8s linear infinite; }
.deco-lightning .deco-fx::after { content: '⚡'; bottom: -2px; left: -2px; font-size: 8px; animation: deco-zap 1.8s linear .9s infinite; }
.deco-toxic .deco-fx::before { content: '●'; color: #39ff14; bottom: -3px; left: 45%; font-size: 6px; animation: deco-drip 1.8s ease-in infinite; }
.deco-toxic .deco-fx::after { content: '●'; color: #b3ff00; bottom: -2px; left: 20%; font-size: 5px; animation: deco-drip 1.8s ease-in .9s infinite; }
.deco-sakura .deco-fx::before { content: '🌸'; top: -4px; left: 0; font-size: 8px; animation: deco-fall 3s linear infinite; }
.deco-sakura .deco-fx::after { content: '🌸'; top: -2px; right: 2px; font-size: 7px; animation: deco-fall 3s linear 1.5s infinite; }
.deco-snow .deco-fx::before { content: '❄'; color: #fff; top: -3px; left: 2px; font-size: 8px; animation: deco-fall 3.4s linear infinite; }
.deco-snow .deco-fx::after { content: '❄'; color: #d6f3ff; top: -3px; right: 3px; font-size: 6px; animation: deco-fall 3.4s linear 1.7s infinite; }
.deco-spooky .deco-fx::before { content: '👻'; top: -6px; right: -4px; font-size: 10px; animation: deco-ghost 2.4s ease-in-out infinite; }
.deco-spooky .deco-fx::after { content: '🦇'; bottom: -3px; left: -5px; font-size: 8px; animation: deco-ghost 2.4s ease-in-out 1.2s infinite; }
.deco-matrix .deco-fx::before { content: '1'; color: #00ff41; top: 0; left: 2px; font: 700 7px monospace; animation: deco-matrix 1.6s linear infinite; }
.deco-matrix .deco-fx::after { content: '0'; color: #00ff41; top: 0; right: 3px; font: 700 7px monospace; animation: deco-matrix 1.6s linear .8s infinite; }
.deco-bubbles .deco-fx::before { content: '○'; color: #bfefff; bottom: 0; left: 3px; font-size: 8px; animation: deco-rise 2.4s ease-out infinite; }
.deco-bubbles .deco-fx::after { content: '○'; color: #7fd8ff; bottom: 0; right: 3px; font-size: 6px; animation: deco-rise 2.4s ease-out 1.2s infinite; }
.deco-orbit .deco-fx { animation: deco-spin 2.2s linear infinite; }
.deco-orbit .deco-fx::before { content: ''; width: 6px; height: 6px; border-radius: 50%; top: 0; left: 50%; translate: -50% 0; background: var(--signal); box-shadow: 0 0 6px var(--signal); }
.deco-orbit .deco-fx::after { content: ''; width: 4px; height: 4px; border-radius: 50%; bottom: 0; left: 50%; translate: -50% 0; background: #ffd23f; box-shadow: 0 0 5px #ffd23f; }
body.dv-noanim .deco-fx { animation: none; }

/* dialogen */

.lb-dialog .lb-decos { grid-template-columns: repeat(6, 1fr); }
.lb-dialog .lb-deco small { font-size: 9.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.lb-em.none { color: var(--ink-3); font-size: var(--fs-lg); }
.lb-custom { display: flex; flex-direction: column; gap: 6px; }
.lb-custom.hidden { display: none; }
.lb-custom .input[type="number"] { width: 80px; }
.lb-dur button { padding: 4px 7px; }
.lb-badge-ring { width: 12px; height: 12px; background: var(--surface-3); }
.lb-badge .av-wrap.deco { margin-right: 2px; }
.lb-custom span { white-space: nowrap; }

/* ---------- Status (online / afwezig / niet storen), zoals in Discord ---------- */
.presence-dot.pres-idle::after { background: radial-gradient(circle at 28% 28%, var(--surface) 0 32%, var(--pres-idle) 34%); }
.presence-dot.pres-dnd::after { background: linear-gradient(#fff, #fff) center / 55% 2px no-repeat, var(--pres-dnd); }
.board-head .presence-dot::after { box-shadow: 0 0 0 2px var(--paper); }
.photo-board .board-head .presence-dot::after { box-shadow: 0 0 0 2px rgba(10, 11, 13, .7); }
.board-head .presence-dot.pres-idle::after { background: radial-gradient(circle at 28% 28%, #1a2130 0 32%, var(--pres-idle) 34%); }
.pres-swatch { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; margin: 0 3px; display: inline-block; }
.pres-swatch.pres-auto { background: var(--pres-online); }
.pres-swatch.pres-away { background: radial-gradient(circle at 28% 28%, var(--surface) 0 32%, var(--pres-idle) 34%); }
.pres-swatch.pres-dnd { background: linear-gradient(#fff, #fff) center / 55% 2px no-repeat, var(--pres-dnd); }
.pres-swatch.pres-invisible { background: transparent; box-shadow: 0 0 0 2px var(--ink-3) inset; }
.pres-msg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
.pres-text { color: var(--ink-2); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 210px; }

/* ---------- Deeltjes en oren/hoorns mogen buiten de balk uitsteken (boven de bovenbalk) ---------- */
.board-head .av-wrap { z-index: 41; }

/* ---------- Nog meer randen: dingen op je hoofd en effecten ---------- */
@keyframes deco-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2px; } }
@keyframes deco-radar { 0% { opacity: .8; scale: 1; } 100% { opacity: 0; scale: 1.45; } }
@keyframes deco-confetti { 0% { opacity: 0; translate: 0 -4px; rotate: 0deg; } 15% { opacity: 1; } 100% { opacity: 0; translate: var(--cx, 6px) 16px; rotate: 280deg; } }
@keyframes deco-note { 0% { opacity: 0; translate: 0 4px; } 25% { opacity: 1; } 100% { opacity: 0; translate: 6px -14px; rotate: 18deg; } }
@keyframes deco-smoke { 0% { opacity: .0; scale: .6; translate: 0 2px; } 30% { opacity: .55; } 100% { opacity: 0; scale: 1.6; translate: 0 -12px; } }

.deco-catears::before { background: conic-gradient(#ff9ac8, #ffd1e6, #ff9ac8); }
.deco-catears .deco-fx::before, .deco-catears .deco-fx::after { content: ''; top: -1px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid #ff8fbf; filter: drop-shadow(0 0 1px rgba(0, 0, 0, .4)); animation: deco-bob 2.6s ease-in-out infinite; }
.deco-catears .deco-fx::before { left: 0; rotate: -24deg; }
.deco-catears .deco-fx::after { right: 0; rotate: 24deg; animation-delay: .3s; }

.deco-horns::before { background: conic-gradient(#7a0000, #ff2b2b, #7a0000, #ff5a1f, #7a0000); animation: deco-spin 5s linear infinite; box-shadow: 0 0 6px rgba(255, 40, 40, .5); }
.deco-horns .deco-fx::before, .deco-horns .deco-fx::after { content: ''; top: -2px; width: 7px; height: 11px; background: linear-gradient(#ff3b3b, #8b0000); border-radius: 80% 20% 0 0; animation: deco-bob 2.2s ease-in-out infinite; }
.deco-horns .deco-fx::before { left: 3px; rotate: -18deg; }
.deco-horns .deco-fx::after { right: 3px; rotate: 18deg; transform: scaleX(-1); }

.deco-halo::before { background: conic-gradient(#fff6c9, #ffe27a, #fff6c9); opacity: .65; }
.deco-halo .deco-fx::before { content: ''; top: -8px; left: 50%; translate: -50% 0; width: 70%; height: 6px; border-radius: 50%; border: 2px solid #ffe27a; box-shadow: 0 0 8px #ffe27a, 0 0 2px #fff inset; animation: deco-bob 2.4s ease-in-out infinite; }
.deco-halo .deco-fx::after { content: '✦'; color: #fff6c9; font-size: 7px; top: -10px; right: 12%; animation: deco-twinkle 2s ease-in-out infinite; }

.deco-headphones::before { background: conic-gradient(#2b2b2b, #5b5b5b, #2b2b2b); }
.deco-headphones .deco-fx::before { content: ''; top: -4px; left: 6%; right: 6%; height: 60%; border: 3px solid #3a3a3a; border-bottom: 0; border-radius: 50% 50% 0 0 / 70% 70% 0 0; box-shadow: 0 -1px 0 #6b6b6b; }
.deco-headphones .deco-fx::after { content: ''; top: 40%; left: -1px; width: 7px; height: 11px; border-radius: var(--r-xs); background: linear-gradient(#ff3df2, #7a4dff); box-shadow: calc(100% + 0px) 0 0 0 transparent; animation: deco-hue 4s linear infinite; }
.deco-headphones .deco-fx { --hp-r: 0; }
.deco-headphones::after { content: ''; position: absolute; z-index: 2; top: 40%; right: -1px; width: 7px; height: 11px; border-radius: var(--r-xs); background: linear-gradient(#ff3df2, #7a4dff); animation: deco-hue 4s linear infinite; pointer-events: none; }

.deco-music::before { background: conic-gradient(#7a4dff, #ff4dd8, #4dd2ff, #7a4dff); animation: deco-spin 4s linear infinite; }
.deco-music .deco-fx::before { content: '♪'; color: #ff9af0; top: 0; right: -2px; font-size: 10px; animation: deco-note 2s ease-out infinite; }
.deco-music .deco-fx::after { content: '♫'; color: #9ad8ff; top: 2px; left: -3px; font-size: 9px; animation: deco-note 2s ease-out 1s infinite; }

.deco-confetti::before { background: conic-gradient(#ff4d4d, #ffd23f, #4dff88, #4dd2ff, #b44dff, #ff4d4d); animation: deco-spin 2.5s linear infinite; }
.deco-confetti .deco-fx::before { content: '▪'; color: #ffd23f; top: -2px; left: 4px; font-size: 8px; --cx: -5px; animation: deco-confetti 1.6s ease-in infinite; }
.deco-confetti .deco-fx::after { content: '▴'; color: #4dd2ff; top: -2px; right: 4px; font-size: 8px; --cx: 6px; animation: deco-confetti 1.6s ease-in .8s infinite; }

.deco-leaves::before { background: conic-gradient(#2f9e44, #94d82d, #2b8a3e, #c0eb75, #2f9e44); animation: deco-spin 7s linear infinite; }
.deco-leaves .deco-fx::before { content: '🍃'; top: -4px; left: 0; font-size: 8px; animation: deco-fall 3.2s linear infinite; }
.deco-leaves .deco-fx::after { content: '🍂'; top: -2px; right: 1px; font-size: 7px; animation: deco-fall 3.2s linear 1.6s infinite; }

.deco-radar::before { background: conic-gradient(from 0deg, transparent 0 70%, #22e1ff 100%); animation: deco-spin 1.6s linear infinite; }
.deco-radar::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid #22e1ff; animation: deco-radar 1.6s ease-out infinite; pointer-events: none; z-index: 0; }

.deco-vortex::before { background: repeating-conic-gradient(#7a4dff 0 15deg, #1b0b3a 15deg 30deg); animation: deco-spin .9s linear infinite; }
.deco-synthwave::before { background: conic-gradient(#ff2fd0, #ff8a00, #ffe100, #00e5ff, #7a4dff, #ff2fd0); animation: deco-spin 3.5s linear infinite; box-shadow: 0 0 10px rgba(255, 47, 208, .55); }
.deco-candy::before { background: repeating-conic-gradient(#ff5fa2 0 20deg, #ffffff 20deg 40deg); animation: deco-spin 3s linear infinite; }
.deco-diamond::before { background: conic-gradient(#e0f7ff, #ffffff, #9be7ff, #ffffff, #e0f7ff, #c7d2ff, #e0f7ff); animation: deco-spin 5s linear infinite; box-shadow: 0 0 8px rgba(190, 240, 255, .8); }
.deco-diamond .deco-fx::before { content: '◆'; color: #e0f7ff; top: -2px; right: 1px; font-size: 7px; animation: deco-twinkle 1.6s ease-in-out infinite; }
.deco-diamond .deco-fx::after { content: '✦'; color: #fff; bottom: -1px; left: 1px; font-size: 7px; animation: deco-twinkle 1.6s ease-in-out .8s infinite; }
.deco-smoke::before { background: conic-gradient(#2b2b2b, #6b6b6b, #2b2b2b, #9a9a9a, #2b2b2b); animation: deco-spin 6s linear infinite; }
.deco-smoke .deco-fx::before { content: ''; top: -2px; left: 20%; width: 9px; height: 9px; border-radius: 50%; background: rgba(200, 200, 200, .55); filter: blur(2px); animation: deco-smoke 2.6s ease-out infinite; }
.deco-smoke .deco-fx::after { content: ''; top: -2px; right: 20%; width: 7px; height: 7px; border-radius: 50%; background: rgba(170, 170, 170, .5); filter: blur(2px); animation: deco-smoke 2.6s ease-out 1.3s infinite; }
body.dv-noanim .av-wrap.deco::after { animation: none; }

/* ---------- Scrollbalken: dun, afgerond, licht, zonder pijltjes ---------- */
:root { --sb-thumb: rgba(16, 17, 19, .22); --sb-thumb-hover: rgba(16, 17, 19, .4); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sb-thumb: rgba(255, 255, 255, .2); --sb-thumb-hover: rgba(255, 255, 255, .38); } }
:root[data-theme="dark"] { --sb-thumb: rgba(255, 255, 255, .2); --sb-thumb-hover: rgba(255, 255, 255, .38); }
/* op een foto als achtergrond altijd een lichte balk */
.photo-board .board-body { --sb-thumb: rgba(255, 255, 255, .3); --sb-thumb-hover: rgba(255, 255, 255, .5); }
.board-body .list { --sb-thumb: color-mix(in srgb, currentColor 30%, transparent); --sb-thumb-hover: color-mix(in srgb, currentColor 50%, transparent); }

/* Chrome, Edge, Safari (en de desktop-app) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
/* niet tot in afgeronde hoeken lopen */
::-webkit-scrollbar-track:vertical { margin-block: 10px; }
::-webkit-scrollbar-track:horizontal { margin-inline: 10px; }
.dock-panel::-webkit-scrollbar-track:vertical, .dock-scroll::-webkit-scrollbar-track:vertical, .popover::-webkit-scrollbar-track:vertical, .modal::-webkit-scrollbar-track:vertical { margin-block: 14px; }
::-webkit-scrollbar-thumb { background-color: var(--sb-thumb); background-clip: padding-box; border: 3px solid transparent; border-radius: var(--r-pill); min-height: 32px; min-width: 32px; }
::-webkit-scrollbar-thumb:hover { background-color: var(--sb-thumb-hover); }
::-webkit-scrollbar-thumb:active { background-color: var(--sb-thumb-hover); border-width: 2px; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
/* Firefox en browsers die erop gebouwd zijn (Zen, LibreWolf…): kennen de bovenstaande niet.
   Ook de baan krijgt een eigen kleur: met "transparent" tekenen sommige versies een witte baan. */
@supports (-moz-appearance: none) or (not selector(::-webkit-scrollbar)) {
  * { scrollbar-width: thin; scrollbar-color: var(--sb-thumb) var(--sb-track, transparent); }
  .board-body .list { --sb-track: color-mix(in srgb, currentColor 6%, transparent); }
}

/* ---------- Zachte rand links/rechts op het bord (in plaats van een harde snede) ---------- */
.board-body { --fade-l: 0px; --fade-r: 0px; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%); }
.board-body.fade-l { --fade-l: 28px; }
.board-body.fade-r { --fade-r: 28px; }
@media (max-width: 640px) { .board-body.fade-l { --fade-l: 16px; } .board-body.fade-r { --fade-r: 16px; } }

/* ---------- Zijpanelen: links of rechts, breedte verslepen ---------- */
.dock-panel { position: relative; }
.board-split.dock-right { flex-direction: row-reverse; }
.board-split.dock-right .dock-panels { padding: 12px 14px 76px 0; flex-direction: row-reverse; }
.dock-grip { position: absolute; top: 14px; bottom: 14px; right: 0; width: 10px; cursor: col-resize; z-index: 3; border-radius: var(--r-sm); touch-action: none; }
.board-split.dock-right .dock-grip { right: auto; left: 0; }
.dock-grip::after { content: ''; position: absolute; top: 50%; left: 50%; width: 4px; height: 38px; translate: -50% -50%; border-radius: var(--r-xs); background: var(--sb-thumb, rgba(255, 255, 255, .25)); opacity: 0; transition: opacity .15s, height .15s; }
.dock-panel:hover > .dock-grip::after, .dock-grip:focus-visible::after, body.dock-resizing .dock-grip::after { opacity: 1; }
.dock-grip:hover::after, body.dock-resizing .dock-grip::after { height: 64px; background: var(--signal); }
body.dock-resizing, body.dock-resizing * { cursor: col-resize !important; user-select: none; }
.board-split.board-hidden .dock-panel { width: auto !important; }
.board-split.board-hidden .dock-grip { display: none; }
@media (max-width: 720px) { .dock-grip, .dock-side { display: none !important; } .dock-panel { width: auto !important; } }
.dock-side.hidden { display: none; }

/* GitHub: naam van de repository */
.gh-repo { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-3); text-decoration: none; padding: 2px 8px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }
.gh-repo:hover { color: var(--ink); background: var(--surface-3); }
.gh-repo-sel { font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); background: var(--surface-2); border: 0; border-radius: var(--r-pill); padding: 3px 8px; max-width: 150px; cursor: pointer; }

/* hoogte van een paneel aanpassen (greep onderaan) */
.dock-vgrip { position: absolute; left: 30%; right: 30%; bottom: 0; height: 10px; cursor: row-resize; z-index: 3; touch-action: none; }
.dock-vgrip::after { content: ''; position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 38px; height: 4px; border-radius: var(--r-xs); background: var(--sb-thumb, rgba(255, 255, 255, .25)); opacity: 0; transition: opacity .15s, width .15s; }
.dock-panel:hover > .dock-vgrip::after { opacity: 1; }
.dock-vgrip:hover::after { width: 64px; background: var(--signal); }
.board-split.board-hidden .dock-panel { height: auto !important; }
.board-split.board-hidden .dock-vgrip { display: none; }
@media (max-width: 720px) { .dock-vgrip { display: none !important; } }
.dock { z-index: var(--z-dock); }

/* ---------- Paneel = vaste rand + scrollende binnenlaag ---------- */
.dock-panel { padding: 0 !important; gap: 0 !important; overflow: hidden !important; }
.dock-panel > .dock-scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 10px; overscroll-behavior: contain; }

/* ---------- Avatars bovenaan het bord: versleepbaar ---------- */
.board-head .avatars { user-select: none; touch-action: none; }
.board-head .avatars .av-item { position: relative; cursor: grab; transition: translate .2s cubic-bezier(.2, .8, .2, 1), scale .15s ease, opacity .15s; }
.board-head .avatars:not(.av-sorting) .av-item:hover { scale: 1.1; z-index: 2; }
.board-head .avatars.av-sorting .av-item { cursor: grabbing; }
.board-head .avatars .av-item.av-dragging { transition: scale .15s ease; scale: 1.2; z-index: 5; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); }
.board-head .avatars .av-item.av-lifted { opacity: .35; }
/* eigen avatar naar een kaart slepen */
.av-ghost { position: fixed; z-index: 9999; pointer-events: none; translate: -50% -50%; scale: 1.25; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .5)); transition: scale .15s ease; margin: 0 !important; }
.av-ghost.av-ghost-drop { transition: left .22s cubic-bezier(.2, .8, .2, 1), top .22s cubic-bezier(.2, .8, .2, 1), scale .22s ease, opacity .22s ease .1s; scale: .8; opacity: 0; }
.av-ghost.av-ghost-back { transition: left .22s cubic-bezier(.2, .8, .2, 1), top .22s cubic-bezier(.2, .8, .2, 1), scale .22s ease; scale: 1; }
body.av-card-drag, body.av-card-drag * { cursor: grabbing !important; user-select: none; }
.card.av-drop-target { box-shadow: 0 0 0 2px var(--signal) inset; scale: 1.02; transition: scale .12s ease; }
.card.av-drop-target::after { opacity: 1; box-shadow: 0 0 0 3px var(--signal) inset; }

/* rand bij muis over een kaart: als laag bovenop, zodat ze ook over een omslagfoto loopt */
.card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 2px var(--card-ring) inset; opacity: 0; pointer-events: none; z-index: 3; transition: opacity .12s ease; }
.card:hover::after { opacity: 1; }
.card.sortable-ghost::after, .card.sortable-drag::after { opacity: 0; }

/* aanmaakdatum in de kopbalk van een kaart */
.cm-reactions .cm-created { margin-left: 6px; }
.cm-created { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-3); font-family: var(--mono); font-size: var(--fs-2xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (max-width: 640px) { .cm-created-by { display: none; } }

/* GitHub-paneel: vastpakken en slepen om te scrollen */
.gh-panel > .dock-scroll { cursor: grab; }
.gh-panel > .dock-scroll a, .gh-panel > .dock-scroll button, .gh-panel > .dock-scroll select, .gh-panel > .dock-scroll input { cursor: pointer; }
.gh-panel > .dock-scroll.grab-scrolling, .gh-panel > .dock-scroll.grab-scrolling * { cursor: grabbing !important; user-select: none; }

/* ---------- Voorstellen om iemand aan een kaart toe te kennen ---------- */
.avatar.av-pending { opacity: .75; box-shadow: none !important; outline: 1.5px dashed currentColor; outline-offset: -1.5px; filter: grayscale(.4); }
.cm-pending { position: relative; display: inline-flex; }
.cm-pending-x { position: absolute; top: -4px; right: -4px; width: 16px; height: 16px; border-radius: 50%; border: 0; display: grid; place-items: center; padding: 0; cursor: pointer; background: var(--surface-3, var(--surface-2)); color: var(--ink-2); box-shadow: 0 0 0 1px var(--line); opacity: 0; transition: opacity .12s; }
.cm-pending:hover .cm-pending-x, .cm-pending-x:focus-visible { opacity: 1; }
.assign-pill { display: inline-flex; align-items: center; gap: 6px; border: 0; cursor: pointer; font: inherit; font-size: var(--fs-sm); font-weight: 600; padding: 5px 11px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--signal) 22%, transparent); color: #fff; white-space: nowrap; transition: background .15s; }
.assign-pill:hover { background: color-mix(in srgb, var(--signal) 36%, transparent); }
.assign-pill.hidden { display: none; }
.ar-head { margin-bottom: 4px; }
.ar-row { display: flex; align-items: center; gap: 4px; padding: 6px 0; border-top: 1px solid var(--line); }
.ar-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; border: 0; background: none; padding: 2px 4px; border-radius: var(--r-sm); cursor: pointer; text-align: left; font: inherit; color: inherit; }
.ar-main:hover { background: var(--surface-2); }
.ar-title, .ar-sub { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-title { font-size: var(--fs-md); }
.ar-yes:hover { color: var(--green); }
.ar-no:hover { color: var(--red); }
@media (max-width: 640px) { .assign-pill span { display: none; } }

/* ---------- Zijpaneel (bordmenu, filter): zwevend, afgerond, zoals de rest ---------- */
.drawer { top: calc(var(--topbar) + 10px); right: 10px; bottom: 10px; width: 372px; max-width: calc(100vw - 20px); border-radius: var(--r-panel); overflow: hidden;
  background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: var(--pop-shadow); border: 1px solid var(--line); animation: drawer-in .2s cubic-bezier(.2, .8, .2, 1); }
@keyframes drawer-in { from { opacity: 0; translate: 16px 0; } }
.drawer-head { padding: 12px 12px 12px 16px; min-height: 56px; }
.drawer-head h3 { font-size: var(--fs-lg); margin: 0; }
.drawer-body { padding: 14px 14px 18px; }
@media (max-width: 640px) { .drawer { right: 0; bottom: 0; top: var(--topbar); max-width: 100vw; width: 100vw; border-radius: 0; border: 0; } }

/* bordmenu */
.bm { display: flex; flex-direction: column; gap: 16px; }
.bm-hero { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--r-xl); background: var(--surface-2); overflow: hidden; }
.bm-hero-bg { flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--r-lg); background-size: cover !important; background-position: center !important; box-shadow: 0 0 0 1px var(--line) inset; }
.bm-hero-txt { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.bm-hero-txt b { font-size: var(--fs-base); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-group { display: flex; flex-direction: column; gap: 6px; }
.bm-title { color: var(--ink-3); padding: 0 4px; }
.bm-card { display: flex; flex-direction: column; background: var(--surface-2); border-radius: var(--r-xl); padding: 4px; }
.bm-row { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; padding: 8px 10px 8px 8px; border-radius: var(--r-md); cursor: pointer; transition: background .12s; }
.bm-row:hover, .bm-row:focus-visible { background: color-mix(in srgb, var(--signal) 12%, transparent); }
.bm-ico { flex: 0 0 auto; width: 32px; height: 32px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--surface); color: var(--ink-2); box-shadow: 0 0 0 1px var(--line) inset; transition: color .12s, background .12s; }
.bm-row:hover .bm-ico { color: var(--signal); background: color-mix(in srgb, var(--signal) 14%, var(--surface)); }
.bm-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bm-label { font-size: var(--fs-md); font-weight: 600; }
.bm-hint { font-size: var(--fs-sm); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-next { color: var(--ink-3); display: grid; transition: translate .15s; }
.bm-row:hover .bm-next { translate: 2px 0; color: var(--ink-2); }
.bm-lock { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-2xs); font-weight: 700; padding: 2px 7px; border-radius: var(--r-pill); background: var(--amber-soft); color: var(--amber); }
.bm-row.danger .bm-label { color: var(--red); }
.bm-row.danger .bm-ico { color: var(--red); }
.bm-row.danger:hover { background: color-mix(in srgb, var(--red) 12%, transparent); }
.bm-row.danger:hover .bm-ico { background: color-mix(in srgb, var(--red) 14%, var(--surface)); color: var(--red); }
.bm-note { margin: -6px 4px 0; }

/* ---------- Elastisch scrollen aan het begin/einde van een lijst ----------
   De kaarten schuiven binnen de lijst (die knipt alles af); de gloed is de achtergrond van de lijst zelf,
   die bij een scrollvak niet meescrolt en dus altijd netjes aan de rand blijft. */
.lists.cd-anim .list-cards[data-edge] { background-repeat: no-repeat; background-size: 100% 100%; }
.lists.cd-anim .list-cards[data-edge="bottom"] { background-image: radial-gradient(ellipse 46% 34px at 50% 100%, color-mix(in srgb, var(--signal) calc(var(--edge-glow, 0) * 50%), transparent), transparent 100%); }
.lists.cd-anim .list-cards[data-edge="top"] { background-image: radial-gradient(ellipse 46% 34px at 50% 0%, color-mix(in srgb, var(--signal) calc(var(--edge-glow, 0) * 50%), transparent), transparent 100%); }
.lists.cd-anim .list-cards.elastic-release > .card { transition: transform .55s cubic-bezier(.25, 1.5, .5, 1); }

/* ---------- Lange lijst: snel naar boven, midden of onderaan ----------
   Een smalle strook in de ruimte van de schuifbalk, rechts naast de kaarten; verschijnt bij muis over de lijst. De kaarten houden hun breedte. */
.list { position: relative; }
.list-jump { position: absolute; right: 1px; translate: 0 -50%; z-index: 3; display: none; flex-direction: column; align-items: center; gap: 0; padding: 2px 0; width: 14px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--list-bg) 70%, transparent); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity .15s ease, background .15s; }
.list-jump.on { display: flex; }
.list:hover .list-jump.on, .list-jump.on:focus-within { opacity: 1; pointer-events: auto; }
.list-jump button { width: 14px; height: 17px; border: 0; border-radius: 50%; display: grid; place-items: center; padding: 0; background: none; color: inherit; opacity: .8; cursor: pointer; transition: background .12s, opacity .12s; }
.list-jump button:hover { opacity: 1; background: color-mix(in srgb, currentColor 18%, transparent); }
.list-jump-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.list-jump.at-top .list-jump-top, .list-jump.at-bottom .list-jump-bottom { opacity: .2; pointer-events: none; }
.lists:has(.sortable-chosen) .list-jump { opacity: 0; pointer-events: none; }
.list.collapsed .list-jump { display: none; }

/* rand rond een avatar: nooit uitrekken in een flex-rij (anders wordt de rand ovaal) */
.av-wrap { height: max-content; width: max-content; }

/* ---------- Keuzelijsten (select) in de stijl van de site ---------- */
/* oudere browsers: de lijst met keuzes krijgt minstens onze kleuren */
select option, select optgroup { background-color: var(--surface); color: var(--ink); }
/* nieuwere Chrome/Edge/Opera: de openklaplijst zelf volledig in onze stijl */
@supports (appearance: base-select) {
  select.input { appearance: base-select; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
  select.input::picker-icon { color: var(--ink-3); transition: rotate .15s; }
  select.input:open::picker-icon { rotate: 180deg; }
  select.input:hover { border-color: color-mix(in srgb, var(--signal) 45%, var(--line)); }
  select.input::picker(select) { appearance: base-select; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--ink);
    box-shadow: var(--pop-shadow); padding: 4px; margin-block: 4px; min-width: anchor-size(width); max-height: min(360px, 60vh); }
  select.input option { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--r-md); font-size: var(--fs-md); background: transparent; cursor: pointer; }
  select.input option:hover, select.input option:focus-visible { background: color-mix(in srgb, var(--signal) 14%, transparent); outline: none; }
  select.input option:checked { background: color-mix(in srgb, var(--signal) 22%, transparent); font-weight: 600; }
  select.input option::checkmark { color: var(--signal); order: 1; margin-left: auto; }
  select.input option:disabled { opacity: .45; cursor: default; }
}
@supports (appearance: base-select) {
  select.input::picker-icon { content: ''; width: 12px; height: 12px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; margin-left: auto; }
  select.input { justify-content: space-between; }
}
.check > input[type="checkbox"], .check > input[type="radio"] { flex: none; }

/* bordtegels verslepen op de startpagina */
.board-grid .board-tile[data-id] { cursor: pointer; }
.board-tile.tile-chosen { scale: 1.03; box-shadow: var(--pop-shadow); }
.board-tile.tile-ghost { opacity: .35; outline: 2px dashed color-mix(in srgb, var(--signal) 70%, transparent); outline-offset: -2px; }

/* verend zijwaarts scrollen: de eerste/laatste lijst krijgt zelf een zachte gloed aan de kant waar je trekt */
.board-body .lists > .edge-pulled { transition: box-shadow .12s; }
.board-body .lists > .edge-pulled[data-edge-side="left"] { box-shadow: -14px 0 32px -10px color-mix(in srgb, var(--signal) calc(var(--edge-k, 0) * 90%), transparent), 0 0 0 calc(var(--edge-k, 0) * 2px) color-mix(in srgb, var(--signal) calc(var(--edge-k, 0) * 60%), transparent); }
.board-body .lists > .edge-pulled[data-edge-side="right"] { box-shadow: 14px 0 32px -10px color-mix(in srgb, var(--signal) calc(var(--edge-k, 0) * 90%), transparent), 0 0 0 calc(var(--edge-k, 0) * 2px) color-mix(in srgb, var(--signal) calc(var(--edge-k, 0) * 60%), transparent); }
.board-body.h-release .lists > .edge-pulled { transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease; }
/* ruimte na de laatste kolom, zodat "Nog een lijst toevoegen" niet tegen de rand plakt */
.lists::after { content: ''; flex: 0 0 2px; align-self: stretch; }

/* thema-schakelaar in het accountmenu */
.theme-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; }
.theme-row-txt { display: flex; flex-direction: column; line-height: 1.25; }
.theme-row-txt b { font-size: var(--fs-md); }
.theme-switch { --i: 0; position: relative; display: inline-flex; padding: 3px; border-radius: var(--r-pill); background: var(--surface-2); box-shadow: 0 0 0 1px var(--line) inset; }
.theme-switch button { position: relative; z-index: 1; width: 32px; height: 28px; border: 0; background: none; color: var(--ink-3); display: grid; place-items: center; border-radius: var(--r-pill); cursor: pointer; transition: color .2s; }
.theme-switch button[aria-checked="true"] { color: #fff; }
.theme-switch button:hover:not([aria-checked="true"]) { color: var(--ink); }
.theme-thumb { position: absolute; top: 3px; left: 3px; width: 32px; height: 28px; border-radius: var(--r-pill); background: var(--signal); box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--signal) 70%, transparent); translate: calc(var(--i) * 32px) 0; transition: translate .25s cubic-bezier(.3, 1.3, .5, 1); }

/* ledenlijst: duidelijke status per persoon */
.mem-row { align-items: flex-start; padding: 4px 0; }
.mem-row.is-offline > .avatar, .mem-row.is-offline > .av-wrap { opacity: .55; filter: grayscale(.5); }
.mem-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mem-n { font-weight: 600; }
.pres-pill { gap: 5px; padding: 1px 8px 1px 6px; line-height: 18px; }
.pres-pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pres-pill.pres-online { color: var(--mint-ink); background: color-mix(in srgb, var(--pres-online) 16%, transparent); }
.pres-pill.pres-idle { color: var(--amber-ink); background: color-mix(in srgb, var(--pres-idle) 18%, transparent); }
.pres-pill.pres-dnd { color: var(--red-ink); background: color-mix(in srgb, var(--pres-dnd) 16%, transparent); }
.pres-pill.pres-offline { color: var(--ink-3); background: color-mix(in srgb, var(--ink-3) 14%, transparent); }

/* ---------- Nieuwe randen (eigen ontwerpen). De animaties mogen over de foto lopen. ---------- */
@keyframes deco-dangle { 0%, 100% { translate: -50% 0; } 50% { translate: -50% 7px; } }
@keyframes deco-rain { 0% { opacity: 0; translate: 0 -6px; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; translate: 0 calc(100% + 26px); } }
@keyframes deco-rise { 0% { opacity: 0; translate: 0 4px; scale: .6; } 25% { opacity: 1; scale: 1; } 100% { opacity: 0; translate: 0 -24px; scale: .8; } }
@keyframes deco-swing { 0%, 100% { rotate: -16deg; } 50% { rotate: 16deg; } }
@keyframes deco-peek { 0%, 20% { translate: 6px 6px; opacity: 0; } 35%, 80% { translate: 0 0; opacity: 1; } 100% { translate: 6px 6px; opacity: 0; } }
@keyframes deco-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes deco-sweep { 0% { opacity: 0; translate: -10px 0; } 20%, 80% { opacity: 1; } 100% { opacity: 0; translate: calc(100% + 10px) 0; } }
@keyframes deco-beam { 0%, 100% { opacity: .15; } 50% { opacity: .65; } }
/* een laag die ronddraait: wat erop staat, draait rond de avatar */
.deco-orbit2 .deco-fx, .deco-dice .deco-fx, .deco-skulls .deco-fx, .deco-rocket .deco-fx, .deco-ufo .deco-fx, .deco-stardust .deco-fx { animation: deco-spin 5s linear infinite; }
.deco-orbit2 .deco-fx::before, .deco-dice .deco-fx::before, .deco-skulls .deco-fx::before, .deco-rocket .deco-fx::before, .deco-ufo .deco-fx::before, .deco-stardust .deco-fx::before { top: -3px; left: 50%; translate: -50% 0; }
.deco-orbit2 .deco-fx::after, .deco-dice .deco-fx::after, .deco-skulls .deco-fx::after, .deco-rocket .deco-fx::after, .deco-ufo .deco-fx::after, .deco-stardust .deco-fx::after { bottom: -3px; left: 50%; translate: -50% 0; }

/* Pompoen: oranje gerand met een lachende pompoen onderaan en een vleermuis die over de foto fladdert */
.deco-pumpkin::before { background: repeating-conic-gradient(#ff7a00 0 24deg, #c94a00 24deg 30deg); box-shadow: 0 0 6px rgba(255, 122, 0, .6); animation: deco-flicker 2.4s ease-in-out infinite; }
.deco-pumpkin .deco-fx::before { content: '🎃'; bottom: -4px; right: -4px; font-size: var(--fs-2xs); animation: deco-bob 2s ease-in-out infinite; }
.deco-pumpkin .deco-fx::after { content: '🦇'; top: 30%; left: 0; font-size: 8px; animation: deco-sweep 3.2s ease-in-out infinite; }
/* Spinnenweb: fijne witte draden met een spinnetje dat over de foto zakt */
.deco-web::before { background: repeating-conic-gradient(rgba(255, 255, 255, .85) 0 3deg, transparent 3deg 30deg), radial-gradient(circle, transparent 58%, rgba(255, 255, 255, .5) 60% 64%, transparent 66%); }
.deco-web .deco-fx::before { content: '🕷️'; top: -2px; left: 50%; font-size: 9px; animation: deco-dangle 2.6s ease-in-out infinite; }
/* Schedels: koele blauwe gloed met twee schedeltjes die ronddraaien */
.deco-skulls::before { background: conic-gradient(#32e0ff, #7a5cff, #32e0ff); box-shadow: 0 0 7px rgba(50, 224, 255, .6); }
.deco-skulls .deco-fx::before, .deco-skulls .deco-fx::after { content: '💀'; font-size: 8px; }
/* Spook: paarse lijst waarachter een spookje over de foto kijkt */
.deco-phantom::before { background: conic-gradient(#b48cff, #6b3cff, #e2d4ff, #6b3cff, #b48cff); animation: deco-spin 6s linear infinite; }
.deco-phantom .deco-fx::before { content: '👻'; bottom: 0; right: 0; font-size: var(--fs-xs); animation: deco-peek 4s ease-in-out infinite; }
.deco-phantom .deco-fx::after { content: '✦'; color: #e2d4ff; top: 0; left: 2px; font-size: 7px; animation: deco-twinkle 2s ease-in-out infinite; }
/* Verliefd: hartjes die van onder over de foto omhoog zweven */
.deco-crush::before { background: conic-gradient(#ff3d7f, #ffb3cf, #ff3d7f); box-shadow: 0 0 6px rgba(255, 61, 127, .5); }
.deco-crush .deco-fx::before { content: '💗'; bottom: 4px; left: 30%; font-size: 9px; animation: deco-rise 2.6s ease-out infinite; }
.deco-crush .deco-fx::after { content: '💕'; bottom: 4px; right: 22%; font-size: 8px; animation: deco-rise 2.6s ease-out 1.3s infinite; }
/* Winter: rood-witte rand, een muts en sneeuw over de foto */
.deco-xmas::before { background: repeating-conic-gradient(#e11d2e 0 20deg, #ffffff 20deg 40deg); animation: deco-spin 8s linear infinite; }
.deco-xmas::after { content: ''; position: absolute; z-index: 2; top: -9px; left: 8%; width: 62%; height: 12px; background: linear-gradient(#e11d2e, #b0121f); border-radius: 60% 80% 0 0; rotate: -14deg; box-shadow: 0 3px 0 -1px #fff; pointer-events: none; }
.deco-xmas .deco-fx::before { content: '❄'; color: #fff; top: 4px; left: 35%; font-size: 7px; animation: deco-rain 3s linear infinite; }
.deco-xmas .deco-fx::after { content: '●'; color: #fff; top: -12px; right: 18%; font-size: 7px; animation: deco-bob 2s ease-in-out infinite; }
/* Magisch: paars-blauwe glans met een glazen bol en vonkjes */
.deco-magic::before { background: conic-gradient(#7a4dff, #22e1ff, #ff4dd8, #7a4dff); animation: deco-spin 3.5s linear infinite; filter: blur(.3px); }
.deco-magic .deco-fx::before { content: '🔮'; bottom: -4px; left: -4px; font-size: 10px; animation: deco-bob 2.4s ease-in-out infinite; }
.deco-magic .deco-fx::after { content: '✨'; top: 20%; left: 30%; font-size: 8px; animation: deco-twinkle 1.6s ease-in-out infinite; }
/* Sterrenstof: gekleurde sterretjes die rond en over de foto draaien */
.deco-stardust::before { background: conic-gradient(from 90deg, #ff9ad5, #ffe27a, #8ef0ff, #c8a2ff, #ff9ad5); opacity: .9; animation: deco-spin 6s linear infinite reverse; }
.deco-stardust .deco-fx::before { content: '✦'; color: #ffe27a; font-size: 9px; }
.deco-stardust .deco-fx::after { content: '✧'; color: #8ef0ff; font-size: 9px; }
/* Runen: twee ringen die elk een andere kant op draaien */
.deco-runes::before { background: repeating-conic-gradient(#38ffd1 0 14deg, transparent 14deg 22deg); filter: drop-shadow(0 0 3px #38ffd1); animation: deco-spin 7s linear infinite; }
.deco-runes .deco-fx { inset: -6px; border-radius: 50%; border: 1px dashed rgba(56, 255, 209, .75); animation: deco-spin 9s linear infinite reverse; }
.deco-runes .deco-fx::before { content: 'ᚱ'; color: #38ffd1; top: -2px; left: 50%; translate: -50% 0; font-size: 8px; font-weight: 700; }
.deco-runes .deco-fx::after { content: 'ᛟ'; color: #38ffd1; bottom: -2px; left: 50%; translate: -50% 0; font-size: 8px; font-weight: 700; }
/* Vossenoren: oranje oortjes met een witte binnenkant */
.deco-fox::before { background: conic-gradient(#ff8a2b, #ffd2a6, #ff8a2b); }
.deco-fox .deco-fx::before, .deco-fox .deco-fx::after { content: ''; top: -2px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 11px solid #ff7a1a; filter: drop-shadow(0 -2px 0 #fff) drop-shadow(0 0 1px rgba(0, 0, 0, .4)); animation: deco-bob 2.4s ease-in-out infinite; }
.deco-fox .deco-fx::before { left: 0; rotate: -26deg; }
.deco-fox .deco-fx::after { right: 0; rotate: 26deg; animation-delay: .4s; }
/* Konijnenoren: lange roze oren die wiebelen */
.deco-bunny::before { background: conic-gradient(#ffd1e6, #ffffff, #ffd1e6); }
.deco-bunny .deco-fx::before, .deco-bunny .deco-fx::after { content: ''; top: -10px; width: 6px; height: 15px; border-radius: 50%; background: linear-gradient(90deg, #fff 30%, #ffb3cf 40% 60%, #fff 70%); box-shadow: 0 0 1px rgba(0, 0, 0, .5); transform-origin: 50% 100%; animation: deco-swing 2.4s ease-in-out infinite; }
.deco-bunny .deco-fx::before { left: 22%; }
.deco-bunny .deco-fx::after { right: 22%; animation-delay: -1.2s; }
/* Koe: zwart-witte vlekken en een schommelend belletje */
.deco-cow::before { background: radial-gradient(circle at 20% 30%, #111 0 18%, transparent 19%), radial-gradient(circle at 75% 20%, #111 0 14%, transparent 15%), radial-gradient(circle at 60% 85%, #111 0 16%, transparent 17%), #f4f4f4; }
.deco-cow .deco-fx::before { content: '🔔'; bottom: -5px; left: 50%; translate: -50% 0; font-size: 9px; transform-origin: 50% 0; animation: deco-swing 1.6s ease-in-out infinite; }
/* Dobbelstenen die ronddraaien */
.deco-dice::before { background: conic-gradient(#7a4dff, #4dd2ff, #7a4dff); }
.deco-dice .deco-fx::before, .deco-dice .deco-fx::after { content: '🎲'; font-size: 9px; }
/* Slijm: groen gelei met druppels die over de foto glijden */
.deco-slime::before { background: conic-gradient(#39ff14, #00c96b, #b3ff00, #39ff14); filter: blur(.6px); animation: deco-pulse 2s ease-in-out infinite; }
.deco-slime .deco-fx::before { content: ''; top: 2px; left: 38%; width: 6px; height: 8px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: rgba(57, 255, 20, .8); animation: deco-rain 2.4s ease-in infinite; }
.deco-slime .deco-fx::after { content: ''; top: 2px; left: 62%; width: 5px; height: 7px; border-radius: 50%; background: rgba(0, 220, 120, .8); animation: deco-rain 2.4s ease-in 1.2s infinite; }
/* Bokshandschoenen links en rechts */
.deco-boxing::before { background: conic-gradient(#e11d2e, #ffcc00, #e11d2e); }
.deco-boxing .deco-fx::before { content: '🥊'; top: 30%; left: -7px; font-size: 10px; animation: deco-bob 1s ease-in-out infinite; }
.deco-boxing .deco-fx::after { content: '🥊'; top: 30%; right: -7px; font-size: 10px; transform: scaleX(-1); animation: deco-bob 1s ease-in-out .5s infinite; }
/* Kroon: gouden rand met een scheve kroon */
.deco-royal::before { background: conic-gradient(#b8860b, #ffd700, #fff3b0, #ffd700, #b8860b); animation: deco-spin 5s linear infinite; box-shadow: 0 0 6px rgba(255, 200, 40, .5); }
.deco-royal .deco-fx::before { content: '👑'; top: -9px; left: 50%; translate: -50% 0; font-size: var(--fs-2xs); rotate: -12deg; animation: deco-bob 2.2s ease-in-out infinite; }
.deco-royal .deco-fx::after { content: '✦'; color: #fff3b0; top: 4px; right: 0; font-size: 7px; animation: deco-twinkle 1.8s ease-in-out infinite; }
/* Bloemenkrans: bloemetjes onderaan */
.deco-wreath::before { background: conic-gradient(#ffb3cf, #ffe9a8, #c8f7c5, #ffb3cf); }
.deco-wreath .deco-fx::before { content: '🌸🌼'; bottom: -4px; left: -2px; font-size: 8px; letter-spacing: -2px; animation: deco-bob 2.6s ease-in-out infinite; }
.deco-wreath .deco-fx::after { content: '🌷'; top: -3px; right: -2px; font-size: 8px; animation: deco-bob 2.6s ease-in-out 1.3s infinite; }
/* Neon koptelefoons in drie kleuren */
.deco-headset-blue, .deco-headset-pink, .deco-headset-green { --hs: #3d5bff; }
.deco-headset-pink { --hs: #ff3df2; }
.deco-headset-green { --hs: #7dff2b; }
.deco-headset-blue::before, .deco-headset-pink::before, .deco-headset-green::before { inset: -2px; background: transparent; box-shadow: 0 0 0 1.5px var(--hs), 0 0 8px var(--hs); animation: deco-pulse 2.2s ease-in-out infinite; }
.deco-headset-blue .deco-fx::before, .deco-headset-pink .deco-fx::before, .deco-headset-green .deco-fx::before { content: ''; top: -4px; left: 8%; right: 8%; height: 55%; border: 2.5px solid var(--hs); border-bottom: 0; border-radius: 50% 50% 0 0 / 80% 80% 0 0; filter: drop-shadow(0 0 3px var(--hs)); }
.deco-headset-blue .deco-fx::after, .deco-headset-pink .deco-fx::after, .deco-headset-green .deco-fx::after { content: ''; top: 42%; left: -2px; right: -2px; height: 11px; background: radial-gradient(circle at 4px 50%, var(--hs) 0 3.5px, transparent 4px), radial-gradient(circle at calc(100% - 4px) 50%, var(--hs) 0 3.5px, transparent 4px); filter: drop-shadow(0 0 3px var(--hs)); animation: deco-blink 1.4s ease-in-out infinite; }
/* Vlammen die onderaan over de foto omhoog likken */
.deco-blaze::before { background: conic-gradient(from 180deg, #ff2d00, #ffb000, #ff2d00); animation: deco-flicker .8s ease-in-out infinite; }
.deco-blaze .deco-fx::before { content: '🔥'; bottom: 0; left: 18%; font-size: 10px; animation: deco-rise 1.6s ease-out infinite; }
.deco-blaze .deco-fx::after { content: '🔥'; bottom: 0; right: 18%; font-size: 9px; animation: deco-rise 1.6s ease-out .8s infinite; }
/* UFO dat rondvliegt met een lichtstraal */
.deco-ufo::before { background: conic-gradient(#7dffb0, #1a1a2e, #7dffb0); box-shadow: 0 0 6px rgba(125, 255, 176, .5); }
.deco-ufo .deco-fx::before { content: '🛸'; font-size: 10px; }
.deco-ufo .deco-fx::after { content: ''; width: 8px; height: 10px; background: linear-gradient(rgba(125, 255, 176, .8), transparent); clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); bottom: auto; top: 6px; animation: deco-beam 1.2s ease-in-out infinite; }
/* Raket die rond de avatar vliegt */
.deco-rocket::before { background: conic-gradient(#1b2a6b, #4dd2ff, #1b2a6b); }
.deco-rocket .deco-fx::before { content: '🚀'; font-size: 9px; rotate: 45deg; }
.deco-rocket .deco-fx::after { content: '✦'; color: #fff; font-size: 6px; }
/* Pixel: getrapte gekleurde rand die knippert */
.deco-pixel::before { border-radius: var(--r-xs); background: repeating-conic-gradient(#ff4d4d 0 45deg, #4dff88 45deg 90deg, #4dd2ff 90deg 135deg, #ffd24d 135deg 180deg); animation: deco-blink 1s steps(2) infinite; }
.deco-pixel .deco-fx::before { content: ''; top: 2px; right: 2px; width: 4px; height: 4px; background: #ffd24d; box-shadow: 4px 0 #ff4d4d, 0 4px #4dd2ff; animation: deco-blink .8s steps(2) infinite; }
/* Regen: blauwe rand met druppels over de foto */
.deco-rain::before { background: conic-gradient(#4dd2ff, #1b4fff, #4dd2ff); }
.deco-rain .deco-fx::before { content: '💧'; top: 0; left: 30%; font-size: 7px; animation: deco-rain 1.8s linear infinite; }
.deco-rain .deco-fx::after { content: '💧'; top: 0; left: 62%; font-size: 6px; animation: deco-rain 1.8s linear .9s infinite; }
/* Zon: stralen die ronddraaien */
.deco-sun::before { inset: -4px; background: repeating-conic-gradient(#ffd23f 0 10deg, #ff9a1f 10deg 20deg); -webkit-mask: radial-gradient(circle, transparent 54%, #000 56%); mask: radial-gradient(circle, transparent 54%, #000 56%); animation: deco-spin 8s linear infinite; filter: drop-shadow(0 0 4px #ffd23f); }
.deco-sun .deco-fx::before { content: '☀'; color: #ffd23f; top: -6px; right: -4px; font-size: 10px; animation: deco-spin 6s linear infinite; }
/* Disco: discobal bovenaan en ronddraaiende lichtjes */
.deco-disco::before { background: conic-gradient(#ff4dd8, #4dd2ff, #ffe27a, #4dff88, #ff4dd8); animation: deco-spin 1.5s linear infinite; }
.deco-disco .deco-fx::before { content: '🪩'; top: -8px; left: 50%; translate: -50% 0; font-size: 10px; animation: deco-swing 2s ease-in-out infinite; transform-origin: 50% 0; }
.deco-disco .deco-fx::after { content: '✦'; color: #fff; top: 40%; left: 20%; font-size: 7px; animation: deco-sweep 1.4s linear infinite; }
/* Schild: stevige metalen dubbele rand */
.deco-shield::before { inset: -4px; background: conic-gradient(#9aa4b2, #e6ebf2, #6b7380, #e6ebf2, #9aa4b2); box-shadow: 0 0 0 1px #3a404a inset, 0 0 4px rgba(0, 0, 0, .5); animation: deco-spin 10s linear infinite; }
.deco-shield .deco-fx::before { content: '🛡️'; bottom: -5px; right: -5px; font-size: 10px; }
/* Planeet: een kleine maan die rond draait */
.deco-orbit2::before { background: conic-gradient(#ffb36b, #ff6b9d, #6b8bff, #ffb36b); }
.deco-orbit2 .deco-fx::before { content: '🪐'; font-size: 9px; }
.deco-orbit2 .deco-fx::after { content: '🌙'; font-size: 7px; }

.deco-web::before { background: repeating-conic-gradient(rgba(255, 255, 255, .9) 0 3deg, transparent 3deg 30deg), conic-gradient(rgba(255, 255, 255, .35), rgba(255, 255, 255, .35)); }
.deco-pixel::before { inset: -3.5px; border-radius: var(--r-sm); animation: deco-blink 1.2s steps(2) infinite, deco-spin 6s steps(8) infinite; }

.list-jump .ic { width: 11px; height: 11px; }

/* randen kiezen: nooit breder dan het venster, de lijst scrolt zelf (veel randen) */
.lb-decos { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); max-height: min(52vh, 460px); overflow-y: auto; overflow-x: hidden; padding: 2px 4px 2px 2px; overscroll-behavior: contain; user-select: none; }
.lb-dialog .lb-decos { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); }
.lb-deco { min-width: 0; padding-top: 10px; }
.lb-deco small { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10px; }

/* beheer › gebruikers: gebruik per persoon */
.usage-chip { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font: inherit; font-size: var(--fs-sm); padding: 5px 10px; border-radius: var(--r-md); cursor: pointer; text-align: left; white-space: nowrap; transition: border-color .12s, background .12s; }
.usage-chip:hover { border-color: color-mix(in srgb, var(--signal) 50%, var(--line)); background: color-mix(in srgb, var(--signal) 8%, var(--surface-2)); }
.usage-chip .muted { font-size: var(--fs-xs); }
.usage-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; margin-bottom: 6px; }
.usage-stat { display: flex; flex-direction: column; padding: 8px 10px; border-radius: var(--r-md); background: var(--surface-2); }
.usage-stat b { font-size: var(--fs-xl); }
.usage-ws { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; }
.usage-ws-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r-md); background: var(--surface-2); }

/* schuifbalk komt achter de snel-naar-knopjes: enkel dat stuk vervaagt (zachte overgang), de rest blijft zichtbaar */
.list-jump { transition: opacity .25s ease, background .15s, scale .25s ease; }
.board-body .list > .list-cards::-webkit-scrollbar-thumb { background-color: transparent;
  background-image: linear-gradient(to bottom, var(--sb-thumb) calc(var(--sb-a, 9999px) - 12px), transparent var(--sb-a, 9999px), transparent var(--sb-b, 9999px), var(--sb-thumb) calc(var(--sb-b, 9999px) + 12px)); }
.board-body .list > .list-cards::-webkit-scrollbar-thumb:hover, .board-body .list > .list-cards::-webkit-scrollbar-thumb:active { background-color: transparent;
  background-image: linear-gradient(to bottom, var(--sb-thumb-hover) calc(var(--sb-a, 9999px) - 12px), transparent var(--sb-a, 9999px), transparent var(--sb-b, 9999px), var(--sb-thumb-hover) calc(var(--sb-b, 9999px) + 12px)); }
/* vinkje "telt als klaar" op een gekleurde lijst: wit bolletje met groen vinkje, leesbaar op elke kleur */

/* Geanimeerde SVG-randen (public/img/deco): de animatie loopt rond én over de foto */
.deco-snowglobe .deco-fx, .deco-sparkring .deco-fx, .deco-fireworks .deco-fx, .deco-colorswirl .deco-fx, .deco-mushroom .deco-fx, .deco-visor .deco-fx, .deco-peeker .deco-fx, .deco-comet .deco-fx, .deco-aquarium .deco-fx, .deco-storm .deco-fx, .deco-heartburst .deco-fx, .deco-sonar .deco-fx, .deco-fireflies .deco-fx, .deco-glitch .deco-fx, .deco-scanner .deco-fx, .deco-hypno .deco-fx, .deco-sleepy .deco-fx, .deco-eyes .deco-fx, .deco-bees .deco-fx, .deco-sprout .deco-fx, .deco-butterflies .deco-fx, .deco-vines .deco-fx { inset: -20%; background: center / 100% 100% no-repeat; }
.deco-snowglobe .deco-fx { background-image: url(/img/deco/snowglobe.svg); }
.deco-sparkring .deco-fx { background-image: url(/img/deco/sparkring.svg); }
.deco-fireworks .deco-fx { background-image: url(/img/deco/fireworks.svg); }
.deco-colorswirl .deco-fx { background-image: url(/img/deco/colorswirl.svg); }
.deco-mushroom .deco-fx { background-image: url(/img/deco/mushroom.svg); }
.deco-visor .deco-fx { background-image: url(/img/deco/visor.svg); }
.deco-peeker .deco-fx { background-image: url(/img/deco/peeker.svg); }
.deco-comet .deco-fx { background-image: url(/img/deco/comet.svg); }
.deco-aquarium .deco-fx { background-image: url(/img/deco/aquarium.svg); }
.deco-storm .deco-fx { background-image: url(/img/deco/storm.svg); }
.deco-heartburst .deco-fx { background-image: url(/img/deco/heartburst.svg); }
.deco-sonar .deco-fx { background-image: url(/img/deco/sonar.svg); }
.deco-fireflies .deco-fx { background-image: url(/img/deco/fireflies.svg); }
.deco-glitch .deco-fx { background-image: url(/img/deco/glitch.svg); }
.deco-scanner .deco-fx { background-image: url(/img/deco/scanner.svg); }
.deco-hypno .deco-fx { background-image: url(/img/deco/hypno.svg); }
.deco-sleepy .deco-fx { background-image: url(/img/deco/sleepy.svg); }
.deco-eyes .deco-fx { background-image: url(/img/deco/eyes.svg); }
.deco-bees .deco-fx { background-image: url(/img/deco/bees.svg); }
.deco-sprout .deco-fx { background-image: url(/img/deco/sprout.svg); }
.deco-butterflies .deco-fx { background-image: url(/img/deco/butterflies.svg); }
.deco-vines .deco-fx { background-image: url(/img/deco/vines.svg); }

/* Bord past net niet op het scherm? Eerst krimpt "Lijst toevoegen" tot een smal plusje, daarna worden de lijsten
   een klein beetje smaller (max. ±15%). Pas als het dan nog niet past, scrol je zoals voorheen. */
.lists.cd-fit > .list:not(.add-list):not(.collapsed) { flex-shrink: 1; min-width: 238px; }
.lists.cd-fit.cd-size-compact > .list:not(.add-list):not(.collapsed) { min-width: 212px; }
.lists.cd-fit.cd-size-large > .list:not(.add-list):not(.collapsed) { min-width: 280px; }
.lists.cd-fit > .add-list:not(.open) { flex: 0 40 280px; min-width: 44px; overflow: hidden; container-type: inline-size; }
.lists.cd-fit.cd-size-compact > .add-list:not(.open) { flex-basis: 250px; }
.add-list:not(.open) .btn { white-space: nowrap; overflow: hidden; }
@container (max-width: 120px) { .add-list .add-list-label { display: none; } .add-list .btn { justify-content: center !important; padding-inline: 0; } }
@media (max-width: 640px) { .lists > .list:not(.add-list):not(.collapsed), .lists > .add-list:not(.open) { flex-shrink: 0; min-width: 0; } }

/* kaartleden: kruisje om iemand (of jezelf) van de kaart te halen */
.cm-mem { position: relative; display: inline-flex; }
.cm-mem-x { position: absolute; top: -4px; right: -4px; width: 17px; height: 17px; border-radius: 50%; border: 2px solid var(--surface); background: var(--red); color: #fff; display: grid; place-items: center; padding: 0; cursor: pointer; opacity: 0; scale: .7; transition: opacity .12s, scale .12s; z-index: 4; }
.cm-mem:hover .cm-mem-x, .cm-mem-x:focus-visible { opacity: 1; scale: 1; }
@media (hover: none) { .cm-mem-x { opacity: 1; scale: 1; } }
/* touchscherm (geen muis): snel-naar-knopjes altijd bereikbaar */
@media (hover: none) {
  .list:not(.collapsed) .list-jump.on { opacity: 1; pointer-events: auto; }
  .list-jump, .list-jump button { width: 22px; }
  .list-jump button { height: 24px; }
}

/* het keuzevenster met soorten borden */
.vt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; }
.vt-opt { display: flex; align-items: flex-start; gap: 8px; text-align: left; padding: 8px 9px; border-radius: var(--r-md); border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; }
.vt-opt:hover { border-color: color-mix(in srgb, var(--signal) 50%, var(--line)); }
.vt-opt.on { border-color: var(--signal); background: var(--signal-soft); }
.vt-ic { width: 30px; height: 30px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--surface-2); color: var(--signal); flex-shrink: 0; }
.vt-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vt-txt b { font-size: var(--fs-md); }
.vt-txt small { font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.3; }
.pick-row.danger { color: #d6383a; }

/* ---------- Opmaak met zijbalk ----------
   De zijbalk is altijd inkt (ook in het lichte thema); het limoenen streepje wijst aan waar je bent. */
body.nav-collapsed { --sidebar: 60px; }
body:has(.shell) { --nav: var(--sidebar); }
.shell { display: flex; align-items: flex-start; min-height: 100vh; min-height: 100dvh; }
.shell-main { flex: 1; min-width: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.sidebar { position: sticky; top: 0; z-index: 45; flex: none; width: var(--sidebar); border-right: 1px solid var(--nav-line); height: 100vh; height: 100dvh; display: flex; flex-direction: column; padding: 10px 8px 8px; background: var(--nav-bg); color: var(--nav-ink); transition: width .18s ease; }
.sidebar :focus-visible { outline-color: var(--accent); outline-offset: 1px; }
.sb-head { display: flex; align-items: center; gap: 6px; padding: 2px 2px 10px 6px; }
.sb-brand { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; color: #fff; text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-2xl); letter-spacing: -.02em; border-radius: var(--r-md); }
.sb-brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-icon-btn { flex: none; display: inline-grid; place-items: center; width: var(--ctrl-h-sm); height: var(--ctrl-h-sm); border: 0; border-radius: var(--r-md); background: transparent; color: var(--nav-ink-3); }
.sb-icon-btn:hover { background: var(--nav-hover); color: var(--nav-ink); }

.sb-search.searchbox { flex: none; margin: 0 0 8px; }
.sb-search input { height: 36px; border-color: transparent; background: rgba(255, 255, 255, .08); color: var(--nav-ink); }
.sb-search input::placeholder { color: var(--nav-ink-3); }
.sb-search input:focus { background: rgba(255, 255, 255, .13); }
.sb-search .ic { top: 10px; color: var(--nav-ink-2); opacity: 1; }

.sb-primary, .sb-group, .sb-foot { display: flex; flex-direction: column; gap: 1px; }
.sb-item { position: relative; flex: none; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 0 10px; border: 0; border-radius: var(--r-md); background: transparent; color: var(--nav-ink-2); font-size: var(--fs-md); font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; transition: background .12s ease, color .12s ease; }
.sb-item:hover { background: var(--nav-hover); color: var(--nav-ink); }
.sb-item.on { background: var(--nav-active); color: #fff; }
.sb-item.on::before { content: ''; position: absolute; left: -8px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.sb-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-badge { flex: none; background: rgba(255, 255, 255, .12); color: var(--nav-ink); font-variant-numeric: tabular-nums; }
.sb-primary .sb-badge { background: var(--red); color: #fff; }
.sb-attn { color: var(--amber); }
.sb-attn .sb-badge { background: var(--amber); color: #101113; }
.sb-quiet { font-weight: 500; }

.sb-lists { flex: 1; min-height: 0; overflow-y: auto; margin: 8px -8px 0; padding: 0 8px 8px; border-top: 1px solid var(--nav-line); scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
.sb-title { display: flex; align-items: center; justify-content: space-between; min-height: 28px; margin-top: 12px; padding: 0 2px 0 10px; color: var(--nav-ink-3); }
.sb-tile { flex: none; width: 18px; height: 18px; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.sb-row { display: flex; align-items: center; gap: 2px; }
.sb-row .sb-item { flex: 1; min-width: 0; color: var(--nav-ink); }
.sb-ws .sb-group { margin: 1px 0 4px 18px; padding-left: 8px; border-left: 1px solid var(--nav-line); }
.sb-board { min-height: 32px; font-weight: 500; }
.sb-board .sb-tile { width: 16px; height: 12px; border-radius: 3px; }
.sb-ws .sb-board.on::before { left: -9px; }
.sb-empty { padding: 6px 10px; color: var(--nav-ink-3); font-size: var(--fs-sm); }
.sb-project > .sb-row .sb-item { color: var(--nav-ink-2); }
.sb-project.open > .sb-row .sb-item { color: var(--nav-ink); }
.sb-ghost { opacity: .35; }
.sb-ghost.sb-row .sb-item, .sb-ghost > .sb-row .sb-item { background: var(--nav-hover); }
.sb-views { margin: 0 0 3px 17px; padding-left: 7px; border-left: 1px solid var(--nav-line); }
.sb-view { min-height: 30px; gap: 8px; font-size: var(--fs-md); font-weight: 500; }
.sb-view .ic { width: 15px; height: 15px; opacity: .85; }
.sb-ws .sb-views .sb-view.on::before { left: -8px; }
.scope-lists { display: flex; flex-direction: column; gap: 4px; max-height: 180px; overflow: auto; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r-ctrl); }
.check-row { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.check-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sb-foot { position: relative; flex: none; margin: 0 -8px; padding: 8px 8px 0; border-top: 1px solid var(--nav-line); }
.sb-foot-row { display: flex; align-items: stretch; gap: 6px; }
.sb-timer-pill { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 42px; padding: 0 10px; border: 0; border-radius: var(--r-lg); background: rgba(255, 255, 255, .06); color: var(--nav-ink-2); font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
.sb-timer-pill:hover { background: var(--nav-active); color: var(--nav-ink); }
.sb-timer-pill.running { background: color-mix(in srgb, var(--amber) 20%, transparent); color: var(--amber); }
.sb-timer-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); animation: sb-pulse 1.6s ease-in-out infinite; }
@keyframes sb-pulse { 50% { opacity: .35; } }
.sb-timer-panel { position: absolute; left: 8px; right: 8px; bottom: calc(100% + 6px); z-index: 2; min-width: 244px; padding: 10px; border: 1px solid var(--nav-line); border-radius: var(--r-xl); background: color-mix(in srgb, var(--nav-bg) 86%, #fff); box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .55); }
.sb-timer-title { margin: 0 2px 8px; color: var(--nav-ink-3); }
.sb-timer .tt { width: 100%; min-width: 0; background: rgba(255, 255, 255, .08); border-color: transparent; color: var(--nav-ink); }
.sb-timer .tt-icon.on { color: var(--amber); }
.sb-me { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 0; border-radius: var(--r-md); background: rgba(255, 255, 255, .06); color: var(--nav-ink); text-align: left; }
.sb-me:hover { background: var(--nav-active); }
.sb-me-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.sb-me-text b, .sb-me-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-me-text b { font-size: var(--fs-md); }
.sb-me-text span { color: var(--nav-ink-3); font-family: var(--mono); font-size: var(--fs-2xs); }
.sb-me > .ic { color: var(--nav-ink-3); }

.sb-act { display: none; }
.sb-row:hover > .sb-act, .sb-row:focus-within > .sb-act, .sb-project.open > .sb-row > .sb-act { display: inline-grid; }
.sb-row > .sb-act, .sb-row > .sb-chevron { width: 24px; height: 26px; }
.sb-add-row { min-height: 28px; gap: 8px; font-size: var(--fs-sm); font-weight: 500; color: var(--nav-ink-3); }
.sb-add-row:hover { color: var(--nav-ink); }
@media (hover: none) { .sb-act { display: inline-grid; } }
@media (hover: none), (max-width: 860px) { .sb-row > .sb-act.sb-act-extra, .sb-project.open > .sb-row > .sb-act.sb-act-extra { display: none; } }

/* ---------- Venster "Nieuw bord" ---------- */
.nb-step { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; }
.nb-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.nb-type { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px; border: 1.5px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--ink); text-align: left; transition: border-color .12s ease, background .12s ease; }
.nb-type:hover { border-color: color-mix(in srgb, var(--signal) 50%, var(--line)); }
.nb-type.on { border-color: var(--signal); background: var(--signal-soft); }
.nb-type b { font-size: var(--fs-md); }
.nb-type small { color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.3; }
.nb-type.locked b, .nb-type.locked small, .nb-type.locked .nb-ic { opacity: .6; }
.nb-ic { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 3px; border-radius: var(--r-md); background: var(--surface-2); color: var(--signal); }
.nb-lock { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: var(--r-pill); background: var(--amber-soft); color: var(--ink); font-size: var(--fs-2xs); font-weight: 700; }
.nb-foot { margin-top: 8px; }
/* de pagina "Nieuw bord": links de soorten in groepen, rechts wat er verder te kiezen valt */
.nbp-head { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 22px 18px; border-bottom: 1px solid var(--line); }
.nbp-head h1 { font-size: var(--fs-2xl); line-height: 1.2; margin: 4px 0 0; }
.nbp-head p { margin: 0; }
.nbp-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 26px; padding: 20px 22px 26px; align-items: start; }
.nbp-groups { display: flex; flex-direction: column; gap: 22px; }
.nbp-group h2 { font-size: var(--fs-lg); margin: 0 0 2px; }
.nbp-group p { margin: 0 0 10px; }
.nbp-group .nb-types { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.nbp-side { position: sticky; top: 0; display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface-2); }
.nbp-picked { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.nbp-picked .nb-ic { margin: 0; background: var(--surface); flex: none; }
.nbp-picked div { display: flex; flex-direction: column; min-width: 0; }
.nbp-picked small { font-size: var(--fs-xs); line-height: 1.3; }
/* de breedte van het blad telt, niet die van het venster: de zijbalk kan open of dicht staan */
.nbp { container-type: inline-size; }
@container (max-width: 780px) {
  .nbp-body { grid-template-columns: minmax(0, 1fr); padding: 16px 14px 20px; }
  .nbp-side { position: static; }
  .nbp-head { padding: 14px; }
}
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.nb-note { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; padding: 8px 10px; border-radius: var(--r-md); background: var(--signal-soft); color: var(--ink); font-size: var(--fs-md); }
.filter-board { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); }
.sb-private { flex: none; display: inline-grid; color: var(--nav-ink-3); }
.chip { font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 6px 12px; border: 1.5px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--ink-2); font-size: var(--fs-md); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: border-color .12s ease, background .12s ease; }
.chip:hover { border-color: color-mix(in srgb, var(--signal) 50%, var(--line)); }
.chip.on { border-color: var(--signal); background: var(--signal-soft); color: var(--signal); }

.mobilebar, .sb-scrim { display: none; }

/* ingeklapt: enkel pictogrammen */
@media (min-width: 861px) {
  body.nav-collapsed .sidebar { padding-left: 8px; padding-right: 8px; align-items: stretch; }
  body.nav-collapsed .sb-head { flex-direction: column; padding: 2px 0 8px; }
  body.nav-collapsed .sb-brand { flex: none; justify-content: center; }
  body.nav-collapsed .sb-brand-name, body.nav-collapsed .sb-label, body.nav-collapsed .sb-lists, body.nav-collapsed .sb-me-text, body.nav-collapsed .sb-me > .ic,
  body.nav-collapsed .sb-search input, body.nav-collapsed .sb-timer-clock { display: none; }
  body.nav-collapsed .sb-primary { flex: 1; }
  body.nav-collapsed .sb-item { justify-content: center; padding: 0; min-height: 40px; }
  body.nav-collapsed .sb-badge { position: absolute; top: 3px; right: 3px; min-width: 16px; padding: 0 4px; font-size: 10px; line-height: 16px; }
  body.nav-collapsed .sb-search { height: 40px; border-radius: var(--r-md); cursor: pointer; }
  body.nav-collapsed .sb-search:hover { background: var(--nav-hover); }
  body.nav-collapsed .sb-search .ic { position: static; display: block; margin: 12px auto; }
  body.nav-collapsed .sb-foot-row { flex-direction: column-reverse; }
  body.nav-collapsed .sb-timer-pill { height: 40px; padding: 0; }
  body.nav-collapsed .sb-timer-panel { right: auto; width: 260px; }
  body.nav-collapsed .sb-me { justify-content: center; padding: 5px 0; background: transparent; }
}

/* telefoon en smalle tablet: balk bovenaan, zijbalk als lade */
@media (max-width: 860px) {
  :root { --topbar: 48px; }
  body:has(.shell), body.nav-collapsed { --nav: 0px; }
  .mobilebar { position: sticky; top: 0; z-index: 40; flex: none; display: flex; align-items: center; gap: 4px; height: var(--topbar); padding: 0 8px; padding-top: env(safe-area-inset-top); box-sizing: content-box; background: var(--nav-bg); color: #fff; }
  .mobilebar .brand { color: #fff; font-size: var(--fs-xl); }
  .mobilebar .icon-btn { width: 40px; height: 40px; }
  body.photo-board .mobilebar.on-board { background: rgba(10, 11, 13, .6); backdrop-filter: blur(10px); }
  .sidebar { position: fixed; left: 0; top: 0; z-index: var(--z-nav); width: min(86vw, 304px); padding-top: calc(10px + env(safe-area-inset-top)); padding-bottom: calc(8px + env(safe-area-inset-bottom)); transform: translateX(-102%); transition: transform .22s cubic-bezier(.2, .8, .2, 1); box-shadow: none; }
  /* dicht = ook niet bereikbaar met Tab of een schermlezer (anders loopt de focus door onzichtbare links) */
  body:not(.nav-open) .sidebar { visibility: hidden; transition: transform .22s cubic-bezier(.2, .8, .2, 1), visibility 0s .22s; }
  body.nav-open .sidebar { transform: none; box-shadow: 0 0 40px rgba(0, 0, 0, .45); }
  .sb-scrim { position: fixed; inset: 0; z-index: var(--z-scrim); background: rgba(8, 11, 18, .55); }
  body.nav-open .sb-scrim { display: block; }
  body.nav-open { overflow: hidden; }
  .sb-toggle { display: none; }
  .sb-item { min-height: 44px; }
  .sb-board, .sb-view { min-height: 40px; }
  .sb-icon-btn { width: 40px; height: 40px; }
  .sb-row > .sb-act, .sb-row > .sb-chevron { width: 36px; height: 40px; }
  .sb-add-row { min-height: 40px; }
  .sb-search input { height: 44px; font-size: var(--fs-lg); }
  .sb-search .ic { top: 14px; }
}
.sb-timer .tt-desc, .sb-timer .tt-icon { display: block; }
.sb-timer .tt-icon { display: grid; }
@media (prefers-reduced-motion: reduce) { .sidebar, .sb-item { transition: none; } }

/* ---------- Projectinstellingen ---------- */
.ps-page { flex: 1; min-height: 0; overflow: auto; padding: 22px 22px 60px; }
.ps-sheet { max-width: 1020px; margin: 0 auto; background: var(--surface); border-radius: var(--r-2xl); box-shadow: 0 0 0 1px var(--line), 0 18px 50px -24px rgba(0, 0, 0, .45); color: var(--ink); }
.ps-head { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 22px 18px; border-bottom: 1px solid var(--line); }
.ps-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ps-title .swatch { width: 40px; height: 32px; border-radius: var(--r-md); }
.ps-title h1 { font-size: var(--fs-2xl); line-height: 1.2; margin: 0; overflow-wrap: anywhere; }
.ps-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); }
.ps-tabs { display: flex; flex-direction: column; gap: 2px; padding: 14px 10px; border-right: 1px solid var(--line); }
.ps-tab { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 12px; border-radius: var(--r-md); color: var(--ink-2); font-weight: 600; font-size: var(--fs-md); text-decoration: none; white-space: nowrap; }
.ps-tab:hover { background: var(--surface-2); color: var(--ink); }
.ps-tab.on { background: color-mix(in srgb, var(--signal) 14%, var(--surface)); color: var(--ink); }
.ps-tab.on svg { color: var(--signal); }
.ps-group { padding: 12px 12px 4px; color: var(--ink-3); }
.ps-group:first-child { padding-top: 2px; }
.ps-group-name { display: block; margin-top: 2px; font-size: var(--fs-sm); letter-spacing: 0; text-transform: none; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-title .grow { min-width: 0; }
.ps-head .ps-title { align-self: stretch; }
/* instellingen van één bord: over welk bord het gaat, met een keuze om naar een ander bord te gaan */
.ps-content { padding: 20px 24px 28px; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.ps-section h3 { font-size: var(--fs-base); margin: 0 0 2px; }
.ps-section .ps-hint { margin: 0 0 12px; }
.ps-section h3 + .stack-sm { margin-top: 12px; }
.ps-rows { border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; }
.ps-row { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px; }
.ps-row + .ps-row { border-top: 1px solid var(--line); }
.ps-row .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-link { color: inherit; text-decoration: none; }
.ps-link:hover b { text-decoration: underline; }
.ps-tag { background: var(--surface-2); color: var(--ink-2); }
.ps-actions { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; }
.ps-action { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: none; border: 0; text-align: left; color: inherit; cursor: pointer; font: inherit; }
.ps-action + .ps-action { border-top: 1px solid var(--line); }
.ps-action:hover { background: var(--surface-2); }
.ps-action:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }
.ps-action.danger .bm-label, .ps-action.danger .bm-ico { color: var(--red); }
.ent-tile { display: inline-grid; place-items: center; flex: none; overflow: hidden; border-radius: 22%; color: #fff; font-family: var(--font-display); font-weight: 700; line-height: 1; user-select: none; }
.ent-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ent-tile.has-img { background: var(--surface-2); box-shadow: none; }
.sb-tile.ent-letter { font-size: var(--fs-2xs); box-shadow: none; }
.sb-board .sb-tile.has-img { width: 16px; height: 16px; border-radius: var(--r-xs); }
.tile-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ps-tile { display: contents; }
.ps-avatar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ps-avatar-tile { display: grid; padding: 4px; border-radius: var(--r-2xl); box-shadow: 0 0 0 1px var(--line); }
.ps-flat .ps-content .panel { background: none; border: 0; border-radius: 0; padding: 0; margin: 0; }
.ps-flat .ps-content .panel > h3 { font-size: var(--fs-base); }
.ps-flat .ps-content .panel.danger-zone, .ps-flat .ps-content .panel.upsell { border: 1px solid color-mix(in srgb, var(--red) 40%, var(--line)); border-radius: var(--r-xl); padding: 16px; }
.ps-flat .ps-content .panel.upsell { border-color: var(--signal); }
.ps-flat .ps-content .panel .panel { border: 1px solid var(--line); border-radius: var(--r-xl); padding: 16px; }
.ws-settings .ps-title .plan-badge { align-self: center; }
.ps-meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.ps-meter { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-xl); }
.ps-meter .progress { flex: none; }
.ps-meter .row { align-items: baseline; gap: 2px 10px; }
.ps-meter .row > span { flex: none; white-space: nowrap; }
.ps-meter .progress.full > i { background: var(--red); }
.ps-faces { display: inline-flex; }
.ps-faces .avatar + .avatar { margin-left: -6px; box-shadow: 0 0 0 2px var(--surface); }
.ps-thumb { flex: none; display: grid; place-items: center; width: 44px; height: 32px; border-radius: var(--r-md); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); background-size: cover !important; background-position: center !important; }
.ps-thumb svg { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
.bgp-preview { display: flex; align-items: flex-start; gap: 10px; height: 150px; padding: 14px; border-radius: var(--r-xl); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); background-size: cover !important; background-position: center !important; }
.bgp-list { display: flex; flex-direction: column; gap: 6px; width: 104px; padding: 8px; border-radius: var(--r-md); background: rgba(16, 22, 36, .55); backdrop-filter: blur(6px); }
.bgp-list i { height: 6px; width: 46%; border-radius: 3px; background: rgba(255, 255, 255, .7); }
.bgp-list b { height: 22px; border-radius: var(--r-sm); background: rgba(255, 255, 255, .92); }
.bg-swatch.bgp-img { background-size: cover !important; background-position: center !important; }
.bg-swatch.bgp-add { display: grid; place-items: center; border: 2px dashed var(--line); background: none; color: var(--ink-3); }
.bg-swatch.bgp-add:hover { color: var(--ink); border-color: var(--ink-3); }
.ps-inline { position: relative; display: flex; align-items: center; flex: 1; min-width: 0; }
.ps-inline .input { flex: 1; min-width: 0; padding-right: 112px; }
.ps-inline.multi { align-items: flex-start; }
.ps-inline.multi .input { padding-right: 12px; }
.ps-saved { position: absolute; right: 10px; display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); font-weight: 600; color: var(--green); pointer-events: none; }
.ps-inline.multi .ps-saved { top: 100%; right: 2px; margin-top: 4px; }
@media (max-width: 760px) {
  .ps-page { padding: 0; }
  .ps-sheet { border-radius: 0; box-shadow: none; min-height: 100%; }
  .ps-body { grid-template-columns: minmax(0, 1fr); }
  .ps-tabs { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 8px 12px; scrollbar-width: none; }
  .ps-tab { min-height: 44px; }
  .ps-group { display: flex; align-items: center; gap: 6px; padding: 0 4px 0 10px; white-space: nowrap; }
  .ps-group-name { margin-top: 0; }
  .ps-group:first-child { padding: 0 4px 0 0; }
  .ps-content { padding: 18px 16px 40px; }
  .ps-row { flex-wrap: wrap; }
  .ps-row .grow { flex: 1 1 60%; }
  .share-row { flex-wrap: wrap; }
  .share-row > .grow { flex: 1 1 60%; }
  .share-row > select { flex: 1; margin-left: 42px; }
}

/* ---------- Werkruimtekiezer ---------- */
.sb-ws-switch { flex: none; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; margin: 0 0 8px; padding: 6px 10px; border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--r-lg); background: rgba(255, 255, 255, .05); color: var(--nav-ink); font: inherit; font-weight: 700; font-size: var(--fs-md); text-align: left; cursor: pointer; transition: background .15s, border-color .15s; }
.sb-ws-switch:hover { background: var(--nav-hover); border-color: rgba(255, 255, 255, .18); }
.sb-ws-switch:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }
.sb-ws-switch .sb-tile { width: 26px; height: 26px; border-radius: var(--r-md); font-size: var(--fs-sm); }
.sb-ws-switch > .ic:last-child { color: var(--nav-ink-3); }
.sb-ws-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-ws-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.popover .pick-row .sb-tile { width: 24px; height: 24px; border-radius: var(--r-md); font-size: var(--fs-xs); }
.popover .pick-row .sb-badge { background: var(--red); color: #fff; }
.sb-ws-opt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.sb-ws-opt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.notif-elsewhere { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 4px 8px; }
.notif-elsewhere .chip { padding: 3px 10px; font-size: var(--fs-sm); }
.notif-elsewhere .sb-badge { background: var(--red); color: #fff; min-width: 18px; padding: 0 5px; font-size: var(--fs-2xs); }
.notif-desktop { align-self: stretch; justify-content: center; }
.notif-hint { margin: 0; padding: 2px 4px; }
#notifs { position: fixed; top: 14px; right: 14px; z-index: var(--z-toast); display: flex; flex-direction: column; gap: 8px; width: min(360px, calc(100vw - 28px)); pointer-events: none; }
.notif-card { display: flex; align-items: flex-start; gap: 4px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--signal); border-radius: var(--r-lg); box-shadow: var(--pop-shadow); pointer-events: auto; animation: notif-in .22s ease-out; transition: opacity .25s, transform .25s; }
.notif-card.out { opacity: 0; transform: translateX(12px); }
.notif-main { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 10px; padding: 6px; border: 0; border-radius: var(--r-md); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.notif-main:hover { background: var(--surface-2); }
.notif-main .avatar { flex: none; }
.notif-glyph { width: 34px; height: 34px; background: var(--accent); color: var(--on-accent); }
.notif-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; font-size: var(--fs-md); line-height: 1.35; overflow-wrap: anywhere; }
.notif-sub { display: block; margin-top: 2px; }
@keyframes notif-in { from { opacity: 0; transform: translateX(16px); } }
@media (max-width: 860px) { #notifs { top: calc(var(--topbar) + env(safe-area-inset-top) + 8px); } }
@media (min-width: 861px) {
  body.nav-collapsed .sb-ws-switch { justify-content: center; padding: 6px 0; position: relative; }
  body.nav-collapsed .sb-ws-name, body.nav-collapsed .sb-ws-switch > .ic:last-child { display: none; }
  body.nav-collapsed .sb-ws-dot { position: absolute; top: 4px; right: 4px; }
}

/* ---------- Tijd: grote timer, favorieten, kalender, weekstaat, tabellen ---------- */
.tb { display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 14px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: var(--r-2xl); background: var(--surface); box-shadow: var(--card-shadow); }
.tb.running { border-color: color-mix(in srgb, var(--signal) 55%, var(--line)); }
.tb-desc { flex: 1; min-width: 80px; height: 40px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: var(--fs-lg); font-weight: 600; outline: none; }
.tb-desc::placeholder { color: var(--ink-3); font-weight: 500; }
.tb-btn { gap: 6px; max-width: 220px; height: 32px; padding: 0 10px; border: 1px solid transparent; background: transparent; color: var(--ink-3); font: inherit; font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; }
.tb-btn span:last-child { overflow: hidden; text-overflow: ellipsis; }
.tb-btn:hover { background: var(--surface-2); color: var(--ink); }
.tb-btn.on { color: var(--signal); background: var(--signal-soft); }
.tb-btn:focus-visible, .tb-go:focus-visible, .tt-fav-go:focus-visible, .tc-block:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.tb-clock { min-width: 96px; text-align: right; font-family: var(--mono); font-size: var(--fs-xl); font-weight: 600; }
.tb-go { flex: none; width: 42px; height: 42px; background: var(--accent); transition: transform .12s, background .15s; }
.tb-go:hover { transform: scale(1.06); }
.tb.running .tb-go { background: var(--red); }
.tb-go .ic { fill: currentColor; }
.tt-dot[style] { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.tt-favs, .tt-active { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.tt-favs:empty, .tt-active:empty { display: none; }
.tt-fav { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); overflow: hidden; }
.tt-fav-go { gap: 6px; min-height: 30px; padding: 0 4px 0 10px; background: transparent; color: var(--ink); font: inherit; font-weight: 600; font-size: var(--fs-sm); max-width: 240px; }
.tt-fav-go span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-fav-go:hover { color: var(--signal); }
.tt-fav-x { display: grid; place-items: center; width: 26px; height: 30px; border: 0; background: transparent; color: var(--ink-3); cursor: pointer; }
.tt-fav-x:hover { color: var(--red); }
.tt-active-item { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 3px; border-radius: var(--r-pill); background: var(--surface-2); font-size: var(--fs-sm); }
.tt-active-dur { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--mint); }
.tt-row.locked .tt-row-desc, .tt-row.locked .tt-range { cursor: default; }
.tt-row button:disabled { opacity: .55; cursor: default; }

.tc-head, .tc-grid { display: grid; grid-template-columns: 52px repeat(7, minmax(0, 1fr)); }
.tc-head { border: 1px solid var(--line); border-bottom: 0; border-radius: 12px 12px 0 0; background: var(--surface-2); }
.tc-head > div { display: flex; flex-direction: column; gap: 1px; padding: 8px 8px; border-left: 1px solid var(--line); min-width: 0; }
.tc-head b { font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-head b::first-letter { text-transform: uppercase; }
.tc-head .today b { color: var(--signal); }
.tc-scroll { max-height: min(70vh, 720px); overflow-y: auto; border: 1px solid var(--line); border-radius: 0 0 12px 12px; background: var(--surface); }
.tc-grid { position: relative; background-image: linear-gradient(var(--line) 1px, transparent 1px); background-size: 100% 44px; }
.tc-hours { position: relative; }
.tc-hours span { position: absolute; right: 8px; transform: translateY(-50%); font-size: var(--fs-2xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tc-hours span:first-child { display: none; }
.tc-col { position: relative; border-left: 1px solid var(--line); cursor: crosshair; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.tc-col.today { background: color-mix(in srgb, var(--signal) 5%, transparent); }
.tc-block { position: absolute; left: 3px; right: 3px; display: flex; flex-direction: column; gap: 1px; padding: 3px 7px 3px 10px; border-radius: var(--r-md); overflow: hidden; background: color-mix(in srgb, var(--signal) 16%, var(--surface)); color: var(--ink); font-size: var(--fs-xs); line-height: 1.25; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.tc-block::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c, var(--signal)); }
.tc-block b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-block span { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-block.bill { background: color-mix(in srgb, var(--mint) 18%, var(--surface)); }
.tc-block.running { background: color-mix(in srgb, var(--signal) 30%, var(--surface)); }
.tc-block.fixed { cursor: pointer; opacity: .85; }
.tc-block.dragging { cursor: grabbing; box-shadow: var(--card-shadow), 0 8px 24px -8px rgba(0, 0, 0, .5); z-index: 3; opacity: .92; }
.tc-block.ghost { pointer-events: none; background: color-mix(in srgb, var(--signal) 30%, transparent); border: 1px dashed var(--signal); }
.tc-grip { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; cursor: ns-resize; }
.tc-grip::after { content: ''; position: absolute; left: 50%; bottom: 3px; width: 22px; height: 3px; margin-left: -11px; border-radius: 2px; background: currentColor; opacity: 0; transition: opacity .15s; }
.tc-block:hover .tc-grip::after, .tc-block:focus-visible .tc-grip::after { opacity: .45; }

.ts-wrap, .tt-table-wrap { overflow-x: auto; }
.ts, .tt-table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.ts { margin-bottom: 10px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); }
.ts th, .ts td, .tt-table th, .tt-table td { padding: 8px 10px; border-top: 1px solid var(--line); text-align: left; vertical-align: middle; }
.ts thead th, .tt-table thead th { border-top: 0; font-size: var(--fs-xs); font-weight: 700; color: var(--ink-3); white-space: nowrap; }
.ts thead th::first-letter { text-transform: uppercase; }
.ts thead th.today { color: var(--signal); }
.ts tbody th, .tt-table tbody th { font-weight: 600; }
.ts td { text-align: center; padding: 5px 4px; }
.ts-name { display: inline-flex; align-items: center; gap: 8px; min-width: 110px; color: inherit; text-decoration: none; }
a.ts-name:hover { text-decoration: underline; }
.ts-cell { width: 56px; height: 34px; border: 1px solid transparent; border-radius: var(--r-md); background: var(--surface-2); color: var(--ink); font: inherit; font-variant-numeric: tabular-nums; text-align: center; }
.ts-cell:hover:not(:disabled), .ts-cell:focus { border-color: var(--signal); outline: none; background: var(--surface); }
.ts-cell:disabled { opacity: .5; }
.ts-total { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tt-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tt-table .tt-tag { margin-left: 6px; }
.tt-amount { min-width: 76px; text-align: right; font-variant-numeric: tabular-nums; }
.tt-saved { margin-bottom: 14px; }
.ta-table .input { min-width: 110px; }
.ta-num { width: 110px; }
.ta-used { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.tt-share.warn i { background: var(--amber); }
.tt-share.over i { background: var(--red); }
.print-only { display: none; }
@media (max-width: 760px) {
  .tb { flex-wrap: wrap; }
  .tb-desc { flex-basis: 100%; }
  .tb-clock { margin-left: auto; }
  .tc-head, .tc-grid { grid-template-columns: 40px repeat(7, minmax(92px, 1fr)); min-width: 700px; }
  .tt-view-calendar { overflow-x: auto; }
}
@media print {
  .sidebar, .sb-scrim, .mobilebar, .site-footer, .tabs, .tt-filters, .page-head, .dock, .toasts, #notifs { display: none !important; }
  body, .shell, .shell-main, .main { background: #fff !important; color: #000 !important; display: block !important; height: auto !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; }
  .print-only { display: block; }
  .time-print .panel, .time-print .stat { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; background: #fff; color: #000; }
  .time-print .tt-table-wrap { overflow: visible; }
  /* een lange tabel loopt door over meerdere bladzijden; een rij wordt nooit doormidden geknipt */
  .time-print .panel.tt-table-wrap { break-inside: auto; }
  .time-print .tt-table tr { break-inside: avoid; }
  .time-print .tt-table td:first-child { white-space: nowrap; }
  /* alle dagen van de periode passen op het blad (geen schuifbalk op papier) */
  .time-print .tt-bars { overflow: visible; gap: 2px; }
  .time-print .tt-bar { flex: 1 1 0; min-width: 0; }
  .time-print .tt-bar span { font-size: 8px; writing-mode: vertical-rl; }
  /* het weekrapport: smalle kolommen en kleine cijfers, zodat ook een hele maand op het blad past */
  .time-print .panel.tt-weekly, .time-print .panel.tt-period { break-inside: avoid; }
  .time-print .tt-month { font-size: var(--fs-2xs); margin-bottom: 4px; }
  .time-print .panel.tt-weekly { padding: 8px; }
  .time-print .tt-weekly .tt-table { table-layout: fixed; font-size: 8px; }
  .time-print .tt-weekly .tt-table th, .time-print .tt-weekly .tt-table td { padding: 4px 0; font-size: 7.5px; text-align: center; white-space: nowrap; }
  .time-print .tt-weekly .tt-table thead th { white-space: normal; line-height: 1.2; }
  .time-print .tt-weekly .tt-table th:first-child { width: 92px; padding-left: 4px; text-align: left; white-space: normal; }
  .time-print .tt-weekly .tt-table tr > :last-child { width: 40px; }
  .time-print .tt-tag { background: #eee; color: #000; }
  .time-print .tt-share { background: #ddd; }
  .time-print .muted { color: #555; }
  .time-print .tt-table th, .time-print .tt-table td, .time-print .tt-group { border-color: #ccc; }
}
.tt-note { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-hint { display: none; margin: 8px 2px 0; }
@media (pointer: coarse) {
  .tc-hint { display: block; }
  .tc-grip { height: 18px; }
  .tc-grip::after { opacity: .45; }
}
.tt-month { margin: 0 0 8px; font-size: var(--fs-base); }
.tt-month::first-letter { text-transform: uppercase; }

/* ---------- Chatoverzicht ---------- */
.shell-main:has(.chat-inbox) { height: 100vh; height: 100dvh; }
.shell-main:has(.chat-inbox) .site-footer { display: none; }
.main:has(.chat-inbox) { min-height: 0; display: flex; }
.chat-inbox { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); }
.ci-list { display: flex; flex-direction: column; gap: 12px; min-height: 0; padding: 22px 14px 0 20px; border-right: 1px solid var(--line); }
.ci-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ci-rows { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; margin: 0 -8px; padding: 0 8px 16px; }
.ci-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r-md); color: inherit; text-decoration: none; }
.ci-row:hover { background: var(--surface-2); }
.ci-row.on { background: var(--signal-soft); }
.ci-row-txt { min-width: 0; display: flex; flex-direction: column; }
.ci-row-title, .ci-row-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-row.unread .ci-row-title { font-weight: 700; }
.ci-row-meta { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.ci-thread { min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 16px 20px 14px; background: var(--surface-2); }
.ci-thread > .empty { margin: auto; }
.ci-thread-head { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.ci-thread-title { min-width: 0; display: flex; flex-direction: column; }
.ci-thread-title b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-back { display: none; }
.chat-card-link { display: flex; align-items: center; gap: 6px; margin-top: 5px; padding: 5px 8px; border-radius: var(--r-md); background: var(--surface-2); color: var(--ink); font-size: var(--fs-sm); text-decoration: none; }
.chat-card-link:hover { box-shadow: 0 0 0 2px var(--signal); }
.chat-card-link .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 860px) {
  .chat-inbox { grid-template-columns: minmax(0, 1fr); }
  .chat-inbox.has-thread .ci-list, .chat-inbox:not(.has-thread) .ci-thread { display: none; }
  .ci-list { border-right: 0; padding: 16px 14px 0; }
  .ci-thread { padding: 10px 12px; }
  .ci-back { display: inline-flex; }
}
/* ringen en badges steken buiten de avatar: ruimte aan de zijkanten, anders schuift het gesprek horizontaal */
.card-chat.compact .chat-list { margin-inline: -8px; padding-inline: 8px; overflow-x: hidden; }
/* melding zolang de verbinding met de server weg is */
.conn-bar { position: fixed; left: calc(50% + var(--nav) / 2); top: 64px; transform: translateX(-50%); z-index: var(--z-bar); display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: var(--r-xl); background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); font-size: var(--fs-md); max-width: calc(100vw - 32px); }
.conn-bar .spinner { width: 16px; height: 16px; border-width: 2px; margin: 0; flex: 0 0 auto; }
body:has(.update-bar) .conn-bar { top: 116px; }
/* knop waarvan de actie nog loopt */
button[aria-busy="true"] { cursor: progress; opacity: .65; }
.btn[aria-busy="true"]::after { content: ""; width: 12px; height: 12px; margin-left: 2px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; flex: 0 0 auto; }
/* startpagina: label bij functies die niet in Gratis zitten */
.lp-plan { margin-left: 8px; vertical-align: 3px; text-decoration: none; }
.lp-note.center { text-align: center; margin-top: 22px; }
/* startpagina: eerste stappen voor een nieuw team */
.start-panel { margin-bottom: 22px; }
.start-steps { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.start-step { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.start-step .grow { min-width: 200px; }
.start-check { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; flex: 0 0 auto; color: #fff; }
.start-step.done .start-check { background: var(--mint); border-color: var(--mint); }
.start-step.done b { color: var(--ink-2); text-decoration: line-through; }
/* nieuw wachtwoord: tonen/verbergen en de regels die afgevinkt worden */
.pw-wrap { display: flex; gap: 6px; align-items: center; }
.pw-wrap .input { flex: 1; min-width: 0; }
.pw-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pw-rules li { display: flex; align-items: center; gap: 7px; }
.pw-mark { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid currentColor; flex: 0 0 auto; }
.pw-rules li.ok { color: var(--ink-2); }
.pw-rules li.ok .pw-mark { background: var(--mint); border-color: var(--mint); }
/* balk bovenaan de pagina: proefperiode loopt af, betaling mislukt, werkruimte geblokkeerd */
.ws-notice { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 20px 0; padding: 10px 14px; border-radius: var(--r-lg); background: var(--amber-soft); color: var(--ink); border: 1px solid var(--line); font-size: var(--fs-md); }
.ws-notice.danger { background: var(--red-soft); }
.ws-notice .grow { min-width: 200px; }
/* focus die door de app zelf gezet wordt (nieuwe pagina, geopend menu) krijgt geen rand */
#main:focus, .popover:focus { outline: none; }
/* bedieningen die enkel bij zweven verschenen: ook zichtbaar met toetsenbordfocus en op aanraakschermen */
.board-tile .star:focus-visible, .board-tile:focus-within .star, .cl-item:focus-within .cl-tools { opacity: 1; }
@media (hover: none) { .board-tile .star { opacity: .85; } .cl-item .cl-tools { opacity: 1; } .card-quick { opacity: .95; } .lv-head-add { opacity: 1; } }
/* link om de zijbalk over te slaan: enkel zichtbaar met toetsenbordfocus */
.skip-link { position: fixed; left: 8px; top: -60px; z-index: var(--z-skip); padding: 9px 14px; border-radius: var(--r-md); background: var(--surface); color: var(--ink); box-shadow: var(--pop-shadow); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 8px; }
/* foutmelding wegklikken */
.toast-x { border: 0; background: none; color: inherit; padding: 2px; margin-left: 4px; cursor: pointer; display: grid; place-items: center; border-radius: var(--r-sm); opacity: .85; }
.toast-x:hover { opacity: 1; background: rgba(255, 255, 255, .18); }

/* ---------- Aanraakschermen, kleine vensters en de app op het beginscherm ---------- */
:root { --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); }
/* onder de home-indicator van een iPhone vandaan blijven */
.dock { bottom: calc(16px + var(--safe-b)); }
#toasts { bottom: calc(18px + var(--safe-b)); }
body:has(.dock) #toasts { bottom: calc(80px + var(--safe-b)); }
.mobilebar { padding-left: max(8px, var(--safe-l)); padding-right: max(8px, var(--safe-r)); }
@media (max-width: 720px) { .dock { bottom: calc(10px + var(--safe-b)); } }
@media (max-width: 640px) {
  .modal { padding-bottom: var(--safe-b); }
  .drawer { padding-bottom: var(--safe-b); }
  /* de kaart vult het scherm: geen smalle rand ernaast waar een tik het venster sluit */
  .card-modal { width: 100%; }
}
.auth-wrap { min-height: 100dvh; }
@media (pointer: coarse) {
  /* iOS zoomt in op een veld met tekst kleiner dan 16px en zoomt daarna niet terug */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.code-input), select, textarea, [contenteditable="true"] { font-size: max(16px, 1em) !important; }
  /* knoppen groot genoeg voor een vinger: 44px, zoals in de iOS-app */
  .btn, .btn.sm, .seg button, .list-foot .btn, .cm-chip, .cm-list-pill { min-height: 44px; }
  .btn, .btn.sm { min-width: 44px; }
  .icon-btn, .icon-btn.sm, .mobilebar .icon-btn, .sidebar .sb-icon-btn { width: 44px; height: 44px; }
  .sidebar .sb-item, .sb-me, .sb-timer-pill, .board-title, .brand, .sb-brand, .board-head .avatars { min-height: 44px; }
  .board-head .avatars { align-items: center; }
  .list:not(.collapsed) .list-head .list-name { padding-block: 14px; }
  .dock-btn, .sb-timer-pill { min-width: 44px; min-height: 44px; }
  .add-chip, .prio-btn, .due-chip { min-height: 44px; }
  .list-cards .card { min-height: 44px; }
  .icon-btn.sm.card-quick { width: 40px; height: 40px; }
  .check input { width: 20px; height: 20px; }
  .menu > button, .menu > a, .pick-row { min-height: 44px; }
  .cl-item { min-height: 44px; align-items: center; }
  .cl-item input[type=checkbox] { width: 22px; height: 22px; margin-top: 0; }
  /* kleine bediening houdt haar maat, maar het raakvlak groeit mee tot 44px */
  .lbl.big, .reactions .reaction, .cm-done, .cm-mem-x, .board-tile .star, .board-tile .tile-more { position: relative; }
  .lbl.big::after, .reactions .reaction::after, .cm-done::after, .cm-mem-x::after, .board-tile .star::after, .board-tile .tile-more::after { content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); translate: -50% -50%; }
  .lbl.big { overflow: visible; }
  .card-check.on { width: 22px; height: 22px; }
}
/* De balk boven het bord: als de knoppen niet meer op één rij passen, tonen ze enkel hun icoon in plaats van naar een
   tweede rij te springen. Gemeten op de balk zelf, want de zijbalk kan open of dicht staan. */
.board-head-wrap { container-type: inline-size; }
@container (max-width: 900px) { .board-head .btn .nav-label { display: none; } }
.dock-btn { gap: 7px; background: none; color: var(--ink-2); font: inherit; font-weight: 600; font-size: var(--fs-md); padding: 8px 14px; position: relative; white-space: nowrap; }
/* lange projectnamen: hoogstens twee regels, zodat het aantal kaarten op de tegel blijft staan */
.board-tile .tile-name b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-width: 0; }
/* een lange projectnaam in de balk boven het bord: afkappen in plaats van de balk hoger te maken */
/* de projectnaam is de titel van de pagina (h1); de knop erin dient om te hernoemen */
.board-h1 { font: inherit; letter-spacing: 0; display: flex; min-width: 0; max-width: min(42%, 420px); }
.board-head button.board-title { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
@media (max-width: 640px) { .board-h1 { max-width: 58%; } }

/* ---------- Het instellingenblad voor Beheer en Tijd ----------
   .ps-flat: panelen binnen het blad zijn secties zonder eigen kader (zoals op de werkruimtepagina).
   .ps-wide: een breder blad voor pagina's met tabellen en een kalender. */
.ps-wide .ps-sheet { max-width: 1360px; }
.ps-tile-icon { width: 40px; height: 40px; border-radius: var(--r-lg); display: grid; place-items: center; background: var(--signal-soft); color: var(--signal); }
.ps-flat .ps-content > .stat-grid { margin: 0; }
.ps-content .au-root { min-height: 0; }
/* knop in een melding, bv. Ongedaan maken */
.toast-act { border: 0; background: rgba(255, 255, 255, .16); color: inherit; font: inherit; font-weight: 700; font-size: var(--fs-sm); padding: 4px 10px; border-radius: var(--r-sm); cursor: pointer; margin-left: 6px; white-space: nowrap; }
.toast-act:hover { background: rgba(255, 255, 255, .28); }

/* ---------- Opdrachtpalet (Ctrl of Cmd + K) ---------- */
.overlay:has(> .cmdk) { align-items: flex-start; padding-top: min(14vh, 120px); }
.modal.cmdk { max-width: 620px; }
.cmdk .modal-body { padding: 0; }
.cmdk-top { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); color: var(--ink-3); }
.cmdk-input { flex: 1; min-width: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: var(--fs-lg); outline: none; }
.cmdk-list { max-height: min(52vh, 420px); overflow-y: auto; padding: 6px; }
.cmdk-group { padding: 8px 10px 4px; color: var(--ink-3); }
.cmdk-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-md); cursor: pointer; color: var(--ink); }
.cmdk-item[aria-selected="true"] { background: var(--signal-soft); }
.cmdk-item .swatch { flex: 0 0 auto; }
.cmdk-label { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.cmdk-hint { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.cmdk-empty { padding: 22px; text-align: center; margin: 0; }
.cmdk-empty .spinner { margin: 0 auto; }
.cmdk-foot { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-top: 1px solid var(--line); }
.cmdk-foot .kbd { margin-left: 8px; } .cmdk-foot .kbd:first-child { margin-left: 0; }
@media (max-width: 640px) { .overlay:has(> .cmdk) { padding-top: 0; } .cmdk-foot { display: none; } }

/* ---------- Reactie op klikken en aanwijzen ----------
   Elke knop, menuregel en tab antwoordt meteen: een zachte overgang bij aanwijzen en een korte indruk bij klikken. */
.btn, .icon-btn, .menu > button, .menu > a, .pick-row, .tabs button, .seg button, .chip, .sb-item { transition: background-color .12s, border-color .12s, color .12s, filter .12s, box-shadow .12s, transform .08s; }
.btn:active:not(:disabled), .chip:active { transform: scale(.97); }
.icon-btn:active:not(:disabled) { transform: scale(.9); }
.menu > button:active, .menu > a:active, .pick-row:active { background: var(--surface-3); }
.sb-item:active { background: var(--nav-active); }
.btn.danger:hover { filter: brightness(1.08); }
.tabs button:hover { color: var(--ink); }
.icon-btn:disabled { opacity: .45; cursor: not-allowed; }
/* vensters: de achtergrond komt zacht op en het venster gaat ook zacht weer weg */
.overlay { animation: overlay-in .16s ease-out; }
.overlay.closing { animation: overlay-out .13s ease-in forwards; pointer-events: none; }
.overlay.closing > .modal { animation: pop-out .13s ease-in forwards; }
@keyframes overlay-in { from { background-color: transparent; } }
@keyframes overlay-out { to { opacity: 0; } }
@keyframes pop-out { to { transform: translateY(4px) scale(.985); } }
.toast { animation: toast-in .22s cubic-bezier(.2, .8, .2, 1); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }
.pick-row.kb { background: var(--surface-2); }
/* startpagina op een telefoon: de balk op één rij (Inloggen staat ook groot in de pagina zelf) */
@media (max-width: 480px) { .lp-nav { flex-wrap: nowrap; } .lp-nav > .btn.ghost { display: none; } }
.tt-when { align-items: flex-end; flex-wrap: nowrap; }
.tt-when-dur { width: 84px; flex: none; }
@media (max-width: 560px) { .tt-when { flex-wrap: wrap; } .tt-when-dur { width: 100%; } }