/* Bolwerk — rustig, Notion-achtig. Eén kleur accent (blauw), verder grijstinten. */
:root{
  --bg:#ffffff; --side:#f7f7f5; --ink:#37352f; --muted:#787774; --faint:#a5a29c;
  --line:rgba(55,53,47,.09); --hover:rgba(55,53,47,.06); --press:rgba(55,53,47,.12);
  --accent:#2383e2; --accent-soft:rgba(35,131,226,.14); --red:#e03e3e;
  --t0b:#e3e2e0; --t0f:#32302c; --t1b:#fdecc8; --t1f:#402c1b; --t2b:#e3e2e0; --t2f:#32302c;
  --t3b:#dbeddb; --t3f:#1c3829; --t4b:#d3e5ef; --t4f:#183347; --t5b:#e8deee; --t5f:#412454;
  --hoogb:#ffe2dd; --hoogf:#5d1715; --okb:#ddf1e3; --okf:#24703d; --wachtb:#fbe9d6; --wachtf:#94520f; --blauwb:#dcebfb; --blauwf:#1f5f9e; --paarsb:#e9defb; --paarsf:#5a3596; --glgroen:#22a650; --glgeel:#e3b400; --gloranje:#f07a12; --glblauw:#2f7fd6; --glpaars:#8a55dc;
  --font:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sw:248px; --tabh:58px;
  --gloed:rgba(255,255,255,.9);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{--gloed:rgba(255,255,255,.22);
  --bg:#191919; --side:#202020; --ink:rgba(255,255,255,.86); --muted:#9b9b9b; --faint:#6f6f6f;
  --line:rgba(255,255,255,.09); --hover:rgba(255,255,255,.055); --press:rgba(255,255,255,.1);
  --accent:#529cca; --accent-soft:rgba(82,156,202,.2); --red:#ff7369;
  --t0b:#373737; --t0f:#e6e6e6; --t1b:#5c4a26; --t1f:#fde8c4; --t2b:#373737; --t2f:#e6e6e6;
  --t3b:#2b4a35; --t3f:#d6eedb; --t4b:#28456c; --t4f:#d4e6f5; --t5b:#492f64; --t5f:#eadcf5;
  --hoogb:#6e3630; --hoogf:#ffe2dd; --okb:#1f4029; --okf:#a6dcb5; --wachtb:#4a3218; --wachtf:#f0c58f; --blauwb:#1f3a55; --blauwf:#a9cdf2; --paarsb:#3a2a58; --paarsf:#d4c1f6; --glgroen:#3fcf6c; --glgeel:#f5c51c; --gloranje:#ff8a26; --glblauw:#4d9ef2; --glpaars:#a57cf2; color-scheme:dark}}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font:15px/1.6 var(--font);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-radius:4px}
.i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.i.rot{transform:rotate(90deg)}
.emoji{width:18px;text-align:center;flex:none;line-height:1}
.grow{flex:1}
.muted{color:var(--muted)} .small{font-size:13px} .pad{padding:12px}
[hidden]{display:none!important}

/* ---------- zijbalk ---------- */
#side{position:fixed;inset:0 auto 0 0;width:var(--sw);background:var(--side);padding:calc(10px + env(safe-area-inset-top,0px)) 8px calc(10px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px));overflow:hidden;display:flex;flex-direction:column;gap:1px;z-index:30;font-size:14px;color:var(--muted)}
.ws{display:flex;align-items:center;gap:8px;padding:6px 8px 12px;color:var(--ink);font-weight:600}
.wsmark{width:22px;height:22px;border-radius:5px;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-size:13px;font-weight:700}
.wsmark.big{width:44px;height:44px;font-size:24px;border-radius:9px;margin-bottom:8px}
.wsname{flex:1}
.si,.ti{display:flex;align-items:center;gap:8px;min-height:30px;padding:0 8px;border-radius:6px;text-decoration:none;color:var(--muted);text-align:left;width:100%}
.si:hover,.ti:hover{background:var(--hover)}
.si.on,.ti.on{background:var(--press);color:var(--ink)}
.si span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* geen tellers op de navbars (Har, 10 nov 2026): ongelezen = een stipje */
.navstip{flex:none!important;width:8px;height:8px;border-radius:99px;background:var(--accent);margin-left:auto}
#tabs .tab .navstip{position:absolute;top:4px;left:calc(50% + 7px);margin:0;box-shadow:0 0 0 2px var(--bg)}
.badge{flex:none!important;font-size:11px;background:var(--red);color:#fff;border-radius:9px;padding:0 6px;line-height:17px}
.sh{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:600;color:var(--faint);padding:16px 8px 4px}
.ti{padding-left:calc(4px + var(--d) * 14px);gap:2px}
.tog{width:22px;height:22px;display:grid;place-items:center;border-radius:4px;color:var(--faint);flex:none}
.tog .i{width:12px;height:12px;stroke-width:1.8;transition:transform .12s}
.tog.leaf{visibility:hidden}
.tog:hover,.tadd:hover{background:var(--press)}
.tl{flex:1;min-width:0;display:flex;align-items:center;gap:6px;text-decoration:none;color:inherit;min-height:30px}
.tl span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl .i{width:16px;height:16px}
.tadd{width:22px;height:22px;display:grid;place-items:center;border-radius:4px;opacity:0;color:var(--faint)}
.ti:hover .tadd{opacity:1}
.tadd .i{width:14px;height:14px}
.ti.more{font-size:13px;color:var(--faint);padding-left:calc(30px + var(--d) * 14px)}
.sscroll>*{flex-shrink:0}
.sscroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;display:flex;flex-direction:column;gap:1px;margin:0 -8px;padding:0 8px}
.sfoot{flex:none;margin-top:0;padding-top:8px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:1px}
.syncstate{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--faint)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--faint);flex:none;margin:0 5px}
.dot.on{background:#4dab9a}.dot.off{background:#d9a03f}.dot.err{background:var(--red)}
.dot.busy{background:var(--accent);animation:pulse 1s infinite alternate}
@keyframes pulse{to{opacity:.3}}
.iconbtn{width:30px;height:30px;display:grid;place-items:center;border-radius:6px;color:var(--muted);flex:none}
.iconbtn:hover{background:var(--hover)}
.iconbtn.sm{width:22px;height:22px}
.iconbtn.sm .i{width:14px;height:14px}

/* ---------- hoofdvlak ---------- */
.main{margin-left:var(--sw);min-height:100%}
#top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:4px;min-height:44px;padding:calc(6px + env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) 6px 12px;background:var(--bg)}
.crumbs{flex:1;min-width:0;display:flex;align-items:center;gap:2px;font-size:14px;overflow:hidden;white-space:nowrap}
.crumbs a,.crumbs span{display:inline-flex;align-items:center;gap:6px;padding:2px 6px;border-radius:4px;text-decoration:none;color:var(--ink);overflow:hidden;text-overflow:ellipsis}
.crumbs a:hover{background:var(--hover)}
.crumbs .i{width:15px;height:15px;color:var(--muted)}
.crumbs .sep{color:var(--faint);padding:0 1px}
#top .syncstate{margin-right:6px}
.only-m{display:none}
.page{max-width:720px;margin:0 auto;padding:40px max(24px,env(safe-area-inset-right,0px)) 120px max(24px,env(safe-area-inset-left,0px))}
.page.wide{max-width:1100px}
.page.narrow{max-width:400px;padding-top:12vh}
h1{font-size:40px;line-height:1.2;font-weight:700;margin:0 0 12px;letter-spacing:-.01em;text-wrap:balance}
.ptitle{outline:none;cursor:text;word-break:break-word}
.ptitle:empty::before{content:attr(data-ph);color:var(--faint)}
.picon:empty{display:none}
.emoji.big{font-size:64px;width:auto;display:block;margin-bottom:6px}
.hello{font-size:30px;margin-bottom:28px}

/* ---------- eigenschappen ---------- */
.props{display:flex;flex-direction:column;margin:4px 0 8px}
.prow{display:flex;align-items:center;min-height:34px;gap:8px}
.pname{flex:0 0 150px;display:flex;align-items:center;gap:6px;color:var(--muted);font-size:14px;padding:4px 6px;border-radius:4px}
.pname .i{width:15px;height:15px;flex:none}
.pname > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prow.ptop{align-items:flex-start}
.prow.ptop .pval{padding-top:6px;padding-bottom:6px}
.prow.ptop .pval:hover{background:none}
.mactie.gedaan{color:var(--faint);font-weight:400}
/* geannuleerde actie (Har, 10 nov 2026): doorgestreept, niet als uitgevoerd */
.mactie.geannuleerd .mact span,.mtitle.geannuleerd,.khtitle.geannuleerd{text-decoration:line-through;text-decoration-thickness:1px}
.mtitle.geannuleerd,.khtitle.geannuleerd{color:var(--faint)}
.plang{display:flex;flex-direction:column;margin-top:10px}
.plang .pname{flex:none;font-size:13px;padding:2px 6px}
.plang-in{display:block;resize:none;overflow:hidden;line-height:1.5;font-size:15px;padding:4px 6px;border-radius:4px;field-sizing:content;min-height:0}
.plang-in:hover{background:var(--hover)}
.pmeer{align-self:flex-start;margin:6px 0 0 2px;color:var(--faint)}
.pmeer.on{color:var(--ink)}
.pachter{display:flex;flex-direction:column;margin-top:2px}
.pval{flex:1;min-width:0;display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:14px;padding:2px 6px;border-radius:4px}
.pval:hover{background:var(--hover)}
.prop-in{border:0;background:transparent;font:inherit;color:inherit;width:100%;padding:4px 0;outline:none}
.prop-in::placeholder,.empty-cell{color:var(--faint)}
.cb{width:16px;height:16px;accent-color:var(--accent);margin:0;cursor:pointer}
.selwrap{position:relative;display:inline-flex;align-items:center;min-height:24px;min-width:60px;max-width:100%}
.selwrap select{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.tag{display:inline-flex;align-items:center;padding:0 7px;border-radius:4px;font-size:13px;line-height:22px;white-space:nowrap;background:var(--t0b);color:var(--t0f)}
.tag.t-0{background:var(--hoogb);color:var(--hoogf)}.tag.t-1{background:var(--t1b);color:var(--t1f)}.tag.t-2{background:var(--t2b);color:var(--t2f)}
.tag.t-3{background:var(--t3b);color:var(--t3f)}.tag.t-4{background:var(--t4b);color:var(--t4f)}.tag.t-5{background:var(--t5b);color:var(--t5f)}
.relchip{display:inline-flex;align-items:center;gap:4px;text-decoration:none;border-bottom:1px solid var(--line)}
.relchip .i{width:14px;height:14px;color:var(--muted)}
/* koppelveld bij bewerken: meerdere items, elk met een kruisje, en een plusje voor er nog een bij */
.relmulti{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-height:24px;min-width:0;max-width:100%}
.relmulti .relchip{min-width:0;max-width:100%}
.relmulti .relchip a{color:inherit;text-decoration:none;overflow-wrap:anywhere}
.relplus{min-width:22px}
.relcount{color:var(--muted);text-decoration:none}
.late{color:var(--red)}
.psep{border:0;border-top:1px solid var(--line);margin:10px 0 18px}

/* ---------- tekst ---------- */
.md{display:flex;flex-direction:column;gap:6px;min-height:28px;cursor:text;outline:none;overflow-wrap:anywhere}
.md>*{margin:0}
.md h1{font-size:30px;margin-top:22px}.md h2{font-size:23px;font-weight:650;margin-top:20px}.md h3{font-size:19px;margin-top:14px}
.md ul,.md ol{margin:0;padding-left:24px;display:flex;flex-direction:column;gap:2px}
.md li:has(>input[type=checkbox]){list-style:none;margin-left:-24px;display:flex;gap:8px;align-items:flex-start}
.md li>input[type=checkbox]{margin-top:5px;accent-color:var(--accent);width:16px;height:16px;flex:none;cursor:pointer}
.md li:has(>input:checked){color:var(--faint);text-decoration:line-through}
.md blockquote{margin:0;border-left:3px solid var(--ink);padding-left:14px}
.md pre{overflow-x:auto;background:var(--hover);border-radius:4px;padding:12px;font:13px/1.5 var(--mono)}
.md code{font:.88em var(--mono);background:var(--hover);padding:1px 4px;border-radius:3px;color:var(--red)}
.md pre code{background:none;color:inherit;padding:0}
.md hr{border:0;border-top:1px solid var(--line);width:100%}
.md img{border-radius:4px}
/* tabellen in pagina's zien er hetzelfde uit als de standaard databasetabel (.dbt): lichte kop, alleen lijnen tussen rijen en kolommen;
   kolommen blijven leesbaar en een brede tabel scrolt opzij in plaats van in te krimpen */
.md table{border-collapse:collapse;font-size:14px;width:max-content;min-width:100%}
.md th,.md td{border:0;border-bottom:1px solid var(--line);padding:5px 8px;text-align:left;vertical-align:top;min-width:6em;max-width:22em}
.md th{font-weight:400;color:var(--muted);padding:6px 8px;white-space:nowrap}
.md th+th,.md td+td{border-left:1px solid var(--line)}
.md tr:hover td:not([data-kleur]){background:var(--hover)}
/* dashboardblok: tegels bovenaan (twee naast elkaar op de telefoon), daaronder stroken met kleine gekleurde cellen */
.dash{margin:8px 0;display:flex;flex-direction:column;gap:12px;min-height:var(--dashh,auto)}
.tt .dash.ProseMirror-selectednode{outline:0}
.dtegels{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(140px,calc(50% - 4px)),1fr));gap:8px}
.dtegel{display:flex;flex-direction:column;gap:2px;padding:clamp(10px,2.5vw,16px) clamp(12px,3vw,18px)}
.dtl{font-size:clamp(13px,3vw,15px);color:var(--muted)}.dtw{font-size:clamp(24px,6vw,34px);font-weight:600;font-variant-numeric:tabular-nums}
.dstroken{display:flex;flex-direction:column;gap:8px;flex:1}
.dstrook{display:flex;flex-direction:column;padding:10px 12px;flex:1}
.dstrook .mtitle{display:block;margin-bottom:6px}
.dcellen{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:3px}
.dstrook>.dcellen:not(.donder){flex:1}
.dcel{min-height:26px;border-radius:4px;font-size:clamp(11px,2.8vw,15px);display:flex;align-items:center;justify-content:center;white-space:nowrap;font-variant-numeric:tabular-nums;background:var(--hover);color:var(--muted)}
.donder{margin-top:3px;font-size:11px;color:var(--muted);text-align:center}
.dcel[data-kleur=paars]{background:var(--paarsb);color:var(--paarsf)}
a.dcel{text-decoration:none;cursor:pointer;transition:box-shadow .15s}
a.dcel:hover,a.dcel:focus-visible{box-shadow:inset 0 0 0 1.5px currentColor;outline:0}
.dkop{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline}
.dkopi{display:flex;gap:6px;align-items:baseline}.dkopi b{font-size:clamp(15px,4vw,24px);font-variant-numeric:tabular-nums}
/* dashboardkaart groot bovenaan Home: voorop alleen de tegels */
.hdash{display:flex;flex-direction:column;gap:10px;padding:14px;margin:4px 0 20px;text-decoration:none;color:inherit}
.hdash .dtegel{box-shadow:0 0 0 1px var(--line)}
/* pagina als overlay: vult het scherm op een kleine rand na, wat eronder ligt vervaagt */
#ovl{position:fixed;inset:0;z-index:35}
.ovlbg{position:absolute;inset:0;background:rgba(15,15,15,.18);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.ovlbox{position:absolute;inset:max(12px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));overflow-y:auto;overscroll-behavior:contain;background:var(--bg);border-radius:12px;box-shadow:0 0 0 1px var(--line),0 16px 48px rgba(15,15,15,.22);padding:0 0 16px}
.ovlbar{position:sticky;top:0;z-index:3;display:flex;justify-content:flex-end;gap:4px;padding:6px;background:var(--bg)}
.ovlbox .page{padding-top:0;padding-bottom:16px;max-width:960px}
body.ovlopen{overflow:hidden}
.dcel[data-kleur=groen]{background:var(--okb);color:var(--okf)}
.dcel[data-kleur=rood]{background:var(--hoogb);color:var(--hoogf)}
.dcel[data-kleur=oranje]{background:var(--wachtb);color:var(--wachtf)}
.dcel[data-kleur=grijs]{background:var(--hover);color:var(--muted)}
/* gekleurde cellen: zelfde kleuren als de status op een kaart */
.md td[data-kleur=groen],.md th[data-kleur=groen]{background:var(--okb);color:var(--okf)}
.md td[data-kleur=oranje],.md th[data-kleur=oranje]{background:var(--wachtb);color:var(--wachtf)}
.md td[data-kleur=rood],.md th[data-kleur=rood]{background:var(--hoogb);color:var(--hoogf)}
.md td[data-kleur=grijs],.md th[data-kleur=grijs]{background:var(--hover);color:var(--muted)}
.tablewrap,.tscroll{overflow-x:auto;max-width:100%;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y}
.tablewrap.drag,.tscroll.drag{cursor:grabbing;user-select:none}
@media (max-width:720px){.tablewrap,.tscroll{max-width:none;margin-left:calc(-1 * max(24px,env(safe-area-inset-left,0px)));margin-right:calc(-1 * max(24px,env(safe-area-inset-right,0px)));padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.embed .tablewrap{margin-left:-16px;padding-left:16px}
.tcell{min-width:160px!important}}
.ph{color:var(--faint)}
.tapzone{min-height:120px;cursor:text}
.wl{text-decoration:none;border-bottom:1px solid var(--faint);font-weight:500}
.wl:hover{border-color:var(--ink)}
.wl.new{color:var(--muted);border-bottom-style:dashed}
.callout{display:block;background:var(--hover);border-radius:4px;padding:14px 16px}
.callout.ok{background:var(--t3b);color:var(--t3f)}
.callout p{margin:0}
.dims{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));border:1px solid var(--line);border-radius:4px;overflow:hidden}
.dim{padding:8px 12px;box-shadow:0 0 0 .5px var(--line);display:flex;flex-direction:column}
.dim span{font-size:12px;color:var(--muted)}
.dim b{font:600 15px var(--mono);font-variant-numeric:tabular-nums}
.att{max-width:100%;border-radius:4px;display:block}
.filechip{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:4px;background:var(--hover);text-decoration:none;font-size:14px;max-width:100%;overflow-wrap:anywhere}
.filechip .ftype{white-space:nowrap} /* zelfde soort-label als in Bestanden (.ftype) */
.files{display:flex;flex-direction:column;gap:4px;margin-top:16px}
/* Bijlagen als kaartregels, zoals de acties: één regel per bestand, lange namen afgekapt (Har, 11 nov 2026) */
.files .filechip{display:flex;gap:10px;padding:7px 10px;font-size:14px;overflow-wrap:normal;min-width:0;color:inherit}
.files .filechip .fnaam{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.files .filechip .bmulti,.files .filechip .block,.files .filechip .boff{flex:none}
.kids{display:flex;flex-direction:column;margin-top:8px}
.kid{display:flex;align-items:center;gap:6px;padding:3px 2px;text-decoration:none;border-radius:4px}
.kid span{border-bottom:1px solid var(--line);font-weight:500}
.kid:hover{background:var(--hover)}
.kid .i{color:var(--muted)}
.embed{border-left:2px solid var(--line);padding-left:14px}
.embed-title{font-weight:600;text-decoration:none}

/* ---------- bewerken ---------- */
.edwrap{display:flex;flex-direction:column}
.editor{width:100%;border:0;outline:none;resize:none;background:transparent;color:var(--ink);font:15px/1.6 var(--font);padding:0;min-height:200px}
.edbar{position:sticky;bottom:calc(var(--tabh) * 0 + 12px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:2px;align-self:flex-start;margin-top:14px;padding:4px;border-radius:8px;background:var(--bg);box-shadow:0 0 0 1px var(--line),0 4px 14px rgba(15,15,15,.1)}
.edbar button{width:36px;height:32px;display:grid;place-items:center;border-radius:5px;color:var(--muted)}
.edbar button:hover{background:var(--hover)}
.edbar .done{width:auto;padding:0 12px;color:var(--accent);font-weight:600}

/* ---------- databases ---------- */
.dbblock{display:flex;flex-direction:column;margin:6px 0 20px;min-width:0}
.vtabs{display:flex;align-items:center;gap:2px;border-bottom:1px solid var(--line);padding-bottom:6px;margin-bottom:2px;overflow-x:auto}
.vtab{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:5px;font-size:14px;color:var(--muted);text-decoration:none;white-space:nowrap}
.vtab:hover{background:var(--hover)}
.vtab.on{color:var(--ink);font-weight:500;box-shadow:inset 0 -2px 0 var(--ink);border-radius:5px 5px 0 0}
.vtab .i{width:15px;height:15px}
.vcount{font-size:13px;color:var(--faint);padding:0 8px}
.btn-blue{background:var(--accent);color:#fff;font-size:14px;font-weight:500;padding:4px 12px;border-radius:5px;line-height:22px}
.btn-blue.lg{padding:8px 14px}
.btn-gray{background:var(--hover);font-size:14px;padding:5px 12px;border-radius:5px;text-decoration:none}
.btn-red{background:var(--red);color:#fff;font-size:14px;padding:5px 12px;border-radius:5px}
.embedhead{display:flex;align-items:center;gap:8px;padding:2px 0 8px;border-bottom:1px solid var(--line);font-size:14px}
.embedhead a{display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.embedhead .i{width:16px;height:16px;color:var(--muted)}
.dbt{border-collapse:collapse;width:max-content;min-width:100%;font-size:14px}
.dbt th{font-weight:400;color:var(--muted);text-align:left;padding:6px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.dbt th .i{width:14px;height:14px;vertical-align:-2px;margin-right:6px}
.dbt td{padding:5px 8px;border-bottom:1px solid var(--line);vertical-align:middle;white-space:nowrap}
.dbt tr:hover td{background:var(--hover)}
.dbt td+td,.dbt th+th{border-left:1px solid var(--line)}
.cbcol{width:36px;text-align:center}
.dbt .cbcol+td{border-left:0}
.tcell{min-width:220px;white-space:normal!important}
.rowt{display:flex;align-items:center;gap:6px;text-decoration:none;font-weight:500}
.rowt .i{width:16px;height:16px;color:var(--muted)}
.rowt.done{color:var(--faint);text-decoration:line-through}
.addrow{display:flex;align-items:center;gap:6px;color:var(--faint);font-size:14px;padding:6px 8px;border-radius:4px;align-self:stretch}
.addrow:hover{background:var(--hover)}
.addrow .i{width:15px;height:15px}
.dbempty{color:var(--faint);font-size:14px;padding:12px 8px}
.dblist{display:flex;flex-direction:column}
.lrow{display:flex;align-items:center;gap:10px;padding:6px 8px;border-bottom:1px solid var(--line);font-size:14px;flex-wrap:wrap}
.lrow:hover{background:var(--hover)}
.lcell{color:var(--muted)}
.board{display:flex;gap:12px;overflow-x:auto;padding:8px 0}
.bcol{flex:0 0 250px;display:flex;flex-direction:column;gap:8px}
.bcol h3{display:flex;align-items:center;margin:0;font-size:14px;font-weight:400}
.bcard{display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:6px;background:var(--bg);box-shadow:0 0 0 1px var(--line),0 2px 4px rgba(15,15,15,.04);font-size:14px}
.bcard:hover{background:var(--hover)}
.bprops{display:flex;flex-wrap:wrap;gap:6px;color:var(--muted);font-size:13px}
.schema{display:flex;flex-direction:column;border-top:1px solid var(--line);margin-top:20px;padding-top:10px}
.srow{display:flex;align-items:center;gap:8px;padding:6px 4px;font-size:14px;flex-wrap:wrap}
.srow .i{width:15px;height:15px;color:var(--muted)}
.srow.add input,.srow.add select{font:inherit;font-size:14px;color:var(--ink);background:var(--hover);border:0;border-radius:5px;padding:6px 8px;flex:1 1 120px;min-width:0}
.sec{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--muted);margin:26px 0 8px}
.sec .i{width:15px;height:15px}
.recent{display:grid;grid-auto-flow:column;grid-auto-columns:150px;gap:12px;overflow-x:auto;padding:2px 2px 8px}
.rcard{display:flex;flex-direction:column;gap:6px;padding:14px;min-height:110px;text-decoration:none}
.rcard b{font-size:14px;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rcard span{font-size:12px;color:var(--muted);margin-top:auto}
.rcard .i{width:22px;height:22px;color:var(--muted)}
.elist{display:flex;flex-direction:column;overflow:hidden}
.erow{display:flex;align-items:center;gap:12px;padding:10px 14px;text-decoration:none;color:inherit;border-top:1px solid var(--line)}
.erow:first-child{border-top:0}
.erow:hover{background:var(--hover)}
.erow .i{width:20px;height:20px;color:var(--muted);flex:none}
.erow .et{display:flex;flex-direction:column;min-width:0;flex:1}
.erow .et b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.erow .et span,.erow time{font-size:12px;color:var(--muted)}
.erow .et span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.erow time{flex:none}
.prio{margin:-8px 0 36px}
.phead{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.peyebrow{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.plink{display:inline-flex;align-items:center;gap:2px;font-size:13px;color:var(--muted);text-decoration:none}
.plink:hover{color:var(--ink)}
.plink .i{width:14px;height:14px}
.dcard{position:relative;border-radius:8px}
.dcard a.mcard{text-decoration:none;color:inherit}
.dcard .mmain{padding-right:14px}
/* + en − rechtsonder in de voet, op een vaste plek */
.dpslot{flex:none;width:92px;height:28px;margin-left:auto}
.dprio{position:absolute;bottom:7px;right:9px;z-index:2;display:flex;gap:4px;opacity:0;transition:opacity .2s}
.dcard:hover .dprio,.dcard:focus-within .dprio{opacity:1}
@media (hover:none){.dprio{opacity:.75}}
.dpm{width:28px;height:28px;min-height:0;padding:0;display:grid;place-items:center;border-radius:99px;background:var(--bg);color:var(--muted);box-shadow:0 0 0 1px var(--line)}
.dpm:hover{color:var(--ink)}
.dpm.on{background:var(--press);color:var(--ink)}
.dpm[disabled]{opacity:.35;pointer-events:none}
.dpm .i{width:14px;height:14px}
/* gepauzeerd of al 14 dagen stil: grijs (Har, 2 nov 2026) */
.dcard.dgrijs > a.mcard{filter:grayscale(1);opacity:.55}
.dcard.dgrijs:hover > a.mcard{opacity:.8}
.dvink{position:absolute;top:50%;right:12px;transform:translateY(-50%);z-index:3;display:grid;place-items:center;color:var(--accent);pointer-events:none;animation:dvink 1.6s cubic-bezier(.3,.1,.2,1) both}
.dvink .i{width:28px;height:28px;stroke-width:1.8}
.vier .dprio{display:none}
@keyframes dvink{from{opacity:0;transform:translateY(-50%) scale(.5)}to{opacity:1;transform:translateY(-50%)}}
.dholdwrap{display:flex;justify-content:center;margin:48px 0 24px}
.dhold{position:relative;overflow:hidden;padding:14px 26px;border-radius:999px;font-size:15px;font-weight:600;color:var(--ink);box-shadow:0 0 0 1px var(--line);user-select:none;-webkit-user-select:none;touch-action:none;-webkit-touch-callout:none}
.dholdfill{position:absolute;inset:0;background:var(--accent-soft);transform:scaleX(0);transform-origin:left;transition:transform .3s ease-out}
.dhold.holding .dholdfill{transform:scaleX(1);transition:transform 1.8s linear}
.dhold.done .dholdfill{transform:scaleX(1);background:var(--accent)}
.dhold.done{color:#fff}
.dholdt{position:relative;display:inline-flex;align-items:center;gap:8px}
.dholdt .i{width:16px;height:16px}

/* ---------- zoeken, menu, melding ---------- */
#search{position:fixed;inset:0;z-index:50;background:rgba(15,15,15,.35);display:flex;justify-content:center;align-items:flex-start;padding:calc(10vh + env(safe-area-inset-top,0px)) 16px 16px}
.sbox{width:100%;max-width:620px;background:var(--bg);border-radius:12px;box-shadow:0 0 0 1px var(--line),0 16px 40px rgba(15,15,15,.25);overflow:hidden;display:flex;flex-direction:column;max-height:70vh}
.sinput{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);color:var(--muted)}
.sinput input{flex:1;border:0;outline:none;background:none;font:inherit;font-size:17px;color:var(--ink)}
#sres{overflow-y:auto;padding:6px}
#sres .sh{padding:8px 10px 4px}
.sitem{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border-radius:6px;text-decoration:none;width:100%;text-align:left}
.sitem:hover{background:var(--hover)}
.sitem .i{margin-top:2px;color:var(--muted)}
.sitem div{display:flex;flex-direction:column;min-width:0}
.sitem b{font-weight:500;font-size:15px}
.sitem span{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#menu{position:fixed;top:calc(48px + env(safe-area-inset-top,0px));right:max(12px,env(safe-area-inset-right,0px));z-index:40}
.mlist{display:flex;flex-direction:column;min-width:240px;padding:6px;background:var(--bg);border-radius:8px;box-shadow:0 0 0 1px var(--line),0 10px 30px rgba(15,15,15,.18);font-size:14px}
.mlist>button,.mlist>a,.mi{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:5px;text-decoration:none;text-align:left}
.mlist>button:hover,.mlist>a:hover,.mi:hover{background:var(--hover)}
.mlist .i{width:16px;height:16px;color:var(--muted)}
.mi{flex-wrap:wrap}
.mi select{flex:1 1 100%;font:inherit;font-size:13px;margin-left:26px;padding:4px;border-radius:4px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.msep{height:1px;background:var(--line);margin:4px 0}
.red,.red .i{color:var(--red)!important}
.mconfirm{padding:6px 8px;display:flex;flex-direction:column;gap:8px}
.mconfirm div{display:flex;gap:6px;justify-content:flex-end}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(24px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--bg);padding:9px 16px;border-radius:8px;font-size:14px;z-index:60;max-width:calc(100% - 32px)}
.banner{display:flex;align-items:center;gap:10px;margin:12px auto 0;max-width:720px;padding:10px 14px;border-radius:6px;background:var(--hover);font-size:14px}
.banner span{flex:1}

/* ---------- instellingen & login ---------- */
.settings{display:flex;flex-direction:column}
.srow2{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.srow2 p{margin:2px 0 0;color:var(--muted);font-size:13px}
.switch{position:relative;width:34px;height:20px;flex:none}
.switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.switch span{position:absolute;inset:0;border-radius:10px;background:var(--press);pointer-events:none;transition:background .15s}
.switch span::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .15s}
.switch input:checked+span{background:var(--accent)}
.switch input:checked+span::after{transform:translateX(14px)}
.form{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.form label,.kieslid label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
.form input{padding:9px 10px;border:1px solid var(--line);border-radius:6px;background:var(--side);color:var(--ink);font:inherit;font-size:15px}
.err{color:var(--red);font-size:13px}
body.nologin #side,body.nologin #top,body.nologin #tabs{display:none}
body.nologin .main{margin-left:0}
.graphwrap{height:min(68vh,640px);border-radius:8px;background:var(--side);overflow:hidden;margin-top:10px}
#graph{width:100%;height:100%;display:block;touch-action:none;cursor:grab}
.linkbtn{display:inline-flex;align-items:center;gap:6px;color:var(--faint);font-size:13px}

/* ---------- tabbalk (telefoon) ---------- */
#tabs{display:none}
@media (max-width:820px){
  #side{transform:translateX(-102%);transition:transform .2s ease;width:min(86vw,320px);box-shadow:0 0 30px rgba(0,0,0,.2);font-size:15px}
  body.drawer #side{transform:none}
  #scrim{position:fixed;inset:0;background:rgba(15,15,15,.3);z-index:25;display:none}
  body.drawer #scrim{display:block}
  body.drawerdrag #side{transition:none}
  body.drawerdrag #scrim{display:block;opacity:var(--dq,0)}
  .main{margin-left:0;padding-bottom:calc(var(--tabh) + env(safe-area-inset-bottom,0px))}
  .only-m{display:grid}
  .only-d{display:none!important}
  .tadd{opacity:1}
  .si,.ti{min-height:38px}
  .page{padding:20px max(18px,env(safe-area-inset-right,0px)) 80px max(18px,env(safe-area-inset-left,0px))}
  h1{font-size:30px}
  .page h1.ptitle{font-size:24px;line-height:1.25;margin-bottom:8px}
  .pname{flex-basis:132px}
  #tabs{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;isolation:isolate;overflow:hidden;background:var(--bg);border-top:1px solid var(--line);padding:4px max(8px,env(safe-area-inset-right,0px)) calc(4px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px))}
  .tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 0;font-size:11px;color:var(--faint)}
  .tab .i{width:22px;height:22px}
  .tab.on{color:var(--ink)}
  .edbar{bottom:calc(var(--tabh) + 10px + env(safe-area-inset-bottom,0px))}
  #search{padding-top:calc(12px + env(safe-area-inset-top,0px))}
  .sbox{max-height:80vh}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.syncstate .dot{flex:0 0 7px!important}
.rowfoot{display:flex;gap:4px}
.rowfoot .addrow{align-self:auto}
.tapzone{min-height:56px}
@media (max-width:820px){.tadd{opacity:0;pointer-events:none}}
@media (max-width:820px){
  .crumbs>*:not(:last-child){display:none}
  .crumbs>:last-child{font-weight:500}
}
/* v0.5: weergave-menu */
.mlist{max-height:min(70vh,560px);overflow-y:auto}
.mh{font-size:12px;font-weight:600;color:var(--faint);padding:8px 8px 4px}
.mlist .mback{font-weight:600;color:var(--ink)}
.mseg{display:flex;gap:4px;padding:0 4px 4px}
.mseg button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;border-radius:6px;font-size:12px;color:var(--muted)}
.mseg button:hover{background:var(--hover)}
.mseg button[aria-pressed="true"]{background:var(--press);color:var(--ink)}
.mi.chk{flex-wrap:nowrap;cursor:pointer}
.mi.chk input{width:16px;height:16px;accent-color:var(--accent);margin:0}
/* paginamenu › Rechten: per lid oog / potlood / tandwiel (ui.js › rechtenMenu) */
.mi.rrij{flex-wrap:nowrap;gap:2px}
.mi.rrij:hover{background:none}
.mi.rrij .grow{margin-right:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mlist .rrij .iconbtn.on .i{color:var(--accent)}
.rrij .iconbtn:disabled{cursor:default;background:none}
.mlist .rrij .iconbtn:disabled:not(.on) .i{color:var(--faint)}
.mlist .rrij .iconbtn.on:disabled .i{color:var(--muted)}
.mlist .rrij .iconbtn.on:disabled{background:var(--hover)}
.schema .srow .grow{flex:1}
.embed:has(> .dbblock){border-left:0;padding-left:0}
/* v0.6: update */
.si.upd{color:var(--accent);font-weight:500}
.updpill{background:var(--accent);color:#fff;font-size:12px;font-weight:600;padding:3px 10px;border-radius:12px;margin-right:4px}
.updcard{border:1px solid var(--accent);border-radius:8px;padding:14px 16px;margin:12px 0;display:flex;flex-direction:column;gap:6px}
.updcard ul{margin:4px 0 0;padding-left:18px;font-size:14px;display:flex;flex-direction:column;gap:2px}
.updcard .form{margin-top:8px}
/* patchnotes: elke update is een kaart (zelfde opbouw als een mailkaart) */
.pnotes{display:flex;flex-direction:column;gap:8px;margin:4px 0}
.settings > .pnotes{margin:28px 0 8px}
.pnotes .phead{margin-bottom:4px}
.pncard > summary{list-style:none;cursor:pointer}
.pncard > summary::-webkit-details-marker,.pntitle::-webkit-details-marker{display:none}
.pncard .mmain{padding-right:14px}
.pncard .mlabels .tag{flex:none}
.pndetail{padding:2px 14px 12px;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:0 32px;align-items:start}
.pnpending{margin:4px 0}
.pndetail > .pnsum{grid-column:1/-1;margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}
.pnsec{margin-top:10px}
.pnpending .pnsec{margin:6px 0}
.pnsecname{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px}
.pnitem{padding:5px 0;font-size:14px;line-height:1.45}
.pntitle{display:flex;align-items:center;gap:6px;cursor:pointer;list-style:none}
.pntxt{flex:1;min-width:0}
.pnchev{flex:none;width:12px;height:12px;opacity:.5;transition:transform .15s}
details[open] > summary .pnchev{transform:rotate(90deg)}
.pnitem p{margin:4px 0 2px;font-size:13px;line-height:1.5;color:var(--muted)}
.pnotes .btn-gray{align-self:flex-start}
/* v0.7: workspaces, leden, bestanden */
.wsbtn{display:flex;align-items:center;gap:8px;flex:1;min-width:0;min-height:30px;padding:0 6px;margin:0 -6px;border-radius:6px;color:var(--ink);font-weight:600;text-align:left}
.wsbtn:hover{background:var(--hover)}
.wsbtn .wsname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wsbtn .i{width:14px;height:14px;color:var(--muted);transform:rotate(90deg)}
#menu.left{right:auto;left:max(12px,env(safe-area-inset-left,0px));z-index:60}
.mlist [aria-current="true"]{color:var(--ink);font-weight:500}
.mlist .grow{flex:1}
/* meldingen: belletje rechtsboven met stipje (geen teller), lijst als zwevend menu (meldingen.js) */
.meldbel{position:relative}
.meldstip{position:absolute;top:7px;right:7px;width:8px;height:8px;border-radius:99px;background:var(--accent);box-shadow:0 0 0 2px var(--bg);pointer-events:none}
.mlist.meldlijst{width:min(360px,calc(100vw - 24px));max-height:min(72vh,560px);padding:0;overflow:hidden}
.meldkop{display:flex;align-items:center;gap:4px;padding:6px 6px 6px 12px;border-bottom:1px solid var(--line);flex:none}
.meldkop b{font-weight:600}
.meldkop .iconbtn:first-child{margin-left:-6px}
.meldscroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px}
.meldi{display:flex;align-items:stretch;width:100%;border-radius:5px}
.meldi:hover{background:var(--hover)}
.meldopen{display:flex;align-items:flex-start;gap:10px;flex:1;min-width:0;padding:8px;text-align:left}
.meldi .mlamp{flex:0 0 36px;border-radius:0 5px 5px 0}
.meldtxt{display:flex;flex-direction:column;flex:1;min-width:0}
.meldtxt b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meldtxt span{font-size:13px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-line}
.meldi.unread .meldtxt b{font-weight:700}
.meldwhen{flex:none;color:var(--muted);font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums}
.meldi.unread .meldwhen{color:var(--accent);font-weight:600}
.meldleeg{padding:24px 8px;text-align:center;color:var(--muted)}
.meldsoort{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 12px;border-bottom:1px solid var(--line);cursor:pointer}
.meldbar{display:flex;justify-content:flex-end;gap:8px;padding:8px}
.wscard{margin:18px 0 6px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.wscard>.srow2{border-bottom:0;padding-bottom:6px}
.members{display:flex;flex-direction:column}
.member{display:flex;align-items:center;gap:10px;min-height:40px;font-size:14px}
.member > .grow{min-width:0;overflow-wrap:anywhere}
.member.pick{width:100%;background:none;border:0;padding:0 8px;border-radius:6px;color:inherit;font:inherit;text-align:left;cursor:pointer}
.member.pick:hover{background:var(--hover)}
.member.pick .muted{min-width:0;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kieslid{margin:10px 0 4px}
.editbar{display:flex;align-items:center;gap:10px;min-height:30px;margin:-12px 0 6px}
.editbar .muted{display:inline-flex;align-items:center;gap:6px;margin-right:auto}
.editbar .muted .i{width:14px;height:14px}
.editbar span.iconbtn{cursor:default}
.editbar span.iconbtn:hover{background:none}
.member .grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.member select,.form select,.kieslid select{font:inherit;font-size:14px;padding:5px 6px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink)}
.mav{width:26px;height:26px;flex:none;border-radius:50%;background:var(--hover);display:grid;place-items:center;font-size:12px;font-weight:600;color:var(--muted)}
.addmember{margin:10px 0 8px}
.addmember summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:var(--accent);font-size:14px;font-weight:500;list-style:none;padding:4px 0}
.addmember summary::-webkit-details-marker{display:none}
.addmember summary .i{width:15px;height:15px}
.addmember .form{margin-top:10px}
.flist{display:flex;flex-direction:column;margin-top:18px}
.frow{display:flex;align-items:center;gap:12px;min-height:44px;border-bottom:1px solid var(--line)}
.fopen{display:flex;align-items:center;gap:10px;flex:1;min-width:0;text-decoration:none;padding:6px 0}
.ftype{flex:none;min-width:42px;text-align:center;font-size:10.5px;font-weight:700;letter-spacing:.03em;padding:3px 5px;border-radius:4px;background:var(--hover);color:var(--muted)}
.fname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}
.fpage{display:flex;align-items:center;gap:6px;max-width:40%;flex:none;font-size:13px;color:var(--muted);text-decoration:none}
.fpage span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fpage .i{width:14px;height:14px;flex:none}
body.ro .tadd,body.ro .addrow,body.ro [data-newpage],body.ro .sh [data-menu="new"]{display:none}
.i.spin{animation:spin 1.2s linear infinite;width:15px;height:15px;vertical-align:-2px}
.si.upd.busy .i{animation:spin 1.2s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.i.spin,.si.upd.busy .i{animation:none}}
/* v0.8: editor zoals Notion */
.edhost{min-height:28px}
.tt{outline:none;padding-bottom:4px}
.tt p.is-empty::before,.tt h1.is-empty::before,.tt h2.is-empty::before,.tt h3.is-empty::before{content:attr(data-placeholder);color:var(--faint);float:left;height:0;pointer-events:none}
.tt ul[data-type=taskList]{list-style:none;padding-left:0}
.tt ul[data-type=taskList] li{display:flex;gap:8px;align-items:flex-start}
.tt ul[data-type=taskList] li>label{flex:none;margin-top:4px;user-select:none}
.tt ul[data-type=taskList] li>label input{width:16px;height:16px;accent-color:var(--accent);margin:0;cursor:pointer}
.tt ul[data-type=taskList] li>div{flex:1;min-width:0}
.tt ul[data-type=taskList] li[data-checked=true]>div{color:var(--faint);text-decoration:line-through}
.tt ul[data-type=taskList] ul[data-type=taskList]{padding-left:4px}
.tt li>p{margin:0}
.tt mark{background:#fff3a8;color:inherit;border-radius:2px;padding:0 1px}
@media (prefers-color-scheme:dark){.tt mark{background:#5c5020}}
.tt a:not(.wl){color:inherit;text-decoration:underline;text-decoration-color:var(--faint);text-underline-offset:2px}
.tt table{table-layout:auto}
.tt td p,.tt th p{margin:0}
.tt .selectedCell{background:var(--accent-soft)}
.tt .tableWrapper{overflow-x:auto}
.tt .callout{display:flex;flex-direction:column;gap:6px}
.tt .ProseMirror-selectednode,.tt .dbnode.ProseMirror-selectednode,.tt .filenode.ProseMirror-selectednode{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.tt .dbnode{margin:6px 0}
.tt .filenode{margin:4px 0}
.tt .filenode img{max-width:100%}
.fspeler{display:flex;flex-direction:column;gap:4px;padding:8px 10px;border-radius:8px;background:var(--hover)}
.fspeler .fsnaam{display:flex;align-items:center;gap:6px;color:inherit;text-decoration:none;font-size:13px;min-width:0}
.fspeler .fsnaam span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fspeler .fsnaam .i{width:14px;height:14px;opacity:.6;flex:none}
.fspeler audio{width:100%;height:36px}
.fspeler video{width:100%;max-height:60vh;border-radius:6px}
.frow.vkuit{background:var(--hover);border-radius:6px}
.filechip.missing{opacity:.6}
.tt hr{margin:8px 0}
.tt .wl{cursor:pointer}
.tt h1,.tt h2,.tt h3{line-height:1.25}
.tapzone{min-height:80px}
/* keuzemenu bij / en [[ */
.sg{z-index:70;min-width:240px;max-width:min(320px,calc(100vw - 24px));max-height:min(46vh,340px);overflow-y:auto;padding:6px;background:var(--bg);border-radius:8px;box-shadow:0 0 0 1px var(--line),0 10px 30px rgba(15,15,15,.18);font-size:14px}
.sg-head{font-size:12px;font-weight:600;color:var(--faint);padding:8px 8px 4px}
.sg-item{display:flex;align-items:center;gap:10px;width:100%;padding:6px 8px;border-radius:5px;text-align:left}
.sg-item span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sg-item small{color:var(--faint);font-size:12px;max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sg-item .i{width:16px;height:16px;color:var(--muted);flex:none}
.sg-item.on,.sg-item:hover{background:var(--hover)}
.sg-empty{padding:8px;color:var(--muted)}
/* werkbalk tijdens bewerken (Har, 10 nov 2026): breed scherm plakt bovenaan de tekst, telefoon boven het toetsenbord */
.ttbar{position:sticky;top:calc(var(--ttop,0px) + 4px);z-index:15;display:flex;align-items:center;gap:1px;width:max-content;max-width:100%;margin:0 0 10px -4px;padding:3px;border-radius:8px;background:var(--bg);box-shadow:0 0 0 1px var(--line),0 4px 14px rgba(15,15,15,.1);overflow-x:auto;scrollbar-width:none}
.ttbar::-webkit-scrollbar{display:none}
.ttbar .iconbtn{color:var(--ink)}
.ttbar .iconbtn:disabled{color:var(--faint);background:none;cursor:default}
.ttbar .iconbtn.on{color:var(--accent);background:var(--accent-soft)}
.ttsep{flex:none;width:1px;height:18px;margin:0 4px;background:var(--line)}
.ttkeus{position:relative;flex:none;display:flex}
.ttblok{display:flex;align-items:center;gap:4px;height:30px;padding:0 6px 0 8px;border-radius:6px;font-size:13px;color:var(--ink);white-space:nowrap}
.ttblok:hover,.ttblok.on{background:var(--hover)}
.ttblok .i{width:12px;height:12px;color:var(--muted);transform:rotate(90deg)}
.ttpop{position:fixed;z-index:70;display:flex;flex-direction:column;min-width:120px;padding:6px;border-radius:12px;background:var(--bg);box-shadow:0 0 0 1px var(--line),0 8px 22px rgba(15,15,15,.12)}
.ttpop[hidden]{display:none}
.ttpop button{padding:6px 8px;border-radius:6px;text-align:left;font-size:13px;line-height:18px;color:var(--muted);white-space:nowrap}
.ttpop button:hover{background:var(--hover)}
.ttpop button.on{color:var(--ink);font-weight:500}
.tg-klein{font-size:13px}.tg-groot{font-size:24px;line-height:1.3}
@media (max-width:820px){
  .ttbar{position:fixed;left:0;right:0;bottom:var(--kbd,0px);top:auto;width:auto;max-width:none;margin:0;padding:4px max(8px,env(safe-area-inset-right,0px)) calc(4px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px));border-radius:0;box-shadow:0 -1px 0 var(--line);z-index:40;display:none}
  body.edfocus .ttbar{display:flex}
  .ttbar .iconbtn,.ttblok{height:38px}.ttbar .iconbtn{width:38px}
  /* de balk neemt de plek van de navigatiebalk in (lade en actieknop blijven erboven, zie .kchat.lade) */
  .ttbar{box-sizing:border-box;min-height:calc(var(--tabh) + env(safe-area-inset-bottom,0px))}
}
/* afdrukken / PDF */
@media print{
  #side,#top,#tabs,#menu,#toast,#search,#scrim,.editbar,.ttbar,.sg,.addrow,.tapzone,.vtabs .vcount,.banner{display:none!important}
  .main{margin:0!important;padding:0!important}
  .page{max-width:none!important;padding:0!important;margin:0!important}
  body{background:#fff;color:#000}
  .tt a{color:#000}
  .dbt{width:100%}
}
.tt ul[data-type=taskList] li>div>p{margin:0}
.tt ul[data-type=taskList] li>label{display:flex;align-items:center;height:1.6em;margin-top:0}
.tt ul[data-type=taskList] li>label span{display:none}
/* volledig scherm: foto's en pdf's */
.att,.filechip,.fopen{cursor:zoom-in}
#viewer{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;background:rgba(15,15,15,.94);color:#fff}
#viewer[hidden]{display:none}
body.viewing{overflow:hidden}
.vbar{display:flex;align-items:center;gap:4px;padding:calc(8px + env(safe-area-inset-top,0px)) max(10px,env(safe-area-inset-right,0px)) 8px max(10px,env(safe-area-inset-left,0px));flex:none}
.vname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:500;padding:0 6px}
.vbtn{min-width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 10px;border-radius:8px;color:#fff;font-size:15px;background:rgba(255,255,255,.08)}
.vbtn:hover{background:rgba(255,255,255,.18)}
.vbtn .i{width:17px;height:17px;color:#fff}
.vbtn.wide span{font-size:13px}
@media (max-width:520px){.vbtn.wide span{display:none}}
.vbody{flex:1;min-height:0;overflow:auto;display:flex;align-items:flex-start;justify-content:center;padding:12px 12px calc(16px + env(safe-area-inset-bottom,0px));-webkit-overflow-scrolling:touch}
.vbody:has(.vzwrap){padding:0;overflow:hidden}
.vzwrap{flex:1;align-self:stretch;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none;padding:12px 12px calc(16px + env(safe-area-inset-bottom,0px))}
.vimg{max-width:100%;max-height:100%;object-fit:contain;margin:auto;cursor:zoom-in;border-radius:2px;transform-origin:0 0;will-change:transform;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none}
.vimg.ingezoomd{cursor:grab;border-radius:0}
.vpages{display:flex;flex-direction:column;align-items:center;gap:12px;margin:0 auto}
.vpage{background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.4);max-width:none}
.vload{margin:auto;text-align:center;color:rgba(255,255,255,.75);font-size:14px;line-height:1.6;padding:24px;max-width:340px}

/* Als geïnstalleerde app in Edge/Chrome zonder titelbalk: Bolwerks eigen balk
   neemt de plek van de titelbalk in (naast de knoppen voor minimaliseren/sluiten). */
@media (display-mode: window-controls-overlay) {
  :root{--tbh:env(titlebar-area-height,33px)}
  #top{position:fixed;top:0;left:env(titlebar-area-x,0);width:env(titlebar-area-width,100%);height:var(--tbh);min-height:0;padding:0 8px;box-sizing:border-box;border-bottom:1px solid var(--line);-webkit-app-region:drag;app-region:drag}
  #top button,#top a,#top input,#top select{-webkit-app-region:no-drag;app-region:no-drag}
  #top .crumbs{font-size:13px}
  .main{padding-top:var(--tbh)}
  #side{top:var(--tbh)}
  #search{padding-top:calc(var(--tbh) + 12px)}
}

/* opgemaakte mail */
.mailview{margin:4px 0 16px;border-radius:8px;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.mailframe{display:block;width:100%;min-height:120px;border:0;background:#fff}
.mailtext{margin:8px 0 16px}
.mailtext summary{cursor:pointer;padding:4px 0}
.banner.gate{flex-wrap:wrap;max-width:none;margin:0 0 12px}
/* mail opstellen */
.banner.compose{flex-wrap:wrap;max-width:none;margin:0 0 12px;gap:8px 12px}
.banner.compose label{display:flex;align-items:center;gap:6px;font-weight:600}
.banner.compose select{font:inherit;padding:4px 6px;border-radius:5px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.mailacts{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.vtabs .btn-blue{margin-right:8px;display:inline-flex;align-items:center;gap:4px}

/* ---------- Mail: kaarten per gesprek (indeling van het Mailbord, kleuren van Bolwerk) ---------- */
.mbox{display:flex;flex-direction:column;gap:10px;margin:6px 0 20px;min-width:0;max-width:720px}
/* alleen de kaarten volgen de kaartbreedte; zoekbalk, tabs en filters niet */
.mbox .mfeed{width:100%;max-width:var(--kaartw,480px)}
.mbox.isboard{max-width:none}
.mtool{display:flex;gap:8px;align-items:center}
.msearch{flex:1;min-width:0;font:inherit;font-size:16px;color:var(--ink);background:var(--hover);border:1px solid transparent;border-radius:8px;padding:9px 12px}
.msearch:focus{outline:none;border-color:var(--accent);background:var(--bg)}
.mtool .btn-blue{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;padding:8px 12px}
.mtool .btn-blue .i{width:15px;height:15px}
.mseg{display:flex;gap:2px;background:var(--hover);border-radius:8px;padding:3px;overflow-x:auto;scrollbar-width:none;align-self:flex-start;max-width:100%}
.mseg::-webkit-scrollbar{display:none}
.mseg a{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:var(--muted);text-decoration:none;padding:5px 12px;border-radius:6px;white-space:nowrap}
.mseg a.on{background:var(--bg);color:var(--ink);box-shadow:0 0 0 1px var(--line),0 1px 2px rgba(15,15,15,.08)}
.segcount{min-width:18px;padding:0 5px;border-radius:99px;background:var(--accent);color:#fff;font-size:11px;line-height:18px;text-align:center;font-variant-numeric:tabular-nums}
.mfilters{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-height:24px}
.mfilters .ink{color:var(--ink);font-weight:600}
.btn-gray.sm,.btn-red.sm{font-size:13px;padding:3px 10px}
.projbar{flex-basis:100%;display:flex;gap:6px;align-items:center;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.projbar::-webkit-scrollbar{display:none}
.msort{flex-basis:100%;margin:8px 0 14px;display:flex;gap:6px;align-items:center}
.msort .mproj{display:inline-flex;align-items:center;gap:5px}
.msort .attn{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.msort .mproj.on .attn{background:#fff}
.projlabel{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--faint);margin-right:2px;flex:none}
.mproj{flex:none;font-size:13px;font-weight:500;color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:3px 11px}
.mproj:hover{background:var(--hover)}
.mproj.on{color:#fff;background:var(--accent);border-color:var(--accent)}
.mtagbtn{cursor:pointer}
.mempty{color:var(--muted);text-align:center;padding:32px 8px}

.mfeed{display:grid;gap:8px;grid-template-columns:minmax(0,1fr)}
.mcard{min-width:0;background:var(--bg);border-radius:8px;box-shadow:0 0 0 1px var(--line),0 2px 4px rgba(15,15,15,.04);transition:box-shadow .15s}
.mrow{display:flex;align-items:stretch;min-width:0}
.mmain{flex:1;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:3px;padding:11px 4px 11px 14px;cursor:pointer;border-radius:8px 0 0 8px;outline-offset:-2px}
.mmain:hover{background:var(--hover)}
.ml1,.mm1{display:flex;justify-content:space-between;align-items:baseline;gap:10px;min-width:0}
.mtitle{font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mcard.unread > .mrow .mtitle{font-weight:700}
.mcard:not(.unread) > .mrow .mtitle{font-weight:500}
.mwhen{flex:none;color:var(--muted);font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums}
.mcard.unread > .mrow .ml1 .mwhen{color:var(--accent);font-weight:600}
.mwho{display:flex;align-items:center;gap:6px;min-width:0;font-size:14px;color:var(--ink);overflow:hidden;white-space:nowrap}
.mwho .mname{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mwho > *:not(.mname){flex:none}
.mn{flex:none;font-size:12px;color:var(--muted);background:var(--hover);border-radius:99px;padding:0 6px;line-height:18px}
.mclip{flex:none;display:inline-flex;align-items:center;gap:2px;font-size:12px;color:var(--muted)}
.mclip .i{width:13px;height:13px}
.msent{flex:none;display:inline-flex;align-items:center;color:var(--accent)}
.msent .i{width:13px;height:13px}
.mdesc{color:var(--muted);font-size:14px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
/* borden (Vaste kosten, Bestellingen): bedrag, hoe vaak en wanneer als regel op de kaart; tegels met totalen boven de kolommen */
.mkost{display:block;font-size:13px;color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.mbtegels{margin:0 0 12px}
.mdesc.one{-webkit-line-clamp:1}
.mtags{display:flex;flex-wrap:wrap;align-items:center;gap:5px 8px;margin-top:3px}
.mtags:empty{display:none}
.mtags .mstat{margin-right:0}
/* knoppen altijd op dezelfde plek: onderaan rechts (ook het lampje en het kruisje) */
.mfoot{justify-content:flex-start;margin-top:4px}
/* vaste plek voor het bonnetje: leeg blijft hij even breed */
.mficons{margin-left:auto;display:inline-flex;align-items:center;gap:6px;flex:none}
.mbslot{flex:none;display:inline-flex;width:38px}
.mbslot .mbchip{width:100%;box-sizing:border-box;justify-content:center}
/* aantallen links uitgelijnd in hun eigen vak: het icoontje staat altijd op dezelfde plek, ook bij 3 cijfers */
.mslot{flex:none;display:inline-flex;justify-content:flex-start;width:40px}
.mactie{display:flex;align-items:flex-start;gap:5px;font-size:14px;font-weight:500;color:var(--ink);line-height:1.4}
.mactie .i{flex:none;width:14px;height:14px;margin-top:2px}
/* Acties onder elkaar, één regel per actie; te lang = tekst schuift van rechts naar links, pijltje blijft staan */
.macties{display:flex;flex-direction:column;gap:2px;min-width:0}
/* hooguit 3 acties in beeld: 3 × (14px × 1.4) + 2 × 2px gap = 62.8px; bij 15px (prio 1) 67px */
.macties.mlinks{max-height:63px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.macties.mlinks::-webkit-scrollbar{display:none}
.mlinks .mactie{cursor:pointer;border-radius:4px}
.mlinks .mactie:hover{background:var(--hover)}
/* wachtkaarten tussen de acties: zandloper i.p.v. pijltje, wanneer de follow-up komt in grijs */
.mwacht .mwtijd{color:var(--muted);font-weight:400}
.aholdwrap{display:flex;justify-content:center;margin:40px 0 24px}
.ahold{position:relative;overflow:hidden;width:48px;height:48px;border-radius:99px;display:grid;place-items:center;color:var(--ink);box-shadow:0 0 0 1px var(--line);user-select:none;-webkit-user-select:none;touch-action:none;-webkit-touch-callout:none}
.ahold .i{position:relative;width:18px;height:18px}
.ahold.holding .dholdfill{transform:scaleX(1);transition:transform 1s linear}
.ahold.done .dholdfill{transform:scaleX(1);background:var(--accent)}
.ahold.done{color:#fff}
.mact{flex:1;min-width:0;overflow:hidden;white-space:nowrap}
.mact > span{display:inline-block}
.mact.loop{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 14px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 14px),transparent)}
.mact.loop > span{animation:mschuif var(--md,8s) ease-in-out infinite}
@keyframes mschuif{0%,18%{transform:translateX(0)}82%,100%{transform:translateX(var(--mx,0))}}
@media (prefers-reduced-motion:reduce){.mact.loop > span{animation:none;display:inline}.mact.loop{-webkit-mask-image:none;mask-image:none;text-overflow:ellipsis}}
.mrow > .mlamp{place-items:end center;padding-bottom:12px}
.mside{justify-content:flex-end}
.mside .mlamp{flex:0 0 auto;min-height:36px;place-items:end center;padding-bottom:9px}
.mtags .tag{font-size:12px;line-height:20px}
.mchip{display:inline-flex;align-items:center;font-size:12px;line-height:18px;padding:0 8px;border-radius:99px;border:1px solid var(--line);color:var(--ink);cursor:pointer}
.mchip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.mlamp{flex:0 0 52px;display:grid;place-items:center;border-radius:0 8px 8px 0}
.mlamp:hover{background:var(--hover)}
.lamp{width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--faint);transition:background .15s,box-shadow .15s}
.lamp.on{background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.mcard.open{box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 22%,transparent),0 8px 22px rgba(15,15,15,.12);margin:4px 0 8px}
.mcard.open > .mrow{border-radius:8px 8px 0 0}
.mcard.open .mtitle{white-space:normal}
.mdetail{border-top:1px solid var(--line);display:grid}
.mmail{display:grid;gap:1px;padding:9px 52px 9px 14px;text-decoration:none;color:inherit;min-width:0}
.mmrow{position:relative}
.mmrow + .mmrow{border-top:1px solid var(--line)}
.mmrow > .mlamp{position:absolute;top:0;right:0;bottom:0;width:52px;border-radius:0}
.mmail:hover{background:var(--hover)}
.mmail b{font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mmail.unread b{font-weight:700}
.mmail .mdesc{font-size:13px}

.mkanban{display:flex;gap:12px;align-items:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 0 12px}
.mcol{flex:0 0 calc(var(--kaartwb,340px) + 16px);width:calc(var(--kaartwb,340px) + 16px);max-width:calc(100vw - 32px);scroll-snap-align:start;background:var(--side);border-radius:10px;padding:8px;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.mcol h3{display:flex;align-items:center;gap:8px;margin:2px 4px;font-size:13px;font-weight:500}
.coldot{width:7px;height:7px;border-radius:50%;background:var(--accent)}

/* geopende mail: afzender bovenaan in plaats van de eigenschappentabel */
.mhead{display:grid;gap:10px;margin:4px 0 4px}
.mfrom{display:flex;align-items:flex-start;gap:10px;min-width:0}
.mfrom > .grow{min-width:0}
.mfname{overflow-wrap:anywhere}
.mav{flex:none;width:34px;height:34px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-weight:600}
.mfrom .muted{overflow-wrap:anywhere}
.mfields{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;font-size:14px}
.mfield{display:inline-flex;align-items:center;gap:6px;min-width:0}
.mfield .empty-cell::before{content:"Leeg"}
@media (max-width:820px){
  .mtool .btn-blue span{display:none}
}
.swatches{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.swatch{width:26px;height:26px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.swatch.on{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--c)}
/* kaarten: onderwerp met threads en losse mails */
.mcard[draggable=true]{cursor:grab}
.mcard.dragging{opacity:.45}
.mcard.dropon{box-shadow:0 0 0 2px var(--accent),0 8px 22px rgba(15,15,15,.12)}
.mcol.dropon{background:var(--accent-soft);border-radius:8px}
.mkic{display:inline-block;vertical-align:-2px;color:var(--muted);margin-right:5px}
.mkic .i{width:14px;height:14px}
.mthread + .mthread{border-top:2px solid var(--line)}
.mthead{display:flex;align-items:center;gap:6px;padding:8px 14px 2px;font-size:12.5px;font-weight:600;color:var(--muted)}
.mthead .uitbtn{margin-left:auto}
.uitbtn{background:none;border:0;padding:0;font:inherit;font-size:12px;font-weight:400;color:var(--muted);text-decoration:underline;cursor:pointer}
.mdacts{display:flex;flex-wrap:wrap;gap:6px;padding:8px 14px;border-top:1px solid var(--line)}
.mdacts .btn-gray,.mfields .btn-gray{display:inline-flex;align-items:center;gap:4px;text-decoration:none}
.kmails{margin:20px 0}
.kmails .mcard{margin:0 0 10px}
#kpick,#mhand,#mvpick{position:fixed;inset:0;z-index:80;background:rgba(15,15,15,.3);display:grid;place-items:start center;padding:12vh 12px 12px}
.kpbox{width:100%;max-width:440px;background:var(--bg);border-radius:12px;box-shadow:0 16px 40px rgba(15,15,15,.25);padding:12px;display:grid;gap:10px;max-height:72vh}
.kphead{display:flex;align-items:center}
.kplist{display:grid;gap:2px;overflow-y:auto;min-height:0}
.kpitem{display:flex;align-items:center;gap:8px;padding:9px 8px;border-radius:6px;text-align:left;font:inherit;color:var(--ink);background:none;border:0;cursor:pointer}
.kpitem:hover{background:var(--hover)}
.kpitem.new{color:var(--accent);font-weight:600}

/* status op de kaart */
.mstat{display:inline-flex;align-items:center;gap:3px;margin-right:8px;padding:0 7px;border-radius:99px;font-size:12px;font-weight:600;line-height:19px;white-space:nowrap}
.mstat.st-new{background:var(--hover);color:var(--muted)}
.mstat.st-sent{background:#ede4fb;color:#5b3a99}
.mstat.st-go{background:#dcebfb;color:#1f5f9e}
.mstat.st-ok{background:#ddf1e3;color:#24703d}
.mstat.st-act{background:#fbe9d6;color:#94520f}
@media (prefers-color-scheme:dark){.mstat.st-sent{background:#3a2d55;color:#cdb8f2}.mstat.st-go{background:#1f3a55;color:#a9cdf2}.mstat.st-ok{background:#1f4029;color:#a6dcb5}.mstat.st-act{background:#4a3218;color:#f0c58f}}
.mstale{color:var(--accent);font-size:15px;line-height:0}
.mst{margin-left:6px;font-size:11px;font-weight:600;vertical-align:1px}
/* zoom op een bord (zoals het Mailbord) */
.zoombtn{flex:none;width:36px;height:36px;border-radius:8px;box-shadow:0 0 0 1px var(--line)}
.zoombtn .i{width:17px;height:17px}
.mkanban.zoomout,.board.zoomout{gap:6px}
.mkanban.zoomout .mcol{flex-basis:132px;width:132px;padding:6px;gap:4px;border-radius:9px}
.mkanban.zoomout .mcol h3{font-size:11px;margin:1px 3px;gap:5px}
.mkanban.zoomout .mcol h3 .tag{font-size:10.5px;padding:0 6px}
.mcard.mini{border-radius:7px}
.minimain{all:unset;box-sizing:border-box;display:grid;gap:3px;width:100%;padding:5px 7px 6px;cursor:pointer;border-radius:7px}
.minimain:hover{background:var(--hover)}
.minimain:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.miniline{display:flex;align-items:flex-start;gap:5px;font-size:12px;line-height:1.25;min-width:0}
.miniline .mtitle{white-space:normal;overflow:visible;overflow-wrap:anywhere;font-weight:500}
.mcard.mini.unread .mtitle{font-weight:700}
.minidot{flex:0 0 6px;height:6px;margin-top:4px;border-radius:50%;box-shadow:inset 0 0 0 1.2px var(--faint)}
.minidot.on{background:var(--accent);box-shadow:0 0 5px var(--accent-soft)}
.minimeta{display:flex;flex-wrap:wrap;align-items:center;gap:3px 5px;padding-left:11px}
.minimeta .mwhen{font-size:10px}
.minimeta .mstat{font-size:9.5px;line-height:15px;padding:0 6px;margin:0}
.minimeta .mst{font-size:9.5px;margin:0;padding:0 5px}
.mkanban{scroll-padding-inline:0}
.board{scroll-snap-type:x proximity}
.bcol{scroll-snap-align:start}
.board.zoomout .bcol{flex-basis:132px;gap:4px}
.board.zoomout .bcol h3{font-size:12px}
.board.zoomout .bcard{padding:5px 7px;font-size:12px;gap:2px}
.board.zoomout .bprops{display:none}
.board.zoomout .rowt span{white-space:normal;overflow-wrap:anywhere}
/* mails binnen een kaart: kleinere kaartjes met dezelfde opbouw */
.msubs{display:grid;gap:6px;padding:8px 8px 4px}
.msubs.flat{padding:0}
.mcard.sub{box-shadow:var(--kaartsch);font-size:14px}
.mcard.sub .mmain{padding-top:8px;padding-bottom:8px}
.mcard.sub.open{margin:2px 0 4px}
.mside{flex:0 0 46px;display:flex;flex-direction:column;align-items:stretch}
.mside .mlamp{flex:1 1 auto;min-height:36px;border-radius:0 8px 8px 0}
.mside .uitx + .mlamp{border-radius:0 0 8px 0}
.uitx{align-self:center;width:24px;height:24px;margin-top:5px;display:grid;place-items:center;border-radius:99px;color:var(--faint)}
.uitx:hover{background:var(--hover);color:var(--ink)}
.uitx .i{width:12px;height:12px}
.mmail{gap:2px}
.mmail .mtitle{font-weight:500;font-size:13.5px}
.mmail.unread .mtitle{font-weight:700}
.mmail .mwho{font-size:13px}
.mwho .mst{margin:0}
.mmail .mdesc{-webkit-line-clamp:1}
/* Moneybird-bonnetje */
.mbbtn{display:inline-flex;align-items:center;gap:1px;height:24px;padding:0 6px;border-radius:99px;font-size:12px;font-weight:700;line-height:1;cursor:pointer;background:var(--hover);color:var(--muted);border:0}
.mbbtn .i{width:14px;height:14px}
.mbbtn .mbt{display:inline-flex;align-items:center}
.mbbtn .mbt .i{width:12px;height:12px}
.mbbtn.mb-ask,.mbbtn.mb-todo{background:#fbe9d6;color:#94520f}
.mbbtn.mb-done{background:#ddf1e3;color:#24703d}
.mbbtn.mb-fout{background:#fbdcdc;color:#a32c2c}
.mbbtn.mb-never{background:transparent;color:var(--faint)}
@media (prefers-color-scheme:dark){.mbbtn.mb-ask,.mbbtn.mb-todo{background:#4a3218;color:#f0c58f}.mbbtn.mb-done{background:#1f4029;color:#a6dcb5}.mbbtn.mb-fout{background:#4a1f1f;color:#f0a8a8}}
.mmrow > .mbbtn{position:absolute;right:58px;bottom:9px}
.mbmenu{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 14px 10px;background:var(--hover);border-top:1px solid var(--line)}
.mbmenu .btn-blue.sm,.mbmenu .btn-gray.sm{display:inline-flex;align-items:center;gap:4px}
.mbmenu .i{width:13px;height:13px}
.mbq{font-weight:600;font-size:13px;margin-right:4px}
.mbchip{display:inline-flex;align-items:center;gap:0;padding:1px 6px;border-radius:99px;background:#fbe9d6;color:#94520f;font-size:11px;font-weight:700;flex:none}
.mbchip.ok{background:#ddf1e3;color:#24703d}
.mbchip .i{width:12px;height:12px}
.mbchip[data-mbchip]{cursor:pointer;position:relative}
.mbchip[data-mbchip]::after{content:"";position:absolute;inset:-8px -4px}
.mmrow.mbhit{animation:mbhit 1.6s ease-out .25s backwards;border-radius:8px}
.mmrow.mbhit .mbbtn{animation:mbhit 1.6s ease-out .25s backwards}
@keyframes mbhit{from{background:#fbe9d6;box-shadow:0 0 0 3px #fbe9d6}to{background:transparent;box-shadow:0 0 0 3px transparent}}
@media (prefers-color-scheme:dark){.mbchip{background:#4a3218;color:#f0c58f}.mbchip.ok{background:#1f4029;color:#a6dcb5}@keyframes mbhit{from{background:#4a3218;box-shadow:0 0 0 3px #4a3218}to{background:transparent;box-shadow:0 0 0 3px transparent}}}
.mhead .mbmenu{border-radius:8px;border:0;margin-top:6px}
.btn-blue.sm{font-size:13px;padding:3px 10px;line-height:20px}
/* uitleg: i-icoontje met bubbeltje */
.infob{display:inline-grid;place-items:center;width:18px;height:18px;margin:0 6px 0 0;padding:0;border:0;background:none;color:var(--faint);vertical-align:-3px;border-radius:99px;cursor:pointer;flex:none}
.infob:hover,.infob:focus-visible{color:var(--accent);background:var(--hover)}
.infob .i{width:15px;height:15px}
#infopop{position:fixed;z-index:90;max-width:min(300px,calc(100vw - 16px));padding:9px 12px;border-radius:10px;background:var(--ink);color:var(--bg);font-size:13px;line-height:1.45;box-shadow:0 10px 30px rgba(15,15,15,.25)}
#infopop::before{content:"";position:absolute;left:calc(var(--ax) - 6px);width:12px;height:12px;background:inherit;transform:rotate(45deg);border-radius:2px}
#infopop.below::before{top:-5px}
#infopop.above::before{bottom:-5px}
.form label > .infob{margin-right:4px}
/* info-icoon links van het label, op dezelfde regel (STIJL › Karakter); het veld eronder over de hele breedte */
.form label:has(> .infob){display:grid;grid-template-columns:auto 1fr;align-items:center;row-gap:4px}
.form label:has(> .infob) > :not(.infob){grid-column:1/-1}
.srow2 > div > b:not(:has(.infob))::before{content:"";display:inline-block;width:24px}

/* Lampje (gelezen/ongelezen) als klein knopje onderaan rechts, in lijn met de aantallen.
   De hele kaart licht op bij hover; het knopje zelf licht alleen het lampje op. */
.mrow{position:relative}
.mcard > .mrow{border-radius:8px}
.mcard.open > .mrow{border-radius:8px 8px 0 0}
.mmain{padding-right:46px}
.mmain:hover{background:none}
.mrow:hover{background:var(--hover)}
.mcard.open > .mrow:hover{background:var(--hover)}
.mrow > .mlamp,.mside .mlamp{position:absolute;right:9px;bottom:7px;width:28px;height:28px;min-height:0;padding:0;flex:none;display:grid;place-items:center;border-radius:99px}
.mcard.sub .mside .mlamp{bottom:4px}
.mcard.sub .mmain{padding-right:4px}
.mlamp:hover{background:none}
.mlamp:hover .lamp{box-shadow:inset 0 0 0 1.5px var(--ink)}
.mlamp:hover .lamp.on{box-shadow:0 0 0 6px var(--accent-soft)}
.mmrow:hover{background:var(--hover)}
.mmail:hover{background:none}
.mmrow > .mlamp{top:50%;bottom:auto;right:12px;width:28px;height:28px;transform:translateY(-50%);border-radius:99px}

.kwrange{width:180px;accent-color:var(--accent)}

/* navigatiebalk verborgen (desktop) */
@media (min-width:821px){
  body.noside #side{display:none}
  body.noside .main{margin-left:0}
}

/* hoofdonderdelen bovenin: hier kun je pagina's en databases heen slepen */
.snav{display:flex;flex-direction:column;gap:1px;min-height:6px;border-radius:6px}
/* zijbalk scrollt: onderdelen nooit laten inkrimpen (anders schuiven Mail/Contacten over de pagina's) */
#side>*{flex-shrink:0}
#side .dropon{background:var(--accent-soft);border-radius:6px}
#side .dragging{opacity:.5}

/* navigatiekolom breder/smaller slepen (desktop) */
#sgrip{position:fixed;top:0;bottom:0;left:calc(var(--sw) - 3px);width:7px;cursor:col-resize;z-index:31;touch-action:none}
#sgrip::after{content:"";position:absolute;top:0;bottom:0;left:3px;width:1px;background:transparent;transition:background .15s}
#sgrip:hover::after,body.sdragging #sgrip::after{background:var(--accent)}
body.sdragging{cursor:col-resize;user-select:none}
body.sdragging #side,body.sdragging .main{transition:none}
body.sgone #side{opacity:.35}
@media (max-width:820px){#sgrip{display:none}}
@media (min-width:821px){body.noside #sgrip{display:none}}
#side .ti.dropon,#side .snav .si.dropon{background:none;border-radius:0;box-shadow:inset 0 2px 0 var(--accent)}
#side .ti.dropin{background:var(--accent-soft);border-radius:6px;box-shadow:none}
.rgbset{display:grid;gap:4px}
.rgbl{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.rgbl span{width:10px}
.rgbprev{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px;vertical-align:-1px;box-shadow:0 0 0 1px var(--line)}
/* Mail: pagina links uitgelijnd en altijd zo breed als het venster */
.page.wide.full{max-width:none;margin:0}
.page.wide.full .mbox{max-width:none}
/* bord: zichtbare schuifbalk en met de muis opzij te slepen */
.mkanban{scrollbar-width:thin;cursor:grab}
.mkanban.panning{cursor:grabbing;scroll-snap-type:none;user-select:none}
.mkanban .mcard{cursor:auto}
.mseg a.dropon{box-shadow:inset 2px 0 0 var(--accent)}
.mseg a.dragging{opacity:.5}
/* alle pagina's: links uitgelijnd en zo breed als het venster (inloggen blijft smal in het midden) */
.page,.page.wide{max-width:none;margin:0}
.page.narrow{max-width:400px;margin:0 auto}
.banner{margin-left:0;margin-right:0;max-width:none}
/* labels op één regel; past het niet, dan afgekapt met een zachte rand en opzij te scrollen of slepen */
.mfoot{flex-wrap:nowrap}
.mlabels{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:5px 8px;overflow-x:auto;scrollbar-width:none;white-space:nowrap;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 18px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 18px),transparent);padding-right:12px}
.mlabels::-webkit-scrollbar{display:none}
.mlabels > *{flex:none}
.mlabels.panning{cursor:grabbing;user-select:none}
.mficons{margin-left:8px}
/* zwevend menu bij "Nieuwe afzender" */
.gatetag{cursor:pointer}
.gatetag:hover{filter:brightness(1.12)}
.gatepop{position:fixed;z-index:80;display:grid;gap:6px;padding:8px;background:var(--bg);border-radius:8px;box-shadow:0 0 0 1px var(--line),0 10px 30px rgba(15,15,15,.25);max-width:min(420px,calc(100vw - 16px))}
.gprow{display:flex;align-items:center;gap:6px}
.gpwho{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;margin-right:4px}
.gatepop .btn-blue.sm,.gatepop .btn-gray.sm{display:inline-flex;align-items:center;gap:4px;flex:none}
.gatepop .i{width:13px;height:13px}
/* toast met "Ongedaan maken" */
.toast{display:flex;align-items:center;gap:12px;width:max-content}
.undobtn{font-weight:600;color:var(--accent);padding:2px 4px;border-radius:4px;white-space:nowrap}
.undobtn:hover{background:rgba(255,255,255,.12)}
.undobtn.iconbtn{width:28px;height:28px;padding:0;margin-left:4px}
/* afmelden bij nieuwsbrieven */
.unsubbtn{display:inline-flex;align-items:center;gap:4px}
.unsubbtn .i,.unsubdone .i{width:13px;height:13px}
.unsubdone{display:inline-flex;align-items:center;gap:4px}
.mmrow .unsubbtn,.mmrow .unsubdone{position:absolute;right:48px;top:50%;transform:translateY(-50%)}
.mailacts{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.maildel{display:inline-flex;align-items:center;gap:4px}
.maildel .i{width:14px;height:14px}
/* mailkaarten overal even breed: ook op een kaartpagina en een contact */
.kmails{max-width:var(--kaartw,480px)}

/* bestanden (één bestand, meerdere pagina's) */
.iconbtn.on{color:var(--accent);background:var(--hover)}
.sh [data-onlyfiles]{margin-left:auto}
.sdbh{width:100%;justify-content:flex-start;gap:4px;margin-top:8px}.sdbh:hover{color:var(--muted)}.sdbh .i{width:12px;height:12px;stroke-width:1.8;transition:transform .12s}
.bmulti{display:inline-flex;align-items:center;gap:2px;margin-left:4px;padding:1px 6px 1px 4px;border-radius:9px;background:var(--bg);border:1px solid var(--line);font-size:11px;font-weight:600;color:var(--muted);cursor:pointer}
.bmulti .i{width:11px;height:11px}
.filechip .bmulti{font-size:11px}
.bimg{position:relative;display:block}
.bimg .bmulti{position:absolute;top:8px;left:8px;margin:0}
.tl.tfile{font-size:13px;color:var(--muted);cursor:zoom-in}
.tl.tfile .i{width:14px;height:14px}
.fonly{display:flex;align-items:center;gap:8px;margin:4px 0 6px;color:var(--muted);font-size:14px}
.fonly .i{width:15px;height:15px}
.fonly button{margin-left:auto}
.fadd{display:inline-flex;align-items:center;gap:6px;margin-top:12px}
.fadd .i{width:13px;height:13px}
h2.sub{font-size:17px;margin:28px 0 0}
#binfo,#vkinfo{position:fixed;inset:0;z-index:110;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.35)}
#binfo[hidden],#vkinfo[hidden]{display:none}
.bisheet{width:100%;max-width:520px;max-height:88vh;overflow:auto;background:var(--bg);color:var(--ink);border-radius:12px 12px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));box-shadow:0 -8px 30px rgba(0,0,0,.18)}
@media (min-width:700px){#binfo,#vkinfo{align-items:center}.bisheet{border-radius:12px}}
.bihead{display:flex;align-items:center;gap:10px}
.bihead h2{flex:1;min-width:0;font-size:17px;margin:0;overflow-wrap:anywhere}
.bisheet .banner{margin:12px 0 0;max-width:none}
.bisec{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.birow{display:flex;justify-content:space-between;gap:12px;padding:3px 0;font-size:14px}
.birow span{color:var(--muted)}
.birow b{font-weight:500;text-align:right}
.bih{font-size:12px;font-weight:600;color:var(--faint);margin-bottom:4px}
.biplace{display:flex;align-items:center;gap:6px}
.biplace a{flex:1;min-width:0;display:flex;align-items:center;gap:6px;padding:6px 2px;text-decoration:none;color:inherit}
.biplace a span:first-of-type{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.biplace .i{width:15px;height:15px;color:var(--muted)}
.bilink{display:flex;align-items:center;gap:6px;margin-top:6px;color:var(--muted)}
.bilink .i{width:14px;height:14px}
.bilink select,.fmove{font:inherit;font-size:13px;padding:4px 6px;border-radius:5px;border:1px solid var(--line);background:var(--bg);color:var(--ink);max-width:100%}
.biacts{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.biacts button{display:inline-flex;align-items:center;gap:6px}
.biacts .i{width:13px;height:13px}
#upbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(72px + env(safe-area-inset-bottom,0px));z-index:120;width:min(460px,calc(100vw - 32px));background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.14);padding:10px 12px}
#upbar[hidden]{display:none}
@media (min-width:700px){#upbar{bottom:20px}}
.uptxt{display:flex;align-items:center;gap:10px;font-size:13px}
.upname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.uppct{color:var(--muted);white-space:nowrap}
.uptrack{height:4px;border-radius:2px;background:var(--hover);margin-top:8px;overflow:hidden}
.upfill{height:100%;background:var(--accent);transition:width .2s}

/* ===== pagina als blok: kaart, thumbnail, regel ===== */
.pblock{position:relative;box-sizing:border-box}
.pblock a,.tt .pblock a{color:inherit;text-decoration:none}
/* kaarten en thumbnails die achter elkaar staan, komen naast elkaar: de tekst wordt dan een rij die afbreekt, de rest blijft volle breedte */
.md:has(>.pblock.w-kaart,>.pblock.w-thumbnail){flex-flow:row wrap;align-items:flex-start;column-gap:8px}
.md:has(>.pblock.w-kaart,>.pblock.w-thumbnail)>*{flex:1 1 100%;min-width:0}
.md>.pblock.w-kaart{flex:0 0 calc(50% - 4px);margin:0}
.md>.pblock.w-thumbnail{flex:0 0 150px;margin:0}
.pblock.w-regel{margin:0}
@media (max-width:600px){.md>.pblock.w-kaart{flex-basis:100%}.md>.pblock.w-thumbnail{flex-basis:calc(50% - 4px)}}
.pbcard{display:block}
.pbcard .mmain{border-radius:8px;padding-right:14px}
.pbcard .mficons .mclip{width:auto}
.pbrow{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:6px;min-width:0}
.pbrow:hover{background:var(--hover)}
.pbrow .i,.pbrow .emoji{flex:none;color:var(--muted)}
.pbrow .pbt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.pbthumb{display:flex;flex-direction:column;gap:6px;border-radius:8px}
.pbimg{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:var(--side);box-shadow:0 0 0 1px var(--line)}
.pbimg img{width:100%;height:100%;object-fit:cover;display:block}
.pbic{font-size:36px;color:var(--faint);line-height:1}
.pbic .i{width:34px;height:34px}
.pbthumb:hover .pbimg{box-shadow:0 0 0 1px var(--line),0 4px 12px rgba(15,15,15,.1)}
.pbthumb .pbt{font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 2px}
.pbmiss{display:inline-flex;align-items:center;gap:6px;color:var(--faint)}
.pbw{position:absolute;top:6px;right:6px;display:flex;align-items:center;justify-content:center;width:26px;height:24px;border:0;border-radius:5px;background:var(--bg);color:var(--muted);box-shadow:0 0 0 1px var(--line);opacity:0;cursor:pointer;transition:opacity .12s}
.pblock:hover .pbw,.pblock:focus-within .pbw,.ProseMirror-selectednode .pbw{opacity:1}
@media (hover:none){.pbw{opacity:1}}
.pblock.w-regel .pbw{top:3px}
.pblock.w-kaart .mwhen{margin-right:26px}
.pblock.w-regel .mwhen{margin-right:30px}
.ProseMirror-selectednode.pblock{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
.pbmenu{position:fixed;z-index:60;display:grid;min-width:160px;padding:4px;background:var(--bg);border-radius:8px;box-shadow:0 0 0 1px var(--line),0 8px 24px rgba(15,15,15,.16)}
.pbmenu button{display:flex;align-items:center;gap:8px;padding:7px 10px;border:0;border-radius:5px;background:none;color:var(--ink);font:inherit;font-size:14px;text-align:left;cursor:pointer}
.pbmenu button:hover{background:var(--hover)}
.pbmenu button.on{color:var(--accent);font-weight:600}
.btn-gray.sm.icon{display:inline-flex;align-items:center;justify-content:center;padding:3px 7px;margin-left:6px}
.btn-gray.sm.icon .i{width:14px;height:14px}
.mrow>.mmain:last-child{padding-right:14px;border-radius:8px}

/* versies, vergrendelen, activiteit (bestanden stap 2) */
.block{display:inline-flex;margin-left:4px;color:var(--muted)}.block .i{width:11px;height:11px}
.bimg .block{position:absolute;top:8px;right:8px;margin:0;padding:3px;border-radius:9px;background:var(--bg);border:1px solid var(--line)}
.bisec details>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--faint)}
.bisec details>summary::-webkit-details-marker{display:none}
.bisec details>summary .i{width:12px;height:12px}
.biver{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:13px;border-bottom:1px solid var(--line)}
.biver:last-child{border-bottom:0}
.biver .vnr{font-weight:600;min-width:34px}
.biver .vmeta{flex:1;min-width:0;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.biver .iconbtn .i{width:13px;height:13px}
.biver .iconbtn[aria-pressed="true"]{color:var(--accent,#d9a400)}
.biver .iconbtn[aria-pressed="true"] .i{fill:currentColor}
.biact{font-size:13px;padding:3px 0;color:var(--muted)}.biact b{font-weight:500;color:var(--ink)}
.biask{margin-top:12px;padding:10px;border:1px solid var(--line);border-radius:8px;font-size:14px}
.biask .biacts{margin-top:8px}
/* mailverwerker (eigen AI) bezig met deze mail */
.aibusy{display:inline-flex;align-items:center;gap:4px;flex:none;margin-left:-4px;padding:1px 6px 1px 4px;border-radius:99px;font-size:10px;font-weight:600;letter-spacing:.04em;color:var(--muted);background:var(--press);vertical-align:1px}
.airing{width:9px;height:9px;border-radius:50%;border:1.5px solid currentColor;border-right-color:transparent;animation:spin 1s linear infinite}
@media (prefers-reduced-motion:reduce){.airing{animation:none}}
.ml1:has(.aibusy),.mm1:has(.aibusy){justify-content:flex-start}.aibusy~.mwhen{margin-left:auto}
/* chat met de eigen AI: zwevend bolletje + overlay in de stijl van een geopende kaart */
.chatbub{position:fixed;right:20px;bottom:20px;z-index:60;width:52px;height:52px;border-radius:50%;border:0;background:var(--accent);color:#fff;display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.18),0 1px 3px rgba(0,0,0,.12);cursor:pointer}
.chatbub svg{width:24px;height:24px;fill:currentColor}
.chatbub:active{transform:scale(.96)}
.chatdot{position:absolute;top:3px;right:3px;width:12px;height:12px;border-radius:50%;background:var(--red);border:2px solid var(--bg)}
.chatbox{position:fixed;right:20px;bottom:20px;z-index:61;width:380px;height:clamp(360px,50vh,560px);display:flex;flex-direction:column;background:var(--bg);border-radius:8px;box-shadow:0 0 0 1px var(--accent),0 8px 22px rgba(15,15,15,.12),0 16px 40px rgba(15,15,15,.10);overflow:hidden;transform-origin:100% 100%}
.chatbox[hidden],.chatbub[hidden]{display:none}
body.nologin .chatbub,body.nologin .chatbox{display:none}
.chathead{display:flex;align-items:center;gap:6px;padding:8px 6px 8px 14px;background:var(--accent-soft);min-width:0;flex:none}
.chathead b{font-weight:600}
.chatsub{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.chathead .grow{flex:1}
.chatbtn{width:30px;height:30px;border:0;border-radius:6px;background:none;color:var(--muted);display:grid;place-items:center;cursor:pointer;flex:none}
.chatbtn:hover{background:var(--hover);color:var(--ink)}
.chatbtn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chatlog{flex:1;overflow-y:auto;padding:12px 10px;display:flex;flex-direction:column;gap:6px;background:var(--bg)}
.chatleeg{margin:auto;text-align:center;color:var(--muted);font-size:13px;line-height:1.5;padding:20px}
.chatleeg.err{margin:4px auto;color:var(--red)}
.chatmsg{display:flex;flex-direction:column;max-width:86%}
.chatmsg.ik{align-self:flex-end;align-items:flex-end}
.chatmsg.ai{align-self:flex-start}
.chatbel{position:relative;padding:7px 10px 16px;border-radius:8px;font-size:14px;line-height:1.45;word-wrap:break-word;overflow-wrap:anywhere;min-width:64px}
.chatmsg.ik .chatbel{background:var(--accent-soft);border-bottom-right-radius:3px}
.chatmsg.ai .chatbel{background:var(--bg);box-shadow:0 0 0 1px var(--line),0 2px 4px rgba(15,15,15,.04);border-bottom-left-radius:3px}
.chatmsg.fout .chatbel{color:var(--red)}
.chatbel p{margin:0}.chatbel p+p,.chatbel pre+p,.chatbel p+pre{margin-top:6px}
.chatbel a{color:var(--accent)}
.chatcode{margin:6px 0 0;padding:8px;border-radius:6px;background:var(--hover);font:12.5px/1.45 var(--mono);white-space:pre-wrap;cursor:copy}
.chattijd{position:absolute;right:8px;bottom:3px;font-size:10px;color:var(--faint)}
.chatacties{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.chatacties span{font-size:11px;color:var(--muted);background:var(--hover);border-radius:99px;padding:1px 7px}
.chattypt{display:flex;gap:4px;padding:11px 12px;min-width:0}
.chattypt span{width:6px;height:6px;border-radius:50%;background:var(--faint);animation:chatdot 1.2s infinite ease-in-out}
.chattypt span:nth-child(2){animation-delay:.15s}.chattypt span:nth-child(3){animation-delay:.3s}
@keyframes chatdot{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.chatform{display:flex;align-items:flex-end;gap:6px;padding:8px;border-top:1px solid var(--line);background:var(--bg);flex:none}
.chatform textarea{flex:1;resize:none;border:0;border-radius:8px;box-shadow:0 0 0 1px var(--line);padding:8px 10px;font:inherit;font-size:16px;line-height:1.35;background:var(--bg);color:var(--ink);max-height:120px;outline:none}
.chatform textarea:focus{box-shadow:0 0 0 1px var(--accent)}
.chatsend{width:36px;height:36px;flex:none;border:0;border-radius:8px;background:var(--accent);color:#fff;display:grid;place-items:center;cursor:pointer}
.chatsend svg{width:17px;height:17px;fill:currentColor}
@media (max-width:820px){
  .chatbub{right:14px;bottom:calc(var(--tabh) + env(safe-area-inset-bottom) + 14px)}
  .chatbox{left:12px;right:12px;width:auto;bottom:calc(var(--tabh) + env(safe-area-inset-bottom) + 10px);height:clamp(320px,50dvh,520px)}
}
@media (prefers-reduced-motion:reduce){.chattypt span{animation:none}}
/* Aandacht vereist: waar de mailverwerker op vastloopt */
.mhulp{display:flex;align-items:center;gap:8px;margin:0 12px 10px;padding:7px 10px;border-radius:8px;background:var(--accent-soft);font-size:13px}
.mhulpt{flex:1;min-width:0}
.mhulp .btn-gray{flex:none}
/* bonnetje op een kaart: keuze meteen in een klein menu */
.mbpop{gap:8px}
.mbprow{display:grid;gap:6px}
.mbprow+.mbprow{border-top:1px solid var(--line);padding-top:8px}
.mbpbtns{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.mbpbtns .btn-blue.sm,.mbpbtns .btn-gray.sm,.mbnaar{display:inline-flex;align-items:center;gap:4px}
.mbnaar{justify-self:start}
.mbpop .gpwho{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aibusy.static{margin:0 4px 0 0;padding:0 5px}
.mbbtn.mb-no{background:transparent;color:var(--faint)}

/* offline (stap 3) */
.boff{display:inline-flex;margin-left:4px;width:14px;height:14px;align-items:center;justify-content:center;border-radius:50%;color:var(--muted);flex:none}
.boff .i{width:11px;height:11px}
.boff-seen{color:var(--accent)}
.boff-pin{background:var(--accent);color:#fff}
.boff-pin .i{width:11px;height:11px;stroke-width:2.6;stroke:#fff}
.boff-pinwait{color:var(--accent);opacity:.5}
.bimg .boff{position:absolute;bottom:8px;right:8px;margin:0;background:var(--bg);border:1px solid var(--line)}
.bimg .boff-pin{background:var(--accent);border-color:var(--accent)}
.boffrow{display:inline-flex;align-items:center;gap:6px}.boffrow .boff{margin:0}
.offset{align-items:flex-start}
.offset .grow{flex:1;min-width:0}
.offbar{height:6px;border-radius:3px;background:var(--line);margin-top:6px;overflow:hidden}
.offbar>div{height:100%;background:var(--accent)}
#offMax{font:inherit;font-size:13px;padding:4px 6px;border-radius:5px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}

/* paginageschiedenis en conflict */
#phist{position:fixed;inset:0;z-index:110;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.35)}
#phist[hidden]{display:none}
.hsheet{max-width:900px}
.hcols{display:flex;gap:12px;margin-top:12px;min-height:0}
.hlist{flex:0 0 210px;display:flex;flex-direction:column;gap:2px;max-height:62vh;overflow:auto}
.hitem{display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left;padding:7px 8px;border-radius:6px;border:0;background:none;color:inherit;font:inherit;cursor:pointer;position:relative}
.hitem span{font-size:12px;color:var(--muted)}
.hitem .i{position:absolute;right:6px;top:8px;width:12px;height:12px;color:var(--accent)}
.hitem.on,.hitem:hover{background:var(--accent-soft)}
.hprev{flex:1;min-width:0;max-height:62vh;overflow:auto;border-left:1px solid var(--line);padding-left:12px}
.hprevbar{display:flex;gap:8px;align-items:center;margin-bottom:8px;position:sticky;top:0;background:var(--bg);padding:2px 0 6px}
.hprevbar .iconbtn[aria-pressed="true"]{color:var(--accent)}
.hprevbar .iconbtn[aria-pressed="true"] .i{fill:currentColor}
@media (max-width:640px){.hcols{flex-direction:column}.hlist{flex:none;max-height:28vh}.hprev{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:8px}}
.cfbanner{flex-wrap:wrap;gap:8px}

#menu.ctx{position:fixed;z-index:60}
/* ===== weergaven (weergaven.js): kaarten, tabel, lijst — overal hetzelfde ===== */
.vblock .vtabs{gap:2px}
.vblock button.vtab{border:0;background:none;cursor:pointer;font:inherit;font-size:14px}
.vsrc{display:inline-flex;align-items:center;gap:6px;margin-right:8px;font-size:14px;text-decoration:none;color:inherit;white-space:nowrap}
.vsrc .i{width:16px;height:16px;color:var(--muted)}
.vgear{flex:none;margin-left:4px}
.vblock.k-kids{margin-top:24px}
.vcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px;padding:8px 0}
@media (max-width:600px){.vcards{grid-template-columns:1fr}}
.vcard{text-decoration:none;color:inherit;min-width:0}
.vcard .mmain{border-radius:8px;padding-right:14px}
.vboard .bcol .vcard{margin-bottom:8px}
.vchips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.vchip{display:inline-flex;align-items:center;gap:3px;font-size:12px;color:var(--muted);white-space:nowrap}
.vchip .i{width:12px;height:12px}
td.c-sys{color:var(--muted);white-space:nowrap}
/* planning (gantt) */
.gantt{--gnaam:200px;overflow-x:auto;position:relative;padding:4px 0 8px}
@media (max-width:600px){.gantt{--gnaam:120px}}
.ginner{position:relative}
.ghead,.grow2{display:flex;align-items:center}
.ghead{height:40px;border-bottom:1px solid var(--line)}
.ghead .gtrack{height:40px}
.gname{position:sticky;left:0;z-index:2;flex:none;width:var(--gnaam);padding:0 8px 0 2px;background:var(--bg);font-size:14px;color:inherit;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;align-self:stretch;display:flex;align-items:center}
.gtrack{position:relative;flex:none;height:36px}
.grow2{border-bottom:1px solid var(--line)}
.grow2:hover .gname{background:linear-gradient(var(--hover),var(--hover)),var(--bg)}
.gmnd{position:absolute;top:2px;font-size:12px;color:var(--muted);white-space:nowrap;padding-left:4px;border-left:1px solid var(--line)}
.gwk{position:absolute;bottom:2px;font-size:12px;color:var(--faint);padding-left:4px}
.gbar{position:absolute;top:7px;height:22px;min-width:7px;text-decoration:none;overflow:hidden;padding:0 7px}
.gbar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gbar:hover{filter:brightness(.95)}
.gnu{position:absolute;top:0;bottom:0;width:2px;background:var(--accent);pointer-events:none;z-index:1}
.gzonder{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;padding:8px 2px 0}
.gzonder a.vchip{text-decoration:none}
.vblock [draggable=true]{cursor:grab}
.vblock .dragging{opacity:.4}
.vcard.vdrop-b{box-shadow:-3px 0 0 var(--accent)}
.vcard.vdrop-a{box-shadow:3px 0 0 var(--accent)}
tr.vdrop-b td,.lrow.vdrop-b{box-shadow:inset 0 2px 0 var(--accent)}
tr.vdrop-a td,.lrow.vdrop-a{box-shadow:inset 0 -2px 0 var(--accent)}
.i.rot180{transform:rotate(180deg)}
.i.rotup{transform:rotate(-90deg)}
#vpop{position:fixed;z-index:70}
#vpop .mlist{min-width:0}
#vpop .mlist>button{border:0;background:none;font:inherit;cursor:pointer;color:inherit}
#vpop .vname input{flex:1;min-width:0;border:0;background:var(--hover);border-radius:5px;padding:5px 8px;font:inherit;font-size:16px;color:inherit}
#vpop .vrow select{max-width:150px;font:inherit;font-size:14px;border:0;background:var(--hover);border-radius:5px;padding:3px 6px;color:inherit}
#vpop .mseg button{border:0;font:inherit;font-size:12px;cursor:pointer}
#vpop .vrow{flex-wrap:nowrap}
.vcard,.vcard *{text-decoration:none!important}
/* Instellingen: menu, zoeken, opslaan */
.shead1{display:flex;align-items:center;gap:6px}
.shead1 .iconbtn{margin-left:-8px}
.ssearch{display:flex;align-items:center;gap:8px;padding:8px 12px;margin:4px 0 12px;border-radius:8px;background:var(--hover);color:var(--muted)}
.ssearch input{flex:1;min-width:0;border:0;outline:none;background:none;font:inherit;font-size:16px;color:var(--ink)}
.ssearch input::-webkit-search-cancel-button{cursor:pointer}
.smenu{display:flex;align-items:center;gap:12px;padding:12px 6px;margin:0 -6px;border-bottom:1px solid var(--line);color:inherit;text-decoration:none;border-radius:4px}
.smenu:hover{background:var(--hover)}
.smenu>.i{width:18px;height:18px;color:var(--muted);flex:none}
.smenu .grow{flex:1;min-width:0;display:flex;align-items:center;gap:8px}
.smenu .sval{color:var(--muted);font-size:13px;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.smenu>.i:last-child{width:14px;height:14px;color:var(--faint)}
.sdot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
.sgroup{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin:26px 0 2px}
.sbanner{text-decoration:none;color:inherit;margin:0 0 8px}
.sbar{position:sticky;bottom:calc(12px + env(safe-area-inset-bottom,0px));display:flex;justify-content:flex-end;gap:8px;margin-top:16px;padding:8px;border-radius:8px;background:var(--bg);box-shadow:0 0 0 1px var(--line),0 4px 14px rgba(15,15,15,.1);z-index:5}
.sbar[hidden]{display:none}
@media (max-width:820px){.sbar{bottom:calc(var(--tabh) + 14px + env(safe-area-inset-bottom,0px));margin-right:62px}}
.sflash{animation:sflash 1.6s ease-out}
@keyframes sflash{0%,30%{background:var(--accent-soft,rgba(35,131,226,.14))}100%{background:transparent}}
@media (max-width:820px){.shead1 .iconbtn{display:none}}
#side>*{flex-shrink:0}#side>.sscroll{flex-shrink:1}
#side>.sscroll{border-top:1px solid var(--line);margin-top:6px}

/* kaartenraster: overzichten van kaarten (doelen, patchnotes) gebruiken de breedte van het scherm;
   op de telefoon één kolom. Een opengeklapte kaart krijgt de hele rij. */
.kgrid{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,min(100%,var(--kaartw,480px)));align-items:start}
.kgrid > .mcard.open{grid-column:1/-1}

/* kaarten: mat glas (Har). Half doorzichtig met een wazige achtergrond; werkt in licht en donker via --bg */
.mcard{background:color-mix(in srgb,var(--bg) 70%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}

/* Kaartstijl C (Har, 10 nov 2026): zwevend en ronder. Hoeken 16px, zachte schaduw i.p.v. een randlijn, in donker een
   iets lichter vlak dan de pagina; ondertitel klein en grijs. Geldt voor alle kaarten (mail, doelen, acties, feed…). */
:root{--kaart:var(--bg);--kaartr:16px;--kaartsch:0 1px 2px rgba(15,15,15,.06),0 6px 16px rgba(15,15,15,.07)}
@media (prefers-color-scheme:dark){:root{--kaart:#232323;--kaartsch:0 0 0 1px rgba(255,255,255,.04),0 1px 2px rgba(0,0,0,.35),0 6px 16px rgba(0,0,0,.35)}}
/* één kaartstijl (Har, 10 nov 2026): alles wat op een kaart lijkt verwijst naar deze regel, geen eigen randen of hoeken per onderdeel */
.mcard,.kpage .khero,.ktile,.krows .mactie,.files .filechip,.kreactie,.postbericht,.rcard,.elist,.flijstc{background:color-mix(in srgb,var(--kaart) 88%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-radius:var(--kaartr);box-shadow:var(--kaartsch)}
.krows .mactie:hover,.files .filechip:hover,.rcard:hover{background:color-mix(in srgb,var(--kaart) 88%,var(--hover))}
.mcard > .mrow,.dcard{border-radius:var(--kaartr)}
.mcard.open > .mrow{border-radius:var(--kaartr) var(--kaartr) 0 0}
.mcard.open{box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 22%,transparent),var(--kaartsch)} /* uitgeklapt: geen accentkleur (Har, 10 nov 2026) */
.mcard.dropon{box-shadow:0 0 0 2px var(--accent),var(--kaartsch)}
.mcard.mini,.mcard.mini .minimain{border-radius:var(--kaartr)}
.mmain{padding-top:14px;padding-bottom:14px;padding-left:16px;border-radius:var(--kaartr) 0 0 var(--kaartr)}
.mwho{font-size:12px;color:var(--muted)}
.mcard > .kcover + .mrow{border-radius:0 0 var(--kaartr) var(--kaartr)}
.mcard.open > .kcover + .mrow{border-radius:0}
:where([data-sleep]) .slpplek{border-radius:var(--kaartr)}

/* doelen op Home: drie vaste maten in één raster, los van de mailkaartbreedte; kaarten schalen niet mee met het scherm.
   Rijen van 78px: prio 1 = 2 kolommen × 4 rijen, prio 2 = 1 × 2, prio 3 = 1 × 1 (compact). Dicht gepakt, zodat het scherm vol raakt. */
.prio .dgrid{margin-bottom:8px}
.dgrid{--dkol:320px;display:grid;gap:8px;grid-template-columns:repeat(auto-fill,min(var(--dkol),calc(50% - 4px)));grid-auto-rows:78px;grid-auto-flow:row dense}
.dgrid .dcard{display:flex;min-height:0}
.dgrid .dcard > a.mcard{flex:1;min-width:0;overflow:hidden;display:flex}
.dgrid .mmain{align-content:start}
.dgrid .p1{grid-column:span 2;grid-row:span 4}
.dgrid .p1 .mmain{padding:20px 24px 16px}
.dgrid .p1 .mtitle{font-size:19px;line-height:1.25}
.dgrid .p1 .mwho,.dgrid .p1 .mdesc,.dgrid .p1 .mactie{font-size:15px}
.dgrid .p1 .macties.mlinks{max-height:67px}
.dgrid .p2{grid-row:span 2}
.dgrid .p3 .mmain{padding:9px 12px;gap:2px;align-content:center}
.dgrid .p3:has(.dprio) .mmain{padding-right:104px}
.dgrid .p3 .mtitle{font-size:13px}
.dgrid .p3 .mwho{font-size:13px}
.dgrid .p3 .mwhen,.dgrid .p3 .mdesc,.dgrid .p3 .macties,.dgrid .p3 .mfoot{display:none}
.dgrid .p3 .dprio{bottom:50%;transform:translateY(50%)}
@media (max-width:820px){.dgrid{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto}.dgrid .p1,.dgrid .p2{grid-column:auto;grid-row:auto}.dgrid .p1 .mmain{min-height:170px}.dgrid .p2 .mmain{min-height:124px}}

/* ---------- Agenda: dagkaarten en regels (agenda.js) ---------- */
.agdag .mmain{cursor:default;padding-right:14px}
.agdag.vandaag .ml1 .mtitle{color:var(--accent)}
.aglist{display:grid;margin:4px -6px 0}
.agi{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:8px;align-items:baseline;padding:5px 6px;border-radius:6px;text-decoration:none;color:var(--ink);font-size:14px}
.agi:hover{background:var(--hover)}
.agi.voorbij{color:var(--faint)}
.agi .agt{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.agm{display:grid;min-width:0}
.agtitel{overflow-wrap:anywhere}
.agsub{font-size:13px;color:var(--muted)}
@media (max-width:820px){
  .agi{grid-template-columns:42px minmax(0,1fr) auto}
}

/* doelen: licht achter de kaart (Har). Een zachte witte gloed achter elke doelkaart, die rondom over de rand uitstraalt
   en door het matglas schemert. In het lichte thema subtiel (wit op wit). */
.dgrid .dcard::before{content:"";position:absolute;inset:6px;border-radius:var(--kaartr);background:var(--gloed);filter:blur(16px);opacity:.6;z-index:0;pointer-events:none}
.dgrid .dcard > a.mcard{position:relative;z-index:1;box-shadow:var(--kaartsch)}
.dgrid .dcard > .dprio,.dgrid .dcard > .dvink{z-index:3}

/* Acties-tab (actiestab.js): tabjes Tijdlijn / Per doel / Lijst / Bord / Goedkeuren, daaronder de actiekaarten in de mailkaart-opbouw */
.atpage .mseg{margin-bottom:6px}
.atbody>.sec:first-child,.atbody>.gkpage>.sec:first-child{margin-top:14px}
.atbody .sec .vcount{padding:0 0 0 2px}
.atdoel{color:inherit;text-decoration:none}
.atdoel:hover{color:var(--ink)}
.atcard .mmain{border-radius:var(--kaartr);padding-right:14px}
.atwacht{display:inline-flex;align-items:center;gap:4px}
.atwacht .i{width:12px;height:12px}
.atbody .mkanban{margin-top:14px}

/* Acties-tab: tijdlijn (actiestab.js › Tijdlijn). Kolommen per dag/week/maand/kwartaal/jaar, kaarten slepen naar een kolom. */
.atbody .tlzoom{margin-top:6px}
.atbody .tlbord{margin-top:10px}
.tlcol h3{align-items:flex-start}
.tlkop{display:flex;flex-direction:column;gap:1px;min-width:0}
.tlsub{font-size:12px;font-weight:400;color:var(--muted)}
.tlcol.tlnu h3 .tlkop>span:first-child{color:var(--accent)}
.tlcol{min-height:64px;align-content:start}
.tlper{display:inline-flex;align-items:center;gap:4px;cursor:pointer}
.tlper .i{width:12px;height:12px}
.dlknop{cursor:pointer;border-radius:4px}
.dlknop:hover{background:var(--hover)}
.mcard.tlfocus{box-shadow:0 0 0 2px var(--accent),var(--kaartsch)}
.tlpop{position:absolute;z-index:65;display:grid;gap:6px;padding:8px;width:max-content;max-width:calc(100vw - 16px);background:var(--bg);border-radius:8px;box-shadow:0 0 0 1px var(--line),0 6px 20px rgba(15,15,15,.16)}
.tlrij{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.tlrij .grow{flex:1}
.tlscroll{flex:1;min-width:0;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.tlscroll::-webkit-scrollbar{display:none}
.tlscroll .btn-gray{flex:none;white-space:nowrap}
.tlrij .btn-gray.sm.on{background:var(--press)}
.tlsoort{font-size:12px;color:var(--muted);width:64px;flex:none}
.tldatum{width:auto;font-size:13px}

/* Tijdlijn › Overzicht: één kaart per horizon, links groot de naam (Vandaag, W45, Nov, Q4), rechts de regels (Timestripe) */
.atbody .tloverzicht{margin-top:10px}
.tloverzicht{grid-template-columns:min(100%,var(--kaartw,480px))}
.tlhor{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:4px 12px;align-items:start;padding:14px 12px 14px 16px;min-height:96px}
.tlhkop{display:flex;flex-direction:column;justify-content:space-between;align-self:stretch;min-width:0;gap:6px}
.tlhnaam{font-size:24px;font-weight:700;line-height:1.15;color:var(--ink);overflow-wrap:anywhere}
.tlhsub{font-size:13px;color:var(--accent)}
.tlhlijst{display:flex;flex-direction:column;gap:4px;min-width:0;min-height:28px;padding-top:4px}
.tlregel{cursor:pointer;border-radius:4px}
.tlregel:hover{background:var(--hover)}
.tlregel .mact{flex:1;min-width:0}
.tlregel .mtitle{font-weight:500;overflow-wrap:anywhere}
.tldoelregel{color:var(--muted)}
.tlwanneer{flex:none;font-size:12px;color:var(--muted);font-weight:400;margin-top:2px}
.tlhlijst .slpplek{height:22px;min-height:22px;border-radius:4px}
.tlhor.tlleeg{min-height:0;padding-top:10px;padding-bottom:10px;align-items:center}
.tlhor.tlleeg .tlhkop{flex-direction:row;align-items:baseline;gap:10px;grid-column:1/3}
.tlhor.tlleeg .tlhlijst{display:none}
body.slpbezig .tlhor.tlleeg .tlhlijst{display:flex;grid-column:1/3}
.tlmeer{align-self:flex-start;width:auto;padding:0 8px;font-size:13px;color:var(--muted)}
.tlmeer.on .i{transform:rotate(-90deg)}
.tlnieuwin{font-size:14px;padding:2px 0;border-bottom:1px solid var(--line)}

/* Kleur per aandachtsgebied (Har, 2 nov 2026): geen volle tint meer maar een gloed (Har: "moderner") —
   matglas blijft, de kleur straalt vanuit de linkerbovenhoek, met een dun gekleurd randje en een zachte gloed eromheen */
[data-gebied=groen]{--gtint:var(--okb);--gglow:var(--glgroen)}
[data-gebied=geel]{--gtint:var(--t1b);--gglow:var(--glgeel)}
[data-gebied=oranje]{--gtint:var(--wachtb);--gglow:var(--gloranje)}
[data-gebied=blauw]{--gtint:var(--blauwb);--gglow:var(--glblauw)}
[data-gebied=paars]{--gtint:var(--paarsb);--gglow:var(--glpaars)}
/* twee keuzes in Instellingen › Weergave (Har): lijn = gloeiende lijn bovenaan, stip = gloeiend verticaal streepje voor de titel (geen stipje: lijkt op ongelezen mail) */
html:not([data-gstijl=stip]) :is(.mcard,.dgrid .dcard > a.mcard,.kpage .khero)[data-gebied]{
  background:linear-gradient(90deg,var(--gglow),transparent 70%) top/100% 2px no-repeat,linear-gradient(180deg,color-mix(in srgb,var(--gglow) 14%,transparent),transparent 40px),color-mix(in srgb,var(--kaart) 88%,transparent)}
html[data-gstijl=stip] .mcard[data-gebied] .mtitle{padding:4px 0 4px 8px;margin:-4px 0 -4px -8px}
html[data-gstijl=stip] :is(.mcard[data-gebied] .mtitle,.kpage .khero[data-gebied] .khtitle)::before{content:"";display:inline-block;width:3px;height:.85em;border-radius:99px;margin-right:8px;vertical-align:-1px;background:var(--gglow);box-shadow:0 0 6px 1px color-mix(in srgb,var(--gglow) 70%,transparent)}
.tlregel{padding:2px 6px;margin:0 -6px}
.tlregel[data-gebied]{background:color-mix(in srgb,var(--gtint) 60%,transparent)}
.tlregel[data-gebied]:hover{background:var(--hover)}


/* Kaarten slepen (sleep.js), zoals Trello: de kaart hangt iets gekanteld onder de vinger, een lege plek schuift mee */
[data-sleep] [data-sleepkaart]{-webkit-touch-callout:none}
body.slpbezig,body.slpbezig *{-webkit-user-select:none;user-select:none;cursor:grabbing}
.slpweg{display:none!important}
.slpplek{border-radius:8px;background:var(--press);min-height:36px;height:36px}
.dgrid .slpplek{height:auto}
.slpgeest{position:fixed;left:0;top:0;z-index:70;pointer-events:none;max-width:200px;padding:4px 10px;border-radius:99px;background:var(--bg);color:var(--ink);font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 0 0 1px var(--line),0 6px 20px rgba(15,15,15,.14)}
@media (prefers-color-scheme:dark){.slpgeest{box-shadow:0 0 0 1px var(--line),0 6px 20px rgba(0,0,0,.5)}}
.slpnav{box-shadow:inset 0 0 0 2px var(--accent)}
.slpop{box-shadow:0 0 0 2px var(--accent)}

/* Acties-tab: goedkeuringen (goedkeuringen.js). Kaarten in de mailkaart-opbouw; het voorstel staat letterlijk op de kaart. */
.gkpage .sec:first-child{margin-top:0}
.gkcard .mmain{padding-right:14px;border-radius:var(--kaartr)}
.gkvoorstel{font-size:14px;line-height:1.45;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere;border-left:2px solid var(--line);padding-left:10px;margin:3px 0 1px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.gkcard .mficons{gap:2px;margin-right:-6px}
.gkcard .gkok{color:var(--accent)}
.gkcard .iconbtn:hover{background:var(--hover)}
/* afkeuren: focusscherm met de kaart en een invulvak voor de reden */
.gkfocus{position:fixed;inset:0;z-index:50;background:rgba(15,15,15,.35);display:flex;justify-content:center;align-items:flex-start;padding:calc(10vh + env(safe-area-inset-top,0px)) 16px 16px;opacity:0;transition:opacity .15s}
.gkfocus.in{opacity:1}
.gkfbox{width:min(100%,var(--kaartw,480px));display:grid;gap:8px;max-height:calc(90vh - env(safe-area-inset-top,0px));overflow-y:auto}
.gkfbox .mcard{background:var(--kaart);box-shadow:var(--kaartsch),0 6px 20px rgba(15,15,15,.16)}
.gkfbox .mmain{cursor:auto}
.gkfbox .mmain:hover{background:none}
.gkvol .gkvoorstel{-webkit-line-clamp:unset;display:block}
.gkreden{resize:vertical;border:0;border-radius:8px;box-shadow:0 0 0 1px var(--line),0 6px 20px rgba(15,15,15,.16);padding:10px 12px;font:inherit;font-size:15px;line-height:1.45;background:var(--bg);color:var(--ink);outline:none;min-height:76px}
.gkreden:focus{box-shadow:0 0 0 1px var(--accent),0 6px 20px rgba(15,15,15,.16)}
.gkfbar{display:flex;justify-content:space-between;align-items:center}
.gkfbar .iconbtn{background:var(--bg);box-shadow:0 0 0 1px var(--line);width:36px;height:36px;border-radius:8px}
.gkfbar .gkweg{background:var(--accent);color:#fff;box-shadow:none}

/* binnenkant van een kaart (Har): bovenaan de kaart zoals in de lijst, daaronder losse blokken */
.kpage .khero{padding:14px 16px;margin:0 0 4px}
.kpage h1.khtitle{font-size:24px;line-height:1.25;margin:0}
.khsub{font-size:14px;color:var(--ink);margin-top:6px}
.khoms{font-size:15px;line-height:1.5;color:var(--muted);margin-top:6px;white-space:pre-wrap;overflow-wrap:anywhere}
/* bewerken: ondertitel en omschrijving in de kaart zelf, zelfde maat en kleur als in leesmodus */
.khsub-in,.khoms-in{display:block;padding:0;border-radius:4px}
.khoms-in{color:var(--muted)}
.khfoot{display:flex;align-items:center;gap:8px;margin-top:12px;min-height:30px}
.khchips{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0;flex:1}
.khchips .mstat{margin:0}
.khfoot .editbar{margin:0;min-height:0;flex:none}
.khfoot .editbar .muted{margin-right:8px}
.kblok .sec{margin:22px 0 8px}
.kblok .sec .vcount{padding:0 0 0 2px}
/* de inhoud heeft geen kopje (Har, 10 nov 2026): zelfde bovenruimte als een blok met kopje */
.kblok.kinhoud{margin-top:22px}
.kleeg{display:none}
.ktiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.ktile{display:flex;flex-direction:column;gap:2px;min-width:0;padding:8px 10px}
.ktk{font-size:12px;color:var(--muted)}
.ktv{font-size:14px;font-weight:500;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ktv a{color:inherit}
.ktext{font-size:15px;line-height:1.5;margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.krows{display:flex;flex-direction:column;gap:4px}
.krows .mactie{padding:7px 10px;cursor:pointer}
.kpage .files{margin-top:0}
.kpage .kmails .sec{margin-top:22px}
@media (max-width:820px){.ktiles{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* binnenkant van een kaart zoals Trello, blok a (kaart.js, Har 4 nov 2026) */
/* acties: direct typen onderaan het blok, uitgevoerde ingeklapt */
.knieuw{display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:8px;color:var(--muted);cursor:text}
.knieuw:hover,.knieuw:focus-within{background:var(--hover)}
.knieuw .i{flex:none;width:14px;height:14px}
.knieuw .prop-in{font-size:14px;color:var(--ink)}
.kklaar{display:flex;align-items:center;gap:4px;align-self:flex-start;margin:2px 0;padding:4px 8px;border-radius:4px;font-size:13px;color:var(--muted)}
.kklaar:hover{background:var(--hover)}
.kklaar .i{width:14px;height:14px}
.kblok .krows+.kklaar,.kblok .kklaar+.krows{margin-top:4px}
/* activiteit en reacties */
.kschrijf{display:flex;align-items:flex-end;gap:4px;padding:4px 4px 4px 10px;border-radius:8px;box-shadow:0 0 0 1px var(--line)}
.kschrijf:focus-within{box-shadow:0 0 0 1px var(--accent)}
.kschrijf textarea{resize:none;font-size:14px;line-height:1.4;padding:5px 0}
.ksug{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.kailijst{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.kai{min-width:0}
.kreactie{padding:8px 10px}
.kaik{display:flex;align-items:center;gap:8px;font-size:13px;min-height:24px}
.kaik .grow{flex:1}
.kaik>.small{flex:none}
.kait{font-size:14px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;margin-top:2px}
.kreactie .kschrijf{margin-top:4px}
.kvermeld{color:var(--accent);font-weight:500}
/* Chatstijl (Har, 9 nov 2026, docs/STIJL.md › Chatstijl): activiteit nu, de chat straks */
.chat{display:flex;flex-direction:column;gap:10px;margin-top:12px}
/* breed scherm (Har, 9 nov 2026, optie A): gesprek in een kolom links, het dagpilletje blijft in het midden */
.chat{--chatw:640px}
.chat>:not(.chat-dag){width:100%;max-width:var(--chatw)}
.chat>.kklaar{width:auto}
/* chat als pop-up uit de plusknop (Har, 10 nov 2026): breed scherm zwevend rechts, pagina blijft zichtbaar en scrolbaar;
   telefoon bijna schermvullend. Groeit open uit de knop rechtsonder. */
.kchat{position:fixed;z-index:20;right:max(20px,env(safe-area-inset-right,0px));bottom:calc(80px + env(safe-area-inset-bottom,0px));width:400px;height:min(640px,calc(100dvh - 140px));display:flex;flex-direction:column;border-radius:16px;background:color-mix(in srgb,var(--bg) 92%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 0 0 1px var(--line),0 8px 22px rgba(15,15,15,.12),0 16px 40px rgba(15,15,15,.10);transform-origin:calc(100% - 24px) calc(100% + 56px);overflow:hidden}
.kchat.in{animation:kchatin .22s cubic-bezier(.2,.8,.2,1)}
@keyframes kchatin{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:none}}
.chat-kopbalk{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 14px;border-bottom:1px solid var(--line);flex:none;min-width:0}
.chat-kopbalk b{flex:1;min-width:0;font-weight:500;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kchat .chat-scroll{flex:1;overflow-y:auto;margin:0;padding:12px 14px;overscroll-behavior:contain}
.kchat .chat-scroll>*{max-width:none}
.chat-leeg{margin:auto;color:var(--muted);font-size:13px}
.kchat .ksug{padding:0 12px 6px}
.chat-onder{position:relative;display:flex;align-items:flex-end;gap:4px;padding:8px;border-top:1px solid var(--line);flex:none}
.chat-onder .grow{flex:1}
.chat-onder .chat-invoer{flex:1;min-width:0}
.chat-filterknop{color:var(--muted)}
.chat-filterknop.on{color:var(--accent)}
.chat-filter{position:absolute;left:8px;bottom:calc(100% + 6px);display:flex;flex-direction:column;gap:2px;padding:6px;border-radius:12px;background:var(--bg);box-shadow:0 0 0 1px var(--line),0 8px 22px rgba(15,15,15,.12);animation:kchatin .15s ease-out;transform-origin:16px 100%}
/* aan/uit zetten mag niks laten verspringen (Har, 10 nov 2026): zelfde lettergrootte en regelhoogte, alleen dik en kleur wisselen */
.chat-schak{display:flex;align-items:center;gap:8px;padding:6px 8px;border:0;border-radius:6px;background:none;color:var(--muted);font:inherit;font-size:13px;line-height:18px;cursor:pointer;min-width:180px}
.chat-schak:hover{background:var(--hover)}
.chat-schak.on{color:var(--ink);font-weight:500}
.chat-schak span{flex:1;text-align:left}
/* telefoon: vaste lade onderin (Har, 10 nov 2026): volle breedte boven de navigatiebalk, ingeklapt het laatste bericht
   + invoerveld, half scherm of bijna heel scherm; de actieknop staat erboven (kaart.js › kLadeStand) */
.ladegreep{display:none}
:root{--ladedicht:124px;--ladegreep:22px}
@media (max-width:820px){
  .kchat.lade{left:0;right:0;width:auto;top:auto;bottom:calc(var(--tabh) + env(safe-area-inset-bottom,0px));border-radius:16px 16px 0 0;box-shadow:0 0 0 1px var(--line),0 -6px 20px rgba(15,15,15,.08);transition:height .25s cubic-bezier(.2,.8,.2,1),transform .2s ease}
  .kchat.lade.dicht{height:var(--ladedicht)}
  /* helemaal dichtgeklapt (Har, 10 nov 2026): alleen het greepje */
  .kchat.lade.greep{height:var(--ladegreep)}
  .kchat.lade.greep>:not(.ladegreep){display:none}
  .kchat.lade.greep .ladegreep{height:var(--ladegreep)}
  .kchat.lade.half{height:50dvh}
  .kchat.lade.vol{height:calc(100dvh - var(--tabh) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 56px)}
  .kchat.lade .ladegreep{display:grid;place-items:center;flex:none;width:100%;height:18px;padding:0;border:0;background:none;cursor:grab;touch-action:none}
  .ladegreep span{width:36px;height:4px;border-radius:99px;background:var(--faint)}
  .kchat.lade .chat-kopbalk{padding-top:2px;touch-action:none}
  .kchat.lade:not(.feed) [data-kchatdicht]{display:none}
  .kchat.lade.dicht .chat-kopbalk,.kchat.lade.dicht .chat-info,.kchat.lade.dicht .ksug{display:none}
  .kchat.lade.sleept{transition:none}
  /* ingeklapt: alleen het laatste bericht, onderaan tegen het invoerveld; geen dagpilletje (tekst viel half weg, Har 10 nov 2026) */
  .kchat.lade.dicht .chat-dag{display:none}
  .kchat.lade.dicht .chat-scroll{justify-content:flex-end;overflow:hidden;padding:0 14px 4px;touch-action:none;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 8px);mask-image:linear-gradient(to bottom,transparent,#000 8px)}
  .kchat.lade.dicht .chat-scroll>*{flex:none}
  .kchat.lade.dicht .chat-scroll>:not(:last-child){display:none}
  .kchat.lade.dicht .chat-tekst{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden}
  .kchat.lade.dicht .chat-onder{border-top:0;padding-top:2px}
  .chat-invoer textarea{font-size:16px}
  body.lade-aan .main{padding-bottom:calc(var(--tabh) + var(--ladedicht) + 16px + env(safe-area-inset-bottom,0px))}
  body.lade-greep .main{padding-bottom:calc(var(--tabh) + var(--ladegreep) + 16px + env(safe-area-inset-bottom,0px))}
  body.lade-greep #fab,body.lade-greep .ffpop{bottom:calc(var(--tabh) + var(--ladegreep) + 12px + env(safe-area-inset-bottom,0px))}
  body.lade-dicht #fab{bottom:calc(var(--tabh) + var(--ladedicht) + 12px + env(safe-area-inset-bottom,0px))}
  body.lade-half #fab{bottom:calc(var(--tabh) + 50dvh + 12px + env(safe-area-inset-bottom,0px))}
  body.lade-vol #fab{visibility:hidden}
  /* het filterpaneeltje popt naast de actieknop open, dus boven de lade */
  body.lade-dicht .ffpop{bottom:calc(var(--tabh) + var(--ladedicht) + 12px + env(safe-area-inset-bottom,0px))}
  body.lade-half .ffpop{bottom:calc(var(--tabh) + 50dvh + 12px + env(safe-area-inset-bottom,0px))}
  /* navigatiebalk weg (scrollen, typen): de lade zakt mee, net als de actieknop */
  body.navweg .kchat.lade.dicht,body.navweg .kchat.lade.greep,body.typt .kchat.lade{transform:translateY(var(--tabh))}
  /* tijdens bewerken staat de werkbalk op de plek van de navigatiebalk: lade en actieknop blijven erboven */
  body.edfocus .kchat.lade.dicht,body.edfocus .kchat.lade{transform:none}
  html body.edfocus #fab#fab{transform:none}
  html body.lade-aan.navweg #fab:not(.chatopen),html body.lade-aan.typt #fab{transform:translateY(var(--tabh))}
}
@media (prefers-reduced-motion:reduce){.kchat.in,.chat-filter{animation:none}.kchat.lade{transition:none}}
/* standaard chatscherm (Har, 10 nov 2026): log oud→nieuw, invoerveld onderaan in dezelfde kolom */
.chat>.chat-log{max-width:none}
.chat-log{display:flex;flex-direction:column;gap:10px;min-width:0}
.chat-log>:not(.chat-dag){width:100%;max-width:var(--chatw)}
.chat-log>.kklaar{width:auto}
.chat-invoer{display:flex;align-items:flex-end;gap:4px;padding:4px 4px 4px 12px;border-radius:12px;background:var(--hover);box-shadow:0 0 0 1px var(--line)}
.chat-invoer:focus-within{box-shadow:0 0 0 1px var(--accent)}
.chat-invoer textarea{flex:1;resize:none;border:0;background:none;font-size:14px;line-height:1.4;padding:6px 0;max-height:160px}
.chat-stuur{flex:none;width:28px;height:28px;margin:2px;border:0;border-radius:6px;background:none;color:var(--ink);display:grid;place-items:center;cursor:pointer;opacity:0;transform:scale(.6);pointer-events:none;transition:opacity .15s,transform .18s cubic-bezier(.2,.8,.2,1)}
.chat-stuur .i{width:18px;height:18px}
.chat-stuur:hover{background:var(--hover)}
.chat-invoer.heeft .chat-stuur{opacity:1;transform:none;pointer-events:auto}
.chat-dag{align-self:center;font-size:12px;color:var(--muted);padding:2px 10px;border-radius:99px;background:var(--hover)}
.chat-msg{min-width:0;outline:none}
/* gepingd bericht (Har, 10 nov 2026): licht op tot je hem gezien hebt */
.chat-msg.gepingd{background:var(--accent-soft);border-radius:8px;box-shadow:0 0 0 6px var(--accent-soft);animation:pinglicht 3s ease 1s forwards}
@keyframes pinglicht{to{background:transparent;box-shadow:0 0 0 6px transparent}}
.chat-kop{display:flex;align-items:center;gap:8px;font-size:13px;min-height:24px}
.chat-kop b{font-weight:500}
.chat-tijd{font-size:12px;color:var(--muted)}
.chat-acties{display:flex;margin-left:auto;opacity:0;transition:opacity .15s}
.chat-msg:hover .chat-acties,.chat-msg:focus-within .chat-acties{opacity:1}
.chat-tekst{font-size:14px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.chat-zacht{color:var(--muted)}
.chat-msg .kschrijf{margin-top:4px}
.chat-sys{align-self:flex-start;max-width:100%;text-align:center;font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.chat-wie{color:var(--ink)}
button.chat-sys{display:flex;justify-content:center;align-items:center;gap:4px;background:none;border:0;padding:0;font:inherit;font-size:12px;color:var(--muted);cursor:pointer}
button.chat-sys .i{width:14px;height:14px}
.chat-sub{margin-top:-6px}
/* wat er veranderde (Har, 10 nov 2026): aantikken op "tekst bijgewerkt"; weg = doorgestreept, erbij = gemarkeerd */
/* bubbels zoals WhatsApp (Har, 10 nov 2026, optie B): elk bericht een eigen neutrale bubbel, jouw berichten rechts.
   Zelfde persoon achter elkaar: 2px ertussen, naam alleen boven de eerste; tijd klein rechtsonder. */
.chat-log{gap:2px}
.chat-log>:not(.vervolg){margin-top:8px}
.chat-log>:first-child{margin-top:0}
.chat-log>.chat-bel{width:auto;max-width:min(82%,520px)}
.chat-bel{align-self:flex-start;display:flex;flex-direction:column;padding:6px 10px 4px;border-radius:12px;background:color-mix(in srgb,var(--kaart) 88%,transparent);box-shadow:0 0 0 1px var(--line)}
.chat-bel:not(.vervolg){border-top-left-radius:4px}
.chat-bel.eigen{align-self:flex-end;background:var(--hover);box-shadow:none}
.chat-bel.eigen:not(.vervolg){border-top-left-radius:12px;border-top-right-radius:4px}
.chat-naam{font-size:12px;font-weight:500;color:var(--ink);margin-bottom:1px}
.chat-bel .chat-kop{justify-content:flex-end;min-height:0;gap:4px;margin-top:1px}
.chat-bel .chat-tijd{font-size:11px}
/* knopjes nemen pas plek in bij hover of aantikken (anders werd "Ok" een brede bubbel); de regel blijft even hoog */
.chat-bel .chat-acties{margin-left:0;display:none;height:16px;align-items:center}
.chat-bel:hover .chat-acties,.chat-bel:focus-within .chat-acties{display:flex}
/* gepingd: licht op en dooft terug naar de gewone bubbel (niet naar doorzichtig) */
.chat-bel.gepingd{border-radius:12px;background:color-mix(in srgb,var(--kaart) 88%,transparent);box-shadow:0 0 0 1px var(--line);animation:pinglichtbel 3s ease 1s backwards}
.chat-bel.gepingd:not(.vervolg){border-top-left-radius:4px}
.chat-bel.eigen.gepingd{background:var(--hover);box-shadow:none}
/* Reactie gevraagd (Har, 11 nov 2026): ?-labeltje op een bericht, citaatje bij een antwoord, balkje boven het veld */
.chat-vraag{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:9px;border:0;padding:0;margin-right:4px;background:var(--blauwb);color:var(--blauwf);flex:none;cursor:default}
button.chat-vraag{cursor:pointer}
.chat-vraag .i{width:12px;height:12px}
.chat-vraag.ja{background:var(--okb);color:var(--okf)}
.chat-vraag.nee{background:var(--hover);color:var(--muted)}
.chat-citaat{font-size:13px;color:var(--muted);border-left:2px solid var(--line);padding:2px 0 2px 8px;margin:2px 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.chat-citaat b,.chat-antwbalk b{font-weight:500;color:var(--ink)}
.chat-antwbalk{display:flex;align-items:center;gap:4px;margin:0 8px 4px;padding:2px 0 2px 8px;font-size:13px;color:var(--muted);border-left:2px solid var(--line);min-width:0}
.chat-antwbalk .grow{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ?-knop: zelfde maat en icoongrootte als de verzendknop, er direct naast (Har, 11 nov 2026); zolang het veld leeg is
   schuift de verzendknop dicht, zodat het ? rechts in het veld staat */
.chat-vraagknop{flex:none;width:28px;height:28px;margin:2px 0 2px 2px;border:0;border-radius:6px;background:none;color:var(--muted);display:grid;place-items:center;cursor:pointer}
.chat-vraagknop .i{width:18px;height:18px}
.chat-vraagknop:hover{background:var(--hover)}
.chat-vraagknop.on{color:var(--accent)}
.chat-invoer.metvraag .chat-stuur{transition:opacity .15s,transform .18s cubic-bezier(.2,.8,.2,1),width .18s cubic-bezier(.2,.8,.2,1),margin .18s}
.chat-invoer.metvraag:not(.heeft) .chat-stuur{width:0;margin:2px 0}
.chat-bel.eigen.gepingd:not(.vervolg){border-top-left-radius:12px;border-top-right-radius:4px}
@keyframes pinglichtbel{from{background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent-soft)}}
/* blok in een bericht (bv. een conceptmail): eigen vlakje dat zelf scrolt, kop met pijltje naar de pagina */
.chat-blok{margin:6px 0 2px;border-radius:8px;background:var(--hover);box-shadow:0 0 0 1px var(--line);white-space:normal;overflow:hidden}
.chat-blok-kop{display:flex;align-items:center;gap:6px;padding:5px 8px;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted);text-decoration:none}
.chat-blok-kop span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-blok-kop .i{width:14px;height:14px;flex:none}
.chat-blok-in{max-height:160px;overflow-y:auto;overscroll-behavior:contain;padding:6px 8px;font-size:13px;white-space:pre-wrap;color:var(--ink)}
.kchat.lade.dicht .chat-blok{display:none}
/* ingeklapte lade: het laatste bericht past helemaal (naam + één regel), de tijdregel valt weg */
@media (max-width:820px){.kchat.lade.dicht .chat-bel .chat-kop{display:none}.kchat.lade.dicht .chat-bel{padding:4px 10px}}
.chat-diff{align-self:stretch;min-width:0;display:grid;gap:6px;padding:8px 10px;border-radius:8px;background:var(--hover);font-size:13px;line-height:1.45}
.chat-diff-uitleg{color:var(--ink)}
.chat-diff-tekst{display:grid;gap:2px;max-height:320px;overflow-y:auto}
.chat-diff .dr{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--muted)}
.chat-diff .dr.weg{text-decoration:line-through}
.chat-diff .dr.bij{color:var(--ink);background:var(--accent-soft);border-radius:4px;padding:0 4px}
.chat-diff .dr.gat{color:var(--faint)}
.klog{display:flex;align-items:baseline;gap:8px;padding:0 10px;font-size:13px;color:var(--muted)}
.klog>span:first-child{flex:1;min-width:0;overflow-wrap:anywhere}
.klog b{font-weight:500;color:var(--ink)}
.klog .small{flex:none}
/* snelmenu op een kaart (kaart.js, blok b): één rij icoonknoppen, keuzes in hetzelfde zwevende menu */
.ksnel{min-width:0}
.ksnel .mh{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ksnelrij{display:flex;gap:2px;padding:2px}
.ksnelchips{display:flex;flex-wrap:wrap;gap:4px;padding:2px 8px 6px}
.ksnelchips .btn-gray.sm.on{background:var(--press)}
.mlist .ksnelzoek{flex-direction:row;flex-wrap:nowrap;align-items:center}
.ksnelzoek .prop-in{padding:0;flex:1;min-width:0;width:auto}
.ksnelvoet{display:flex;justify-content:flex-end;padding:6px 8px 2px}
/* blok c: cover van een linkkaart (plaatje van de pagina), bovenaan de kaart; sjablonen kiezen in het zwevende menu */
.kcover{display:block;margin:0;border-radius:var(--kaartr) var(--kaartr) 0 0;overflow:hidden;background:var(--hover);height:140px}
.kcover img{display:block;width:100%;height:100%;object-fit:cover}
.kcover.binnen{margin:-14px -16px 12px;height:240px}
/* omslagfoto (Har, 10 nov 2026): kiezen, verschuiven, op de voorkant aan/uit; op de telefoon lager */
.kcover{position:relative}
.kcover img{-webkit-user-select:none;user-select:none}
.kcknop{position:absolute;top:8px;right:8px;display:flex;gap:4px;opacity:0;transition:opacity .15s}
.kcover:hover .kcknop,.kcover:focus-within .kcknop,.kcover.schuift .kcknop{opacity:1}
@media (pointer:coarse){.kcknop{opacity:1}}
.kcknop .iconbtn{background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:6px}
.kcknop .iconbtn.on{background:var(--press)}
.kcover.schuift{cursor:ns-resize;touch-action:none;box-shadow:inset 0 0 0 2px var(--accent)}
.kcover.schuift img{pointer-events:none}
.kcdoor{position:absolute;bottom:6px;right:8px;font-size:12px;color:var(--muted);background:color-mix(in srgb,var(--bg) 82%,transparent);border-radius:99px;padding:1px 8px;text-decoration:none}
.khicon{display:block;font-size:24px;line-height:1;margin-bottom:6px}
@media (max-width:720px){.kcover.binnen{height:160px}.kcover{height:110px}}
.kcpick{position:fixed;z-index:70;width:min(420px,calc(100vw - 16px));max-height:min(460px,calc(100vh - 16px));display:flex;flex-direction:column;background:var(--bg);border-radius:8px;box-shadow:0 0 0 1px var(--line),0 8px 24px rgba(15,15,15,.16);overflow:hidden}
.kcpick.vel{left:8px!important;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));top:auto!important;width:auto;max-height:75vh}
.kchead{display:flex;align-items:center;gap:4px;padding:8px}
.kchead .mseg{flex:1;min-width:0}
.kcbody{overflow-y:auto;padding:0 8px 8px;min-height:120px}
.kczoek{display:block;width:100%;margin:0 0 8px;padding:6px 10px;border-radius:6px;background:var(--hover);border:0;font:inherit;font-size:14px;color:var(--ink)}
.kcuform{margin:0}
.kcgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:6px}
.kctegel{position:relative;display:block;aspect-ratio:16/10;border-radius:6px;overflow:hidden;background:var(--hover);padding:0}
.kctegel img{width:100%;height:100%;object-fit:cover;display:block}
.kctegel:hover{box-shadow:0 0 0 2px var(--accent)}
.kcmaker{position:absolute;left:4px;bottom:4px;right:4px;font-size:12px;color:var(--muted);background:color-mix(in srgb,var(--bg) 82%,transparent);border-radius:4px;padding:0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.kcleeg{padding:16px 4px;text-align:center}
.dgrid .dcard > a.mcard:has(> .kcover){flex-direction:column}
.dgrid .dcard > a.mcard:has(> .kcover) > .mmain{flex:1;min-height:0}
.klink{display:inline-flex;align-items:center;gap:5px;margin-top:6px;font-size:13px;color:var(--muted);text-decoration:none;max-width:100%}
.klink:hover{color:var(--ink)}
.klink .i{width:14px;height:14px;flex:none}
.klink span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ksjabrij{display:flex;align-items:center;gap:2px}
.ksjabrij>button[role=menuitem]{flex:1;display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:5px;text-align:left;min-width:0}
.ksjabrij>button[role=menuitem]:hover{background:var(--hover)}

/* Agenda als tijdlijn (agenda.js, Har 2 nov 2026): zelfde schalen en kaarten als Acties › Tijdlijn */
.agenda .tlzoom{margin-bottom:8px}
.agfilters{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:2px 0 4px}
.agfilters .grow{flex:1}
.tag.agfilter{gap:4px;cursor:pointer;border:0;font:inherit;font-size:13px;opacity:.55;transition:opacity .15s}
.tag.agfilter.on{opacity:1}
.tag.agfilter .i{width:12px;height:12px}
.tag.agstip{width:8px;height:8px;padding:0;border-radius:99px;align-self:center}
.agdag{position:relative}
.agdag>.tlhplus{position:absolute;top:8px;right:8px}
.agdag .ml1{padding-right:28px}
.agregel{margin:0 6px;padding:3px 0}
.aglist>*{min-width:0}
.agbord .aglist{min-height:8px}
.agbord .aglist .slpplek{height:24px;min-height:24px;border-radius:4px}
.agdag .tlnieuwin{margin:4px 6px 0}

/* Agenda › Tijdlijn (terug, Har 2 nov 2026): jouw dagen links van een lijn, rechts de baan voor de agenda's van anderen (mensenknopje), nu-stip op de lijn */
.agtl{display:grid;grid-template-columns:minmax(0,var(--kaartw,480px)) 26px minmax(0,1fr);justify-content:end;position:relative;margin-top:12px}
.agwk{grid-column:1;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:18px 4px 6px 0;text-align:right}
.agsp{position:relative}
.agsp::before{content:"";position:absolute;top:0;bottom:0;left:12px;width:2px;background:var(--line)}
.agsp.eerste::before{top:14px}
.agsp.node::after{content:"";position:absolute;left:13px;top:20px;width:9px;height:9px;margin-left:-4.5px;border-radius:99px;background:var(--bg);box-shadow:inset 0 0 0 2px var(--faint)}
.agsp.node.heeft::after,.agsp.node.nu::after{background:var(--accent);box-shadow:none}
.agl{padding:4px 0 10px;min-width:0}
.agr{padding:12px 0 10px 8px;min-width:0;display:grid;gap:4px;align-content:start}
.aglane{grid-column:3;font-size:12px;color:var(--faint);padding:0 0 4px 8px;min-height:18px}
.agb{display:flex;gap:6px;align-items:baseline;font-size:13px;line-height:1.35;color:var(--muted);text-decoration:none;overflow-wrap:anywhere;border-radius:4px}
.agb:hover{color:var(--ink)}
.agb .agt{font-size:12px;font-variant-numeric:tabular-nums}
.agdatum{font-size:12px;color:var(--faint)}
.tag.agav{flex:none;width:18px;height:18px;padding:0;justify-content:center;border-radius:99px;font-size:12px;line-height:18px;font-weight:600;transform:translateY(3px)}
#agnu{position:absolute;left:0;height:0;pointer-events:none;z-index:2;transition:top .6s ease}
#agnu .lijn{position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--accent);opacity:.5;border-radius:2px}
#agnu .stip{position:absolute;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:99px;background:var(--accent);box-shadow:0 0 0 3px var(--bg)}
#agnu .lbl{position:absolute;right:14px;top:-10px;font-size:12px;line-height:18px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--bg);background:var(--accent);padding:0 6px;border-radius:99px;white-space:nowrap}
.agmensen{position:fixed;z-index:15;pointer-events:none;right:max(20px,env(safe-area-inset-right,0px));bottom:calc(78px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.agbadge{position:absolute;top:-2px;right:-2px;min-width:20px;height:20px;padding:0 5px;border-radius:99px;background:var(--ink);color:var(--bg);font-size:12px;line-height:20px;font-weight:600;text-align:center}
.agmenu{display:flex;flex-direction:column;align-items:flex-end;gap:8px;margin-right:4px}
.agmens{display:flex;align-items:center;gap:10px;opacity:0;transform:translateY(16px) scale(.8);pointer-events:none;transition:opacity .18s,transform .22s cubic-bezier(.3,1.5,.5,1);transition-delay:calc(var(--i,0) * 45ms)}
.agmenu.open .agmens{opacity:1;transform:none;pointer-events:auto}
.agmenu:not(.open) .agmens{transition-delay:0s}
.agnaam{background:var(--bg);color:var(--ink);font-size:14px;font-weight:500;padding:4px 12px;border-radius:99px;box-shadow:0 0 0 1px var(--line),0 6px 20px rgba(15,15,15,.14);white-space:nowrap}
.tag.agav.groot{width:44px;height:44px;font-size:15px;line-height:44px;transform:none;position:relative;box-shadow:0 6px 20px rgba(15,15,15,.14)}
.agmens.on .tag.agav.groot{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--accent)}
.tag.agav.groot .i{position:absolute;right:-4px;bottom:-4px;width:18px;height:18px;padding:2px;border-radius:99px;background:var(--accent);color:var(--bg);stroke-width:2}
@media (max-width:820px){
  .agtl{grid-template-columns:minmax(0,2.4fr) 22px minmax(0,1fr)}
  .agsp::before{left:10px}.agsp.node::after{left:11px}
  .agmensen{right:max(16px,env(safe-area-inset-right,0px));bottom:calc(var(--tabh) + 74px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-color-scheme:dark){.tag.agav.groot{box-shadow:0 6px 20px rgba(0,0,0,.5)}.agnaam{box-shadow:0 0 0 1px var(--line),0 6px 20px rgba(0,0,0,.5)}}
.agenda .atbody>.agtl{max-width:980px}

/* Aandachtsgebieden op Home (Har, 2 nov 2026): raster van twee kolommen, alle kaarten even groot, de doelen als lijstje */
.ggrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:8px}
.gkaart{display:flex;text-decoration:none;color:inherit;min-height:112px}
.gkaart .mmain{padding:12px 14px;align-content:start;gap:6px}
.gkaart.leeg{opacity:.6}
.gdoelen{display:grid;gap:2px}
.gdoel{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gdoel.gstil{color:var(--faint)}
.gdoel.klaar{color:var(--faint);text-decoration:line-through}
.gebied h1.hello a{color:inherit;text-decoration:none}
.gebied h1.hello[data-gebied]::before{content:"";display:inline-block;width:4px;height:.8em;border-radius:99px;margin-right:12px;vertical-align:-.02em;background:var(--gglow);box-shadow:0 0 8px 1px color-mix(in srgb,var(--gglow) 70%,transparent)}

/* ---------- vaste paginaopbouw (Har, 2 nov 2026) ----------
   Hoofdtabs zonder grote paginatitel: de eerste rij tabjes staat overal direct onder de bovenbalk, op dezelfde hoogte.
   Eerste rij = algemene UI (.mseg, pil). Tweede rij = onderdeel van de pagina: kale tekst met een streep onder de gekozen. */
.page.full>.mbox{margin-top:0}
.atpage>.mseg,.page.full>.mbox>.mseg{margin-bottom:6px}
.atbody .mseg{background:none;padding:0;gap:18px;border-radius:0;box-shadow:none}
.atbody .mseg a{padding:4px 0;border-radius:0;font-size:13px}
.atbody .mseg a.on{background:none;box-shadow:inset 0 -2px 0 var(--ink)}

/* ---------- actieknop (Har, 2 nov 2026): op elke pagina op dezelfde plek, opent zoeken / nieuw / zoom ---------- */
#fab{position:fixed;right:max(20px,env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:19;display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none}
#fab:empty{display:none}
.fabbtn,.fabmini,.fabchat,.fabfilter{pointer-events:auto;display:grid;place-items:center;border-radius:99px;color:var(--ink);background:color-mix(in srgb,var(--kaart) 88%,transparent);box-shadow:var(--kaartsch);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
.fabbtn{width:48px;height:48px}
.fabbtn .i{width:20px;height:20px;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
#fab.open .fabbtn .i,#fab.chatopen .fabbtn .i{transform:rotate(180deg)}
.fabbtn:active,.fabmini:active,.fabchat:active,.fabfilter:active{background:var(--press)}
.fabset{display:flex;flex-direction:column-reverse;align-items:center;gap:10px}
.fabmini{width:40px;height:40px;opacity:0;transform:translateY(10px) scale(.85);pointer-events:none;transition:opacity .15s,transform .18s;transition-delay:calc(var(--i) * 30ms)}
.fabmini .i{width:18px;height:18px}
#fab.open .fabmini{opacity:1;transform:none;pointer-events:auto}
@media (max-width:820px){
  #fab{right:max(16px,env(safe-area-inset-right,0px));bottom:calc(var(--tabh) + 16px + env(safe-area-inset-bottom,0px))}
}
/* losse chatknop (Har, 10 nov 2026): op een breed scherm links naast de actieknop, zelfde vorm; aan = blauw icoon */
.fabchat,.fabfilter{position:absolute;right:calc(100% + 12px);bottom:0;width:48px;height:48px}
.fabchat .i,.fabfilter .i{width:20px;height:20px}
.fabchat.on,.fabfilter.on{color:var(--accent)}
@media (max-width:820px){.fabchat{display:none}}
/* bladeren door een gefilterde lijst (Har, 11 nov 2026): filter-icoon zichtbaar naast de actieknop, blauw = filter aan */
.fabfilter.naastchat{right:calc(100% + 72px)}
/* bladeren: de titel van de buur staat aan de rand klaar terwijl je veegt */
.bladpeek{position:fixed;top:50%;z-index:60;max-width:min(60vw,320px);padding:10px 14px;border-radius:var(--kaartr);font-size:14px;font-weight:600;color:var(--ink);background:color-mix(in srgb,var(--kaart) 88%,transparent);box-shadow:var(--kaartsch);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;opacity:0;margin-top:-20px}
.bladpeek.rechts{right:max(12px,env(safe-area-inset-right,0px))}
.bladpeek.links{left:max(12px,env(safe-area-inset-left,0px))}
body.bladsleept{cursor:grabbing;user-select:none}
html.kanbladeren,html.kanbladeren body{overscroll-behavior-x:none}   /* alleen waar je bladert: elders werkt terugvegen van de browser gewoon */
@media print{#fab{display:none!important}}

/* uitgeklapte zoekbalk: zweeft over de pagina, schuift niks op (plek gezet in fab.js) */
.mtool.mzoek{position:fixed;z-index:18;display:flex;gap:6px;align-items:center;padding:6px;border-radius:8px;background:color-mix(in srgb,var(--bg) 70%,transparent);box-shadow:0 0 0 1px var(--line),0 4px 14px rgba(15,15,15,.12);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}

/* ---------- Post: de nieuwe mailbox (post.js). Telefoon: lijst of mail; desktop: lijst links, mail rechts ---------- */
.post{display:grid;grid-template-columns:200px minmax(0,var(--kaartw,480px)) minmax(0,1fr);gap:20px;align-items:start;margin:0 0 20px;min-width:0}
/* Post als mailprogramma (Har, 10 nov 2026): mappen | lijst | mail */
.postmappen{position:sticky;top:12px;display:grid;gap:10px;min-width:0;max-height:calc(100vh - 140px);overflow-y:auto;overscroll-behavior:contain}
.pmacc{display:grid;gap:1px;min-width:0}
.pmkop{display:flex;align-items:center;gap:4px;font:inherit;font-size:12px;color:var(--muted);background:none;border:0;padding:4px 6px;cursor:pointer;text-align:left;min-width:0}
.pmkop span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pmkop .i{width:12px;height:12px;transform:rotate(90deg);transition:transform .15s}
.pmkop .i.dicht{transform:none}
.pmmap{display:flex;align-items:center;gap:8px;padding:5px 8px 5px calc(8px + var(--d,0) * 14px);border-radius:8px;color:var(--ink);text-decoration:none;font-size:14px;min-width:0}
.pmmap span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pmmap .i{width:15px;height:15px;color:var(--muted);flex:none}
.pmmap:hover{background:var(--hover)}
.pmmap.on{background:var(--press)}
.pmmap.nieuw{font-weight:600}
.pmn{font-size:12px;color:var(--accent);font-variant-numeric:tabular-nums}
.postlijst{display:flex;flex-direction:column;gap:6px;min-width:0}
.plkop{display:flex;align-items:baseline;gap:8px;min-width:0}
.pltitel{margin:0;font-size:15px;font-weight:600;line-height:1.25}
.plrijen{display:grid;min-width:0;background:var(--kaart);border-radius:var(--kaartr,16px);box-shadow:var(--kaartsch);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);overflow:hidden}
.plrijen > .mempty{padding:24px}
.plrij{position:relative;display:grid;grid-template-columns:28px 16px minmax(0,1fr) 28px;align-items:center;min-width:0;border-top:1px solid var(--line);background:var(--kaart);transform:translateX(var(--veeg,0));transition:transform .2s}
.plrij:first-child{border-top:0}
.plrij.veegt{transition:none}
.plrij:hover{background:color-mix(in srgb,var(--kaart) 88%,var(--hover))}
.plrij.on{background:var(--accent-soft)}
.plrij.gaat{opacity:.5}
.plmain{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,150px) 64px;align-items:center;gap:10px;padding:8px 4px;color:inherit;text-decoration:none;min-width:0}
.plonderwerp,.plwie{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plonderwerp{font-size:14px}
.plwie{font-size:13px;color:var(--muted)}
.pldatum{font-size:12px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.plrij.ongelezen .plonderwerp,.plrij.ongelezen .plwie{font-weight:600;color:var(--ink)}
.plster,.plstip{display:grid;place-items:center;width:28px;height:32px;background:none;border:0;padding:0;color:var(--faint);cursor:pointer}
.plster .i{width:14px;height:14px}
.plster:hover{color:var(--ink)}
.plster.on,.postknoppen .iconbtn.on{color:var(--accent)}
.plster.on .i path,.postknoppen .iconbtn.on .i path{fill:currentColor}
.plclip{display:grid;place-items:center;color:var(--muted)}
.plclip .i{width:12px;height:12px}
.plrij.ver[data-veegrichting=links]{box-shadow:inset -4px 0 0 var(--accent)}
.plrij.ver[data-veegrichting=rechts]{box-shadow:inset 4px 0 0 var(--accent)}
.plterug{display:none}
.mhtekst{width:100%;font:inherit;font-size:14px;padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--ink);resize:vertical;box-sizing:border-box;margin:8px 0}
@media (max-width:1180px){
  .post{grid-template-columns:180px minmax(0,1fr)}
  .post.leest .postlijst{display:none}
  .plterug{display:inline-grid}
}
.postlees{position:sticky;top:12px;min-width:0;max-height:calc(100vh - 140px);overflow-y:auto;overscroll-behavior:contain}
.postleeg{display:grid;place-items:center;min-height:240px;color:var(--faint)}
.postleeg .i{width:28px;height:28px}
.postkop{display:flex;align-items:center;gap:6px;min-width:0}
.posttitel{margin:0;font-size:24px;font-weight:700;line-height:1.25;overflow-wrap:anywhere}
.postknoppen{display:flex;align-items:center;gap:2px;margin:8px 0 10px;flex-wrap:wrap}
.postkaartlink{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);text-decoration:none;margin:0 0 10px}
.postkaartlink:hover{color:var(--ink)}
.postkaartlink .i{width:14px;height:14px}
.postgesprek{display:grid;gap:8px}
.postbericht{display:grid;gap:8px;min-width:0;padding:12px 14px}
.postbericht.dicht{display:flex;align-items:center;gap:10px;text-align:left;font:inherit;color:inherit;cursor:pointer}
.postbericht.dicht:hover{background:color-mix(in srgb,var(--kaart) 88%,var(--hover))}
.postberkop{display:flex;align-items:flex-start;gap:10px;min-width:0}
.postvan{display:grid;min-width:0}
.postvan b{font-weight:600}
.postvan .mdesc{font-size:13px}
.postaan{overflow-wrap:anywhere}
.posttekst{font-size:15px;line-height:1.5;overflow-wrap:anywhere;white-space:pre-wrap}
.postbericht .mailview{margin:0}
@media (max-width:820px){
  .post{grid-template-columns:minmax(0,1fr)}
  .post.leest .postlijst,.post.leest .postmappen,.post.lijstopen .postmappen{display:none}
  .post:not(.leest) .postlees,.post:not(.lijstopen) .postlijst{display:none}
  .postlees,.postmappen{position:static;max-height:none;overflow:visible}
  .pmmap{padding-top:9px;padding-bottom:9px;font-size:15px}
  .plrij{grid-template-columns:24px minmax(0,1fr) 28px}
  .plclip{display:none}
  .plmain{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"wie datum" "onderwerp onderwerp";gap:2px 8px;padding:10px 4px}
  .plwie{grid-area:wie;font-size:14px;color:var(--ink)}
  .plonderwerp{grid-area:onderwerp;font-size:13px;color:var(--muted)}
  .pldatum{grid-area:datum}
  .mhtekst{font-size:16px}
}

/* Dagboek (dagboek.js, Har 6 nov 2026): tijdlijn zoals de Agenda, nieuwste bovenaan; per week een weekkaart, per dag de momenten als gekleurde regels met een icoon */
.dagboek .tlzoom{margin-bottom:8px}
.dbtl{display:grid;grid-template-columns:76px 26px minmax(0,var(--kaartw,480px));position:relative;margin-top:12px}
.dbwk{padding:14px 0 10px;min-width:0}
.dbweek{display:flex;text-decoration:none;color:inherit}
.dbweek .mmain{cursor:default;padding-right:14px;border-radius:8px}
a.dbweek .mmain{cursor:pointer}
.dbweek.leeg .mtitle{color:var(--muted)}
.dbweek .mmain:hover{background:none}
.dbweek .ml1 .mtitle{white-space:normal;overflow:visible;text-overflow:clip}
.dbdag{display:flex;flex-direction:column;align-items:flex-end;gap:2px;padding:14px 4px 10px 0;min-width:0}
.dbdn{font-size:12px;font-weight:600;color:var(--muted);text-align:right;line-height:1.3}
.dbdag.vandaag .dbdn{color:var(--accent)}
.dbr{display:grid;gap:4px;align-content:start;padding:8px 0 10px 8px;min-width:0}
.dbleeg{font-size:13px;color:var(--faint);padding:6px 0}
.dbm{display:flex;align-items:center;gap:8px;min-width:0;padding:4px 10px 4px 4px;border-radius:99px;text-decoration:none;color:var(--ink);font-size:14px;line-height:1.3;background:var(--hover)}
.dbm[data-gebied]{background:color-mix(in srgb,var(--gtint) 70%,transparent)}
.dbm:hover{background:var(--press)}
.dbic{flex:none;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:99px;background:var(--bg);color:var(--muted)}
.dbm[data-gebied] .dbic{color:var(--gglow)}
.dbic .i{width:14px;height:14px}
.dbtx{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dbm.mijl{font-weight:600}
.dbm.mijl .dbic{background:var(--accent);color:var(--bg)}
.dbfotos{display:flex;gap:4px;padding-top:2px}
.dbfoto{flex:none;width:56px;height:56px;border-radius:6px;overflow:hidden;background:var(--hover)}
.dbfoto img{width:100%;height:100%;object-fit:cover;display:block}
.dbmeer{align-self:center;font-size:13px;color:var(--muted);padding-left:4px}
.dbbalk{display:flex;gap:2px;height:6px;border-radius:99px;overflow:hidden;margin-top:8px}
.dbstuk{background:var(--faint);min-width:6px}
.dbstuk[data-gebied]{background:var(--gglow)}
.dbtel{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:6px}
.dbteller{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.dbteller .i{width:14px;height:14px}
.dbteller[data-gebied] .i{color:var(--gglow)}
.dbmijl{display:grid;gap:2px;margin-top:6px}
.dbmijlr{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;min-width:0}
.dbmijlr .i{flex:none;width:14px;height:14px;color:var(--accent)}
.dbmijlr span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:700px){.dbtl{grid-template-columns:64px 22px minmax(0,1fr)}.dbtl .agsp::before{left:10px}.dbtl .agsp.node::after{left:11px}}

/* Home: tabjes Activiteit en Doelen, vegen wisselt (Har, 8 nov 2026, feed.js) */
.hswipe{display:flex;margin:0 -16px;align-items:flex-start;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.hswipe::-webkit-scrollbar{display:none}
.hpane{flex:0 0 100%;min-width:0;padding:0 16px 24px;scroll-snap-align:start;scroll-snap-stop:always} /* 16px opzij en 24px onder: ruimte voor de kaartschaduw (kaartstijl C) */
.feed>.sec{margin-top:14px}
.feed{padding-top:2px} /* zonder filters erboven: ruimte voor de kaartrand (box-shadow), anders snijdt .hswipe hem af */
/* feedkaart (Har, 10 nov 2026): per persoon een regel met iconen; stipje rechts zoals het mail-lampje */
.fkaart .mmain{text-decoration:none;color:inherit}
.fkaart .flijst{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.frij{display:flex;align-items:center;gap:10px;min-width:0;font-size:12px;color:var(--muted);line-height:20px}
.fnaam{color:var(--ink);min-width:44px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frij.ik,.frij.ik .fnaam{color:var(--faint)}
.fic{display:inline-flex;align-items:center;gap:2px;flex:none}
.fic .i{width:13px;height:13px}
.fmij{color:var(--accent)}
/* feedregel (Har, 10 nov 2026, optie C4): compact zoals mail, één regel per pagina in één kaart, lijntjes ertussen.
   Nieuw = titel dik in --ink, tijd blauw; gelezen = titel grijs. Stipje rechts zoals het mail-lampje. */
.flijstc{max-width:720px;overflow:hidden} /* kaartstijl: gedeelde kaartregel */
.fregel{display:flex;align-items:stretch;border-top:1px solid var(--line)}
.fregel:first-child{border-top:0}
.fr-main{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:10px 4px 10px 14px;text-decoration:none;color:inherit;font-size:14px;line-height:20px}
.fr-titel{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.fregel.unread .fr-titel{color:var(--ink);font-weight:700}
.fr-wie{flex:none;max-width:40%;display:inline-flex;align-items:center;gap:3px;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr-wie.mij{color:var(--accent)}
.fr-wie .i{width:13px;height:13px}
.fr-titel>.i{width:16px;height:16px;vertical-align:-3px;margin-right:2px} /* soort-icoon (feed per soort): binnen de regelhoogte */
.fr-tijd{flex:none;font-size:12px;color:var(--muted);white-space:nowrap}
.fregel.unread .fr-tijd{color:var(--accent);font-weight:600}
/* wegtikken en optellen (Har, 11 nov 2026): alleen het cijfer beweegt, met een korte gloed; omlaag groen (afgerond),
   omhoog blauw (nieuw). Regels schuiven met een transform (feed.js › fFlip), niet met hoogte. */
.fr-wie[data-fteller]{border-radius:8px;padding:0 5px;margin-right:-5px}
/* verwerkt (Har, 11 nov 2026): niks meer open = grijs en onderaan, nog wel aan te tikken; los van gelezen (het stipje) */
.fregel.verwerkt{opacity:.5;transition:opacity .3s ease}
.fregel.verwerkt .fr-titel,.fregel.verwerkt .fr-tijd{color:var(--faint);font-weight:400}
.fregel.weg{cursor:default}   /* pagina bestaat niet meer: alleen de titel (Har, 11 nov 2026) */
.fregel.weg::after{content:"";flex:0 0 40px}   /* lege plek van het stipje: tijd blijft onder die van de andere regels */
@media (hover:hover){.fregel.weg:hover{background:none}}   /* niet aan te tikken: geen hover-vlak */
.fr-wie.tik{animation:ftik .55s ease}
.fr-wie.tik.af{--fgloed:var(--glgroen)}
.fr-wie.tik.op{--fgloed:var(--accent)}
@keyframes ftik{0%{transform:translateY(-3px) scale(1.25);color:var(--fgloed);background:color-mix(in srgb,var(--fgloed) 22%,transparent);box-shadow:0 0 10px color-mix(in srgb,var(--fgloed) 45%,transparent)}
  60%{color:var(--fgloed);background:color-mix(in srgb,var(--fgloed) 12%,transparent);box-shadow:0 0 6px color-mix(in srgb,var(--fgloed) 20%,transparent)}
  100%{transform:none;background:transparent;box-shadow:none}}
@media (prefers-reduced-motion:reduce){.fr-wie.tik{animation-duration:.01s}}
.fr-lamp{flex:0 0 40px;display:grid;place-items:center}
.fr-lamp>.i{color:var(--muted)} /* icoonknop in een feedregel (Privé betaald): grijs zoals .iconbtn */
@media (hover:hover){.fregel:hover{background:var(--hover)}.fr-lamp:hover .lamp{box-shadow:inset 0 0 0 1.5px var(--ink)}.fr-lamp:hover .lamp.on{box-shadow:0 0 0 6px var(--accent-soft)}}
/* feedfilter uit de actieknop (Har, 10 nov 2026, optie C): paneeltje boven de knop, stijl van het chatfilter */
.ffpop{position:fixed;z-index:20;right:max(20px,env(safe-area-inset-right,0px));bottom:calc(80px + env(safe-area-inset-bottom,0px));width:220px;max-height:min(520px,calc(100dvh - 140px));overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding:6px;border-radius:12px;background:var(--bg);box-shadow:0 0 0 1px var(--line),0 8px 22px rgba(15,15,15,.12);transform-origin:calc(100% - 24px) calc(100% + 56px)}
.ffpop.in{animation:kchatin .18s ease-out}
.ffgroep{display:flex;flex-direction:column;gap:2px}
.ffgroep+.ffgroep{border-top:1px solid var(--line);padding-top:6px}
.ffpop .chat-schak{min-width:0}
@media (max-width:820px){.ffpop{right:calc(max(16px,env(safe-area-inset-right,0px)) + 56px);bottom:calc(var(--tabh) + 16px + env(safe-area-inset-bottom,0px));transform-origin:calc(100% + 32px) calc(100% - 24px)}}
.ffpop.uit{animation:kchatweg .15s ease-in forwards;pointer-events:none} /* sluiten: terug de actieknop in (Har, 10 nov 2026) */
@media (prefers-reduced-motion:reduce){.ffpop.in,.ffpop.uit{animation:none}}
/* venster vanuit de feed: kaart bovenin, titel als link */
.chat-titel{flex:1;min-width:0;font-weight:500;font-size:14px;color:var(--ink);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-titel:hover{text-decoration:underline}
.chat-info{display:flex;flex-direction:column;gap:2px;padding:8px 14px;border-bottom:1px solid var(--line);font-size:13px;flex:none}
.chat-oms{color:var(--ink)}
.fmeer{margin-top:12px}
.hdoelen{padding-top:14px}
.kverm .kaik span:not(.muted){color:var(--muted)}

/* ---------- telefoon-fixes (Har, 8 nov 2026) ---------- */
/* koppen inklappen: pijltje links van elke kop, alles eronder verdwijnt tot de volgende kop van gelijk of hoger niveau */
.edhost{position:relative}
.hfolds{position:absolute;top:0;left:0;width:0;height:0}
.hfold{position:absolute;left:-24px;width:22px;height:22px;display:grid;place-items:center;border-radius:4px;color:var(--faint);opacity:0;transition:opacity .15s}
.hfold .i{width:14px;height:14px;transform:rotate(90deg);transition:transform .15s}
.hfold.dicht .i{transform:none}
@media (hover:hover){.hfold:hover{background:var(--hover);color:var(--muted)}}
.edhost:hover .hfold,.hfold.dicht,.hfold:focus-visible{opacity:1}
@media (hover:none){.hfold{opacity:1}}
@media (max-width:820px){.hfold{left:-18px;width:18px}}
.tt .hverborgen{display:none!important}
/* bewerken waar je tikt: zwevend potloodje op de plek waar je tikte */
#tikbewerk{position:fixed;z-index:45;width:36px;height:36px;border-radius:99px;background:var(--bg);color:var(--ink);box-shadow:0 0 0 1px var(--line),0 4px 14px rgba(15,15,15,.14)}
#tikbewerk .i{width:18px;height:18px}
/* de regel waar je typt komt nooit achter de bovenbalk of de navigatiebalk */
html{scroll-padding-top:calc(68px + env(safe-area-inset-top,0px))}
@media (max-width:820px){
  html{scroll-padding-bottom:calc(var(--tabh) + 24px + env(safe-area-inset-bottom,0px))}
  /* navigatiebalk zakt weg bij naar beneden scrollen en tijdens typen */
  #tabs{transition:transform .2s ease}
  body.navweg #tabs,body.typt #tabs{transform:translateY(100%)}
  #fab{transition:transform .2s ease}
  body.navweg #fab,body.typt #fab{transform:translateY(calc(var(--tabh) + env(safe-area-inset-bottom,0px)))}
  /* chat open: de knop blijft naast de chat staan */
  body.navweg #fab.chatopen,body.typt #fab.chatopen{transform:none}
  /* Home compacter: minder hoogte en wit per aandachtsgebied */
  .gkaart{min-height:0}
  .gkaart .mmain{padding:10px 12px;gap:4px}
  .ggrid{gap:6px}
}
@media (prefers-reduced-motion:reduce){.hfold,.hfold .i{transition:none}}

/* omlaag trekken = synchroniseren (Har, 8 nov 2026): zwevend bolletje bovenaan, de pagina zelf schuift niet */
html,body{overscroll-behavior-y:contain}
.ptr{position:fixed;left:50%;top:env(safe-area-inset-top,0px);z-index:80;width:40px;height:40px;border-radius:99px;display:grid;place-items:center;background:color-mix(in srgb,var(--bg) 70%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);color:var(--muted);box-shadow:0 0 0 1px var(--line),0 4px 14px rgba(15,15,15,.12);transform:translate(-50%,-48px);opacity:0;pointer-events:none;transition:transform .2s,opacity .2s}
.ptr .i{width:18px;height:18px}
.ptr.ok{color:var(--accent)}
.ptr.draai .i{animation:spin 1.2s linear infinite}
@media (prefers-reduced-motion:reduce){.ptr.draai .i{animation:none}}
.ptr.trek{transition:none}

/* Bestanden als verkenner (Har, 8 nov 2026) */
.vk .flist{margin-top:0}
.vk .fopen>.i{flex:none;width:18px;height:18px;color:var(--muted)}
.vkmap .fname{font-weight:500}
.vknaam{display:flex;flex-direction:column;min-width:0}
.vknaam .small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vkmeta{flex:none;white-space:nowrap}
.vkplek{flex:none;width:22px}
.vkmap.drop{background:var(--hover);border-radius:6px}
.vk .bmulti{flex:none}
.vaudio{display:flex;flex-direction:column;align-items:center;gap:14px;margin:auto;padding:24px;color:inherit;text-align:center;max-width:520px;width:100%}
.vaudio .i{width:40px;height:40px;opacity:.6}
.vaudio audio{width:100%}
video.vmedia{max-width:100%;max-height:100%;margin:auto;display:block}
/* Chat van Bolwerk (Har, 4 nov 2026; opnieuw 10 nov 2026), in de Chatstijl: links de gesprekken als kaarten,
   rechts het gesprek in een kolom van hooguit --chatw, invoerveld onderaan in dezelfde kolom.
   Telefoon: lijst of gesprek, het gesprek vult het scherm tussen bovenbalk en navigatiebalk. */
.page.tcpage{padding-bottom:0}
.tc{display:grid;grid-template-columns:minmax(0,var(--kaartw,480px)) minmax(0,1fr);gap:20px;height:calc(100dvh - 104px);min-height:320px}
.tclijst{display:flex;flex-direction:column;gap:6px;overflow-y:auto;min-height:0;padding:2px}
.tckaart .mmain{width:100%;text-align:left;border:0;background:none;font:inherit;color:inherit;text-decoration:none;cursor:pointer}
.tckaart .mtitle .i{width:14px;height:14px;vertical-align:-2px;color:var(--muted)}
.tckaart.on{box-shadow:0 0 0 1px var(--accent),0 2px 4px rgba(15,15,15,.04)}
.tckaart.on .mmain{background:var(--accent-soft)}
.tcgesprek{display:flex;flex-direction:column;min-height:0;min-width:0;max-width:var(--chatw,640px);position:relative}
.tcgesprek>.chat-kopbalk{padding-left:0}
.tcgesprek .chat-scroll{flex:1;overflow-y:auto;margin:0;padding:12px 0;overscroll-behavior:contain}
.tcgesprek .chat-onder{padding:8px 0 0;margin-right:56px}
.tcgesprek .ksug{padding:0 0 6px}
.tcantw{display:flex;align-items:center;gap:4px;padding:6px 0 0}
.tcantw .tccitaat{flex:1;margin:0}
.tccitaat{display:block;margin:2px 0 4px;padding:2px 0 2px 8px;border-left:2px solid var(--line);font-size:13px;color:var(--muted);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tccitaat b{font-weight:500;color:var(--ink)}
.tcbest{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:4px}
.tcbest .bimg img{max-width:min(320px,100%);max-height:320px;border-radius:8px;display:block}
.tcbest .tcvideo{max-width:min(360px,100%);max-height:320px;border-radius:8px}
.tcbest .tcaudio{width:min(300px,100%);height:36px}
/* gelezen-vinkjes en dempen (Har, 10 nov 2026, WhatsApp als voorbeeld): grijs = verstuurd, accent = gelezen */
.tcvink{display:inline-flex;margin-left:4px;vertical-align:-3px;color:var(--muted)}
.tcvink .i{width:15px;height:15px}
.tcvink.gelezen{color:var(--accent)}
.tcdemp{display:inline-flex;margin-right:6px;vertical-align:-2px;color:var(--muted)}
.tcdemp .i{width:13px;height:13px}
/* naar rechts vegen = antwoorden (telefoon); het pijltje verschijnt links tijdens het vegen */
.chat-msg.tcveeg{transition:none}
.chat-msg.tcterug{transition:transform .18s ease}
.chat-msg[data-tcmsg]{position:relative;touch-action:pan-y}
.tcveegpijl{position:absolute;left:-28px;top:50%;margin-top:-10px;width:20px;height:20px;color:var(--muted);opacity:0}
.tcveegpijl .i{width:20px;height:20px}
.chat-msg.tcflits{background:var(--hover);border-radius:8px;transition:background .6s}
.tcopname{align-items:center;padding:4px 4px 4px 12px}
.tcrec{width:10px;height:10px;border-radius:50%;background:var(--red);flex:none;animation:tcrec 1.2s infinite ease-in-out}
#tcrectijd{font-size:14px;font-variant-numeric:tabular-nums;color:var(--ink);padding:6px 0}
@keyframes tcrec{50%{opacity:.35}}
.tckaartpop{position:absolute;left:0;right:0;bottom:56px;z-index:5;display:flex;flex-direction:column;gap:6px;padding:8px;border-radius:12px;background:var(--bg);box-shadow:0 0 0 1px var(--line),0 8px 22px rgba(15,15,15,.12);animation:kchatin .15s ease-out;transform-origin:16px 100%}
.tckaartlijst{display:flex;flex-direction:column;max-height:260px;overflow-y:auto}
.tckaartrij{display:flex;align-items:center;gap:8px;padding:6px 8px;border:0;border-radius:6px;background:none;color:var(--ink);font:inherit;font-size:14px;text-align:left;cursor:pointer;min-width:0}
.tckaartrij:hover{background:var(--hover)}
.tckaartrij span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#tabs .tab{position:relative}
#tabs .tab .badge{position:absolute;top:2px;left:calc(50% + 6px)}
@media (max-width:820px){
  .tc{grid-template-columns:minmax(0,1fr);height:calc(100dvh - 44px - var(--tabh) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 36px)}
  .tc.tcopen .tclijst,.tc:not(.tcopen) .tcgesprek{display:none}
  .tcgesprek{max-width:none}
  #chatIn{font-size:16px}
}
@media (prefers-reduced-motion:reduce){.tcrec,.tckaartpop{animation:none}}
/* verzendknop pas bij typen (Chatstijl, Har 10 nov 2026: enter-icoon zonder bolletje, .chat-stuur); leeg = in de chat van
   Bolwerk de microfoon op die plek als je spraak mag sturen */
.chat-invoer.metmic:not(.heeft) .chat-stuur,.chat-invoer.metmic.heeft [data-tcmic]{display:none}
.chat-invoer [data-tcmic]{width:28px;height:28px;margin:2px} /* zelfde plek en maat als .chat-stuur: niks verspringt */
/* chatgroepen (Har, 10 nov 2026): zwevend venster over de chat met naam en leden; ster = beheerder */
.tc{position:relative}
.tcgroeppop{position:absolute;left:0;top:0;z-index:6;width:min(400px,100%);max-height:100%;display:flex;flex-direction:column;border-radius:16px;background:var(--bg);box-shadow:0 0 0 1px var(--line),0 8px 22px rgba(15,15,15,.12),0 16px 40px rgba(15,15,15,.10);overflow:hidden;animation:kchatin .15s ease-out;transform-origin:24px 0}
.tcgbody{display:flex;flex-direction:column;gap:8px;padding:12px 14px;overflow-y:auto;min-height:0}
.tcgnaam{font-size:15px;padding:8px 12px;border-radius:12px;background:var(--hover);box-shadow:0 0 0 1px var(--line)}
.tcgnaam:focus{box-shadow:0 0 0 1px var(--accent)}
.tcgleden{display:flex;flex-direction:column}
.tcgrij{display:flex;align-items:center;gap:4px;min-width:0}
.tcglid{flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding:6px 8px;border:0;border-radius:6px;background:none;color:var(--muted);font:inherit;font-size:14px;text-align:left;cursor:pointer}
.tcglid:hover:not(:disabled){background:var(--hover)}
.tcglid:disabled{cursor:default}
.tcglid span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tcgrij.in .tcglid{color:var(--ink);font-weight:500}
.tcgbeh{color:var(--faint)}
.tcgbeh.on{color:var(--accent)}
.tcgbeh:disabled{cursor:default}
.tcgonder{display:flex;justify-content:flex-end;padding:8px 14px 12px;border-top:1px solid var(--line)}
@media (prefers-reduced-motion:reduce){.tcgroeppop{animation:none}}
@media (max-width:820px){.tcgnaam{font-size:16px}} /* zoals #chatIn: telefoon zoomt niet in bij typen */
/* Filtersysteem en kale tekst (Har, 10 nov 2026): geen pillen meer voor tabjes, keuzes of labels.
   Tabjes: kale tekst, gekozen = dikgedrukt in --ink, de rest kleiner en grijs. Filters zitten in het paneeltje
   uit de actieknop (#ffpop, zelfde stijl). Labels op kaarten (L3): grijze tekst naast elkaar, zonder pil en zonder stip. */
.mseg,.atbody .mseg{background:none;padding:0;gap:18px;border-radius:0;box-shadow:none;align-items:baseline}
.mseg a,.mseg button{flex:none;background:none;box-shadow:none;border-radius:0;padding:4px 0;font-size:13px;font-weight:400;color:var(--muted)}
.mseg a:hover,.mseg button:hover{background:none;color:var(--ink)}
.mseg a.on,.mseg button[aria-pressed="true"],.mseg button[aria-checked="true"],.atbody .mseg a.on{background:none;box-shadow:none;color:var(--ink);font-weight:500;font-size:14px}
.atbody .mseg a{font-size:12px}.atbody .mseg a.on{font-size:13px}
#vpop .mseg button,.kchead .mseg a{font-size:12px}
.segcount{min-width:0;padding:0;border-radius:0;background:none;color:var(--accent);font-size:inherit;line-height:inherit;font-weight:500}
.fabmini.aan{color:var(--accent)}
:is(.mfoot .mlabels,.khchips){gap:10px}
:is(.mfoot .mlabels,.khchips) :is(.tag,.mstat,.mchip,.mst){background:none!important;border:0;border-radius:0;padding:0;margin:0;font-size:12px;font-weight:400;line-height:18px;color:var(--muted)!important}
:is(.mfoot .mlabels,.khchips) .mchip.on{color:var(--ink)!important;font-weight:500}
#vpop .mseg{gap:12px;padding:0 8px 6px}#vpop .mseg button{flex:1}
/* Zoeken onderin (Har, 10 nov 2026): de zoekbalk en het zoekvenster openen op dezelfde plek als de chat, boven de
   actieknop, dicht bij het zoek-icoon. Breed scherm rechts boven de knop (400px), telefoon links naast de knop tot de rand.
   Het invoerveld staat onderaan, de resultaten erboven. */
.mtool.mzoek{top:auto;left:auto;right:max(20px,env(safe-area-inset-right,0px));bottom:calc(80px + env(safe-area-inset-bottom,0px));width:400px;border-radius:12px}
#search{align-items:flex-end;justify-content:flex-end;padding:16px max(20px,env(safe-area-inset-right,0px)) calc(80px + env(safe-area-inset-bottom,0px)) 16px;background:rgba(15,15,15,.12)}
.sbox{max-width:400px;max-height:min(640px,calc(100dvh - 140px));flex-direction:column-reverse;border-radius:16px}
.sinput{border-bottom:0;border-top:1px solid var(--line)}
@media (max-width:820px){
  .mtool.mzoek{left:max(8px,env(safe-area-inset-left,0px));right:calc(max(16px,env(safe-area-inset-right,0px)) + 56px);width:auto;bottom:calc(var(--tabh) + 16px + env(safe-area-inset-bottom,0px))}
  #search{padding:16px calc(max(16px,env(safe-area-inset-right,0px)) + 56px) calc(var(--tabh) + 16px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px))}
  .sbox{max-width:none;max-height:60dvh}
}
/* actieknop boven het zoekvenster, zodat het omgedraaide dakje het kan sluiten (Har, 10 nov 2026) */
#fab.boven{z-index:51}
/* zoekbalk en zoekvenster poppen open uit de actieknop, zoals de chat (Har, 10 nov 2026) */
.mtool.mzoek.in,#search:not([hidden]) .sbox{animation:kchatin .2s cubic-bezier(.2,.8,.2,1);transform-origin:100% 100%}
#search:not([hidden]){animation:zoekdim .2s ease-out}
@keyframes zoekdim{from{background:transparent}}
/* en bij sluiten weer terug de actieknop in (Har, 10 nov 2026) */
#search.uit .sbox,.mtool.mzoek.uit{animation:kchatweg .15s ease-in forwards;transform-origin:100% 100%;pointer-events:none}
#search.uit{animation:zoekdimweg .15s ease-in forwards;pointer-events:none}
@keyframes kchatweg{to{opacity:0;transform:scale(.2)}}
@keyframes zoekdimweg{to{background:transparent}}
@media (prefers-reduced-motion:reduce){.mtool.mzoek.in,.mtool.mzoek.uit,#search:not([hidden]),#search:not([hidden]) .sbox,#search.uit,#search.uit .sbox{animation:none}}
/* Uitgeklapte kaart (Har, 10 nov 2026): geen accentkleur (zie .mcard.open en .mkic hierboven) */
/* openen en samenvoegen als icoontjes rechtsonder */
.mdacts{justify-content:flex-end;gap:2px;padding:6px 8px}
/* mails binnen een kaart: platte rijen met een lijntje ertussen, hooguit 4 in beeld, de rest scrolt */
.msubs{gap:0;padding:0;max-height:228px;overflow-y:auto;overscroll-behavior:contain}
.msubs.flat{max-height:none;overflow:visible}
.msubs .mcard.sub{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border-radius:0;margin:0}
.msubs .mcard.sub.open > .mrow{border-radius:0}
.msubs .mcard.sub + .mcard.sub{border-top:1px solid var(--line)}
.msubs .mcard.sub .mmain{padding-top:8px;padding-bottom:8px;gap:2px}
.msubs .mcard.sub .mtitle{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msubs .mcard.sub .mwhen{white-space:nowrap}
.msubs .mcard.sub .mdesc{font-size:12px;-webkit-line-clamp:1}
/* rij is lager dan een kaart: kruisje boven, lampje onder (niet over elkaar), afmelden als icoontje links van het lampje */
.msubs .mcard.sub .mside{justify-content:flex-start}
.msubs .mcard.sub .uitx{margin-top:4px}
.msubs .mcard.sub .mside .mlamp{bottom:3px;width:24px;height:24px}
.msubs .mcard.sub .mside .unsubbtn,.msubs .mcard.sub .mside .unsubdone{position:absolute;right:40px;bottom:3px;width:24px;height:24px;padding:0;justify-content:center;font-size:0;gap:0;background:none;color:var(--faint);border-radius:99px}
.msubs .mcard.sub .mside .unsubbtn:hover{background:var(--hover);color:var(--ink)}
.msubs .mcard.sub:has(.unsubbtn,.unsubdone) .mdesc{padding-right:30px}