/* Slimmie UI — component styles for the app and the website (phase 3).
   Built only on the design tokens: load ../../branding/selected/tokens/slimmie.css first.
   No colour, size or timing is defined here that is not a token, except component geometry (heights, widths).
   Ochre (--action-akkoord-*, --accent, --status-wacht*) appears only for "wacht op jou" and the akkoord button. */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.s-ui { margin: 0; background: var(--bg-canvas); color: var(--text-primary); font: var(--type-ui); -webkit-font-smoothing: antialiased; }
.s-ui :where(h1, h2, h3, h4, p, ul, ol, figure) { margin: 0; }
.s-ui :where(ul, ol) { padding: 0; list-style: none; }
:where(.s-ui) a { color: inherit; }   /* zero-specificity, so link-buttons keep their own colour */
.s-ui :focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: var(--radius-sm); }
.s-ui img { max-width: 100%; display: block; }
.s-ui [hidden] { display: none !important; }

.t-display-l { font: var(--type-display-l); letter-spacing: var(--type-display-l-tracking); }
.t-display-m { font: var(--type-display-m); letter-spacing: var(--type-display-m-tracking); }
.t-heading-l { font: var(--type-heading-l); letter-spacing: var(--type-heading-l-tracking); }
.t-heading-m { font: var(--type-heading-m); letter-spacing: var(--type-heading-m-tracking); }
.t-heading-s { font: var(--type-heading-s); letter-spacing: var(--type-heading-s-tracking); }
.t-body-l { font: var(--type-body-l); }
.t-body-m { font: var(--type-body-m); }
.t-ui { font: var(--type-ui); }
.t-small { font: var(--type-body-s); }
.t-label { font: var(--type-label); letter-spacing: var(--type-label-tracking); text-transform: uppercase; color: var(--text-secondary); }
.t-caption { font: var(--type-caption); letter-spacing: var(--type-caption-tracking); }
.t-secondary { color: var(--text-secondary); }
.t-tertiary { color: var(--text-tertiary); }
.t-num { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- icon ---------- */
.icon { width: 20px; height: 20px; flex: none; display: inline-block; vertical-align: middle; color: currentColor; }
.icon--16 { width: 16px; height: 16px; }
.icon--24 { width: 24px; height: 24px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 40px; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-full);
  font: 600 14px/1 var(--font-brand); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
.btn:active { transform: translateY(1px); }
.btn .icon { width: 18px; height: 18px; }
.btn--sm { height: 32px; padding: 0 var(--space-3); font-size: 13px; }
.btn--lg { height: 48px; padding: 0 var(--space-6); font-size: 15px; }
.btn--block { width: 100%; }
.btn--primary { background: var(--action-primary-bg); color: var(--action-primary-text); }
.btn--primary:hover { background: var(--action-primary-hover); }
.btn--akkoord { background: var(--action-akkoord-bg); color: var(--action-akkoord-text); }         /* only for akkoord */
.btn--akkoord:hover { background: var(--action-akkoord-hover); }
.btn--secondary { background: var(--action-secondary-bg); color: var(--action-secondary-text); box-shadow: inset 0 0 0 1px var(--action-secondary-border); }
.btn--secondary:hover { box-shadow: inset 0 0 0 1px var(--border-strong); }
.btn--text { background: transparent; color: var(--text-secondary); padding: 0 var(--space-2); }
.btn--text:hover { color: var(--text-primary); }
.btn--icon { width: 40px; padding: 0; background: transparent; color: var(--text-secondary); }
.btn--icon:hover { background: var(--bg-subtle); color: var(--text-primary); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

/* ---------- status chip, vaardigheid tag, counts ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 var(--space-2) 0 6px; border-radius: var(--radius-full); background: var(--bg-subtle); color: var(--text-primary); font: var(--type-label); letter-spacing: var(--type-label-tracking); white-space: nowrap; }
.chip .icon { width: 16px; height: 16px; }
.chip--wacht { background: var(--accent-subtle); }
.chip--bezig { color: var(--text-secondary); }
.chip--plain { background: transparent; padding-left: 0; color: var(--text-secondary); font-weight: 500; }
.tag-ai { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: var(--radius-full); background: var(--bg-subtle); color: var(--text-secondary); font: 700 10.5px/1 var(--font-brand); letter-spacing: .02em; }
.count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-full); background: var(--bg-subtle); color: var(--text-primary); font: 700 11.5px/1 var(--font-brand); font-variant-numeric: tabular-nums; }
.count--wacht { background: var(--accent); color: var(--action-akkoord-text); }
.status-icon { color: var(--status-voorbereid); }
.status-icon--bezig { color: var(--status-bezig); }

/* ---------- surfaces ---------- */
.card { background: var(--bg-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
.card--pad { padding: var(--space-6); }
.card--raised { box-shadow: var(--shadow-2); }
.divider { height: 1px; background: var(--border-default); border: 0; margin: 0; }
.stack > * + * { margin-top: var(--stack, var(--space-4)); }

/* ---------- Slimmie avatar + message ---------- */
.avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; background: var(--neutral-50); box-shadow: 0 0 0 1px var(--border-default); overflow: hidden; }
.avatar img { width: 100%; height: 100%; }
.avatar--sm { width: 32px; height: 32px; }
.avatar--lg { width: 56px; height: 56px; }
.who { display: flex; align-items: center; gap: 6px; font: 600 13.5px/1.2 var(--font-brand); }
.msg { display: flex; gap: var(--space-3); align-items: flex-start; }
.msg__body { min-width: 0; }
.msg__bubble { margin-top: 6px; background: var(--bg-surface); border-radius: 4px var(--radius-lg) var(--radius-lg) var(--radius-lg); box-shadow: var(--shadow-1); padding: var(--space-3) var(--space-4); font: var(--type-body-m); max-width: 560px; }
.msg__bubble p + p { margin-top: var(--space-2); }

/* ---------- akkoordkaart (signature component) ---------- */
.akkoord { background: var(--bg-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); padding: var(--space-5) var(--space-6) var(--space-6); max-width: 640px; }
.akkoord__top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.akkoord__meta { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.akkoord__title { font: var(--type-heading-s); letter-spacing: var(--type-heading-s-tracking); margin-top: var(--space-4); }
.akkoord__value { font: 600 26px/1.2 var(--font-brand); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.akkoord__value small { font: var(--type-body-s); color: var(--text-secondary); letter-spacing: 0; }
.akkoord__rows { margin-top: var(--space-4); }
.akkoord__row { display: grid; grid-template-columns: 140px 1fr; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--border-default); font: var(--type-ui); }
.akkoord__row > b { font-weight: 500; color: var(--text-secondary); }
.akkoord__row--letop > b { font-weight: 700; color: var(--text-primary); display: inline-flex; gap: 6px; align-items: flex-start; }
.akkoord__to { margin-top: 4px; font: var(--type-body-s); color: var(--text-secondary); overflow-wrap: anywhere; }
.akkoord__to b { font-weight: 600; color: var(--text-primary); }
.akkoord__quote { padding: var(--space-2) var(--space-3); border-left: 3px solid var(--border-strong); background: var(--bg-subtle); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font: var(--type-ui); color: var(--text-secondary); white-space: pre-line; }
.akkoord__quote b { color: var(--text-primary); font-weight: 600; }
.akkoord__preview { margin-top: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--bg-canvas); font: var(--type-body-m); white-space: pre-line; }
.akkoord__actions { margin-top: var(--space-5); }
.akkoord--gedaan { padding-bottom: var(--space-5); }
.akkoord--gedaan .akkoord__title { margin-top: var(--space-3); }
.akkoord__done { display: flex; gap: var(--space-3); align-items: flex-start; margin-top: var(--space-3); font: var(--type-ui); color: var(--text-secondary); }
@media (max-width: 560px) { .akkoord { padding: var(--space-4); } .akkoord__row { grid-template-columns: 1fr; gap: 2px; } }

/* bundle: similar work together, reviewed one by one (no blind "approve all") */
.bundle { background: var(--bg-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); overflow: hidden; }
.bundle__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); }
.bundle__title { display: flex; align-items: center; gap: var(--space-3); font: 600 15px/1.3 var(--font-brand); }
.bundle__item { display: grid; grid-template-columns: 20px 1fr auto; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-5); border-top: 1px solid var(--border-default); text-decoration: none; }
.bundle__item:hover { background: var(--bg-canvas); }
button.bundle__item { width: 100%; border: 0; background: transparent; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.bundle__item[aria-current="true"] { background: var(--bg-canvas); box-shadow: inset 3px 0 0 var(--text-primary); }
.bundle__item b { font-weight: 600; }
.bundle__item span { color: var(--text-secondary); font: var(--type-body-s); }

/* ---------- vaardigheid (skill) card ---------- */
.skill { background: var(--bg-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.skill__head { display: flex; gap: var(--space-3); align-items: flex-start; }
.skill__icon { width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--bg-subtle); display: grid; place-items: center; flex: none; }
.skill__icon .icon { width: 22px; height: 22px; }
.skill__name { font: var(--type-heading-s); letter-spacing: var(--type-heading-s-tracking); }
.skill__desc { color: var(--text-secondary); margin-top: 2px; }
.skill__facts { display: grid; grid-template-columns: auto 1fr; gap: 6px var(--space-4); font: var(--type-body-s); }
.skill__facts dt { color: var(--text-secondary); }
.skill__facts dd { margin: 0; font-weight: 600; }
.skill__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--border-default); }
.skill--off { box-shadow: inset 0 0 0 1px var(--border-default); background: transparent; }
.skill--off .skill__icon { background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--border-default); }

/* stand: always icon + name (document = alleen voorbereiden, half circle = na jouw akkoord, repeat = zelf, volgens afspraak) */
.stand { display: inline-flex; align-items: center; gap: 6px; font: 600 13px/1.2 var(--font-brand); }
.stand .icon { width: 16px; height: 16px; }

