/* SpaceBitz UI (richting Atlas): tokens en componenten, gedeeld door dashboard en OS. Bron: ontwerp/demos/03-atlas.html. */
:root{
  --bg:#f7f8fa; --surface:#ffffff; --surface-2:#f1f3f6; --line:#e4e7ec; --line-strong:#cfd4dc;
  --navy:#1b2a4a; --navy-700:#243659; --navy-soft:#e8ecf5;
  --text:#1f2a3d; --text-2:#3b4a66; --muted:#5b6578; --muted-2:#667085;
  --orange:#e8500a; --orange-deep:#c84207; --orange-deeper:#a93705; --orange-text:#b8400a; --orange-soft:#fff1ea;
  --blue:#2f6fed; --blue-text:#2a62d6; --blue-soft:#e6eefc;
  --green:#15803d; --green-soft:#dcfce7; --green-text:#166534;
  --red:#dc2626; --red-soft:#fee2e2; --red-text:#b91c1c;
  --purple:#6d28d9; --purple-soft:#ede9fe;
  --amber-soft:#fef3c7; --amber-text:#b45309;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px;
  --r:8px; --r-sm:6px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(16,24,40,.06); --shadow-md:0 4px 12px rgba(16,24,40,.08); --shadow-lg:0 16px 40px rgba(16,24,40,.16);
  --t-11:11px; --t-12:12px; --t-13:13px; --t-14:14px; --t-16:16px; --t-18:18px; --t-22:22px; --t-26:26px; --t-32:32px;
  --sidebar:256px; --topbar:56px; --demobar:0px;
  --font:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  /* Rollen van navy: --heading is de tekstkleur (koppen, namen, cijfers), --navy de vulling (actieve nav, navy-knop, nummercirkels), --navy-line de rand of lijn van een gekozen staat */
  --heading:var(--navy); --navy-line:var(--navy); --navy-fill:var(--navy); --on-navy:#fff;
  /* Vlakken: --card (kaart, knop, lade), --field (invoerveld), --inset (tegel of band binnen een kaart), --col (bordkolom) */
  --card:var(--surface); --field:#ffffff; --inset:var(--bg); --col:var(--surface-2); --mark:#141412; --merk:url(merk.svg);
  --orange-rand:#fdd3bd; --blue-deep:#1d4ed8; --blue-rand:#bfdbfe; --green-rand:#bbf7d0; --red-rand:#fecaca; --red-rand-strong:#fca5a5;
  --purple-text:#6d28d9; --purple-rand:#ddd6fe; --amber-rand:#fde68a; --teal-soft:#ccfbf1; --teal-text:#0f766e; --teal-rand:#99f6e4;
  --plan-bg:#f5f9ff; --plan-rand:#bfdbfe; --plan-dash:#93c5fd; --today:#fffaf6; --hover-row:#fafbfc; --skel-hi:#e9ecf1;
  --ring:rgba(47,111,237,.15); --scrim:rgba(27,42,74,.38);
  --cal-blue-b:#93c5fd; --cal-blue-bg:#dbeafe; --cal-blue-c:#1e40af; --cal-green-b:#86efac; --cal-green-bg:#dcfce7; --cal-green-c:#166534;
  --cal-orange-b:#fdba74; --cal-orange-bg:#ffedd5; --cal-orange-c:#9a3412; --cal-red-b:#fca5a5; --cal-red-bg:#fee2e2; --cal-red-c:#991b1b;
  --cal-purple-b:#c4b5fd; --cal-purple-bg:#ede9fe; --cal-purple-c:#5b21b6;
  /* Kleuren van een dienst (13 oktober, Jurgen: meer en duidelijk verschillende kleuren): roze, geel (oker), bruin en limoen, elk met de
     vier tokens van een kleurfamilie. --x is de accentlijn, het bolletje en het staal; --x-text de tekst op --x-soft; --x-rand de rand.
     Gemeten (licht): --x op --surface roze 6,0 · geel 4,9 · bruin 7,7 · limoen 4,9; --x op --x-soft 5,1 · 4,6 · 6,1 · 4,6; --x-text op
     --x-soft 6,7 · 8,1 · 8,4 · 7,9 (op --surface hoger). Onderscheid in de week (CIEDE2000, vulling of accentlijn) minstens 15,9, het
     slechtste bestaande paar (groen en teal). */
  --pink:#be185d; --pink-text:#9d174d; --pink-soft:#fce7f3; --pink-rand:#f9a8d4;
  --yellow:#a16207; --yellow-text:#713f12; --yellow-soft:#fef9c3; --yellow-rand:#facc15;
  --brown:#6f4a3a; --brown-text:#553829; --brown-soft:#ece3dd; --brown-rand:#cdb7a8;
  --lime:#5d7a07; --lime-text:#3d5410; --lime-soft:#f2fcd2; --lime-rand:#c6ef5d;
  /* Logo van een organisatie (8 oktober): --plaat is het lichte vlak achter een overwegend donker logo, --logo-plaat en --logo-plaat-pad
     zetten dat vlak alleen in de donkere stand aan (.avatar.logo.plaat); --paneel-licht en --paneel-donker zijn de twee vlakken van het
     voorbeeld bij het uploaden, in beide standen gelijk. Contrast: navy (#1b2a4a) op --plaat 13,0:1. */
  --plaat:#f4f4f5; --logo-plaat:transparent; --logo-plaat-pad:0px; --paneel-licht:#ffffff; --paneel-donker:#19191c;
  /* De gekozen staat op de klantpagina's (11 oktober, golf 1 van de gebruiksvriendelijkheid): een gekozen dag, uur, segment, persoon, sessie
     of verblijf. Licht gelijk aan navy; in het donker werd navy grafiet (#2c2c33) en viel een keuze weg tegen de vrije tegels (#1f1f23), dus
     daar een lichte vulling met donkere tekst. Gemeten: --op-kies op --kies licht 14,2:1 (wit op navy), donker 13,9:1; --kies tegen --inset
     donker 13,0:1 en tegen --card 13,8:1; --heading op --kies-zacht donker 11,2:1. */
  --kies:var(--navy); --op-kies:var(--on-navy); --kies-rand:var(--navy-line); --kies-zacht:var(--navy-soft);
  /* De fotokijker (13 oktober, wens van Jurgen: een foto vergroten op de boekingspagina; web/nachten.js, boek.css .nk-kijker). Een foto
     hoort op een donker vlak, in de lichte en de donkere stand; geen ander token is in beide standen donker en voor iets anders dan het
     voorbeeld van een logo bedoeld. --kijker het vlak over het hele scherm, --kijker-text tekst en iconen, --kijker-soft de vulling van
     een knop, --kijker-rand de rand (en de vulling bij hover). In alle drie de blokken gelijk. Gemeten: --kijker-text op --kijker 17,8:1,
     op --kijker-soft 13,7:1, op --kijker-rand 4,8:1; --kijker-rand tegen --kijker 3,7:1 (rand van een knop, minstens 3:1). */
  --kijker:#0c0c0e; --kijker-text:#f4f4f5; --kijker-soft:#26262b; --kijker-rand:#6b6b75;
}
/* Donkere variant: één set tokens, zelfde structuur (systeemvoorkeur tenzij data-theme="light", of data-theme="dark" expliciet).
   Navy-grijs canvas, kaarten een trede lichter, lichte koppen, zachte statusvullingen (16 tot 18 procent) met lichte tekst, zodat ook gedempte labels op een tegel 4,5:1 halen. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#121214; --surface:#19191c; --surface-2:#202024; --line:#2a2a2f; --line-strong:#3a3a41;
    --navy:#2c2c33; --navy-700:#3a3a43; --navy-soft:#26262c; --heading:#f4f4f5; --navy-line:#8c8c99;
    --text:#e8e8ea; --text-2:#c9c9ce; --muted:#9a9aa4; --muted-2:#8e8e98;
    --card:#19191c; --field:#141416; --inset:#1f1f23; --col:#141416; --mark:#f4f5f7; --merk:url(merk-paper.svg);
    --orange-text:#ff7a3d; --orange-soft:rgba(232,80,10,.16); --orange-rand:rgba(255,122,61,.45);
    --blue-text:#8ab4ff; --blue-deep:#9dbdff; --blue-soft:rgba(59,130,246,.18); --blue-rand:rgba(96,165,250,.45);
    --green:#1f9d55; --green-text:#7ee2a1; --green-soft:rgba(34,197,94,.16); --green-rand:rgba(74,222,128,.4);
    --red:#ef5350; --red-text:#ff9b9b; --red-soft:rgba(239,68,68,.16); --red-rand:rgba(252,165,165,.4); --red-rand-strong:rgba(252,165,165,.6);
    --purple:#a78bfa; --purple-text:#c4b5fd; --purple-soft:rgba(139,92,246,.18); --purple-rand:rgba(196,181,253,.4);
    --amber-text:#fbbf24; --amber-soft:rgba(245,158,11,.16); --amber-rand:rgba(251,191,36,.4);
    --teal-text:#5eead4; --teal-soft:rgba(20,184,166,.16); --teal-rand:rgba(94,234,212,.4);
    --plan-bg:rgba(59,130,246,.12); --plan-rand:rgba(96,165,250,.4); --plan-dash:rgba(96,165,250,.55);
    --today:#232326; --hover-row:#1f1f23; --skel-hi:#2a2a2f; --ring:rgba(255,255,255,.14); --scrim:rgba(0,0,0,.65);
    --shadow-sm:0 1px 2px rgba(0,0,0,.35); --shadow-md:0 4px 14px rgba(0,0,0,.4); --shadow-lg:0 16px 40px rgba(0,0,0,.55);
    --cal-blue-b:rgba(147,197,253,.55); --cal-blue-bg:rgba(59,130,246,.22); --cal-blue-c:#c7dbff; --cal-green-b:rgba(134,239,172,.5); --cal-green-bg:rgba(34,197,94,.2); --cal-green-c:#b5f0c8;
    --cal-orange-b:rgba(253,186,116,.55); --cal-orange-bg:rgba(249,115,22,.22); --cal-orange-c:#ffd2b0; --cal-red-b:rgba(252,165,165,.55); --cal-red-bg:rgba(239,68,68,.22); --cal-red-c:#ffc2c2;
    --cal-purple-b:rgba(196,181,253,.55); --cal-purple-bg:rgba(139,92,246,.24); --cal-purple-c:#dcd3ff;
    /* Gemeten (donker, op --card): --x roze 6,6 · geel 11,5 · bruin 7,4 · limoen 11,6; --x-text op --x-soft 10,0 · 10,9 · 9,9 · 11,0. */
    --pink:#f472b6; --pink-text:#fbcfe8; --pink-soft:rgba(236,72,153,.2); --pink-rand:rgba(249,168,212,.5);
    --yellow:#facc15; --yellow-text:#fef08a; --yellow-soft:rgba(234,179,8,.16); --yellow-rand:rgba(250,204,21,.5);
    --brown:#c8a083; --brown-text:#ecdccf; --brown-soft:rgba(168,120,90,.22); --brown-rand:rgba(200,160,131,.5);
    --lime:#a3e635; --lime-text:#d9f99d; --lime-soft:rgba(132,204,22,.16); --lime-rand:rgba(190,242,100,.45);
    --plaat:#f4f4f5; --logo-plaat:var(--plaat); --logo-plaat-pad:4px; --paneel-licht:#ffffff; --paneel-donker:#19191c;
    --kies:#e4e4e7; --op-kies:#18181b; --kies-rand:#e4e4e7; --kies-zacht:#34343b;
    --kijker:#0c0c0e; --kijker-text:#f4f4f5; --kijker-soft:#26262b; --kijker-rand:#6b6b75;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#121214; --surface:#19191c; --surface-2:#202024; --line:#2a2a2f; --line-strong:#3a3a41;
  --navy:#2c2c33; --navy-700:#3a3a43; --navy-soft:#26262c; --heading:#f4f4f5; --navy-line:#8c8c99;
  --text:#e8e8ea; --text-2:#c9c9ce; --muted:#9a9aa4; --muted-2:#8e8e98;
  --card:#19191c; --field:#141416; --inset:#1f1f23; --col:#141416; --mark:#f4f5f7; --merk:url(merk-paper.svg);
  --orange-text:#ff7a3d; --orange-soft:rgba(232,80,10,.16); --orange-rand:rgba(255,122,61,.45);
  --blue-text:#8ab4ff; --blue-deep:#9dbdff; --blue-soft:rgba(59,130,246,.18); --blue-rand:rgba(96,165,250,.45);
  --green:#1f9d55; --green-text:#7ee2a1; --green-soft:rgba(34,197,94,.16); --green-rand:rgba(74,222,128,.4);
  --red:#ef5350; --red-text:#ff9b9b; --red-soft:rgba(239,68,68,.16); --red-rand:rgba(252,165,165,.4); --red-rand-strong:rgba(252,165,165,.6);
  --purple:#a78bfa; --purple-text:#c4b5fd; --purple-soft:rgba(139,92,246,.18); --purple-rand:rgba(196,181,253,.4);
  --amber-text:#fbbf24; --amber-soft:rgba(245,158,11,.16); --amber-rand:rgba(251,191,36,.4);
  --teal-text:#5eead4; --teal-soft:rgba(20,184,166,.16); --teal-rand:rgba(94,234,212,.4);
  --plan-bg:rgba(59,130,246,.12); --plan-rand:rgba(96,165,250,.4); --plan-dash:rgba(96,165,250,.55);
  --today:#232326; --hover-row:#1f1f23; --skel-hi:#2a2a2f; --ring:rgba(255,255,255,.14); --scrim:rgba(0,0,0,.65);
  --shadow-sm:0 1px 2px rgba(0,0,0,.35); --shadow-md:0 4px 14px rgba(0,0,0,.4); --shadow-lg:0 16px 40px rgba(0,0,0,.55);
  --cal-blue-b:rgba(147,197,253,.55); --cal-blue-bg:rgba(59,130,246,.22); --cal-blue-c:#c7dbff; --cal-green-b:rgba(134,239,172,.5); --cal-green-bg:rgba(34,197,94,.2); --cal-green-c:#b5f0c8;
  --cal-orange-b:rgba(253,186,116,.55); --cal-orange-bg:rgba(249,115,22,.22); --cal-orange-c:#ffd2b0; --cal-red-b:rgba(252,165,165,.55); --cal-red-bg:rgba(239,68,68,.22); --cal-red-c:#ffc2c2;
  --cal-purple-b:rgba(196,181,253,.55); --cal-purple-bg:rgba(139,92,246,.24); --cal-purple-c:#dcd3ff;
  /* Gemeten (donker, op --card): --x roze 6,6 · geel 11,5 · bruin 7,4 · limoen 11,6; --x-text op --x-soft 10,0 · 10,9 · 9,9 · 11,0. */
  --pink:#f472b6; --pink-text:#fbcfe8; --pink-soft:rgba(236,72,153,.2); --pink-rand:rgba(249,168,212,.5);
  --yellow:#facc15; --yellow-text:#fef08a; --yellow-soft:rgba(234,179,8,.16); --yellow-rand:rgba(250,204,21,.5);
  --brown:#c8a083; --brown-text:#ecdccf; --brown-soft:rgba(168,120,90,.22); --brown-rand:rgba(200,160,131,.5);
  --lime:#a3e635; --lime-text:#d9f99d; --lime-soft:rgba(132,204,22,.16); --lime-rand:rgba(190,242,100,.45);
  --plaat:#f4f4f5; --logo-plaat:var(--plaat); --logo-plaat-pad:4px; --paneel-licht:#ffffff; --paneel-donker:#19191c;
  --kies:#e4e4e7; --op-kies:#18181b; --kies-rand:#e4e4e7; --kies-zacht:#34343b;
  --kijker:#0c0c0e; --kijker-text:#f4f4f5; --kijker-soft:#26262b; --kijker-rand:#6b6b75;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:var(--t-14);line-height:1.5;font-feature-settings:"tnum" 1;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
