html{color-scheme:light}body{margin:0}img{max-width:100%}[hidden]{display:none!important}
/* Strategy cockpit: calm workspace (like Attio) with QAura accents (dark green, lime) and soft gradients (like Gamma). */
:root{
  --bg:#f6f6f4; --side:#fbfbfa; --surface:#ffffff; --surface-2:#f4f4f1; --hover:#efefec;
  --fg:#15191a; --fg-2:#3b4245; --muted:#7b8285; --line:#e8e8e4; --line-2:#dcdcd7;
  --brand:#0b3227; --brand-2:#1b5a45; --accent:#b9f86f; --accent-soft:#f0fbe2; --accent-ink:#0b3227;
  --primary-bg:#0b3227; --primary-fg:#ffffff; --primary-hover:#14473a;
  --lilac:#b1a3fc; --orange:#f87a40;
  /* Colour language (Laura, 2026-10-20): colour only says something about status, the same everywhere.
     green = good, on track, done · orange = attention · red = critical · blue = running, in progress (no judgement) · grey = neutral, idea.
     Types (collaboration, kind of building block, service, industry) get no colour: they go in a neutral pill. */
  --go:#1d7a44; --go-bg:#e5f5ea; --warn:#b0521b; --warn-bg:#fdefe5; --stop:#c0392f; --stop-bg:#fdebea; --info:#2a6fca; --info-bg:#e9f1fc;
  --shadow:0 1px 2px rgba(15,25,20,.04),0 1px 3px rgba(15,25,20,.05);
  --shadow-lg:0 12px 32px -14px rgba(15,25,20,.22);
  --grad:linear-gradient(135deg,#0b3227 0%,#14493a 55%,#2b6b4a 100%);
  --grad-soft:linear-gradient(135deg,#f0fbe2 0%,#eef1ff 100%);
  --f-display:"Syne","Avenir Next",system-ui,sans-serif;
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --r:12px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0c100f; --side:#0f1413; --surface:#151b19; --surface-2:#1a211f; --hover:#1f2826;
  --fg:#edf1ef; --fg-2:#c8d0cc; --muted:#8a9592; --line:#232c29; --line-2:#2e3a36;
  --brand:#b9f86f; --brand-2:#d4fba3; --accent:#b9f86f; --accent-soft:#1d2a17; --accent-ink:#0b3227;
  --primary-bg:#b9f86f; --primary-fg:#0b3227; --primary-hover:#a6ea58;
  --go:#86dca0; --go-bg:#13301f; --warn:#f3a06d; --warn-bg:#36230f; --stop:#f18b81; --stop-bg:#3a1a17; --info:#8fb8f0; --info-bg:#172a44;
  --shadow:0 1px 2px rgba(0,0,0,.3); --shadow-lg:0 12px 32px -14px rgba(0,0,0,.6);
  --grad-soft:linear-gradient(135deg,#17241a 0%,#1c1d33 100%);
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0c100f; --side:#0f1413; --surface:#151b19; --surface-2:#1a211f; --hover:#1f2826;
  --fg:#edf1ef; --fg-2:#c8d0cc; --muted:#8a9592; --line:#232c29; --line-2:#2e3a36;
  --brand:#b9f86f; --brand-2:#d4fba3; --accent:#b9f86f; --accent-soft:#1d2a17; --accent-ink:#0b3227;
  --primary-bg:#b9f86f; --primary-fg:#0b3227; --primary-hover:#a6ea58;
  --go:#86dca0; --go-bg:#13301f; --warn:#f3a06d; --warn-bg:#36230f; --stop:#f18b81; --stop-bg:#3a1a17; --info:#8fb8f0; --info-bg:#172a44;
  --shadow:0 1px 2px rgba(0,0,0,.3); --shadow-lg:0 12px 32px -14px rgba(0,0,0,.6);
  --grad-soft:linear-gradient(135deg,#17241a 0%,#1c1d33 100%);
  color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font:400 14px/1.55 var(--f-body);font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased;font-variant-numeric:lining-nums}
::selection{background:var(--accent);color:var(--accent-ink)}
a{color:var(--info)}

/* ---- shell: sidebar + content ---- */
.shell{display:grid;grid-template-columns:244px minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;height:100vh;background:var(--side);border-right:1px solid var(--line);padding:18px 12px;display:flex;flex-direction:column;gap:20px}
.brand{display:flex;align-items:center;gap:10px;padding:2px 8px}
.brand img{height:21px;width:auto;display:block;filter:brightness(0)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .brand img{filter:brightness(0) invert(1)}}
:root[data-theme="dark"] .brand img{filter:brightness(0) invert(1)}
.brand-tag{font:600 11px/1 var(--f-body);letter-spacing:.04em;color:var(--accent-ink);background:var(--accent);padding:4px 7px;border-radius:6px}
.side-label{font:600 11px var(--f-body);color:var(--muted);text-transform:uppercase;letter-spacing:.07em;padding:0 10px;margin-bottom:-12px}
nav.tabs{display:grid;gap:2px}
/* Before sign-in only the logo shows: the menu reveals the structure of the tool and is of no use yet */
body:not(.ingelogd) nav.tabs,body:not(.ingelogd) .side-label{display:none!important}
nav.tabs button{display:flex;gap:10px;align-items:center;width:100%;border:0;background:none;padding:7px 10px;border-radius:8px;font:500 13.5px var(--f-body);color:var(--fg-2);cursor:pointer;text-align:left;white-space:nowrap}
nav.tabs button svg{width:17px;height:17px;flex:none;color:var(--muted)}
nav.tabs button:hover{background:var(--hover)}
nav.tabs button[aria-selected="true"]{background:var(--surface);color:var(--fg);box-shadow:var(--shadow),0 0 0 1px var(--line);font-weight:600}
nav.tabs button[aria-selected="true"] svg{color:var(--brand)}
#who{margin-top:auto}
.me{display:flex;gap:10px;align-items:center;padding:8px;border-radius:10px;border:1px solid var(--line);background:var(--surface)}
.me .nm{font-weight:600;font-size:13px;line-height:1.2}
.me .rl{font-size:11.5px;color:var(--muted)}
.content{min-width:0;display:flex;flex-direction:column}
main{width:100%;max-width:1560px;margin:0 auto;padding:32px clamp(24px,3vw,56px) 56px;display:grid;gap:20px;align-content:start;min-width:0}
footer.gen{width:100%;max-width:1560px;margin:auto auto 0;padding:0 clamp(24px,3vw,56px) 28px;font-size:11.5px;color:var(--muted)}
@media (max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;align-content:start}
  .side{min-width:0;position:sticky;z-index:10;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 16px;border-right:0;border-bottom:1px solid var(--line)}
  .side-label{display:none}
  nav.tabs{display:flex;overflow-x:auto;min-width:0;flex:1 1 100%;order:3;scrollbar-width:none}
  nav.tabs::-webkit-scrollbar{display:none}
  nav.tabs button{width:auto}
  #who{margin:0 0 0 auto;min-width:0}
  .demo-box{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 10px}
  .demo-box b,.demo-box label{display:none}
  .demo-box select{width:auto;max-width:150px}
  .page-head{align-items:flex-start}
  h1{font-size:22px}
  .me{border:0;background:none;padding:0}
  main{padding:20px 16px 40px} footer.gen{padding:0 16px 24px}
}

/* ---- typography ---- */
h1,h2,h3{margin:0;text-wrap:balance}
h1{font:700 26px/1.2 var(--f-display);letter-spacing:-.01em}
h2{font:600 15.5px/1.35 var(--f-body);letter-spacing:-.005em}
h3{font:600 14px/1.4 var(--f-body)}
.muted{color:var(--muted)} .small{font-size:12.5px} .mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.nowrap{white-space:nowrap}
.ok{color:var(--go)} .nok{color:var(--stop)} .wrn{color:var(--warn)}
ul.clean,ol.clean{margin:0;padding-left:18px} ul.clean li,ol.clean li{margin:3px 0}

/* ---- page header ---- */
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.page-head .sub{color:var(--muted);margin-top:6px;max-width:68ch}
.eyebrow{font:500 12.5px var(--f-body);color:var(--muted);margin-bottom:6px}
.head-block{display:grid;gap:12px}
.crumbs{display:flex;gap:8px;align-items:center}
.crumbs .btn{height:28px;padding:0 8px;margin-left:-8px;color:var(--muted);background:none;border-color:transparent;font-weight:400}

/* ---- building blocks ---- */
.row{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.spread{justify-content:space-between}
.stack{display:grid;gap:14px;align-content:start}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;min-width:0;box-shadow:var(--shadow)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:20px;align-items:start}
.sec-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.sec-head h2 .n{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;background:var(--surface-2);border:1px solid var(--line);color:var(--fg-2);font:600 12px/1 var(--f-body);margin-right:8px;vertical-align:1px}
.empty{padding:32px;text-align:center;color:var(--muted)}

/* KPI's */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.kpi{display:flex;flex-direction:column-reverse;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow)}
.kpi b{font:600 28px/1.1 var(--f-body);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi span{font-size:12.5px;color:var(--muted);font-weight:500}
.import-note{display:flex;gap:8px;align-items:baseline;font-size:12.5px;color:var(--muted,#6b6b6b);margin:-6px 0 4px}

/* buttons */
button.btn,a.btn,label.btn{font:500 13px/1 var(--f-body);height:32px;border-radius:8px;border:1px solid var(--line-2);background:var(--surface);color:var(--fg);padding:0 12px;cursor:pointer;text-decoration:none;display:inline-flex;gap:6px;align-items:center;white-space:nowrap;box-shadow:0 1px 1px rgba(0,0,0,.03);transition:background .12s,border-color .12s}
button.btn:hover,a.btn:hover,label.btn:hover{background:var(--hover)}
button.primary,a.btn.primary{background:var(--primary-bg);color:var(--primary-fg);border-color:transparent;font-weight:600}
button.primary:hover,a.btn.primary:hover{background:var(--primary-hover)}
/* ghost = a secondary action: visibly a button (light fill, thin border, brand ink); "stil" = deliberately quiet (✕, Annuleren, Sluiten, …) */
button.ghost,a.btn.ghost{background:var(--surface-2);border-color:var(--line);box-shadow:none;color:var(--brand-2);font-weight:500}
button.ghost:hover,a.btn.ghost:hover{background:var(--accent-soft);border-color:var(--brand-2);color:var(--brand)}
button.ghost.stil{background:none;border-color:transparent;color:var(--muted);font-weight:400}
button.ghost.stil:hover{background:var(--hover);border-color:transparent;color:var(--fg)}
button:disabled{opacity:.55;cursor:not-allowed}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* inputs */
select,input,textarea{font:inherit;color:var(--fg);background:var(--surface);border:1px solid var(--line-2);border-radius:8px;padding:7px 10px;transition:border-color .12s,box-shadow .12s}
select,input[type=text],input[type=email],input[type=number],input[type=date]{height:34px;padding-block:0}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--accent-soft)}
textarea{width:100%;min-height:72px;line-height:1.5;resize:vertical}
input[type=text],input[type=email]{width:100%}
input[type=number],input[type=date],select{max-width:100%}
input[type=checkbox],input[type=radio]{accent-color:var(--brand-2);width:15px;height:15px}
details summary{cursor:pointer;color:var(--fg-2);font-weight:500;list-style:none;display:inline-flex;align-items:center;gap:6px}
details summary::-webkit-details-marker{display:none}
details summary::before{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .15s;margin-right:2px}
details[open] summary::before{transform:rotate(45deg)}
details summary:hover{color:var(--fg)}

/* tables (like Attio) */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
th{font:500 12px var(--f-body);color:var(--muted);background:var(--surface-2);white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tr.click{cursor:pointer} tr.click:hover td{background:var(--hover)}
td.num,th.num{text-align:right}
.cell-main{font-weight:600}
.cell-sub{font-size:12.5px;color:var(--muted)}
td select,td input[type=date]{height:30px;font-size:13px;border-color:transparent;background:transparent;padding-inline:6px}
td select:hover,td input[type=date]:hover{border-color:var(--line-2);background:var(--surface)}

/* pills */
.pill{display:inline-flex;align-items:center;gap:4px;font:500 12px/1 var(--f-body);padding:4px 8px;border-radius:6px;white-space:nowrap;background:var(--surface-2);color:var(--fg-2)}
.p-go{background:var(--go-bg);color:var(--go)} .p-warn{background:var(--warn-bg);color:var(--warn)} .p-stop{background:var(--stop-bg);color:var(--stop)} .p-info{background:var(--info-bg);color:var(--info)} .p-brand{background:var(--accent);color:var(--accent-ink)}

/* segment */
.seg{display:inline-flex;gap:2px;padding:3px;border-radius:9px;background:var(--surface-2);border:1px solid var(--line)}
.seg button{border:0;background:none;padding:6px 12px;border-radius:7px;font:500 13px var(--f-body);color:var(--muted);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--fg);box-shadow:var(--shadow);font-weight:600}
.stack>.seg,.head-block>.seg{justify-self:start}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* notices */
.note{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:11px 14px;font-size:13px}
.note.warn{background:var(--warn-bg);border-color:transparent}
.note.stop{background:var(--stop-bg);border-color:transparent}
/* Claude at work (metClaude in core.js): a bar that stays until the answer is in, and a spinner in buttons */
.claude-bezig{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:49;display:flex;gap:12px;align-items:center;max-width:min(420px,calc(100% - 32px));padding:12px 16px;border-radius:12px;background:var(--grad-soft);border:1px solid var(--line);color:var(--fg);box-shadow:var(--shadow-lg);font-size:13px}
.claude-inline{display:flex;gap:8px;align-items:center;color:var(--brand-2)}
.spin{display:inline-block;width:14px;height:14px;flex:none;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite;vertical-align:-2px}
.claude-bezig .spin{width:18px;height:18px;color:var(--brand-2)}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:2.4s}}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:#15191a;color:#fff;padding:10px 16px;border-radius:10px;font-size:13px;font-weight:500;z-index:50;max-width:calc(100% - 32px);box-shadow:var(--shadow-lg)}

/* ---- strategy-specific ---- */
.chip{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;font:600 10.5px/1 var(--f-body);color:#0b3227;flex:none;box-shadow:0 0 0 2px var(--surface)}
.c0{background:#b9f86f} .c1{background:#c9bffd} .c2{background:#fbb08a} .c3{background:#8fe0cc} .c4{background:#f4dc84}
.hero{position:relative;overflow:hidden;border-radius:16px;padding:26px 28px;background:var(--grad);color:#fff;box-shadow:var(--shadow-lg)}
.hero::after{content:"";position:absolute;right:-60px;top:-80px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(185,248,111,.35),rgba(185,248,111,0) 70%)}
.hero h1{color:#fff}
.hero .sub{color:rgba(255,255,255,.78);margin-top:6px}
.callout{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;border-radius:var(--r);padding:18px 20px;background:var(--grad-soft);border:1px solid var(--line)} /* brand gradient: an invitation (session), not a status */
.who-line{display:flex;gap:10px;align-items:flex-start}
.who-line + .who-line{margin-top:10px}
.who-line .body{min-width:0;flex:1;white-space:pre-wrap;overflow-wrap:anywhere;padding-top:2px}
.qcard{scroll-margin-top:96px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:grid;gap:12px;box-shadow:var(--shadow)}
.qcard h3{font:600 15px/1.45 var(--f-body)}
.blok-titel{display:flex;gap:10px;align-items:baseline;margin:14px 0 -4px}
.blok-titel h2{font:700 19px/1.3 var(--f-display)}
.opts{display:grid;gap:6px}
.opts label,.opts>div{display:flex;gap:10px;align-items:center;padding:9px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer;background:var(--surface);transition:border-color .12s,background .12s}
.opts label:hover{border-color:var(--line-2);background:var(--surface-2)}
.opts label:has(input:checked){border-color:var(--brand-2);background:var(--accent-soft);font-weight:600}
.scale{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.scale label{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--line-2);border-radius:10px;cursor:pointer;font-weight:600;background:var(--surface);transition:all .12s}
.scale label:hover{background:var(--surface-2)}
.scale label:has(input:checked){background:var(--primary-bg);color:var(--primary-fg);border-color:transparent}
.scale input{position:absolute;opacity:0;pointer-events:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:12px}
.fields label{display:grid;gap:5px;font-size:12.5px;color:var(--muted);font-weight:500}
.track{position:relative;height:34px;background:linear-gradient(90deg,var(--surface-2),var(--accent-soft));border-radius:10px;border:1px solid var(--line)}
.track .tick{position:absolute;top:50%;transform:translate(-50%,-50%)}
.track .lbl{position:absolute;bottom:-20px;font-size:11.5px;color:var(--muted)}
.agenda{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.agenda li{display:grid;grid-template-columns:118px 1fr auto;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface);cursor:pointer;transition:border-color .12s,box-shadow .12s,transform .12s}
.agenda li:hover{border-color:var(--line-2);box-shadow:var(--shadow-lg);transform:translateY(-1px)}
.agenda li .pill{justify-self:start}
@media (max-width:640px){.agenda li{grid-template-columns:1fr auto}.agenda li .pill{grid-column:1/-1}}
.meter{width:76px;height:6px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.meter i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--warn),var(--stop))}
.ai{background:var(--grad-soft);border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:grid;gap:8px;font-size:13.5px}
.ai b{color:var(--info);font-weight:600}
.fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.fotos figure{margin:0;display:grid;gap:4px}
.fotos img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;border:1px solid var(--line);background:var(--surface-2)}
.fotos figcaption{font-size:12px;color:var(--muted)}
.demo-box{display:grid;gap:8px;padding:12px;border-radius:10px;background:var(--warn-bg);font-size:12.5px}
.demo-box select{width:100%;height:30px;font-size:12.5px}
.demo-box .row{gap:6px}
.demo-box .btn{height:28px;font-size:12px;padding:0 9px}
.overdue{color:var(--stop)!important;font-weight:600}
form.inline{display:grid;gap:12px}
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:12px}
.form-row label,form.inline>label{display:grid;gap:5px;font-size:12.5px;color:var(--muted);font-weight:500}
.checks{display:flex;flex-wrap:wrap;gap:6px}
.checks label{display:inline-flex;gap:6px;align-items:center;color:var(--fg-2);font-size:13px;padding:5px 10px;border:1px solid var(--line);border-radius:99px;background:var(--surface);cursor:pointer}
.checks label:has(input:checked){border-color:var(--brand-2);background:var(--accent-soft);color:var(--fg)}
.besl{border:1px solid var(--line);border-left:3px solid var(--line-2);border-radius:10px;padding:10px 12px;display:grid;gap:4px;background:var(--surface)}
.besl+.besl{margin-top:8px}
.cmp td,.cmp th{padding:8px 12px}
.hot td{background:var(--stop-bg)}
.warm td{background:var(--warn-bg)}
.sticky-bar{position:sticky;top:12px;z-index:5;box-shadow:var(--shadow-lg)}
@media (max-width:900px){.sticky-bar{top:112px}}
.onderwerp{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line)}
.onderwerp:last-child{border-bottom:0}
.alist{display:grid}
.aitem{display:grid;gap:6px;padding:12px 0;border-bottom:1px solid var(--line)}
.aitem:first-child{padding-top:0} .aitem:last-child{border-bottom:0;padding-bottom:0}
.ameta{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.ameta select,.ameta input[type=date]{height:28px;font-size:12.5px;border-color:transparent;background:var(--surface-2);padding-inline:8px}
.ameta select:hover,.ameta input[type=date]:hover{border-color:var(--line-2)}
.ameta .chip{width:22px;height:22px;font-size:10px;margin-right:2px}
/* meetings */
.mlijst{display:grid;gap:6px}
.mrij{display:flex;gap:14px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:inherit;text-decoration:none}
.mrij.klik:hover{border-color:var(--line-2);background:var(--surface-2)}
.mrij.eerst{border-color:var(--info);background:var(--info-bg)}
.mdatum{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line);line-height:1;flex:none}
.mdatum b{font:700 17px var(--f-body)} .mdatum span{font-size:10.5px;color:var(--muted);text-transform:uppercase}
.aanw{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:3px 10px 3px 3px;font:500 12.5px var(--f-body);color:var(--muted);cursor:pointer;opacity:.6}
.aanw.aan{opacity:1;color:var(--fg);border-color:var(--brand-2);background:var(--accent-soft)}
.agendapunt>.sec-head h2{font:700 17px/1.3 var(--f-display)}
.topic{border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:grid;gap:6px;background:var(--surface)}
.topic.vanlijst{border-style:dashed}
.tnote{font-size:13px;color:var(--fg-2);white-space:pre-wrap}
.uitk{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px;padding:5px 8px;border-radius:8px}
.uitk .uk{font:600 11px var(--f-body);text-transform:uppercase;letter-spacing:.04em;padding:2px 6px;border-radius:5px;flex:none}
.uitk .ut{flex:1;min-width:160px}
.uitk.besl{background:var(--accent-soft)} .uitk.besl .uk{background:var(--accent);color:var(--accent-ink)}
.uitk.next{background:var(--surface-2)} .uitk.next .uk{background:var(--info-bg);color:var(--info)}
.uitk.klaar .ut{text-decoration:line-through;color:var(--muted)}
.mini{height:26px!important;font-size:12px!important;padding:0 6px!important}
button.btn.mini{padding:0 6px}
.tadd summary{font-size:12.5px;color:var(--muted)}
.f-uitkomst{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px} .f-uitkomst input[name=titel]{flex:1;min-width:200px}
.f-notitie{display:flex;gap:6px} .f-notitie input{flex:1}
.f-topic input{border-style:dashed}
a.hint{display:block;font-size:12.5px;color:var(--info);text-decoration:none;padding:6px 10px;border-radius:8px;background:var(--info-bg)}
/* cockpit */
nav.tabs button.sub{padding:5px 10px 5px 37px;font-size:13px;color:var(--muted)}
nav.tabs button.sub[aria-current="true"]{color:var(--fg);font-weight:600;background:var(--hover)}
.ck-tabs{display:none;overflow-x:auto;max-width:100%}
@media (max-width:900px){nav.tabs button.sub{display:none} .ck-tabs{display:inline-flex}}
.pill.tp{background:var(--surface-2);color:var(--fg-2)}
.inzichten{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.inzichten li{padding:10px 14px;border-radius:10px;background:var(--surface-2);border-left:3px solid var(--info);font-size:13.5px}
.inzichten li.oranje{border-left-color:var(--warn);background:var(--warn-bg)} .inzichten li.groen{border-left-color:var(--go);background:var(--go-bg)}
.posten{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.post{border:1px solid var(--line);border-radius:10px;padding:12px;display:grid;gap:4px;background:var(--surface)}
.post .pv{font:600 20px/1.1 var(--f-body);letter-spacing:-.01em}
.viz.spark{max-height:80px}
.kader{border-left:4px solid var(--line-2)}
.kader-sweetmustard{border-left-color:#eb6834} .kader-raccoons{border-left-color:#e87ba4} .kader-cronos{border-left-color:var(--info)} .kader-thedigitals{border-left-color:var(--go)} .kader-direct{border-left-color:#b9f86f}
.kader-kpis{display:flex;gap:18px;flex-wrap:wrap}
.kader-kpis>div{display:grid;gap:1px;min-width:70px} .kader-kpis b{font:600 18px/1.1 var(--f-body)} .kader-kpis span{font-size:11.5px;color:var(--muted)}
.verdict{border-left:4px solid var(--info)} .verdict-groen{border-left-color:var(--go)} .verdict-oranje{border-left-color:var(--warn)} .verdict-rood{border-left-color:var(--stop)}
.vergelijk{display:grid;gap:8px}
.vrij{display:grid;grid-template-columns:200px 1fr 90px;gap:12px;align-items:center}
.hbar.groot{width:100%;height:12px}
.trechter{display:grid;gap:6px}
.tr{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;position:relative;padding:8px 12px;border-radius:8px;overflow:hidden;background:var(--surface-2)}
.tr .tb{position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--info-bg)} .tr>span:not(.tb),.tr b{position:relative}
@media (max-width:640px){.vrij{grid-template-columns:1fr 80px}.vrij .hbar{grid-column:1/-1}}
.pv-label{font-weight:600;width:100%;border-color:transparent;background:transparent;padding-inline:4px}
.pv-label:hover,.pv-label:focus{border-color:var(--line-2);background:var(--surface)}
.pv-veld{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--muted)} .pv-veld input{width:88px}
.domeinen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px}
a.domein{color:inherit;text-decoration:none;border-top:4px solid var(--line-2);transition:box-shadow .12s}
a.domein:hover{box-shadow:var(--shadow-lg)}
a.domein.domein-rood{border-top-color:var(--stop)} a.domein.domein-oranje{border-top-color:var(--warn)} a.domein.domein-groen{border-top-color:var(--go)}
.domein ul li{margin:4px 0}
.balans{display:grid;gap:8px}
.actiekaart{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;border:1px solid var(--line);border-left:4px solid var(--line-2);border-radius:10px;padding:10px 12px;background:var(--surface)}
.actiekaart.laat{border-left-color:var(--stop)} .actiekaart.st-bezig{border-left-color:var(--info)} .actiekaart.st-gedaan{opacity:.65;border-left-color:var(--go)} .actiekaart.st-geschrapt{opacity:.5}
.ak-lijst{display:grid;gap:8px}
.mini-num{width:56px;height:28px;padding:0 6px;display:inline-block}
.gesprek{display:grid;gap:4px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.ob-lijst{list-style:none;margin:0;padding:0;display:grid;gap:6px} .ob-lijst li{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-left:4px solid var(--line-2);border-radius:10px}
.ob-lijst li.klaar{border-left-color:var(--go);opacity:.7} .ob-lijst li.laat{border-left-color:var(--warn)} .ob-lijst label{display:flex;gap:8px;align-items:center}
.ob-stap{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .ob-stap input[type=text]{flex:1 1 240px} .ob-stap input[type=date]{width:auto}
.nav-badge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--warn-bg);color:var(--warn);font:600 11.5px/20px var(--f-body);text-align:center}
.traject{border-top:4px solid var(--warn)} .traject.laat{border-top-color:var(--stop)}
.pres-titel{width:100%;font:700 26px/1.2 var(--f-display);border:1px solid transparent;background:transparent;padding:2px 6px;margin-left:-6px} .pres-titel:hover:not(:disabled),.pres-titel:focus{border-color:var(--line-2);background:var(--surface)}
.pres-lijst{display:grid;gap:14px} .pres-kaart{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:var(--shadow)}
.pres-kaart textarea{width:100%} @media (max-width:900px){.pres-kaart{grid-template-columns:1fr}}
.lid-naam{font:650 16px var(--f-body);width:100%} .lid-uit{opacity:.6}
.focus-lid{display:flex;flex-wrap:wrap;gap:6px} .focus-lid .pill{cursor:pointer;border:1px solid var(--line);background:var(--surface)} .focus-lid .pill.aan{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.groei-lijst{margin:4px 0 0;padding-left:18px;display:grid;gap:6px}
.focus-keuze{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px} .focus-keuze .pill{cursor:pointer;border:1px solid rgba(255,255,255,.25)}
/* Onze koers: north star on top, mission and vision, the priorities as cards (brand gradient: the compass for everything below) */
.koers{background:var(--grad-soft);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;display:grid;gap:18px}
.koers-kop{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.kk{display:block;font:600 11px var(--f-body);text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.koers-ns h2{font:700 30px/1.15 var(--f-display);margin:4px 0 6px} .koers-ns p{margin:0;font-size:16px;line-height:1.45;max-width:72ch}
.koers-mv{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px}
.koers-mv>div{border-left:3px solid var(--line-2);padding-left:12px} .koers-mv p{margin:4px 0 0;line-height:1.45}
.koers-prio{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:10px;margin-top:6px}
.koers-prio-kaart{display:grid;gap:4px;align-content:start;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;box-shadow:var(--shadow)}
.koers-prio-kaart b{font-size:14px;line-height:1.3}
.koers-nr{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--brand);color:var(--primary-fg);font:700 12px var(--f-body)}
.koers-niet{margin:6px 0 0;padding-left:18px}
.koers-mini{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;padding:10px 16px;border-radius:var(--r);border:1px solid var(--line);background:var(--grad-soft);margin-bottom:4px}
.koers-mini-zin{flex:1;min-width:240px;font-size:14px} .koers-mini-zin b{font:700 15px var(--f-display)} .koers-mini a{white-space:nowrap}
/* Choices instead of dropdowns: short lists as side-by-side buttons (.seg), longer ones as a pill with ▾ and a list of pills */
.sel-vh{position:absolute!important;width:1px!important;height:1px!important;opacity:0;pointer-events:none;overflow:hidden;padding:0!important;border:0!important}
.keus.seg{flex-wrap:wrap;justify-self:start;max-width:100%} .keus.seg button{padding:5px 10px}
td .keus.seg button{padding:4px 8px;font-size:12.5px}
.keus-menu{display:inline-block;justify-self:start;max-width:100%}
.keus-knop{cursor:pointer;border:1px solid var(--line-2);font-size:13px;padding:6px 10px;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.keus-knop:not([class*=" p-"]){background:var(--surface);color:var(--fg)}
.keus-knop:hover{box-shadow:0 0 0 2px var(--line-2)}
.keus-lijst{position:fixed;z-index:60;display:flex;flex-wrap:wrap;gap:6px;padding:8px;width:max-content;max-width:min(440px,calc(100vw - 32px));max-height:50vh;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-lg)}
.keus-lijst[hidden]{display:none}
.keus-lijst .pill{cursor:pointer;border:1px solid var(--line);font-size:13px;padding:6px 10px} .keus-lijst .pill.sel{box-shadow:0 0 0 2px var(--fg)} .keus-lijst .pill:hover{border-color:var(--fg-2)}
/* Card border = the status pill at the top of the card. That way card and pill always say the same thing. */
:is(.doelkaart,.dienstkaart):has(> .row:first-child .pill.p-go){border-top-color:var(--go)}
:is(.doelkaart,.dienstkaart):has(> .row:first-child .pill.p-warn){border-top-color:var(--warn)}
:is(.doelkaart,.dienstkaart):has(> .row:first-child .pill.p-stop){border-top-color:var(--stop)}
:is(.doelkaart,.dienstkaart):has(> .row:first-child .pill.p-info){border-top-color:var(--info)}
.ak-tekst{flex:1 1 320px;min-width:0} .ak-meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap} .ak-sel{width:auto;padding:4px 6px} .ak-datum{width:140px;padding:4px 6px}
.ak-st{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden} .ak-st button{border:0;background:var(--surface);padding:4px 9px;cursor:pointer;font:600 13px var(--f-body);color:var(--muted,#888)} .ak-st button.aan{background:var(--fg);color:var(--bg)}
.ak-groep{margin-top:6px;padding-bottom:2px;border-bottom:1px solid var(--line)} .ak-groep.rood b{color:var(--stop)} .ak-groep.oranje b{color:var(--warn)}
.doelkaart.besl-k{border-top-color:var(--go)} .doelkaart.besl-k.zonder{border-top-color:var(--warn)}
.maandchip{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 8px 6px 14px;cursor:pointer;font:inherit}
.maandchip.sel{box-shadow:0 0 0 2px var(--fg)} .maandchip b{font-size:13px}
.dropzone{display:grid;gap:6px;justify-items:start;border:2px dashed var(--line-2);border-radius:12px;padding:16px;cursor:pointer;background:var(--surface-2)} .dropzone.over{border-color:var(--info);background:var(--info-bg)}
.bs-lijst{display:grid;gap:12px} .bs-kaart{border:1px solid var(--line);border-left:5px solid var(--line-2);border-radius:12px;padding:14px 16px;display:grid;gap:10px;background:var(--surface)}
.bs-kop{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-start} .bs-titel{display:grid;gap:6px;flex:1 1 320px;min-width:0} .bs-titel .pill{justify-self:start}
.bs-titel .pv-label{width:100%;font:600 15px var(--f-body);padding:6px 8px}
.bs-cijfers{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap} .bs-cijfers>div{display:grid;gap:2px;text-align:right} .bs-cijfers span{font-size:11.5px;color:var(--muted,#888)} .bs-cijfers b{font-size:15px;white-space:nowrap}
.bs-velden{display:flex;gap:12px;flex-wrap:wrap} .bs-velden .pv-veld{display:grid;grid-template-columns:auto auto;justify-content:start;align-items:center;gap:3px 4px;font-size:12px;color:var(--muted,#888)} .bs-velden .pv-veld>span{grid-column:1/-1} .bs-velden .pv-veld input{width:140px}
.bs-vraagt{color:var(--fg-2,inherit);background:var(--surface-2);border-radius:8px;padding:8px 10px}
.bs-totaal{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:12px 16px;border-radius:12px;background:var(--surface-2)}
.kaderkaarten{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,460px),1fr));gap:16px} .kaderkaart:has(details[open]){grid-column:1/-1} .panel.kaderkaart{border-left:1px solid var(--line)}
input.mic{width:92px;text-align:right;font:inherit;padding:4px 6px}
.voorstel{border:1px solid var(--line-2);background:var(--grad-soft)} /* brand gradient = the tool offers something (invitation or suggestion), never a status */
.dienstkaarten{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,440px),1fr));gap:16px}
.dienstkaart{background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--line-2);border-radius:14px;padding:16px;display:grid;gap:10px;align-content:start;box-shadow:var(--shadow)}
.dienstkaart h3{margin:0;font:650 16px/1.3 var(--f-body)} .dk-pushen{border-top-color:var(--go)} .dk-lanceren{border-top-color:var(--info)} .dk-afbouwen{border-top-color:var(--warn)} .dk-behouden{border-top-color:var(--line-2)}
.dk-rang{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--fg);color:var(--bg);font:600 12px var(--f-body)}
.dk-pil{cursor:pointer;border:0;font-weight:600}
.doelkaart.kan-inzetten{border-top-color:var(--go)} .doelkaart.kan-behouden{border-top-color:var(--line-2)} .doelkaart.kan-beperken{border-top-color:var(--warn)} .doelkaart.kan-stoppen{border-top-color:var(--stop)} .doelkaart.kan-geen{border-top-color:var(--line-2)}
.kan-wr{display:grid;gap:4px}
.dienstkaart.industrie{border-top-color:var(--line-2)} .dk-menu .pill{cursor:pointer;border:1px solid var(--line)} .dk-menu .pill.sel{box-shadow:0 0 0 2px var(--fg)} .doelkaart.product{border-top-color:var(--line-2)} .dk-rij{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px} .dk-rij>b{min-width:52px;font-size:12px;color:var(--muted,#777)}
.st-tegels{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:16px}
.st-tegel{border-top:4px solid var(--line-2)} .st-tegel.st-rood{border-top-color:var(--stop)} .st-tegel.st-oranje{border-top-color:var(--warn)} .st-tegel.st-groen{border-top-color:var(--go)}
.st-tegel .sec-head h2{display:flex;gap:8px;align-items:center}
.kw-strook{display:grid;grid-template-columns:repeat(4,1fr);gap:6px} .kw-strook>div{border:1px dashed var(--line-2);border-radius:9px;padding:7px 9px;display:grid;gap:2px;font-size:12px;color:var(--muted,#888)}
.kw-strook>div.aan{border-style:solid;background:var(--info-bg);color:var(--fg)} .kw-strook b{font-size:13px}
.trend-mini{display:flex;justify-content:space-between;gap:8px;align-items:flex-start;padding:7px 10px;border-radius:9px;background:var(--surface-2);font-size:13px}
.doelkaarten{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:14px}
.doelkaart{background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--line-2);border-radius:14px;padding:16px;display:grid;gap:8px;align-content:start;box-shadow:var(--shadow)}
.doelkaart h3{margin:0;font:650 16px/1.3 var(--f-body)} .doelkaart.doel-gehaald{border-top-color:var(--go)} .doelkaart.doel-loopt{border-top-color:var(--info)}
.doel-meet{font-size:13.5px} .doel-links{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--muted,#888)} .doel-links .aan{color:var(--fg);font-weight:600}
.kw-plan th[scope=row]{text-align:left;min-width:180px;vertical-align:top} .kw-plan td{vertical-align:top;min-width:170px} .kw-plan td.nu,.kw-plan th.nu{background:var(--surface-2)}
.kw-plan td.doelkw{box-shadow:inset 0 -3px 0 var(--go)} .kw-plan textarea{width:100%;min-height:44px;font-size:12.5px;resize:vertical}
.kw-plan tr.lane th{font-size:12.5px;color:var(--muted,#777)} .kw-chip{display:block;margin:0 0 4px;padding:3px 8px;border-radius:7px;font-size:12px;text-decoration:none;color:inherit;border:1px solid var(--line)}
.kw-chip.mk,.kw-chip.hi,.kw-chip.se{background:var(--surface-2)}
.samenhang{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:14px}
.sig-mini{padding:6px 10px;font-size:13px}
.dom-kern{font:650 20px/1.2 var(--f-body);letter-spacing:-.01em}
.stepper{display:flex;gap:6px;list-style:none;margin:6px 0 0;padding:0;flex-wrap:wrap} .stepper li{flex:1;min-width:130px}
.stepper button,.stepper li>span{display:flex;align-items:center;gap:8px;width:100%;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:8px 10px;font:inherit;font-size:13px;color:var(--fg-2,inherit);cursor:pointer;text-align:left}
.stepper li>span{cursor:default} .stepper .nr{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--surface-2);font-size:12px;font-weight:600;flex:none}
.stepper li.af .nr{background:var(--go);color:#fff} .stepper li.nu .nr{background:var(--fg);color:var(--bg)} .stepper li.nu button,.stepper li.nu>span{border-color:var(--fg)} .stepper li.sel button{background:var(--surface-2);box-shadow:inset 0 -2px 0 var(--fg)}
.ritme-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px} .ritme h2{font-size:15px}
.input-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px} .input-grid .panel{padding:12px 14px}
.checklist{list-style:none;padding:0;margin:0} .checklist li{padding:3px 0} .checklist li.ok{color:var(--fg)} .checklist li:not(.ok){color:var(--muted,#888)} .sessie-hero{border-color:var(--line-2)}
.mk-chip{display:block;width:100%;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:4px 8px;margin:3px 0;font:inherit;font-size:12.5px;cursor:pointer;color:inherit}
.mk-chip:hover{border-color:var(--line-2)} .mk-chip.st-klaar{border-left:3px solid var(--go)} .mk-chip.st-bezig{border-left:3px solid var(--info)} .mk-chip.st-gepland{border-left:3px solid var(--info)} .mk-chip.st-idee{border-left:3px dashed var(--line-2)}
.mk-brief textarea{width:100%}
.mk-kal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px} @media (max-width:900px){.mk-kal{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:560px){.mk-kal{grid-template-columns:1fr}}
.mk-kw{border:1px solid var(--line);border-radius:14px;padding:10px;display:grid;gap:6px;align-content:start;background:var(--surface);min-height:180px}
.mk-kw.sel{box-shadow:0 0 0 2px var(--fg)} .mk-kw.nu .mk-kw-kop span::after{content:" · nu";color:var(--go)}
.mk-kw-kop{display:flex;justify-content:space-between;align-items:baseline;border:0;background:none;padding:0;cursor:pointer;font:inherit;color:inherit} .mk-kw-kop b{font:700 18px var(--f-display)} .mk-kw-kop span{font-size:12px;color:var(--muted,#888)}
.mk-band{display:grid;gap:2px;padding:8px 10px;border-radius:10px;background:var(--surface-2);color:var(--fg);border-left:3px solid var(--fg-2);font-size:13px;text-align:left;border-top:0;border-right:0;border-bottom:0} .mk-band span{font-size:11.5px;opacity:.85}
.mk-band.leeg{background:none;border:1px dashed var(--line-2);color:var(--muted,#888);cursor:pointer}
.doelkaart.mi-bezig{border-top-color:var(--info)} .doelkaart.mi-klaar{border-top-color:var(--go)} .doelkaart.mi-gepland{border-top-color:var(--info)} .doelkaart.mi-idee{border-top-color:var(--line-2)}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer} .linkbtn:hover .pill{filter:brightness(.96);box-shadow:0 0 0 2px var(--line-2)}
.sig-groep{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:20px} .sig-cnt{display:flex;gap:6px;flex-wrap:wrap} .sig-cnt .pill{font-size:11.5px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} .grid3 .pv{font:600 22px/1.15 var(--f-body);letter-spacing:-.01em} @media (max-width:760px){.grid3{grid-template-columns:1fr}}
.mono.neg,td.neg{color:var(--stop)}
.br{display:grid;grid-template-columns:70px 1fr 110px;gap:10px;align-items:center}
.bt{position:relative;height:18px;background:var(--surface-2);border-radius:6px;display:flex;overflow:visible}
.bt i{display:block;height:100%} .bt i:first-child{border-radius:6px 0 0 6px}
.bt .cap{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--fg);border-radius:2px}
.doorv{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:8px}
.dv{display:grid;gap:3px;padding:10px 12px;border:1px dashed var(--line-2);border-radius:10px;font-size:12.5px}
.dv b{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)} .dv.aan{border-style:solid;border-color:var(--brand-2);background:var(--accent-soft)}
.doel{border-left:4px solid var(--line-2)}
nav.tabs button.sub.st{}
.trend{border-left:4px solid var(--line-2)} .trend.zwak{opacity:.55}
button.btn.mini.aan{background:var(--accent-soft);border-color:var(--brand-2)}
a.slink{font-size:12px;color:var(--info);text-decoration:none;white-space:nowrap} a.slink:hover{text-decoration:underline}
.ck-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:20px}
a.ck-card{color:inherit;text-decoration:none;transition:border-color .12s,box-shadow .12s}
a.ck-card:hover{border-color:var(--line-2);box-shadow:var(--shadow-lg)}
.mini-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.mini-kpis b{display:block;font:600 24px/1.1 var(--f-body);letter-spacing:-.02em} .mini-kpis span{font-size:12px;color:var(--muted)}
.stick{position:sticky;left:0;background:var(--surface);z-index:1;white-space:nowrap}
thead .stick{background:var(--surface-2)}
table.pnl td,table.pnl th{padding:8px 10px;font-size:12.5px;white-space:nowrap}
table.pnl tr.sub td{font-weight:600;background:var(--surface-2)} table.pnl tr.sub td.stick{background:var(--surface-2)}
td.opv{background:var(--warn-bg)}
table.heat td,table.heat th{padding:8px 10px;font-size:12.5px;white-space:nowrap}
td.h-ok{background:var(--go-bg)} td.h-mid{background:var(--warn-bg)} td.h-laag{background:var(--stop-bg)}
table.bezet td,table.bezet th{padding:8px 10px;font-size:12.5px;min-width:130px}
td.b-bezet{background:var(--go-bg)} td.b-twijfel{background:var(--warn-bg)} td.b-vrij{background:var(--stop-bg);font-weight:600} td.b-leeg{color:var(--muted)} td.b-partner{background:var(--surface-2)}
td.detail{background:var(--surface-2);padding:16px}
th.sortable{cursor:pointer;user-select:none} th.sortable:hover{color:var(--fg)}
tr.sel td{background:var(--accent-soft)}
.viz{width:100%;height:auto;max-height:440px;display:block;--pos:var(--info);--neg:#e34948}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .viz{--pos:#3987e5;--neg:#e66767}}
:root[data-theme="dark"] .viz{--pos:#3987e5;--neg:#e66767}
.viz .grid{stroke:var(--line);stroke-width:1} .viz .axis{stroke:var(--line-2);stroke-width:1.5}
.viz .tick{fill:var(--muted);font:500 11px var(--f-body)} .viz .lbl{fill:var(--fg);font:600 12px var(--f-body)}
.viz .pos{fill:var(--pos)} .viz .neg{fill:var(--neg)} .viz .line{fill:none;stroke:var(--pos);stroke-width:2} .viz .area{fill:var(--pos);opacity:.1}
.viz .dot{fill:var(--pos);stroke:var(--surface);stroke-width:2;opacity:0} .viz .hit:hover .dot{opacity:1} .viz .hit:hover rect.pos,.viz .hit:hover rect.neg{filter:brightness(1.12)}
.viz-tip{position:fixed;z-index:60;pointer-events:none;background:#15191a;color:#fff;font:600 12.5px var(--f-body);padding:6px 9px;border-radius:7px;box-shadow:var(--shadow-lg);white-space:nowrap}
.legend{display:flex;gap:12px;font-size:12px;color:var(--muted)} .legend .sw{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.legend .sw.pos{background:var(--info)}
.viz .zacht{fill-opacity:.35;stroke-dasharray:3 2;stroke-width:1.5} .viz .pos.zacht{stroke:var(--pos)} .viz .neg.zacht{stroke:var(--neg)}
.sw.zacht-sw{display:inline-block;width:10px;height:10px;border-radius:3px;border:1.5px dashed var(--info);background:rgba(42,120,214,.3);vertical-align:-1px}
th.vl,td.vl{background:repeating-linear-gradient(135deg,transparent 0 6px,var(--surface-2) 6px 8px);font-style:italic} .legend .sw.neg{background:#e34948}
.signalen{display:grid;gap:8px}
.sig{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:11px 14px;border-radius:10px;border:1px solid var(--line);background:var(--surface)}
.sig-dot{font-size:14px;line-height:1.4} .sig-rood{background:var(--stop-bg);border-color:transparent} .sig-rood .sig-dot{color:var(--stop)}
.sig-oranje{background:var(--warn-bg);border-color:transparent} .sig-oranje .sig-dot{color:var(--warn)} .sig-blauw .sig-dot{color:var(--info)}
.hbar{display:inline-block;width:90px;height:7px;border-radius:99px;background:var(--surface-2);overflow:hidden;flex:none;vertical-align:middle}
.hbar i{display:block;height:100%;background:var(--info);border-radius:99px}
.pbar{display:grid;grid-template-columns:minmax(0,1fr) 120px 200px;gap:10px;align-items:center;font-size:13px}
.pbar .pn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pbar .hbar{width:100%}
@media (max-width:640px){.pbar{grid-template-columns:1fr 80px}.pbar>span:last-child{grid-column:1/-1}}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}
/* a deck while Claude writes it (D77): a banner on top, the slides dimmed with a soft shimmer, nothing editable */
.pres-wacht{display:flex;gap:12px;align-items:center;position:sticky;top:8px;z-index:5} .pres-wacht .spin{width:20px;height:20px}
.pres-bezig .pres-kaart{pointer-events:none}
.pres-bezig .pres-preview{position:relative;opacity:.55}
.pres-bezig .pres-preview::after{content:"";position:absolute;inset:0;border-radius:14px;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);background-size:250% 100%;animation:pres-glans 1.6s linear infinite}
@keyframes pres-glans{from{background-position:120% 0}to{background-position:-120% 0}}
@media (prefers-reduced-motion:reduce){.pres-bezig .pres-preview::after{animation:none}}
.fc-uitleg{margin:6px 0 0;padding-left:20px;display:grid;gap:4px}
.fc-plan td{background:var(--info-bg)} .fc-plan td.stick{font-style:normal}

/* Agenda points (D94): one tint per agenda point of the MT sync; a type color, never a status */
.ag-strategie{--ag:#7c4ddb} .ag-operations{--ag:#0e8f86} .ag-pipe{--ag:#c2417a} .ag-sales{--ag:#7d7a12} .ag-people{--ag:#a8572e}
.pill.ag{background:color-mix(in srgb,var(--ag) 15%,var(--surface));color:color-mix(in srgb,var(--ag) 72%,var(--fg))}
.pill.ag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ag)}
.agendapunt[class*="ag-"]{border-left:4px solid var(--ag)}
.ond-snel{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ond-snel input[type=text]{flex:1;min-width:200px}
.ond-dr{display:flex;gap:6px;align-items:center;font-size:13px;color:var(--fg-2);white-space:nowrap}
.ondlijst .onderwerp{align-items:center;padding:8px 0}
.ondlijst .onderwerp .keus{flex:0 0 auto}