/* ---------- choice cards (radio) — used for vaardigheid and stand choices ---------- */
.choices { display: grid; gap: var(--space-3); }
.choices--3 { grid-template-columns: repeat(3, 1fr); }
.choices--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .choices--3, .choices--2 { grid-template-columns: 1fr; } }
.choice { position: relative; display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border-radius: var(--radius-lg); background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--border-default); cursor: pointer; transition: box-shadow var(--duration-fast) var(--ease-standard); }
.choice:hover { box-shadow: inset 0 0 0 1px var(--border-strong); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice:has(input:checked) { box-shadow: inset 0 0 0 2px var(--text-primary); }
.choice:has(input:focus-visible) { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.choice:has(input:disabled) { cursor: not-allowed; background: transparent; box-shadow: inset 0 0 0 1px var(--border-default); }
.choice:has(input:disabled) .choice__title, .choice:has(input:disabled) .choice__icon { color: var(--text-tertiary); }
.choice__icon { width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--bg-subtle); display: grid; place-items: center; flex: none; }
.choice__title { font: 600 15px/1.3 var(--font-brand); display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.choice__text { margin-top: 4px; color: var(--text-secondary); font: var(--type-body-s); }
.choice__radio { margin-left: auto; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--border-input); flex: none; display: grid; place-items: center; }
.choice:has(input:checked) .choice__radio { box-shadow: inset 0 0 0 6px var(--text-primary); }
.choice--stacked { flex-direction: column; }
.choice--stacked .choice__radio { position: absolute; top: var(--space-4); right: var(--space-4); }
.badge-soft { display: inline-flex; height: 20px; align-items: center; padding: 0 8px; border-radius: var(--radius-full); background: var(--bg-subtle); color: var(--text-secondary); font: 600 11px/1 var(--font-brand); }

/* ---------- koppeling (connection) with plain-language permissions ---------- */
.perm { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 640px) { .perm { grid-template-columns: 1fr; } }
.perm__col { padding: var(--space-4); border-radius: var(--radius-lg); background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--border-default); }
.perm__col h4 { font: var(--type-label); letter-spacing: var(--type-label-tracking); text-transform: uppercase; color: var(--text-secondary); margin-bottom: var(--space-2); }
.perm__col li { display: flex; gap: var(--space-2); align-items: flex-start; padding: 5px 0; font: var(--type-ui); }
.perm__col li .icon { width: 18px; height: 18px; margin-top: 1px; }
.perm__col--no li .icon { color: var(--text-tertiary); }
.conn { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--border-default); }
.conn__mark { width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--bg-subtle); display: grid; place-items: center; font: 700 15px/1 var(--font-brand); flex: none; }
.conn__name { font-weight: 600; }
.conn__state { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font: var(--type-body-s); color: var(--text-secondary); }

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font: 600 13px/1.3 var(--font-brand); }
.field__hint { font: var(--type-body-s); color: var(--text-secondary); }
.input { height: 44px; padding: 0 var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--border-input); background: var(--bg-surface); color: var(--text-primary); font: var(--type-body-m); }
.input:focus { outline: 2px solid var(--border-focus); outline-offset: 1px; }
textarea.input { height: auto; min-height: 96px; padding: var(--space-3); resize: vertical; }
.switch { position: relative; width: 40px; height: 24px; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; border-radius: var(--radius-full); background: var(--border-strong); transition: background var(--duration-fast) var(--ease-standard); pointer-events: none; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--neutral-0); box-shadow: var(--shadow-1); transition: transform var(--duration-base) var(--ease-standard); }
.switch input:checked + span { background: var(--text-primary); }
.switch input:checked + span::after { transform: translateX(16px); }
.switch input:focus-visible + span { outline: 2px solid var(--border-focus); outline-offset: 2px; }

/* "Vraag het Slimmie" — command field on every app screen */
.ask { display: flex; align-items: center; gap: var(--space-3); height: 48px; padding: 0 6px 0 6px; border-radius: var(--radius-full); background: var(--bg-surface); box-shadow: var(--shadow-1); }
.ask .avatar { width: 36px; height: 36px; }
.ask input { flex: 1; min-width: 0; border: 0; background: transparent; font: var(--type-body-m); color: var(--text-primary); }
.ask input:focus { outline: none; }
.ask:focus-within { box-shadow: 0 0 0 2px var(--border-focus); }

/* ---------- feedback ---------- */
.note { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--bg-subtle); font: var(--type-ui); }
.note .icon { margin-top: 1px; }
.note b { font-weight: 700; }
.note--error { background: var(--feedback-error-bg); color: var(--feedback-error-text); box-shadow: inset 0 0 0 1px var(--feedback-error-border); }
.note--success { background: var(--feedback-success-bg); color: var(--feedback-success-text); box-shadow: inset 0 0 0 1px var(--feedback-success-border); }
.note--rule { background: transparent; box-shadow: inset 0 0 0 1px var(--border-default); }
.toast { display: inline-flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--bg-inverse); color: var(--text-inverse); box-shadow: var(--shadow-3); font: var(--type-ui); }
.toast .btn--text { color: var(--text-inverse); text-decoration: underline; }
.toast-wrap { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 30; width: max-content; max-width: calc(100% - 32px); }
@media (max-width: 900px) { .toast-wrap { bottom: 84px; } }
/* a notification never covers the composer: on pages with the chat dock it sits just above it */
.has-dock .toast-wrap { bottom: 104px; }
@media (max-width: 900px) { .has-dock .toast-wrap { bottom: 84px; } .has-dock.chat-open .toast-wrap { bottom: 160px; } }
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); padding: var(--space-10) var(--space-6); }
.empty img { width: 140px; }
.empty p { color: var(--text-secondary); max-width: 360px; }

/* ---------- progress: onboarding steps (ink, never ochre) ---------- */
.steps { display: flex; flex-direction: column; gap: var(--space-2); }
.steps__bar { display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); gap: 4px; }
.steps__bar i { height: 4px; border-radius: 2px; background: var(--border-default); }
.steps__bar i.done { background: var(--text-primary); }
.steps__bar i.now { background: var(--text-primary); opacity: .45; }
.steps__label { font: var(--type-label); letter-spacing: var(--type-label-tracking); color: var(--text-secondary); }
.progress-list li { display: flex; gap: var(--space-3); align-items: center; padding: 6px 0; font: var(--type-body-m); }
.progress-list li[data-state="todo"] { color: var(--text-tertiary); }
.progress-list .status-icon { width: 20px; height: 20px; }