a{color:var(--blue-text)}
a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4{margin:0;color:var(--heading);font-weight:700;letter-spacing:-.01em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
blockquote{margin:0}
dl{margin:0}
svg.i{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
svg.i.sm{width:16px;height:16px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* Logo */
.logo{display:inline-flex;align-items:center;gap:10px;color:var(--heading);text-decoration:none}
.logo:hover{text-decoration:none}
.logo .mark{width:30px;height:24px;color:var(--mark);flex:none}
.logo .word{font-weight:800;font-size:var(--t-16);letter-spacing:-.02em;color:var(--heading);white-space:nowrap}
.logo .word b{color:var(--orange);font-weight:800}
.logo .word .os{color:var(--text);font-weight:700}
.on-dark .mark{color:#f4f5f7}

/* Shell */
.shell{display:flex;min-height:calc(100vh - var(--demobar))}
.side{width:var(--sidebar);flex:none;background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:var(--demobar);height:calc(100vh - var(--demobar));overflow:auto}
.side[hidden]{display:none}
.side .head{height:var(--topbar);flex:none;display:flex;align-items:center;padding:0 20px;border-bottom:1px solid var(--line)}
.side .back{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:var(--t-13);font-weight:600;padding:12px 20px 4px;text-decoration:none}
.side .back:hover{color:var(--heading)}
.nav{padding:8px 12px;flex:1}
.nav .grp{font-size:var(--t-11);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:14px 12px 6px}
.nav a{display:flex;align-items:center;gap:10px;height:40px;padding:0 12px;border-radius:var(--r-sm);color:var(--text-2);font-weight:600;font-size:var(--t-14);text-decoration:none}
.nav a:hover{background:var(--surface-2);color:var(--heading);text-decoration:none}
.nav a[aria-current="page"]{background:var(--navy);color:#fff}
.nav a .cnt{margin-left:auto;font-size:var(--t-12);font-weight:700;background:var(--surface-2);color:var(--text-2);border-radius:var(--r-pill);padding:1px 8px;min-width:24px;text-align:center}
.nav a[aria-current="page"] .cnt{background:rgba(255,255,255,.18);color:#fff}
.nav .steps{margin:2px 0 6px 22px;padding-left:12px;border-left:1px solid var(--line)}
.nav .steps li{font-size:var(--t-12);color:var(--muted);line-height:1.35;padding:4px 0 4px 10px;position:relative}
.nav .steps li::before{content:"";position:absolute;left:-15px;top:11px;width:5px;height:5px;border-radius:50%;background:var(--line-strong)}
.nav .steps li.done::before{background:var(--orange)}
.side .foot{border-top:1px solid var(--line);padding:12px 12px 16px}
.user{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--r-sm)}
.user .n{font-weight:700;color:var(--heading);line-height:1.2}
.user .r{font-size:var(--t-12);color:var(--muted)}
.side .foot .btn{width:100%;margin-top:8px}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--navy);color:#fff;font-weight:700;font-size:var(--t-13);display:inline-flex;align-items:center;justify-content:center;flex:none}
.avatar.sm{width:24px;height:24px;font-size:var(--t-11)}
.avatar.lg{width:40px;height:40px;font-size:var(--t-14)}
.avatar.m{background:#2f6fed}.avatar.l{background:#0f766e}.avatar.v{background:#b8400a}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{height:var(--topbar);background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:0 24px;position:sticky;top:var(--demobar);z-index:20}
.topbar .brand-m{display:none}
.search{position:relative;flex:1;max-width:520px}
.search input{width:100%;height:36px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg);padding:0 36px 0 36px;font-size:var(--t-14)}
.search input::placeholder{color:var(--muted-2)}
.search input:focus{background:var(--field);border-color:var(--blue);outline:none;box-shadow:0 0 0 3px var(--ring)}
.search .i{position:absolute;left:10px;top:8px;color:var(--muted)}
.search kbd{position:absolute;right:8px;top:8px;height:20px;padding:0 6px;border:1px solid var(--line);border-radius:4px;background:var(--card);font:600 var(--t-11)/18px var(--font);color:var(--muted)}
.topbar .sp{flex:1}
.topbar .acc{display:flex;align-items:center;gap:8px;height:40px;padding:0 6px 0 4px;border:0;background:transparent;border-radius:var(--r-sm);font-weight:600;color:var(--text-2)}
.topbar .acc:hover{background:var(--surface-2)}
.ibtn{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;border-radius:var(--r-sm);color:var(--text-2);position:relative;flex:none;padding:0}
.ibtn:hover{background:var(--surface-2);color:var(--heading)}
.ibtn .dot{position:absolute;top:9px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--orange);border:2px solid var(--surface)}
.ibtn.ghost{width:32px;height:32px;color:var(--muted)}
.ibtn.ghost:hover{color:var(--heading)}
.ibtn.bordered{border:1px solid var(--line-strong);background:var(--card)}
[hidden]{display:none!important}

.content{padding:24px;flex:1}

/* Paginakop */
.ph{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.ph .txt{flex:1;min-width:260px}
.eyebrow{font-size:var(--t-12);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ph h1{font-size:var(--t-26);line-height:1.2;margin-top:2px}
.ph .intro{color:var(--muted);margin-top:6px;max-width:760px}
.ph .acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:flex-end}

/* Knoppen */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 14px;border-radius:var(--r-sm);border:1px solid var(--line-strong);background:var(--card);color:var(--text-2);font-weight:600;font-size:var(--t-14);white-space:nowrap;text-decoration:none}
.btn:hover{background:var(--surface-2);color:var(--heading);text-decoration:none}
.btn.primary{background:var(--orange-deep);border-color:var(--orange-deep);color:#fff}
.btn.primary:hover{background:var(--orange-deeper);border-color:var(--orange-deeper);color:#fff}
.btn.navy{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.navy:hover{background:var(--navy-700);color:#fff}
.btn.danger{color:var(--red-text);border-color:var(--line-strong)}
.btn.danger:hover{background:var(--red-soft);border-color:var(--red-rand-strong);color:var(--red-text)}
.btn.danger.solid{background:var(--red);border-color:var(--red);color:#fff}
.btn.danger.solid:hover{background:#b91c1c;border-color:#b91c1c;color:#fff}
.btn.quiet{border-color:transparent;background:transparent}
.btn.quiet:hover{background:var(--surface-2)}
.btn.sm{height:32px;padding:0 10px;font-size:var(--t-13)}
.btn.xs{height:28px;padding:0 8px;font-size:var(--t-12)}
.btn.link{border:0;background:none;color:var(--blue-text);padding:0;height:auto}
.btn.link:hover{text-decoration:underline;background:none}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* Kaarten */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm)}
.card .ch{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.card .ch h2,.card .ch h3{font-size:var(--t-16)}
.card .ch .sub{color:var(--muted);font-size:var(--t-13);font-weight:500}
.card .ch .r{margin-left:auto;display:flex;gap:8px;align-items:center}
.card .cb{padding:16px 20px}

/* KPI */
.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:16px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px 12px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--shadow-sm);min-width:0}
.kpi .l{font-size:var(--t-12);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .row{display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.kpi .v{font-size:var(--t-26);font-weight:800;color:var(--heading);line-height:1;letter-spacing:-.02em}
.kpi .spark{width:72px;height:28px;flex:none}
.kpi .tr{display:inline-flex;align-items:center;gap:4px;font-size:var(--t-12);font-weight:700;white-space:nowrap;overflow:hidden}
.kpi .tr .i{width:14px;height:14px}
.tr.up{color:var(--green-text)}.tr.down{color:var(--red-text)}.tr.flat{color:var(--muted)}
.kpi .tr span.m{color:var(--muted);font-weight:500;overflow:hidden;text-overflow:ellipsis}

/* Filters */
.toolbar{display:flex;align-items:center;gap:8px;padding:10px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.toolbar .count{color:var(--muted);font-size:var(--t-13)}
.toolbar .count b{color:var(--heading);font-weight:700}
.toolbar .r{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)}
.filters .search{max-width:320px;min-width:220px}
.filters .search input{height:40px;background:var(--field)}
.chip-sel{position:relative;display:inline-flex;align-items:center}
.chip-sel select{appearance:none;-webkit-appearance:none;height:40px;padding:0 30px 0 12px;border:1px solid var(--line-strong);border-radius:var(--r-pill);background:var(--card);font-weight:600;font-size:var(--t-13);color:var(--text-2);max-width:200px}
.chip-sel .i{position:absolute;right:9px;top:50%;transform:translateY(-50%);width:16px;height:16px;pointer-events:none;color:var(--muted)}
.chip-sel.active select{border-color:var(--navy-line);background:var(--navy-soft);color:var(--heading)}
.filters .count{margin-left:auto;color:var(--muted);font-size:var(--t-13);white-space:nowrap}

/* Tabel */
.tbl-wrap{overflow-x:auto}
@media (min-width:1300px){.tbl-wrap{overflow:visible}}
table.tbl{width:100%;border-collapse:collapse;min-width:960px}
.tbl th{height:40px;padding:0 8px;text-align:left;font-size:var(--t-11);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);background:var(--inset);white-space:nowrap}
.tbl th button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:4px;height:40px}
.tbl th button:hover{color:var(--heading)}
.tbl th button .i{width:14px;height:14px;opacity:.6}
.tbl th[aria-sort] button{color:var(--heading)}
.tbl th[aria-sort] button .i{opacity:1}
.tbl td{height:44px;padding:4px 8px;border-bottom:1px solid var(--line);vertical-align:middle;white-space:nowrap;font-size:var(--t-13)}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:var(--hover-row)}
.tbl tbody tr.sel{background:var(--blue-soft)}
.tbl .co{display:flex;align-items:center;gap:10px}
.tbl .co .n{font-weight:700;color:var(--heading);font-size:var(--t-13);max-width:180px;white-space:normal;line-height:1.25}
.tbl .co .n a{color:inherit;text-decoration:none}
.tbl .co .n a:hover{text-decoration:underline}
.tbl .co .p{font-size:var(--t-12);color:var(--muted)}
.tbl .two{line-height:1.25}
.tbl .two small{display:block;font-size:var(--t-12);color:var(--muted)}
.tbl .own{font-size:var(--t-12);color:var(--muted);margin-top:2px;display:flex;align-items:center;gap:6px}
.tbl .acts{display:flex;gap:0;justify-content:flex-end}
.more{position:relative}
.pop{position:absolute;right:0;top:calc(100% + 4px);z-index:15;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow-md);min-width:230px;padding:4px;display:grid;text-align:left}
.pop button{all:unset;cursor:pointer;display:flex;gap:10px;align-items:center;height:36px;padding:0 10px;border-radius:4px;font-size:var(--t-13);font-weight:600;color:var(--text-2);white-space:nowrap}
.pop button:hover{background:var(--surface-2);color:var(--heading)}
.pop button.danger{color:var(--red-text)}
.pop button.danger:hover{background:var(--red-soft)}
.tbl tr:nth-last-child(-n+2) .pop{top:auto;bottom:calc(100% + 4px)}
.tbl .acts .ibtn{width:26px;height:28px}
.tbl .acts .ibtn .i{width:18px;height:18px}
.tbl .chk,.tbl .ac{width:1%}
.tbl .muted{color:var(--muted)}
.tfoot{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--line);font-size:var(--t-13);color:var(--muted);flex-wrap:wrap}
.pager{margin-left:auto;display:flex;gap:4px;align-items:center}
.pager button{min-width:32px;height:32px;border:1px solid var(--line);background:var(--card);border-radius:var(--r-sm);font-weight:600;font-size:var(--t-13);color:var(--text-2);display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
.pager button[aria-current="page"]{background:var(--navy);border-color:var(--navy);color:#fff}
.pager button:hover:not([aria-current]){background:var(--surface-2)}
.pager button[disabled]{opacity:.45;cursor:not-allowed}
.bulk{display:none;align-items:center;gap:8px;padding:8px 16px;background:var(--navy);color:#fff;font-weight:600;font-size:var(--t-13);flex-wrap:wrap}
.bulk.on{display:flex}
.bulk .btn{height:32px;font-size:var(--t-13);background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.bulk .btn:hover{background:rgba(255,255,255,.12);color:#fff}
.bulk .n{margin-right:8px}
.bulk .x{margin-left:auto;color:#fff}
.bulk .x:hover{background:rgba(255,255,255,.12);color:#fff}
input[type="checkbox"].box{appearance:none;-webkit-appearance:none;width:18px;height:18px;border:1.5px solid var(--line-strong);border-radius:4px;background:var(--field);margin:0;display:inline-grid;place-content:center;cursor:pointer;vertical-align:middle;flex:none}
input[type="checkbox"].box::before{content:"";width:10px;height:10px;clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%);background:var(--on-navy);transform:scale(0)}
input[type="checkbox"].box:checked{background:var(--navy-line);border-color:var(--navy-line)}
input[type="checkbox"].box:checked::before{transform:scale(1)}
input[type="checkbox"].box:indeterminate{background:var(--navy-line);border-color:var(--navy-line)}
input[type="checkbox"].box:indeterminate::before{transform:scale(1);clip-path:inset(40% 10% 40% 10%)}
input[type="checkbox"].box:disabled{cursor:not-allowed}

/* Labels en chips */
.lbl{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:var(--t-12);font-weight:800;flex:none;border:1px solid transparent}
.lbl.A{background:var(--green-soft);color:var(--green-text);border-color:var(--green-rand)}
.lbl.B{background:var(--blue-soft);color:var(--blue-deep);border-color:var(--blue-rand)}
.lbl.C{background:var(--amber-soft);color:var(--amber-text);border-color:var(--amber-rand)}
.lbl.D{background:var(--surface-2);color:var(--muted);border-color:var(--line-strong)}
.lbl.lg{width:40px;height:40px;font-size:var(--t-18)}
.st{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:var(--r-pill);font-size:var(--t-11);font-weight:800;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;border:1px solid transparent}
.st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.st.lead{background:var(--surface-2);color:var(--text-2);border-color:var(--line)}
.st.bellen{background:var(--orange-soft);color:var(--orange-text);border-color:var(--orange-rand)}
.st.gesprek{background:var(--blue-soft);color:var(--blue-deep);border-color:var(--blue-rand)}
.st.akkoord{background:var(--teal-soft);color:var(--teal-text);border-color:var(--teal-rand)}
.st.project{background:var(--purple-soft);color:var(--purple-text);border-color:var(--purple-rand)}
.st.live{background:var(--green-soft);color:var(--green-text);border-color:var(--green-rand)}
.st.geen{background:var(--red-soft);color:var(--red-text);border-color:var(--red-rand)}
.st.nieuw{background:var(--green-soft);color:var(--green-text);border-color:var(--green-rand)}
.chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--text-2);font-size:var(--t-12);font-weight:700;border:1px solid var(--line);white-space:nowrap}
.chip.navy{background:var(--navy);color:#fff;border-color:var(--navy)}
.chip.orange{background:var(--orange-soft);color:var(--orange-text);border-color:var(--orange-rand)}
.chip.blue{background:var(--blue-soft);color:var(--blue-deep);border-color:var(--blue-rand)}
.chip.green{background:var(--green-soft);color:var(--green-text);border-color:var(--green-rand)}
.chip.red{background:var(--red-soft);color:var(--red-text);border-color:var(--red-rand)}
.chip.sector{text-transform:uppercase;letter-spacing:.05em;font-size:var(--t-11)}
.chip .i{width:14px;height:14px}
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill);background:var(--orange);color:#fff;font-size:var(--t-11);font-weight:800}
.badge.navy{background:var(--navy)}
.src{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-13);color:var(--text-2)}
.src::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--muted)}
.src.leadgen::before{background:var(--orange)}.src.places::before{background:var(--blue)}.src.csv::before{background:var(--purple)}.src.eigen::before{background:var(--green)}

/* Velden */
.field{display:flex;flex-direction:column;gap:6px}
.field label,.field .lab{font-size:var(--t-12);font-weight:700;color:var(--text-2);letter-spacing:.02em}
.inp,.sel,.ta{width:100%;height:40px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--field);padding:0 12px;font-size:var(--t-14);color:var(--text)}
.inp::placeholder,.ta::placeholder{color:var(--muted-2)}
.inp:focus,.sel:focus,.ta:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px var(--ring)}
.inp.err{border-color:var(--red)}
.ta{height:auto;min-height:88px;padding:10px 12px;resize:vertical;line-height:1.5}
.selw{position:relative}
.selw .sel{appearance:none;-webkit-appearance:none;padding-right:34px}
.selw .i{position:absolute;right:10px;top:10px;pointer-events:none;color:var(--muted)}
.field .hint{font-size:var(--t-12);color:var(--muted)}
.field .hint.err{color:var(--red-text)}
.inp.sm,.sel.sm{height:36px;font-size:var(--t-13)}

/* Uitleg-icoontje (.uitleg-i met .uitleg-pop, stijlgids 3.4): een rond knopje van 18 px naast een label of kop, alleen bij velden waar de
   naam niet volstaat. .lab-rij zet het label (of de kop) en het knopje op één regel; het knopje telt niet mee in de hoogte van de regel,
   zodat labels naast elkaar op gelijke hoogte blijven. Klik, Enter of spatie opent de uitleg (native popover met popovertarget, in de
   bovenste laag: geen kader knipt hem af); Escape, een klik ernaast of nog eens klikken sluit, de focus blijft op het knopje. web/uitleg.js
   zet hem onder het knopje (links uitgelijnd) of, als hij daar niet past, links en/of boven ervan; op een telefoon over de volle breedte.
   De positie komt als berekende geometrie in --x en --y. De cirkel en de "i" zijn ::before en ::after, zodat het tikdoel op een telefoon
   40 px kan zijn zonder dat het knopje groter oogt. */
.lab-rij{display:flex;align-items:center;gap:6px;min-width:0}
.lab-rij>label,.lab-rij>.lab,.lab-rij>h2,.lab-rij>h3,.lab-rij>h4{margin:0;min-width:0}
.uitleg-i{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin:0;padding:0;border:0;border-radius:50%;background:none;color:var(--muted);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.uitleg-i::before{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;box-sizing:border-box;border:1px solid var(--line-strong);border-radius:50%;background:var(--card);transition:background .15s,border-color .15s,box-shadow .15s}
.uitleg-i::after{content:"i";position:relative;font-family:var(--font);font-size:var(--t-11);font-weight:800;line-height:1;letter-spacing:0;text-transform:none}
.uitleg-i:hover,.uitleg-i:focus-visible,.uitleg-i[aria-expanded="true"]{color:var(--heading)}
.uitleg-i:hover::before,.uitleg-i[aria-expanded="true"]::before{background:var(--navy-soft)}
.uitleg-i[aria-expanded="true"]::before{border-color:var(--navy-line)}
.uitleg-i:focus-visible{outline:none}
.uitleg-i:focus-visible::before{background:var(--navy-soft);border-color:var(--blue);box-shadow:0 0 0 3px var(--ring)}
.uitleg-pop{position:fixed;inset:auto;left:var(--x,16px);top:var(--y,16px);margin:0;width:max-content;max-width:min(320px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;padding:12px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);box-shadow:var(--shadow-md);color:var(--text-2);font-family:var(--font);font-size:var(--t-13);font-weight:400;line-height:1.5;letter-spacing:0;text-transform:none;text-align:left;white-space:normal}
.uitleg-pop .k{display:block;margin:0 0 4px;font-size:var(--t-13);font-weight:700;color:var(--heading)}
.uitleg-pop p{margin:0}
.uitleg-pop p+p{margin-top:8px}
.uitleg-pop b{color:var(--heading);font-weight:600}
.uitleg-pop code{font-family:var(--mono);font-size:var(--t-12);color:var(--heading)}
.uitleg-pop.vol{left:16px;right:16px;width:auto;max-width:none}
.uitleg-pop:popover-open{animation:uitleg-in .12s ease-out}
@keyframes uitleg-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.uitleg-pop.boven:popover-open{animation-name:uitleg-in-boven}
@keyframes uitleg-in-boven{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* Zonder native popover (oudere browser): uitleg.js zet .geen-popover op <html> en .open op de uitleg die openstaat. */
.geen-popover .uitleg-pop{display:none;z-index:60}
.geen-popover .uitleg-pop.open{display:block}
/* Telefoon: het tikdoel is 40 x 40 px; de marges houden de regel even hoog als zonder (28 px) en laten de cirkel op zijn plaats. */
@media (max-width:560px){
  .lab-rij{gap:0;min-height:28px}
  .uitleg-i{width:40px;height:40px;margin:-6px -11px -6px 0}
}

/* Tabs */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line)}
.tabs button{all:unset;cursor:pointer;flex:none;height:40px;padding:0 12px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;display:inline-flex;align-items:center;gap:8px}
.tabs button:hover{color:var(--heading)}
.tabs button[aria-selected="true"]{color:var(--heading);border-color:var(--orange)}
.tabs button .cnt{font-size:var(--t-12);background:var(--surface-2);border-radius:var(--r-pill);padding:0 7px;font-weight:700;color:var(--text-2)}
.seg{display:inline-flex;border:1px solid var(--line-strong);border-radius:var(--r-sm);overflow:hidden;background:var(--card)}
.seg button{all:unset;cursor:pointer;height:38px;padding:0 14px;font-weight:600;color:var(--text-2);display:inline-flex;align-items:center;gap:8px;border-right:1px solid var(--line)}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--navy);color:#fff}
.seg button .cnt{font-size:var(--t-12);font-weight:700;opacity:.8}

/* Lade (klantkaart) */
.scrim{position:fixed;inset:var(--demobar) 0 0 0;background:var(--scrim);z-index:40}
.drawer{position:fixed;top:var(--demobar);right:0;bottom:0;width:820px;max-width:100%;background:var(--card);z-index:50;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);border-left:1px solid var(--line)}
.drawer .dh{padding:16px 24px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;gap:12px;flex:none}
.drawer .dh h2{font-size:var(--t-22);line-height:1.2}
.drawer .dh .meta{color:var(--muted);font-size:var(--t-13);margin-top:4px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.drawer .dh .r{margin-left:auto;display:flex;gap:8px;align-items:center}
.drawer .db{flex:1;overflow:auto;display:grid;grid-template-columns:272px 1fr}
.drawer .dl{border-right:1px solid var(--line);padding:20px;background:var(--inset)}
.drawer .dr{padding:20px 24px;min-width:0}
.drawer .df{border-top:1px solid var(--line);padding:12px 24px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--card);flex:none}
.drawer .df .btn{height:36px;padding:0 12px;font-size:var(--t-13)}
.drawer .df .ibtn{width:36px;height:36px}
.ibtn.danger{color:var(--red-text)}
.ibtn.danger:hover{background:var(--red-soft);color:var(--red-text)}
.drawer .df .sp{flex:1}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:var(--t-13)}
.kv dt{color:var(--muted);font-weight:600;white-space:nowrap}
.kv dd{margin:0;color:var(--text);min-width:0;overflow-wrap:anywhere}
.blk{margin-bottom:20px}
.blk:last-child{margin-bottom:0}
.blk h3{font-size:var(--t-12);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.sec{border:1px solid var(--line);border-radius:var(--r);margin-bottom:16px;background:var(--card)}
.sec > .sh{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.sec > .sh h3{font-size:var(--t-14);color:var(--heading)}
.sec > .sh .r{margin-left:auto;display:flex;gap:8px;align-items:center}
.sec > .sb{padding:16px}
.facets{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.facet{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;background:var(--inset)}
.facet .k{font-size:var(--t-11);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.facet .v{font-weight:600;color:var(--heading);margin-top:2px;font-size:var(--t-13)}
details.src-d{border-top:1px solid var(--line);padding:8px 0}
details.src-d summary{cursor:pointer;font-weight:600;font-size:var(--t-13);color:var(--text-2);list-style:none;display:flex;align-items:center;gap:8px;min-height:28px}
details.src-d summary::-webkit-details-marker{display:none}
details.src-d summary .i{transition:transform .15s}
details[open].src-d summary .i{transform:rotate(180deg)}
details.src-d .d{padding:8px 0 4px 24px;color:var(--muted);font-size:var(--t-13)}
.proof{margin:12px 0;display:grid;gap:8px}
.proof li{display:flex;gap:10px;font-size:var(--t-13);color:var(--text)}
.proof li .n{width:20px;height:20px;border-radius:50%;background:var(--navy-soft);color:var(--heading);font-size:var(--t-11);font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex:none;margin-top:1px}
.belhoek{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;background:var(--inset);font-size:var(--t-13)}
.belhoek b{color:var(--heading)}
.quote{border-left:3px solid var(--orange);padding:8px 14px;margin:12px 0;font-size:var(--t-14);font-weight:600;color:var(--heading);background:var(--orange-soft);border-radius:0 var(--r-sm) var(--r-sm) 0}
.foot-note{font-size:var(--t-12);color:var(--muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tl{display:grid;gap:0}
.tl li{display:grid;grid-template-columns:118px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:var(--t-13)}
.tl li:last-child{border-bottom:0}
.tl .w{color:var(--muted);font-weight:600}
.tl .o{font-weight:700;color:var(--heading)}
.tl .nt{color:var(--text-2)}
.tl .wie{color:var(--muted);font-size:var(--t-12);margin-top:2px}
.msgs{display:grid;gap:12px;margin-bottom:12px}
.msg{display:flex;gap:10px}
.msg .b{background:var(--inset);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 12px;font-size:var(--t-13);flex:1;min-width:0}
.msg .b .w{font-weight:700;color:var(--heading);margin-right:6px}
.msg .b .t{color:var(--muted);font-size:var(--t-12)}
.msg .b .at{color:var(--blue-text);font-weight:600}
.composer{border:1px solid var(--line-strong);border-radius:var(--r-sm)}
.composer textarea{border:0;width:100%;min-height:72px;padding:10px 12px;resize:vertical;border-radius:var(--r-sm) var(--r-sm) 0 0;display:block}
.composer textarea:focus{outline:none}
.composer textarea::placeholder{color:var(--muted-2)}
.composer .cr{display:flex;gap:6px;align-items:center;padding:8px;border-top:1px solid var(--line);flex-wrap:wrap}
.composer .cr .btn.primary{margin-left:auto}
.chipbtn{height:28px;padding:0 10px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--card);font-size:var(--t-12);font-weight:700;color:var(--blue-text);display:inline-flex;align-items:center;gap:4px}
.chipbtn:hover{background:var(--blue-soft)}

/* Bellen */
.bel-grid{display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:start}
.belkaart .top{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.belkaart h2{font-size:var(--t-22)}
.tel{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:var(--r);padding:12px 16px;background:var(--inset);margin:16px 0;flex-wrap:wrap}
.tel a{font-size:var(--t-26);font-weight:800;color:var(--heading);letter-spacing:.01em;text-decoration:none;line-height:1}
.tel a:hover{color:var(--orange-text)}
.tel .i{color:var(--orange);width:24px;height:24px}
.tel .r{margin-left:auto;display:flex;gap:8px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mini{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px}
.mini h4{font-size:var(--t-11);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.mini ol{counter-reset:n;display:grid;gap:4px}
.mini ol li{display:flex;gap:8px;font-size:var(--t-13);font-weight:600;color:var(--heading)}
.mini ol li::before{counter-increment:n;content:counter(n) ".";color:var(--orange-text);font-weight:800}
.outcomes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0 8px}
.outcome{display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 14px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--card);font-weight:700;color:var(--heading);text-align:left;line-height:1.25}
.outcome:hover{border-color:var(--navy-line);background:var(--navy-soft)}
.outcome kbd{width:26px;height:26px;border-radius:var(--r-sm);background:var(--navy);color:#fff;display:inline-flex;align-items:center;justify-content:center;font:800 var(--t-13) var(--font);flex:none}
.outcome.two kbd{background:var(--orange-deep)}
.cbrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:12px 0}
.cbrow .l{color:var(--muted);font-weight:600;font-size:var(--t-13)}
.cbrow .chip{height:32px;cursor:pointer}
.cbrow .chip small{font-weight:500;color:var(--muted)}
.cbrow .chip.navy small{color:rgba(255,255,255,.75)}
.cbrow .inp{width:160px;height:32px;font-size:var(--t-13)}
.uitleg{font-size:var(--t-13);color:var(--muted);margin:8px 0 16px}
.uitleg b{color:var(--text)}
.plan{border:1px solid var(--plan-rand);background:var(--plan-bg);border-radius:var(--r);padding:16px}
.plan h3{display:flex;align-items:center;gap:10px;font-size:var(--t-16)}
.plan h3 kbd{width:26px;height:26px;border-radius:var(--r-sm);background:var(--blue);color:#fff;display:inline-flex;align-items:center;justify-content:center;font:800 var(--t-13) var(--font);flex:none}
.plan .sub{color:var(--muted);font-size:var(--t-13);margin:4px 0 12px}
.calendly{height:220px;border:1px dashed var(--plan-dash);border-radius:var(--r-sm);background:var(--card);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-weight:600;text-align:center;padding:0 16px}
.calendly .i{width:28px;height:28px;color:var(--blue)}
.shortcuts{font-size:var(--t-12);color:var(--muted);margin-top:16px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center}
.shortcuts kbd{border:1px solid var(--line-strong);border-radius:4px;padding:0 5px;font:700 var(--t-11)/18px var(--font);background:var(--card);color:var(--text-2)}
.stat3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stat3 div{background:var(--inset);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px;text-align:center}
.stat3 b{display:block;font-size:var(--t-22);font-weight:800;color:var(--heading);line-height:1.1}
.stat3 span{font-size:var(--t-12);color:var(--muted);font-weight:600}
.bars li{display:grid;grid-template-columns:84px 1fr 32px;align-items:center;gap:10px;font-size:var(--t-13);padding:6px 0}
.bars .bar{height:8px;background:var(--surface-2);border-radius:4px;overflow:hidden}
.bars .bar i{display:block;height:100%;background:var(--orange);border-radius:4px}
.bars .n{text-align:right;font-weight:700;color:var(--heading)}
.recent li{display:flex;justify-content:space-between;gap:8px;padding:8px 0;border-bottom:1px solid var(--line);font-size:var(--t-13)}
.recent li:last-child{border-bottom:0}
.recent li > div{min-width:0}
.recent .c{font-weight:600;color:var(--heading);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recent .t{color:var(--muted);white-space:nowrap}
.counter{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--card);height:40px;padding:0 4px}
.counter b{padding:0 10px;font-weight:700;color:var(--heading)}
.counter .ibtn{width:32px;height:32px}
.lead-since{font-size:var(--t-12);color:var(--muted);display:flex;align-items:center;gap:6px;margin-top:12px}
.upload{border:1px dashed var(--line-strong);border-radius:var(--r-sm);padding:10px 12px;display:flex;align-items:center;gap:10px;font-size:var(--t-13);color:var(--muted);flex-wrap:wrap}
.upload .btn{height:32px}
/* Upload met slepen en kiezen (.drop, stijlgids 3.4): een verborgen bestandsveld (.vh) met een label als klikvlak (.drop-kies: voorbeeld als
   .avatar en de uitleg), de knop Verwijderen ernaast en de status eronder (.drop-status, role="status"). Slepen kleurt het vlak (.over),
   uploaden zet aria-busy; de focusring volgt het bestandsveld. */
.drop{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border:1px dashed var(--line-strong);border-radius:var(--r-sm);background:var(--field);padding:12px;min-width:0;transition:border-color .15s,background .15s}
.drop:hover{border-color:var(--muted-2)}
.drop.over{border-style:solid;border-color:var(--navy-line);background:var(--navy-soft)}
.drop:has(input:focus-visible){border-color:var(--blue);box-shadow:0 0 0 3px var(--ring)}
.drop[aria-busy="true"]{opacity:.7}
.drop[aria-busy="true"] .drop-kies{cursor:progress}
.drop .drop-kies{flex:1 1 280px;display:flex;align-items:center;gap:12px;min-width:0;min-height:40px;cursor:pointer;font-size:var(--t-12);font-weight:400;letter-spacing:0;color:var(--muted)}
.drop .drop-tekst{flex:1 1 0;display:flex;flex-direction:column;gap:2px;min-width:0}
.drop .drop-tekst b{font-size:var(--t-14);font-weight:600;color:var(--heading)}
.drop .btn{flex:none;margin-left:auto}
.drop-status:empty{display:none}
.field .hint.drop-status{display:flex;align-items:center;gap:8px}
.drop-status .spin{width:14px;height:14px;flex:none}
/* Woordenveld (.woorden, stijlgids 3.4; gedrag in web/woorden-veld.js): een rand zoals .inp met de gekozen woorden als .chip.woord en
   achteraan een smal invoervak. Chips lopen door naar een volgende regel; 40 px hoog met één regel, zoals elk veld. Het kruisje in een
   chip is een knop (aria-label "Verwijder …"); de chip zelf blijft een eigenschap. Een te lang woord: .chip.woord.err; een fout op het
   veld: .woorden.err met .hint.err eronder. */
.woorden{display:flex;flex-wrap:wrap;align-items:center;gap:4px;width:100%;min-height:40px;padding:4px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--field);cursor:text;min-width:0}
.field:has(>.woorden){min-width:0} /* in een grid of flex mag een lange chip het veld niet breder maken: ze wordt afgekapt */
/* Een kleur kiezen (13 oktober; stijlgids 3.4, /stijl #kleurkeuze): een rij stalen als radiogroep. Het staal is een label met een
   verborgen radio (.vh) en een bolletje in --c (style="--c:var(--token)"); gekozen een ring in --navy-line en een vinkje in --card (zoals
   .box), focus de gewone focuslijn. Op desktop 28 × 36 px per staal, op een telefoon zes per rij over de volle breedte, minstens 40 × 40 px. */
.stalen{display:flex;flex-wrap:wrap;gap:2px}
.staal{display:inline-flex;align-items:center;justify-content:center;width:28px;height:36px;border-radius:var(--r-sm);cursor:pointer}
.staal .bol{display:inline-grid;place-content:center;width:24px;height:24px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px var(--card)}
.staal .bol::before{content:"";width:12px;height:12px;clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%);background:var(--card);transform:scale(0)}
.staal:hover .bol{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--line-strong)}
.staal input:checked+.bol{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--navy-line)}
.staal input:checked+.bol::before{transform:scale(1)}
.staal input:focus-visible+.bol{outline:2px solid var(--blue);outline-offset:4px}
@media (max-width:560px){
  .stalen{display:grid;grid-template-columns:repeat(6,minmax(40px,1fr));gap:4px}
  .staal{width:auto;min-width:40px;height:44px}
  .staal .bol{width:28px;height:28px}
}
.woorden:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px var(--ring)}
.woorden.err{border-color:var(--red)}
.woorden .woorden-inp{flex:1 0 96px;min-width:0;height:28px;padding:0 8px;border:0;background:transparent;font:inherit;font-size:var(--t-14);color:var(--text);outline:none}
.woorden .woorden-inp::placeholder{color:var(--muted-2)}
.chip.woord{height:28px;max-width:100%;min-width:0;gap:4px;padding:0 4px 0 10px;cursor:default}
.chip.woord .t{overflow:hidden;text-overflow:ellipsis}
.chip.woord.err{background:var(--red-soft);color:var(--red-text);border-color:var(--red-rand)}
.woord-weg{flex:none;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:0;border-radius:var(--r-pill);background:transparent;color:var(--muted);cursor:pointer}
.woord-weg:hover{background:var(--line);color:var(--heading)}
.woord-weg:focus-visible{outline:2px solid var(--blue);outline-offset:0}
.woord-weg .i{width:14px;height:14px}
.chip.woord.err .woord-weg{color:var(--red-text)}
/* Telefoon: het invoervak en het kruisje zijn tikdoelen van 40 px hoog; het veld heeft geen binnenmarge boven en onder (één regel is
   42 px met de rand), de chip wordt 32 px hoog en het kruisje vult haar rechterkant, 4 px erboven en eronder, zodat de tikdoelen van
   twee regels elkaar niet raken (4 px tussen de regels). */
@media (max-width:560px){
  .woorden{min-height:42px;padding:0 4px;row-gap:4px}
  .woorden .woorden-inp{height:40px}
  .chip.woord{height:32px;padding-right:0}
  .woord-weg{width:40px;height:40px;margin:-4px -1px -4px -4px;border-radius:var(--r-pill)}
}
/* Logo van een organisatie in een avatar (8 oktober): geen eigen vlak en geen rand, het beeld staat op het vlak eronder en past erin zonder
   bijsnijden (object-fit: contain). Een logo met een eigen effen achtergrond (niet opgeschoond) krijgt de hoeken van --r-sm, zodat het een
   bewuste tegel is. Overwegend donker (merk.logo_donker): .plaat zet in de donkere stand een licht vlak (--plaat) met 4 px binnenruimte
   achter het logo; in de lichte stand is --logo-plaat doorzichtig. */
.avatar.logo{width:auto;min-width:32px;max-width:128px;padding:0;border-radius:var(--r-sm);background:transparent;color:var(--heading)}
.avatar.sm.logo{min-width:24px;max-width:96px}
.avatar.lg.logo{min-width:40px;max-width:160px}
.avatar.logo img{display:block;width:auto;max-width:100%;height:100%;object-fit:contain;border-radius:var(--r-sm)}
.avatar.logo.plaat{background:var(--logo-plaat);padding:var(--logo-plaat-pad)}
.avatar.sm.logo.plaat{padding:calc(var(--logo-plaat-pad) / 2)}
.avatar.logo.plaat img{border-radius:0}
/* Voorbeeld na het kiezen van een logo (Organisatie › Merk): het logo op een licht en een donker vlak naast elkaar, ongeacht de stand van
   de pagina, met de schakelaar Achtergrond weghalen eronder (.sw uit beheer.css) en bij een bestaand logo Bewaren en Annuleren. */
.logo-vb{display:flex;flex-direction:column;gap:8px;min-width:0}
.logo-vb[hidden]{display:none}
.logo-vb-vlakken{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.logo-vb-vlak{margin:0;display:flex;flex-direction:column;gap:4px;min-width:0}
.logo-vb-vlak figcaption{font-size:var(--t-12);color:var(--muted)}
.logo-vb-paneel{display:flex;align-items:center;justify-content:center;height:72px;padding:12px;border:1px solid var(--line);border-radius:var(--r-sm);min-width:0}
.logo-vb-paneel.licht{background:var(--paneel-licht)}
.logo-vb-paneel.donker{background:var(--paneel-donker)}
.logo-vb-paneel .avatar.logo{height:40px;max-width:100%}
.logo-vb-paneel .avatar.logo.plaat{background:transparent;padding:0}
.logo-vb-paneel.donker .avatar.logo.plaat{background:var(--plaat);padding:4px}
.logo-vb .sw{padding:8px 0 0;border-bottom:0;font-size:var(--t-14);font-weight:400;letter-spacing:0}
.logo-vb .sw[hidden]{display:none}
.logo-vb-knoppen{display:flex;gap:8px;flex-wrap:wrap}
.logo-vb-knoppen[hidden]{display:none}
.logo-schoon-knop{align-self:flex-start}
.logo-schoon-knop[hidden]{display:none}

/* Trajecten */
.pipe{display:grid;grid-template-columns:repeat(6,1fr);gap:0;margin-bottom:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm)}
.pipe .step{padding:14px 16px;border-right:1px solid var(--line);position:relative;min-width:0}
.pipe .step:last-child{border-right:0}
.pipe .step .l{font-size:var(--t-12);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pipe .step .l::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c,var(--muted));flex:none}
.pipe .step .n{font-size:var(--t-26);font-weight:800;color:var(--heading);line-height:1.1;margin-top:4px;letter-spacing:-.02em}
.pipe .step .m{font-size:var(--t-12);color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pipe .step .bar{height:4px;background:var(--surface-2);border-radius:2px;margin-top:10px;overflow:hidden}
.pipe .step .bar i{display:block;height:100%;background:var(--c,var(--navy-line))}
.board{display:grid;grid-template-columns:repeat(6,minmax(176px,1fr));gap:12px;overflow-x:auto;padding-bottom:8px}
.col{background:var(--col);border:1px solid var(--line);border-radius:var(--r);padding:10px;min-width:0}
.col .colh{display:flex;align-items:center;gap:8px;padding:2px 4px 10px;font-weight:700;color:var(--heading);font-size:var(--t-13)}
.col .colh .cnt{margin-left:auto;font-size:var(--t-12);color:var(--muted);font-weight:700}
.col .colh::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c,var(--muted));flex:none}
.col .cards{display:grid;gap:8px}
.tcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;box-shadow:var(--shadow-sm);display:grid;gap:6px}
.tcard .n{font-weight:700;color:var(--heading);font-size:var(--t-13);line-height:1.3}
.tcard .meta{display:flex;align-items:center;gap:6px;font-size:var(--t-12);color:var(--muted)}
.tcard .meta .avatar{width:20px;height:20px;font-size:var(--t-11)}
.tcard .meta .d{margin-left:auto;font-weight:600}
.tcard .meta .d.warn{color:var(--orange-text)}
.tcard .nx{font-size:var(--t-12);color:var(--text-2);display:flex;gap:6px;align-items:flex-start;border-top:1px solid var(--line);padding-top:6px}
.tcard .nx .i{width:14px;height:14px;margin-top:2px;color:var(--muted)}
.col .add{all:unset;cursor:pointer;display:flex;align-items:center;gap:6px;color:var(--muted);font-size:var(--t-13);font-weight:600;padding:8px 4px 2px;min-height:40px;box-sizing:border-box}
.col .add:hover{color:var(--heading)}

