/* Makelab HQ, stijl 1b verfijnd (ontwerp tweede brein, richting 1: artifacts/hq/tweede-brein/ontwerp.html).
   Warm papier, inkt, oranje; Schibsted Grotesk (koppen, grote getallen) + Instrument Sans (tekst, labels, knoppen). Geen monospace.
   Harde schaduw alleen op de primaire knop en de actieve teller. Kleuren alleen via de tokens hieronder. */
:root {
  --bg: #F6F2EC; --panel: #FFFFFF; --sunk: #EFE9E1; --ink: #18130F; --ink2: #463D35; --muted: #75695E; --line: #E4DCD2; --strong: #18130F;
  --acc: #F28A2E; --acc-ink: #A24A08; --acc-soft: #FCE9D6; --on-acc: #18130F; --link: #A24A08;
  --nav: #18130F; --nav-ink: #F6F2EC; --nav-muted: #B3A89C; --nav-hi: #2A231D;
  --ok: #1E6B40; --ok-bg: #DDEEE3; --warn: #8A5E00; --warn-bg: #FAEFCF; --bad: #B2283F; --bad-bg: #F7E1E5; --info: #2F4E8C; --info-bg: #E2E9F6;
  --scrim: rgba(24,19,15,.5);
  /* stappen/deeltaken: gevuld = klaar/bezig/vast/wacht, open = alleen rand (a11y F06: ≥ 3:1 op panel) */
  --seg-klaar: #2E8B57; --seg-bezig: #C96A12; --seg-vast: #B2283F; --seg-wacht: #B98A10; --seg-open: #9A8F84;
  /* zachte projecttinten (matrix, groepskoppen) */
  --t-oranje: #FCE9D6; --t-roze: #F8E1EA; --t-groen: #DDEEE3; --t-grijs: #EFE9E1; --t-rood: #F7E1E5; --t-blauw: #E2E9F6; --t-demo: #F6D8B8;
  --control-line: #8C8076; --focus: #18130F; --danger-on: #FFFFFF;
  --fd: 'Schibsted Grotesk', system-ui, sans-serif; --fb: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r: 10px; --r2: 8px; --bw: 1.5px; --btn-shadow: 3px 3px 0 var(--acc);
  --top-h: 56px; --tab-h: 0px;
  /* oude tokennamen voor losse scripts (push-ui.js) en het frame: volgen de nieuwe stijl */
  --body: var(--fb); --head: var(--fd); --accent: var(--acc); --accent-text: var(--link); --danger: var(--bad); --r-btn: var(--r2);
  --divider: var(--line); --soft: var(--sunk); --vast-bg: var(--bad-bg); --ok-soft: var(--ok-bg); --nav-bg: var(--nav);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #13100D; --panel: #1C1814; --sunk: #171310; --ink: #F2ECE5; --ink2: #D5CBC0; --muted: #A0958A; --line: #2F2822; --strong: #F2ECE5;
    --acc: #F59A45; --acc-ink: #F7AE68; --acc-soft: #3A2716; --on-acc: #18130F; --link: #F7AE68;
    --nav: #0B0907; --nav-ink: #F2ECE5; --nav-muted: #A0958A; --nav-hi: #221C17;
    --ok: #86D7A6; --ok-bg: #1C3727; --warn: #E3B54A; --warn-bg: #2D2512; --bad: #FF8C9C; --bad-bg: #3A1C23; --info: #9DB7F2; --info-bg: #1D2740;
    --scrim: rgba(0,0,0,.7);
    --seg-klaar: #4FB27A; --seg-bezig: #F59A45; --seg-vast: #FF8C9C; --seg-wacht: #E3B54A; --seg-open: #7A6F65;
    --t-oranje: #3A2716; --t-roze: #3A1C2A; --t-groen: #1C3727; --t-grijs: #241F1A; --t-rood: #3A1C23; --t-blauw: #1D2740; --t-demo: #4A3420;
    --control-line: #7A6F65; --focus: #F2ECE5; --danger-on: #18130F;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #13100D; --panel: #1C1814; --sunk: #171310; --ink: #F2ECE5; --ink2: #D5CBC0; --muted: #A0958A; --line: #2F2822; --strong: #F2ECE5;
  --acc: #F59A45; --acc-ink: #F7AE68; --acc-soft: #3A2716; --on-acc: #18130F; --link: #F7AE68;
  --nav: #0B0907; --nav-ink: #F2ECE5; --nav-muted: #A0958A; --nav-hi: #221C17;
  --ok: #86D7A6; --ok-bg: #1C3727; --warn: #E3B54A; --warn-bg: #2D2512; --bad: #FF8C9C; --bad-bg: #3A1C23; --info: #9DB7F2; --info-bg: #1D2740;
  --scrim: rgba(0,0,0,.7);
  --seg-klaar: #4FB27A; --seg-bezig: #F59A45; --seg-vast: #FF8C9C; --seg-wacht: #E3B54A; --seg-open: #7A6F65;
  --t-oranje: #3A2716; --t-roze: #3A1C2A; --t-groen: #1C3727; --t-grijs: #241F1A; --t-rood: #3A1C23; --t-blauw: #1D2740; --t-demo: #4A3420;
  --control-line: #7A6F65; --focus: #F2ECE5; --danger-on: #18130F;
  color-scheme: dark;
}

/* ---------- basis ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15px/1.5 var(--fb); min-height: 100vh; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--fd); margin: 0; line-height: 1.15; text-wrap: balance; }
h1 { font-size: 32px; font-weight: 900; letter-spacing: -.025em; }
h2 { font-weight: 800; letter-spacing: -.01em; }
p { margin: 0; }
code { font: 600 .92em var(--fb); background: var(--sunk); padding: 1px 5px; border-radius: 5px; overflow-wrap: anywhere; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
header.top :focus-visible, .tabbar :focus-visible { --focus: var(--nav-ink); }
.ic { width: 18px; height: 18px; flex: none; display: inline-block; vertical-align: -3px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; color: var(--muted); }
.lbl { font: 600 11.5px/1.2 var(--fb); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--strong); color: var(--bg); padding: 10px 14px; border-radius: var(--r2); font-weight: 600; text-decoration: none; }
.skip:focus { top: 10px; }
main:focus { outline: none; }

/* ---------- bovenbalk (desktop) ---------- */
header.top { background: var(--nav); color: var(--nav-ink); position: sticky; top: 0; z-index: 20; }
header.top .in { height: var(--top-h); max-width: 1440px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 4px; position: relative; }
.logo { display: flex; align-items: center; gap: 9px; font: 900 15px var(--fd); letter-spacing: -.01em; text-transform: uppercase; margin-right: 18px; white-space: nowrap; text-decoration: none; color: var(--nav-ink); }
.logo i { width: 14px; height: 14px; border-radius: 4px; background: var(--acc); }
.nav { display: flex; align-items: center; gap: 2px; min-width: 0; }
.nav a { display: flex; align-items: center; gap: 9px; color: var(--nav-muted); padding: 8px 11px; border-radius: 8px; font-size: 14px; white-space: nowrap; position: relative; text-decoration: none; }
.nav a:hover { background: var(--nav-hi); color: var(--nav-ink); }
.nav a.on { color: var(--nav-ink); font-weight: 600; }
.nav a.on::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: -9px; height: 3px; background: var(--acc); border-radius: 2px; }
.cnt { font-size: 11.5px; font-weight: 700; background: var(--acc); color: var(--on-acc); border-radius: 999px; padding: 0 6px; min-width: 18px; text-align: center; line-height: 18px; }
header.top .sp { flex: 1; }
.searchbtn { display: flex; align-items: center; gap: 8px; background: var(--nav-hi); color: var(--nav-muted); border-radius: 8px; padding: 7px 12px; min-width: 220px; font-size: 13.5px; text-decoration: none; margin-right: 6px; }
.searchbtn:hover, .searchbtn.on { color: var(--nav-ink); }
.searchbtn kbd { margin-left: auto; font: 600 11px var(--fb); border: 1px solid var(--nav-muted); border-radius: 4px; padding: 0 5px; }
.bell { position: relative; background: none; border: 0; color: var(--nav-ink); width: 44px; height: 44px; border-radius: 8px; cursor: pointer; display: grid; place-items: center; }
.bell:hover { background: var(--nav-hi); }
.zoekmob { display: none; }
.bell b { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--acc); }
.avatar { width: 32px; height: 32px; margin-left: 6px; border-radius: 50%; border: 0; background: var(--acc); color: var(--on-acc); display: grid; place-items: center; font: 700 13px var(--fb); cursor: pointer; flex: none; }
.amenu { position: absolute; right: 16px; top: calc(var(--top-h) - 4px); min-width: 220px; background: var(--panel); color: var(--ink); border: var(--bw) solid var(--line); border-radius: var(--r); box-shadow: 0 16px 40px rgba(0,0,0,.25); padding: 6px; display: grid; z-index: 30; }
.amenu-h { font-size: 12.5px; color: var(--muted); padding: 8px 10px 6px; }
.amenu button { text-align: left; background: none; border: 0; padding: 10px; border-radius: 6px; cursor: pointer; font-size: 14px; }
.amenu button:hover, .amenu button:focus-visible { background: var(--sunk); }
.amenu button:focus-visible { outline-offset: -3px; }

/* tablet (761–1199): bovenbalk compact, anders schuift het zoekveld over het menu en valt Artifacts eraf (pagina te breed) */
@media (min-width: 761px) and (max-width: 1199px) {
  .logo { font-size: 0; gap: 0; margin-right: 8px; }
  .nav a { padding: 8px 9px; gap: 6px; }
  .nav a > .ic { display: none; }
  .nav a.on::after { left: 9px; right: 9px; }
  .searchbtn { min-width: 0; padding: 7px 10px; }
  .searchbtn span, .searchbtn kbd { display: none; }
}

/* ---------- onderbalk (telefoon) ---------- */
.tabbar { display: none; }

main { max-width: 1440px; margin: 0 auto; padding: 28px 32px 48px; display: flex; flex-direction: column; gap: 22px; }
body[data-route="opdrachten"] main, body[data-route="briefing"] main, body[data-route="besluiten"] main { max-width: 1280px; }