/* ---------- werkstroom: the four statuses as the backbone of Vandaag ---------- */
.flow { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--bg-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); overflow: hidden; }
.flow__cell { display: flex; flex-direction: column; gap: 6px; padding: var(--space-4) var(--space-5); text-decoration: none; }
.flow__cell + .flow__cell { border-left: 1px solid var(--border-default); }
a.flow__cell:hover { background: var(--bg-canvas); }
.flow__label { display: flex; align-items: center; gap: var(--space-2); font: 600 13px/1.3 var(--font-brand); color: var(--text-secondary); }
.flow__num { font: 600 32px/1 var(--font-brand); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.flow__note { font: var(--type-body-s); color: var(--text-secondary); }
.flow__cell--wacht { box-shadow: inset 0 3px 0 var(--status-wacht); }   /* the only ochre on the strip: wacht op jou */
.flow__cell--wacht .flow__label { color: var(--text-primary); }
@media (max-width: 760px) { .flow { grid-template-columns: 1fr 1fr; } .flow__cell:nth-child(3) { border-left: 0; } .flow__cell:nth-child(n+3) { border-top: 1px solid var(--border-default); } }

/* ---------- lists: wacht op jou, logboek ---------- */
.rows { background: var(--bg-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
.row { display: grid; grid-template-columns: 20px 1fr auto; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-5); text-decoration: none; }
.row + .row { border-top: 1px solid var(--border-default); }
.row:hover { background: var(--bg-canvas); }
.row__title { font-weight: 600; }
.row__meta { color: var(--text-secondary); font: var(--type-body-s); display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.row__side { color: var(--text-secondary); font: var(--type-body-s); text-align: right; white-space: nowrap; }

/* ---------- toolbar, segmented filter, search ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-bottom: var(--space-4); }
.toolbar .grow { flex: 1; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: var(--radius-full); background: var(--bg-subtle); }
.seg label { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 var(--space-3); border-radius: var(--radius-full); font: 600 13px/1 var(--font-brand); color: var(--text-secondary); cursor: pointer; white-space: nowrap; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label:has(input:checked) { background: var(--bg-surface); color: var(--text-primary); box-shadow: var(--shadow-1); }
.seg label:has(input:focus-visible) { outline: 2px solid var(--border-focus); outline-offset: 1px; }
.seg .count { height: 18px; min-width: 18px; font-size: 10.5px; }
.search { display: flex; align-items: center; gap: var(--space-2); height: 40px; padding: 0 var(--space-3); border-radius: var(--radius-full); background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--border-default); min-width: 220px; }
.search input { border: 0; background: transparent; font: var(--type-ui); color: var(--text-primary); width: 100%; }
.search input:focus { outline: none; }
.search:focus-within { box-shadow: inset 0 0 0 2px var(--border-focus); }
.select { height: 40px; padding: 0 36px 0 var(--space-3); border-radius: var(--radius-full); border: 0; box-shadow: inset 0 0 0 1px var(--border-default); background: var(--bg-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2369645A' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px; color: var(--text-primary); font: 600 13px/1 var(--font-brand); appearance: none; }

/* ---------- day groups, detail panel, timeline ---------- */
.daygroup { font: var(--type-label); letter-spacing: var(--type-label-tracking); text-transform: uppercase; color: var(--text-secondary); margin: var(--space-6) 0 var(--space-2); }
.daygroup:first-child { margin-top: 0; }
button.row { width: 100%; border: 0; background: transparent; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.row[aria-current="true"] { background: var(--bg-canvas); box-shadow: inset 3px 0 0 var(--text-primary); }
.split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.panel { position: sticky; top: var(--space-6); background: var(--bg-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); padding: var(--space-5) var(--space-6) var(--space-6); max-height: calc(100vh - 48px); overflow: auto; }
.panel__close { display: none; }
@media (max-width: 1080px) {
  .split { grid-template-columns: 1fr; }
  .panel { position: fixed; inset: 0; z-index: 40; border-radius: 0; max-height: none; padding: var(--space-4) var(--space-4) var(--space-12); }
  .panel[hidden] { display: none; }
  .panel__close { display: inline-flex; }
}
.timeline { position: relative; margin-top: var(--space-2); }
.timeline li { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: var(--space-3); padding: 0 0 var(--space-4); }
.timeline li::before { content: ""; position: absolute; left: 61px; top: 18px; bottom: -2px; width: 1px; background: var(--border-default); }
.timeline li:last-child::before { display: none; }
.timeline time { font: var(--type-body-s); color: var(--text-secondary); font-variant-numeric: tabular-nums; padding-top: 1px; }
.timeline .ev { position: relative; padding-left: var(--space-5); font: var(--type-ui); }
.timeline .ev::before { content: ""; position: absolute; left: -4px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--bg-surface); box-shadow: inset 0 0 0 2px var(--text-tertiary); }
.timeline .ev--akkoord::before { box-shadow: inset 0 0 0 2px var(--status-wacht-line); }
.timeline .ev--done::before { background: var(--text-primary); box-shadow: none; }
.timeline .ev span { display: block; color: var(--text-secondary); font: var(--type-body-s); }

/* ---------- key-value list, files, dropzone, questions ---------- */
.kv { display: grid; grid-template-columns: minmax(120px, 180px) 1fr auto; }   /* no column gap: the row lines run through */
.kv > * { padding: var(--space-3) var(--space-4) var(--space-3) 0; border-top: 1px solid var(--border-default); }
.kv > :nth-child(3n) { padding-right: 0; }
.kv > :nth-child(-n+3) { border-top: 0; }
.kv dt { color: var(--text-secondary); }
.kv dd { margin: 0; }
.kv .missing { color: var(--text-tertiary); font-style: normal; }
@media (max-width: 640px) { .kv { grid-template-columns: 1fr auto; } .kv dt { grid-column: 1 / -1; padding-bottom: 0; } .kv dt + dd, .kv dt + dd + * { border-top: 0; padding-top: 2px; } }
.file { display: grid; grid-template-columns: 40px 1fr auto; gap: var(--space-3); align-items: center; padding: var(--space-3) 0; border-top: 1px solid var(--border-default); }
.file:first-child { border-top: 0; }
.file__icon { width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--bg-subtle); display: grid; place-items: center; }
.file b { font-weight: 600; }
.file span { display: block; color: var(--text-secondary); font: var(--type-body-s); }
.dropzone { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-6); border-radius: var(--radius-lg); border: 1.5px dashed var(--border-strong); color: var(--text-secondary); text-align: center; font: var(--type-body-s); }
.dropzone b { color: var(--text-primary); }
.qa details { border-top: 1px solid var(--border-default); }
.qa details:first-child { border-top: 0; }
.qa summary { display: flex; justify-content: space-between; gap: var(--space-3); align-items: center; padding: var(--space-3) 0; font-weight: 600; cursor: pointer; list-style: none; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary .icon { transition: transform var(--duration-base) var(--ease-standard); color: var(--text-secondary); }
.qa details[open] summary .icon { transform: rotate(180deg); }
.qa details p { padding: 0 0 var(--space-4); color: var(--text-secondary); }

/* ---------- connection status, team members, settings layout ---------- */
.state { display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px/1 var(--font-brand); white-space: nowrap; }
.state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--feedback-success-text); }
.state--problem { color: var(--feedback-error-text); }
.state--problem::before { background: var(--feedback-error-text); }
.state--off::before { background: var(--border-strong); }
.member { display: grid; grid-template-columns: 40px 1fr auto; gap: var(--space-3); align-items: center; padding: var(--space-3) 0; border-top: 1px solid var(--border-default); }
.member:first-child { border-top: 0; }
.initials { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-subtle); font: 700 13px/1 var(--font-brand); }
.settings { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.subnav { position: sticky; top: var(--space-6); display: flex; flex-direction: column; gap: 2px; }
.subnav a { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); color: var(--text-secondary); text-decoration: none; font: 500 14px/1.3 var(--font-brand); }
.subnav a:hover { background: var(--bg-subtle); color: var(--text-primary); }
.subnav a[aria-current="page"] { background: var(--bg-surface); color: var(--text-primary); box-shadow: var(--shadow-1); font-weight: 600; }   /* one part at a time: the current part */
@media (max-width: 900px) { .settings { grid-template-columns: minmax(0, 1fr); } .subnav { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; } .subnav a { flex: none; white-space: nowrap; } }
.setting { display: flex; justify-content: space-between; gap: var(--space-4); align-items: flex-start; padding: var(--space-4) 0; border-top: 1px solid var(--border-default); }
.setting:first-of-type { border-top: 0; }
.setting p { color: var(--text-secondary); font: var(--type-body-s); margin-top: 2px; max-width: 520px; }

/* ---------- werkplek: Vandaag as a conversation with Slimmie ---------- */
.home { display: grid; grid-template-columns: minmax(0, 1fr) var(--layout-rail); gap: var(--layout-gutter); max-width: var(--layout-content); }
.home__col { width: 100%; display: flex; flex-direction: column; gap: var(--space-6); padding-bottom: 120px; }
.rail { display: flex; flex-direction: column; gap: var(--space-6); padding-top: var(--space-4); }
.rail h2 { display: flex; align-items: center; gap: var(--space-2); font: var(--type-label); letter-spacing: var(--type-label-tracking); text-transform: uppercase; color: var(--text-secondary); margin-bottom: var(--space-2); }
@media (max-width: 1280px) { .home { grid-template-columns: minmax(0, 1fr); } .home__col, .rail { max-width: var(--layout-reading); } }

/* briefing: Slimmie opens the day */
.brief { display: grid; grid-template-columns: 76px 1fr; gap: var(--space-4); align-items: start; padding-top: var(--space-4); }
.brief__face { width: 76px; height: 72px; position: relative; }
.brief__face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity var(--duration-slow) var(--ease-standard); }
.brief__hello { font: var(--type-heading-l); letter-spacing: var(--type-heading-l-tracking); }
.brief__text { font: var(--type-body-l); color: var(--text-primary); margin-top: var(--space-2); max-width: 600px; }
.brief__text b { font-weight: 600; }
.brief__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
@media (max-width: 640px) { .brief { grid-template-columns: 52px 1fr; gap: var(--space-3); } .brief__face { width: 52px; height: 50px; } .brief__hello { font: var(--type-heading-m); } .brief__text { font: var(--type-body-m); } }

/* review stack: one item at a time, the next one visible behind */
.review { position: relative; }
.review__bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.review__bar h2 { display: flex; align-items: center; gap: var(--space-2); font: 600 15px/1.3 var(--font-brand); }
.review__nav { display: inline-flex; align-items: center; gap: var(--space-1); font: var(--type-body-s); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.review__stage { position: relative; }
.review__stage[data-more="1"]::after, .review__stage[data-more="2"]::before { content: ""; position: absolute; left: 14px; right: 14px; bottom: -8px; height: 24px; border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: var(--bg-surface); box-shadow: var(--shadow-1); z-index: 0; }
.review__stage[data-more="2"]::before { left: 28px; right: 28px; bottom: -15px; opacity: .6; }
.review__stage .work-card { position: relative; z-index: 1; }
.work-card { background: var(--bg-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-2); padding: var(--space-5) var(--space-6) var(--space-5); }
.work-card__top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.work-card__who { margin-top: var(--space-4); display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.work-card__who b { font: var(--type-heading-s); letter-spacing: var(--type-heading-s-tracking); }
.work-card__who span { color: var(--text-secondary); font: var(--type-body-s); }
.work-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-5); }
.work-card__actions .why { margin-left: auto; }
/* with the chat dock, the decision stays visible just above the composer instead of sliding under it */
@media (min-width: 901px) { .has-dock .work-card__actions { position: sticky; bottom: 98px; z-index: 5; margin: var(--space-5) calc(-1 * var(--space-6)) calc(-1 * var(--space-5)); padding: var(--space-3) var(--space-6); background: var(--bg-surface); border-radius: 0 0 var(--radius-xl) var(--radius-xl); box-shadow: 0 -1px 0 var(--border-default); } }
.why--top { display: none; }
@media (max-width: 900px) { .why--top { display: inline-flex; margin-top: var(--space-3); padding-left: 0; } .work-card__actions .why { display: none; } }
.leave-left { animation: s-leave var(--duration-slow) var(--ease-exit) forwards; }
@keyframes s-leave { to { opacity: 0; transform: translateX(-40px) rotate(-2deg); } }
.enter-up { animation: s-enter var(--duration-slow) var(--ease-standard) both; }
@keyframes s-enter { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@media (max-width: 640px) { .work-card { padding: var(--space-4); border-radius: var(--radius-lg); } .work-card__actions .why { margin-left: 0; } }

/* conversation bubbles: their message, Slimmie's concept, your instruction */
.thread { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); }
.bubble { max-width: 88%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); font: var(--type-body-m); white-space: pre-line; }
.bubble__label { display: flex; align-items: center; gap: 6px; font: 600 12px/1.3 var(--font-brand); color: var(--text-secondary); margin-bottom: 6px; white-space: normal; }
.bubble--in { align-self: flex-start; background: var(--bg-subtle); border-top-left-radius: 4px; }
.bubble--draft { align-self: flex-end; background: var(--bg-surface); box-shadow: inset 0 0 0 1.5px var(--status-wacht-line); border-top-right-radius: 4px; }   /* waiting for your akkoord */
.bubble--draft.is-sent { box-shadow: inset 0 0 0 1px var(--border-default); }
.bubble--me { align-self: flex-end; background: var(--bg-inverse); color: var(--text-inverse); border-bottom-right-radius: 4px; }
.bubble--slimmie { align-self: flex-start; background: var(--bg-surface); box-shadow: var(--shadow-1); border-top-left-radius: 4px; white-space: normal; }
.bubble mark { background: none; color: inherit; box-shadow: inset 0 -0.45em 0 var(--accent-subtle); }
.typing::after { content: "▍"; animation: s-blink 1s steps(1) infinite; margin-left: 1px; color: var(--text-tertiary); }
@keyframes s-blink { 50% { opacity: 0; } }
.say { display: grid; grid-template-columns: 36px 1fr; gap: var(--space-3); align-items: start; }
.say--me { grid-template-columns: 1fr; justify-items: end; }
.say .avatar { width: 36px; height: 36px; }