/* Start */
.greet{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:start;margin-bottom:16px}
.greet h1{font-size:var(--t-32);line-height:1.15}
.greet .s{color:var(--muted);margin-top:6px}
.daycard{border:1px solid var(--line);background:var(--card);border-radius:var(--r);padding:12px 16px;min-width:240px;box-shadow:var(--shadow-sm)}
.daycard .l{font-size:var(--t-11);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.daycard .v{font-size:var(--t-16);font-weight:700;color:var(--heading);margin-top:2px}
.daycard .v b{color:var(--orange-text);font-weight:800}
.daycard .bar{height:6px;background:var(--surface-2);border-radius:3px;margin-top:8px;overflow:hidden}
.daycard .bar i{display:block;height:100%;width:30%;background:var(--orange)}
.goal{background:var(--navy);color:#fff;border-radius:var(--r);padding:16px 20px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:16px}
.goal .l{font-size:var(--t-11);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#f6a77c}
.goal .t{font-size:var(--t-16);font-weight:700;flex:1;min-width:240px}
.goal .mets{display:flex;gap:24px}
.goal .met{font-size:var(--t-12);color:rgba(255,255,255,.8)}
.goal .met b{display:block;color:#fff;font-size:var(--t-18);font-weight:800;line-height:1.1}
.short{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.short a{display:flex;gap:14px;align-items:flex-start;padding:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:var(--text);box-shadow:var(--shadow-sm)}
.short a:hover{border-color:var(--line-strong);text-decoration:none;box-shadow:var(--shadow-md)}
.short .ic{width:40px;height:40px;border-radius:var(--r-sm);display:inline-flex;align-items:center;justify-content:center;background:var(--navy-soft);color:var(--heading);flex:none}
.short a.pri .ic{background:var(--orange);color:#fff}
.short .n{font-weight:700;color:var(--heading);display:flex;align-items:center;gap:6px}
.short .n .i{width:14px;height:14px;color:var(--muted)}
.short .d{font-size:var(--t-13);color:var(--muted);margin-top:2px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;align-items:start}
.todo-l li{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line)}
.todo-l li:last-child{border-bottom:0}
.todo-l .box{margin-top:2px}
.todo-l .t{font-weight:600;color:var(--heading);cursor:pointer}
.todo-l .m{font-size:var(--t-12);color:var(--muted);margin-top:2px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.todo-l li.done .t{text-decoration:line-through;color:var(--muted);font-weight:500}
.tag{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 7px;border-radius:4px;font-size:var(--t-11);font-weight:700;background:var(--surface-2);color:var(--text-2);letter-spacing:.02em;white-space:nowrap}
.tag.os{background:var(--navy-soft);color:var(--heading)}
.tag.warn{background:var(--amber-soft);color:var(--amber-text)}
.tag .i{width:12px;height:12px}
.teamrow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.teamrow > div{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;display:flex;align-items:center;gap:10px;background:var(--inset)}
.teamrow .n{font-weight:700;color:var(--heading)}
.teamrow .s{font-size:var(--t-12);color:var(--muted)}
.teamrow .bar{height:4px;background:var(--line);border-radius:2px;margin-top:4px;width:120px;overflow:hidden}
.teamrow .bar i{display:block;height:100%;background:var(--green)}
.agenda-pts li{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:var(--t-14);align-items:flex-start}
.agenda-pts li:last-child{border-bottom:0}
.agenda-pts .n{width:22px;height:22px;border-radius:50%;background:var(--green-soft);color:var(--green-text);font-size:var(--t-11);font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex:none}
.agenda-pts .w{color:var(--muted);font-size:var(--t-12);margin-left:auto;white-space:nowrap;padding-top:3px}
.msgs-l li{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.msgs-l li:last-child{border-bottom:0}
.msgs-l .b{flex:1;font-size:var(--t-14);min-width:0}
.msgs-l .b .w{font-weight:700;color:var(--heading)}
.msgs-l .b .at{color:var(--blue-text);font-weight:600}
.msgs-l .b .ctx{font-size:var(--t-12);color:var(--muted);margin-top:2px}
.msgs-l .r{display:flex;gap:4px;align-items:center}

/* Agenda */
.ag-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.ag-tools .seg{margin-right:auto}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:var(--t-13);color:var(--text-2);padding:10px 16px;border-bottom:1px solid var(--line)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block;background:var(--c)}
.cal-wrap{overflow-x:auto}
.cal{min-width:820px;display:grid;grid-template-columns:56px repeat(7,1fr)}
.cal .dh{background:var(--card);border-bottom:1px solid var(--line);padding:8px 8px;font-size:var(--t-12);font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;border-left:1px solid var(--line)}
.cal .dh b{display:block;font-size:var(--t-16);color:var(--heading);text-transform:none;letter-spacing:0}
.cal .dh.today b{color:var(--orange-text)}
.cal .dh.today{background:var(--orange-soft)}
.cal .corner{border-bottom:1px solid var(--line);background:var(--card)}
.cal .allday{border-left:1px solid var(--line);border-bottom:1px solid var(--line);min-height:34px;padding:4px}
.cal .allday-l{font-size:var(--t-11);color:var(--muted);font-weight:700;padding:8px 6px;border-bottom:1px solid var(--line);text-align:right}
.cal .hours{position:relative}
.cal .hours div{height:40px;font-size:var(--t-11);color:var(--muted);text-align:right;padding-right:8px;transform:translateY(-7px);font-weight:600}
.cal .day{position:relative;border-left:1px solid var(--line);background-image:linear-gradient(var(--line) 1px,transparent 1px);background-size:100% 40px;height:640px}
.cal .day.today{background-color:var(--today)}
.ev{position:absolute;left:4px;right:4px;border-radius:var(--r-sm);padding:3px 8px;font-size:var(--t-12);line-height:1.3;overflow:hidden;border:1px solid var(--eb);background:var(--ebg);color:var(--ec);border-left-width:3px}
.ev b{display:block;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev span{opacity:.9;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev.blue{--eb:var(--cal-blue-b);--ebg:var(--cal-blue-bg);--ec:var(--cal-blue-c)}
.ev.green{--eb:var(--cal-green-b);--ebg:var(--cal-green-bg);--ec:var(--cal-green-c)}
.ev.orange{--eb:var(--cal-orange-b);--ebg:var(--cal-orange-bg);--ec:var(--cal-orange-c)}
.ev.red{--eb:var(--cal-red-b);--ebg:var(--cal-red-bg);--ec:var(--cal-red-c)}
.ev.purple{--eb:var(--cal-purple-b);--ebg:var(--cal-purple-bg);--ec:var(--cal-purple-c)}
.ev.allday{position:static;display:block;border-left-width:3px}
.cal .now{position:absolute;left:0;right:0;top:340px;height:2px;background:var(--orange);z-index:1}
.cal .now::before{content:"";position:absolute;left:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--orange)}
.people{display:flex;gap:0;align-items:center}
.people .avatar{border:2px solid var(--card);margin-left:-6px;box-sizing:content-box}
.people .avatar:first-child{margin-left:0}

/* To-do */
.todo-grid{display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:start}
.newtask{display:grid;grid-template-columns:1fr 150px 160px auto;gap:8px;align-items:end;padding:14px 20px;border-bottom:1px solid var(--line);background:var(--inset);border-radius:var(--r) var(--r) 0 0;margin:0}
.wk{padding:4px 20px 8px}
.wk h3{display:flex;align-items:center;gap:8px;font-size:var(--t-13);color:var(--heading);padding:12px 0 6px;flex-wrap:wrap}
.wk h3 .cnt{font-size:var(--t-12);color:var(--muted);font-weight:600}
.wk h3 .r{margin-left:auto;font-weight:500;color:var(--muted);font-size:var(--t-12)}
.task{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);min-height:44px}
.task:last-child{border-bottom:0}
.task .t{font-weight:600;color:var(--heading);cursor:pointer}
.task .m{font-size:var(--t-12);color:var(--muted);margin-top:2px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.task .r{display:flex;gap:2px;align-items:center}
.task.done .t{text-decoration:line-through;color:var(--muted);font-weight:500}
.task .dl{display:inline-flex;align-items:center;gap:4px}
.task .dl.late{color:var(--red-text);font-weight:700}
.wkside .pers{display:grid;gap:8px}
.wkside .pers li{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-sm)}
.wkside .pers .n{font-weight:700;color:var(--heading);flex:1;min-width:0}
.wkside .pers .s{font-size:var(--t-12);color:var(--muted);font-weight:500}
.wkside .pers .bar{width:60px;height:6px;background:var(--surface-2);border-radius:3px;overflow:hidden;flex:none}
.wkside .pers .bar i{display:block;height:100%;background:var(--green)}

/* Dialoog en toast */
.modal{position:fixed;inset:0;z-index:55;display:flex;align-items:center;justify-content:center;padding:16px}
.modal .box{width:520px;max-width:100%;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow-lg);border:1px solid var(--line)}
.modal .mh{padding:20px 24px 0;display:flex;gap:12px;align-items:flex-start}
.modal .mh h2{font-size:var(--t-18);line-height:1.3;padding-top:8px}
.modal .mh .ibtn{margin-left:auto;margin-top:-6px;margin-right:-8px}
.modal .mb{padding:16px 24px 8px;display:flex;flex-direction:column;gap:16px;min-width:0}
.modal .mb p{color:var(--muted);font-size:var(--t-13)}
.modal .mb>p{margin:0;line-height:1.5}
.modal .mb label.inl:has(>input.box){min-height:40px}
.modal .mf{padding:16px 24px 20px;display:flex;justify-content:flex-end;gap:8px}
.warn-ic{width:40px;height:40px;border-radius:50%;background:var(--red-soft);color:var(--red-text);display:inline-flex;align-items:center;justify-content:center;flex:none}
.toast{position:fixed;top:calc(var(--demobar) + 16px);right:16px;z-index:70;width:380px;max-width:calc(100% - 32px);background:var(--card);border:1px solid var(--line);border-left:3px solid var(--green);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:12px 12px 12px 14px;display:flex;gap:10px;align-items:flex-start}
.toast .ic{color:var(--green);margin-top:1px}
.toast .t{flex:1;font-size:var(--t-13);color:var(--text)}
.toast .t b{color:var(--heading)}
.toast .t small{display:block;color:var(--muted);margin-top:2px}
.toast .ibtn{margin:-6px -6px -6px 0}
/* golf 2 (11 oktober): een fout is rood en blijft staan tot je ze sluit; een melding met Ongedaan maken toont onder de zin wat er nog komt en
   de knop (stijlgids 3.11) */
.toast.fout{border-left-color:var(--red)}
.toast.fout .ic{color:var(--red-text)}
.toast .toast-acts{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;margin-top:8px}
.toast .toast-acts small{margin:0;flex:1 1 160px}
.toast .toast-acts .btn{flex:none}
/* Met een open lade (planner, golf 2): links naast de lade als daar plaats is (--naast, berekend), anders onderaan boven de voet van de lade
   (--onder, berekend); nooit over de kop met het kruisje. */
.toast.bij-lade{right:var(--naast,836px)}
.toast.boven-voet{top:auto;bottom:var(--onder,72px)}

/* Componenten */
.comp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.comp .cb{display:flex;gap:10px;flex-wrap:wrap;align-items:center;min-width:0}
.comp-grid > .card{min-width:0}
.seg{max-width:100%;overflow-x:auto}
.tabs{overflow-x:auto}
.comp .cb.col{flex-direction:column;align-items:stretch}
.comp .lab{width:100%;font-size:var(--t-11);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.comp .lab:first-child{margin-top:0}
.empty{text-align:center;padding:28px 16px;color:var(--muted);font-size:var(--t-13)}
.empty .ic{width:48px;height:48px;border-radius:50%;background:var(--surface-2);display:inline-flex;align-items:center;justify-content:center;color:var(--muted);margin-bottom:10px}
.empty b{display:block;color:var(--heading);font-size:var(--t-14);margin-bottom:4px}
.skel{height:12px;border-radius:4px;background:linear-gradient(90deg,var(--surface-2) 25%,var(--skel-hi) 50%,var(--surface-2) 75%);background-size:200% 100%;animation:sk 1.4s infinite}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}
.spin{width:20px;height:20px;border:2px solid var(--line);border-top-color:var(--navy-line);border-radius:50%;animation:sp .8s linear infinite;display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}
.rowstate{display:grid;gap:6px;width:100%}
.rowstate div{display:flex;align-items:center;gap:10px;min-height:44px;flex-wrap:wrap;padding:6px 12px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-sm);font-size:var(--t-13)}
.rowstate div.hover{background:var(--hover-row)}
.rowstate div.sel{background:var(--blue-soft);border-color:var(--blue-rand)}
.rowstate div.dis{opacity:.5}
.rowstate div .k{margin-left:auto;font-size:var(--t-11);font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}

/* Mobiel */
.bottombar{display:none}
@media (max-width:1180px){
  .kpis{grid-template-columns:repeat(3,1fr)}
  .bel-grid{grid-template-columns:minmax(0,1fr)}
  .drawer .db{grid-template-columns:1fr}
  .drawer .dl{border-right:0;border-bottom:1px solid var(--line)}
  .pipe{grid-template-columns:repeat(3,1fr)}
  .pipe .step:nth-child(3){border-right:0}
  .pipe .step:nth-child(-n+3){border-bottom:1px solid var(--line)}
}
@media (max-width:900px){
  .side{display:none}
  .topbar{padding:0 16px;gap:8px}
  .topbar .brand-m{display:inline-flex;min-height:40px}
  .search{max-width:none}
  .content{padding:16px 16px 84px}
  .bottombar{display:flex;position:fixed;left:0;right:0;bottom:0;height:64px;background:var(--card);border-top:1px solid var(--line);z-index:30;padding:0 4px env(safe-area-inset-bottom)}
  .bottombar[hidden]{display:none}
  .bottombar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:var(--t-11);font-weight:700;color:var(--muted);text-decoration:none;position:relative;min-width:0}
  .bottombar a[aria-current="page"]{color:var(--heading)}
  .bottombar a[aria-current="page"] .i{color:var(--orange)}
  .bottombar a .badge{position:absolute;top:8px;left:calc(50% + 6px);height:16px;min-width:16px;font-size:var(--t-11);padding:0 4px}
  .bottombar a span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .todo-grid{grid-template-columns:minmax(0,1fr)}
  .g2{grid-template-columns:minmax(0,1fr)}
  .comp-grid{grid-template-columns:minmax(0,1fr)}
  .drawer{width:100%;top:var(--demobar)}
  .drawer .dh{padding:14px 16px}
  .drawer .dr,.drawer .dl{padding:16px}
  .drawer .df{padding:10px 16px}
  .drawer .df .btn{flex:1 1 auto}
  .drawer .df .sp{display:none}
}
@media (max-width:640px){
  .ph h1{font-size:var(--t-22)}
  .ph .acts{justify-content:flex-start;width:100%}
  .ph .acts .btn{height:40px;font-size:var(--t-13);padding:0 10px} /* tikdoel 40 px op een telefoon */
  .kpis{grid-template-columns:repeat(2,1fr);gap:8px}
  .kpi{padding:12px}
  .kpi .v{font-size:var(--t-22)}
  .kpi .spark{width:56px}
  .filters{padding:10px 12px}
  .filters .search{min-width:100%}
  .filters .count{margin-left:0;width:100%}
  .chip-sel select{max-width:150px}
  .search kbd{display:none}
  .topbar .acc > span:not(.avatar){display:none}
  .topbar .search{display:none}
  .topbar .sp{display:block}
  #m-search{display:inline-flex!important}
  .greet{grid-template-columns:1fr}
  .greet h1{font-size:var(--t-26)}
  .short{grid-template-columns:1fr}
  .goal .mets{width:100%}
  .outcomes{grid-template-columns:1fr}
  .two-col{grid-template-columns:1fr}
  .tel a{font-size:var(--t-22)}
  .tel .r{margin-left:0;width:100%}
  .facets{grid-template-columns:1fr}
  .newtask{grid-template-columns:1fr 1fr;padding:12px 16px}
  .newtask .f1{grid-column:1 / -1}
  .newtask .btn{grid-column:1 / -1}
  .wk{padding:4px 16px 8px}
  .card .ch,.card .cb{padding-left:16px;padding-right:16px}
  .tl li{grid-template-columns:1fr;gap:2px}
  .tl .w{font-size:var(--t-12)}
  .stat3 b{font-size:var(--t-18)}
  .ag-tools .seg{width:100%;margin-right:0}
  .ag-tools .seg button{flex:1;justify-content:center;padding:0 6px;font-size:var(--t-13)}
  .ag-tools .btn{flex:1 1 auto}
  .modal .mb{padding:16px 16px 8px}
  .modal .mf{flex-direction:column-reverse}
  .modal .mf .btn{width:100%}
  .toast{width:auto;left:16px;right:16px}
  .teamrow{grid-template-columns:1fr}
  .comp .kpis-2{grid-template-columns:minmax(0,1fr)!important}
  .comp .cb.col > *{min-width:0;max-width:100%}
  .tabs{min-width:0}
  .comp .cb{overflow-x:auto}
  .tbl .pop{right:auto;left:0}
  .counter{height:36px}
  /* tabel wordt kaartlijst */
  table.tbl{min-width:0;display:block}
  .tbl thead{display:none}
  .tbl tbody,.tbl tr,.tbl td{display:block}
  .tbl tr{border-bottom:1px solid var(--line);padding:12px 16px;position:relative}
  .tbl td{height:auto;padding:0;border:0;white-space:normal}
  .tbl td.chk{position:absolute;right:16px;top:14px}
  .tbl td.cell{display:flex;gap:8px;align-items:baseline;justify-content:space-between;margin-top:6px;font-size:var(--t-13)}
  .tbl td.cell::before{content:attr(data-l);font-size:var(--t-11);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);flex:none}
  .tbl td.cell > *{text-align:right}
  .tbl td.co-cell{padding-right:36px}
  .tbl .co .n{max-width:none;font-size:var(--t-14)}
  .tbl td.ac{margin-top:10px}
  .tbl td.chk,.tbl td.ac{width:auto}
  .tbl .acts .ibtn{width:36px;height:36px}
  .toolbar .r{margin-left:0;width:100%}
  .drawer .dh h2{font-size:var(--t-18)}
  .drawer .dh .meta .dot{display:none}
  .drawer .dh .meta{gap:6px 10px}
  .tbl .acts{justify-content:flex-start;flex-wrap:wrap;gap:0}
  .tbl .own{justify-content:flex-end}
  .tbl .two small{text-align:right}
  .tfoot{padding:12px 16px}
  .pager{margin-left:0;width:100%;justify-content:space-between}
}
@media (max-width:420px){
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Aanvullingen uit de stijlgids (/stijl, ontwerp/STIJLGIDS.md): klein en gedeeld.
   .logo .merk: het beeldmerk via het token --merk (merk.svg, in het donker merk-paper.svg), zodat elke pagina hetzelfde logo tekent.
   .inl: een inline rij van icoon of avatar met tekst (legenda, eigenaar, vinkje met label).
   .empty .btn: ruimte tussen de uitleg en de knop in een lege toestand. */
.logo .merk{width:30px;height:24px;flex:none;background:var(--merk) center/contain no-repeat}
.inl{display:inline-flex;align-items:center;gap:8px;font-size:var(--t-13);min-width:0}
.empty .btn{display:flex;width:max-content;margin:12px auto 0}

/* Wizard (10 oktober, stijlgids 3.13 en 4, "Een wizard"; eerst in het beheer bij Inrichten): de stappenbalk en keuzetegels.
   .stappen: een geordende lijst over de volle breedte, per stap een haarlijn van 3 px bovenaan, een nummercirkel en een label. Gedaan
   (.klaar): rand en cirkel in navy-tint, de stap is een knop om terug te gaan; nu (aria-current="step"): de cirkel navy (de actieve
   staat) en het lijntje oranje, zoals het actieve tab-lijntje.
   Smaller dan 700 px alleen de nummers, met het label van de huidige stap.
   .keuzetegels/.keuzetegel: één keuze uit een paar opties met elk een zin uitleg, als tegels op --inset in een kaart (geen kaart in een
   kaart); een echte radioknop, gekozen met een rand in --navy-line op --navy-soft, focus de gewone ring; .uit is niet te kiezen (gedempt,
   met een .chip "binnenkort"). */
.stappen{display:flex;gap:4px;margin:0;padding:0;list-style:none;min-width:0}
.stappen li{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:8px;padding:10px 4px 0;border-top:3px solid var(--line);color:var(--muted);font-size:var(--t-13);font-weight:600}
.stappen li>button{all:unset;cursor:pointer;display:flex;align-items:center;gap:8px;min-width:0;min-height:32px;border-radius:var(--r-sm)}
.stappen li>button:hover .t{color:var(--heading);text-decoration:underline}
.stappen li>button:focus-visible{box-shadow:0 0 0 3px var(--ring)}
.stappen .nr{flex:none;display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1px solid var(--line-strong);background:var(--card);color:var(--text-2);font-size:var(--t-12);font-weight:700}
.stappen .t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stappen li.klaar{border-top-color:var(--navy-line);color:var(--text-2)}
.stappen li.klaar .nr{background:var(--navy-soft);border-color:var(--navy-line);color:var(--heading)}
.stappen li[aria-current="step"]{border-top-color:var(--orange);color:var(--heading)}
.stappen li[aria-current="step"] .nr{background:var(--navy);border-color:var(--navy);color:var(--on-navy)}
@media (max-width:700px){.stappen li{flex:0 0 auto}.stappen li[aria-current="step"]{flex:1 1 auto}.stappen li:not([aria-current="step"]) .t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.stappen li>button{min-width:40px;min-height:40px;justify-content:center}}
.keuzetegels{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.keuzetegel{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-content:start;padding:16px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--inset);cursor:pointer;min-width:0}
.keuzetegel input{grid-row:1 / span 3;width:18px;height:18px;margin:1px 0 0;accent-color:var(--navy-line);cursor:inherit}
.keuzetegel .t{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-weight:700;color:var(--heading)}
.keuzetegel .z{font-size:var(--t-13);color:var(--text-2)}
.keuzetegel .m{font-size:var(--t-12);color:var(--muted)}
.keuzetegel:hover{border-color:var(--line-strong)}
.keuzetegel:has(input:checked){border-color:var(--navy-line);background:var(--navy-soft)}
.keuzetegel:has(input:focus-visible){box-shadow:0 0 0 3px var(--ring)}
.keuzetegel.uit{cursor:not-allowed}
.keuzetegel.uit .t,.keuzetegel.uit .z{color:var(--muted)}
.keuzetegel.uit:hover{border-color:var(--line)}

/* ---------- planner, 11 oktober (plan stap 14, abonnement): een rustige balk en een prijs in een keuzetegel ----------
   .balk: één zin met een icoon en hoogstens één gewone knop, bovenaan het werkvlak (stijlgids 4, "Een rustige balk bovenaan"); een tegel op
   --inset met een haarlijn, het icoon in --amber-text (.balk.info: een gewone mededeling, het icoon in --muted), geen kleurvlak en geen
   primaire knop. Op een telefoon de knop eronder over de volle
   breedte, 40 px. .keuzetegel .p: de prijsregel tussen naam en uitleg (het bedrag 22 px, 800, --heading); de vier regels blijven in de
   tweede kolom naast de radioknop. .keuzetegels.lezen: dezelfde tegels zonder keuze (geen radioknop, één kolom). */
.balk{display:flex;align-items:center;gap:12px;margin:0 0 16px;padding:12px 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--inset);color:var(--text);font-size:var(--t-13)}
.balk>.i{color:var(--amber-text);flex:none}
.balk.info>.i{color:var(--muted)}
.balk p{margin:0;flex:1;min-width:0;line-height:1.5}
.balk .btn{flex:none}
@media (max-width:700px){.balk{flex-wrap:wrap}.balk .btn{width:100%;justify-content:center;min-height:40px}}
.keuzetegel>input~span{grid-column:2}
.keuzetegel .p{font-size:var(--t-14);color:var(--text-2)}
.keuzetegel .p b{font-size:var(--t-22);font-weight:800;color:var(--heading);letter-spacing:-.01em;margin-right:4px}
.keuzetegels.lezen .keuzetegel{grid-template-columns:minmax(0,1fr);cursor:default}
.keuzetegels.lezen .keuzetegel:hover{border-color:var(--line)}

/* ---------- planner, golf 2 (11 oktober): de startkaart bovenaan Boekingen (stijlgids 4, "Een startkaart"; ook op /stijl) ---------- */
/* De startkaart: kop met percentage en Verberg, een balkje (berekende breedte), de stappen als rijen met haarlijnen;
   een vinkje, de stap in gewone taal en één knop. Geen kaart in kaart: de rijen zijn gewone lijnen. */
.startkaart{margin:0 0 16px}
.startkaart .ch{flex-wrap:nowrap;align-items:flex-start;border-bottom:0}
.startkaart .sk-kop{flex:1;min-width:0}
.startkaart .sk-kop h3{font-size:var(--t-18);margin:2px 0 0}
.startkaart .sk-kop .sub{display:block;margin-top:2px}
.sk-balk{height:6px;margin:0 20px 4px;border-radius:var(--r-pill);background:var(--surface-2);overflow:hidden}
.sk-balk i{display:block;height:100%;border-radius:var(--r-pill);background:var(--green)}
.sk-lijst{list-style:none;margin:0;padding:4px 20px 8px}
.sk-stap{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px 12px;padding:12px 0;border-top:1px solid var(--line)}
.sk-stap:first-child{border-top:0}
.sk-stap .box{margin:0}
.sk-tekst{display:flex;flex-direction:column;gap:2px;cursor:pointer;min-width:0}
.sk-tekst b{color:var(--heading);font-size:var(--t-14);font-weight:700}
.sk-tekst small{color:var(--muted);font-size:var(--t-13)}
.sk-stap.klaar .sk-tekst b{color:var(--muted);text-decoration:line-through}
.sk-knop{display:flex;justify-content:flex-end}
@media (max-width:560px){
  .sk-lijst{padding:0 16px 8px}.sk-balk{margin:0 16px 4px}
  .sk-stap{grid-template-columns:auto minmax(0,1fr)}
  .sk-tekst{min-height:40px;justify-content:center}
  .sk-knop{grid-column:2;justify-content:flex-start}
  .sk-knop .btn{min-height:40px}
}
/* De stappen die al klaar zijn, samen onder één uitklaprij (de open stappen eerst, zodat altijd te zien is wat nu komt). */
.startkaart .sk-klaar{margin:0 20px 12px;border-top:1px solid var(--line)}
.startkaart .sk-klaar .sk-lijst{padding:0}
@media (max-width:560px){.startkaart .sk-klaar{margin:0 16px 8px}}