/* ---------- bouwstenen ---------- */
.card { background: var(--panel); border: var(--bw) solid var(--line); border-radius: var(--r); }
.chip { display: inline-flex; align-items: center; gap: 5px; font: 600 12px/1 var(--fb); padding: 5px 9px; border-radius: 999px; background: var(--sunk); color: var(--ink2); white-space: nowrap; }
.chip.ok { background: var(--ok-bg); color: var(--ok); }
.chip.warn { background: var(--warn-bg); color: var(--warn); }
.chip.bad { background: var(--bad-bg); color: var(--bad); }
.chip.acc { background: var(--acc-soft); color: var(--acc-ink); }
.chip.info { background: var(--info-bg); color: var(--info); }
.chip .d { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pj { display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px var(--fb); color: var(--ink2); white-space: nowrap; }
.pj i { width: 9px; height: 9px; border-radius: 3px; background: var(--c, #9A8F84); flex: none; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font: 600 14px var(--fb); min-height: 42px; padding: 0 15px; border-radius: var(--r2); border: var(--bw) solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer; white-space: nowrap; text-decoration: none; }
.btn:hover { border-color: var(--strong); }
.btn.primary { background: var(--strong); color: var(--bg); border-color: var(--strong); box-shadow: var(--btn-shadow); }
.btn.primary:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--acc); }
.btn.ghost { background: none; border-color: transparent; color: var(--ink2); padding-inline: 10px; }
.btn.ghost:hover { color: var(--ink); background: var(--sunk); }
.btn.sm { min-height: 36px; padding: 0 11px; font-size: 13px; }
.btn.icon { width: 36px; padding: 0; }
.btn.danger { border: 0; background: none; color: var(--bad); padding: 0 4px; font-weight: 600; }
.btn:disabled { opacity: .5; cursor: default; box-shadow: none; }
.btn .adv { font: 700 10.5px var(--fb); letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.lnk { color: var(--link); background: none; border: 0; padding: 0; cursor: pointer; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; font-size: 14px; }
.lnk:hover { text-decoration: underline; }
.lnk .ic { width: 15px; height: 15px; }
.lnk.meer { font-size: 13.5px; }
.iconbtn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; color: var(--ink2); cursor: pointer; padding: 6px 2px; font-size: 13.5px; text-decoration: none; min-height: 32px; }
.iconbtn:hover { color: var(--ink); }
.sechead { display: flex; align-items: baseline; gap: 12px; justify-content: space-between; }
.sechead h2 { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.sechead.sub { margin-top: 6px; }
.sechead.sub h2 { font-size: 17px; }
.sechead .n { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600; font-size: 14px; }
.sechead h2:focus { outline: none; }
.leeg { color: var(--muted); font-size: 14.5px; display: flex; gap: 6px; align-items: center; }
.leeg .ic { color: var(--ok); }
.pagina { display: grid; gap: 14px; }

/* ---------- Vandaag ---------- */
.vandaag { display: grid; gap: 26px; }
.col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; align-content: start; }
#kiezen, #bekijken, #loopt { scroll-margin-top: calc(var(--top-h) + 16px); }

/* beslissingskaart (hq-beslis.js) */
.dec { padding: 16px 18px; display: grid; gap: 12px; text-align: left; }
.dtop { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.did { margin-left: auto; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.dec h3 { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.dec .why { color: var(--ink2); font-size: 14.5px; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.dq { display: grid; gap: 0; }
.dqr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.dqr:first-child { border-top: 0; }
.dqr .q { font-weight: 600; font-size: 14.5px; }
.dqr .q small { display: block; font-weight: 400; color: var(--muted); font-size: 13px; }
.pick { display: inline-flex; border: var(--bw) solid var(--control-line); border-radius: var(--r2); overflow: hidden; background: var(--panel); }
.pick button { border: 0; background: none; padding: 0 12px; min-height: 36px; font-size: 13.5px; cursor: pointer; position: relative; white-space: nowrap; }
.pick button + button { border-left: var(--bw) solid var(--line); }
.pick button.on { background: var(--strong); color: var(--bg); font-weight: 600; }
.pick button:focus-visible { outline-offset: -4px; }
.pick button .a { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--acc); margin-left: 6px; vertical-align: 2px; }
.dec .foot { display: flex; gap: 4px 14px; align-items: center; flex-wrap: wrap; font-size: 13.5px; }
.dec .foot .sp { flex: 1; }
.det { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; background: var(--sunk); border-radius: var(--r2); padding: 12px; }
.det div { display: grid; gap: 3px; font-size: 13.5px; align-content: start; }
.det b { font-weight: 700; }
.det .p { color: var(--ok); }
.det .m { color: var(--bad); }
.dlinks { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13.5px; }
.dlinks a { color: var(--link); font-weight: 600; text-decoration: none; }
.dlinks a:hover { text-decoration: underline; }
.dstate { font-size: 13px; color: var(--muted); min-height: 0; }
.dstate:empty { display: none; }
.mic { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--strong); color: var(--bg); display: grid; place-items: center; cursor: pointer; flex: none; }
.mic.rec { background: var(--bad); color: var(--danger-on); animation: pulse 1.2s infinite; }
.mic.busy { opacity: .6; cursor: wait; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 var(--bad-bg); } 50% { box-shadow: 0 0 0 8px transparent; } }
.done { display: flex; align-items: center; gap: 10px; padding: 14px 18px; color: var(--ok); flex-wrap: wrap; }
.done b { font-weight: 600; }
.done .dtitel { color: var(--ink2); min-width: 0; flex: 1 1 200px; }
.done .sp { display: none; }
.done .st { font-size: 13px; }
.done.pend { border-color: var(--strong); }
.gekozen { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: var(--ok-bg); color: var(--ok); border-radius: var(--r2); padding: 12px 14px; }
.gekozen > span { flex: 1 1 240px; }
.gekozen small { display: block; color: var(--ink2); font-size: 12.5px; }
.dec.jou { cursor: pointer; border-color: var(--warn); font: inherit; color: inherit; width: 100%; min-width: 0; text-align: left; overflow-wrap: anywhere; }
.dec.jou:hover { border-color: var(--strong); }
.tegen { justify-self: start; display: inline-flex; align-items: center; gap: 4px; font: 600 12.5px var(--fb); color: var(--warn); background: var(--warn-bg); border: 0; border-radius: 999px; padding: 5px 10px; cursor: pointer; text-align: left; }
.tegen .ic { width: 14px; height: 14px; }

/* reviewkaart */
.rev { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 14px; align-items: start; }
.rev .body { display: grid; gap: 8px; min-width: 0; }
.rev h3 { font-size: 17px; font-weight: 800; }
.rev .sub { color: var(--muted); font-size: 13.5px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

/* loopt nu, projecten, ideeën */
.run, .projs, .ideas { padding: 4px 16px; display: grid; }
.runrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 12px 0; border: 0; border-top: 1px solid var(--line); align-items: center; background: none; text-align: left; cursor: pointer; width: 100%; font: inherit; color: inherit; }
.runrow:first-child { border-top: 0; }
.runrow:hover b { text-decoration: underline; }
.runrow b { font-weight: 600; font-size: 14.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.runrow small { grid-column: 1 / -1; color: var(--muted); font-size: 12.5px; }
.runrow small.bad { color: var(--bad); font-weight: 600; }
.runrow small.warn { color: var(--warn); font-weight: 600; }
.steps { display: flex; gap: 3px; grid-column: 1 / -1; }
.steps i { height: 6px; flex: 1; border-radius: 3px; background: var(--line); }
.steps i.k { background: var(--ok); }
.steps i.b { background: var(--acc); }
.steps i.v { background: var(--bad); }
.prow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); text-decoration: none; color: inherit; }
.prow:first-child { border-top: 0; }
.prow .t { display: grid; min-width: 0; }
.prow .t b { font-weight: 600; }
.prow .t small { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow:hover b { text-decoration: underline; }
.sw { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.idea { display: grid; gap: 2px; padding: 10px 0; border-top: 1px solid var(--line); text-decoration: none; color: inherit; }
.idea:first-child { border-top: 0; }
.idea b { font-weight: 600; font-size: 14px; }
.idea small { color: var(--muted); font-size: 12.5px; }
.idea:hover b { text-decoration: underline; }

/* binnengekomen vandaag */
.blk { display: grid; gap: 12px; }
.strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.vs { background: var(--panel); border: var(--bw) solid var(--line); border-radius: var(--r); overflow: hidden; text-align: left; display: grid; grid-template-rows: auto 1fr; text-decoration: none; color: inherit; }
.vs:hover { border-color: var(--strong); }
.vs .im { aspect-ratio: 16 / 9; background: var(--sunk); overflow: hidden; display: block; }
.vs .im img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.vs .im.big { display: grid; place-items: center; }
.vs .im .glyph { font: 800 34px var(--fd); color: var(--acc-ink); }
.vs .tx { padding: 10px 12px 12px; display: grid; gap: 4px; align-content: start; }
.vs .tx b { font-weight: 700; font-size: 14.5px; line-height: 1.3; }
.vs .tx small { color: var(--muted); font-size: 12.5px; }
.unread { width: 8px; height: 8px; border-radius: 50%; background: var(--acc); display: inline-block; margin-right: 6px; vertical-align: 2px; }

/* ---------- lagen: popup, bottom-sheet, menu, toasts ---------- */
.pop-scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 40; display: flex; align-items: flex-start; justify-content: center; padding: max(32px, 6vh) 16px 32px; } /* bovenkant vast: uitklappen (Plus en min, deeltaken) laat niets verspringen */
.pop { width: 100%; max-width: 780px; max-height: 100%; background: var(--bg); border: var(--bw) solid var(--line); border-radius: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.35); display: flex; flex-direction: column; overflow: hidden; position: relative; }
.pop-x { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border-radius: 10px; border: 0; background: transparent; color: var(--ink2); cursor: pointer; display: grid; place-items: center; z-index: 2; }
.pop-x:hover { background: var(--sunk); color: var(--ink); }
.pop-b { padding: 16px; overflow-y: auto; min-height: 0; }
.pop-b .dec { border: 0; padding: 8px 52px 8px 8px; background: transparent; }
.pop-b .dec h3 { font-size: 24px; }
.pop-f, .sheet .pop-f { padding: 12px 20px; border-top: 1px solid var(--line); background: var(--panel); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex-shrink: 0; font-size: 13.5px; }
.pop-f .sp { flex: 1; }
.sheet-scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 40; display: flex; align-items: flex-end; }
.sheet { width: 100%; background: var(--bg); border-radius: 18px 18px 0 0; display: flex; flex-direction: column; max-height: 90vh; max-height: 90dvh; }
.sheet .grip { display: flex; justify-content: center; padding: 10px 0 2px; flex-shrink: 0; }
.sheet .grip span { width: 40px; height: 5px; border-radius: 3px; background: var(--line); }
.sheet .sb { padding: 8px 16px 16px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; min-height: 0; }
.sheet .sb .dec.inpop { border: 0; padding: 4px 0; background: transparent; }
.sheet .pop-f { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
.sheet.meer .sb { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
.mlist { display: flex; flex-direction: column; background: var(--panel); border: var(--bw) solid var(--line); border-radius: var(--r); overflow: hidden; }
.mlist .mrow .ic:first-child { color: var(--ink2); }
.mlist .mrow.on { font-weight: 700; }
.mlist .mrow.on .ic:first-child { color: var(--acc-ink); }
.toasts { position: fixed; left: 50%; bottom: calc(24px + var(--tab-h)); transform: translateX(-50%); z-index: 90; display: grid; gap: 8px; justify-items: center; width: max-content; max-width: calc(100vw - 32px); pointer-events: none; }
.toast { background: var(--strong); color: var(--bg); padding: 10px 14px; border-radius: 10px; font-size: 14px; display: flex; gap: 14px; align-items: center; box-shadow: 0 8px 24px rgba(0,0,0,.25); pointer-events: auto; }
.toast button { background: none; border: 0; color: var(--acc); font-weight: 700; cursor: pointer; padding: 4px 0; }
.toast.err { background: var(--bad); color: var(--danger-on); }
.toast.err button { color: inherit; text-decoration: underline; }

/* ---------- Opdrachten: gedeelde bouwstenen (lijst: blok opdrachten-lijst onderaan) ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--panel); border: var(--bw) solid var(--line); white-space: nowrap; font-size: 13.5px; font-weight: 600; color: var(--ink2); }
.pill.bad { background: var(--bad-bg); color: var(--bad); border-color: transparent; }
.tag { font-weight: 700; padding: 1px 7px; border-radius: 999px; font-size: 11px; white-space: nowrap; }
.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.box { border: var(--bw) solid var(--line); border-radius: var(--r); background: var(--panel); }
.bar { height: 6px; border-radius: 999px; background: var(--sunk); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--ink2); }
.mcard { text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: var(--r2); background: var(--panel); border: var(--bw) solid var(--line); width: 100%; font: inherit; color: inherit; }
.mcard:hover, .mcard.sel { border-color: var(--strong); }
.mcard .meta { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; font-size: 12px; min-width: 0; }
.mcard .meta > * { white-space: nowrap; }
.mcard .t { font-weight: 700; line-height: 1.3; }
.mcard .adv { font-size: 12.5px; color: var(--muted); }
.mcard .adv strong { color: var(--ink); }
.urg { margin-left: auto; font-weight: 700; color: var(--muted); }
.urg.blokkeert { color: var(--bad); }
.urg.wacht { color: var(--warn); }
.urg.bt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.wachtink { color: var(--warn) !important; }
.more { font-size: 13px; font-weight: 600; color: var(--link); padding: 4px; background: none; border: 0; cursor: pointer; text-align: left; }
.none { font-size: 13px; color: var(--muted); padding: 4px; }
.live { text-decoration: none; padding: 8px 10px; border-radius: var(--r2); background: var(--ok-bg); display: block; font-size: 14px; }
.live .num { font-size: 12px; color: var(--ok); }
button.live { font: inherit; color: inherit; border: 0; text-align: left; cursor: pointer; width: 100%; }
/* deeltaakblokjes: vorm én kleur (a11y F06): open = gestippelde rand, bezig = half gevuld */
.segs, .dsegs { display: flex; gap: 4px; }
.seg { flex: 1; height: 10px; border-radius: 3px; background: transparent; border: 1.5px dashed var(--seg-open); }
.seg.s-klaar { background: var(--seg-klaar); border: 1.5px solid var(--seg-klaar); }
.seg.s-bezig { background: linear-gradient(90deg, var(--seg-bezig) 55%, transparent 55%); border: 1.5px solid var(--seg-bezig); }
.seg.s-vast { background: var(--seg-vast); border: 1.5px solid var(--seg-vast); }
.seg.s-wacht { background: repeating-linear-gradient(135deg, var(--seg-wacht) 0 3px, transparent 3px 5px); border: 1.5px solid var(--seg-wacht); }
.dsegs .seg { height: 8px; }
.dsegs.groot { flex: 1; }
.legenda { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink2); padding: 0 2px; }
.legenda > span { display: flex; gap: 5px; align-items: center; }
.legenda .seg { display: inline-block; flex: none; width: 14px; height: 10px; }
/* opdrachtkaart */
.okaart { width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit; padding: 12px 14px; border-radius: var(--r); border: var(--bw) solid var(--line); background: var(--panel); display: flex; flex-direction: column; gap: 8px; }
.okaart:hover, .okaart.sel { border-color: var(--strong); }
.okh { display: flex; gap: 8px; align-items: baseline; }
.okt { font-weight: 700; font-size: 15px; line-height: 1.3; flex: 1; min-width: 0; }
.oks { font-size: 12.5px; color: var(--ink2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.okp { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.oknu { font-size: 13px; color: var(--ink2); }
.oknu.n-wacht { color: var(--warn); font-weight: 700; }
.oknu.n-vast { color: var(--bad); font-weight: 700; }
.oknu.n-waak, .dtv .waak { color: var(--warn); font-weight: 700; }
.okc { display: flex; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.okc span { padding: 3px 8px; border-radius: 999px; background: var(--sunk); }
.ptag { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; color: var(--ink); }
.mcards { display: flex; flex-direction: column; gap: 10px; }
.okaart.mob.plain { cursor: default; gap: 4px; }
.okaart.mob.plain .ptag { align-self: flex-start; }
/* Klaar-kolom: compacte regels van één zin */
.kr { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; border-radius: 8px; text-decoration: none; background: none; border: 0; text-align: left; cursor: pointer; width: 100%; min-width: 0; font: inherit; font-size: 14px; color: inherit; }
div.kr { cursor: default; }
.kr:hover { background: var(--sunk); }
div.kr:hover { background: none; }
.kv { color: var(--seg-klaar); display: flex; flex: none; padding-top: 2px; }
.krt { flex: 1; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.3; }
.krw { font-size: 12px; color: var(--muted); white-space: nowrap; flex: none; padding-top: 2px; }
.krm { font-size: 12.5px; padding: 4px 8px; }
.mklaar { display: flex; flex-direction: column; padding: 6px; }
.mklaar .kr { min-height: 40px; }

/* opdracht-popup: deeltaken → stappen, zijkolom */
.pop.opop { max-width: 880px; background: var(--panel); }
.oph { padding: 16px 64px 14px 20px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.oph h2 { font-size: 22px; line-height: 1.25; }
.osr { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.osum { font-size: 12.5px; color: var(--ink2); white-space: nowrap; }
.pchip { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--sunk); white-space: nowrap; }
.schip { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; background: var(--sunk); color: var(--ink2); }
.schip.s-wacht { background: var(--warn-bg); color: var(--warn); }
.schip.s-vast { background: var(--bad-bg); color: var(--bad); }
.schip.s-klaar { background: var(--ok-bg); color: var(--ok); }
.schip.s-bezig { background: var(--acc-soft); color: var(--acc-ink); }
.opop .pop-x { top: 8px; }
.opb { display: flex; flex-wrap: wrap; align-items: flex-start; min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; background: var(--bg); } /* één scrollvlak: lange lijst deeltaken past niet in de popup */
.odl { flex: 999 1 460px; min-width: 0; padding: 12px 12px 16px; display: flex; flex-direction: column; gap: 6px; background: var(--panel); border-right: 1px solid var(--line); align-self: stretch; }
.opa { flex: 1 1 220px; padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; background: var(--bg); font-size: 14px; position: sticky; top: 0; }
.dt { border-radius: var(--r); border: 1px solid var(--line); background: var(--panel); overflow: hidden; flex: none; }
.dt.open { background: var(--bg); }
.dt.d-wacht { border-color: var(--seg-wacht); }
.dt.d-vast { border-color: var(--bad); }
.dth { width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer; border: 0; background: transparent; padding: 10px 12px; display: flex; gap: 10px; align-items: center; min-height: 44px; }
.dth svg { width: 14px; height: 14px; color: var(--muted); flex: none; transition: transform .15s; }
.dth[aria-expanded="true"] svg { transform: rotate(90deg); }
.dd { width: 10px; height: 10px; flex: none; border-radius: 50%; border: 1.5px dashed var(--seg-open); }
.d-klaar .dd { background: var(--seg-klaar); border: 1.5px solid var(--seg-klaar); }
.d-bezig .dd { background: linear-gradient(90deg, var(--seg-bezig) 50%, transparent 50%); border: 1.5px solid var(--seg-bezig); }
.d-wacht .dd { background: var(--seg-wacht); border: 1.5px solid var(--seg-wacht); }
.d-vast .dd { background: var(--seg-vast); border: 1.5px solid var(--seg-vast); }
.dtt { flex: 1; min-width: 0; font-weight: 600; }
.dpr, .dsc { font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dsc { min-width: 34px; text-align: right; color: var(--ink2); }
.dtb { padding: 0 12px 10px 32px; display: flex; flex-direction: column; gap: 8px; }
.dst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.dst li { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.sd { width: 8px; height: 8px; flex: none; border-radius: 50%; border: 1.5px dashed var(--seg-open); align-self: center; }
.t-klaar .sd { background: var(--seg-klaar); border: 1.5px solid var(--seg-klaar); }
.t-bezig .sd { background: var(--seg-bezig); border: 1.5px solid var(--seg-bezig); }
.t-wacht .sd { background: var(--seg-wacht); border: 1.5px solid var(--seg-wacht); }
.t-vast .sd { background: var(--seg-vast); border: 1.5px solid var(--seg-vast); }
.sx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.t-open .sx { color: var(--muted); }
.t-bezig .sx { font-weight: 700; }
.sn { font-size: 12.5px; color: var(--muted); font-weight: 400; }
.t-wacht .sn { color: var(--warn); }
.t-vast .sn { color: var(--bad); }
.stt { font-size: 12px; color: var(--muted); white-space: nowrap; }
.dtleeg { padding: 4px 0; }
.dtb .owb.jouw { margin: 4px 0 6px; }
a.owk { text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
a.swl { text-decoration: none; }
.dtv { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding-top: 6px; border-top: 1px solid var(--line); }
.dtl { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-left: auto; font-size: 13.5px; }
.dtl a { text-decoration: none; font-weight: 600; color: var(--link); }
.owb { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: var(--r); background: var(--warn-bg); }
.owb.vast { background: var(--bad-bg); }
.owl { font-size: 12px; font-weight: 700; color: var(--warn); }
.owb.vast .owl { color: var(--bad); }
.owt { font-weight: 600; }
.owk { align-self: flex-start; font: 600 13px var(--fb); color: var(--bg); background: var(--strong); padding: 7px 12px; border-radius: var(--r2); border: 0; cursor: pointer; box-shadow: 2px 2px 0 var(--acc); }
.osec { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.osec a { text-decoration: none; padding: 2px 0; color: var(--link); font-weight: 600; }
.oprs { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; font-variant-numeric: tabular-nums; }
.links { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13.5px; }
.links a, .links span { padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; }
/* opdracht als bottom-sheet (mobiel) */
.osheet { background: var(--panel); }
.osheet .osh { padding: 4px 16px 12px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--line); }
.osheet .odl { padding: 12px 12px calc(16px + env(safe-area-inset-bottom)); max-height: none; gap: 6px; }
.osheet .dtb { padding-left: 30px; }
.osheet .iconbtn { width: 44px; height: 44px; justify-content: center; }
.swl { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r); border: 0; background: var(--warn-bg); color: var(--warn); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; width: 100%; }
div.swl { cursor: default; }
.swl strong { font-weight: 700; }
.osheet .links { padding: 4px 4px 0; }
.clh { font: 800 18px/1.25 var(--fd); }
.vblok a { display: grid; grid-template-columns: 9px minmax(0, 1fr); gap: 2px 8px; align-items: center; text-decoration: none; padding: 5px 0; color: inherit; font-weight: 400; }
.vblok .vbt { line-height: 1.3; }
.vblok .vbm { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 12.5px; color: var(--muted); }
.vblok a.nieuw .vbt { font-weight: 700; }
.vblok .upil { font-size: 11px; padding: 1px 7px; }
.osheet .vblok { padding: 8px 4px 0; }

/* Opdrachten op de telefoon: tellers + secties */
.mtabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; border: var(--bw) solid var(--line); border-radius: var(--r); background: var(--panel); }
.mtabs button { font-size: 12.5px; font-weight: 600; min-height: 50px; border-radius: 7px; border: 0; cursor: pointer; background: var(--panel); color: var(--muted); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; gap: 2px; }
.mtabs button b { font: 800 19px var(--fd); color: var(--ink); }
.mtabs button.on { background: var(--strong); color: var(--bg); box-shadow: 2px 2px 0 var(--acc); }
.mtabs button.on b { color: var(--bg); }
.mgroup { background: var(--panel); border: var(--bw) solid var(--line); border-radius: var(--r); overflow: hidden; }
.mgroup .gh { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.mgroup .gh .gn { font: 800 15px var(--fd); }
.mgroup .gh .gc { margin-left: auto; font: 700 13px var(--fb); font-variant-numeric: tabular-nums; }
.mrow { width: 100%; text-align: left; cursor: pointer; border: 0; border-bottom: 1px solid var(--line); background: var(--panel); padding: 12px; display: flex; gap: 10px; align-items: center; text-decoration: none; color: inherit; font: inherit; min-height: 48px; }
.mrow:last-child { border-bottom: 0; }
.mrow .mt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.mrow .t { font-weight: 600; flex: 1; }
.mrow > .ic:last-child { color: var(--muted); }
.vandaag-m { display: flex; flex-direction: column; gap: 12px; }
.vtel { position: sticky; top: 0; z-index: 10; box-shadow: 0 6px 12px -8px var(--scrim); }
.vchips { position: relative; display: flex; gap: 6px; overflow-x: auto; margin: 0 -16px; padding: 4px 16px 2px; scrollbar-width: none; }
.vchips::-webkit-scrollbar { display: none; }
.vchip { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: var(--bw) solid var(--line); background: var(--panel); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.vchip .dot { width: 9px; height: 9px; }
.vchip.stil { color: var(--muted); cursor: default; background: transparent; }
.vsect, .vbinnen { display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 76px; }
.vkop { margin: 8px 0 0; font-size: 19px; display: flex; align-items: baseline; gap: 8px; }
.vkop:focus { outline: none; }
.vkop .gc { font: 700 13px var(--fb); color: var(--muted); }
.vleeg { font-size: 14px; color: var(--muted); padding: 2px; }
.vleeg.goed { color: var(--ok); font-weight: 600; display: flex; align-items: center; gap: 6px; }
[data-pp] { scroll-margin-top: 80px; }
.flits { outline: 3px solid var(--acc); outline-offset: 2px; transition: outline-color .6s; }
.vbinnen .mgroup .gh { background: var(--sunk); }
.vbinnen .gh a.gc { text-decoration: none; color: var(--link); font-size: 13px; }
.mrow .vstip { align-self: center; }
.mrow.nieuw > .vstip { background: var(--acc); }
.mrow.nieuw .t { font-weight: 700; }
.mduim { width: 64px; aspect-ratio: 16 / 10; flex: none; border-radius: 5px; overflow: hidden; display: flex; align-items: center; justify-content: center; font: 700 10px var(--fb); text-transform: uppercase; color: var(--ink); }
.mduim img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.vbeantw { font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; }
.vbeantw summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 4px; font-weight: 600; min-height: 40px; }
.vbeantw summary::-webkit-details-marker { display: none; }
.vbeantw summary svg { width: 16px; height: 16px; transition: transform .15s; }
.vbeantw[open] summary svg { transform: rotate(90deg); }
.vbeantw .small { line-height: 1.6; }

/* inzoomsessie: eigen actiegebied op een kaart (beslissing of taak) */
.sessie-actie { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding-top: 12px; border-top: 1px dashed var(--line); }
.sessie-actie:empty { display: none; }
.sessrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; }
.prog { font: 700 11.5px var(--fb); padding: 2px 8px; border-radius: 999px; background: var(--sunk); white-space: nowrap; flex: none; }
.prog.sess.st-start { background: var(--info-bg); color: var(--info); }
.prog.sess.st-loopt { background: var(--ok-bg); color: var(--ok); }
.prog.sess.st-fout { background: var(--bad-bg); color: var(--bad); }
.small.bad { color: var(--bad); }
.dtb .sessie-actie { padding-top: 8px; font-size: 13px; }
.dtb .sessie-actie .sessbtn { min-height: 36px; font-size: 13px; }
/* vraag en sessie per deeltaak (opdracht-popup) */
.dact { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--line); }
.dact textarea { width: 100%; min-width: 0; resize: vertical; font: 14.5px/1.4 var(--fb); color: var(--ink); background: var(--bg); border: var(--bw) solid var(--control-line); border-radius: var(--r2); padding: 9px 11px; min-height: 44px; }
.dact .ddraad { gap: 6px; }
.dwo { margin: 2px 0 6px; padding: 6px 10px; border-radius: var(--r2); background: var(--sunk); font-size: 13.5px; font-weight: 600; color: var(--ink2); overflow-wrap: anywhere; }
.owm { display: block; font-size: 13px; font-weight: 600; color: var(--ink2); padding: 6px 10px; border-radius: var(--r2); background: var(--sunk); overflow-wrap: anywhere; }

/* ---------- Artifacts (indeling ArtifactsV2 ongewijzigd) ---------- */
.ahead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.ahead h1 { display: flex; align-items: center; gap: 12px; }
.ahead h1 .sq { width: 18px; height: 18px; border-radius: 5px; flex: none; }
.search { display: flex; align-items: center; gap: 8px; background: var(--panel); border: var(--bw) solid var(--control-line); border-radius: var(--r2); padding: 0 12px; flex: 0 1 320px; color: var(--muted); }
.search:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.search input { border: 0; outline: none; background: none; padding: 10px 0; width: 100%; font: inherit; color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cat { border: var(--bw) solid var(--line); background: var(--panel); border-radius: 999px; min-height: 36px; padding: 0 12px; font-size: 13.5px; font-weight: 500; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.cat:hover { border-color: var(--strong); }
.cat.on { background: var(--strong); color: var(--bg); border-color: var(--strong); font-weight: 600; }
.cat .sq { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.alist { background: var(--panel); border: var(--bw) solid var(--line); border-radius: var(--r); overflow: hidden; }
.arow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.arow:last-child { border-bottom: 0; }
.thumb { width: 44px; height: 44px; flex: none; border-radius: 8px; display: flex; align-items: center; justify-content: center; font: 800 15px var(--fd); color: var(--ink); overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.arow .ai { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; }
.arow .ai a { font-weight: 700; text-decoration: none; font-size: 15px; }
.arow .ai a:hover { text-decoration: underline; }
.arow .ai .small { font-size: 12.5px; }
.empty { padding: 28px; text-align: center; color: var(--muted); }
.back { align-self: flex-start; font-weight: 600; font-size: 14px; color: var(--link); text-decoration: none; }
.recent { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.rt .unread, .arow .ai .unread { vertical-align: 1px; }
.rt { font: 700 15px/1.3 var(--fb); }
.dlgf .sp { flex: 1; }
.acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.arow .acts { margin-top: 0; padding-top: 0; }

/* dialogen (verplaatsen, onderdelen, project, Claude-artifact, delen) */
.modal-scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 50; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; overflow-y: auto; }
.modal { width: 100%; max-width: 520px; background: var(--bg); border: var(--bw) solid var(--line); border-radius: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.35); padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.modal h2 { font-size: 22px; }
.dlgh { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.modal .iconbtn { width: 44px; height: 44px; justify-content: center; border-radius: 10px; }
.modal .iconbtn:hover { background: var(--sunk); }
.fld { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 14px; }
.fld select, .fld input, .orow input, textarea, input[type=text], input[type=password], input[type=search], input[type=url] { font: inherit; font-weight: 400; color: var(--ink); min-height: 42px; border: var(--bw) solid var(--control-line); border-radius: var(--r2); background: var(--panel); padding: 0 12px; }
textarea { padding: 10px 12px; }
.search input { min-height: 0; border: 0; padding: 10px 0; }
.dlgf { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding-top: 4px; }
.olist { display: flex; flex-direction: column; }
.orow { display: flex; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.orow input { flex: 1; min-width: 0; min-height: 38px; }
.orow .n { font-size: 12.5px; color: var(--muted); width: 28px; text-align: right; font-variant-numeric: tabular-nums; }
.linkbox { flex: 1; min-width: 0; font-size: 13.5px; background: var(--panel); border: var(--bw) solid var(--control-line); border-radius: var(--r2); padding: 11px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.check { display: flex; gap: 10px; align-items: center; font-size: 14px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--acc); }
.mfoot { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding-top: 14px; font-size: 13px; color: var(--muted); gap: 12px; flex-wrap: wrap; }
.oldlinks { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.oldlinks div { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.reacties { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.reacties div { padding: 8px 10px; border-radius: var(--r2); background: var(--sunk); }
.vsep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }
.vrij { position: relative; display: grid; grid-template-columns: 10px 170px minmax(0, 1fr) auto minmax(0, 200px) 64px; gap: 4px 14px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.vrij:last-child { border-bottom: 0; }
.vrij:hover { background: var(--bg); }
.vrij.nieuw { background: color-mix(in srgb, var(--acc-soft) 40%, var(--panel)); }
.vstip { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.nieuw > .vstip, a.nieuw > .vstip { background: var(--acc); }
.vt { font-weight: 600; text-decoration: none; }
.vrij.nieuw .vt { font-weight: 700; }
.vt::after { content: ""; position: absolute; inset: 0; }
.upil { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.upil.u-ok { background: var(--ok-bg); color: var(--ok); }
.upil.u-let-op { background: var(--warn-bg); color: var(--warn); }
.upil.u-mislukt { background: var(--bad-bg); color: var(--bad); }

/* ---------- telefoon ---------- */

/* ---------- Zoeken (ontwerp tweede brein, scherm "Zoeken") ---------- */
.zoeken { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.sbox { display: flex; align-items: center; gap: 10px; background: var(--panel); border: var(--bw) solid var(--strong); border-radius: var(--r); padding: 8px 8px 8px 16px; color: var(--muted); }
.sbox:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.sbox > .ic { width: 20px; height: 20px; }
.sbox input { flex: 1; min-width: 0; min-height: 42px; border: 0; padding: 0; background: none; font: 500 20px var(--fb); color: var(--ink); outline: none; }
.sbox input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.sbox .zleeg { color: var(--muted); }
.sbox .zleeg[hidden] { display: none; }
.sbox .mic { width: 40px; height: 40px; }
.cats { display: flex; gap: 8px; flex-wrap: wrap; }
.cat b { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600; }
.cat.on b { color: inherit; opacity: .7; }
.slay { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 28px; align-items: start; }
.facets { display: grid; gap: 18px; font-size: 14px; position: sticky; top: calc(var(--top-h) + 20px); }
.facets .f { display: grid; gap: 7px; }
.facets label { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.facets input { width: 16px; height: 16px; accent-color: var(--acc); margin: 0; flex: none; }
.facets .lnk { justify-self: start; font-size: 13.5px; }
.res { display: grid; gap: 24px; align-content: start; min-width: 0; }
.res[aria-busy="true"] { opacity: .65; transition: opacity .15s .1s; }
.rgrp { display: grid; gap: 8px; }
.ri { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 14px; text-decoration: none; color: inherit; }
.ri:hover { border-color: var(--strong); }
.ri .ty { width: 40px; height: 40px; border-radius: 9px; display: grid; place-items: center; background: var(--sunk); color: var(--ink2); overflow: hidden; }
.ri .ty img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.ri .rtx { min-width: 0; }
.ri b { display: block; font-weight: 600; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.ri .rsn { font-size: 13.5px; font-weight: 400; color: var(--ink2); margin-top: 2px; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.ri mark { background: var(--acc-soft); color: inherit; border-radius: 3px; padding: 0 1px; }
.ri .meta { font-size: 12.5px; color: var(--muted); text-align: right; display: grid; gap: 4px; justify-items: end; white-space: nowrap; }
.zmeer { justify-self: start; font-size: 13.5px; padding: 2px 0; }

.cat b { font-variant-numeric: tabular-nums; }
.flash { animation: flash 1.6s ease-out; }
@keyframes flash { 0%, 30% { box-shadow: 0 0 0 3px var(--acc); } 100% { box-shadow: 0 0 0 3px transparent; } }
tr.flash td { animation: flashrij 1.6s ease-out; }
@keyframes flashrij { 0%, 30% { background: var(--acc-soft); } 100% { background: transparent; } }

@media (max-width: 760px) {
  :root { --tab-h: 74px; }
  header.top { position: static; background: transparent; color: var(--ink); }
  header.top .in { height: auto; padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 6px; gap: 10px; }
  header.top .nav, .searchbtn { display: none; }
  .logo { color: var(--ink); margin: 0; }
  .bell { color: var(--ink); }
  .bell:hover { background: var(--sunk); }
  .zoekmob { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 8px; color: var(--ink); }
  .zoekmob:hover, .zoekmob.on { background: var(--sunk); }
  header.top :focus-visible { --focus: var(--ink); }
  .amenu { top: 56px; right: 12px; }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--panel); border-top: var(--bw) solid var(--line); padding: 4px 4px max(8px, calc(env(safe-area-inset-bottom) - 6px)); }
  .tabbar a, .tabbar button { background: none; border: 0; display: grid; justify-items: center; gap: 2px; font-size: 11px; color: var(--muted); padding: 6px 0; cursor: pointer; position: relative; text-decoration: none; min-height: 46px; align-content: center; }
  .tabbar .on { color: var(--ink); font-weight: 600; }
  .tabbar .on .ic { color: var(--acc-ink); }
  .tabbar .dot { position: absolute; top: 2px; left: calc(50% + 7px); z-index: 2; box-sizing: border-box; min-width: 18px; height: 18px; display: block; text-align: center; background: var(--acc); color: var(--on-acc); font: 700 10.5px/17px var(--fb); font-variant-numeric: tabular-nums; border-radius: 999px; padding: 1px 5px 0; box-shadow: 0 0 0 2px var(--panel); }
  .tabbar :focus-visible { --focus: var(--ink); outline-offset: -3px; }
  main { padding: 8px 16px calc(28px + var(--tab-h)); gap: 18px; }
  h1 { font-size: 28px; }
  .vandaag { gap: 20px; }
  .dec { padding: 14px; }
  .dqr { grid-template-columns: minmax(0, 1fr); }
  .pick { display: flex; }
  .pick button { flex: 1; white-space: normal; min-height: 40px; }
  .opts { display: grid; }
  .opts .btn { justify-content: space-between; white-space: normal; text-align: left; min-height: 46px; }
  .rev .opts { display: flex; gap: 6px; }
  .rev .opts .btn { justify-content: center; min-height: 40px; padding: 0 10px; }
  .rev .opts .btn.ghost { padding: 0 6px; }
  .rev { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .rev h3 { font-size: 16px; }
  .strip { position: relative; display: flex; overflow-x: auto; gap: 10px; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .strip .vs { flex: 0 0 72%; scroll-snap-align: start; }
  .pop-b .dec { padding: 4px; }
  .toasts { bottom: calc(16px + var(--tab-h)); }
  .ahead h1 { font-size: 28px; }
  .search { flex: 1 1 100%; }
  .arow { padding: 12px; }
  .arow .ai { flex-basis: calc(100% - 60px); }
  .modal-scrim { padding: 16px; align-items: flex-end; }
  .modal { padding: 18px; }
  .recent { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; gap: 12px; margin: 0 -16px; padding: 2px 16px 10px; scrollbar-width: none; }
  .recent::-webkit-scrollbar { display: none; }
  .ahead { gap: 10px; }
  .ahead .search { order: 5; }
  .vrij { grid-template-columns: 10px minmax(0, 1fr) auto; grid-template-areas: "s p t" "s x x" "s l l" "s o o"; padding: 12px 14px; gap: 4px 10px; }
  .vrij .vstip { grid-area: s; align-self: start; margin-top: 5px; }
  .opa { border-top: 1px solid var(--line); }
  .dpr { display: none; }
  .zoeken { gap: 16px; }
  .sbox { padding: 6px 6px 6px 14px; }
  .sbox input { font-size: 17px; }
  .cats { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 4px; scrollbar-width: none; }
  .cats::-webkit-scrollbar { display: none; }
  .cats .cat { flex: none; }
  .slay { grid-template-columns: minmax(0, 1fr); }
  .facets { display: none; }
  .ri { grid-template-columns: 36px minmax(0, 1fr); gap: 10px; padding: 11px 12px; }
  .ri .ty { width: 36px; height: 36px; }
  .ri .meta { grid-column: 2; text-align: left; justify-items: start; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media (forced-colors: active) { .btn.primary { border: 2px solid ButtonText; } .seg, .dd, .sd { forced-color-adjust: none; } }
.card.done .chip { white-space: normal; max-width: 100%; line-height: 1.3; }

/* ---------- beslissing: aanleiding, beelden per optie, vraag zonder te kiezen (draad) ---------- */
.aanl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; background: var(--sunk); border: var(--bw) solid var(--line); border-radius: var(--r2); padding: 10px 12px; }
.aanl:not(:has(.aimg)) { grid-template-columns: minmax(0, 1fr); }
.aanl .atekst { display: grid; gap: 4px; min-width: 0; }
.aanl .atekst p { margin: 0; font-size: 14px; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.aanl .atekst .lnk { font-size: 13px; justify-self: start; display: inline-flex; align-items: center; gap: 2px; }
.aanl .atekst .lnk .ic { width: 14px; height: 14px; }
.groot-duim { border: 0; padding: 0; background: none; cursor: zoom-in; border-radius: 6px; flex: none; }
.groot-duim img { display: block; width: 56px; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; border-radius: 6px; box-shadow: 0 0 0 1px var(--line); background: var(--panel); }
.groot-duim:hover img { box-shadow: 0 0 0 1.5px var(--ink); }
.aanl .aimg img { width: 64px; }
/* beeldstrook op de beslissingskaart: eerste beeld per optie, naast elkaar */
.dstrook { display: flex; gap: 10px; overflow-x: auto; margin: 2px 0 4px; padding-bottom: 2px; }
.dstrook figure { margin: 0; display: grid; gap: 4px; flex: none; }
.dstrook .groot-duim img { width: auto; height: 132px; aspect-ratio: 9 / 16; }
.dstrook figcaption { font-size: 12.5px; font-weight: 600; color: var(--muted, inherit); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dec h3 .dtl { all: unset; cursor: pointer; }
.dec h3 .dtl:hover { text-decoration: underline; }
.dkern { margin: 2px 0; display: grid; gap: 6px; }
.dkernb { border: 0; padding: 0; background: none; cursor: zoom-in; justify-self: start; border-radius: 12px; max-width: 100%; }
.dkernb img { display: block; max-width: 100%; max-height: 300px; width: auto; border-radius: 12px; box-shadow: 0 0 0 1px var(--line); background: var(--sunk); }
.dkern figcaption { font-size: 14px; color: var(--ink); }
.dgev { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dgev li { display: grid; gap: 2px; font-size: 14px; color: var(--ink2); border-left: 3px solid var(--line); padding-left: 10px; }
.dgev li b { color: var(--ink); font-weight: 700; }
.dach { border-top: 1px solid var(--line); padding-top: 6px; font-size: 13.5px; color: var(--ink2); }
.dach summary { cursor: pointer; font-weight: 600; color: var(--ink); list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; }
.dach summary::-webkit-details-marker { display: none; }
.dach .dachp { width: 15px; height: 15px; }
.dach[open] .dachp { transform: rotate(90deg); }
.dec h3 .dtl:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.dec .foot .vst { font-weight: 700; }
.obeelden { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ddraad { display: grid; gap: 8px; }
.dmsg { display: grid; gap: 2px; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.dmsg .w { font-size: 12.5px; color: var(--muted); white-space: normal; }
.dmsg.me { background: var(--acc-soft); border-radius: var(--r2); padding: 8px 10px; }
.dmsg.ant { border-left: 3px solid var(--line); padding-left: 10px; margin-left: 4px; }
.dwacht { font-size: 12.5px; color: var(--muted); }
.groot-laag { position: fixed; inset: 0; z-index: 2000; background: rgba(8, 8, 10, .92); display: grid; place-items: center; padding: 20px; }
.groot-laag figure { margin: 0; display: grid; gap: 10px; max-width: min(1100px, 100%); max-height: 100%; grid-template-rows: minmax(0, 1fr) auto; }
.groot-laag img { max-width: 100%; max-height: calc(100vh - 110px); object-fit: contain; border-radius: 12px; justify-self: center; background: var(--panel); }
.groot-laag figcaption { display: flex; gap: 8px; align-items: center; color: #F3F3F3; font-size: 14px; flex-wrap: wrap; }
.groot-laag figcaption .sp { flex: 1; }

/* >>> antwoord van de manager (hq-antwoord.js; zelfde regels in app.css, hq-verslag.css en hq-frame.css, alleen de tokens verschillen) */
.antw { --an-bg: var(--bg); --an-panel: var(--panel); --an-sunk: var(--sunk); --an-ink: var(--ink); --an-ink2: var(--ink2); --an-muted: var(--muted); --an-line: var(--line); --an-strong: var(--strong);
  --an-acc: var(--acc); --an-acc-ink: var(--acc-ink); --an-acc-soft: var(--acc-soft); --an-on-acc: var(--on-acc); --an-link: var(--link);
  --an-ok: var(--ok); --an-ok-bg: var(--ok-bg); --an-info: var(--info); --an-info-bg: var(--info-bg); --an-fd: var(--fd); --an-fb: var(--fb); }
.dmsg.antk { display: grid; gap: 4px; white-space: normal; }
/* Vandaag: blok "Antwoorden van de manager" (één regel per draad, tik = draad) en de vraag terug bovenaan Wacht op jou */
.antwoorden { display: grid; gap: 10px; }
.alist { display: grid; overflow: hidden; }
.arow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 11px 14px; border-top: 1px solid var(--line); text-decoration: none; color: inherit; }
.arow:first-child { border-top: 0; }
.arow:hover { background: var(--sunk); }
.arow .t1 { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arow .tm { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.arow .t2 { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.arow .t3 { grid-column: 1 / -1; color: var(--ink2); font-size: 13px; }
.antw.an-inline { display: inline-flex; flex-wrap: wrap; gap: 5px; width: auto; border: 0; border-radius: 0; background: none; overflow: visible; }
.antw { display: grid; width: 100%; white-space: normal; background: var(--an-panel); color: var(--an-ink); border: 1.5px solid var(--an-line); border-radius: 10px; overflow: hidden; font: 400 14px/1.45 var(--an-fb); text-align: left; }
.antw .an-ic { width: 16px; height: 16px; flex: none; display: inline-block; vertical-align: -3px; }
.antw[data-open="1"] .an-kort, .antw[data-open="0"] .an-kaart { display: none; }
.antw .an-chip { display: inline-flex; align-items: center; gap: 5px; font: 600 12px/1 var(--an-fb); padding: 5px 8px; border-radius: 999px; background: var(--an-sunk); color: var(--an-ink2); white-space: nowrap; }
.antw .an-chip.ok { background: var(--an-ok-bg); color: var(--an-ok); }
.antw .an-chip.info { background: var(--an-info-bg); color: var(--an-info); }
.antw .an-chip.acc { background: var(--an-acc-soft); color: var(--an-acc-ink); }
.antw .an-chip .d { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.antw .an-chip .an-ic { width: 13px; height: 13px; vertical-align: 0; }
.antw .an-lnk { color: var(--an-link); background: none; border: 0; padding: 0; cursor: pointer; font: 600 13px var(--an-fb); display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; text-decoration: none; }
.antw .an-kort { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; width: 100%; text-align: left; background: none; border: 0; padding: 11px 12px; cursor: pointer; color: inherit; font: inherit; }
.antw .an-kort b { font: 800 15px/1.25 var(--an-fd); }
.antw .an-kort .an-chips { grid-column: 1 / -1; grid-row: 2; display: flex; gap: 5px; flex-wrap: wrap; }
.antw .an-kort .an-chips:empty { display: none; }
.antw .an-kort .an-mr { grid-column: 2; grid-row: 1; color: var(--an-link); font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; gap: 2px; }
.antw .an-hd { display: flex; align-items: center; gap: 8px; padding: 11px 12px; flex-wrap: wrap; }
.antw .an-hd h4 { font: 800 16px/1.25 var(--an-fd); letter-spacing: -.01em; margin: 0 auto 0 0; }
.antw .an-rij { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 10px 12px; border-top: 1px solid var(--an-line); }
.antw .an-o { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: var(--an-sunk); color: var(--an-ink2); }
.antw .an-o.w { background: var(--an-info-bg); color: var(--an-info); }
.antw .an-o.z { background: var(--an-ok-bg); color: var(--an-ok); }
.antw .an-o .an-ic { width: 14px; height: 14px; vertical-align: 0; }
.antw .an-x { display: grid; gap: 3px; min-width: 0; }
.antw .an-x b { font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.antw .an-x small { color: var(--an-muted); font-size: 12px; }
.antw .an-r { display: grid; justify-items: end; gap: 5px; }
.antw .an-meer { padding: 8px 12px 10px 42px; border-top: 1px solid var(--an-line); font-size: 13px; color: var(--an-muted); }
.antw .an-va { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--an-line); }
.antw .an-duim { position: relative; margin: 0; padding: 0; border: 1px solid var(--an-line); border-radius: 8px; overflow: hidden; background: var(--an-sunk); cursor: zoom-in; display: block; }
.antw .an-duim img { width: 100%; aspect-ratio: 300 / 330; object-fit: cover; display: block; }
.antw .an-cap { position: absolute; left: 6px; top: 6px; font: 700 10px var(--an-fb); letter-spacing: .07em; text-transform: uppercase; background: var(--an-panel); color: var(--an-ink); border-radius: 4px; padding: 2px 5px; }
.antw .an-cap.na { background: var(--an-acc); color: var(--an-on-acc); }
.antw .an-cap small { font: inherit; opacity: .7; text-transform: none; letter-spacing: 0; }
.antw .an-ask { display: grid; gap: 8px; padding: 11px 12px; border-top: 1.5px solid var(--an-acc); background: var(--an-acc-soft); }
.antw .an-ask .an-q { font-weight: 600; display: flex; gap: 6px; align-items: start; }
.antw .an-ask .an-q .an-ic { color: var(--an-acc-ink); margin-top: 2px; }
.antw .an-ask.klaar .an-q .an-ic { color: var(--an-ok); }
.antw .an-ask .an-note { font-size: 12px; color: var(--an-ink2); }
.antw .an-bs { display: flex; gap: 6px; flex-wrap: wrap; }
.antw .an-knop { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 600 13.5px var(--an-fb); min-height: 38px; padding: 0 12px; border-radius: 8px; border: 1.5px solid var(--an-line); background: var(--an-panel); color: var(--an-ink); cursor: pointer; white-space: nowrap; }
.antw .an-knop.adv { background: var(--an-strong); color: var(--an-bg); border-color: var(--an-strong); box-shadow: 3px 3px 0 var(--an-acc); }
.antw .an-knop .an-adv { font: 700 10px var(--an-fb); letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.antw .an-why { border-top: 1px solid var(--an-line); }
.antw .an-why summary { cursor: pointer; padding: 9px 12px; font: 600 13px var(--an-fb); color: var(--an-muted); list-style: none; display: flex; align-items: center; gap: 6px; }
.antw .an-why summary::-webkit-details-marker { display: none; }
.antw .an-why[open] summary .an-ic { transform: rotate(90deg); }
.antw .an-why p { margin: 0; padding: 0 12px 12px; font-size: 13.5px; color: var(--an-ink2); }
.antw :focus-visible { outline: 3px solid var(--an-ink); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .antw .an-why summary .an-ic { transition: none; } }
/* <<< antwoord van de manager */

/* ---------- Ideeën (U-0006): bord, dossier, acties; ontwerp artifacts/hq/ideeen-bord/ (eigen ib-klassen) ---------- */
.ib { display: flex; flex-direction: column; gap: 20px; }
.ib-ahead { justify-content: flex-start; gap: 14px; }
.ib-ahead .sp { flex: 1; }
.ib-lead { font-size: 14.5px; color: var(--ink2); max-width: 760px; margin-top: -8px; }
.ib-bar { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.vsep { width: 1px; height: 24px; background: var(--line); }
.ib-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ib-chips .cat b { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.ib-chips .cat.on b { color: inherit; opacity: .7; }
.ib-seg { display: inline-flex; background: var(--sunk); border-radius: 10px; padding: 3px; gap: 2px; }
.ib-seg button { border: 0; background: none; padding: 7px 13px; border-radius: 8px; font: 600 13.5px var(--fb); color: var(--ink2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; min-height: 36px; }
.ib-seg button[aria-pressed="true"], .ib-seg button[aria-selected="true"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.ib-seg button b { font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.ib-seg.vol { display: flex; width: 100%; }
.ib-seg.vol button { flex: 1; padding: 9px 6px; }
.ib-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.ib-dot.idee { background: var(--seg-open); } .ib-dot.uitwerken { background: var(--acc); } .ib-dot.uitvoering { background: var(--seg-klaar); }

/* bord: drie kolommen */
.ib-bord { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.ib-col { background: var(--sunk); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px; min-height: 180px; }
.ib-colh { display: flex; align-items: center; gap: 9px; padding: 2px 4px; }
.ib-colh h2 { font-size: 16px; font-weight: 800; }
.ib-colh .n { font: 700 13px var(--fb); color: var(--muted); }
.ib-colsub { font-size: 12.5px; color: var(--muted); padding: 0 4px; margin-top: -6px; }
.ib-leeg { border: 1.5px dashed var(--line); border-radius: 10px; padding: 18px 14px; text-align: center; font-size: 13px; color: var(--muted); }

/* kaart: titel, kern, stand, inschatting, wat eraan hangt (geen id's of veldlabels) */
.ib-kaart { position: relative; background: var(--panel); border: var(--bw) solid var(--line); border-radius: var(--r); padding: 13px 14px 12px; display: flex; flex-direction: column; gap: 7px; transition: border-color .12s; min-width: 0; }
.ib-kaart:hover { border-color: var(--control-line); }
.ib-kaart:has(.ib-open:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.ib-kaart.ster { box-shadow: inset 3px 0 0 var(--acc); }
.ib-kaart.flits { animation: ibflits 1.4s ease-out; }
@keyframes ibflits { 0% { box-shadow: 0 0 0 4px var(--acc); } 100% { box-shadow: 0 0 0 0 transparent; } }
.ib-ktop { display: flex; align-items: center; gap: 8px; min-height: 22px; padding-right: 30px; min-width: 0; }
.ib-ktop .pj { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ib-kaart.zonder-top .ib-open { padding-right: 30px; }
.ib-open { all: unset; cursor: pointer; font: 700 15.5px/1.3 var(--fd); letter-spacing: -.005em; color: var(--ink); text-wrap: balance; overflow-wrap: anywhere; }
.ib-open::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ib-open:focus-visible { outline: none; }
.ib-kern { font-size: 13.5px; color: var(--ink2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ib-stand { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink2); font-weight: 600; min-width: 0; }
.ib-stand .ic { width: 15px; height: 15px; color: var(--acc-ink); }
.ib-stand > span:not(.sp):not(.ib-segs) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-stand .sp { flex: 1; }
.ib-segs { display: inline-flex; gap: 3px; flex: none; }
.ib-segs i { width: 14px; height: 6px; border-radius: 2px; border: 1.5px solid var(--seg-open); }
.ib-segs i.k { background: var(--seg-klaar); border-color: var(--seg-klaar); }
.ib-segs i.b { background: var(--seg-bezig); border-color: var(--seg-bezig); }
.ib-kvoet { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.ib-kvoet .chip { font-size: 11.5px; padding: 4px 8px; }
.ib-hang { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.ib-hang .ic { width: 14px; height: 14px; }
.ib-ster { position: relative; z-index: 1; background: none; border: 0; width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; color: var(--control-line); cursor: pointer; flex: none; }
.ib-ster:hover { background: var(--sunk); color: var(--ink); }
.ib-ster[aria-pressed="true"] { color: var(--acc); }
.ib-ster[aria-pressed="true"] .ic { fill: var(--acc); }
.ib-ster:disabled { opacity: .4; cursor: default; }
.ib-ster.op-kaart { position: absolute; top: 5px; right: 5px; }
.ib-nieuw { font: 700 10.5px var(--fb); letter-spacing: .06em; text-transform: uppercase; color: var(--acc-ink); background: var(--acc-soft); padding: 3px 7px; border-radius: 999px; }

/* per project: rijen per project, kolommen per status */
.ib-lanes { display: grid; gap: 14px; }
.ib-laneh { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; position: sticky; top: var(--top-h); z-index: 2; background: var(--bg); padding: 8px 0; border-bottom: var(--bw) solid var(--line); }
.ib-lane { display: grid; gap: 8px; }
.ib-lanet { display: flex; align-items: center; gap: 10px; }
.ib-lanet h2 { font-size: 17px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.ib-lanet h2 i { width: 11px; height: 11px; border-radius: 3px; }
.ib-lanet .n { font: 600 13px var(--fb); color: var(--muted); }
.ib-cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.ib-cell { background: var(--sunk); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 10px; min-height: 64px; }
.ib-cleeg { font-size: 13px; color: var(--muted); padding: 12px 6px; text-align: center; }

/* archief */
.ib-arch { border-top: var(--bw) solid var(--line); padding-top: 6px; }
.ib-archt { all: unset; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 10px 4px; font: 800 16px var(--fd); width: 100%; box-sizing: border-box; border-radius: 6px; }
.ib-archt:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ib-archt .n { font: 600 13px var(--fb); color: var(--muted); }
.ib-archt .sp { flex: 1; }
.ib-archt .chev { transition: transform .15s; color: var(--muted); }
.ib-archt[aria-expanded="true"] .chev { transform: rotate(90deg); }
.ib-archt small { font: 400 13px var(--fb); color: var(--muted); margin-left: 6px; }
.ib-archl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 4px; }
.ib-archl h3 { font: 700 12px var(--fb); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.ib-arow { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 11px 14px; background: var(--panel); border: var(--bw) solid var(--line); border-radius: var(--r); width: 100%; margin-bottom: 8px; }
.ib-arow:hover { border-color: var(--control-line); }
.ib-arow:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ib-arow b { font: 700 14.5px var(--fd); overflow-wrap: anywhere; }
.ib-arow .why { grid-column: 2 / 4; font-size: 13px; color: var(--muted); }
.ib-arow .ic { color: var(--muted); }

/* lagen: dossier (zijpaneel desktop, volle pagina telefoon) en dialogen; het bord eronder scrollt niet mee */
html.ib-vast { overflow: hidden; scrollbar-gutter: stable; }
.ib-laag { position: fixed; inset: 0; z-index: 45; pointer-events: none; }
.ib-laag > * { pointer-events: auto; }
.ib-dos { position: absolute; inset: 0; pointer-events: none; }
.ib-dos > * { pointer-events: auto; }
.ib-scrim { position: absolute; inset: 0; background: var(--scrim); animation: ibfade .15s; }
@keyframes ibfade { from { opacity: 0; } }
.ib-paneel { position: absolute; top: var(--top-h); right: 0; bottom: 0; width: min(640px, 100%); background: var(--bg); display: flex; flex-direction: column; border-left: var(--bw) solid var(--line); box-shadow: -20px 0 50px rgba(0,0,0,.18); animation: ibin .2s ease-out; }
@keyframes ibin { from { transform: translateX(40px); opacity: 0; } }
.ib-pkop { display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 24px; border-bottom: var(--bw) solid var(--line); background: var(--panel); flex: none; min-height: 60px; }
.ib-pkop .sp { flex: 1; }
.ib-pscr { flex: 1; overflow: auto; overscroll-behavior: contain; padding: 22px 24px 40px; display: flex; flex-direction: column; gap: 22px; min-height: 0; }
.ib-x { background: none; border: 0; width: 44px; height: 44px; border-radius: 8px; display: grid; place-items: center; cursor: pointer; color: var(--ink2); flex: none; }
.ib-x:hover { background: var(--sunk); color: var(--ink); }
.ib-dtitel { font-size: 28px; font-weight: 900; letter-spacing: -.02em; overflow-wrap: anywhere; }
.ib-dkern { font-size: 17px; line-height: 1.45; color: var(--ink2); margin-top: 10px; }
.ib-track { display: flex; align-items: center; margin-top: 2px; }
.ib-track .st { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.ib-track .st i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--seg-open); flex: none; }
.ib-track .st.gehad i { background: var(--seg-klaar); border-color: var(--seg-klaar); }
.ib-track .st.nu { color: var(--ink); }
.ib-track .st.nu i { background: var(--acc); border-color: var(--acc); box-shadow: 0 0 0 4px var(--acc-soft); }
.ib-track .ln { flex: 1; height: 2px; background: var(--line); margin: 0 10px; min-width: 12px; }
.ib-track .ln.gehad { background: var(--seg-klaar); }
.ib-acties { display: flex; flex-direction: column; gap: 10px; background: var(--panel); border: var(--bw) solid var(--line); border-radius: 12px; padding: 14px 16px; }
.ib-acties .rij { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ib-acties .rij .sp { flex: 1; }
.ib-acties .uitleg { font-size: 13px; color: var(--muted); }
.ib-banner { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; border-radius: 12px; padding: 14px 16px; background: var(--sunk); }
.ib-banner > div { flex: 1 1 200px; min-width: 0; }
.ib-banner.bad { background: var(--bad-bg); }
.ib-banner.ok { background: var(--ok-bg); }
.ib-banner .ic { margin-top: 2px; }
.ib-banner.bad .ic { color: var(--bad); } .ib-banner.ok .ic { color: var(--ok); }
.ib-banner b { display: block; font-weight: 700; }
.ib-banner p { font-size: 13.5px; color: var(--ink2); overflow-wrap: anywhere; }
.ib-blokken { display: flex; flex-direction: column; gap: 16px; }
.ib-blok h3 { font: 800 15px var(--fd); margin-bottom: 5px; }
.ib-blok p { font-size: 14.5px; color: var(--ink2); overflow-wrap: anywhere; }
.ib-inschat { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; }
.ib-bar { min-width: 0; }

/* tijdlijn */
.ib-tl { display: flex; flex-direction: column; }
.ib-tlh { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.ib-tlh h3 { font: 800 17px var(--fd); }
.ib-tlh .n { font: 600 13px var(--fb); color: var(--muted); }
.ib-notbox { display: flex; gap: 8px; align-items: flex-end; background: var(--panel); border: var(--bw) solid var(--control-line); border-radius: 12px; padding: 8px 8px 8px 12px; margin-bottom: 6px; }
.ib-notbox:focus-within { border-color: var(--strong); box-shadow: 0 0 0 1px var(--strong); }
.ib-notbox textarea { flex: 1; min-width: 0; border: 0; background: none; resize: none; font: 400 14.5px/1.45 var(--fb); color: var(--ink); padding: 8px 0; min-height: 38px; outline: none; }
.ib-notbox .mic, .ib-inp .mic { width: 38px; height: 38px; }
.ib-tl > .dstate { margin-bottom: 8px; }
.ib-tl > .ib-ti:first-of-type { margin-top: 8px; }
.ib-ti { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; position: relative; padding-bottom: 16px; }
.ib-ti::before { content: ""; position: absolute; left: 16px; top: 34px; bottom: 0; width: 2px; background: var(--line); }
.ib-ti:last-of-type::before { display: none; }
.ib-ti .tic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--sunk); color: var(--ink2); }
.ib-ti .tic .ic { width: 16px; height: 16px; }
.ib-ti.artifact .tic { background: var(--info-bg); color: var(--info); }
.ib-ti.opdracht .tic, .ib-ti.verslag .tic { background: var(--ok-bg); color: var(--ok); }
.ib-ti.beslissing .tic { background: var(--warn-bg); color: var(--warn); }
.ib-ti.sessie .tic { background: var(--acc-soft); color: var(--acc-ink); }
.ib-ti.notitie .tic { background: var(--strong); color: var(--bg); }
.ib-ti.status .tic { background: none; border: 2px solid var(--line); }
.ib-ti .tib { min-width: 0; padding-top: 5px; }
.ib-ti.status .tib { padding-top: 7px; }
.ib-ti .tit { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.ib-ti .tit b { font-weight: 600; font-size: 14.5px; overflow-wrap: anywhere; min-width: 0; }
.ib-ti.status .tit b { font-weight: 500; font-size: 13.5px; color: var(--ink2); }
.ib-ti .wanneer { font-size: 12.5px; color: var(--muted); margin-left: auto; white-space: nowrap; }
.ib-ti .tis { font-size: 13px; color: var(--muted); margin-top: 3px; overflow-wrap: anywhere; }
.ib-ti .tiq { margin-top: 6px; font-size: 14.5px; color: var(--ink); background: var(--panel); border: var(--bw) solid var(--line); border-radius: 10px; padding: 9px 12px; overflow-wrap: anywhere; white-space: pre-wrap; }
.ib-ti .tiq .bron { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; white-space: normal; }
.ib-tia { display: inline-flex; align-items: center; gap: 4px; margin-top: 7px; font: 600 13px var(--fb); color: var(--link); text-decoration: none; background: none; border: 0; padding: 4px 0; cursor: pointer; }
.ib-tia:hover { text-decoration: underline; }
.ib-tia .ic { width: 14px; height: 14px; }
.ib-kaartje { margin-top: 8px; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: center; background: var(--panel); border: var(--bw) solid var(--line); border-radius: 10px; padding: 8px; text-decoration: none; color: inherit; }
.ib-kaartje:hover { border-color: var(--control-line); }
/* teller met opmerkingen op een artifact (stand; de draad staat in het artifact) */
.ib-opm { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font: 500 13px var(--fb); color: var(--ink2); }
.ib-opm .st { font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.ib-opm .st.open { background: var(--acc-soft); color: var(--acc-ink); }
.ib-opm .st.op { background: var(--info-bg); color: var(--info); }
.ib-opm .st.klaar { background: var(--ok-bg); color: var(--ok); }
.ib-opm a { display: inline-flex; align-items: center; gap: 3px; color: var(--link); font-weight: 600; text-decoration: none; }
.ib-opm a:hover { text-decoration: underline; }
.ib-opm a .ic { width: 14px; height: 14px; }
.ib-kaartje .thumb { aspect-ratio: 3 / 2; border-radius: 6px; background: var(--sunk); overflow: hidden; }
.ib-kaartje .thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.ib-kaartje small { display: block; font-size: 12.5px; color: var(--muted); }
.ib-kaartje b { font: 700 14px var(--fd); overflow-wrap: anywhere; }
.ib-laden { padding: 6px 0; }

/* dialogen */
.ib-ov { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 24px; }
.ib-dlg { position: relative; background: var(--bg); border-radius: 14px; width: min(580px, 100%); max-height: 100%; display: flex; flex-direction: column; box-shadow: 0 30px 80px rgba(0,0,0,.35); animation: ibpop .16s ease-out; }
@keyframes ibpop { from { transform: translateY(8px) scale(.98); opacity: 0; } }
.ib-dlgh { display: flex; align-items: flex-start; gap: 12px; padding: 18px 14px 4px 22px; }
.ib-dlgh .sp { flex: 1; }
.ib-dlgh h2 { font-size: 21px; font-weight: 900; letter-spacing: -.015em; }
.ib-dlgh p { font-size: 13.5px; color: var(--muted); margin-top: 3px; overflow-wrap: anywhere; }
.ib-dlgb { padding: 12px 22px 6px; overflow: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.ib-dlgf { display: flex; gap: 8px; justify-content: flex-end; align-items: center; padding: 14px 22px 18px; border-top: var(--bw) solid var(--line); margin-top: 8px; flex: none; }
.ib-p { font-size: 14.5px; }
.ib-fld { display: grid; gap: 6px; }
.ib-fld > label, .ib-fld > .fl { font: 600 13.5px var(--fb); }
.ib-fld > label span, .ib-fld > .fl span { font-weight: 400; color: var(--muted); }
.ib-fld .dstate.bad { color: var(--bad); font-weight: 600; }
.ib-inp { display: flex; gap: 8px; align-items: flex-end; background: var(--panel); border: var(--bw) solid var(--control-line); border-radius: 10px; padding: 4px 4px 4px 12px; }
.ib-inp:focus-within { border-color: var(--strong); box-shadow: 0 0 0 1px var(--strong); }
.ib-inp textarea, .ib-inp input { flex: 1; min-width: 0; border: 0; background: none; outline: none; resize: none; font: 400 14.5px/1.45 var(--fb); color: var(--ink); padding: 7px 0; min-height: 36px; border-radius: 0; }
.ib-inp[aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad); }
.ib-vorm { display: grid; gap: 8px; }
.ib-vorm label { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; background: var(--panel); border: var(--bw) solid var(--line); border-radius: 12px; padding: 12px 14px; cursor: pointer; }
.ib-vorm label:hover { border-color: var(--control-line); }
.ib-vorm label:has(input:checked) { border-color: var(--strong); box-shadow: inset 0 0 0 1px var(--strong); }
.ib-vorm label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.ib-vorm input { position: absolute; opacity: 0; pointer-events: none; }
.ib-vorm .vi { width: 40px; height: 40px; border-radius: 10px; background: var(--sunk); display: grid; place-items: center; color: var(--ink2); }
.ib-vorm label:has(input:checked) .vi { background: var(--acc-soft); color: var(--acc-ink); }
.ib-vorm b { display: block; font-weight: 700; font-size: 15px; }
.ib-vorm span.t { font-size: 13px; color: var(--muted); }
.ib-vorm .rb { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--control-line); display: grid; place-items: center; }
.ib-vorm label:has(input:checked) .rb { border-color: var(--strong); }
.ib-vorm label:has(input:checked) .rb::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--strong); }
.ib-adv { font: 700 10.5px var(--fb); letter-spacing: .06em; text-transform: uppercase; color: var(--acc-ink); background: var(--acc-soft); padding: 2px 7px; border-radius: 999px; margin-left: 6px; vertical-align: 2px; }
.ib-advw { font-size: 13px; color: var(--ink2); display: flex; gap: 8px; align-items: flex-start; background: var(--acc-soft); border-radius: 10px; padding: 9px 12px; }
.ib-advw .ic { color: var(--acc-ink); width: 16px; height: 16px; margin-top: 2px; }
.ib-stappen { display: grid; background: var(--panel); border: var(--bw) solid var(--line); border-radius: 12px; padding: 6px 14px; }
.ib-stap { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 10px 0; align-items: start; }
.ib-stap + .ib-stap { border-top: 1px solid var(--line); }
.ib-stap .nr { width: 26px; height: 26px; border-radius: 50%; background: var(--sunk); display: grid; place-items: center; font: 700 13px var(--fb); }
.ib-stap b { font-weight: 600; font-size: 14px; display: block; }
.ib-stap span span { font-size: 13px; color: var(--muted); }
.ib-mini { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: var(--panel); border: var(--bw) solid var(--line); border-radius: 12px; padding: 10px 12px; }
.ib-mini b { font: 700 15px var(--fd); overflow-wrap: anywhere; }
.ib-snel { display: flex; gap: 6px; flex-wrap: wrap; }
.ib-snel button { border: var(--bw) solid var(--line); background: var(--panel); border-radius: 999px; padding: 6px 11px; min-height: 34px; font: 500 13px var(--fb); cursor: pointer; color: var(--ink2); }
.ib-snel button:hover, .ib-snel button[aria-pressed="true"] { border-color: var(--strong); color: var(--ink); }
.ib-pkeus { display: flex; gap: 6px; flex-wrap: wrap; }
.ib-check { display: flex; gap: 10px; align-items: center; cursor: pointer; font-weight: 600; font-size: 14px; min-height: 36px; }
.ib-check input { width: 18px; height: 18px; accent-color: var(--acc); min-height: 0; }

/* telefoon: tabs per status, dossier als volle laag, dialogen als bottom-sheet */
.ib-tabs { position: sticky; top: 0; z-index: 3; background: var(--bg); margin: 0 -16px; padding: 6px 16px 8px; }
.ib-tabs .ib-seg button { padding: 9px 4px; font-size: 13px; gap: 5px; }
.ib-tabs .ib-dot { width: 8px; height: 8px; }
.ib-tabhint { font-size: 12.5px; color: var(--muted); margin: -10px 0 -4px; }
.ib-plist { display: flex; flex-direction: column; gap: 10px; }
.ib-pgroep { display: flex; align-items: center; gap: 8px; font: 800 15px var(--fd); margin-top: 6px; }
.ib-pgroep i { width: 10px; height: 10px; border-radius: 3px; }
.ib-pgroep .n { font: 600 12.5px var(--fb); color: var(--muted); }
.ib-fab { position: fixed; right: 16px; bottom: calc(var(--tab-h) + 14px); z-index: 25; width: 56px; height: 56px; border-radius: 16px; border: 0; background: var(--strong); color: var(--bg); display: grid; place-items: center; box-shadow: 3px 3px 0 var(--acc), 0 10px 24px rgba(0,0,0,.2); cursor: pointer; }
.ib-fab .ic { width: 24px; height: 24px; }
.ib-chips.x { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 2px; scrollbar-width: none; }
.ib-chips.x::-webkit-scrollbar { display: none; }
.ib-chips.x .cat { flex: none; }
.ib-dlaag { position: absolute; inset: 0; background: var(--bg); display: flex; flex-direction: column; animation: ibin .18s ease-out; }
.ib-dlaag .ib-pkop { padding: calc(6px + env(safe-area-inset-top, 0px)) 8px 6px 6px; min-height: 56px; gap: 4px; }
.ib-dlaag .ib-pscr { padding: 16px 16px 24px; gap: 18px; }
.ib-terug { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font: 600 15px var(--fb); color: var(--ink2); padding: 10px 10px 10px 6px; border-radius: 8px; }
.ib-terug:hover { color: var(--ink); }
.ib-terug:focus-visible { outline: 3px solid var(--focus); }
.ib-dvoet { flex: none; display: flex; gap: 8px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--panel); border-top: var(--bw) solid var(--line); }
.ib-dvoet .btn { flex: 1; min-width: 0; }
.ib-meer { position: absolute; right: 8px; top: calc(56px + env(safe-area-inset-top, 0px)); z-index: 2; background: var(--panel); border: var(--bw) solid var(--line); border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.25); padding: 6px; display: grid; min-width: 220px; }
.ib-meer button { all: unset; cursor: pointer; padding: 12px; border-radius: 8px; font-size: 14.5px; display: flex; gap: 10px; align-items: center; }
.ib-meer button:hover, .ib-meer button:focus-visible { background: var(--sunk); }
.ib-meer button.dgr { color: var(--bad); }
@media (min-width: 761px) and (max-width: 1100px) {
  .ib-bord, .ib-cells, .ib-laneh { gap: 10px; }
  .ib-col, .ib-cell { padding: 8px; }
  .ib-kvoet .ib-hang { margin-left: 0; }
}
@media (max-width: 760px) {
  .ib { gap: 14px; }
  .ib-ahead h1 { font-size: 28px; }
  .ib-lead { font-size: 13.5px; margin-top: -6px; }
  .ib-archl { grid-template-columns: minmax(0, 1fr); }
  .ib-dtitel { font-size: 24px; }
  .ib-dkern { font-size: 15.5px; }
  .ib-track .st span { display: none; }
  .ib-track .st.nu span { display: inline; }
  .ib-track .ln { margin: 0 6px; }
  .ib-ov { place-items: end stretch; padding: 0; }
  .ib-dlg { width: 100%; border-radius: 18px 18px 0 0; max-height: 92%; animation: ibup .2s ease-out; }
  @keyframes ibup { from { transform: translateY(40px); opacity: .4; } }
  .ib-dlg::before { content: ""; width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 8px auto 0; flex: none; }
  .ib-dlgh { padding: 10px 8px 2px 18px; }
  .ib-dlgb { padding: 10px 18px 4px; }
  .ib-dlgf { padding: 12px 18px calc(14px + env(safe-area-inset-bottom, 0px)); }
  .ib-dlgf .btn { flex: 1; min-width: 0; }
  .ib-kaartje { grid-template-columns: 88px minmax(0, 1fr); }
  .ib-ti .wanneer { margin-left: 0; }
  body[data-route="ideeen"] main { padding-bottom: calc(96px + var(--tab-h)); }
}
/* delen: open/dicht-schakelaar (zelfde als in de HQ-balk, hq-frame.css) */
.dsw { display: flex; gap: 14px; align-items: center; padding: 12px 14px; border-radius: var(--r2); background: var(--sunk); }
.dsw.aan { background: var(--ok-bg); }
.dsw.aan strong { color: var(--ok); }
.dswt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dswt span { font-size: 13.5px; color: var(--ink2); }
.dswk { flex: none; width: 46px; height: 28px; border-radius: 999px; border: var(--bw) solid var(--strong); background: var(--panel); padding: 0; position: relative; cursor: pointer; }
.dswk span { position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: var(--muted); transition: transform .16s, background .16s; }
.dswk[aria-checked="true"] { background: #2FB463; border-color: #1B6B3C; }
.dswk[aria-checked="true"] span { transform: translateX(18px); background: #fff; }
.dswk:disabled { opacity: .6; }
.linkbox.uit { text-decoration: line-through; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .dswk span { transition: none; } }

/* opdrachten-lijst: desktop, één rij per opdracht met vaste hoogte, per project (ontwerp Tweede Brein "Opdrachten ·voorstel") */
.opl { display: flex; flex-direction: column; gap: 18px; }
.opl-top { display: flex; gap: 12px 16px; align-items: baseline; flex-wrap: wrap; }
.opl-top .muted { font-size: 13.5px; }
.opl-tab { display: grid; padding: 0; overflow: hidden; }
.opl-hd, .opl-r { display: grid; grid-template-columns: minmax(0, 1.25fr) 132px minmax(0, 1.5fr) 64px 92px 18px; gap: 16px; align-items: center; padding: 0 16px; }
.opl-hd { height: 34px; }
.opl-hd span { font: 600 11.5px var(--fb); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.opl .rt { text-align: right; }
.opl-p, .opl-stil { display: flex; gap: 10px; align-items: center; height: 40px; padding: 0 16px; background: var(--sunk); border-top: var(--bw) solid var(--line); font-size: 13px; min-width: 0; }
.opl .pn { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; flex: none; }
.opl-p .nt { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.opl .ct { color: var(--ink2); white-space: nowrap; font-variant-numeric: tabular-nums; margin-left: auto; }
.opl .ct b { color: var(--acc-ink); }
.opl .ct a { color: var(--link); font-weight: 600; }
.opl-stil { color: var(--muted); }
.opl-r { height: 50px; border: 0; border-top: 1px solid var(--line); background: var(--panel); width: 100%; text-align: left; font: inherit; font-size: 14px; color: inherit; cursor: pointer; }
.opl-r:hover { background: var(--bg); }
.opl-r .t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.opl-r .dsegs { gap: 3px; min-width: 0; }
.opl-r .dsegs .seg { min-width: 0; }
.opl-r .nu { display: flex; gap: 8px; align-items: center; min-width: 0; white-space: nowrap; color: var(--ink2); font-size: 13.5px; }
.opl-r .nu > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.opl-r .nu .chip { flex: none; padding: 3px 8px; font-size: 11.5px; }
.opl-r.jou { box-shadow: inset 3px 0 0 var(--acc); }
.opl-r.vast { box-shadow: inset 3px 0 0 var(--bad); }
.opl-r.lang { box-shadow: inset 3px 0 0 var(--warn); }
.opl-r .rt { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.opl-r .rt b { color: var(--ink); font-weight: 600; }
.opl-r > .ic { width: 16px; height: 16px; color: var(--muted); }
a.opl-r { text-decoration: none; }
.opl-r.plain { cursor: default; }
.opl-r.plain:hover { background: var(--panel); }
.opl-r.plain .t { font-weight: 500; color: var(--ink2); }
.opl-af { display: flex; gap: 12px; align-items: center; justify-content: space-between; width: 100%; min-height: 40px; padding: 8px 16px; border: 0; border-top: 1px solid var(--line); background: var(--panel); font: inherit; font-size: 13px; color: var(--ink2); text-align: left; cursor: pointer; }
.opl-af:hover { background: var(--bg); }
.opl-af .l { display: flex; gap: 8px; align-items: center; min-width: 0; white-space: nowrap; overflow: hidden; }
.opl-af .l > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.opl-af .l .ic { width: 15px; height: 15px; color: var(--ok); flex: none; }
.opl-af .lv { color: var(--ok); font-weight: 600; flex: none; }
.opl-af .m { color: var(--link); font-weight: 600; white-space: nowrap; }
.opl-afl { display: flex; flex-direction: column; gap: 2px; padding: 4px 16px 12px 31px; background: var(--panel); }
.opl-afl .opl-live { display: flex; flex-direction: column; gap: 6px; padding: 4px 0 6px; }
.opl-afl .opl-klaar { display: flex; flex-direction: column; }
.opl-leeg { padding: 22px 16px; color: var(--muted); text-align: center; font-size: 14px; border-top: 1px solid var(--line); }

/* ---------- Inbox op Vandaag + doorlopen (U-0012; ontwerp tweede brein, scherm "Nieuw · één inbox") ---------- */
.ix-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 24px; align-items: end; }
.ix-head .date { font-size: 14px; color: var(--muted); }
.ix-head h1 { font-size: 40px; font-weight: 900; letter-spacing: -.025em; margin-top: 6px; }
.ix-head h1 em { font-style: normal; color: var(--acc-ink); }
.ix-head .sub { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.ix-go { display: grid; gap: 6px; justify-items: end; }
.ix-go .btn { font-size: 16px; padding: 0 22px; min-height: 50px; }
.ix-go small { color: var(--muted); font-size: 12.5px; }
.ix-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; }
.ix-list { display: grid; padding: 0; overflow: hidden; }
.ix-row { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 16px; border-top: 1px solid var(--line); cursor: pointer; }
.ix-row:first-child { border-top: 0; }
.ix-row:hover { background: var(--sunk); }
.ix-th { width: 100%; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--sunk); display: grid; grid-template-columns: repeat(var(--n, 1), 1fr); gap: 2px; }
.ix-th img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.ix-th .gl { display: grid; place-items: center; color: var(--acc-ink); }
.ix-th .gl .ic { width: 30px; height: 30px; }
.ix-row .t { display: grid; gap: 5px; min-width: 0; }
.ix-row .t .top, .ix-tags { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ix-tl { font: 800 17px/1.25 var(--fd); letter-spacing: -.01em; color: var(--ink); text-decoration: none; }
.ix-tl:hover { text-decoration: underline; }
.ix-row .t small { color: var(--ink2); font-size: 13.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ix-row .acts { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
.ix-verb { display: inline-flex; align-items: center; gap: 6px; font: 700 11.5px/1 var(--fb); letter-spacing: .06em; text-transform: uppercase; padding: 5px 8px; border-radius: 6px; }
.ix-verb.kies { background: var(--acc-soft); color: var(--acc-ink); }
.ix-verb.keur { background: var(--ok-bg); color: var(--ok); }
.ix-verb.doe { background: var(--info-bg); color: var(--info); }
.ix-min { font-size: 12.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.ix-min .ic { width: 13px; height: 13px; }
.ix-done { display: flex; align-items: center; gap: 10px; padding: 12px 16px; font-size: 14px; color: var(--ink2); border-top: 1px solid var(--line); }
.ix-done:first-child { border-top: 0; }
.ix-done .ic { color: var(--ok); }
.ix-done .sp, .ix-team .sp, .ix-foot .sp { flex: 1; }
.ix-empty { display: grid; justify-items: center; gap: 8px; padding: 34px 16px; text-align: center; }
.ix-empty .ok { width: 52px; height: 52px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); display: grid; place-items: center; }
.ix-empty .ok .ic { width: 26px; height: 26px; }
.ix-empty b { font: 800 22px var(--fd); }
.ix-empty > span:not(.ok) { color: var(--muted); }
.ix-empty .ix-done { border: 0; padding: 4px 0 0; }
.ix-team { display: flex; gap: 10px; align-items: center; font-size: 13.5px; color: var(--ink2); padding: 2px; }
.avatar.sm { width: 22px; height: 22px; font-size: 11px; margin: 0; background: var(--info-bg); color: var(--info); cursor: default; }
.ix-quiet { display: flex; gap: 10px; align-items: center; font-size: 13.5px; color: var(--muted); flex-wrap: wrap; }
.ix-quiet:empty { display: none; }
.ix-quiet .lnk { font-size: 13.5px; }
.ix-info { display: grid; gap: 12px; }
.ix-gn { font-size: 13.5px; }
.lnk .ic { width: 15px; height: 15px; }

/* doorlopen: links het beeld (verzonken), rechts de actie */
body[data-route="door"] main { max-width: none; padding: 0; }
.ix-focus { display: grid; grid-template-columns: minmax(0, 1fr) 420px; min-height: calc(100vh - var(--top-h)); }
.ix-view { background: var(--sunk); padding: 28px 32px; display: grid; align-content: start; gap: 16px; min-width: 0; }
.ix-vlbl { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.ix-opts { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 16px; }
.ix-opt { display: grid; align-content: start; padding: 0; border: var(--bw) solid var(--line); border-radius: var(--r); background: var(--panel); overflow: hidden; cursor: pointer; text-align: left; position: relative; color: var(--ink); }
.ix-opt img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; display: block; }
.ix-opt .c { padding: 12px 14px; display: grid; gap: 4px; }
.ix-opt.zb .c { padding-top: 50px; }
.ix-opt .c b { font: 800 16px var(--fd); }
.ix-opt .c small { color: var(--ink2); font-size: 13px; }
.ix-opt .c small.p { color: var(--ok); }
.ix-opt .c small.m { color: var(--bad); }
.ix-opt .k { position: absolute; top: 10px; left: 10px; width: 30px; height: 30px; border-radius: 50%; background: var(--panel); color: var(--ink); font: 800 14px var(--fb); display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.ix-opt .adv { position: absolute; top: 12px; right: 10px; }
.ix-opt:hover { border-color: var(--strong); }
.ix-opt.on { border-color: var(--strong); border-width: 2px; box-shadow: 4px 4px 0 var(--acc); }
.ix-opt.on .k { background: var(--strong); color: var(--bg); }
.ix-vq { display: grid; gap: 10px; }
.ix-vq > b { font: 700 15.5px var(--fb); }
.ix-va { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ix-va figure { margin: 0; display: grid; gap: 8px; }
.ix-va img, .ix-groot img { width: 100%; max-height: 560px; object-fit: cover; object-position: top; border-radius: 14px; box-shadow: 0 0 0 1px var(--line); display: block; }
.ix-va figcaption { font-size: 13.5px; color: var(--ink2); }
.ix-va figcaption b { display: block; color: var(--ink); }
.ix-steps { display: grid; padding: 0; overflow: hidden; }
.ix-step { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; border: 0; border-top: 1px solid var(--line); cursor: pointer; background: none; text-align: left; width: 100%; min-height: 56px; color: var(--ink); }
.ix-stepw { border-top: 1px solid var(--line); }
.ix-stepw:first-child { border-top: 0; }
.ix-stepw .ix-step { border-top: 0; }
.ix-cmd { display: flex; gap: 10px; align-items: flex-start; margin: 0 16px 14px 54px; padding: 10px 10px 10px 12px; background: var(--sunk); border: 1px solid var(--line); border-radius: 8px; }
.ix-cmd pre { font-family: inherit; flex: 1; min-width: 0; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
.ix-cmd code { font: 500 14px/1.5 inherit; font-family: inherit; color: var(--ink); }
.ix-cp { flex: none; min-height: 36px; }
.ix-cp.ok { color: var(--ok); }
@media (max-width: 520px) { .ix-cmd { margin-left: 16px; flex-direction: column; } .ix-cp { width: 100%; min-height: 44px; } }
.ix-step:disabled { cursor: default; }
.ix-step .bx { width: 24px; height: 24px; border-radius: 6px; border: 2px solid var(--control-line); display: grid; place-items: center; color: transparent; }
.ix-step .bx .ic { width: 15px; height: 15px; stroke-width: 3; }
.ix-step.on .bx { background: var(--ok); border-color: var(--ok); color: var(--panel); }
.ix-step.on .tt b { text-decoration: line-through; color: var(--muted); }
.ix-step .tt { display: grid; gap: 2px; }
.ix-step .tt b { font-weight: 600; font-size: 15px; }
.ix-step .tt small { color: var(--muted); font-size: 13px; }
.ix-stp { font-size: 12.5px; }
.ix-mail { background: var(--panel); border: var(--bw) solid var(--line); border-radius: var(--r); padding: 20px 22px; display: grid; gap: 12px; max-width: 720px; }
.ix-mail .hd { display: grid; gap: 3px; font-size: 13.5px; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.ix-mail .hd b { color: var(--ink); font-weight: 600; }
.ix-mail p { font-size: 15px; line-height: 1.55; white-space: pre-wrap; }
.ix-vraag { padding: 16px 18px; max-width: 720px; }
.ix-links { display: flex; gap: 8px 18px; flex-wrap: wrap; font-size: 14px; }
.ix-glyph { display: grid; place-items: center; min-height: 240px; color: var(--acc-ink); }
.ix-glyph .ic { width: 64px; height: 64px; stroke-width: 1.5; }
.ix-side { background: var(--bg); border-left: var(--bw) solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; position: sticky; top: var(--top-h); height: calc(100vh - var(--top-h)); min-width: 0; }
.ix-prog { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.ix-prog .dots { display: flex; gap: 5px; flex: 1; }
.ix-prog .dots i { height: 6px; flex: 1; border-radius: 3px; background: var(--line); }
.ix-prog .dots i.k { background: var(--ok); }
.ix-prog .dots i.b { background: var(--acc); }
.ix-prog .n { font: 600 13px var(--fb); color: var(--muted); font-variant-numeric: tabular-nums; }
/* vaste kolombreedte: Safari rekt een auto-kolom op tot de breedte van een lange knop (Kies A · …) en schuift alles naar rechts */
.ix-body { overflow: auto; min-height: 0; padding: 18px 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; }
.ix-body h2, .ix-phk h2 { font-size: 24px; font-weight: 900; letter-spacing: -.015em; }
.ix-body .why, .ix-phk .why { color: var(--ink2); font-size: 14.5px; }
.ix-act { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; }
.ix-act .btn:not(.sm) { font-size: 15px; min-height: 46px; }
/* lange optielabels (Kies A · …) breken af in plaats van de kolom op te rekken */
.ix-act .btn, .ix-row .acts .btn { white-space: normal; overflow-wrap: anywhere; text-align: center; line-height: 1.3; padding-block: 8px; min-width: 0; max-width: 100%; }
.ix-row .acts .btn { max-width: 280px; }
.ix-act .note { font-size: 12.5px; color: var(--muted); }
.ix-hoort { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ix-hoort .lbl { flex-basis: 100%; }
.wchip { display: inline-flex; align-items: center; gap: 6px; background: var(--panel); border: var(--bw) solid var(--line); border-radius: 999px; padding: 5px 10px; font: 600 12.5px var(--fb); color: var(--ink); cursor: pointer; text-decoration: none; max-width: 100%; text-align: left; }
.wchip:hover { border-color: var(--strong); }
.wchip i { font-style: normal; color: var(--muted); font-weight: 500; }
.wchip .ic { width: 14px; height: 14px; color: var(--muted); }
.ix-hoort .sep { color: var(--muted); display: inline-flex; }
.ix-hoort .sep .ic { width: 14px; height: 14px; }
.ix-daarna { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--ink2); background: var(--sunk); border-radius: var(--r2); padding: 9px 11px; }
.ix-daarna .ic { width: 15px; height: 15px; color: var(--acc-ink); margin-top: 2px; }
.ix-daarna b { color: var(--ink); }
.ix-foot { display: flex; gap: 8px; align-items: center; padding: 12px 20px; border-top: 1px solid var(--line); background: var(--panel); }
.ix-foot kbd { font: 600 11px var(--fb); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; color: var(--muted); margin-left: 4px; }
.ix-phk { display: grid; gap: 10px; }
.ix-phk .ix-prog { padding: 4px 0 2px; border: 0; }
.ix-hoortmeer { font-size: 14px; }
/* vormen per soort (inbox 20261007-2310, stap 3): kop bovenaan de linkerkolom, kernbeeld groot, gevolg onder de optie, achtergrond ingeklapt */
.ix-view > .ix-phk h2 { font-size: clamp(24px, 2.3vw, 32px); line-height: 1.12; max-width: 34ch; text-wrap: balance; }
.ix-view > .ix-phk .why { max-width: 72ch; font-size: 15px; }
.ix-isaf { display: block; }
.ix-wat { display: block; font: 600 17px/1.35 var(--fb); letter-spacing: 0; color: var(--ink2); margin-top: 6px; }
.ix-kern { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: end; }
.ix-kernb { border: 0; padding: 0; background: none; cursor: zoom-in; border-radius: 14px; justify-self: start; min-width: 0; }
.ix-kernb img { display: block; max-width: 100%; max-height: min(56vh, 540px); width: auto; height: auto; border-radius: 14px; box-shadow: 0 0 0 1px var(--line); background: var(--panel); }
.ix-kernb:hover img { box-shadow: 0 0 0 1.5px var(--strong); }
.ix-kern figcaption { font-size: 15px; line-height: 1.45; color: var(--ink); max-width: 46ch; padding-bottom: 4px; }
.ix-opt .c .gv { font-size: 14px; line-height: 1.4; color: var(--ink); }
.ix-opts.rij .ix-opt { grid-template-columns: 76px minmax(0, 1fr); }
.ix-opts.rij .ix-opt img { width: 64px; height: auto; aspect-ratio: 3 / 4; margin: 12px 0 12px 12px; border-radius: 8px; box-shadow: 0 0 0 1px var(--line); }
.ix-opts.rij .ix-opt .k { top: 6px; left: 6px; width: 26px; height: 26px; font-size: 13px; }
.ix-opts.rij .ix-opt .adv { position: static; justify-self: start; }
.ix-opts.rij .ix-opt.zb { grid-template-columns: minmax(0, 1fr); }
.ix-advb { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; background: var(--acc-soft); border-radius: var(--r2); padding: 10px 14px; }
.ix-advb .lbl { color: var(--acc-ink); }
.ix-advb b { font-weight: 700; }
.ix-ach { border-top: 1px solid var(--line); padding-top: 8px; font-size: 14px; color: var(--ink2); max-width: 80ch; }
.ix-ach summary { cursor: pointer; font-weight: 600; color: var(--ink); list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; }
.ix-ach summary::-webkit-details-marker { display: none; }
.ix-ach .ix-achp, .ti-pijl { width: 15px; height: 15px; flex: none; }
.ix-ach[open] .ix-achp, .ti-bundel[open] .ti-pijl { transform: rotate(90deg); }
.ix-ach p { margin-top: 4px; }
.ix-letop { display: grid; gap: 8px; }
.ix-letop ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.ix-letop li { display: flex; gap: 10px; align-items: baseline; font-size: 15px; }
.ix-letop li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); transform: translateY(-1px); }
.ix-keur2 { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.ix-plekrij { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.ix-plek { min-height: 46px; font-size: 15px; }
.ix-duur { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; color: var(--muted); }
.ix-duur .ic { width: 15px; height: 15px; }
/* Ter info: uitkomst-chip + één zin + een beeld; alleen let op en mislukt los, de rest in één bundel */
.ti-los { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.ti { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: start; background: var(--panel); border: var(--bw) solid var(--line); border-radius: var(--r); padding: 12px; text-decoration: none; color: inherit; min-width: 0; }
.ti:hover { border-color: var(--strong); }
.ti-im { aspect-ratio: 4 / 3; background: var(--sunk); border-radius: var(--r2); overflow: hidden; display: grid; place-items: center; }
.ti-im img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.ti-im .glyph { font: 800 24px var(--fd); color: var(--acc-ink); }
.ti-tx { display: grid; gap: 5px; min-width: 0; }
.ti-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ti-m { font-size: 12.5px; color: var(--muted); }
.ti-zin { font-weight: 600; font-size: 15px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ti.klein .ti-zin { -webkit-line-clamp: 2; }
.ti-t { font-size: 12.5px; color: var(--muted); }
.ti.klein { grid-template-columns: 64px minmax(0, 1fr); border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 10px 14px; background: none; }
.ti.klein:hover { background: var(--sunk); }
.ti.klein .ti-zin { font-weight: 500; font-size: 14px; }
.ti-bundel { padding: 0; overflow: hidden; }
.ti-bundel summary { display: flex; gap: 12px; align-items: center; padding: 10px 14px; min-height: 56px; cursor: pointer; list-style: none; }
.ti-bundel summary::-webkit-details-marker { display: none; }
.ti-duims { display: flex; padding-left: 8px; }
.ti-duims img { width: 36px; height: 36px; object-fit: cover; object-position: top; border-radius: var(--r2); box-shadow: 0 0 0 2px var(--panel); margin-left: -8px; }
.ti-bt { font-size: 14.5px; min-width: 0; }
@media (prefers-reduced-motion: no-preference) { .ix-achp, .ti-pijl { transition: transform .15s; } }
@media (max-width: 760px) {
  .ix-view > .ix-phk h2 { font-size: 22px; }
  .ix-wat { font-size: 15.5px; }
  .ix-kern { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ix-kernb { justify-self: stretch; }
  .ix-kernb img { width: 100%; max-height: 60vh; object-fit: cover; object-position: top; }
  .ix-kern figcaption { font-size: 14px; }
  .ix-fhoofd:has(> :nth-child(2)) { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .ti-los { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ti { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 10px; }
  .ti.klein { grid-template-columns: 56px minmax(0, 1fr); }
}
@media (max-width: 1100px) {
  .ix-grid { grid-template-columns: minmax(0, 1fr); }
  .ix-opts { grid-template-columns: repeat(min(var(--n, 3), 2), minmax(0, 1fr)); }
  .ix-focus { grid-template-columns: minmax(0, 1fr) 360px; }
}
@media (max-width: 760px) {
  .ix-head { grid-template-columns: minmax(0, 1fr); }
  .ix-head h1 { font-size: 28px; }
  .ix-go { justify-items: stretch; }
  .ix-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .ix-row { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 12px; align-items: start; }
  .ix-row .acts { grid-column: 1 / -1; justify-content: flex-start; }
  .ix-row .acts .btn { min-height: 44px; }   /* tikdoel ≥ 44 (Open, Plek kiezen, advies) */
  .ix-focus { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .ix-view { padding: 12px 16px 16px; }
  .ix-opts { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ix-opt { grid-template-columns: 96px minmax(0, 1fr); }
  .ix-opt img { aspect-ratio: 1; height: 100%; }
  .ix-opt.zb { grid-template-columns: minmax(0, 1fr); }
  .ix-opt.zb .c { padding: 12px 14px 12px 52px; }
  .ix-opt .c { align-content: center; }
  .ix-opt .adv { position: static; justify-self: start; }
  .ix-va { gap: 8px; }
  .ix-va img { max-height: 300px; }
  .ix-side { position: static; height: auto; border-left: 0; border-top: var(--bw) solid var(--line); }
  .ix-body { overflow: visible; padding: 16px; }
  /* sticky voet: moet in de hele doorloop-pagina plakken, niet in zijn eigen zijkolom (die begint soms vlak boven de tabbalk, dan lag de voet erover) */
  .ix-focus { display: flex; flex-direction: column; padding-bottom: var(--tab-h); }
  .ix-side { display: contents; }
  .ix-body { border-top: var(--bw) solid var(--line); background: var(--bg); }
  .ix-foot { position: sticky; bottom: var(--tab-h); padding: 10px 16px; }
  .ix-foot kbd { display: none; }
}
.ix-wrap { padding: 28px 32px; max-width: 1440px; margin: 0 auto; display: grid; gap: 20px; }
@media (max-width: 760px) { .ix-wrap { padding: 16px; } }

/* ---------- Bibliotheek (U-0012 fase 2; ontwerp tweede brein, scherm "Bibliotheek") ---------- */
.bkop { align-items: baseline; justify-content: flex-start; flex-wrap: wrap; }
.bkop h1 { font-size: 32px; }
.bkop .muted { font-size: 13.5px; }
@media (min-width: 761px) { .bieb .slay { grid-template-columns: 220px minmax(0, 1fr); } }
.bieb .facets button { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: none; border: 0; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 14px; text-align: left; color: var(--ink); width: 100%; }
.bieb .facets button:hover { background: var(--sunk); }
.bieb .facets button.on { background: var(--strong); color: var(--bg); font-weight: 600; }
.bieb .facets button.on .pj { color: inherit; }
.bieb .facets button b { font-weight: 600; color: inherit; opacity: .65; font-variant-numeric: tabular-nums; }
.bieb .facets .f { gap: 2px; }
.bieb .facets .f .lbl { margin-bottom: 4px; }
.bieb .facets .beheer button { color: var(--link); font-weight: 600; }
.bieb .facets .lnk { padding-left: 8px; }
.bcats { display: none; }
.ix-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ix-card { display: grid; grid-template-rows: auto 1fr; overflow: visible; position: relative; min-width: 0; }
.ix-card.arch { opacity: .75; }
.ix-card .im { text-decoration: none; aspect-ratio: 16 / 10; background: var(--sunk); overflow: hidden; display: grid; position: relative; border-radius: calc(var(--r) - 1.5px) calc(var(--r) - 1.5px) 0 0; }
.ix-card .im img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.ix-card .im .gl { display: grid; place-items: center; font: 800 34px var(--fd); color: var(--acc-ink); }
.ix-card .im .chip { position: absolute; left: 8px; bottom: 8px; }
.ix-card .tx { padding: 10px 44px 12px 12px; display: grid; gap: 4px; align-content: start; min-width: 0; }
.ix-card .tl { font-weight: 700; font-size: 14.5px; line-height: 1.3; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.ix-card .tl:hover { text-decoration: underline; }
.ix-card .tx small { color: var(--muted); font-size: 12.5px; }
.bmenu { position: absolute; right: 6px; bottom: 8px; }
.bmenu > .btn { font-size: 18px; line-height: 1; }
.bmenu-l { position: absolute; right: 0; bottom: calc(100% + 4px); z-index: 6; display: grid; min-width: 200px; background: var(--panel); border: var(--bw) solid var(--line); border-radius: var(--r2); box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 4px; }
.bmenu-l button { background: none; border: 0; text-align: left; padding: 9px 10px; border-radius: 6px; font-size: 14px; cursor: pointer; color: var(--ink); }
.bmenu-l button:hover, .bmenu-l button:focus-visible { background: var(--sunk); }
.bmeer { justify-self: start; }
.bbes { display: grid; gap: 10px; }
.ix-bl { display: grid; padding: 2px 16px; }
.ix-blr { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 11px 0; border: 0; border-top: 1px solid var(--line); font-size: 14px; background: none; text-align: left; width: 100%; color: var(--ink); cursor: pointer; }
.ix-blr:first-child { border-top: 0; }
.ix-blr:hover .w > span { text-decoration: underline; }
.ix-blr .k { font-weight: 700; color: var(--acc-ink); font-variant-numeric: tabular-nums; }
.ix-blr .w { display: grid; gap: 2px; min-width: 0; }
.ix-blr .w > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ix-blr .w small { color: var(--ink2); font-size: 12.5px; }
.ix-blr .m { color: var(--muted); font-size: 12.5px; white-space: nowrap; display: inline-flex; gap: 8px; align-items: center; }
details.ix-blr { display: block; cursor: default; }
details.ix-blr summary { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; cursor: pointer; list-style: none; }
details.ix-blr summary::-webkit-details-marker { display: none; }
details.ix-blr[open] .w > span { -webkit-line-clamp: unset; }
details.ix-blr .rd { margin: 8px 0 2px 82px; color: var(--ink2); font-size: 13.5px; }
details.ix-blr.flash, .ix-blr.flash { animation: flash 1.6s ease-out; }
.lnk.stil { color: var(--muted); font-weight: 500; }
@media (max-width: 1100px) { .ix-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .bkop h1 { font-size: 26px; }
  .bcats { display: flex; }
  .ix-cards { gap: 10px; }
  .ix-card .tx { padding: 8px 36px 10px 10px; }
  .ix-card .tl { font-size: 13.5px; }
  .ix-blr, details.ix-blr summary { grid-template-columns: 52px minmax(0, 1fr); }
  .ix-blr .m { grid-column: 2; white-space: normal; }
  details.ix-blr .rd { margin-left: 64px; }
}

/* ---------- Opmerking of vraag (U-0012 fase 3): één vak voor beslissing, deeltaak en doorlopen; uitkomst van een sessie in de draad ---------- */
.vvak { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 14px; }
.vvak .ddraad { margin: 0; }
.vvak-in { display: flex; gap: 8px; align-items: flex-end; }
.vvak-in textarea { flex: 1; min-width: 0; resize: vertical; font: 14.5px/1.4 var(--fb); color: var(--ink); background: var(--panel); border: var(--bw) solid var(--control-line); border-radius: var(--r2); padding: 9px 11px; min-height: 44px; }
.vvak-in textarea[aria-invalid="true"] { border-color: var(--bad); }
.vvak-in .mic { width: 42px; height: 42px; flex: none; }
.vvak-k { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.vvak-k .sp { flex: 1; }
.vvak .dstate:empty { display: none; }
.duitk { display: grid; gap: 4px; background: var(--info-bg); border-radius: var(--r2); padding: 9px 11px; font-size: 14px; }
.duitk .w { font-size: 12px; color: var(--info); font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }
.duitk .w .ic { width: 14px; height: 14px; }
.duitk p { color: var(--ink); }
.duitk .lnk { justify-self: start; font-size: 13px; }

/* ---------- Zo werkt HQ (/uitleg, U-0012 fase 4) en de banner "Nieuw hier?" op Vandaag ---------- */
.uitlegbtn { background: none; border: var(--bw) solid var(--nav-muted); color: var(--nav-ink); border-radius: 999px; padding: 6px 11px; font: 600 13px var(--fb); display: inline-flex; gap: 6px; align-items: center; text-decoration: none; margin-left: 8px; white-space: nowrap; }
.uitlegbtn:hover, .uitlegbtn.on { background: var(--nav-hi); }
.uitlegbtn .ic { width: 16px; height: 16px; }
.ix-new { display: flex; gap: 12px; align-items: center; background: var(--panel); border: var(--bw) solid var(--line); border-radius: var(--r); padding: 10px 14px; font-size: 14px; flex-wrap: wrap; }
.ix-new .sp { flex: 1; }
.ix-new > .ic { color: var(--acc-ink); }
.ix-uitleg { display: grid; gap: 26px; max-width: 1180px; width: 100%; margin: 0 auto; }
.ix-uh { display: grid; gap: 10px; }
.ix-uh h1 { font-size: 40px; font-weight: 900; letter-spacing: -.025em; max-width: 24ch; }
.ix-flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: stretch; }
.ix-ar { display: grid; place-items: center; color: var(--muted); }
.ix-fl { display: grid; gap: 6px; align-content: start; background: var(--panel); border: var(--bw) solid var(--line); border-radius: var(--r); padding: 16px; }
.ix-fl .no { width: 38px; height: 38px; border-radius: 10px; background: var(--sunk); display: grid; place-items: center; color: var(--ink2); }
.ix-fl b { font: 800 19px var(--fd); }
.ix-fl small { color: var(--ink2); font-size: 13.5px; line-height: 1.4; }
.ix-jij { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px; background: var(--acc-soft); border: var(--bw) solid var(--acc); border-radius: var(--r); padding: 20px 22px; align-items: center; }
.ix-jijk { display: grid; gap: 8px; }
.ix-jijk h2 { font-size: 22px; font-weight: 800; }
.ix-jijk p { color: var(--ink2); font-size: 14.5px; }
.ix-jijv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; align-items: center; font-size: 14.5px; }
.ix-jijv .ix-verb { justify-self: start; background: var(--panel); }
.ix-plekken { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ix-pl { padding: 14px 16px; display: grid; gap: 4px; align-content: start; text-decoration: none; color: var(--ink); }
.ix-pl:hover { border-color: var(--strong); }
.ix-pl span { color: var(--acc-ink); }
.ix-pl b { font-weight: 700; font-size: 15.5px; }
.ix-pl small { color: var(--ink2); font-size: 13px; line-height: 1.35; }
.ix-woord { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ix-wk { padding: 16px 18px; display: grid; gap: 6px; }
.ix-wk p { font-size: 14.5px; color: var(--ink2); line-height: 1.5; }
.ix-wk p b { color: var(--ink); }
.ix-uk { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 1100px) { .uitlegbtn span { display: none; } .uitlegbtn { padding: 6px 8px; } }
@media (max-width: 760px) {
  .uitlegbtn { display: none; }
  .ix-uh h1 { font-size: 27px; }
  .ix-flow { grid-template-columns: minmax(0, 1fr); }
  .ix-ar { transform: rotate(90deg); justify-self: center; }
  .ix-jij { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .ix-plekken { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ix-woord { grid-template-columns: minmax(0, 1fr); }
}
/* Ideeën: kaart "In uitvoering" linkt naar de opdracht (U-0012 fase 4) */
.ib-opd { position: relative; z-index: 1; justify-self: start; max-width: 100%; display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--link); text-decoration: none; min-width: 0; }
.ib-opd span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ib-opd:hover span { text-decoration: underline; }
.ib-opd .ic { width: 14px; height: 14px; flex: none; }

/* ---------- wachtstand op Vandaag (U-0023): filterknoppen, korte rijen, parkeren, blok Geparkeerd ---------- */
.ix-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ix-fchip { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px 0 12px; border-radius: 999px; border: var(--bw) solid var(--line);
  background: var(--panel); color: var(--ink2); font: 600 14px var(--fb); cursor: pointer; white-space: nowrap; transition: border-color .12s, background .12s, transform .08s; }
.ix-fchip::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--fc, var(--muted)); flex: none; }
.ix-fchip.kies { --fc: var(--acc); } .ix-fchip.keur { --fc: var(--ok); } .ix-fchip.doe { --fc: var(--info); } .ix-fchip.sort { --fc: var(--warn); }
.ix-fchip.park::before { display: none; }
.ix-fchip.park .ic { width: 14px; height: 14px; color: var(--muted); }
.ix-fchip .n { font: 800 14px var(--fd); color: var(--ink); font-variant-numeric: tabular-nums; }
.ix-fchip:hover { border-color: var(--strong); color: var(--ink); }
.ix-fchip:active { transform: translate(1px, 1px); }
.ix-fchip[aria-pressed="true"] { background: var(--strong); border-color: var(--strong); color: var(--bg); box-shadow: 2px 2px 0 var(--acc); }
.ix-fchip[aria-pressed="true"] .n, .ix-fchip[aria-pressed="true"].park .ic { color: var(--bg); }
.ix-fchip .ixf-x { width: 14px; height: 14px; margin-left: 2px; opacity: .8; }
.ix-head .sub { align-items: center; }
.ixf-naam { color: var(--acc-ink); }
.ixf-uit { font-size: 14px; min-height: 44px; }
/* 6A: kort, titel + één regel, kleiner plaatje */
.ix-row { grid-template-columns: 80px minmax(0, 1fr) auto; padding-block: 12px; gap: 14px; }
.ix-row .t small { -webkit-line-clamp: 1; }
/* de titel is de vraag: hooguit twee regels, niet halverwege afkappen op één regel; daaronder alleen het advies */
.ix-row .ix-tl { font-size: 16px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-width: 0; overflow-wrap: anywhere; }
.ix-row .ix-pk { width: 40px; min-height: 40px; padding: 0; color: var(--ink2); border-radius: var(--r2); border-color: var(--line); }
.ix-row .ix-pk:hover, .ix-row .ix-pk:focus-visible { color: var(--ink); background: var(--sunk); }
.ix-pk .ic { width: 17px; height: 17px; }
/* blok Geparkeerd onderaan Voor jou (standaard dicht) */
.pk-blok { display: grid; gap: 10px; }
.pk-kop { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; background: none; border: 0; padding: 0 2px; cursor: pointer; color: var(--ink); text-align: left; border-radius: var(--r2); }
.pk-kop h3 { font: 800 17px var(--fd); letter-spacing: -.01em; }
.pk-kop .n { background: var(--sunk); border-radius: 999px; font: 700 12.5px var(--fb); padding: 3px 9px; color: var(--ink2); font-variant-numeric: tabular-nums; }
.pk-kop .pk-pijl { color: var(--muted); transition: transform .15s; }
.pk-kop[aria-expanded="true"] .pk-pijl { transform: rotate(90deg); }
.pk-kop .sp { flex: 1; }
.pk-kop .hint { color: var(--muted); font-size: 13px; font-weight: 500; }
.pk-kop:hover .hint { color: var(--ink); }
.pk-lijst { display: grid; padding: 0; overflow: hidden; }
.pk-rij { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 11px 16px; border-top: 1px solid var(--line); }
.pk-rij:first-child { border-top: 0; }
.pk-rij { cursor: pointer; }
.pk-rij:hover { background: var(--sunk); }
.pk-tchip:disabled { opacity: .35; cursor: not-allowed; }
.pk-rij .t { display: grid; gap: 4px; min-width: 0; }
.pk-rij .t b { font: 700 15px/1.3 var(--fd); color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-rij .t small { color: var(--muted); font-size: 12.5px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pk-rij .pk-tot { display: inline-flex; gap: 4px; align-items: center; }
.pk-rij .pk-tot .ic { width: 13px; height: 13px; }
.pk-rij .acts { display: flex; gap: 8px; }
.pk-wacht { display: inline-flex; gap: 6px; align-items: center; color: var(--acc-ink); font-weight: 600; }
.stip { width: 8px; height: 8px; border-radius: 50%; background: var(--acc); display: inline-block; flex: none; }
.pk-noot { color: var(--muted); font-size: 13px; display: flex; gap: 6px; align-items: center; }
.pk-noot .ic { width: 15px; height: 15px; }
/* menu: popover (desktop) en bottom-sheet (telefoon) */
.pk-scrim { position: fixed; inset: 0; z-index: 40; }
.pk-pop { position: fixed; z-index: 41; width: 340px; max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); overflow-y: auto; background: var(--panel);
  border: var(--bw) solid var(--line); border-radius: var(--r); box-shadow: 0 14px 36px rgba(0,0,0,.18); padding: 6px; display: grid; gap: 2px; }
.pk-hd { display: grid; gap: 2px; padding: 8px 10px 6px; min-width: 0; }
.pk-hd b { font: 600 11.5px var(--fb); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pk-hd small { font: 700 14.5px/1.3 var(--fd); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-grens { display: flex; gap: 8px; align-items: center; padding: 8px 10px; margin: 2px 4px 4px; border-radius: var(--r2); background: var(--acc-soft); color: var(--acc-ink); font-size: 13px; font-weight: 600; }
.pk-opts { display: grid; gap: 1px; }
.pk-opt { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; min-height: 44px; padding: 0 10px; border: 0; border-radius: var(--r2);
  background: none; color: var(--ink); text-align: left; font: 600 14.5px var(--fb); cursor: pointer; }
.pk-opt .pk-ic { color: var(--muted); display: grid; place-items: center; }
.pk-opt .pk-ic .ic { width: 18px; height: 18px; }
.pk-opt .pk-r { color: var(--muted); font-size: 13px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; }
.pk-opt .pk-nu { color: var(--acc-ink); display: grid; }
.pk-opt:hover, .pk-opt:focus-visible { background: var(--sunk); outline: none; }
.pk-opt:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }
.pk-opt.on .pk-l { font-weight: 800; }
.pk-meer { border-top: 1px solid var(--line); border-radius: 0 0 var(--r2) var(--r2); margin-top: 3px; }
.pk-eigen { display: grid; gap: 10px; padding: 8px 10px 6px; }
.pk-velden { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 8px; }
.pk-velden label { display: grid; gap: 4px; min-width: 0; }
.pk-velden label span { font-size: 12px; font-weight: 600; color: var(--muted); }
.pk-velden input { min-height: 44px; width: 100%; min-width: 0; border: var(--bw) solid var(--control-line); border-radius: var(--r2); padding: 0 10px; background: var(--panel);
  color: var(--ink); font: 600 15px var(--fb); }
.pk-velden input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.pk-tijden { display: flex; gap: 6px; flex-wrap: wrap; }
.pk-tchip { min-height: 36px; padding: 0 12px; border-radius: 999px; border: var(--bw) solid var(--line); background: var(--panel); color: var(--ink2); font: 600 13px var(--fb); cursor: pointer; font-variant-numeric: tabular-nums; }
.pk-tchip:hover { border-color: var(--strong); }
.pk-tchip.on { background: var(--strong); border-color: var(--strong); color: var(--bg); }
.pk-sam { font-size: 13.5px; color: var(--ink2); min-height: 1.4em; }
.pk-sam .fout { color: var(--bad); font-weight: 600; }
.pk-go { width: 100%; min-height: 46px; }
.pk-voet { display: flex; gap: 7px; align-items: flex-start; color: var(--muted); font-size: 12.5px; line-height: 1.4; padding: 8px 10px 6px; border-top: 1px solid var(--line); margin-top: 4px; }
.pk-voet .ic { width: 14px; height: 14px; margin-top: 2px; }
.pk-sheet .sb { gap: 4px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
.pk-sheet .pk-opt { min-height: 52px; font-size: 16px; }
.pk-sheet .pk-hd small { white-space: normal; font-size: 16px; }
@media (max-width: 760px) {
  .ix-fchip { min-height: 44px; }
  .ix-row { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .ix-row .acts { gap: 8px; }
  .ix-row .ix-pk { width: 44px; min-height: 44px; border: var(--bw) solid var(--line); }
  /* geparkeerde rij: titel + één regel, rechts twee icoonknoppen (labels alleen voor schermlezers) */
  .pk-rij { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 10px 8px 10px 12px; }
  .pk-rij .acts { gap: 4px; }
  .pk-rij .acts .btn { width: 44px; min-height: 44px; padding: 0; border-color: transparent; background: none; }
  .pk-rij .acts .btn .lb { display: none; }
  .pk-rij .t small { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
  .pk-rij .t small .pj { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .pk-rij .t small .pk-wacht { flex: none; }
  .pk-rij .acts [data-park] { display: none; }   /* tik op de rij = verschuiven; alleen Terughalen als knop */
  .pk-rij .t small .pk-tot { flex: none; }
  /* filterknoppen: alles in beeld (afbreken mag); werkers-chip eronder */
  .ix-head > div, .ix-head .sub { min-width: 0; }
  .ix-head .sub { flex-direction: column; align-items: stretch; gap: 10px; }
  .ix-filter { gap: 6px; }
  .ix-fchip { padding: 0 12px 0 10px; font-size: 13.5px; }
  .ix-werk { align-self: flex-start; }
  .pk-tchip { min-height: 44px; flex: 1; }
  .pk-velden input { font-size: 16px; }   /* iOS zoomt niet in bij ≥ 16px */
}
/* doorlopen: Parkeer in de voet; smalle zijkolom (761–1100 px) = alleen het icoon */
.ix-foot { flex-wrap: wrap; }
@media (min-width: 761px) and (max-width: 1100px) { .ix-fpk span { display: none; } .ix-fpk { width: 40px; padding: 0; } }
@media (max-width: 760px) { .ix-foot .btn { min-height: 44px; } }

/* doorlopen op de telefoon: tikdoelen ≥ 44 px (Stuur, mic, werk-chips, keuzeknoppen) */
@media (max-width: 760px) {
  .ix-focus .btn.sm, .ix-focus .wchip, .ix-focus .mic { min-height: 44px; }
  .ix-focus .mic { width: 44px; height: 44px; }
  .ix-focus .wchip { padding-block: 8px; }
}
/* doorlopen op de telefoon (inbox 20261007-2310): één vaste balk met ⋯ (Vorige, Later, Parkeer, Stoppen) en de hoofdknop met de optienaam */
.bmenu-l[hidden] { display: none; }
.bmenu-l a { display: block; padding: 9px 10px; border-radius: 6px; font-size: 14px; color: var(--ink); text-decoration: none; }
.bmenu-l a:hover, .bmenu-l a:focus-visible { background: var(--sunk); }
@media (max-width: 760px) {
  .ix-foot-m { flex-wrap: nowrap; gap: 10px; align-items: center; }
  .ix-foot-m .ix-meer { position: relative; right: auto; bottom: auto; flex: none; display: flex; }
  .ix-foot-m .ix-meer > .btn { width: 48px; min-height: 48px; padding: 0; font-size: 20px; }
  .ix-foot-m .bmenu-l { left: 0; right: auto; min-width: 220px; }
  .ix-foot-m .bmenu-l [role="menuitem"] { display: flex; align-items: center; gap: 10px; min-height: 48px; font-size: 16px; }
  .ix-foot-m .bmenu-l [role="menuitem"][disabled] { color: var(--muted); cursor: default; background: none; }
  .ix-foot-m .bmenu-l .ic { width: 18px; height: 18px; }
  .ix-fhoofd { flex: 1; min-width: 0; display: grid; }
  .ix-fhoofd .btn { width: 100%; min-height: 48px; font-size: 15px; white-space: normal; overflow-wrap: anywhere; text-align: center; line-height: 1.3; padding-block: 8px; }
  .ix-fhoofd .btn .bt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }   /* lang optielabel: twee regels, de kaart toont het hele label */
}