/* undo strip: in the flow above the work, so it never covers the composer or the next card */
.strip { position: relative; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--bg-surface); box-shadow: var(--shadow-1); overflow: hidden; font: var(--type-ui); }
.strip > span { flex: 1; min-width: 0; }
.toast-wrap .strip { max-width: 640px; box-shadow: var(--shadow-2); }   /* a decision with undo floats at the bottom: always in view, the page does not jump */
.strip .btn--text { color: var(--text-primary); text-decoration: underline; flex: none; }
.strip__time { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--text-primary); transform-origin: left; animation: s-countdown linear forwards; }
@keyframes s-countdown { to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .strip__time { animation: none; display: none; } }

/* "pas aan" instructions */
.refine { margin-top: var(--space-4); padding: var(--space-3); border-radius: var(--radius-lg); background: var(--bg-canvas); }
.refine__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-full); background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--border-default); color: var(--text-primary); font: 600 13px/1 var(--font-brand); cursor: pointer; white-space: nowrap; }
.chip-btn:hover { box-shadow: inset 0 0 0 1px var(--border-strong); }
.chip-btn .icon { width: 16px; height: 16px; }

/* composer: give Slimmie an assignment, always in reach */
.composer-dock { position: fixed; left: var(--layout-side); right: 0; bottom: 0; z-index: 8; padding: var(--space-6) var(--layout-gutter) var(--space-5); background: linear-gradient(to top, var(--bg-canvas) 60%, transparent); pointer-events: none; }
.composer-dock > * { pointer-events: auto; }
.composer-dock__inner { max-width: var(--layout-content); display: grid; grid-template-columns: minmax(0, 1fr) var(--layout-rail); gap: var(--layout-gutter); }
.composer-dock__inner > div { width: 100%; }
@media (max-width: 1280px) { .composer-dock__inner { grid-template-columns: minmax(0, 1fr); } .composer-dock__inner > div { max-width: var(--layout-reading); } }
@media (max-width: 900px) { .composer-dock { left: 0; padding: var(--space-3) var(--space-4) calc(72px + var(--space-2) + env(safe-area-inset-bottom)); } }
.composer { display: flex; align-items: flex-end; gap: var(--space-2); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3); border-radius: var(--radius-xl); background: var(--bg-surface); box-shadow: var(--shadow-3); }
.composer:focus-within { box-shadow: var(--shadow-3), 0 0 0 2px var(--border-focus); }
.composer textarea { flex: 1; min-height: 44px; max-height: 160px; padding: 11px 4px; border: 0; resize: none; background: transparent; color: var(--text-primary); font: var(--type-body-m); }
.composer textarea:focus { outline: none; }
.composer .avatar { width: 36px; height: 36px; margin-bottom: 4px; }
.composer__send { width: 44px; height: 44px; border-radius: var(--radius-lg); border: 0; background: var(--action-primary-bg); color: var(--action-primary-text); display: grid; place-items: center; cursor: pointer; flex: none; }
.composer__send:disabled { background: var(--bg-subtle); color: var(--text-tertiary); cursor: default; }
.ask-fab { display: none; }
@media (max-width: 900px) {
  /* on the phone, reviewing comes first: the chat folds into a round button with Slimmie's face */
  .composer-dock { display: none; }
  body.chat-open .composer-dock { display: block; }
  .ask-fab { display: inline-flex; align-items: center; gap: 6px; position: fixed; top: 9px; right: 60px; z-index: 9; height: 40px; padding: 0 12px 0 3px; border: 0; border-radius: var(--radius-full); background: var(--bg-surface); box-shadow: var(--shadow-1); font: 600 13px/1 var(--font-brand); color: var(--text-primary); cursor: pointer; }
  .ask-fab img { width: 34px; height: 34px; border-radius: 50%; }
  body.chat-open .ask-fab { display: none; }
  .work-card__actions { position: sticky; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 5; margin: var(--space-4) calc(-1 * var(--space-4)) calc(-1 * var(--space-4)); padding: var(--space-3) var(--space-4); background: var(--bg-surface); box-shadow: 0 -1px 0 var(--border-default); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
  .work-card__actions .btn--lg { height: 44px; padding: 0 var(--space-4); font-size: 14px; }
}
.composer__hints { display: flex; gap: var(--space-2); overflow-x: auto; padding: 0 0 var(--space-2); scrollbar-width: none; }
.composer__hints::-webkit-scrollbar { display: none; }

/* ---------- numbers and charts (Advertenties): max three numbers, always with a sentence and your own comparison ---------- */
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
@media (max-width: 760px) { .metrics { grid-template-columns: 1fr; } }
.metric { background: var(--bg-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); padding: var(--space-5); }
.metric__label { font: 600 13px/1.3 var(--font-brand); color: var(--text-secondary); }
.metric__value { font: 600 34px/1.1 var(--font-brand); letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: var(--space-2); }
.metric__value--none { color: var(--text-tertiary); }
.metric__compare { display: flex; align-items: center; gap: 6px; margin-top: var(--space-2); font: var(--type-body-s); color: var(--text-secondary); }
.metric__compare .icon { width: 16px; height: 16px; }
.metric__say { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border-default); font: var(--type-body-s); }
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart text { font: 500 11px var(--font-brand); fill: var(--text-secondary); font-variant-numeric: tabular-nums; }
.chart .grid { stroke: var(--border-default); stroke-width: 1; }
.chart .bar { fill: var(--data-1); }
.chart .bar--now { fill: var(--data-1); }
.chart .bar--past { fill: var(--data-1); opacity: .35; }
.chart .line { fill: none; stroke: var(--data-2); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart .dot { fill: var(--bg-surface); stroke: var(--data-2); stroke-width: 2.5; }
.chart .on { fill: var(--data-3); }
.chart .off { fill: var(--bg-subtle); }
.chart .mark { stroke: var(--text-primary); stroke-width: 1.5; stroke-dasharray: 3 3; }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-4); font: var(--type-body-s); color: var(--text-secondary); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.table { width: 100%; border-collapse: collapse; font: var(--type-ui); }
.table th { text-align: left; font: var(--type-label); letter-spacing: var(--type-label-tracking); text-transform: uppercase; color: var(--text-secondary); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-strong); }
.table td { padding: var(--space-3); border-bottom: 1px solid var(--border-default); vertical-align: top; }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table tr:last-child td { border-bottom: 0; }
@media (max-width: 640px) { .table-wrap { overflow-x: auto; } .table:not(.table--fit) { min-width: 560px; } .table--fit th, .table--fit td { padding-left: var(--space-2); padding-right: var(--space-2); } .table--fit th:first-child, .table--fit td:first-child { padding-left: 0; } .table--fit th:last-child, .table--fit td:last-child { padding-right: 0; } }
.table--fit td.num { white-space: nowrap; }   /* few columns: fits a phone without scrolling */

/* ---------- app shell: sidebar + main ---------- */
.shell { display: grid; grid-template-columns: var(--layout-side) minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-6) var(--space-4); border-right: 1px solid var(--border-default); }
.side__logo { height: 26px; width: auto; margin: 2px var(--space-3) 0; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: var(--space-3); height: 40px; padding: 0 var(--space-3); border-radius: var(--radius-md); color: var(--text-secondary); text-decoration: none; font: 500 14px/1 var(--font-brand); }
.nav a:hover { background: var(--bg-subtle); color: var(--text-primary); }
.nav a[aria-current="page"] { background: var(--bg-surface); color: var(--text-primary); box-shadow: var(--shadow-1); font-weight: 600; }
.nav .count { margin-left: auto; }
.nav__group { font: var(--type-caption); letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); padding: var(--space-4) var(--space-3) var(--space-1); }
.side__mode { display: flex; margin: auto var(--space-1) var(--space-4); }
.side__mode a { flex: 1; justify-content: center; }
.side__mode .icon { width: 16px; height: 16px; }
.side__mode + .side__foot { margin-top: 0; }
.side__foot { margin-top: auto; display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-3); font: var(--type-body-s); color: var(--text-secondary); }
/* every page: content starts at the same left edge (sidebar + gutter) and is never wider than --layout-content */
.main { min-width: 0; padding: var(--space-6) var(--layout-gutter) var(--space-16); }
.main__top { display: flex; align-items: center; gap: var(--space-4); max-width: var(--layout-content); }
.main__top .ask { flex: 1; max-width: 640px; }
.page { max-width: var(--layout-content); }
.page__head { margin: var(--space-2) 0 var(--space-6); display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; }
.page__head h1 { font: var(--type-heading-l); letter-spacing: var(--type-heading-l-tracking); }
.page__head > div:first-child { min-width: 0; max-width: 760px; }
.page__actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.back + .page__head { margin-top: var(--space-3); }
.page__head + .chain-wrap { margin: calc(-1 * var(--space-2)) 0 var(--space-6); }
.page__head p { margin-top: var(--space-2); color: var(--text-secondary); font: var(--type-body-m); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.section-title { display: flex; align-items: center; gap: var(--space-2); font: 600 15px/1.3 var(--font-brand); margin: var(--space-8) 0 var(--space-3); }
.mobile-bar { display: none; }
.tabbar { display: none; }
@media (max-width: 1080px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { display: none; }
  .mobile-bar { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-default); background: var(--bg-canvas); position: sticky; top: 0; z-index: 5; }
  .mobile-bar img { height: 22px; width: auto; }
  .main { padding: var(--space-4) var(--layout-gutter-sm) calc(var(--space-16) + 72px); }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  /* bottom tab bar: the four places you need on the road */
  .tabbar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--bg-surface); box-shadow: 0 -1px 0 var(--border-default); }
  .tabbar a, .tabbar button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; background: none; color: var(--text-secondary); text-decoration: none; font: 600 11px/1 var(--font-brand); cursor: pointer; }
  .tabbar [aria-current="page"] { color: var(--text-primary); }
  .tabbar .count { position: absolute; top: 6px; left: calc(50% + 6px); min-width: 18px; height: 18px; font-size: 10.5px; }
  /* keep the decision in reach: actions of an open card stick above the tab bar */
  .akkoord__actions { position: sticky; bottom: calc(var(--sticky-bottom, 72px) + env(safe-area-inset-bottom)); z-index: 5; margin-left: calc(-1 * var(--space-4)); margin-right: calc(-1 * var(--space-4)); padding: var(--space-3) var(--space-4); background: var(--bg-surface); box-shadow: 0 -1px 0 var(--border-default); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
}

/* ---------- onboarding layout ---------- */
.onb { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.onb__aside { position: sticky; top: 0; height: 100vh; background: var(--bg-subtle); display: flex; flex-direction: column; justify-content: flex-start; gap: var(--space-10); padding: var(--space-8) var(--space-10); overflow: hidden; }
.onb__aside img.logo { height: 28px; width: auto; }
.onb__robot { position: absolute; left: 50%; bottom: -6%; width: min(92%, 640px); transform: translateX(-50%); }
.onb__robot img { width: 100%; transition: opacity var(--duration-slow) var(--ease-standard); }
.onb__robot img + img { position: absolute; inset: 0; }
.onb__main { display: flex; flex-direction: column; padding: var(--space-8) var(--space-12) var(--space-8); max-width: 720px; width: 100%; }
.onb__body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: var(--space-6); padding: var(--space-8) 0; }
.onb__actions { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.onb h1 { font: var(--type-display-m); letter-spacing: var(--type-display-m-tracking); }
.onb .lead { font: var(--type-body-l); color: var(--text-secondary); max-width: 520px; }
.flow3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.flow3 li { padding: var(--space-3); border-radius: var(--radius-md); background: var(--bg-surface); box-shadow: var(--shadow-1); font: var(--type-body-s); color: var(--text-secondary); }
.flow3 li b { display: flex; gap: 6px; align-items: center; color: var(--text-primary); font: 600 14px/1.3 var(--font-brand); margin-bottom: 4px; }
@media (max-width: 900px) {
  .onb { grid-template-columns: 1fr; }
  .onb__aside { position: relative; height: auto; min-height: 220px; padding: var(--space-4); gap: var(--space-4); }
  .onb__robot { width: 230px; left: auto; right: -12px; bottom: -42%; transform: none; }
  .onb__aside img.logo, .onb__aside picture { position: relative; z-index: 2; }
  .onb__actions { position: sticky; bottom: 0; z-index: 5; margin: 0 calc(-1 * var(--space-4)); padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom)); background: var(--bg-canvas); box-shadow: 0 -1px 0 var(--border-default); }
  .onb .akkoord__actions { --sticky-bottom: 72px; }
  .onb__main { padding: var(--space-6) var(--space-4); }
  .onb h1 { font: var(--type-heading-l); letter-spacing: var(--type-heading-l-tracking); }
  .flow3 { grid-template-columns: 1fr; }
}

/* ---------- motion ---------- */
.fade-in { animation: s-fade var(--duration-slow) var(--ease-standard) both; }
@keyframes s-fade { from { opacity: 0; transform: translateY(6px); } }
.spin-dash { animation: s-rot 2.4s linear infinite; transform-origin: 50% 50%; }
@keyframes s-rot { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fade-in, .spin-dash { animation: none; } .btn, .switch span::after { transition: none; } }

/* ---------- from request to invoice (Offertes → Werkvoorbereiding → Facturen) ---------- */
.back { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); text-decoration: none; font: 600 13px/1 var(--font-brand); }
.back .icon { transform: rotate(180deg); width: 16px; height: 16px; }
/* the chain: three vaardigheden that hand the same job to each other; the count is what waits for you there */
.chain { display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: var(--radius-full); background: var(--bg-surface); box-shadow: var(--shadow-1); width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.chain::-webkit-scrollbar { display: none; }
.chain a { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 10px; border-radius: var(--radius-full); color: var(--text-secondary); text-decoration: none; font: 600 13px/1 var(--font-brand); white-space: nowrap; }
.chain a:hover { color: var(--text-primary); }
.chain a[aria-current="page"] { background: var(--bg-subtle); color: var(--text-primary); }
.chain .icon { width: 16px; height: 16px; }
.chain .count { height: 18px; min-width: 18px; font-size: 10.5px; }
.chain__sep { width: 16px; height: 16px; color: var(--text-tertiary); flex: none; }
.chain-wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.chain-wrap .t-label { white-space: nowrap; }
.flow--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) { .flow--5 { grid-template-columns: 1fr 1fr; } .flow--5 .flow__cell { border-left: 0 !important; border-top: 1px solid var(--border-default); } .flow--5 .flow__cell:nth-child(even) { border-left: 1px solid var(--border-default) !important; } .flow--5 .flow__cell:nth-child(-n+2) { border-top: 0; } }
.work-split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; margin-top: var(--space-6); }
@media (max-width: 1080px) { .work-split { grid-template-columns: minmax(0, 1fr); } }
.stage-row { display: grid; grid-template-columns: 20px 1fr auto; gap: var(--space-3); align-items: center; padding: var(--space-3) 0; border-top: 1px solid var(--border-default); }
.stage-row:first-child { border-top: 0; }
.stage-row small { display: block; color: var(--text-secondary); font: var(--type-body-s); }
/* calculation and invoice tables */
.calc td small { display: block; color: var(--text-secondary); font: var(--type-caption); margin-top: 2px; }
.calc .group td { padding-top: var(--space-4); font: var(--type-label); letter-spacing: var(--type-label-tracking); text-transform: uppercase; color: var(--text-secondary); border-bottom: 0; }
.calc .sum td { border-bottom: 0; padding-top: var(--space-2); padding-bottom: var(--space-1); }
.calc .total td { font: 600 17px/1.3 var(--font-brand); border-top: 1.5px solid var(--text-primary); padding-top: var(--space-3); }
.calc .muted td { color: var(--text-secondary); }
.assume li { display: flex; gap: 8px; padding: 4px 0; }
.assume .icon { margin-top: 2px; }
.changed { animation: s-flash 1.2s var(--ease-standard); }
@keyframes s-flash { from { background: var(--bg-subtle); } }

/* checkbox: ink, never ochre */
.check { display: flex; gap: var(--space-3); align-items: flex-start; cursor: pointer; }
.check input { appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 0; border-radius: 6px; border: 1.5px solid var(--border-strong); background: var(--bg-surface); display: grid; place-items: center; cursor: pointer; transition: background var(--duration-fast) var(--ease-standard); }
.check input:checked { background: var(--text-primary); border-color: var(--text-primary); }
.check input:checked::after { content: ""; width: 10px; height: 5px; border: 2px solid var(--text-inverse); border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
.check input:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.check input:disabled { opacity: .4; cursor: not-allowed; }
.check:has(input:disabled) { cursor: not-allowed; }
/* a list to tick off on the job: big rows for a thumb */
.checklist { background: var(--bg-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
.checklist .check { align-items: center; min-height: 56px; padding: var(--space-3) var(--space-4); }
.checklist .check + .check { border-top: 1px solid var(--border-default); }
.checklist .check > span { flex: 1; }
.checklist .check small { display: block; color: var(--text-secondary); font: var(--type-body-s); }
.checklist .check:has(input:checked) > span { color: var(--text-secondary); }

/* a part of a work card that you can approve on its own */
.part { margin-top: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); box-shadow: inset 0 0 0 1px var(--border-default); transition: background var(--duration-fast) var(--ease-standard); }
.part__head { display: flex; align-items: flex-start; gap: var(--space-3); }
.part__head .check { flex: 1; min-width: 0; }
.part__title { display: block; font: 600 15px/1.35 var(--font-brand); }
.part__sub { display: block; margin-top: 2px; font: var(--type-body-s); color: var(--text-secondary); }
.part__side { margin-left: auto; text-align: right; font: 600 15px/1.35 var(--font-brand); font-variant-numeric: tabular-nums; white-space: nowrap; }
.part__side small { display: block; font: var(--type-caption); color: var(--text-secondary); }
.part__body { margin-top: var(--space-3); padding-left: 34px; }
.part.is-off { background: var(--bg-canvas); }
.part.is-off .part__body { opacity: .5; }
@media (max-width: 600px) { .part { padding: var(--space-3); } .part__body { padding-left: 0; } }

/* a working week for a few people: which morning is free */
.week { display: grid; grid-template-columns: 64px repeat(5, minmax(0, 1fr)); gap: 4px; align-items: center; }
.week > b { font: 600 12px/1.2 var(--font-brand); color: var(--text-secondary); text-align: center; }
.week > span { font: 600 13px/1.2 var(--font-brand); }
.week i { height: 28px; border-radius: 6px; background: var(--bg-subtle); display: grid; place-items: center; font: normal 600 11px/1 var(--font-brand); color: var(--text-secondary); }
.week i.free { background: transparent; box-shadow: inset 0 0 0 1px var(--border-default); }
.week i.none { background: transparent; }
.week i.pick { background: var(--text-primary); color: var(--text-inverse); }
.week i .icon { width: 16px; height: 16px; color: var(--text-primary); }

/* photos taken on site */
.photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.photo { aspect-ratio: 1; border-radius: var(--radius-md); border: 1.5px dashed var(--border-strong); display: grid; place-items: center; background: transparent; color: var(--text-secondary); font: 600 12px/1.2 var(--font-brand); cursor: pointer; text-align: center; padding: 4px; }
.photo.has { border: 0; background: var(--bg-subtle); color: var(--text-primary); }

/* signing on the phone */
.sign { position: relative; height: 168px; border-radius: var(--radius-lg); background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--border-input); touch-action: none; }
.sign canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }
.sign__line { position: absolute; left: 20px; right: 20px; bottom: 40px; border-top: 1px dashed var(--border-strong); pointer-events: none; }
.sign__hint { position: absolute; left: 20px; bottom: 14px; font: var(--type-caption); color: var(--text-tertiary); pointer-events: none; }

/* ---------- op pad: the monteur's version of the app (same app, own role; one column, made for a phone) ---------- */
.fbar { position: sticky; top: 0; z-index: 9; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 56px; padding: var(--space-2) var(--space-4); background: var(--bg-canvas); border-bottom: 1px solid var(--border-default); }
.fbar img { height: 22px; width: auto; }
.fbar__who { display: flex; align-items: center; gap: var(--space-2); font: var(--type-body-s); color: var(--text-secondary); }
.fbar .initials { width: 32px; height: 32px; font-size: 12px; }
.fbar .seg { padding: 3px; }
.fbar .seg label, .fbar .seg a { height: 30px; padding: 0 var(--space-3); }
.seg a { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 var(--space-3); border-radius: var(--radius-full); font: 600 13px/1 var(--font-brand); color: var(--text-secondary); text-decoration: none; white-space: nowrap; }
.seg a[aria-current="page"] { background: var(--bg-surface); color: var(--text-primary); box-shadow: var(--shadow-1); }
.fpage { max-width: 520px; margin: 0 auto; padding: var(--space-4) var(--space-4) calc(104px + env(safe-area-inset-bottom)); }
.ftabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: var(--bg-surface); box-shadow: 0 -1px 0 var(--border-default); padding-bottom: env(safe-area-inset-bottom); }
.ftabs__inner { max-width: 520px; height: 64px; margin: 0 auto; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.ftabs a, .ftabs button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; background: none; color: var(--text-secondary); text-decoration: none; font: 600 11px/1 var(--font-brand); cursor: pointer; }
.ftabs [aria-current="page"] { color: var(--text-primary); }
.ftabs .icon { width: 22px; height: 22px; }

/* a job on the road */
.klus { display: block; background: var(--bg-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); padding: var(--space-4) var(--space-5); color: inherit; text-decoration: none; }
.klus--now { border-radius: var(--radius-xl); box-shadow: var(--shadow-2); padding: var(--space-5); }
.klus--done { background: transparent; box-shadow: inset 0 0 0 1px var(--border-default); }
.klus + .klus { margin-top: var(--space-2); }
.klus__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--space-3); font: var(--type-body-s); color: var(--text-secondary); }
.klus__title { display: block; margin-top: var(--space-2); font: var(--type-heading-s); letter-spacing: var(--type-heading-s-tracking); }
.klus--now .klus__title { margin-top: var(--space-3); font: var(--type-heading-l); letter-spacing: var(--type-heading-l-tracking); }
.klus__what { font: var(--type-body-m); }
.klus__addr { display: flex; gap: var(--space-2); align-items: flex-start; margin-top: var(--space-2); font: var(--type-body-m); }
.klus__addr .icon { margin-top: 2px; color: var(--text-secondary); }
.klus__brief { display: grid; grid-template-columns: 28px 1fr; gap: var(--space-2); margin-top: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); background: var(--bg-canvas); font: var(--type-body-s); }
.klus__brief .avatar { width: 28px; height: 28px; }
.klus__actions { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-2); margin-top: var(--space-4); }
.klus__actions .btn { padding: 0 var(--space-2); }
.day-label { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-2); font: 600 15px/1.3 var(--font-brand); }
.day-label small { font: var(--type-body-s); color: var(--text-secondary); }

/* bottom sheet: a short task on top of the page, e.g. "Melden" */
.sheet-backdrop { position: fixed; inset: 0; z-index: 40; background: var(--bg-scrim); animation: s-fade var(--duration-base) var(--ease-standard); }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; max-width: 520px; max-height: 88vh; margin: 0 auto; overflow: auto; background: var(--bg-surface); border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-3); padding: var(--space-3) var(--space-5) calc(var(--space-6) + env(safe-area-inset-bottom)); animation: s-sheet var(--duration-slow) var(--ease-standard); }
.sheet__grip { width: 36px; height: 4px; border-radius: 2px; background: var(--border-strong); margin: 0 auto var(--space-4); }
.sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.sheet__head p { margin-top: 2px; font: var(--type-body-s); color: var(--text-secondary); }
.sheet__head { position: sticky; top: calc(-1 * var(--space-3)); z-index: 1; margin-top: calc(-1 * var(--space-3)); padding-top: var(--space-3); background: var(--bg-surface); }
.sheet__foot { position: sticky; bottom: calc(-1 * (var(--space-6) + env(safe-area-inset-bottom))); z-index: 1; margin-bottom: calc(-1 * (var(--space-6) + env(safe-area-inset-bottom))); padding: var(--space-2) 0 calc(var(--space-6) + env(safe-area-inset-bottom)); background: var(--bg-surface); }   /* input stays in reach while the answers scroll */
@keyframes s-sheet { from { transform: translateY(32px); opacity: 0; } }
@keyframes s-fade { from { opacity: 0; } }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.tile { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); min-height: 104px; padding: var(--space-4); border: 0; border-radius: var(--radius-lg); background: var(--bg-canvas); box-shadow: inset 0 0 0 1px var(--border-default); color: var(--text-primary); font: 600 15px/1.3 var(--font-brand); text-align: left; cursor: pointer; }
.tile:hover { box-shadow: inset 0 0 0 1px var(--border-strong); }
.tile .icon { width: 24px; height: 24px; }
.tile small { display: block; margin-top: 2px; font: var(--type-body-s); color: var(--text-secondary); }
.tile:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; align-items: center; min-height: 0; }   /* an odd last option spans the row */
@media (prefers-reduced-motion: reduce) { .sheet, .sheet-backdrop { animation: none; } }

/* voice notes: always say where the recording is (bezig = opnemen · voorbereid = bewaard op je telefoon · gedaan = verstuurd) */
.rec-status { display: flex; gap: var(--space-2); align-items: flex-start; margin-top: var(--space-3); font: var(--type-body-s); color: var(--text-secondary); }
.rec-status .status-icon { width: 16px; height: 16px; margin-top: 2px; flex: none; }
.rec-status b { color: var(--text-primary); font-weight: 600; }
.rec-status .btn--text { height: auto; padding: 0; color: var(--text-primary); text-decoration: underline; }
.fbar__right { display: flex; align-items: center; gap: var(--space-2); }

/* pills: pick one from many (e.g. your trade); selected is ink, never ochre */
.pills { display: flex; flex-wrap: wrap; gap: var(--space-2); border: 0; padding: 0; margin: 0; min-width: 0; }   /* fieldset: min-width 0, or a scrolling row widens the page */
.pills label { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--space-3); border-radius: var(--radius-full); background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--border-default); font: 600 13px/1.2 var(--font-brand); cursor: pointer; }
.pills label:hover { box-shadow: inset 0 0 0 1px var(--border-strong); }
.pills input { position: absolute; opacity: 0; pointer-events: none; }
.pills .icon { width: 16px; height: 16px; margin-left: -2px; }   /* optional icon before the label, e.g. per trade */
.pills label:has(input:checked) { background: var(--text-primary); color: var(--text-inverse); box-shadow: none; }
.pills label:has(input:focus-visible) { outline: 2px solid var(--border-focus); outline-offset: 2px; }


/* klussenbord: every job as a card, in the stage it is in. Slimmie moves the cards (offerte getekend, werkbon
   afgetekend, factuur betaald); you rarely have to. Ochre only on cards that wait for you. */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(236px, 1fr); gap: var(--space-3); align-items: start; overflow-x: auto; padding-bottom: var(--space-3); }
.bcol { border-radius: var(--radius-lg); background: var(--bg-subtle); padding: var(--space-3); min-height: 160px; }
.bcol__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); padding: 2px var(--space-1) var(--space-1); font: 600 14px/1.3 var(--font-brand); }
.bcol__head small { font: var(--type-body-s); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.bcol__sum { padding: 0 var(--space-1) var(--space-3); font: var(--type-caption); color: var(--text-secondary); }
.bcol__empty { padding: var(--space-3) var(--space-1); font: var(--type-body-s); color: var(--text-tertiary); }
.bcard { display: block; width: 100%; padding: var(--space-3); border: 0; border-radius: var(--radius-md); background: var(--bg-surface); box-shadow: var(--shadow-1); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: box-shadow var(--duration-fast) var(--ease-standard); }
.bcard + .bcard { margin-top: var(--space-2); }
.bcard:hover { box-shadow: var(--shadow-2); }
.bcard--wacht { box-shadow: var(--shadow-1), inset 3px 0 0 var(--status-wacht); }   /* waits for you */
.bcard--wacht:hover { box-shadow: var(--shadow-2), inset 3px 0 0 var(--status-wacht); }
.bcard--moved { animation: s-flash 1.6s var(--ease-standard); }
.bcard__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.bcard__name { font: 600 14px/1.3 var(--font-brand); }
.bcard__amount { font: 600 12.5px/1.3 var(--font-brand); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text-secondary); }
.bcard__what { margin-top: 2px; font: var(--type-body-s); color: var(--text-secondary); }
.bcard__state { display: flex; gap: 6px; align-items: flex-start; margin-top: var(--space-2); font: var(--type-body-s); }
.bcard__state .icon { width: 16px; height: 16px; margin-top: 2px; flex: none; }
.board-tabs { display: none; }
@media (max-width: 900px) {
  /* on the phone a board with columns does not work: one stage at a time, as a list */
  .board-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .board-tabs label { flex: none; }
  .board { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); overflow: visible; }
  .bcol { min-height: 0; padding: 0; background: transparent; }
  .bcol:not(.is-active) { display: none; }
  .bcol__head { display: none; }
}

/* drawer: details of one item next to the page */
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 41; width: min(440px, 100%); overflow: auto; background: var(--bg-surface); box-shadow: var(--shadow-3); padding: var(--space-5) var(--space-6) var(--space-10); animation: s-drawer var(--duration-slow) var(--ease-standard); }
.drawer__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
@keyframes s-drawer { from { transform: translateX(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .drawer { animation: none; } }

/* your own signature under mail, offertes and facturen: the customer sees the company, not Slimmie */
.sig { display: flex; gap: var(--space-3); align-items: center; margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border-default); white-space: normal; }
.sig__logo { width: 40px; height: 40px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: var(--radius-sm); background: var(--bg-inverse); color: var(--text-inverse); font: 700 13px/1 var(--font-brand); letter-spacing: .02em; }
.sig__logo img { width: 100%; height: 100%; object-fit: contain; background: var(--bg-surface); }
.sig__text b { display: block; font: 600 14px/1.35 var(--font-brand); color: var(--text-primary); }
.sig__text small { display: block; font: var(--type-body-s); color: var(--text-secondary); }
.sig--doc .sig__logo { width: 48px; height: 48px; }
.sig--plain { display: block; border-top: 0; padding-top: 0; margin-top: 0; font: inherit; }

/* meter: how much of something is used (e.g. credits). Ink, never ochre or red: being nearly out is not an error */
.meter { height: 10px; border-radius: 5px; background: var(--bg-subtle); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 5px; background: var(--text-primary); transition: width var(--duration-slow) var(--ease-standard); }
.meter__legend { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-2); font: var(--type-body-s); color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* a notification as it appears on the phone (preview under Meldingen) */
.push { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: var(--space-3); align-items: start; max-width: 400px; padding: var(--space-3) var(--space-4); border-radius: 18px; background: var(--bg-surface); box-shadow: var(--shadow-2); color: inherit; text-decoration: none; }
.push img { width: 38px; height: 38px; border-radius: 9px; }
.push__app { display: block; font: var(--type-caption); letter-spacing: .02em; text-transform: uppercase; color: var(--text-secondary); }
.push b { display: block; margin-top: 2px; font: 600 14px/1.3 var(--font-brand); }
.push span { display: block; font: var(--type-body-s); }
.push small { font: var(--type-caption); color: var(--text-secondary); white-space: nowrap; }
.push + .push { margin-top: var(--space-2); }

/* app logo of a connected service: the brand's own mark on a neutral tile (third-party logos are their owners' trademarks) */
.applogo { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--border-default); }
.applogo i { display: block; width: 22px; height: 22px; background: var(--brand, var(--text-primary)); -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; }
.applogo b { font: 700 13px/1 var(--font-brand); letter-spacing: -.01em; color: var(--text-primary); }
.applogo .icon { width: 22px; height: 22px; }
.applogo img { display: block; width: 24px; height: 24px; object-fit: contain; }
.applogo--fill { overflow: hidden; }
.applogo.applogo--fill img { width: 100%; height: 100%; object-fit: cover; }
.applogo--lg { width: 56px; height: 56px; border-radius: 14px; }
.applogo--lg i, .applogo--lg .icon { width: 30px; height: 30px; }
.applogo--lg img { width: 32px; height: 32px; }
.applogo--sm { width: 22px; height: 22px; border-radius: 6px; }
.applogo--sm i, .applogo--sm img, .applogo--sm .icon { width: 14px; height: 14px; }
.applogo-row { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-2); }
.state--pause::before { background: var(--border-strong); }

/* ---------- Vandaag, calm: one question per screen. What you approve comes first; the rest is one tap away ---------- */
.brief--compact { grid-template-columns: 48px minmax(0, 1fr); gap: var(--space-4); align-items: center; padding-top: 0; margin-top: var(--space-2); }   /* the title sits where every page title sits */
.brief--compact .brief__face { width: 48px; height: 46px; }
.brief--compact .brief__hello { font: var(--type-heading-l); letter-spacing: var(--type-heading-l-tracking); }
.brief--compact .brief__text { font: var(--type-body-m); color: var(--text-secondary); margin-top: 2px; max-width: none; }
.brief--compact .brief__text b { color: var(--text-primary); }
.work-card--focus { padding: var(--space-5) var(--space-6); }
.focus-head { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: var(--space-3); align-items: start; }
.focus-head__icon { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-subtle); }
.focus-head__icon .icon { width: 18px; height: 18px; }
.focus-head__title { display: block; font: var(--type-heading-s); letter-spacing: var(--type-heading-s-tracking); }
.focus-head__sub { display: block; font: var(--type-body-s); color: var(--text-secondary); margin-top: 2px; }
.focus-head__time { font: var(--type-caption); color: var(--text-tertiary); padding-top: 4px; }
.work-card--focus .thread { margin-top: var(--space-4); }
.work-card--focus .bubble--draft { max-width: 100%; align-self: stretch; }
.orig { padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--bg-subtle); font: var(--type-body-s); color: var(--text-secondary); }
.orig__text { white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.orig__text.is-open { display: block; -webkit-line-clamp: unset; overflow: visible; }
.orig__more { border: 0; background: none; padding: 0; margin-top: var(--space-1); font: 600 13px/1.3 var(--font-brand); color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sig-fold { display: inline-flex; align-items: center; gap: 4px; margin-top: var(--space-3); border: 0; background: none; padding: 0; font: var(--type-body-s); color: var(--text-secondary); cursor: pointer; }
.sig-fold .icon { transition: transform var(--duration-fast) var(--ease-standard); }
.sig-fold[aria-expanded="true"] .icon { transform: rotate(180deg); }
.work-card__more { display: none; }
.tip { align-items: center; }
.tip__face img { display: block; width: 36px; height: 36px; border-radius: 50%; }
.tip > .btn { margin-left: auto; flex: none; }
@media (max-width: 900px) {
  .work-card--focus .wide-only { display: none; }
  .work-card--focus .work-card__more { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-3); }
  .work-card--focus .work-card__more .btn { padding-left: 0; padding-right: 0; }
}
@media (max-width: 640px) {
  .brief--compact { grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-3); align-items: start; }
  .brief--compact .brief__face { width: 40px; height: 38px; }
  .brief--compact .brief__hello { font: var(--type-heading-m); letter-spacing: var(--type-heading-m-tracking); }
  .brief--compact .brief__text { font: var(--type-body-s); }
  .work-card--focus { padding: var(--space-4); }
  .focus-head { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .focus-head__icon { width: 32px; height: 32px; }
  .work-card--focus .work-card__actions { flex-wrap: nowrap; }
  .work-card--focus .work-card__actions .btn--akkoord { flex: 1; }
  .tip { align-items: flex-start; flex-wrap: wrap; }
  .tip__face { display: none; }
}
/* empty slots (strip, credits, convo) take no space in the column */
.home__col > :empty { display: none; }
/* the decision, explained where you make it: shown until you have given akkoord a few times */
.decide-hint { margin-top: var(--space-4); font: var(--type-body-s); color: var(--text-secondary); }
.decide-hint b { color: var(--text-primary); }
/* short screens (a 13-inch laptop): less air around the composer, so the card fits */
@media (min-width: 901px) and (max-height: 860px) {
  .composer-dock { padding-top: var(--space-3); padding-bottom: var(--space-3); }
  .has-dock .work-card--focus .work-card__actions { bottom: 76px; }
}
.draft-text p + p { margin-top: var(--space-2); }
.focus-head__nav { display: inline-flex; align-items: center; gap: 2px; margin: -4px -6px 0 0; font: var(--type-body-s); color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.review > .review__stage { margin-top: 0; }
.focus-head__kind { display: none; }
@media (max-width: 640px) {
  /* phone: the title gets the full width; kind, time and pager share one small row above it */
  .focus-head { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-2); }
  .focus-head__icon, .focus-head__time { display: none; }
  .focus-head__kind { display: inline-flex; align-items: center; gap: 6px; grid-row: 1; grid-column: 1; font: var(--type-caption); color: var(--text-secondary); }
  .focus-head__nav { grid-row: 1; grid-column: 2; }
  .focus-head__text { grid-row: 2; grid-column: 1 / -1; }
}
/* the sticky akkoord bar sits right on top of the composer, so nothing peeks through between them */
@media (min-width: 901px) and (min-height: 861px) { .has-dock .work-card--focus .work-card__actions { bottom: 84px; } }

/* ---------- catalogue tile: something you can add (Koppelingen, Vaardigheden). Same tile everywhere, so people learn it once ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--space-3); }
.cat-tile { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--bg-surface); box-shadow: var(--shadow-1); }
.cat-tile__top { display: flex; align-items: center; gap: var(--space-3); }
.cat-tile__top b { font: 600 15px/1.3 var(--font-brand); }
.cat-tile p { font: var(--type-body-s); color: var(--text-secondary); flex: 1; }
.cat-tile p a { color: var(--text-primary); white-space: nowrap; }
.cat-tile__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.cat-need { font: var(--type-caption); color: var(--text-secondary); }
.cat-done { display: inline-flex; align-items: center; gap: 6px; font: 600 13px/1 var(--font-brand); color: var(--feedback-success-text); }
.cat-done .icon { width: 16px; height: 16px; }
/* phone: every page title the same size */
@media (max-width: 640px) { .page__head h1 { font: var(--type-heading-m); letter-spacing: var(--type-heading-m-tracking); } .page__head { margin-bottom: var(--space-5); } }

/* ---------- Vraag Slimmie: one dialog in the middle, the same on every page (app/ask.js) ---------- */
.ask-open, .ask-open body { overflow: hidden; }
.ask-dialog { position: fixed; inset: 0; z-index: 50; display: flex; justify-content: center; align-items: flex-start; padding: 12vh var(--space-4) var(--space-4); }
.ask-dialog[hidden] { display: none; }
.ask-dialog__scrim { position: absolute; inset: 0; background: var(--bg-scrim); animation: s-fade var(--duration-base) var(--ease-standard); }
.ask-dialog__panel { position: relative; width: min(640px, 100%); max-height: 76vh; display: flex; flex-direction: column; background: var(--bg-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-3); animation: s-rise var(--duration-base) var(--ease-standard); }
.ask-dialog__head { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-4) var(--space-4) 0 var(--space-5); }
.ask-dialog__head h2 { font: var(--type-heading-s); letter-spacing: var(--type-heading-s-tracking); }
.ask-dialog__head p { font: var(--type-body-s); color: var(--text-secondary); }
.ask-dialog__head .btn { margin-left: auto; }
.ask-dialog__form { display: flex; align-items: flex-end; gap: var(--space-2); margin: var(--space-4) var(--space-5) 0; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); border-radius: var(--radius-lg); box-shadow: inset 0 0 0 1.5px var(--border-input); }
.ask-dialog__form:focus-within { box-shadow: inset 0 0 0 2px var(--border-focus); }
.ask-dialog__form textarea { flex: 1; min-width: 0; border: 0; background: transparent; resize: none; padding: 8px 0; font: var(--type-body-l); color: var(--text-primary); }
.ask-dialog__form textarea:focus { outline: none; }
.ask-dialog__body { overflow: auto; padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-5); min-height: 96px; }
.ask-examples__list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.ask-turn { display: flex; flex-direction: column; gap: var(--space-2); }
.ask-turn__q { align-self: flex-end; max-width: 85%; padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg) var(--radius-lg) 4px var(--radius-lg); background: var(--bg-inverse); color: var(--text-inverse); font: var(--type-body-m); }
.ask-turn .msg__bubble .btn-row { margin-top: var(--space-3); }
.ask-dialog__foot { display: flex; gap: var(--space-4); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--border-default); font: var(--type-caption); color: var(--text-tertiary); }
.ask-dialog__foot kbd, .ask kbd { font: 600 11px/1 var(--font-brand); padding: 3px 6px; border-radius: var(--radius-xs); background: var(--bg-subtle); color: var(--text-secondary); }
/* the trigger looks like a field, but opens the dialog */
.ask--trigger { border: 0; cursor: text; font: var(--type-body-m); color: var(--text-tertiary); text-align: left; }
.ask--trigger span:not(.avatar) { flex: 1; }
.ask--trigger kbd { margin-right: var(--space-2); }
.ask--trigger:hover { box-shadow: var(--shadow-1), inset 0 0 0 1px var(--border-strong); }
@media (max-width: 640px) {
  /* phone: the dialog is the whole screen */
  .ask-dialog { padding: 0; }
  .ask-dialog__panel { width: 100%; max-height: none; height: 100%; border-radius: 0; }
  .ask-dialog__foot { display: none; }
  .ask--trigger kbd { display: none; }
}
@keyframes s-rise { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .ask-dialog__panel, .ask-dialog__scrim { animation: none; } }
/* "Vraag Slimmie" on every page: in the header on a computer, in the top bar on the phone */
.page__actions .ask--trigger { width: 280px; }
.mobile-bar__right { display: flex; align-items: center; gap: var(--space-2); }
.mobile-bar__ask { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px 0 3px; border: 0; border-radius: var(--radius-full); background: var(--bg-surface); box-shadow: var(--shadow-1); font: 600 13px/1 var(--font-brand); color: var(--text-primary); cursor: pointer; }
.mobile-bar .mobile-bar__ask img { width: 34px; height: 34px; border-radius: 50%; }
@media (max-width: 900px) { .page__actions .ask--trigger { display: none; } .page__actions:empty { display: none; } }
/* the header's actions always sit on the right; on a computer the sentence makes room instead of the actions wrapping */
.page__actions { margin-left: auto; }
@media (min-width: 1101px) { .page__head { flex-wrap: nowrap; } .page__head > div:first-child { flex: 1 1 auto; } .page__actions { flex: none; } }
/* the header is never wider than the content (also on the board), and its actions line up with the title */
.page__head { max-width: var(--layout-content); }
@media (min-width: 1101px) { .page__head { align-items: flex-start; } .page__actions { margin-top: -4px; } }

/* ---------- Wacht op jou: one list and one akkoord card, the same on Vandaag, Offertes, Werkvoorbereiding and Facturen ----------
   A row opens in place, so the decision sits right under what you read. Anatomy of an open item:
   head (kind icon, title, one line, time) · what came in (optional) · what you approve (.ak-doc or a draft, ochre edge = waits for you)
   · Let op · actions (Akkoord · Pas aan · Niet … · Waarom zo?) · Waarom zo? (what I did, what I used, what happens after akkoord) */
.wl { background: var(--bg-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-1); }
.wl__item + .wl__item { border-top: 1px solid var(--border-default); }
.wl__head { box-sizing: border-box; width: 100%; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto 18px; gap: var(--space-3); align-items: center; padding: var(--space-4) var(--space-5); border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: var(--radius-xl); }
.wl__head--static { cursor: default; grid-template-columns: 32px minmax(0, 1fr) auto; }
button.wl__head:hover .wl__title b { text-decoration: underline; text-underline-offset: 3px; }
.wl__head:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; }
.wl__kind { width: 32px; height: 32px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--bg-subtle); color: var(--text-primary); }
.wl__kind .icon { width: 17px; height: 17px; }
.wl__title b { display: block; font: 600 15px/1.3 var(--font-brand); }
.wl__title small { display: block; margin-top: 2px; font: var(--type-body-s); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl__time { font: var(--type-caption); color: var(--text-tertiary); white-space: nowrap; }
.wl__chev { width: 18px; height: 18px; color: var(--text-tertiary); transition: transform var(--duration-fast) var(--ease-standard); }
.is-open .wl__chev { transform: rotate(180deg); }
.is-open .wl__head { padding-bottom: var(--space-2); }
.wl__body { padding: 0 var(--space-5) var(--space-5) calc(var(--space-5) + 32px + var(--space-3)); }
.wl .thread { margin-top: var(--space-2); }
.wl .bubble--draft { max-width: 100%; align-self: stretch; }
.wl__pending { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-4) var(--space-5); font: var(--type-body-s); position: relative; overflow: hidden; border-radius: var(--radius-xl); }
.wl__pending > .status-icon { justify-self: center; }
.wl__pending .strip__time { position: absolute; left: 0; bottom: 0; }
.wl-done { text-align: center; padding: var(--space-8) var(--space-6); }
.wl-done img { width: 112px; margin: 0 auto var(--space-3); }
/* what you approve: a document (offerte, factuur, klus); a mail uses .bubble--draft with the same edge */
.ak-doc { margin-top: var(--space-2); padding: var(--space-3) var(--space-4) var(--space-4); border-radius: var(--radius-lg); background: var(--bg-surface); box-shadow: inset 0 0 0 1.5px var(--status-wacht-line); }
.ak-doc .bubble__label { margin-bottom: var(--space-2); }
.ak-doc .akkoord__value { margin-top: 0; }
.ak-doc .table-wrap { margin-top: var(--space-3); }
.ak-doc__meta { display: flex; flex-wrap: wrap; gap: 4px var(--space-4); margin-top: 4px; font: var(--type-body-s); color: var(--text-secondary); }
.ak-doc__link { display: inline-flex; margin-top: var(--space-3); font: 600 13px/1.3 var(--font-brand); color: var(--text-primary); }
.ak-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.ak-steps li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: var(--space-2); align-items: start; font: var(--type-body-s); color: var(--text-secondary); }
.ak-steps li b { display: block; font: 600 14px/1.35 var(--font-brand); color: var(--text-primary); }
.ak-steps li > span:last-child { font: 600 13px/1.35 var(--font-brand); color: var(--text-primary); white-space: nowrap; }
.ak-steps .icon { width: 18px; height: 18px; margin-top: 1px; }
.ak-fold { display: inline-flex; align-items: center; gap: 4px; margin-top: var(--space-3); border: 0; background: none; padding: 0; font: var(--type-body-s); color: var(--text-secondary); cursor: pointer; }
.ak-fold .icon { transition: transform var(--duration-fast) var(--ease-standard); }
.ak-fold[aria-expanded="true"] .icon { transform: rotate(180deg); }
.ak-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-4); }
.ak-actions .why { margin-left: auto; }
.ak-more { display: none; }
.why-box { margin-top: var(--space-4); border-top: 1px solid var(--border-default); }
.why-box .akkoord__row { grid-template-columns: 150px 1fr; }
.why-box ul { margin: 0; padding-left: 1.1em; }
@media (max-width: 900px) {
  /* phone: the decision stays in reach above the tab bar; the quieter choices sit in the item */
  .ak-more { display: flex; gap: var(--space-4); margin-top: var(--space-2); }
  .ak-more .btn { padding-left: 0; padding-right: 0; }
  .ak-actions .wide-only { display: none; }
  .ak-actions { position: sticky; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 4; flex-wrap: nowrap; margin: var(--space-3) calc(-1 * var(--space-4)) calc(-1 * var(--space-4)); padding: var(--space-3) var(--space-4); background: var(--bg-surface); box-shadow: 0 -1px 0 var(--border-default); border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
}
@media (max-width: 640px) {
  .wl__head { grid-template-columns: 28px minmax(0, 1fr) auto; padding: var(--space-4); }
  .wl__kind { width: 28px; height: 28px; }
  .wl__chev { display: none; }
  .wl__body { padding: 0 var(--space-4) var(--space-4); }
  .ak-actions .btn--akkoord { flex: 1; }
  .why-box .akkoord__row { grid-template-columns: 1fr; }
}
.ak-doc .table td, .ak-doc .table th { padding-top: 7px; padding-bottom: 7px; }
/* keyboard: the first tab stop skips the menu */
.skip-link { position: fixed; left: var(--space-4); top: -60px; z-index: 60; padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); background: var(--bg-inverse); color: var(--text-inverse); font: 600 14px/1.3 var(--font-brand); text-decoration: none; transition: top var(--duration-fast) var(--ease-standard); }
.skip-link:focus { top: var(--space-3); }
main:focus { outline: none; }

/* ---------- overview row: one line per part of a settings page, with its state (Bedrijfskennis, Instellingen) ---------- */
.ov-row { grid-template-columns: 40px minmax(0, 1fr) auto 16px; padding: var(--space-4) var(--space-5); color: inherit; }
.ov-row .skill__icon { width: 40px; height: 40px; }
.ov-row .row__title { font: var(--type-heading-s); letter-spacing: var(--type-heading-s-tracking); }
.ov-chev { width: 16px; height: 16px; transform: rotate(-90deg); color: var(--text-tertiary); }
.ov-state { font: 600 13px/1.3 var(--font-brand); color: var(--text-secondary); white-space: nowrap; }
.ov-state--warn { color: var(--text-primary); }
.ov-state--warn::before { content: "!"; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 6px; border-radius: 50%; background: var(--text-primary); color: var(--text-inverse); font: 700 11px/1 var(--font-brand); }
@media (max-width: 640px) { .ov-row { grid-template-columns: 36px minmax(0, 1fr); padding: var(--space-4); } .ov-row .skill__icon { width: 36px; height: 36px; } .ov-state { grid-column: 2; } .ov-chev { display: none; } }