/* Designify Paneel: opbouw uit VS Code, gevoel uit Notion, huisstijl uit Designify.
   Gebaseerd op aipaneel-portal/admin/admin.css. Alle kleuren, fonts en maten komen uit tokens.css. */

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--text-compact);
  line-height: 1.45;
  color: var(--fg);
  background: var(--bg-2);          /* gebroken wit canvas; kaarten zijn wit */
  -webkit-font-smoothing: antialiased;
  --field-bg: var(--bg);            /* velden en secundaire knoppen op het canvas */
}
/* Binnen een witte kaart zijn velden en secundaire knoppen gebroken wit */
.panel, .tile, .score-card, .card-doc, .docs-main, .module-tile, .f-item, .f-module, .f-preview, .f-actions, .post-preview,
.peek, dialog, .selector-menu, .nav-menu-panel, .user-menu-panel, .clientpick-menu, .palette, .glass-panel, table.grid { --field-bg: var(--bg-2); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a.plain, .plain a { color: inherit; }
a.plain:hover { text-decoration: none; }
b, strong, h1, h2, h3, h4, h5, h6, th { font-weight: 500; }  /* Geist heeft 300, 400 en 500; geen vet */
kbd {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-3);
  border-radius: var(--r-2xs);
  padding: 0 4px;
  background: var(--bg-2);
}
.mono { font-family: var(--mono); font-size: 11.5px; }
.muted { color: var(--fg-2); }
.faint { color: var(--fg-3); }
.small { font-size: 12px; }
.spacer { flex: 1; }
.hidden { display: none !important; }
.nowrap { white-space: nowrap; }
.i { flex: none; vertical-align: -3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.page-title {
  font-family: var(--font-display);
  font-weight: 300;               /* Make it Flow: titel in twee delen, tweede deel Light en grijs */
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--fg-2);
  margin: 0;
}
.page-title b { font-weight: 500; color: var(--fg); }  /* eerste deel Medium */
h1, h2, h3 { letter-spacing: -0.03em; line-height: 1.1; }

/* Tone: statuskleur via --c */
.tone-ok { --c: var(--ok); --c-fg: var(--ok-fg); }
.tone-warn { --c: var(--warn); --c-fg: var(--warn-fg); }
.tone-bad { --c: var(--bad); --c-fg: var(--bad); }
.tone-info { --c: var(--info); --c-fg: var(--info); }
.tone-muted { --c: var(--muted); --c-fg: var(--fg-2); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--fg-3)); flex: none; display: inline-block; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 8px 1px 7px;
  border-radius: var(--r-pill);
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
  color: var(--c-fg, var(--fg-2));
  background: color-mix(in srgb, var(--c, var(--fg-3)) 14%, transparent);
}
.pill .i { width: 12px; height: 12px; vertical-align: 0; }
.actor { display: inline-flex; align-items: center; gap: 4px; color: var(--c-fg, var(--fg-2)); font-size: 11.5px; }
.actor .i { width: 13px; height: 13px; }
.prio-critical { color: var(--bad); }
.prio-high { color: var(--warn-fg); }
.prio-low { color: var(--fg-3); }

/* Controls */
button, select, input, textarea, .btn {
  font: inherit;
  font-size: 14px;
  color: var(--fg);
  background: var(--field-bg);
  border: 0;
  border-radius: var(--r-sm);
  padding: 5px 10px;
}
/* Invoervelden: geen rand, vlak bg-2, focus = accentvlak plus een ring voor toetsenbordgebruik */
input, select, textarea { font-size: 15px; border-radius: var(--r-field); padding: 10px 14px; }
input:focus, select:focus, textarea:focus { background: var(--accent-bg); }
button, .btn {
  cursor: pointer;
  border-radius: var(--r-btn);    /* Make it Flow: knoppen volgen de website */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  text-decoration: none;
  color: var(--fg);
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
}
button:hover, .btn:hover { background: var(--bg-3); text-decoration: none; }
/* Primair: vlak accent, geen verloop. Secundair is de standaardknop hierboven (bg-2, geen rand). */
.btn-primary, button.primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover, button.primary:hover { background: var(--accent-hover); }
.btn-danger { color: var(--bad); }
button.ghost, .btn-ghost, button.icon { background: none; color: var(--fg-2); }
button.ghost:hover, .btn-ghost:hover, button.icon:hover { background: var(--bg-3); color: var(--fg); }
button.icon, .btn.icon { padding: 4px; display: inline-grid; place-items: center; }
button:disabled { opacity: 0.5; cursor: default; }
input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible, .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
textarea { width: 100%; resize: vertical; min-height: 60px; line-height: 1.5; }
input[type="checkbox"] { accent-color: var(--accent); width: 14px; height: 14px; padding: 0; }
label.field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--fg-2); }
.field-hint { color: var(--fg-3); font-size: 11.5px; }
.errors { background: color-mix(in srgb, var(--bad) 8%, transparent); padding: 8px 12px; border-radius: var(--r-sm); margin: 0 0 16px; }
.errors p { margin: 2px 0; }

/* ---------- Shell (staff, compact) ---------- */
body.shell {
  display: grid;
  grid-template-columns: var(--activity-w) var(--sidebar-w) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) var(--status-h);
  grid-template-areas: "act side main" "status status status";
  overflow: hidden;
}
body.shell.sidebar-collapsed, body.shell:not(:has(> .sidebar, > .side-menu)) { --sidebar-w: 0px; }
body.shell:not(:has(> .sidebar, > .side-menu)) [data-action="toggle-sidebar"] { display: none; }
body.shell:not(:has(> .sidebar, > .side-menu)) .header { padding-left: var(--s-24); }
body.shell.sidebar-collapsed .sidebar { display: none; }

/* Activity bar */
.activity {
  grid-area: act;
  background: var(--bg-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
}
.activity a, .activity .soon {
  position: relative;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: var(--fg-3);
  border-radius: var(--r-xs);
}
.activity a:hover { color: var(--fg); text-decoration: none; }
/* Tools die nog komen: zelfde knop, gedimd, doet niets bij klikken */
.activity .soon { padding: 0; border: 0; background: none; font: inherit; cursor: default; }
.activity .soon > .i { opacity: 0.45; }
.activity .soon .tip em { font-style: normal; opacity: 0.6; margin-left: 4px; }
.activity-sep { width: 16px; height: 0; margin: 6px 0; flex: none; }
.activity a.active { color: var(--fg); background: var(--bg); box-shadow: var(--shadow-card); }
.activity .tip {
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  padding: 3px 8px;
  border-radius: var(--r-xs);
  background: var(--fg);
  color: var(--bg);
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  z-index: 40;
  transition: opacity 60ms ease;
}
.activity a:hover .tip, .activity a:focus-visible .tip, .activity .soon:hover .tip, .activity .soon:focus-visible .tip { opacity: 1; transition-delay: 160ms; }

/* Bovenbalk in plaats van de activity bar (per gebruiker, User.nav = "top"): zelfde links, met tekst */
body.shell.nav-top {
  --activity-w: 0px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: var(--header-h) minmax(0, 1fr) var(--status-h);
  grid-template-areas: "act" "main" "status";
}
body.shell.nav-top .header { padding-left: var(--s-24); }
body.shell.nav-top .board-home { height: calc(100dvh - 2 * var(--header-h) - var(--status-h)); }
.nav-top .activity {
  flex-direction: row;
  gap: 2px;
  padding: 0 12px 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav-top .activity .wordmark { width: auto; height: auto; display: block; margin-right: 16px; flex: none; color: var(--fg); }
.nav-top .activity a:not(.wordmark), .nav-top .activity .soon, .nav-menu > summary {
  width: auto;
  height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  flex: none;
  font-size: 13px;
  color: var(--fg-2);
}
.nav-top .activity .tip, .nav-top .activity a:hover .tip, .nav-top .activity .soon:hover .tip {
  position: static;
  transform: none;
  padding: 0;
  background: none;
  color: inherit;
  font-size: inherit;
  opacity: 1;
  transition: none;
}
.nav-top .activity .soon .tip { opacity: 0.6; }
.nav-top .activity-sep { width: 0; height: 16px; margin: 0 6px; }
.nav-menu { flex: none; }
.nav-menu > summary { position: relative; list-style: none; border-radius: var(--r-xs); cursor: pointer; user-select: none; }
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary:hover, .nav-menu[open] > summary { color: var(--fg); background: var(--bg-3); }
.nav-menu > summary.active { color: var(--fg); background: var(--bg-3); }
/* Fixed, zodat de overflow van de balk het menu niet afknipt; horizontaal blijft het onder de knop */
.nav-menu-panel {
  position: fixed;
  top: calc(var(--header-h) + 2px);
  z-index: 30;
  width: 280px;
  max-width: calc(100vw - 16px);
  max-height: min(560px, 75vh);
  overflow: auto;
  padding: 6px;
  font-size: 13px;
  background: var(--bg);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-float);
}
.nav-menu-foot { display: flex; align-items: center; gap: 6px; margin-top: 6px; padding: 6px 8px 2px; color: var(--fg-2); }
.nav-menu-foot:hover { color: var(--fg); text-decoration: none; }

/* Sidebar */
.sidebar {
  grid-area: side;
  background: var(--bg-2);
  overflow: auto;
  font-size: 14px;
  padding: 0 var(--s-12) var(--s-24);
  color: var(--fg-2);
}
.sidebar-head {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  position: sticky;
  top: 0;
  background: var(--bg-2);
  z-index: 1;
}
.wordmark { font-family: var(--font); font-size: 16px; letter-spacing: -0.03em; color: var(--fg); font-weight: 500; white-space: nowrap; }
.wordmark .light { font-weight: 300; }
.wordmark:hover { text-decoration: none; }
.wordmark img { height: 18px; display: block; }
.sidebar h4 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: var(--s-16) var(--s-12) var(--s-4);
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-3);
}
.tree { list-style: none; margin: 0; padding: 0; }
.tree ul { list-style: none; margin: 0; padding: 0 0 2px 14px; }
.tree a, .tree summary {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  min-height: 36px;
  padding: 0 var(--s-12);
  border-radius: var(--r-md);
  color: var(--fg-2);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
}
.tree summary { list-style: none; color: var(--fg); font-weight: 500; }
.tree summary::-webkit-details-marker { display: none; }
.tree summary .caret { transition: transform 80ms ease; color: var(--fg-3); }
.tree details[open] > summary .caret { transform: rotate(90deg); }
.tree a:hover, .tree summary:hover { background: var(--bg-3); color: var(--fg); text-decoration: none; }
.tree a.active { background: var(--bg); color: var(--fg); box-shadow: var(--shadow-card); }
.tree .label { overflow: hidden; text-overflow: ellipsis; flex: 1; }
.tree .count { color: var(--fg-3); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.tree li.row { position: relative; }
.tree .soon { display: flex; align-items: center; gap: var(--s-8); min-height: 36px; padding: 0 var(--s-12); color: var(--fg-3); white-space: nowrap; cursor: default; }
.tree .soon em { font-style: normal; font-size: 11px; opacity: 0.8; }
.panel.soon { background: var(--bg-2); box-shadow: none; color: var(--fg-3); }
.tree li.row > a.add {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  padding: 0;
  justify-content: center;
  color: var(--fg-3);
  opacity: 0;
  pointer-events: none;
}
.tree li.row:hover > a.add, .tree li.row > a.add:focus-visible { opacity: 1; pointer-events: auto; }
.tree li.row:hover > a:first-child .count { visibility: hidden; }

/* Main column */
.main { grid-area: main; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.header {
  height: var(--header-h);
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--s-8);
  padding: 0 var(--s-24) 0 var(--s-8);
  background: var(--bg-2);
}
.crumbs { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--fg-2); }
.crumbs a { color: var(--fg-2); }
.crumbs a:hover { color: var(--fg); text-decoration: none; }
.crumbs .sep { color: var(--fg-3); }
.crumbs .last { color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-actions { display: flex; align-items: center; gap: 6px; }
.palette-btn { color: var(--fg-3); gap: 10px; padding: 3px 6px 3px 10px; }
.page { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: auto; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-12); padding: var(--s-24) var(--s-24) var(--s-16); }
.page-head .sub { flex-basis: 100%; color: var(--fg-2); margin-top: -4px; }
.doc { max-width: 1080px; width: 100%; padding: var(--s-24) var(--s-24) var(--s-64); }
.doc.narrow { max-width: 760px; }
.page-head + .doc { padding-top: 0; }
.doc > .section-title:first-child { margin-top: 8px; }
.doc > table.grid + p, .doc > .form + .section-title { margin-top: 16px; }
p.error { color: var(--bad); }
.section-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-2);
  margin: 28px 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Productiviteit bovenaan home: stat tiles, label klein, waarde groot, uitleg eronder */
.metrics { flex: none; padding: 0 var(--s-24) var(--s-16); }
.metrics-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.metrics-head .section-title { margin: 0 auto 0 0; }
.metrics-head .tabs label { padding: 3px 10px; border-radius: var(--r-xs); color: var(--fg-2); cursor: pointer; }
.metrics-head .tabs label:hover { color: var(--fg); }
.metrics-head .tabs label.active { background: var(--bg); color: var(--fg); box-shadow: var(--shadow-card); }
.metrics-head .tabs input { position: absolute; opacity: 0; pointer-events: none; }
.metrics-head .tabs label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-16); }
.tile { border-radius: var(--r-card); background: var(--bg); box-shadow: var(--shadow-card); padding: var(--s-20) var(--s-24); min-width: 0; }
.tile-label { font-size: 12px; color: var(--fg-2); }
.tile-value { font-size: 24px; font-weight: 500; line-height: 1.3; margin-top: 2px; }
.tile-sub { font-size: 12px; color: var(--fg-3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toolbar {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: var(--s-8) var(--s-24);
}
.toolbar input[type="search"] { width: 200px; }
.toolbar .counter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--fg);
  border-radius: var(--r-btn);
  background: var(--field-bg);
  cursor: pointer;
}
.toolbar .counter:hover { background: var(--bg-3); }
.toolbar .counter strong { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--warn-fg); }
.toolbar .counter.active { background: var(--accent-bg); }
.toolbar + .table-wrap { padding-top: 0; }
/* Selector: knop met vinkjesmenu, zoals aipaneel-portal */
.selector { position: relative; z-index: 6; }
.selector-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 240px;
  padding: 5px 10px;
  font-size: 13px;
  border-radius: var(--r-btn);
  background: var(--field-bg);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.selector-btn::-webkit-details-marker { display: none; }
.selector-btn:hover { background: var(--bg-3); }
.selector-btn.active { background: var(--accent-bg); }
.selector-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selector-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--fg-3); flex: none; }
.selector-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 220px;
  max-width: min(320px, calc(100vw - 32px));
  max-height: min(420px, 70vh);
  overflow: auto;
  padding: 4px;
  background: var(--bg);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-float);
}
.selector-menu label { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: var(--r-xs); cursor: pointer; color: var(--fg); }
.selector-menu label:hover { background: var(--bg-2); }
.selector-menu input[type="checkbox"] { margin: 0; flex: none; }
.selector-clear {
  display: block;
  width: 100%;
  margin-top: 4px;
  border-radius: 0;
  background: var(--bg);
  color: var(--fg-2);
  text-align: left;
  position: sticky;
  bottom: 0;
}
.selector-clear[hidden], [data-filters-reset][hidden] { display: none; }
/* Datumfilter: van/t-m en snelkeuzes in hetzelfde menu */
.date-menu { min-width: 260px; }
.selector-menu label.date-row { cursor: default; justify-content: space-between; }
.selector-menu label.date-row:hover { background: none; }
.date-row span { color: var(--fg-2); font-size: 13px; }
.date-row input, .date-row select { width: 170px; }
.date-presets { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 8px 6px; }
.date-presets .btn { padding: 3px 8px; font-size: 12px; }
.tabs { display: inline-flex; gap: 2px; padding: 2px; background: var(--bg-3); border-radius: var(--r-btn); }
.tabs a { padding: 3px 10px; border-radius: var(--r-xs); color: var(--fg-2); display: inline-flex; gap: 6px; align-items: center; }
.tabs a:hover { color: var(--fg); text-decoration: none; }
.tabs a.active { background: var(--bg); color: var(--fg); box-shadow: var(--shadow-card); }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  background: var(--field-bg);
  border-radius: var(--r-pill);
  color: var(--fg-2);
  font-size: 12px;
}
.chip:hover { background: var(--bg-3); color: var(--fg); text-decoration: none; }
.chip.active { background: var(--accent-bg); color: var(--fg); }
.chip .n { color: var(--fg-3); font-variant-numeric: tabular-nums; }

/* Panels */
.panel { border-radius: var(--r-card); padding: var(--s-24); background: var(--bg); box-shadow: var(--shadow-card); }
.panels { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-16); }
.stat { font-family: var(--font-display); font-size: 28px; font-weight: 500; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-label { color: var(--fg-2); font-size: 12px; }
/* Profielen: kanaaltegels en scoreboard */
.channel-name { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; }
.kpis dd { margin: 2px 0 0; font-variant-numeric: tabular-nums; }
.scoreboard td.sorted { font-weight: 500; color: var(--fg); }
.scoreboard tr.top td { background: var(--accent-bg); }
.scoreboard th a { color: inherit; }
.scoreboard th a.active { color: var(--fg); }
.scoreboard tr.me td { background: var(--accent-bg); }
.scoreboard td.sorted { position: relative; }
.scoreboard .share { position: absolute; right: 8px; bottom: 3px; height: 2px; width: calc(var(--w) * 0.6); max-width: 60%; border-radius: 2px; background: var(--accent); opacity: 0.5; }
.board-head { margin-top: 28px; }
.board-head .section-title { margin: 0 auto 0 0; }
.rank {
  display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px;
  border-radius: var(--r-pill); font-weight: 500; font-size: 12px; font-variant-numeric: tabular-nums;
  color: var(--fg-2); background: var(--bg-2);
}
.rank.rank-1 { background: var(--medal-1); color: var(--on-medal); }
.rank.rank-2 { background: var(--medal-2); color: var(--on-medal); }
.rank.rank-3 { background: var(--medal-3); color: var(--on-medal); }
/* Kaartweergave: podium voor de top 3, daaronder de rest */
.podium, .score-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-16); }
.podium { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; margin-bottom: var(--s-16); }
.score-cards { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.score-card {
  border-radius: var(--r-card); background: var(--bg); box-shadow: var(--shadow-card);
  padding: var(--s-20) var(--s-24); display: flex; flex-direction: column; gap: var(--s-12); min-width: 0;
}
.score-card.me { background-image: linear-gradient(var(--accent-bg), var(--accent-bg)); }
.score-card.unranked { opacity: 0.6; }
.score-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.score-name { display: flex; flex-direction: column; min-width: 0; }
.score-name > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score-name a { color: inherit; }
.avatar {
  flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-bg); color: var(--accent); font-weight: 500; font-size: 12px;
}
.score-main { display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 12px; row-gap: 4px; }
.score-figure { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.score-main .share-bar { grid-column: 1 / -1; }
/* Verloop: mini-lijndiagram in accent, stip op het lopende tijdvak, stippellijn voor wat nog komt */
.spark { display: block; overflow: visible; }
.spark-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.spark-area { fill: var(--accent-bg); }
.spark-future { stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 2 3; }
.spark-hit { fill: transparent; }
.spark-pt circle { fill: var(--accent); stroke: var(--bg); stroke-width: 1.5; opacity: 0; }
.spark-pt.spark-now circle, .spark-pt:hover circle { opacity: 1; }
.delta { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--fg-2); }
.delta-up { color: var(--ok-fg); }
.delta-down { color: var(--bad); }
.score-figure .delta { align-self: flex-start; }
/* Scoreboard-animaties. app.js zet .anim op [data-animate] (niet bij minder beweging) en .play zodra het
   blok in beeld komt; zonder JS staat alles er meteen. Elk item heeft --i voor de volgorde. */
.anim :is(.channel, .score-card, tbody tr) { --d: calc(var(--i, 0) * 60ms); }
.anim .podium-3 { --d: 0ms; }
.anim .podium-2 { --d: 140ms; }
.anim .podium-1 { --d: 300ms; }
.anim:not(.play) :is(.channel, .score-card, tbody tr) { opacity: 0; }
.anim.play :is(.channel, .score-card) { animation: rise 600ms cubic-bezier(.2, .8, .2, 1) var(--d) both; }
.anim.play tbody tr { animation: fade-up 450ms cubic-bezier(.2, .8, .2, 1) var(--d) both; }
.anim.play .podium .score-card { animation-name: podium-rise; animation-duration: 750ms; }
.anim.play .podium-1 .rank { animation: medal-pop 500ms cubic-bezier(.3, 1.6, .5, 1) calc(var(--d) + 650ms) both; }
.anim.play .share-bar > span { transform-origin: left; animation: grow 900ms cubic-bezier(.2, .8, .2, 1) calc(var(--d) + 200ms) both; }
.anim.play .scoreboard .share { transform-origin: right; animation: grow 900ms cubic-bezier(.2, .8, .2, 1) calc(var(--d) + 200ms) both; }
.anim .spark-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.anim.play .spark-line { animation: draw 1100ms cubic-bezier(.45, 0, .2, 1) calc(var(--d) + 250ms) both; }
.anim:not(.play) :is(.spark-area, .spark-future, .spark-now circle, .delta) { opacity: 0; }
.anim.play .spark-area { animation: fade 700ms ease-out calc(var(--d) + 700ms) both; }
.anim.play .spark-future { animation: fade 500ms ease-out calc(var(--d) + 1100ms) both; }
.anim.play .spark-now circle { transform-box: fill-box; transform-origin: center; animation: dot-pop 450ms cubic-bezier(.3, 1.6, .5, 1) calc(var(--d) + 1250ms) both; }
.anim.play .delta { animation: fade-up 400ms ease-out calc(var(--d) + 900ms) both; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes podium-rise { from { opacity: 0; transform: translateY(28px) scale(.97); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(4px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes grow { from { transform: scaleX(0); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes medal-pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.18); opacity: 1; } }
@keyframes dot-pop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.5); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .anim :is(.channel, .score-card, tbody tr, .spark-area, .spark-future, .spark-now circle, .delta) { opacity: 1 !important; animation: none !important; }
  .anim :is(.share-bar > span, .share, .rank) { animation: none !important; }
  .anim .spark-line { stroke-dasharray: none; animation: none !important; }
}
.spark-cell { vertical-align: middle !important; }
.share-bar { display: block; height: 4px; border-radius: 2px; background: var(--bg-2); overflow: hidden; margin-top: 4px; }
.share-bar > span { display: block; height: 100%; width: var(--w); background: var(--accent); border-radius: inherit; }
.score-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; }
.score-kpis dd { margin: 2px 0 0; font-variant-numeric: tabular-nums; }
.score-channels { display: flex; flex-wrap: wrap; gap: 4px; font-size: 12px; }
.score-channels .chip:hover { background: none; color: var(--fg-2); }
/* Podium: 2 · 1 · 3, de winnaar het hoogst */
.podium .score-card { position: relative; padding-top: 20px; }
.score-card.rank-1 { --medal: var(--medal-1); }
.score-card.rank-2 { --medal: var(--medal-2); }
.score-card.rank-3 { --medal: var(--medal-3); }
.podium .podium-1 { order: 2; padding-top: 32px; padding-bottom: 24px; }
.podium .podium-2 { order: 1; }
.podium .podium-3 { order: 3; }
.podium .podium-1 .stat { font-size: 36px; }
.podium .podium-1 .rank { min-width: 32px; height: 32px; font-size: 14px; }
.podium .podium-1 .avatar { width: 40px; height: 40px; font-size: 14px; }
.podium:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.podium:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.podium:has(> :nth-child(2):last-child) .podium-1 { order: 1; }
.podium:has(> :nth-child(2):last-child) .podium-2 { order: 2; }
@media (max-width: 720px) {
  .podium { grid-template-columns: minmax(0, 1fr); }
  .podium .score-card { order: 0; }
  .podium .podium-1 { padding-top: 20px; padding-bottom: 14px; }
}
.scroll-x { overflow-x: auto; }
.color-field { display: flex; gap: 8px; align-items: center; }
.color-field input[type="text"] { flex: 1; min-width: 0; font-family: var(--mono); }
.color-pick { width: 36px; height: 36px; padding: 2px; border-radius: var(--r-xs); background: var(--bg); cursor: pointer; flex: none; }
.focus-metrics { margin: 32px 0; }
/* Klantoverzicht: modulepanelen met statustabel */
.mod-panel { display: flex; flex-direction: column; gap: 12px; }
.mod-head { display: flex; align-items: flex-start; gap: 4px; }
.mod-title { font-weight: 500; color: var(--fg); }
.mod-title:hover { color: var(--accent); text-decoration: none; }
.mod-open { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; }
.mod-states { width: 100%; border-collapse: collapse; font-size: 13px; }
.mod-states td { padding: 6px 0; }
.mod-states td.num { text-align: right; font-variant-numeric: tabular-nums; color: var(--fg-2); width: 1%; padding-left: 12px; }
.mod-states a { display: flex; align-items: center; gap: 8px; color: var(--fg); }
.mod-states a:hover { text-decoration: none; color: var(--accent); }
.mod-states tr:hover td.num { color: var(--fg); }
.mod-empty { margin: 0; font-size: 13px; }
.meter { height: 6px; background: var(--bg-3); border-radius: var(--r-pill); margin-top: 8px; overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--c, var(--ok)); border-radius: var(--r-pill); }

/* Board */
.board { flex: 1; display: flex; gap: var(--s-16); padding: var(--s-16) var(--s-24) var(--s-24); overflow: auto; align-items: flex-start; min-height: 0; }
.column { flex: 0 0 272px; display: flex; flex-direction: column; gap: var(--s-8); padding: 0; background: none; }
.column-head { position: relative; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--fg-2); padding: 2px 4px 4px; }
.deadline { font-variant-numeric: tabular-nums; }
.column-head .deadline { color: var(--fg-3); font-weight: 400; }
.deadline.overdue, .column-head .deadline.overdue { color: var(--bad); font-weight: 500; }
.column-head .n { color: var(--fg-3); font-weight: 400; font-variant-numeric: tabular-nums; }
.column-head .actor { margin-left: auto; }
.column-head:focus-visible { outline: none; }
.column-head .tip {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  padding: 6px 9px;
  border-radius: var(--r-xs);
  background: var(--fg);
  color: var(--bg);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  pointer-events: none;
  opacity: 0;
  z-index: 40;
  transition: opacity 60ms ease;
}
.column-head .tip b { font-weight: 500; }
.column-head:hover > .tip, .column-head:focus-visible > .tip, .column-head .actor:hover .tip { opacity: 1; transition-delay: 160ms; }
.column-head:has(.actor:hover) > .tip { opacity: 0; transition-delay: 0ms; }
.column .more { color: var(--fg-3); font-size: 12px; padding: 2px 4px; }
.column-empty { background: color-mix(in srgb, var(--bg) 50%, transparent); border-radius: var(--r-card); padding: 12px; color: var(--fg-3); font-size: 12px; text-align: center; }
.bcard {
  display: block;
  background: var(--bg);
  border-radius: var(--r-card);
  padding: var(--s-12) var(--s-16) var(--s-16);
  color: var(--fg);
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: box-shadow 320ms var(--ease-out), transform 320ms var(--ease-out);
}
.bcard:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-1px); text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .bcard, .bcard:hover { transition: none; transform: none; } }
.bcard.running { background-image: linear-gradient(color-mix(in srgb, var(--info) 10%, transparent), color-mix(in srgb, var(--info) 10%, transparent)); }
.running-badge { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 11.5px; font-weight: 500; color: var(--info); }
.spinner { width: 10px; height: 10px; border-radius: 999px; border: 2px solid color-mix(in srgb, var(--info) 30%, transparent); border-top-color: var(--info); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; border-color: var(--info); } }
.bcard.selected { background-image: linear-gradient(var(--accent-bg), var(--accent-bg)); }
.bcard .title { line-height: 1.35; overflow-wrap: anywhere; font-weight: 500; letter-spacing: -0.01em; }
.bcard .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 10px; margin-top: 6px; font-size: 11.5px; color: var(--fg-3); }
.bcard .meta .mono { font-size: 11px; }
.bcard .client { font-size: 11.5px; color: var(--fg-2); margin-bottom: 2px; }

/* Kaarten: dezelfde tegels als op het bord, in een raster */
.gallery { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s-16); padding: var(--s-16) var(--s-24) var(--s-48); align-content: start; overflow: auto; min-height: 0; }
.gallery > .empty { grid-column: 1 / -1; }
.bcard .bprops { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 6px 0 0; font-size: 11.5px; }
.bcard .bprops dt { color: var(--fg-3); }
.bcard .bprops dd { margin: 0; color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Kalender: maandraster op een datumeigenschap */
.calendar { flex: 1; display: flex; flex-direction: column; gap: var(--s-12); padding: var(--s-8) var(--s-24) var(--s-48); min-height: 0; overflow: auto; }
.cal-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.cal-month { margin: 0; font-size: 16px; font-weight: 500; min-width: 150px; }
.cal-nav { display: inline-flex; gap: 2px; }
.cal-count { margin-left: auto; }
.cal-grid { background: var(--bg); box-shadow: var(--shadow-card); border-radius: var(--r-card); padding: var(--s-8); overflow: hidden; min-width: 640px; }
.cal-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-weekdays div { padding: 6px 8px; font-size: 12px; font-weight: 500; color: var(--fg-2); }
.cal-day { min-height: 112px; padding: 4px 6px 6px; border-radius: var(--r-sm); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-day.outside { background: var(--bg-2); }
.cal-day.outside .cal-date { color: var(--fg-3); }
.cal-date { align-self: flex-end; font-size: 12px; color: var(--fg-2); font-variant-numeric: tabular-nums; padding: 1px 6px; border-radius: var(--r-pill); }
.cal-day.today .cal-date { background: var(--accent); color: var(--bg); font-weight: 500; }
.cal-card { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: var(--r-xs); background: var(--bg-2); color: var(--fg); font-size: 12px; text-decoration: none; cursor: pointer; min-width: 0; }
.cal-card:hover { background: var(--bg-3); text-decoration: none; }
.cal-card.running { background: color-mix(in srgb, var(--info) 14%, transparent); }
.cal-card.selected { background: var(--accent-bg); }
.cal-card .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-more { display: flex; flex-direction: column; gap: 3px; }
.cal-more summary { color: var(--fg-3); font-size: 12px; padding: 0 4px; cursor: pointer; list-style: none; }
.cal-more[open] summary { display: none; }

/* Tables */
table.grid { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--bg); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
table.grid th {
  text-align: left;
  font-weight: 500;
  font-size: 12px;
  color: var(--fg-2);
  padding: var(--s-16) var(--s-16) var(--s-8);
  white-space: nowrap;
  position: sticky;
  top: 0;
  background: var(--bg);
}
table.grid td { padding: var(--s-8) var(--s-16); vertical-align: top; }
table.grid td:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); }
table.grid td:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
table.grid tr.clickable { cursor: pointer; }
table.grid tr.clickable:hover td { background: var(--bg-2); }
table.grid td.num, table.grid th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-wrap { padding: 0 var(--s-24) var(--s-48); }
.board > .empty { padding: 24px 0; }
/* Home: bord en recente overgangen delen de pagina, dus het bord krijgt zelf een schermhoogte */
.board-home { flex: none; height: calc(100dvh - var(--header-h) - var(--status-h)); min-height: 360px; }
.empty { color: var(--fg-3); padding: 24px 16px; text-align: center; }

/* Peek: kaart als Notion-pagina rechts, of volledig scherm */
.peek {
  position: fixed;
  top: 0;
  right: 0;
  bottom: var(--status-h);
  width: min(760px, 62vw);
  background: var(--bg-2);
  box-shadow: var(--shadow-float);
  display: none;
  flex-direction: column;
  z-index: 20;
}
.peek.open { display: flex; }
.peek.full { width: calc(100vw - var(--activity-w)); }
.peek-head {
  height: var(--header-h);
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  color: var(--fg-2);
}
.peek-body { flex: 1; overflow: auto; padding: 0 var(--s-16) var(--s-16); }
.htmx-request.peek-body { opacity: 0.6; }

/* Kaart */
.card-doc { max-width: 900px; width: 100%; padding: var(--s-32) var(--s-40) var(--s-48); margin: var(--s-24) auto; background: var(--bg); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.peek-body .card-doc { margin: 0 auto; }
.card-doc .kicker { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--fg-3); font-size: 12px; margin-bottom: 8px; }
.title-form { margin: 0 0 16px; }
.title-edit {
  display: block;
  width: 100%;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--fg);
  background: transparent;
  border: none;
  border-radius: var(--r-sm);
  padding: 2px 4px;
  margin-left: -4px;
}
.title-edit:hover { background: var(--bg-2); }
.title-edit:focus { background: var(--accent-bg); }
.card-title { font-family: var(--font-display); font-size: 32px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.05; margin: 0 0 var(--s-16); }
.props { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 2px 12px; margin: 0 0 16px; align-items: center; }
.props dt { color: var(--fg-2); display: flex; align-items: center; gap: 6px; padding: 4px 0; }
.props dd { margin: 0; min-width: 0; overflow-wrap: anywhere; padding: 1px 0; }
.props input, .props select, .props textarea {
  background: transparent;
  width: 100%;
  max-width: 420px;
  padding: 3px 6px;
  margin-left: -6px;
}
.props input[type="checkbox"] { width: 14px; margin-left: 0; }
.props textarea { min-height: 32px; max-width: none; }
.props input:hover, .props select:hover, .props textarea:hover { background: var(--bg-2); }
.props input:focus, .props select:focus, .props textarea:focus { background: var(--accent-bg); }
.callout {
  border-radius: var(--r-sm);
  padding: 8px 12px;
  margin: 0 0 16px;
  background: color-mix(in srgb, var(--c, var(--warn)) 14%, transparent);
}
.callout p { margin: 0; }
.moves { padding: 12px 0; margin: 0 0 20px; }
.moves .row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.moves textarea { min-height: 36px; margin-bottom: 8px; }
.locked { color: var(--info); display: inline-flex; gap: 6px; align-items: center; }
.body-head { display: flex; align-items: center; gap: 8px; }
.body-head .section-title { margin: 0; }
.body-view { min-height: 48px; }
.body-edit textarea { min-height: 280px; font-family: var(--mono); font-size: 13px; line-height: 1.55; tab-size: 2; }
.edit-bar { display: flex; gap: 6px; margin-top: 8px; }
/* Formuliergroep op de kaart (bijvoorbeeld de briefing): labels boven de velden, secties inklapbaar,
   twee kolommen voor korte velden zodra er ruimte is (niet in de smalle peek). */
.form-group { margin: 0 0 8px; container-type: inline-size; }
.form-group .body-head { margin: 28px 0 8px; }
.form-group .fg-body { border: 0; padding: 0; margin: 0; min-width: 0; }
.fg-section { border-radius: var(--r-sm); margin: 0 0 8px; background: var(--bg-2); }
.fg-section > summary {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  list-style: none;
  border-radius: var(--r-sm);
}
.fg-section > summary::-webkit-details-marker { display: none; }
.fg-section > summary::before { content: "\25B8"; color: var(--fg-3); font-size: 11px; transition: transform 0.15s; }
.fg-section[open] > summary::before { transform: rotate(90deg); }
.fg-section > summary:hover { background: var(--bg-3); }
.fg-title { font-weight: 500; color: var(--fg); }
.fg-count { margin-left: auto; color: var(--fg-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.fg-count.complete { color: var(--ok-fg); }
.fg-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 16px; padding: 4px 12px 14px; }
@container (min-width: 700px) {
  .fg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fg-field.wide { grid-column: 1 / -1; }
}
.fg-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fg-field > label { font-size: 12px; font-weight: 500; color: var(--fg-2); }
.fg-field input:not([type="checkbox"]), .fg-field select, .fg-field textarea { width: 100%; }
.fg-field textarea { min-height: 72px; resize: vertical; field-sizing: content; max-height: 60vh; }
.fg-field .field-hint { line-height: 1.4; }
.fg-field .req { color: var(--fg-3); }
.fg-field.missing input, .fg-field.missing select, .fg-field.missing textarea { background: color-mix(in srgb, var(--warn) 16%, var(--bg-2)); }
.fg-field.missing .req { color: var(--warn-fg); }
.fg-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg); }
.form-group .edit-bar { align-items: center; }
.dirty-note { color: var(--warn-fg); font-size: 12px; font-weight: 500; }
.dirty-note[hidden] { display: none; }
/* Klantweergave: dezelfde groep alleen-lezen */
.fg-readonly .fg-section { padding: 0; }
.fg-readonly dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0; padding: 4px 12px 14px; }
.fg-readonly dt { color: var(--fg-2); font-size: 13px; }
.fg-readonly dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.files { list-style: none; padding: 0; margin: 0 0 8px; }
.files li { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: var(--r-xs); }
.files li:hover { background: var(--bg-2); }
.files .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); }
.upload { display: flex; gap: 6px; align-items: center; }
.upload input[type="file"] { flex: 1; min-width: 0; }
.thread { margin: 0 0 12px; }
.thread .entry { padding: 12px 0; }
.thread .who { font-size: 12px; color: var(--fg-3); margin-bottom: 2px; display: flex; gap: 8px; }
.thread .who b { color: var(--fg-2); font-weight: 500; }
.comment-form textarea { min-height: 56px; }
.comment-form .row { display: flex; justify-content: flex-end; margin-top: 6px; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline > li { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 12px; padding: 8px 0; }
.timeline .when { color: var(--fg-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.timeline .what { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; min-width: 0; }
.timeline .note { flex-basis: 100%; color: var(--fg-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.timeline details { flex-basis: 100%; }
.timeline summary { cursor: pointer; color: var(--fg-2); font-size: 12px; }
pre, .code {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--bg-2);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 420px;
  margin: 6px 0 0;
}
pre.error { background: color-mix(in srgb, var(--bad) 10%, transparent); }

/* Markdown */
.markdown { font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; }
.markdown h1 { font-size: 22px; margin: 20px 0 8px; }
.markdown h2 { font-size: 18px; margin: 20px 0 6px; }
.markdown h3 { font-size: 15px; margin: 16px 0 4px; }
.markdown p { margin: 0 0 10px; }
.markdown ul, .markdown ol { padding-left: 22px; }
.markdown code { font-family: var(--mono); font-size: 12px; background: var(--bg-2); border-radius: var(--r-2xs); padding: 0 3px; }
.markdown pre code { border: none; padding: 0; background: none; }
.markdown blockquote { margin: 0 0 10px; padding: 8px 12px; background: var(--bg-2); border-radius: var(--r-sm); color: var(--fg-2); }
.markdown table { border-collapse: collapse; }
.markdown th, .markdown td { padding: 4px 8px; }
.markdown th { background: var(--bg-2); }
.markdown hr { border: none; margin: 24px 0; }
.markdown img { max-width: 100%; }
.markdown.is-empty { color: var(--fg-3); }

/* Formulier (nieuwe kaart, instellingen) */
.form { display: grid; gap: 14px; max-width: 640px; }
.form > button, .form > .btn { justify-self: start; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.form-actions { display: flex; gap: 8px; align-items: center; }
/* Profielformulier: vaste blokken */
.profile-form { max-width: none; gap: 8px; }
.profile-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.profile-form legend.section-title { padding: 0; margin: 16px 0 10px; }
.profile-form .form-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.form-stack { display: grid; gap: 12px; }
.profile-form .field { display: grid; gap: 4px; align-content: start; }
.profile-form .field > label { font-size: 12px; color: var(--fg-2); }
.profile-form .field input, .profile-form .field select, .profile-form .field textarea { width: 100%; }
.profile-form .field p { margin: 0; font-size: 11.5px; }
.profile-form > button { margin-top: 12px; }
/* Klantpagina: kop met logo, gegevens, moduletegels en komende modules */
.client-head { display: flex; align-items: center; gap: 14px; }
.client-logo { width: 48px; height: 48px; flex: none; border-radius: var(--r-btn-lg); background: var(--bg-2); object-fit: contain; padding: 4px; }
.client-logo--empty { display: grid; place-items: center; padding: 0; background: var(--accent-bg); color: var(--accent); font-family: var(--font-display); font-weight: 500; font-size: 20px; text-transform: uppercase; }
.client-sub { display: flex; align-items: center; gap: 10px; margin: 4px 0 0; color: var(--fg-3); }
.client-form { max-width: none; gap: 8px; }
.client-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 12px; }
.client-form fieldset + fieldset { margin-top: 24px; }
.client-form legend.section-title { padding: 0; margin: 8px 0 10px; }
.client-form .form-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.client-form .field { display: grid; gap: 4px; align-content: start; }
.client-form .field > label { font-size: 12px; color: var(--fg-2); }
.client-form .field input:not([type="checkbox"]), .client-form .field textarea { width: 100%; }
.client-form .field p { margin: 0; font-size: 11.5px; }
.client-form .fs-hint { margin: -6px 0 0; font-size: 12px; }
.client-form textarea { font-family: var(--mono); font-size: 12px; }
.client-save { margin-top: 24px; padding-top: 16px; }

/* Schakelaar: verstopt vinkje met een track en knop */
.switch { position: relative; flex: none; width: 30px; height: 18px; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.switch i { position: absolute; inset: 0; border-radius: var(--r-pill); background: var(--bg-3); transition: background .15s; pointer-events: none; }
.switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); box-shadow: 0 1px 2px rgba(14, 10, 49, .25); transition: transform .15s; }
.switch input:checked + i { background: var(--accent); }
.switch input:checked + i::after { transform: translateX(12px); background: var(--on-accent); }
.switch input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch-row { display: flex; align-items: center; gap: 16px; padding: 12px 14px; background: var(--bg-2); border-radius: var(--r-card); cursor: pointer; }
.switch-row > span:first-child { flex: 1; display: grid; gap: 2px; }
.switch-row .muted { font-size: 12px; }

.module-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-16); }
.module-tile { display: flex; flex-direction: column; gap: var(--s-8); padding: var(--s-24); border-radius: var(--r-card); background: var(--bg); box-shadow: var(--shadow-card); cursor: pointer; transition: box-shadow .15s, background .15s; min-width: 0; }
.module-tile:hover { box-shadow: var(--shadow-card-hover); }
.module-tile:has(input:checked) { background-image: linear-gradient(var(--accent-bg), var(--accent-bg)); }
.module-tile-head { display: flex; align-items: center; gap: 10px; }
.module-tile-head b { flex: 1; min-width: 0; font-size: 14px; }
.module-tile-icon { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: var(--r-xs); background: var(--bg-2); color: var(--fg-2); transition: background .15s, color .15s; }
.module-tile:has(input:checked) .module-tile-icon { background: var(--accent); color: var(--on-accent); }
.module-tile-desc { color: var(--fg-2); font-size: 12.5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.module-tile-meta { margin-top: auto; color: var(--fg-3); font-size: 11.5px; }


.checks { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.checks label { display: flex; align-items: center; gap: 6px; font-weight: normal; }

/* Status bar */
.statusbar {
  grid-area: status;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 var(--s-24);
  font-size: 12px;
  color: var(--fg-2);
  background: var(--bg-2);
  white-space: nowrap;
  overflow: hidden;
}
/* Keep the localhost indicator legible in both themes. */
.statusbar--local {
  --bg: var(--local-bg);
  --bg-2: var(--local-bg);
  --fg: var(--local-fg);
  --fg-2: var(--local-fg-2);
  --fg-3: var(--local-fg-3);
}
.statusbar a, .statusbar button.item { color: var(--fg-2); }
.statusbar .item { display: inline-flex; align-items: center; gap: 5px; }
.statusbar .item .i { width: 13px; height: 13px; }
.statusbar a.item:hover, .statusbar button.item:hover { color: var(--fg); text-decoration: none; background: none; }
.statusbar button.item { border: 0; background: none; padding: 0; font: inherit; font-size: inherit; border-radius: 0; }
.statusbar .tone-ok .i, .statusbar .tone-ok .dot { color: var(--ok); }

/* Command palette */
.palette-backdrop { position: fixed; inset: 0; background: var(--backdrop); display: none; z-index: 50; }
.palette-backdrop.open { display: block; }
.palette {
  width: min(600px, 92vw);
  margin: 12vh auto 0;
  background: var(--bg);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow-float);
}
.palette input { width: 100%; border: none; border-radius: 0; padding: 14px 16px; font-size: 15px; outline: none; background: var(--bg); }
.palette input:focus-visible { outline: none; }
.palette ul { list-style: none; margin: 0; padding: 6px; max-height: 52vh; overflow: auto; }
.palette li { display: flex; gap: 10px; align-items: center; padding: 7px 10px; border-radius: var(--r-xs); cursor: pointer; }
.palette li.active { background: var(--accent-bg); }
.palette li .kind { color: var(--fg-3); font-size: 11.5px; width: 56px; flex: none; }
.palette li .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette li .hint { color: var(--fg-3); margin-left: auto; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 45%; }
.palette-foot { display: flex; gap: 14px; padding: 8px 14px; color: var(--fg-3); font-size: 11.5px; }

/* Dialog */
dialog { border: 0; border-radius: var(--r-card); background: var(--bg); color: var(--fg); padding: var(--s-24); width: min(460px, 92vw); box-shadow: var(--shadow-float); }
dialog.viewer { width: min(920px, 94vw); max-height: 88vh; padding: 0; display: none; flex-direction: column; overflow: hidden; }
dialog.viewer[open] { display: flex; }
.viewer-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 16px; }
.viewer-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.viewer-modes { display: inline-flex; gap: 2px; }
.viewer-modes .active { background: var(--bg-3); color: var(--fg); }
.viewer-body { overflow: auto; padding: 16px 20px 20px; }
.viewer-source { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--mono); font-size: 12.5px; line-height: 1.55; }
.viewer-image { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: var(--r-sm); }
.viewer-edit textarea { width: 100%; min-height: 55vh; font-family: var(--mono); font-size: 13px; line-height: 1.55; tab-size: 2; }
.viewer-page { border-radius: var(--r-card); box-shadow: var(--shadow-card); }
dialog::backdrop { background: var(--backdrop); }
dialog h3 { margin: 0 0 12px; font-size: 16px; }
dialog .dialog-actions { display: flex; gap: 6px; justify-content: flex-end; margin-top: 16px; }

/* Toast */
.toasts { position: fixed; right: 16px; bottom: calc(var(--status-h) + 12px); display: flex; flex-direction: column; gap: 6px; z-index: 60; }
.toast {
  background: var(--fg);
  color: var(--bg);
  padding: 9px 14px;
  border-radius: var(--r-btn);
  font-size: 13px;
  max-width: 440px;
  box-shadow: var(--shadow-float);
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.toast.error { background: var(--bad); color: var(--on-status); }
.toast .i { margin-top: 1px; }

/* Klantweergave: knop op de klantpagina en balk bovenin het klantscherm */
.user-menu { position: relative; }
.user-menu > summary { list-style: none; cursor: pointer; }
.user-menu > summary::-webkit-details-marker { display: none; }
.user-menu > summary:hover { color: var(--fg); }
.user-menu-panel {
  /* fixed: de statusbalk knipt overflow af */
  position: fixed;
  bottom: calc(var(--status-h) + 6px);
  left: 8px;
  z-index: 40;
  min-width: 240px;
  max-height: min(480px, 70vh);
  overflow: auto;
  padding: 4px;
  background: var(--bg);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-float);
  font-size: 13px;
}
.user-menu-head { padding: 6px 8px 4px; font-size: 12px; font-weight: 500; color: var(--fg-3); }
.user-menu-panel form { display: grid; }
.user-menu-panel button { display: flex; justify-content: space-between; gap: 12px; text-align: left; padding: 5px 8px; border: 0; border-radius: var(--r-xs); background: none; color: var(--fg); font: inherit; }
.user-menu-panel button.sub { padding-left: 20px; color: var(--fg-2); }
.user-menu-panel button:hover { background: var(--bg-2); }
.user-menu-panel p { margin: 0; padding: 6px 8px; }
.view-as-bar {
  display: flex;
  align-items: center;
  gap: var(--s-16);
  padding: var(--s-8) var(--s-40);
  background: var(--warn);
  color: var(--on-warn);
  font-size: 14px;
}
.view-as-bar form { margin-left: auto; }

/* ---------- Focus (klant en profiel, ruim) ---------- */
body.focus { font-size: var(--text-focus); line-height: 1.6; background: var(--bg-2); min-height: 100%; }
.focus-top {
  display: flex;
  align-items: center;
  gap: var(--s-16);
  padding: var(--s-20) var(--s-40);
}
.focus-top .wordmark { font-size: 18px; }
.focus-top .wordmark--client img { height: 28px; width: auto; max-width: 180px; object-fit: contain; }
.focus-top .client { display: inline-flex; align-items: center; gap: var(--s-12); color: var(--fg-2); }
.focus-top .client img { height: 24px; max-width: 120px; object-fit: contain; }
.focus-top .client::before { content: ""; width: 0; height: 20px; }
.focus-top nav { margin-left: auto; display: flex; align-items: center; gap: var(--s-8); }
.focus-top nav a, .focus-top nav button { color: var(--fg-2); font-size: 14px; }
.focus-tabs { display: flex; gap: 2px; }
.focus-tab { padding: 6px 12px; border-radius: var(--r-xs); font-weight: 500; }
.focus-tab:hover { background: var(--bg-2); color: var(--fg); text-decoration: none; }
.focus-top nav .focus-tab.active, .focus-top nav .btn-ghost.active { color: var(--fg); background: var(--accent-bg); }
.focus-nav-sep { width: 0; height: 20px; margin: 0 var(--s-4); }
.f-chips { margin: var(--s-24) 0 0; }
.f-chips .pill { margin-left: 4px; }
.f-module--soon { opacity: .6; cursor: default; }
.f-module--soon:hover { background: none; }
.focus-main { padding: var(--s-48) var(--s-40) var(--s-96); }
.focus-wrap { max-width: 760px; margin: 0 auto; }
.focus-wrap.narrow { max-width: 480px; }
body.focus .page-title { font-size: 40px; margin-bottom: var(--s-8); }
.focus-lead { color: var(--fg-2); font-size: 18px; margin: 0 0 var(--s-40); }
body.focus .section-title { font-size: 12px; margin: var(--s-48) 0 var(--s-16); }
body.focus button, body.focus .btn { font-size: 15px; }
body.focus button, body.focus .btn { padding: 10px 18px; border-radius: var(--r-btn-lg); }
body.focus input, body.focus select, body.focus textarea { font-size: 15px; padding: 10px 14px; border-radius: var(--r-field); }
body.focus label.field { font-size: 14px; gap: 6px; }
.btn-lg { padding: 14px 24px !important; font-size: 16px !important; font-weight: 500; }
.f-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-16); }
.f-item {
  display: flex;
  align-items: center;
  gap: var(--s-16);
  padding: var(--s-20) var(--s-24);
  background: var(--bg);
  box-shadow: var(--shadow-card);
  border-radius: var(--r-card);
  color: var(--fg);
  text-decoration: none;
}
.f-item:hover { box-shadow: var(--shadow-card-hover); text-decoration: none; }
.f-item .t { flex: 1; min-width: 0; }
.f-item .t b { display: block; font-weight: 500; overflow-wrap: anywhere; }
.f-item .t span { color: var(--fg-2); font-size: 14px; }
.f-item .i { color: var(--fg-3); }
.f-modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s-16); }
.f-module {
  display: grid;
  gap: var(--s-8);
  padding: var(--s-20) var(--s-24);
  background: var(--bg);
  box-shadow: var(--shadow-card);
  border-radius: var(--r-card);
  color: var(--fg);
  text-decoration: none;
}
.f-module:hover { box-shadow: var(--shadow-card-hover); text-decoration: none; }
.f-module.active { background-image: linear-gradient(var(--accent-bg), var(--accent-bg)); }
.f-module b { font-size: 17px; font-weight: 500; }
.f-module-counts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-8) var(--s-12); color: var(--fg-2); font-size: 14px; }
.f-note { color: var(--fg-2); font-size: 15px; margin-top: var(--s-24); display: flex; align-items: center; gap: 8px; }
.f-card .props { grid-template-columns: 180px minmax(0, 1fr); gap: var(--s-8) var(--s-16); font-size: 15px; }
.f-card .props dt { padding: 0; }
.f-preview { background: var(--bg); box-shadow: var(--shadow-card); border-radius: var(--r-card); padding: var(--s-32); margin: 0 0 var(--s-24); }
.f-preview .markdown { font-size: 16px; line-height: 1.7; }
.f-actions { display: grid; gap: var(--s-12); padding: var(--s-24); border-radius: var(--r-card); background: var(--bg-2); margin: var(--s-32) 0; }
.f-actions .row { display: flex; flex-wrap: wrap; gap: var(--s-12); align-items: center; }
.f-actions textarea { min-height: 80px; background: var(--bg); }
.f-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--s-16); }
.f-results .stat { font-size: 32px; }
.f-card .thread .who { font-size: 13px; }
.f-card .markdown { font-size: 16px; }
.f-card details.edit summary { cursor: pointer; color: var(--accent); font-size: 15px; margin-bottom: var(--s-12); }
.f-card details.edit textarea { min-height: 260px; font-family: var(--font); font-size: 16px; line-height: 1.6; }

/* Gradient en glas: alleen login en de lege klantomgeving */
body.focus.focus--glass { background: var(--gradient); background-attachment: fixed; color: var(--on-gradient); }
body.focus.focus--glass .wordmark, body.focus.focus--glass .focus-top nav a { color: var(--on-gradient); }
body.focus.focus--glass .focus-lead, body.focus.focus--glass .muted { color: var(--on-gradient-2); }
.glass-panel {
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: none;
  border-radius: var(--r-card);
  padding: var(--s-48);
  color: var(--on-gradient);
}
.glass-panel input, .glass-panel select, .glass-panel textarea { background: var(--bg); color: var(--fg); }
.focus-empty { background: var(--gradient); border-radius: var(--r-card); padding: var(--s-16); }
.focus-empty .glass-panel { text-align: center; padding: var(--s-64) var(--s-40); }
.focus-empty .glass-panel .page-title, .focus-empty .glass-panel .page-title b, body.focus.focus--glass .page-title, body.focus.focus--glass .page-title b { color: var(--on-gradient); }
.focus-empty .glass-panel p { color: var(--on-gradient-2); max-width: 420px; margin: var(--s-12) auto var(--s-32); }
.focus .toasts { bottom: var(--s-24); }

/* Login: merkvlak links, formulier rechts */
body.focus--auth .focus-top { display: none; }
body.focus--auth .focus-main { padding: 0; }
.auth { display: grid; grid-template-columns: minmax(360px, 5fr) 7fr; min-height: 100vh; }
.auth-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-40);
  padding: var(--s-40) var(--s-48);
  background: var(--gradient);
  color: var(--on-gradient);
  overflow: hidden;
}
.auth-brand .wordmark { color: var(--on-gradient); font-size: 20px; }
.auth-brand .wordmark img { height: 22px; }
.auth-kicker { margin: 0 0 var(--s-12); font-size: 13px; font-weight: 500; color: var(--on-gradient-2); }
.auth-statement { margin: 0; max-width: 440px; font-size: 40px; line-height: 1.05; letter-spacing: -0.03em; font-weight: 500; text-wrap: balance; }
.auth-statement .light { font-weight: 300; }
.auth-brand-foot { margin: 0; font-size: 13px; color: var(--on-gradient-2); }
.auth-main { display: grid; place-items: center; padding: var(--s-48) var(--s-24); background: var(--bg-2); color: var(--fg); }
.auth-box { width: 100%; max-width: 400px; }
.auth-title { margin: 0; font-size: 32px; line-height: 1.05; letter-spacing: -0.03em; font-weight: 500; }
.auth-lead { margin: var(--s-8) 0 var(--s-32); color: var(--fg-2); font-size: 15px; }
.auth-form { display: grid; gap: var(--s-20); }
.auth-field { display: grid; gap: 6px; }
.auth-field label { font-size: 14px; font-weight: 500; color: var(--fg); }
body.focus .auth-field input { width: 100%; height: 46px; padding: 0 14px; background: var(--bg); border-radius: var(--r-field); transition: background 120ms; }
body.focus .auth-field input:hover { background: var(--bg-3); }
body.focus .auth-field input:focus { background: var(--accent-bg); }
body.focus .auth-field:has(.auth-field-error) input { background: color-mix(in srgb, var(--bad) 10%, var(--bg-2)); }
body.focus .auth-field input[autocomplete="one-time-code"] { font-family: var(--mono); font-size: 20px; letter-spacing: 0.24em; height: 52px; }
.auth-password { position: relative; }
body.focus .auth-password input { padding-right: 76px; }
body.focus .auth-reveal { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); padding: 5px 10px; font-size: 13px; font-weight: 500; border: none; background: none; color: var(--fg-2); border-radius: var(--r-sm); }
body.focus .auth-reveal:hover { background: var(--bg-2); color: var(--fg); }
.auth-field-error { margin: 0; font-size: 13px; color: var(--bad); }
.auth-error { display: flex; gap: var(--s-8); align-items: flex-start; margin: 0; padding: var(--s-12) var(--s-16); border-radius: var(--r-btn); font-size: 14px; line-height: 1.45; color: var(--fg); background: color-mix(in srgb, var(--bad) 10%, transparent); }
.auth-error svg { flex: none; margin-top: 2px; color: var(--bad); }
.auth-error[hidden], [data-passkey][hidden] { display: none; }
.auth-passkey-login { margin-bottom: var(--s-12); }
body.focus .auth-submit { width: 100%; height: 46px; justify-content: center; padding: 0 18px; font-size: 15px; font-weight: 500; margin-top: var(--s-4); }
.auth-note { margin: var(--s-32) 0 0; padding-top: var(--s-20); color: var(--fg-2); font-size: 14px; }
.auth-step, .auth-status { margin: 0 0 var(--s-12); font-size: 13px; font-weight: 500; color: var(--accent); }
.auth-status { display: inline-flex; align-items: center; gap: 6px; color: var(--ok-fg); }
.auth-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.auth-lead strong { color: var(--fg); font-weight: 500; }
.auth-hint { margin: -8px 0 0; font-size: 13px; color: var(--fg-2); }
.auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-12); }
body.focus .auth-secondary { width: 100%; height: 46px; justify-content: center; font-size: 15px; font-weight: 500; }
a.auth-submit, a.auth-secondary { text-decoration: none; }
a.auth-submit:hover, a.auth-submit:visited { text-decoration: none; color: var(--on-accent); }
.auth-alt { margin: var(--s-24) 0 0; font-size: 14px; color: var(--fg-2); }
body.focus .auth-link { display: inline; padding: 0; border: none; background: none; font-size: 14px; color: var(--accent); }
body.focus .auth-link:hover { background: none; text-decoration: underline; }
.auth-note--plain { padding-top: 0; margin: 0 0 var(--s-24); }
.auth-error--block { margin-bottom: var(--s-20); }
body.focus .auth-google { gap: 10px; }
.auth-divider { display: flex; align-items: center; gap: var(--s-12); margin: var(--s-20) 0; font-size: 13px; color: var(--fg-3); }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; }
.auth-steps { margin: 0 0 var(--s-24); padding: 0; list-style: none; counter-reset: step; display: grid; gap: var(--s-12); font-size: 14px; line-height: 1.5; color: var(--fg-2); }
.auth-steps li { counter-increment: step; display: grid; grid-template-columns: 24px 1fr; gap: var(--s-12); }
.auth-steps li::before { content: counter(step); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 500; color: var(--accent); background: var(--accent-bg); }
.auth-qr { display: flex; align-items: center; gap: var(--s-20); padding: var(--s-16); margin: 0 0 var(--s-24); background: var(--bg-2); border-radius: var(--r-card); }
.auth-qr .qr { flex: none; width: 132px; height: 132px; padding: 6px; background: var(--white); border-radius: var(--r-sm); }
.auth-qr .qr svg { display: block; width: 100%; height: 100%; }
.auth-secret { display: grid; gap: 4px; min-width: 0; }
.auth-secret span { font-size: 13px; font-weight: 500; color: var(--fg-2); }
.auth-secret code { font-family: var(--mono); font-size: 13px; line-height: 1.6; color: var(--fg); overflow-wrap: anywhere; user-select: all; }
.auth-warning { margin: 0 0 var(--s-16); padding: var(--s-12) var(--s-16); border-radius: var(--r-btn); font-size: 14px; font-weight: 500; background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn-fg); }
.auth-codes { list-style: none; margin: 0 0 var(--s-24); padding: var(--s-16); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8) var(--s-16); border-radius: var(--r-card); background: var(--bg-2); }
.auth-codes code { font-family: var(--mono); font-size: 14px; letter-spacing: 0.04em; color: var(--fg); }
@media (max-width: 860px) {
  .auth { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .auth-brand { padding: var(--s-20) var(--s-16) var(--s-32); gap: var(--s-24); }
  .auth-statement { font-size: 26px; }
  .auth-brand-foot { display: none; }
  .auth-row { grid-template-columns: 1fr; }
  .auth-main { place-items: start center; padding: var(--s-32) var(--s-16) var(--s-48); }
}

@media (max-width: 760px) {
  body.shell { --sidebar-w: 0px; }
  body.shell .sidebar { display: none; }
  body.shell.sidebar-open { --sidebar-w: min(248px, calc(100vw - 88px)); }
  body.shell.sidebar-open .sidebar { display: block; }
  .peek, .peek.full { width: calc(100vw - var(--activity-w)); }
  .peek-body .card-doc, .card-doc, .doc { padding: var(--s-24) var(--s-16) var(--s-48); }
  .page-head, .toolbar, .table-wrap, .metrics, .gallery, .calendar { padding-left: 16px; padding-right: 16px; }
  .props, .f-card .props { grid-template-columns: 1fr; }
  .focus-top { padding: var(--s-12) var(--s-16); flex-wrap: wrap; gap: var(--s-8); }
  .focus-top nav { gap: 2px; }
  .focus-top nav .btn-ghost span, .focus-top nav button span { display: none; }
  .focus-tab { padding: 6px 8px; }
  .view-as-bar { padding: var(--s-8) var(--s-16); }
  .focus-main { padding: var(--s-24) var(--s-16) var(--s-64); }
  .glass-panel { padding: var(--s-24); }
  .palette-btn span { display: none; }
}

/* Documenten met versies: klantprofiel en instructies (templates/docs/) */
.docs {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr) 200px;
  gap: 0 var(--s-24);
  align-items: start;
  padding: 0 var(--s-24) var(--s-64);
  max-width: 1440px;
  width: 100%;
}
.docs:not(:has(.docs-toc)) { grid-template-columns: 248px minmax(0, 1fr); }
.docs-nav, .docs-toc { position: sticky; top: 0; max-height: calc(100vh - var(--header-h) - var(--status-h)); overflow: auto; padding: 24px 0 32px; }
.docs-intro { padding: 0 8px 8px; }
.docs-intro p { color: var(--fg-2); font-size: 12.5px; line-height: 1.5; margin: 8px 0 0; }
.docs-nav h4, .docs-toc h4 {
  font-size: 13px; font-weight: 500; color: var(--fg-3);
  margin: 20px 8px 4px;
}
.docs-nav ul, .docs-toc ul { list-style: none; margin: 0; padding: 0; }
.docs-nav li a {
  display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: var(--r-xs);
  color: var(--fg-2);
}
.docs-nav li a .i { color: var(--fg-3); }
.docs-nav li a:hover { background: var(--bg-2); color: var(--fg); text-decoration: none; }
.docs-nav li a.active { background: var(--accent-bg); color: var(--fg); font-weight: 500; }
.docs-nav li a.active .i { color: var(--accent); }
.docs-nav .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docs-nav .meta { color: var(--fg-3); font-size: 11px; font-variant-numeric: tabular-nums; font-weight: 400; }
.docs-none { padding: 4px 8px; }
.docs-add { margin: 12px 0 0; width: 100%; justify-content: flex-start; gap: 8px; color: var(--fg-2); }

.docs-main { min-width: 0; margin-top: var(--s-24); padding: var(--s-32); background: var(--bg); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.docs-head { margin: 0 0 24px; padding-bottom: 20px; }
.docs-head .kicker { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; color: var(--fg-3); font-size: 12px; margin-bottom: 8px; }
.docs-head .kicker a { color: var(--fg-2); }
.docs-title-row { display: flex; align-items: flex-start; gap: 16px; }
.docs-title { font-family: var(--font-display); font-size: 32px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.05; margin: 0; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.docs-edit-btn { flex: none; display: inline-flex; gap: 6px; align-items: center; margin-top: 4px; }
.docs-desc { color: var(--fg-2); font-size: 14px; line-height: 1.55; margin: 10px 0 0; max-width: 68ch; }
.docs-note, .docs-usage { display: flex; gap: 6px; align-items: flex-start; color: var(--fg-2); font-size: 12.5px; margin: 10px 0 0; }
.docs-note .i, .docs-usage .i { margin-top: 2px; color: var(--fg-3); }
.docs-usage.tone-warn, .docs-usage.tone-warn .i { color: var(--warn-fg); }
.docs-usage code { font-family: var(--mono); font-size: 11.5px; }

.docs-body { font-size: 15px; line-height: 1.7; max-width: 72ch; }
.docs-body h1 { font-size: 22px; margin: 32px 0 10px; }
.docs-body h2 { font-size: 19px; margin: 36px 0 10px; padding-top: 4px; }
.docs-body h3 { font-size: 16px; margin: 24px 0 6px; }
.docs-body > :first-child { margin-top: 0; }
.docs-body li { margin: 2px 0; }
.docs-body table { width: 100%; font-size: 13.5px; margin: 0 0 14px; }
.docs-body th { background: var(--bg-2); text-align: left; font-weight: 500; }
.docs-body pre { font-size: 12.5px; }
.markdown [id^="h-"] { scroll-margin-top: 16px; }
.docs-empty { background: var(--bg-2); border-radius: var(--r-card); padding: 32px; text-align: center; color: var(--fg-2); }
.docs-empty p { margin: 0 0 12px; }
.docs-empty button { display: inline-flex; gap: 6px; align-items: center; }
.docs-empty--page { margin-top: 24px; }

.docs-toc { padding-top: 40px; }
.docs-toc h4 { margin-top: 0; }
.docs-toc li a { display: block; padding: 3px 8px; border-radius: var(--r-xs); color: var(--fg-2); font-size: 12.5px; line-height: 1.4; }
.docs-toc li.lvl-3 a { padding-left: 20px; font-size: 12px; color: var(--fg-3); }
.docs-toc li a:hover { color: var(--fg); background: var(--bg-3); text-decoration: none; }
.docs-toc li a.active { color: var(--accent); background: var(--accent-bg); }

/* Editor */
.docs-editor { display: flex; flex-direction: column; gap: 10px; }
.editor-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.editor-bar .tabs a { cursor: pointer; }
.editor-hint kbd { font-size: 10.5px; }
.editor-panes { display: grid; gap: 16px; }
.editor-panes textarea {
  min-height: 60vh; font-family: var(--mono); font-size: 13px; line-height: 1.6; tab-size: 2;
  padding: 16px 18px; border-radius: var(--r-card); resize: vertical; background: var(--bg);
}
.editor-preview {
  display: none; min-height: 60vh; box-shadow: var(--shadow-card); border-radius: var(--r-card);
  padding: 20px 24px; font-size: 15px; line-height: 1.7; overflow: auto; background: var(--bg);
}
.editor-panes[data-mode="preview"] textarea { display: none; }
.editor-panes[data-mode="preview"] .editor-preview { display: block; }
.editor-panes[data-mode="split"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.editor-panes[data-mode="split"] .editor-preview { display: block; max-height: 75vh; position: sticky; top: 12px; }
.editor-panes[data-mode="split"] textarea { min-height: 75vh; }
.editor-foot {
  display: flex; gap: 8px; align-items: center; position: sticky; bottom: 0; z-index: 2;
  padding: 12px 0; background: var(--bg);
}
.editor-foot input { flex: 1; min-width: 0; }
.editor-foot button { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.docs.is-editing { grid-template-columns: 248px minmax(0, 1fr); }
.docs.is-editing .docs-toc { display: none; }

/* Geschiedenis en verschil */
.docs-history-head { margin: 0 0 20px; }
.docs-history-head p { margin: 8px 0 0; }
.versions { list-style: none; margin: 0; padding: var(--s-8); background: var(--bg); box-shadow: var(--shadow-card); border-radius: var(--r-card); overflow: hidden; }
.versions li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 14px; border-radius: var(--r-sm); }
.versions li:hover { background: var(--bg-2); }
.versions li.is-current { background: color-mix(in srgb, var(--ok) 5%, transparent); }
.versions .pick { display: flex; gap: 6px; }
.versions .pick input { accent-color: var(--accent); margin: 0; }
.versions .line { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.versions .note { color: var(--fg-2); margin-top: 2px; overflow-wrap: anywhere; }
.versions .act { display: flex; gap: 4px; }
.versions-submit { display: flex; gap: 12px; align-items: center; margin-top: 12px; }
.diff-stats { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--fg-3); }
.diff-add-n { color: var(--ok-fg); font-weight: 500; font-variant-numeric: tabular-nums; }
.diff-del-n { color: var(--bad); font-weight: 500; font-variant-numeric: tabular-nums; }
.diff { font-family: var(--mono); font-size: 12.5px; line-height: 1.6; background: var(--bg-2); border-radius: var(--r-card); overflow: auto; padding: 8px 0; }
.diff > div { padding: 0 16px 0 36px; position: relative; white-space: pre-wrap; overflow-wrap: anywhere; min-height: 1.6em; }
.diff .sign { position: absolute; left: 14px; color: var(--fg-3); user-select: none; }
.diff-add { background: color-mix(in srgb, var(--ok) 13%, transparent); }
.diff-add .sign { color: var(--ok-fg); }
.diff-del { background: color-mix(in srgb, var(--bad) 11%, transparent); }
.diff-del .sign { color: var(--bad); }
.diff-ctx { color: var(--fg-2); }
.diff-hunk { color: var(--fg-3); background: var(--bg-2); margin: 6px 0; text-align: center; padding: 0 16px !important; }

@media (max-width: 1180px) {
  .docs, .docs:not(:has(.docs-toc)) { grid-template-columns: 220px minmax(0, 1fr); }
  .docs-toc { display: none; }
  .wide-only { display: none !important; }
}
@media (max-width: 760px) {
  .docs, .docs:not(:has(.docs-toc)), .docs.is-editing { grid-template-columns: minmax(0, 1fr); padding: 0 16px 48px; }
  .docs-nav { position: static; max-height: none; padding-bottom: 0; }
  .docs-nav ul { display: flex; flex-wrap: wrap; gap: 4px; }
  .docs-nav li a { background: var(--bg-2); border-radius: var(--r-pill); padding: 3px 10px; }
  .docs-nav li a .i, .docs-nav .meta { display: none; }
  .docs-title { font-size: 22px; }
  .editor-foot { flex-wrap: wrap; }
  .editor-foot input { flex-basis: 100%; }
  .versions li { grid-template-columns: auto minmax(0, 1fr); }
  .versions .act { grid-column: 2; }
}

/* Klantomgeving (ruime layout) */
body.focus .docs { padding: 0; margin: 0 auto; }
body.focus .focus-main:has(.docs) { padding-top: var(--s-16); }

/* Privé to-do lijst */
.todo-add { display: flex; gap: 8px; margin: 0 0 8px; }
.todo-add input[type="text"] { flex: 1; min-width: 0; }
.todo-add button { display: inline-flex; gap: 6px; align-items: center; }
.todo-items { list-style: none; margin: 0; padding: 0; }
.todo-item { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.todo-item > form { display: contents; }
.todo-fields { display: contents; }
.todo-item .todo-title { flex: 1; min-width: 0; background: none; }
.todo-item .todo-title:hover { background: var(--bg-2); }
.todo-item .todo-due { width: 140px; background: none; color: var(--fg-2); }
.todo-item .todo-due:hover { background: var(--bg-2); }
.todo-item.overdue .todo-due { color: var(--bad); }
.todo-item.done .todo-title { color: var(--fg-3); text-decoration: line-through; }
.todo-done summary { cursor: pointer; list-style: none; }
.todo-done > form { margin-top: 8px; }
@media (max-width: 560px) {
  .todo-add { flex-wrap: wrap; }
  .todo-item .todo-due { width: 118px; }
}

/* Make it Flow: labels in Geist, zin-hoofdletters, 12 tot 13px, Medium. Geist Mono alleen voor
   ID's, code en tijdstempels, met vaste cijferbreedte. */
.section-title, .docs-nav h4, .docs-toc h4, .user-menu-head,
.auth-step, .auth-status, .auth-secret span {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.bcard .meta .mono, .bcard .meta .deadline, .bcard .meta span[title="Datum"], .bcard .meta span[title="Laatst gewijzigd"],
kbd, .mono, code, pre, samp {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Make it Flow: het linkermenu (activity bar en zijbalk) is licht, op het canvas (bg-2), zonder rand.
   Actief = witte pil met schaduw. Donker volgt de donkere tokens. */
.tree .soon, .activity .soon { opacity: 0.6; }   /* binnenkort: uitgeschakeld */

/* Make it Flow: klanten bovenin, als logo's. Horizontaal scrollbaar op smalle schermen. */
.clientbar { display: flex; align-items: center; gap: 4px; margin-left: 12px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.clientbar::-webkit-scrollbar { display: none; }
.clientbar-item { flex: none; display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: var(--r-pill); color: var(--fg-2); font-size: 13px; font-weight: 500; text-decoration: none; opacity: 0.55; transition: opacity 180ms var(--ease-out), background 180ms var(--ease-out); }
.clientbar-item img { height: 16px; width: auto; max-width: 110px; object-fit: contain; display: block; }
.clientbar-item:hover { opacity: 1; background: var(--bg-2); text-decoration: none; }
.clientbar-item.active { opacity: 1; background: var(--bg-2); color: var(--fg); }
:root[data-theme="dark"] .clientbar-item img { filter: brightness(0) invert(1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .clientbar-item img { filter: brightness(0) invert(1); } }
.tree--flat { padding-top: 2px; }
.sidebar-hint { margin: 12px 8px; font-size: 12.5px; line-height: 1.5; color: var(--fg-2); }
@media (max-width: 860px) {
  .header:has(.clientbar) { flex-wrap: wrap; height: auto; min-height: var(--header-h); row-gap: 4px; padding-bottom: 6px; }
  .clientbar { order: 10; flex-basis: 100%; margin-left: 0; }
}

/* Make it Flow: ook in de klantomgeving altijd Geist. De huisstijl van de klant (brand.py, inline op <html>)
   mag de kleuren zetten, maar --font en --font-display worden hier op body teruggezet naar Geist. */
body.focus { --font: var(--font-base); --font-display: var(--font-base); font-family: var(--font); }
/* Klantomgeving met eigen huisstijl (brand.py zet --accent inline op <html>): de primaire knop volgt de klantkleur. */
:root[style*="--accent"] .btn-primary, :root[style*="--accent"] button.primary { background: var(--accent); }
:root[style*="--accent"] .btn-primary:hover, :root[style*="--accent"] button.primary:hover { background: var(--accent-hover); }

/* Klantlogo's in de kopbalk: één kleur, in contrast met de modus. Licht: bijna-zwart. Donker: wit. */
.clientbar-item img { filter: brightness(0); }
:root[data-theme="dark"] .clientbar-item img { filter: brightness(0) invert(1); }

/* One collapsible navigation column at every viewport size. */
body.shell:not(.nav-top) { --activity-w: 0px; --sidebar-w: min(248px, 55vw); }
body.shell:not(.nav-top) > .activity { display: none; }
body.shell:not(.nav-top) .sidebar { display: flex; flex-direction: column; min-width: 0; }
body.shell:not(.nav-top).sidebar-collapsed { --activity-w: 44px; --sidebar-w: 0px; }
body.shell:not(.nav-top).sidebar-collapsed > .activity { display: flex; }
body.shell:not(.nav-top).sidebar-collapsed > :is(.sidebar, .side-menu) { display: none; }
.sysnav { margin-top: auto; padding-top: 16px; }
.sysnav kbd { margin-left: auto; background: transparent; color: var(--fg); }
.side-menu { display: none; }
body.shell:not(.nav-top) > .side-menu {
  grid-area: side; display: flex; flex-direction: column; min-width: 0; overflow: auto; font-size: 14px; padding: 0 var(--s-12) var(--s-24);
  background: var(--bg-2); color: var(--fg-2);
}
body.shell:not(.nav-top) > .side-menu .sidebar-head { background: var(--bg-2); }
body.shell:not(.nav-top):has(> .side-menu) .header { padding-left: var(--s-8); }
.side-menu h4 { display: flex; align-items: center; justify-content: space-between; margin: var(--s-16) var(--s-12) var(--s-4); font-size: 12px;
  font-weight: 500; color: var(--fg-3); }

/* Kopbalk: alleen klantlogo's en zoeken. Paginaknoppen (nieuwe opdracht, weergavetabs) staan rechts naast de
   paginatitel, in de pagina zelf. */
.page-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; padding: 16px 24px 0; min-height: 36px; box-sizing: content-box; }
.page-actions:empty { display: none; }
/* Staat er direct een paginatitel onder, dan komt die op dezelfde hoogte, links van de knoppen. */
.page-actions:not(:empty) + .page-head { margin-top: -36px; padding-top: 16px; padding-right: 240px; }
@media (max-width: 760px) {
  .page-actions { justify-content: flex-start; padding: 12px 16px 0; }
  .page-actions:not(:empty) + .page-head { margin-top: 0; padding-right: 16px; }
}

/* Rechtsboven: thema-knop en de ingelogde gebruiker. */
.header .theme-btn { flex: none; }
.user-menu[data-place="top"] { flex: none; }
.user-chip { display: flex; align-items: center; gap: 8px; padding: 3px 10px 3px 3px; border-radius: var(--r-pill); }
.user-chip:hover { background: var(--bg-2); }
.user-chip .avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 500; }
.user-chip .who { display: flex; flex-direction: column; line-height: 1.15; }
.user-chip .who b { font-size: 12.5px; font-weight: 500; color: var(--fg); }
.user-chip .who small { font-size: 11px; color: var(--fg-2); }
.user-menu[data-place="top"] .user-menu-panel { top: calc(var(--header-h) + 4px); bottom: auto; left: auto; right: 12px; }
.user-menu-foot { margin-top: 4px; padding-top: 4px; }
.user-menu-foot button { justify-content: flex-start !important; gap: 8px; }
@media (max-width: 760px) { .user-chip .who { display: none; } .user-chip { padding: 3px; } }

/* Klantlogo's: geen achtergrond, geen verschil tussen actief en niet-actief, even groot als het woordmerk
   linksboven. Eén grijswaarde voor alle logo's en namen (bijna-zwart op licht, wit op donker). */
.clientbar-item, .clientbar-item:hover, .clientbar-item.active { background: none; opacity: 1; color: var(--fg); padding: 0 10px; height: var(--header-h); }
.clientbar-item img { height: 18px; max-width: 140px; }
.clientbar-item span { font-size: 16px; font-weight: 500; letter-spacing: -0.03em; }

/* Inloggen: wachtwoord vergeten en account aanvragen onder de uitnodigingsregel. */
.auth-links { display: flex; gap: var(--s-20); margin: var(--s-12) 0 0; font-size: 14px; }
.auth-links a { color: var(--accent); }
/* Klantlogo's in de klantomgeving: zelfde behandeling als de klantenbalk, één tint in contrast met de modus. */
.focus-top .client img, .focus-top .wordmark--client img { filter: brightness(0); }
:root[data-theme="dark"] .focus-top .client img, :root[data-theme="dark"] .focus-top .wordmark--client img { filter: brightness(0) invert(1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .focus-top .client img, :root:not([data-theme="light"]) .focus-top .wordmark--client img { filter: brightness(0) invert(1); } }

/* Licht/donker-knop: toont de huidige stand (zon = licht, maan = donker); bij hover het icoon van de stand waar je heen gaat. */
.theme-btn .ic-moon { display: none; }
:root[data-theme="dark"] .theme-btn .ic-sun { display: none; }
:root[data-theme="dark"] .theme-btn .ic-moon { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn .ic-sun { display: none; }
  :root:not([data-theme="light"]) .theme-btn .ic-moon { display: inline; }
}
.theme-btn:hover .ic-sun, .theme-btn:focus-visible .ic-sun { display: none; }
.theme-btn:hover .ic-moon, .theme-btn:focus-visible .ic-moon { display: inline; }
:root[data-theme="dark"] .theme-btn:hover .ic-sun, :root[data-theme="dark"] .theme-btn:focus-visible .ic-sun { display: inline; }
:root[data-theme="dark"] .theme-btn:hover .ic-moon, :root[data-theme="dark"] .theme-btn:focus-visible .ic-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn:hover .ic-sun { display: inline; }
  :root:not([data-theme="light"]) .theme-btn:hover .ic-moon { display: none; }
}

/* Begroeting rechtsboven: klikt naar de instellingen (later het persoonlijke profiel). */
.greeting { flex: none; font-size: 13px; color: var(--fg-2); white-space: nowrap; padding: 4px 8px; border-radius: var(--r-pill); }
.greeting b { font-weight: 500; color: var(--fg); }
.greeting:hover { background: var(--bg-2); text-decoration: none; }
@media (max-width: 760px) { .greeting { display: none; } }

/* Klantweergave en uitloggen onderin het menu links. */
.sysnav .user-menu > summary, .sysnav .nav-btn { display: flex; align-items: center; gap: var(--s-8); width: 100%; min-height: 36px; padding: 0 var(--s-12); border: 0; border-radius: var(--r-md); background: none; color: var(--fg-2); font: inherit; cursor: pointer; text-align: left; }
.sysnav .user-menu > summary:hover, .sysnav .nav-btn:hover { background: var(--bg-3); color: var(--fg); }
.sysnav form { margin: 0; }
.user-menu[data-place="side"] .user-menu-panel {
  bottom: calc(var(--status-h) + 8px); left: calc(var(--sidebar-w) + 8px);
  background: var(--bg); color: var(--fg);
}

/* Dienstgroep in het menu (LinkedIn): klapt open, subonderdelen ingesprongen. */
.svc > summary { display: flex; align-items: center; gap: var(--s-8); min-height: 36px; padding: 0 var(--s-12); border-radius: var(--r-md); color: var(--fg); cursor: pointer; list-style: none; }
.svc > summary::-webkit-details-marker { display: none; }
.svc > summary:hover { background: var(--bg-3); }
.svc > summary .caret { margin-left: auto; transition: transform 180ms var(--ease-out); }
.svc[open] > summary .caret { transform: rotate(90deg); }
.svc-sub { list-style: none; margin: 2px 0 4px; padding: 0 0 0 22px; }
.svc-sub a, .svc-sub .soon { color: var(--fg-3); }
.svc-sub a:hover, .svc-sub a.active { color: var(--fg); }

/* Klantkiezer: alleen de huidige klant bovenin, zonder vlak eromheen; klikken opent de lijst en draait het pijltje. Logo's in één tint. */
.clientpick-current:hover, .clientpick-current:focus, .clientpick-current:active { background: none; box-shadow: none; outline: none; }
.clientpick-current:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--r-xs); }
.clientpick { position: relative; margin-left: 8px; flex: none; }
.clientpick-current { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0; border: 0; background: none; color: var(--fg); cursor: pointer; border-radius: var(--r-pill); }
.clientpick-current img { height: 18px; width: auto; max-width: 140px; object-fit: contain; display: block; }
.clientpick-current span { font-size: 16px; font-weight: 500; letter-spacing: -0.03em; }
.clientpick-current .caret { transition: transform 400ms var(--ease-flow); transform: rotate(90deg); color: var(--fg-2); }
/* "Alle klanten" alleen als er geen klant actief is (geen logo of naam ervoor) */
.clientpick-current:has(> img, > span:not(.clientpick-all)) .clientpick-all { display: none; }
.clientpick-menu { display: none; position: absolute; top: 100%; left: 0; z-index: 50; min-width: 220px; padding: 6px; margin-top: 4px;
  background: var(--bg); border-radius: var(--r-card); box-shadow: var(--shadow-float); }
.clientpick::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px; }  /* brug, zodat hover niet wegvalt */
.clientpick:focus-within .clientpick-menu { display: grid; gap: 2px; }
.clientpick:focus-within .caret { transform: rotate(-90deg); }
.clientpick-item { display: flex; align-items: center; height: 40px; padding: 0 12px; border-radius: var(--r-xs); color: var(--fg); text-decoration: none; }
.clientpick-item:hover, .clientpick-item.active { background: var(--bg-2); text-decoration: none; }
.clientpick-item img { height: 18px; width: auto; max-width: 150px; object-fit: contain; }
.clientpick-item span { font-size: 15px; font-weight: 500; letter-spacing: -0.02em; }
.clientpick-home { margin-top: 4px; }
.clientpick-home span { font-size: 13px; font-weight: 400; color: var(--fg-2); }
.clientpick img { filter: brightness(0); }
:root[data-theme="dark"] .clientpick img { filter: brightness(0) invert(1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .clientpick img { filter: brightness(0) invert(1); } }
@media (max-width: 860px) { .header:has(.clientpick) { flex-wrap: nowrap; height: var(--header-h); padding-bottom: 0; } }

/* Kalender: huidige week licht getint (Moss), vandaag iets sterker; za en zo een fractie donkerder dan
   gewone dagen, lichter dan dagen buiten de maand. Kaartjes met titel en profielnaam. */
.cal-row:not(.cal-weekdays):has(.cal-day.today) { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.cal-day.today { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.cal-row:not(.cal-weekdays) .cal-day:nth-child(n+6):not(.outside) { background: color-mix(in srgb, var(--bg-2) 55%, transparent); }
.cal-row:not(.cal-weekdays):has(.cal-day.today) .cal-day:nth-child(n+6):not(.outside):not(.today) { background: color-mix(in srgb, var(--bg-2) 45%, color-mix(in srgb, var(--accent) 6%, transparent)); }
.cal-weekdays div:nth-child(n+6) { color: var(--fg-3); }
.cal-card { align-items: flex-start; }
.cal-card .dot { margin-top: 5px; }
.cal-card .cc-body { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.cal-card .cc-body .t { font-weight: 500; }
.cal-card .who { font-size: 11px; color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Postpreview (Content): de post zoals op het kanaal. */
.post-preview { max-width: 560px; margin: 12px 0 20px; background: var(--bg); border-radius: var(--r-card); box-shadow: var(--shadow-card); overflow: hidden; }
.pp-head { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px 6px; }
.pp-avatar { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font-weight: 500; font-size: 16px; }
.pp-avatar--sm { width: 32px; height: 32px; font-size: 13px; }
.pp-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.pp-who b { font-weight: 500; font-size: 14px; }
.pp-who span { font-size: 12px; color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-when { display: inline-flex; align-items: center; gap: 4px; }
.pp-link { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 500; color: var(--accent); white-space: nowrap; }
.pp-text { padding: 4px 16px 12px; font-size: 14px; line-height: 1.5; }
.pp-text .markdown p { margin: 0 0 8px; }
.pp-stats { display: flex; justify-content: space-between; gap: 12px; padding: 10px 16px 4px; font-size: 12.5px; color: var(--fg-2); }
.pp-react { display: inline-flex; align-items: center; gap: 4px; }
.pp-likes { display: inline-flex; }
.pp-likes i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--bg); background: var(--react-like); }
.pp-likes i + i { margin-left: -4px; background: var(--react-love); }
.pp-views { padding: 0 16px 12px; font-size: 12px; color: var(--fg-2); }
.pp-comment { display: flex; gap: 8px; padding: 12px 16px 14px; }
.pp-comment > div { flex: 1; min-width: 0; background: var(--bg-2); border-radius: 0 12px 12px 12px; padding: 8px 12px; font-size: 13px; }
.pp-comment b { font-weight: 500; }
.pp-label { margin-left: 8px; font-size: 12px; font-weight: 500; color: var(--fg-2); }
.pp-comment p { margin: 4px 0 0; line-height: 1.45; }
/* De preview toont de tekst al; de bewerkknop blijft, de dubbele weergave niet. */
.card-doc:has(.post-preview) .body-view:not(.pp-text) { display: none; }
.more-props { margin: 4px 0 8px; }
.more-props > summary { cursor: pointer; font-size: 12.5px; color: var(--fg-2); padding: 4px 0; }
.post-place { display: flex; align-items: center; gap: 12px; margin: 8px 0 16px; }
.place-btn { padding: 8px 18px !important; font-size: 14px; }

/* Terug en verder, rechts naast het woordmerk in het menu. */
.sidebar-head .hist { margin-left: auto; display: inline-flex; gap: 2px; }
.sidebar-head .hist button { color: var(--fg-2); padding: 4px; border: 0; background: none; border-radius: var(--r-xs); }
.sidebar-head .hist button:hover { color: var(--fg); background: var(--bg-3); }

/* Licht/donker: zon en maan liggen op elkaar en draaien rustig in en uit. Vervangt het wisselen met display. */
.theme-btn { position: relative; width: 28px; height: 28px; padding: 0; display: inline-grid; place-items: center; }
.theme-btn svg { position: absolute; display: block !important; transition: transform 420ms var(--ease-out), opacity 300ms var(--ease-out); }
.theme-btn .ic-sun { opacity: 1; transform: rotate(0deg) scale(1); }
.theme-btn .ic-moon { opacity: 0; transform: rotate(-90deg) scale(0.6); }
:root[data-theme="dark"] .theme-btn .ic-sun { opacity: 0; transform: rotate(90deg) scale(0.6); }
:root[data-theme="dark"] .theme-btn .ic-moon { opacity: 1; transform: rotate(0deg) scale(1); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn .ic-sun { opacity: 0; transform: rotate(90deg) scale(0.6); }
  :root:not([data-theme="light"]) .theme-btn .ic-moon { opacity: 1; transform: rotate(0deg) scale(1); }
}
/* bij hover: het icoon van de stand waar je heen gaat */
:root:not([data-theme="dark"]) .theme-btn:hover .ic-sun { opacity: 0; transform: rotate(90deg) scale(0.6); }
:root:not([data-theme="dark"]) .theme-btn:hover .ic-moon { opacity: 1; transform: rotate(0deg) scale(1); }
:root[data-theme="dark"] .theme-btn:hover .ic-moon { opacity: 0; transform: rotate(-90deg) scale(0.6); }
:root[data-theme="dark"] .theme-btn:hover .ic-sun { opacity: 1; transform: rotate(0deg) scale(1); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-btn:hover .ic-moon { opacity: 0; transform: rotate(-90deg) scale(0.6); }
  :root:not([data-theme]) .theme-btn:hover .ic-sun { opacity: 1; transform: rotate(0deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .theme-btn svg { transition: none; } }

/* Carrousel in de postpreview: één slide per keer, in het formaat van de post (--ratio). */
.pp-carousel { --ratio: 1; position: relative; overflow: hidden; background: var(--bg-2); outline: none; }
.pp-track { display: flex; transition: transform 380ms var(--ease-out); }
.pp-slide { flex: 0 0 100%; margin: 0; aspect-ratio: var(--ratio); display: grid; place-items: center; background: var(--bg-2); overflow: hidden; }
.pp-slide img, .pp-slide canvas { width: 100%; height: 100%; object-fit: contain; display: block; }
.pp-file { display: inline-flex; align-items: center; gap: 8px; color: var(--fg); font-size: 13px; }
.pp-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.92); color: var(--ink); box-shadow: var(--shadow-card); opacity: 0; transition: opacity 180ms var(--ease-out); padding: 0; }
.pp-prev { left: 10px; } .pp-next { right: 10px; }
.pp-carousel:hover .pp-nav, .pp-carousel:focus-within .pp-nav { opacity: 1; }
.pp-carousel.at-start .pp-prev, .pp-carousel.at-end .pp-next, .pp-carousel.single .pp-nav { display: none; }
.pp-dots { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
.pp-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12); }
.pp-dots i.on { background: var(--white); }
.pp-count { position: absolute; top: 10px; right: 10px; padding: 2px 8px; border-radius: var(--r-pill); background: rgba(12, 15, 14, 0.6); color: var(--white); font-size: 12px; }
.pp-count:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .pp-track { transition: none; } }
.selector-actions { display: flex; gap: 4px; margin-top: 4px; padding-top: 4px; }
.selector-actions .selector-clear { flex: 1; margin: 0; }
.clientpick-item { font-size: 14px; font-weight: 500; letter-spacing: -0.01em; }
.clientpick-home { font-size: 13px; font-weight: 400; color: var(--fg-2); }
/* Shared website editor. */
.cms-filter, .cms-actions { display: flex; flex-wrap: wrap; gap: var(--s-12); align-items: end; margin-block: var(--s-16); }
.cms-filter label, .cms-field { display: grid; gap: var(--s-8); }
.cms-field { margin-block: var(--s-20); }
.cms-field input:not([type="checkbox"]), .cms-field textarea, .cms-field select { width: 100%; box-sizing: border-box; }
.cms-field input[type="checkbox"] { justify-self: start; }
.cms-field .faint { margin: 0; }
.cms-table { width: 100%; border-collapse: collapse; }
.cms-table th, .cms-table td { text-align: left; padding: var(--s-12); border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.cms-unpublish { margin-block: var(--s-24); }
.cms-editor .errorlist { color: var(--bad); }
.cms-body-editor { position: relative; min-width: 0; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--bg); }
.cms-body-editor:focus-within { border-color: var(--accent); }
.cms-formatbar { display: flex; flex-wrap: wrap; gap: var(--s-12); justify-content: space-between; align-items: center; padding: var(--s-8); border-bottom: 1px solid var(--line); background: var(--bg-2); border-radius: var(--r-card) var(--r-card) 0 0; }
.cms-formatbar[hidden], .cms-editor-tools[hidden] { display: none; }
.cms-editor-modes, .cms-editor-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
.cms-formatbar button { min-width: var(--s-32); }
.cms-formatbar button[aria-pressed="true"] { color: var(--accent); background: var(--accent-bg); }
.cms-prose { min-height: 320px; padding: var(--s-24); outline: none; overflow-wrap: anywhere; font-size: 16px; line-height: 1.75; }
.cms-prose > :first-child { margin-top: 0; }
.cms-prose > :last-child { margin-bottom: 0; }
.cms-prose p { margin-block: var(--s-12); }
.cms-prose h1, .cms-prose h2, .cms-prose h3 { margin: var(--s-24) 0 var(--s-12); line-height: 1.25; }
.cms-prose h1 { font-size: 30px; }
.cms-prose h2 { font-size: 24px; }
.cms-prose h3 { font-size: 20px; }
.cms-prose ul { list-style: disc; padding-left: var(--s-24); }
.cms-prose ol { list-style: decimal; padding-left: var(--s-24); }
.cms-prose li p { margin-block: var(--s-4); }
.cms-prose blockquote { border-left: 3px solid var(--accent); margin-inline: 0; padding-left: var(--s-20); color: var(--fg-2); }
.cms-prose pre { background: var(--bg-2); padding: var(--s-16); border-radius: var(--r-card); white-space: pre-wrap; }
.cms-prose code, .cms-body-editor textarea { font-family: var(--mono); }
.cms-prose img { display: block; max-width: 100%; height: auto; }
.cms-prose img.ProseMirror-selectednode { outline: 2px solid var(--accent); }
.cms-prose table { width: 100%; border-collapse: collapse; }
.cms-prose th, .cms-prose td { border: 1px solid var(--line); padding: var(--s-8); min-width: 40px; }
.cms-prose th { background: var(--bg-2); }
.cms-prose .selectedCell { background: var(--accent-bg); }
.cms-prose hr { border: 0; border-top: 1px solid var(--line); margin-block: var(--s-24); }
.cms-prose:has(> p:only-child > br:only-child)::before { content: attr(data-placeholder); position: absolute; color: var(--fg-3); pointer-events: none; }
.cms-body-editor textarea { border: 0; min-height: 320px; padding: var(--s-20); margin: 0; border-radius: 0 0 var(--r-card) var(--r-card); }
.cms-slash-menu { position: absolute; z-index: 30; width: min(280px, 100%); overflow-y: auto; padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--bg); box-shadow: var(--shadow-card-hover); }
.cms-slash-menu button { display: grid; gap: var(--s-4); width: 100%; padding: var(--s-8) var(--s-12); text-align: left; border: 0; background: transparent; box-shadow: none; }
.cms-slash-menu button span { color: var(--fg-2); font-size: 12px; }
.cms-slash-menu button[aria-selected="true"], .cms-slash-menu button:hover { background: var(--accent-bg); }
.cms-editor-dialog { max-width: min(440px, calc(100vw - 32px)); padding: var(--s-24); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--bg); color: var(--fg); }
.cms-editor-dialog label { display: grid; gap: var(--s-8); margin-block: var(--s-12); }
.cms-editor-dialog label[hidden] { display: none; }
.cms-editor-dialog::backdrop { background: var(--backdrop); }
@media (max-width: 760px) { .cms-table th:last-child, .cms-table td:last-child { display: none; } }

/* Scoreboard: functietitel onder de naam, geen Scheduled-alias. */
.scoreboard .sb-title { display: block; font-size: 11.5px; color: var(--fg-2); font-weight: 400; margin-top: 1px; }

/* Slepen om opzij te schuiven (bord, brede tabellen) en vegen in de carrousel. */
.board, .scroll-x { cursor: grab; }
.board .bcard, .board a, .board button, .scroll-x a, .scroll-x button { cursor: pointer; }
.board.dragging, .scroll-x.dragging { cursor: grabbing; user-select: none; }
.pp-carousel { touch-action: pan-y; cursor: grab; }
.pp-carousel img, .pp-carousel canvas { -webkit-user-drag: none; user-select: none; pointer-events: none; }

/* Startpagina: kop "Mijn week" zoals in de vorige portal, met begroeting, datum en een meldingsregel. */
.home-hero { margin: var(--s-24) var(--s-24) var(--s-16); padding: var(--s-24) var(--s-32) var(--s-32); border-radius: var(--r-card); background: var(--gradient); color: var(--on-gradient); }
.home-hero-top { display: flex; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: 12px; }
.home-hero-title { margin: 28px 0 4px; font-size: clamp(28px, 4vw, 40px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.05; }
.home-hero-sub { margin: 0; font-size: 14px; }
.home-alerts { display: grid; gap: var(--s-8); margin: 0 var(--s-24) var(--s-4); }
.home-alert { display: flex; align-items: center; gap: 12px; padding: var(--s-12) var(--s-12) var(--s-12) var(--s-16); border-radius: var(--r-card); background: var(--bg); box-shadow: var(--shadow-card); color: var(--fg); font-size: 14px; }
.home-alert:hover { text-decoration: none; box-shadow: var(--shadow-card-hover); }
.home-alert > span:nth-child(2) { flex: 1; }
.home-alert .dot { --c: var(--warn); }
.home-alert-btn { flex: none; }
@media (max-width: 760px) {
  .home-hero { margin: var(--s-16) var(--s-16) var(--s-12); padding: var(--s-20) var(--s-20) var(--s-24); }
  .home-alerts { margin: 0 var(--s-16) var(--s-4); }
}

.auth-passkeys { margin-top: var(--s-32); padding-top: var(--s-24); border-top: 1px solid var(--line); }
.auth-passkey-list { margin: 0 0 var(--s-20); padding: 0; list-style: none; display: grid; gap: var(--s-8); }
.auth-passkey-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--s-12); padding: var(--s-12) var(--s-16); border: 1px solid var(--line); border-radius: var(--r-btn); }
.auth-passkey-list span { display: grid; gap: 2px; min-width: 0; font-size: 14px; }
.auth-passkey-list small { color: var(--fg-2); font-size: 13px; }
.auth-passkey-list form { flex: none; }

/* Sidebar controls and a horizontally accessible footer on narrow screens. */
.sidebar-head { height: auto; flex-direction: column; align-items: stretch; padding: 12px 8px; gap: 12px; flex: none; }
.sidebar-brand { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sidebar-brand .wordmark { min-width: 0; overflow: hidden; }
.sidebar-brand .wordmark img { max-width: 100%; object-fit: contain; }
.sidebar-head .palette-btn { width: 100%; color: inherit; }
.sidebar-head .palette-btn kbd { margin-left: auto; }
.sidebar-toggle { flex: none; color: inherit; }
.activity > button[data-action="toggle-sidebar"] { position: relative; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; background: none; color: inherit; }
.activity > button:hover .tip, .activity > button:focus-visible .tip { opacity: 1; }
.statusbar { border-top: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.statusbar::-webkit-scrollbar { display: none; }
.statusbar > :not(.spacer) { flex-shrink: 0; }
@media (max-width: 760px) {
  .nav-top .activity { overflow-x: auto; flex-wrap: nowrap; }
}

/* Keep brand and navigation controls legible on the green menu surface. */
:is(.sidebar, .side-menu) .wordmark img { filter: brightness(0) invert(1); }
:is(.sidebar, .side-menu) .sidebar-toggle {
  color: var(--white);
  background: transparent;
  border-color: transparent;
}
:is(.sidebar, .side-menu) .sidebar-toggle:hover { background: rgba(255, 255, 255, 0.14); }
:is(.sidebar, .side-menu) h4 a { color: inherit; }

/* Menu groen zoals het portal-blok op de website: verloop met grain, tekst wit, actief onderdeel een witte pil
   met moss-600. Geldt voor de eigenaar en straks voor de klantweergave. */
body.shell:not(.nav-top) > :is(.sidebar, .side-menu),
body.shell:not(.nav-top) > :is(.sidebar, .side-menu) .sidebar-head {
  background: var(--gradient-menu); background-attachment: fixed;
}
:is(.sidebar, .side-menu) {
  --fg: var(--on-gradient); --fg-2: var(--on-gradient); --fg-3: var(--on-gradient); --bg-3: rgb(255 255 255 / 14%);
  color: var(--on-gradient);
}
:is(.sidebar, .side-menu) .wordmark { color: var(--on-gradient); }
:is(.sidebar, .side-menu) h4 { color: var(--on-gradient); opacity: 1; }
:is(.sidebar, .side-menu) :is(.tree a, .tree summary, .svc > summary, .sysnav .nav-btn, .sysnav .user-menu > summary) {
  color: var(--on-gradient); font-weight: 300; box-shadow: none;
  transition: background-color 400ms var(--ease-flow), font-weight 400ms var(--ease-flow);
}
:is(.sidebar, .side-menu) :is(.tree a, .tree summary, .svc > summary, .sysnav .nav-btn, .sysnav .user-menu > summary):hover {
  background: var(--menu-hover-bg); color: var(--on-gradient); font-weight: 500;
}
/* Actief: geen witte pil, maar een zacht glasvlak en Medium, zoals de actieve link op de website. */
:is(.sidebar, .side-menu) .tree a.active { background: var(--menu-active-bg); color: var(--on-gradient); font-weight: 500; }
:is(.sidebar, .side-menu) .tree a.active .count { color: var(--on-gradient); }
/* Een dienst met onderdelen (LinkedIn) licht als geheel op als je erin zit; het onderdeel zelf krijgt het actieve vlak. */
:is(.sidebar, .side-menu) .svc:has(a.active) { background: var(--menu-group-bg); border-radius: var(--r-md); padding-bottom: 4px; }
:is(.sidebar, .side-menu) .svc:has(a.active) > summary { font-weight: 500; }
:is(.sidebar, .side-menu) .svc:has(a.active) > summary:hover { background: transparent; }
/* Onderdelen van een dienst hangen aan een draad: een lijn onder het icoon die met een ronde hoek naar het onderdeel
   buigt, zoals een reactie onder een post. Actief is alleen Medium, zonder vlak. */
:is(.sidebar, .side-menu) .svc-sub { position: relative; margin: 0; padding: 0 4px 0 0; }
:is(.sidebar, .side-menu) .svc-sub > li.row { position: relative; }
:is(.sidebar, .side-menu) .svc-sub > li.row > a:first-child { padding-left: 36px; color: var(--on-gradient); }
:is(.sidebar, .side-menu) .svc-sub > li.row::before {
  content: ""; position: absolute; left: 19px; top: -4px; width: 11px; height: calc(50% + 4px); pointer-events: none;
  border-left: 1px solid var(--menu-thread); border-bottom: 1px solid var(--menu-thread); border-bottom-left-radius: 8px;
}
:is(.sidebar, .side-menu) .svc-sub > li.row:not(:last-child)::after {
  content: ""; position: absolute; left: 19px; top: 0; bottom: 0; border-left: 1px solid var(--menu-thread); pointer-events: none;
}
:is(.sidebar, .side-menu) .svc-sub a.active,
:is(.sidebar, .side-menu) .svc-sub a:hover { background: transparent; font-weight: 500; }
:is(.sidebar, .side-menu) .tree .add { color: var(--on-gradient); }
:is(.sidebar, .side-menu) .sidebar-head .hist button { color: var(--on-gradient); }
:is(.sidebar, .side-menu) .sidebar-head .hist button:hover { background: rgb(255 255 255 / 14%); color: var(--on-gradient); }
:is(.sidebar, .side-menu) .sidebar-hint { color: var(--on-gradient); }

/* Menu per klant: wat er nog niet is, staat er als "binnenkort", rustig en zonder hover. Een fallback-regel
   verdwijnt zodra dezelfde lijst een echte link heeft (zie _client_nav.html). */
:is(.sidebar, .side-menu) .tree .soon { font-weight: 300; color: var(--on-gradient); opacity: 1; }   /* tekst op kleur blijft volledig wit */
:is(.sidebar, .side-menu) .tree .soon em { margin-left: auto; padding: 2px 8px; border-radius: var(--r-pill); background: var(--menu-hover-bg); font-style: normal; font-size: 11px; font-weight: 400; }
:is(.sidebar, .side-menu) .svc-sub > li.row > .soon { padding-left: 36px; }
:is(.sidebar, .side-menu) .svc-sub:has(> li.row > a) > li.fallback,
:is(.sidebar, .side-menu) .nav-main:has(.nav-planning) > li.fallback-planning { display: none; }
:is(.sidebar, .side-menu) .nav-main { margin-top: var(--s-4); }
:is(.sidebar, .side-menu) .nav-services > li.svc-row:not(:has(.svc-sub > li)) { display: none; }   /* dienst die de klant niet heeft */
:is(.sidebar, .side-menu) .nav-services:not(:has(> li.svc-row .svc-sub > li)) { display: none; }
:is(.sidebar, .side-menu) h4:has(+ .nav-services:not(:has(> li.svc-row .svc-sub > li))) { display: none; }

/* Favorieten: ster bij hover, gevulde ster als favoriet; schuift links naast de plusknop als die er is. */
:is(.sidebar, .side-menu) .fav-btn {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0; border: 0; border-radius: var(--r-xs); background: none; color: var(--on-gradient); cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity 400ms var(--ease-flow), background-color 400ms var(--ease-flow);
}
:is(.sidebar, .side-menu) li.row:has(> a.add) > .fav-btn { right: 30px; }
:is(.sidebar, .side-menu) li.row:hover > .fav-btn, :is(.sidebar, .side-menu) .fav-btn:focus-visible { opacity: 1; pointer-events: auto; }
:is(.sidebar, .side-menu) .fav-btn:hover { background: var(--menu-hover-bg); }
:is(.sidebar, .side-menu) .fav-btn.on { opacity: 1; pointer-events: auto; }
:is(.sidebar, .side-menu) .svc-sub li.row:not(:hover) > .fav-btn.on, :is(.sidebar, .side-menu) .nav-main li.row:not(:hover) > .fav-btn.on,
:is(.sidebar, .side-menu) .sysnav li.row:not(:hover) > .fav-btn.on { opacity: 0; pointer-events: none; }   /* in het menu zelf alleen bij hover */
:is(.sidebar, .side-menu) li.row:hover > a:first-child .count { visibility: hidden; }
.nav-favs-wrap { padding-bottom: var(--s-4); }
.nav-favs > li.row { cursor: grab; }
.nav-favs > li.row.dragging { opacity: 0.5; }
.nav-favs > li.row.drop > a { background: var(--menu-hover-bg); }
.nav-favs .fav-client { margin-left: auto; padding-right: 26px; font-size: 11px; font-weight: 300; white-space: nowrap; }
.nav-favs > li.row > a:first-child { padding-right: 32px; }

/* LinkedIn-post op het bord: wie en wanneer bovenin, de titel, posttype en formaat als chips, na plaatsen de resultaten. */
.bcard .post-head { display: flex; align-items: center; gap: var(--s-8); min-width: 0; margin-bottom: var(--s-8); font-size: 13px; color: var(--fg-2); }
.bcard .post-avatar { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-bg); color: var(--fg-on-tint); font-size: 11px; font-weight: 500; text-transform: uppercase; }
.bcard .post-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); font-weight: 500; }
.bcard .post-when { margin-left: auto; flex: none; white-space: nowrap; font-family: var(--mono); font-size: 11.5px; color: var(--fg-2); }
.bcard .post-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--s-8); }
.bcard .post-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-pill); background: var(--bg-2); color: var(--fg-2); font-size: 12px; }
.bcard .post-chip--mono { font-family: var(--mono); font-size: 11px; }
.bcard .post-stats { display: flex; flex-wrap: wrap; gap: var(--s-12); margin-top: var(--s-8); font-size: 12px; color: var(--fg-2); }
.bcard .post-stats b { color: var(--fg); font-weight: 500; font-variant-numeric: tabular-nums; }

/* LinkedIn: één rij profielen in plaats van filters. Alles staat aan als er geen filter is ([hidden] van app.js). */
.profile-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.profile-pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 6px; border: 0; border-radius: var(--r-pill);
  background: var(--bg); color: var(--fg-2); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap;
  transition: background-color 400ms var(--ease-flow), color 400ms var(--ease-flow); }
.profile-pill--all { padding-left: 12px; }
.profile-pill input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.profile-pill:hover { color: var(--fg); }
.profile-pill .profile-dot { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-bg); color: var(--fg-on-tint); font-size: 11px; font-weight: 500; text-transform: uppercase; }
.profile-pill:not(.profile-pill--all) > span:not(.profile-dot):first-of-type { padding-left: 6px; }
/* Gekozen: alleen als er gefilterd is; anders is Alles de actieve. */
.profile-row:has(.profile-pill--all:not([hidden])) .profile-pill:has(input:checked) { background: var(--accent); color: var(--on-accent); }
.profile-row:has(.profile-pill--all:not([hidden])) .profile-pill:has(input:checked) .profile-dot { background: rgb(255 255 255 / 22%); color: var(--on-accent); }
.profile-row .profile-pill--all[hidden] { display: inline-flex; background: var(--accent); color: var(--on-accent); }
.page-summary { margin: calc(var(--s-8) * -1) var(--s-24) var(--s-16); max-width: 72ch; color: var(--fg-2); font-size: 15px; line-height: 1.5; }
.page-summary:empty { display: none; }
.page-summary.is-late::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--bad); vertical-align: 1px; }
.profile-row > .selector-btn, .profile-row > .profile-none { display: none; }
.profile-pill--none { padding-left: 12px; color: var(--fg-3); }
.toolbar:has(.profile-row) input[type="search"] { margin-left: auto; }
/* LinkedIn: de overige filters achter één knop, als paneel onder de knop. */
.filters-more { position: relative; margin-left: auto; }
.filters-more > summary { list-style: none; cursor: pointer; }
.filters-more > summary::-webkit-details-marker { display: none; }
.filters-more:has(.selector-btn.active) > summary { color: var(--accent); }
.filters-more-body { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; display: flex; flex-wrap: wrap; gap: 6px; width: max-content; max-width: 520px;
  padding: var(--s-12); border-radius: var(--r-card); background: var(--bg); box-shadow: var(--shadow-float); }
.toolbar:has(.profile-row) input[type="search"] { margin-left: 0; }

/* LinkedIn-bord: vijf smallere kolommen (Concept, In progress, Ready, Scheduled, Live). Leeg verschijnt alleen zonder kaarten. */
.board:has(> .column--group) .column { flex-basis: 236px; }
.column--group > .column-empty { display: none; }
.column--group:not(:has(.bcard)) > .column-empty { display: block; }
.group-head .dot { background: var(--fg-3); }
.group-progress .dot { background: var(--info); }
.group-ready .dot { background: var(--warn); }
.group-scheduled .dot { background: var(--accent); }
.group-live .dot { background: var(--ok); }
/* Op het gegroepeerde bord is de tussenstap het label op de kaart */
.column--group .bcard .meta .pill { font-size: 11.5px; }
/* Datum bovenaan de postkaart, duidelijk: relatief (Vandaag, Morgen, te laat) en dan dag en tijd. */
.bcard .post-date { display: flex; align-items: baseline; gap: 6px; margin-bottom: var(--s-8); font-size: 13px; color: var(--fg-2); }
.bcard .post-rel { color: var(--fg); font-weight: 500; }
.bcard .post-rel:empty { display: none; }
.bcard .post-day { color: var(--fg); }
.bcard .post-rel:not(:empty) + .post-day { color: var(--fg-2); }
.bcard .post-time { margin-left: auto; font-family: var(--mono); font-size: 11.5px; }
.bcard .post-date.is-late .post-rel { color: var(--bad); }
.bcard .post-date.is-today .post-rel { color: var(--accent); }
.board.single-profile .bcard .post-head { display: none; }   /* één profiel gekozen: naam staat al in de rij erboven */
/* Vanzelf prioriteit op het LinkedIn-bord: binnen drie dagen een zachte rode gloed, te laat steviger. */
.bcard.is-urgent {
  background-image: linear-gradient(color-mix(in srgb, var(--bad) calc(var(--urgency, 0) * 10%), transparent), color-mix(in srgb, var(--bad) calc(var(--urgency, 0) * 10%), transparent));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--bad) calc(var(--urgency, 0) * 55%), transparent), var(--shadow-card);
}

/* LinkedIn-bord: elke kolom een licht getint vlak, van neutraal (Concept) via groen naar Live; meer lucht. */
.board:has(> .column--group) { gap: var(--s-20); }
.board:has(> .column--group) .column { flex-basis: 252px; }
.column.column--group { padding: var(--s-12); border-radius: var(--r-card); gap: var(--s-12); background: var(--col-bg); }
.column--group[data-group="concept"]   { --col-bg: color-mix(in srgb, var(--fg-3) 7%, transparent); }
.column--group[data-group="progress"]  { --col-bg: color-mix(in srgb, var(--accent) 6%, transparent); }
.column--group[data-group="ready"]     { --col-bg: color-mix(in srgb, var(--accent) 10%, transparent); }
.column--group[data-group="scheduled"] { --col-bg: color-mix(in srgb, var(--accent) 14%, transparent); }
.column--group[data-group="live"]      { --col-bg: color-mix(in srgb, var(--ok) 13%, transparent); }
.column--group > .column-head { padding: 0 4px 2px; }
.column--group .column-empty { background: transparent; }
.column--group .bcard { padding: var(--s-16); }
/* Kaart: wie postet en het soort post op één regel */
.bcard .post-line { display: flex; align-items: center; gap: 6px; margin-top: var(--s-8); min-width: 0; }
.bcard .post-line .post-head { display: inline-flex; align-items: center; gap: 6px; min-width: 0; margin: 0; flex: 1; font-size: 12.5px; }
.bcard .post-line .post-avatar { width: 18px; height: 18px; font-size: 10px; }
.bcard .post-line .post-who { font-weight: 400; color: var(--fg-2); }
.bcard .post-line .post-chip { flex: none; }
.board.single-profile .bcard .post-line .post-head { display: none; }
.page-summary a { color: var(--fg); text-decoration: none; font-weight: 500; }
.page-summary a:hover { color: var(--accent); }
.page-summary-tip { display: block; margin-top: 4px; color: var(--fg-on-tint); font-size: 14px; }
/* Live staat apart: een verticale lijn tussen bouwen (Concept, In progress, Ready) en wat echt live staat. */
.column.column--group[data-group="live"] { position: relative; margin-left: var(--s-24); }
.column.column--group[data-group="live"]::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: calc((var(--s-24) + var(--s-20)) / -2); width: 1px; border-radius: 1px; pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--fg-3) 45%, transparent), color-mix(in srgb, var(--fg-3) 0%, transparent));
}
.group-live .dot { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 50%, transparent); animation: live-pulse 2.4s var(--ease-flow) infinite; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 50%, transparent); } 70% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ok) 0%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .group-live .dot { animation: none; } }
.bcard .post-date { padding-bottom: var(--s-4); border-bottom: 1px solid color-mix(in srgb, var(--fg-3) 18%, transparent); }   /* datumregel los van de titel, heel licht */
/* Pijltjes tussen de bouwstappen (Concept > In progress > Ready), dunne lijn zoals in de decks; niet naar Live. */
.column.column--group:is([data-group="concept"], [data-group="progress"]) { position: relative; }
.column.column--group:is([data-group="concept"], [data-group="progress"])::after {
  content: ""; position: absolute; top: 43px; right: calc(var(--s-20) / -2 - 7px); width: 14px; height: 10px;   /* midden van een leeg kolomblok (97px) */ pointer-events: none;
  background: color-mix(in srgb, var(--fg-3) 70%, transparent);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'><path d='M1 5h11M8.5 1.5L12 5l-3.5 3.5' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'><path d='M1 5h11M8.5 1.5L12 5l-3.5 3.5' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
}
.bcard .meta .post-type { margin-left: auto; }   /* soort post rechts naast de status */
.board-today { margin-right: auto; padding-left: 4px; font-family: var(--mono); font-size: 12px; color: var(--fg-2); }
.board-today::first-letter { text-transform: uppercase; }
.toolbar:has(.board-today) .filters-more { margin-left: 0; }

/* Developermodus: interne codes en de statusbalk alleen als die aan staat (app.js, Instellingen > Developer) */
html:not(.dev-mode) .dev-only { display: none; }
html:not(.dev-mode) { --status-h: 0px; }
html:not(.dev-mode) .statusbar { display: none; }

/* Post-preview als LinkedIn-post */
.post-preview { max-width: 555px; }
.pp-when { display: inline-flex; align-items: center; gap: 6px; }
.pp-globe { color: var(--fg-2); }
.pp-text { position: relative; }
.pp-text .pp-body p { margin: 0; }
.pp-text .pp-body p + p { margin-top: 1.5em; }      /* witregel zoals op LinkedIn */
.pp-text.is-clamped:not(.is-open) .pp-body { max-height: var(--pp-clamp); overflow: hidden; }
.pp-clip { position: relative; }
.pp-more { position: absolute; right: 0; bottom: 0; padding: 0 0 0 28px; border: 0; font: inherit; font-size: 14px; color: var(--fg-2); cursor: pointer;
  background: linear-gradient(to right, transparent, var(--bg) 24px); }
.pp-text.is-open .pp-more { position: static; display: inline; padding: 0; background: none; margin-top: 4px; }
.pp-more:hover { color: var(--accent); text-decoration: underline; }
.pp-edit { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; padding: 0; border: 0; background: none; font: inherit; font-size: 12.5px; color: var(--fg-3); cursor: pointer; }
.pp-edit:hover { color: var(--accent); }
.pp-text.body-edit textarea { width: 100%; min-height: 180px; }
.pp-slide--video video { width: 100%; height: 100%; object-fit: contain; background: var(--black); }
/* Media beheren onder het beeld */
.pp-media { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px 4px; }
.pp-tile { position: relative; width: 64px; height: 64px; border-radius: var(--r-md); overflow: hidden; background: var(--bg-2); cursor: grab;
  transition: transform 400ms var(--ease-flow), opacity 400ms var(--ease-flow); }
.pp-tile.dragging { opacity: 0.4; }
.pp-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-tile-file { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 100%; font-size: 11px; color: var(--fg-2); }
.pp-tile-x { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: rgb(0 0 0 / 55%); color: var(--white); cursor: pointer; opacity: 0; transition: opacity 300ms var(--ease-flow); }
.pp-tile-move { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: 2px; opacity: 0; transition: opacity 300ms var(--ease-flow); }
.pp-tile-move button { width: 20px; height: 20px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgb(0 0 0 / 55%); color: var(--white); cursor: pointer; }
.pp-tile:hover .pp-tile-x, .pp-tile:hover .pp-tile-move, .pp-tile:focus-within .pp-tile-x, .pp-tile:focus-within .pp-tile-move { opacity: 1; }
.pp-add { position: relative; width: 64px; height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: var(--r-md);
  background: var(--bg-2); color: var(--fg-2); font-size: 11px; cursor: pointer; transition: background-color 400ms var(--ease-flow), color 400ms var(--ease-flow); }
.pp-add:hover { background: var(--accent-bg); color: var(--fg-on-tint); }
.pp-add input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pp-media-hint { flex-basis: 100%; margin: 2px 0 0; font-size: 12px; color: var(--fg-3); }
/* Reacties en knoppen zoals onder een post */
.pp-meta { display: inline-flex; gap: 12px; }
.pp-views { display: flex; gap: 12px; }
.pp-actions { display: flex; justify-content: space-around; margin: 4px 16px 0; padding: 4px 0; border-top: 1px solid color-mix(in srgb, var(--fg-3) 18%, transparent); }
.pp-actions span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; font-size: 13px; font-weight: 500; color: var(--fg-2); }
/* First comment als invulbare reactie */
.pp-comment textarea { display: block; width: 100%; margin-top: 4px; padding: 0; border: 0; background: transparent; box-shadow: none; resize: none; overflow: hidden;
  font: inherit; font-size: 13px; line-height: 1.45; color: var(--fg); }
.pp-comment textarea:focus { outline: none; }
.pp-comment > div:focus-within { box-shadow: 0 0 0 2px var(--accent-bg); }
.pp-comment textarea::placeholder { color: var(--fg-3); }

/* Bestand kiezen in eigen stijl in plaats van het standaardvak van de browser */
.file-pick { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.file-pick input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
input[type=file]::file-selector-button { margin-right: 10px; padding: 6px 12px; border: 0; border-radius: var(--r-btn); background: var(--bg-2); color: var(--fg); font: inherit; font-size: 13px; cursor: pointer; }

/* LinkedIn-preview in een eigen licht getint vlak (zoals een kolom op het bord), de post erin met schaduw rondom
   zoals de kaarten op de website; rechtsboven het label Preview. */
.pp-stage { margin: var(--s-16) 0 var(--s-32); padding: var(--s-8) 0; }
.pp-stage .post-preview { position: relative; margin: 0; box-shadow: var(--shadow-preview); }
.pp-badge { align-self: center; flex: none; margin-left: auto; padding: 3px 10px; border-radius: var(--r-pill); background: var(--bg-2);
  font-family: var(--font); font-size: 12px; font-weight: 500; color: var(--fg-2); }
.pp-link + .pp-badge { margin-left: 8px; }
.pp-head .pp-link { align-self: center; }
/* Reacties onder de kaart duidelijker als gesprek */

/* Volgende stap: één knop, de rest in een menu, notitie pas als je hem opent */
.moves-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.moves-more { position: relative; }
.moves-more:not(:has(.moves-menu button)) { display: none; }
.moves-more > summary, .moves-note > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.moves-more > summary::-webkit-details-marker, .moves-note > summary::-webkit-details-marker { display: none; }
.moves-more[open] .caret { transform: rotate(-90deg); }
.moves-more .caret { transform: rotate(90deg); transition: transform 400ms var(--ease-flow); }
.moves-menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 40; display: grid; gap: 2px; min-width: 220px; padding: 6px;
  border-radius: var(--r-card); background: var(--bg); box-shadow: var(--shadow-float); }
.moves-menu button { display: flex; align-items: center; gap: 8px; width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: var(--r-xs);
  background: none; color: var(--fg); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.moves-menu button:hover { background: var(--bg-2); }
.moves-note[open] { flex-basis: 100%; }
.moves-note textarea { display: block; width: 100%; margin-top: 8px; }
.moves > textarea { display: none; }

/* Reacties als chat */
.chat { margin-top: var(--s-24); padding: var(--s-16); border-radius: var(--r-card); background: var(--bg-2); }
.chat-head { display: flex; align-items: center; gap: 12px; }
.chat-head .section-title { margin: 0; }
.chat-people { display: inline-flex; margin-left: auto; }
.chat-people .chat-avatar { width: 26px; height: 26px; font-size: 11px; box-shadow: 0 0 0 2px var(--bg-2); }
.chat-people .chat-avatar + .chat-avatar { margin-left: -6px; }
.chat-thread { display: flex; flex-direction: column; gap: 10px; max-height: 420px; overflow: auto; margin: var(--s-12) 0; padding: 0; }
.chat-day { align-self: center; margin: 4px 0; padding: 2px 10px; border-radius: var(--r-pill); background: var(--bg); font-size: 12px; color: var(--fg-2); }
.chat-day::first-letter { text-transform: uppercase; }
.chat-msg { display: flex; align-items: flex-end; gap: 8px; max-width: 85%; padding: 0; border: 0; background: none; }
.chat-msg.is-mine { align-self: flex-end; flex-direction: row-reverse; }
.chat-avatar { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-bg); color: var(--fg-on-tint); font-size: 12px; font-weight: 500; }
.chat-bubble { padding: 8px 12px; border-radius: 16px 16px 16px 4px; background: var(--bg); box-shadow: var(--shadow-card); }
.chat-msg.is-mine .chat-bubble { border-radius: 16px 16px 4px 16px; background: var(--accent); color: var(--on-accent); }
.chat-msg.is-mine .chat-bubble .who span, .chat-msg.is-mine .chat-bubble .markdown { color: var(--on-accent); }
.chat-bubble .who { display: flex; align-items: baseline; gap: 8px; font-size: 12px; }
.chat-bubble .who b { font-weight: 500; }
.chat-bubble .who span { color: var(--fg-3); font-family: var(--mono); font-size: 11px; }
.chat-bubble .markdown { font-size: 14px; line-height: 1.45; }
.chat-bubble .markdown p { margin: 2px 0 0; }
.chat-empty { margin: 4px 0; font-size: 13px; }
.chat-form { display: flex; align-items: flex-end; gap: 8px; margin: 0; }
.chat-form textarea { flex: 1; min-height: 40px; max-height: 200px; resize: none; border-radius: 20px; padding: 10px 14px; background: var(--bg); }
.chat-form button { flex: none; width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 50%; }
.chat-form .row { display: none; }
.chat-msg.is-mine .chat-bubble .who b { color: var(--on-accent); }
.card-doc .chat-form textarea { min-height: 40px; height: 40px; }

/* Eigenschappen op de kaart: één rustig blok, labels licht links, waarden rechts, gelijke hoogtes */
.card-doc > form > .props, .card-doc .more-props .props {
  grid-template-columns: 132px minmax(0, 1fr); gap: 0; margin: 0; padding: 4px 0; border-radius: var(--r-card); }
.card-doc > form > .props { margin-top: var(--s-8); }
.card-doc .props dt, .card-doc .props dd { min-height: 38px; display: flex; align-items: center; }
.card-doc .props dt { padding: 0; font-size: 13px; color: var(--fg-3); gap: 8px; }
.card-doc .props dt .i { color: var(--fg-3); }
.card-doc .props dd { padding: 0; gap: 8px; font-size: 14px; }
.card-doc .props input, .card-doc .props select { height: 32px; padding: 0 10px; margin-left: -10px; border-radius: var(--r-xs); background: transparent; font-size: 14px; }
.card-doc .props input[type="date"] { max-width: 180px; }
.card-doc .props select { max-width: 240px; }
.card-doc .more-props { margin: 0 0 var(--s-8); }
.card-doc .more-props > summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; padding: 6px 0; font-size: 13px; color: var(--fg-3); }
.card-doc .more-props > summary::-webkit-details-marker { display: none; }
.card-doc .more-props > summary::before { content: ""; width: 6px; height: 6px; border-right: 1.3px solid currentColor; border-bottom: 1.3px solid currentColor; transform: rotate(-45deg); transition: transform 400ms var(--ease-flow); }
.card-doc .more-props[open] > summary::before { transform: rotate(45deg); }
.card-doc .more-props > summary:hover { color: var(--fg); }

/* Bijlagen: één sleepvak; kiezen of slepen voegt meteen toe */
.upload:has(.file-drop) { display: block; }
.file-drop { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; padding: var(--s-12) var(--s-16);
  border-radius: var(--r-card); background: var(--bg-2); color: var(--fg-2); font-size: 14px; cursor: pointer; text-align: center;
  outline: 1.5px dashed color-mix(in srgb, var(--fg-3) 35%, transparent); outline-offset: -6px;
  transition: background-color 400ms var(--ease-flow), outline-color 400ms var(--ease-flow); }
.file-drop b { font-weight: 500; color: var(--fg); }
.file-drop:hover, .file-drop.is-over { background: var(--accent-bg); outline-color: var(--accent); }
.file-drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-drop-submit { display: none; }
.card-doc .files li { min-height: 40px; padding: 0 10px; border-radius: var(--r-md); background: var(--bg-2); margin-bottom: 6px; }

/* Geschiedenis: zinnen onder elkaar aan een dunne lijn, datum rechts */
.tl { margin-top: var(--s-24); }
.tl .timeline { position: relative; }
.tl .timeline::before { content: ""; position: absolute; left: 4px; top: 10px; bottom: 10px; width: 1px; background: color-mix(in srgb, var(--fg-3) 25%, transparent); }
.tl .timeline > li { position: relative; display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 8px 0; }
.tl .tl-dot { width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--fg-3); }
.tl .timeline > li:first-child .tl-dot { box-shadow: inset 0 0 0 1.5px var(--accent); background: var(--accent-bg); }
.tl .tl-line { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; color: var(--fg-2); }
.tl .tl-line b { font-weight: 500; color: var(--fg); }
.tl .when { font-family: var(--mono); font-size: 11.5px; color: var(--fg-3); white-space: nowrap; padding-top: 3px; }
.tl .when span { margin-left: 6px; }

/* Chat: geen naam in de ballon (avatar staat ernaast), tijd in een eigen kleur; wit voor anderen, lichtgroen voor jou */
.chat-bubble { background: var(--bg); color: var(--fg); }
.chat-msg.is-mine .chat-bubble { background: color-mix(in srgb, var(--accent) 16%, var(--bg)); color: var(--fg); box-shadow: none; }
.chat-msg.is-mine .chat-bubble .markdown, .chat-msg.is-mine .chat-bubble .who b { color: var(--fg); }
.chat-bubble .who { display: flex; justify-content: flex-end; order: 2; margin-top: 2px; }
.chat-bubble { display: flex; flex-direction: column; }
.chat-bubble .markdown { order: 1; }
.chat-bubble .who time { font-family: var(--mono); font-size: 11px; color: var(--fg-on-tint); opacity: 1; }
.chat-msg.is-mine .chat-bubble .who time { color: var(--fg-on-tint); }
/* Nieuwe berichten: een dunne lijn met Nieuw erboven */
.chat-new { display: flex; align-items: center; gap: 10px; margin: 6px 0 2px; font-size: 11.5px; font-weight: 500; color: var(--accent); }
.chat-new::before, .chat-new::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, var(--accent) 45%, transparent); }
:is(.sidebar, .side-menu) .nav-main:has(.nav-meetings) > li.fallback-meetings { display: none; }

/* Containers: witte blokken met afgeronde hoeken op de achtergrond, zoals op de website. Een kop (titel, samenvatting,
   knoppen) en een blok met de inhoud (filters en bord). Eerst op LinkedIn en Meetings; daarna de rest. */
.box { margin: var(--s-16) var(--s-24) 0; padding: var(--s-20) var(--s-24); border-radius: var(--r-card); background: var(--bg); box-shadow: var(--shadow-card); }
.box + .box { margin-top: var(--s-12); }
.box:last-child { margin-bottom: var(--s-24); }
.box-head-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-12) var(--s-16); }
.box-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.box-head .page-summary { margin: var(--s-12) 0 0; }
.box-board { padding: var(--s-16) var(--s-16) var(--s-20); }
.box-board .toolbar { padding: 0 4px var(--s-12); margin: 0; }
.box-board .board { padding: 0; }
.box .tabs { background: var(--bg-2); }
.box .profile-pill { background: var(--bg-2); }   /* in een wit blok: grijze pil */

/* Feedback op geselecteerde tekst en het citaat in de chat */
.fb-btn { position: absolute; z-index: 60; transform: translateX(-50%); height: 30px; padding: 0 12px; border: 0; border-radius: var(--r-pill);
  background: var(--fg); color: var(--bg); font: inherit; font-size: 12.5px; font-weight: 500; box-shadow: var(--shadow-float); cursor: pointer; }
.fb-chip { flex-basis: 100%; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: var(--r-md); background: var(--bg); font-size: 12.5px; color: var(--fg-2); }
.fb-chip span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-chip button { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: var(--bg-2); color: var(--fg-2); cursor: pointer; }
.chat-form:has(.fb-chip) { flex-wrap: wrap; }
.chat-quote { margin: 0 0 6px; padding: 4px 10px; border-left: 2px solid var(--accent); border-radius: 0 var(--r-xs) var(--r-xs) 0; background: var(--bg-2); font-size: 12.5px; color: var(--fg-2); }
.chat-quote.is-resolved { opacity: 0.6; text-decoration: line-through; }
.chat-msg.is-mine .chat-quote { background: rgb(255 255 255 / 55%); }
.chat-resolve { align-self: flex-start; margin-top: 4px; padding: 0; border: 0; background: none; font: inherit; font-size: 12px; color: var(--fg-on-tint); cursor: pointer; }
/* Versies van de tekst */
.card-history { margin: var(--s-16) 0 0; }
.card-history > summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; font-size: 13px; color: var(--fg-3); padding: 6px 0; }
.card-history > summary::-webkit-details-marker { display: none; }
.card-history > summary:hover { color: var(--fg); }
.card-history .revisions { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.card-history .revision { padding: 10px 12px; border-radius: var(--r-md); background: var(--bg-2); font-size: 13px; }
.card-history .revision.is-current { box-shadow: inset 0 0 0 1.5px var(--accent-bg); }
.card-history .rev-diff, .card-history .revision-diff { margin-top: 8px; font-size: 14px; line-height: 1.5; }
.card-history ins { background: color-mix(in srgb, var(--ok) 22%, transparent); text-decoration: none; border-radius: 3px; }
.card-history del { background: color-mix(in srgb, var(--bad) 18%, transparent); color: var(--fg-2); border-radius: 3px; }

/* Samenvatting als melding: zwaaiend handje, per onderwerp een gekleurd label met de namen, tip met emoji */
.page-summary { max-width: none; display: grid; gap: 6px; padding: var(--s-12) var(--s-16); border-radius: var(--r-card);
  background: color-mix(in srgb, var(--accent) 7%, var(--bg)); color: var(--fg-2); font-size: 14px; }
.page-summary.is-late::before { content: none; }
.ann-head { margin: 0 0 2px; font-size: 15px; font-weight: 500; color: var(--fg); }
.ann-wave { display: inline-block; transform-origin: 70% 70%; animation: ann-wave 2.4s var(--ease-flow) 0.4s 1; }
@keyframes ann-wave { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(16deg); } 20%, 40% { transform: rotate(-8deg); } }
@media (prefers-reduced-motion: reduce) { .ann-wave { animation: none; } }
.ann-row { display: flex; align-items: baseline; gap: 10px; }
.ann-chip { flex: none; min-width: 112px; display: inline-flex; align-items: center; justify-content: center; height: 22px; padding: 0 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 500; }
.ann-chip.tone-bad { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); }
.ann-chip.tone-warn { background: color-mix(in srgb, var(--warn) 26%, transparent); color: color-mix(in srgb, var(--warn) 30%, var(--fg)); }
.ann-chip.tone-ok { background: color-mix(in srgb, var(--ok) 18%, transparent); color: color-mix(in srgb, var(--ok) 55%, var(--fg)); }
.ann-text { min-width: 0; color: var(--fg-2); }
.ann-text a { color: var(--fg); font-weight: 500; text-decoration: none; }
.ann-text a:hover { color: var(--accent); }
.page-summary-tip { margin: 4px 0 0; font-size: 13.5px; color: var(--fg-on-tint); }
/* Maand boven het bord, zoals in de kalender */
.board-date { display: inline-flex; align-items: baseline; gap: 12px; margin-right: auto; }
.board-month { min-width: 0; font-size: 18px; }
.board-month::first-letter, .board-today::first-letter { text-transform: uppercase; }
.board-date .board-today { margin: 0; padding: 0; }

/* Spacing: drie losse blokken (kop, profielen, bord) met lucht; melding zonder extra vlak; kaarten ruimer */
.box + .box { margin-top: var(--s-16); }
.box-head { padding: var(--s-24); }
.box-head .page-summary { margin: var(--s-20) 0 0; padding: 0; background: none; gap: 10px; }
.ann-head { margin-bottom: 6px; }
.ann-row { gap: 14px; }
.page-summary-tip { margin-top: 8px; }
.box-people { padding: var(--s-16) var(--s-20); }
.box-people .profile-row { gap: 8px; }
.box-board { padding: var(--s-20); }
.box-board .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-12); padding: 0 0 var(--s-20); }
.box-board .toolbar .board-date { order: 1; margin-right: auto; }
.box-board .toolbar .filters-more { order: 2; }
.box-board .toolbar input[type="search"] { order: 3; }
.box-board .toolbar .box-actions { order: 4; margin-left: 0; }
.board:has(> .column--group) { gap: var(--s-24); }
.column.column--group { padding: var(--s-16); gap: var(--s-12); }
.column--group .bcard { padding: var(--s-16) var(--s-16) var(--s-12); }
.bcard .post-date { margin-bottom: var(--s-12); padding-bottom: 6px; }
.column--group .bcard .title { margin-bottom: 2px; }
.bcard .post-line { margin-top: var(--s-12); }
.column--group .bcard .meta { margin-top: var(--s-12); gap: 8px; }
.bcard .post-stats { margin-top: var(--s-12); }

/* LinkedIn-kop in twee delen: links het verhaal, rechts wat aandacht nodig heeft */
.box-split { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(240px, 1fr); gap: var(--s-32); align-items: start; }
@media (max-width: 900px) { .box-split { grid-template-columns: 1fr; } }
.head-main .story { margin-top: var(--s-16); display: grid; gap: 8px; max-width: 62ch; font-size: 15px; line-height: 1.55; color: var(--fg-2); }
.head-main .story p { margin: 0; }
.head-main .story p:first-child { color: var(--fg); }
.head-main .story .story-tip { margin-top: 4px; color: var(--fg-on-tint); font-size: 14px; }
.head-side { padding: var(--s-16) var(--s-20); border-radius: var(--r-card); background: var(--bg-2); }
.head-side-title { margin: 0 0 var(--s-12); font-size: 13px; font-weight: 500; color: var(--fg-2); }
.attn { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.attn-item { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: baseline; column-gap: 10px; font-size: 14px; color: var(--fg); }
.attn-item b { font-size: 20px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.attn-item a { color: var(--fg); font-weight: 500; text-decoration: none; }
.attn-item a:hover { color: var(--accent); }
.attn-sub { grid-column: 2; font-size: 12.5px; color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attn-item.tone-bad b, .attn-item.tone-bad > a { color: var(--bad); }
.attn-item.tone-info b { color: var(--info); }
.attn-item.tone-warn b { color: color-mix(in srgb, var(--warn) 55%, var(--fg)); }
.attn-item.tone-ok > a { color: color-mix(in srgb, var(--ok) 55%, var(--fg)); }
.attn-item.tone-ok b { display: none; }
.attn-item.tone-ok { grid-template-columns: minmax(0, 1fr); }
.attn-item.tone-ok .attn-sub { grid-column: 1; }

/* Schakelaar Statusbord en Kalender: pil in pil, zelfde rondingen en hoogte */
.tabs { align-items: center; padding: 3px; gap: 2px; border-radius: var(--r-pill); background: var(--bg-2); }
.tabs a { height: 30px; padding: 0 12px; border-radius: var(--r-pill); font-size: 13.5px; }
.tabs a.active { box-shadow: 0 1px 2px rgb(12 15 14 / 8%); }
.box .tabs { background: var(--bg-2); }

/* Zoekveld als echt invulvak */
.box-board .toolbar input[type="search"] { height: 36px; width: 220px; padding: 0 14px 0 34px; border: 0; border-radius: var(--r-pill); background-color: var(--bg-2);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none' stroke='%238C918D' stroke-width='1.4' stroke-linecap='round'><circle cx='7' cy='7' r='4.6'/><path d='M10.4 10.4L14 14'/></svg>");
  background-repeat: no-repeat; background-position: 12px center; font-size: 14px; }
.box-board .toolbar input[type="search"]:focus { outline: none; box-shadow: 0 0 0 2px var(--accent-bg); background-color: var(--bg); }
.box-board .toolbar .filters-more > summary { height: 36px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: var(--r-pill); background: var(--bg-2); }

/* Kalender opnieuw: losse tegels met ruimte ertussen, alle hoeken rond. Gewone dag licht grijs, weekend en buiten de
   maand grijzer, deze week licht groen, vandaag sterker. Kaartjes in een tegel wit, zodat ze op grijs en groen leesbaar blijven. */
.box-board .cal-grid { display: grid; gap: 6px; padding: 0; background: none; box-shadow: none; border-radius: 0; overflow: visible; }
.box-board .cal-row { gap: 6px; background: none !important; }
.box-board .cal-weekdays div { padding: 0 8px 2px; }
.box-board .cal-day { min-height: 108px; padding: 6px; border-radius: var(--r-md); background: color-mix(in srgb, var(--fg-3) 6%, var(--bg)); }
.box-board .cal-row:not(.cal-weekdays) .cal-day:nth-child(n+6),
.box-board .cal-day.outside { background: color-mix(in srgb, var(--fg-3) 13%, var(--bg)); }
.box-board .cal-day.outside .cal-date { color: var(--fg-3); }
.box-board .cal-row:not(.cal-weekdays):has(.cal-day.today) .cal-day { background: color-mix(in srgb, var(--accent) 9%, var(--bg)); }
.box-board .cal-row:not(.cal-weekdays):has(.cal-day.today) .cal-day:nth-child(n+6) { background: color-mix(in srgb, var(--accent) 14%, var(--bg)); }
.box-board .cal-day.today { background: color-mix(in srgb, var(--accent) 20%, var(--bg)) !important; }
.box-board .cal-card { background: var(--bg); box-shadow: 0 1px 2px rgb(12 15 14 / 6%); }
.box-board .cal-card:hover { background: var(--bg); box-shadow: 0 2px 8px rgb(12 15 14 / 10%); }
.box-board .cal-card .who { color: var(--fg-2); }
.box-board .cal-more summary { color: var(--fg-2); }
/* Maand en navigatie van de kalender in de werkbalk */
.board-date--cal { align-items: center; gap: 8px; }
.board-date--cal .cal-nav .btn { height: 32px; }

/* Aandacht nodig: te laat, de bouwstappen met pijltjes, een streep, dan live en de volgende post */
.head-side-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: var(--s-12); }
.head-side-top .head-side-title { margin: 0; }
.head-side-count { font-family: var(--mono); font-size: 11.5px; color: var(--fg-2); }
.attn { gap: var(--s-12); }
.attn-late { display: flex; align-items: baseline; gap: 6px; padding-bottom: 10px; border-bottom: 1px solid color-mix(in srgb, var(--fg-3) 20%, transparent); font-size: 13.5px; color: var(--fg-2); min-width: 0; }
.attn-late b { color: var(--bad); font-size: 16px; font-weight: 500; }
.attn-late a { color: var(--bad); font-weight: 500; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attn-flow { display: flex; align-items: flex-start; gap: 6px; }
.attn-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; font-size: 12.5px; color: var(--fg-2); }
.attn-stat b { font-size: 22px; font-weight: 500; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--fg); }
.attn-stat.tone-info b { color: var(--info); }
.attn-stat.tone-warn b { color: color-mix(in srgb, var(--warn) 55%, var(--fg)); }
.attn-stat.tone-ok b { color: color-mix(in srgb, var(--ok) 60%, var(--fg)); }
.attn-stat .attn-sub { white-space: normal; }
.attn-arrow { flex: none; width: 12px; height: 10px; margin-top: 8px; background: color-mix(in srgb, var(--fg-3) 70%, transparent);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'><path d='M1 5h11M8.5 1.5L12 5l-3.5 3.5' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'><path d='M1 5h11M8.5 1.5L12 5l-3.5 3.5' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat; }
.attn-live { display: flex; align-items: flex-start; gap: var(--s-16); padding-top: var(--s-12); border-top: 1px solid color-mix(in srgb, var(--fg-3) 20%, transparent); }
.attn-live .attn-stat { flex: none; }
.attn-next { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-left: var(--s-16); border-left: 1px solid color-mix(in srgb, var(--fg-3) 20%, transparent); }
.attn-next a { color: var(--fg); font-weight: 500; font-size: 14px; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attn-next a:hover { color: var(--accent); }
.cal-undated { padding: 3px 10px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--warn) 22%, transparent); font-size: 12px; color: var(--fg-2); }

/* Statusbord: de vier kolommen vullen de breedte van het blok (Live lijnt uit met Nieuwe post), responsive;
   bij weinig ruimte niet smaller dan 220px en dan horizontaal scrollen. */
.box-board .board:has(> .column--group) { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: var(--s-24); overflow-x: auto; }
.box-board .board:has(> .column--group) > .column { flex: none; width: auto; min-width: 0; }
.box-board .board:has(> .column--group) > .column:not(.column--group) { min-width: 220px; }
.box-board .board:has(> .column--group) > p { grid-column: 1 / -1; }

/* Statusbord met vaste hoogte: alle kolommen even hoog, de kop blijft staan, de kaarten scrollen per kolom.
   Bovenaan vervaagt wat onder de kop verdwijnt (zodra er gescrold is), onderaan zolang er meer komt. */
.box-board .board:has(> .column--group) { align-items: stretch; height: max(440px, calc(100dvh - var(--header-h) - 140px)); overflow-y: hidden; }
.box-board .column.column--group { display: flex; flex-direction: column; min-height: 0; padding-bottom: 0; gap: 0; }
.box-board .column--group > .column-head { flex: none; padding-bottom: var(--s-8); }
.box-board .col-scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--s-12); padding: 4px 2px var(--s-16);
  margin: 0 -2px; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--fg-3) 35%, transparent) transparent; }
.box-board .col-scroll.is-scrolled { -webkit-mask-image: linear-gradient(to bottom, transparent 0, var(--black) 28px); mask-image: linear-gradient(to bottom, transparent 0, var(--black) 28px); }
.box-board .col-scroll.has-more { -webkit-mask-image: linear-gradient(to bottom, var(--black) calc(100% - 36px), transparent 100%); mask-image: linear-gradient(to bottom, var(--black) calc(100% - 36px), transparent 100%); }
.box-board .col-scroll.is-scrolled.has-more { -webkit-mask-image: linear-gradient(to bottom, transparent 0, var(--black) 28px, var(--black) calc(100% - 36px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, var(--black) 28px, var(--black) calc(100% - 36px), transparent 100%); }
.column--group .col-scroll > .column-empty { display: none; }
.column--group:not(:has(.bcard)) .col-scroll > .column-empty { display: block; }

/* Meeting: kop met het verloop van de website, chips voor wanneer, duur en bron, deelnemers als rondjes */
.mt-hero { position: relative; isolation: isolate; margin: var(--s-8) 0 var(--s-16); padding: var(--s-20) var(--s-24); border-radius: var(--r-card); color: var(--on-gradient);
  background: var(--gradient-hero); overflow: hidden; }
.mt-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 var(--s-12); font-size: 13px; font-weight: 500; }
.mt-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.mt-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: var(--r-pill); background: rgb(255 255 255 / 16%); color: var(--on-gradient); font-size: 13px; text-decoration: none; }
a.mt-chip:hover { background: rgb(255 255 255 / 26%); text-decoration: none; }
.mt-people { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: var(--s-16); }
.mt-person { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; }
.mt-avatar { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgb(255 255 255 / 22%); font-size: 12px; font-weight: 500; }
.mt-details { margin: 0 0 var(--s-12); }
.mt-details > summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; padding: 6px 0; font-size: 13px; color: var(--fg-3); }
.mt-details > summary::-webkit-details-marker { display: none; }
.mt-details > summary::before { content: ""; width: 6px; height: 6px; border-right: 1.3px solid currentColor; border-bottom: 1.3px solid currentColor; transform: rotate(-45deg); transition: transform 400ms var(--ease-flow); }
.mt-details[open] > summary::before { transform: rotate(45deg); }

/* Uitkomsten van een meeting: per soort een blok, items als kaartjes met vinkje, wie en wanneer als labels, het citaat grijs */
.meeting-items { margin: var(--s-24) 0; }
.meeting-items .section-title { margin-bottom: var(--s-12); }
.meeting-apply { display: grid; gap: var(--s-12); }
.meeting-group { margin: 0; padding: var(--s-16); border: 0; border-radius: var(--r-card); background: var(--bg-2); min-width: 0; }
.meeting-group legend { float: left; width: 100%; margin: 0 0 var(--s-12); padding: 0; font-size: 13px; font-weight: 500; color: var(--fg-2); }
.meeting-list { clear: both; list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.meeting-item { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; align-items: baseline; gap: 4px 10px; padding: 12px 14px; border-radius: var(--r-md); background: var(--bg); box-shadow: var(--shadow-card); }
.meeting-item input[type=checkbox] { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); align-self: center; cursor: pointer; }
.meeting-item .meeting-title { font-size: 14.5px; font-weight: 500; color: var(--fg); cursor: pointer; }
.meeting-item .meeting-who, .meeting-item .meeting-date { padding: 2px 10px; border-radius: var(--r-pill); background: var(--bg-2); font-size: 12px; color: var(--fg-2); white-space: nowrap; }
.meeting-item .meeting-date { font-family: var(--mono); font-size: 11.5px; }
.meeting-item .meeting-note { grid-column: 2 / -1; margin: 2px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--fg-2); }
.meeting-item .meeting-source { grid-column: 2 / -1; margin: 0; padding-left: 10px; border-left: 2px solid color-mix(in srgb, var(--fg-3) 30%, transparent); font-style: italic; }
.meeting-item .meeting-link, .meeting-item .meeting-remark { grid-column: 2 / -1; font-size: 12.5px; }
.meeting-item.is-done { background: color-mix(in srgb, var(--ok) 8%, var(--bg)); box-shadow: none; }
.meeting-item .meeting-check { grid-column: 1; width: 18px; height: 18px; overflow: hidden; text-indent: 30px; border-radius: 50%; background: var(--ok);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='8'/></svg>"); }
.meeting-items .edit-bar { position: sticky; bottom: var(--s-12); z-index: 3; display: flex; align-items: center; gap: var(--s-12); padding: 10px 12px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(8px); box-shadow: var(--shadow-float); }

/* Licht naar donker en terug: kleuren vloeien zacht over (alleen tijdens de wissel, app.js zet theme-fade) */
html.theme-fade, html.theme-fade *, html.theme-fade *::before, html.theme-fade *::after {
  transition: background-color 600ms var(--ease-flow), color 600ms var(--ease-flow), border-color 600ms var(--ease-flow),
    fill 600ms var(--ease-flow), stroke 600ms var(--ease-flow), box-shadow 600ms var(--ease-flow), outline-color 600ms var(--ease-flow) !important;
}

/* Herkomst van een post (uit een meeting), de stap ingeklapt, bijlagen met wie en wanneer, AI-knop in de preview */
.origin { display: flex; align-items: center; gap: 8px; margin: var(--s-8) 0 0; padding: 8px 14px; border-radius: var(--r-pill); background: var(--accent-bg); font-size: 13px; color: var(--fg-on-tint); width: fit-content; max-width: 100%; }
.origin a { color: var(--fg); font-weight: 500; text-decoration: none; }
.origin a:hover { color: var(--accent); }
.flow-step { margin: var(--s-8) 0 var(--s-12); }
.flow-step > summary { display: inline-flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; padding: 6px 0; font-size: 13px; color: var(--fg-3); }
.flow-step > summary::-webkit-details-marker { display: none; }
.flow-step > summary::before { content: ""; width: 6px; height: 6px; border-right: 1.3px solid currentColor; border-bottom: 1.3px solid currentColor; transform: rotate(-45deg); transition: transform 400ms var(--ease-flow); }
.flow-step[open] > summary::before { transform: rotate(45deg); }
.flow-step > .moves { margin-top: 8px; }
.file-meta { white-space: nowrap; }
.pp-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 8px; }
.pp-tools form { margin: 0; }
.pp-tools .pp-edit { margin: 0; }
.pp-ai { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 500; color: var(--fg-on-tint); cursor: pointer; }
.pp-ai:hover { color: var(--accent); }
/* Klantlogo bovenin op één lijn met de tekst in de blokken (blokmarge + binnenruimte) */
body.shell:has(.page .box) .header .clientpick { margin-left: calc(var(--s-24) + var(--s-24) - 8px); }
.box-board, .box-people { padding-left: var(--s-24); padding-right: var(--s-24); }   /* alles in de blokken op dezelfde lijn als het logo en de titel */

/* Profielpagina: kop met foto en kerncijfers, tabs, blokken; tone of voice met schuifjes; woorden als labeltjes; streak per week */
.prof .box:first-child { margin-top: var(--s-16); }
.prof-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-32); align-items: center; }
@media (max-width: 900px) { .prof-hero { grid-template-columns: 1fr; } }
.prof-kop { display: flex; align-items: center; gap: var(--s-20); }
.prof-photo img, .prof-photo-empty { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: var(--accent-bg); color: var(--fg-on-tint); font-size: 32px; font-weight: 500; }
.prof-kop .page-head { padding: 0; }
.prof-kop .props { margin: var(--s-8) 0 0; grid-template-columns: auto 1fr; gap: 2px 16px; }
.prof-kop .props dt, .prof-kop .props dd { min-height: 0; font-size: 13.5px; }
.prof-kop .pill { margin-right: 4px; }
.prof-edit > summary, .prof-sub + details > summary { cursor: pointer; font-size: 13px; color: var(--fg-3); list-style: none; margin-top: 8px; }
.prof-stats { display: flex; gap: var(--s-12); }
.prof-stat { min-width: 120px; display: flex; flex-direction: column; gap: 4px; padding: var(--s-16); border-radius: var(--r-card); background: var(--bg-2); font-size: 12.5px; color: var(--fg-2); }
.prof-stat b { font-size: 26px; font-weight: 500; line-height: 1; color: var(--fg); font-variant-numeric: tabular-nums; }
.box-tabs { padding: var(--s-12) var(--s-24); }
.prof-tabs button { height: 30px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: none; color: var(--fg-2); font: inherit; font-size: 13.5px; cursor: pointer; }
.prof-tabs button.active { background: var(--bg); color: var(--fg); box-shadow: 0 1px 2px rgb(12 15 14 / 8%); }
.prof-pane .prof-section { margin: 0; }
.prof-pane .prof-section + .prof-section { margin-top: var(--s-32); padding-top: var(--s-24); border-top: 1px solid color-mix(in srgb, var(--fg-3) 18%, transparent); }
.prof-pane .section-title { margin: 0 0 var(--s-16); }
.prof-sub { margin: 0 0 var(--s-8); font-size: 14px; font-weight: 500; }
/* Tone of voice: schuifjes met de uitersten aan weerszijden */
.prof-sliders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-16) var(--s-32); }
@media (max-width: 760px) { .prof-sliders { grid-template-columns: 1fr; } }
.prof-slider { display: grid; gap: 6px; }
.prof-slider label { display: flex; justify-content: space-between; font-size: 13px; color: var(--fg-2); }
.prof-slider input[type=range] { width: 100%; accent-color: var(--accent); }
.prof-sliders .field { display: grid; gap: 6px; font-size: 13px; color: var(--fg-2); }
.prof-sliders .field select { height: 36px; border: 0; border-radius: var(--r-pill); background: var(--bg-2); padding: 0 12px; }
.prof-sliders > button { grid-column: 1 / -1; justify-self: start; }
.prof-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-16); margin-top: var(--s-24); }
@media (max-width: 900px) { .prof-columns { grid-template-columns: 1fr; } }
.prof-list { padding: var(--s-16); border-radius: var(--r-card); background: var(--bg-2); }
.prof-list + .prof-list { margin-top: var(--s-16); }
.prof-columns .prof-list + .prof-list { margin-top: 0; }
.prof-items { list-style: none; margin: 0 0 var(--s-12); padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.prof-items > li { display: inline-flex; align-items: center; gap: 2px; padding: 4px 4px 4px 12px; border-radius: var(--r-pill); background: var(--bg); font-size: 13.5px; }
.prof-items > li form { margin: 0; }
.prof-items > li .btn-ghost { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: none; color: transparent; font-size: 0; cursor: pointer; position: relative; }
.prof-items > li .btn-ghost::before { content: "×"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; color: var(--fg-3); }
.prof-items > li .btn-ghost:hover { background: var(--bg-2); }
.prof-quote { margin: 0; font-size: 13.5px; color: var(--fg-2); }
.prof-add { display: flex; flex-wrap: wrap; gap: 6px; }
.prof-add input[type=text], .prof-add textarea { flex: 1; min-width: 140px; height: 34px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: var(--bg); font: inherit; font-size: 13.5px; }
.prof-add textarea { height: auto; min-height: 72px; padding: 10px 12px; border-radius: var(--r-md); flex-basis: 100%; }
.muted { color: var(--fg-3); font-size: 13px; }
/* Resultaten: kaartjes en een streak per week, intensiteit per aantal posts */
.prof-results { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important; gap: var(--s-12) !important; }
.prof-results dt, .prof-results dd { display: block !important; min-height: 0 !important; }
.prof-weeks { list-style: none; margin: var(--s-20) 0 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; max-width: 520px; }
.prof-weeks li { aspect-ratio: 1; border-radius: 6px; background: color-mix(in srgb, var(--fg-3) 14%, var(--bg)); font-size: 0; }
.prof-weeks li[data-count="1"] { background: color-mix(in srgb, var(--accent) 35%, var(--bg)); }
.prof-weeks li[data-count="2"] { background: color-mix(in srgb, var(--accent) 65%, var(--bg)); }
.prof-weeks li:not([data-count="0"]):not([data-count="1"]):not([data-count="2"]) { background: var(--accent); }
/* Kalender in het blok: raster van de maandnaam tot de knop Nieuwe post, zonder eigen binnenruimte */
.box-board .calendar { padding: 0; margin: 0; }
/* Posts in dagen buiten de maand: er wel, maar rustig (gedempte stip en tekst) */
.box-board .cal-day.outside .cal-card { background: color-mix(in srgb, var(--bg) 55%, transparent); box-shadow: none; opacity: 0.7; }
.box-board .cal-day.outside .cal-card .dot { filter: saturate(0.25); opacity: 0.6; }
.box-board .cal-day.outside .cal-card .t, .box-board .cal-day.outside .cal-card .who { color: var(--fg-2); font-weight: 400; }

/* Tone of voice per kanaal als kaarten (zoals Style in Wispr Flow): merkicoon, status, keuzes compact in twee kolommen */
.prof-channels { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--s-16); }
.prof-channels > .section-title, .prof-channels > .muted, .prof-channels > .error { grid-column: 1 / -1; margin: 0; }
.prof-channel { padding: var(--s-16) var(--s-20); border-radius: var(--r-card); background: var(--bg-2); }
.prof-channel:has(input[name=aan]:not(:checked)) { opacity: 0.6; }
.prof-channel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: var(--s-12); }
.prof-channel-head .prof-sub { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.prof-channel-status { padding: 2px 10px; border-radius: var(--r-pill); background: var(--bg); font-size: 12px; color: var(--fg-2); }
.prof-channel-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.prof-channel-form .field { display: grid; gap: 4px; margin: 0; font-size: 12.5px; color: var(--fg-2); }
.prof-channel-form .field:first-of-type, .prof-channel-form .field:has(textarea), .prof-channel-form .field:has(input[type=text]), .prof-channel-form > button { grid-column: 1 / -1; }
.prof-channel-form .field:first-of-type label { display: inline-flex; align-items: center; gap: 8px; color: var(--fg); font-size: 13.5px; }
.prof-channel-form select, .prof-channel-form input[type=text] { height: 34px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: var(--bg); font: inherit; font-size: 13px; }
.prof-channel-form textarea { min-height: 64px; padding: 8px 12px; border: 0; border-radius: var(--r-md); background: var(--bg); font: inherit; font-size: 13px; resize: vertical; }
.prof-channel-form > button { justify-self: start; }

/* Tijden, datums en labels die eerder Geist Mono waren: nu Geist met cijfers op vaste breedte */
.mono, .post-time, .board-today, .head-side-count, .chat-bubble .who time, .tl .when, .meeting-item .meeting-date, .pp-badge, .cal-date, .bcard .post-when, .column-head .n { font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* Kopregel: zijbalk en hoofdkop op één lijn (56px, midden 28px). Alle bedieningselementen 28px hoog, iconen 16px. */
.sidebar-head { height: var(--header-h); padding: 0 var(--s-12) 0 var(--s-12); flex-direction: row; align-items: center; gap: 8px; }
.sidebar-brand { height: 28px; width: 100%; align-items: center; }
.sidebar-brand .wordmark { font-size: 17px; line-height: 28px; height: 28px; display: inline-block; white-space: pre; }   /* geen flex: die slikt de spatie tussen it en Flow */
.sidebar-head .hist { height: 28px; align-items: center; gap: 2px; }
.sidebar-head .hist button, .sidebar-head .sidebar-toggle, .header .theme-btn { width: 28px; height: 28px; padding: 0; display: inline-grid; place-items: center; border-radius: var(--r-pill); }
.sidebar-head .hist button .i, .sidebar-head .sidebar-toggle .i, .header .theme-btn .i { width: 16px; height: 16px; }
.header { align-items: center; }
.header .palette-btn { height: 28px; padding: 0 10px 0 12px; display: inline-flex; align-items: center; border-radius: var(--r-pill); }
.clientpick-current { height: 28px; }
.clientpick-current img { height: 18px; }
.header .clientpick { display: flex; align-items: center; height: 28px; align-self: center; }

/* Kalender: andere maand zonder de pagina opnieuw te laden; het raster vloeit zacht over (View Transitions via htmx) */
.box-board .calendar { view-transition-name: kalender; }
::view-transition-old(kalender) { animation: kal-uit 260ms var(--ease-flow) both; }
::view-transition-new(kalender) { animation: kal-in 420ms var(--ease-flow) both; }
@keyframes kal-uit { to { opacity: 0; transform: translateY(-6px); } }
@keyframes kal-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(kalender), ::view-transition-new(kalender) { animation: none; } }

/* Marketing dashboard: totalen, dienstkaarten in een raster, profielen als rondjes zoals op LinkedIn */
.box-title { margin: 0 0 var(--s-16); font-size: 15px; font-weight: 500; color: var(--fg); }
.dash-totals { display: flex; flex-wrap: wrap; gap: var(--s-12); margin-top: var(--s-20); }
.dash-total { min-width: 140px; display: flex; flex-direction: column; gap: 4px; padding: var(--s-16); border-radius: var(--r-card); background: var(--bg-2); font-size: 12.5px; color: var(--fg-2); }
.dash-total b { font-size: 26px; font-weight: 500; line-height: 1; color: var(--fg); font-variant-numeric: tabular-nums; }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-16); }
.dash-tile { display: flex; flex-direction: column; gap: var(--s-12); padding: var(--s-16) var(--s-20); border-radius: var(--r-card); background: var(--bg-2); color: var(--fg); text-decoration: none;
  transition: background-color 400ms var(--ease-flow), box-shadow 400ms var(--ease-flow); }
.dash-tile:hover { background: var(--bg); box-shadow: var(--shadow-card-hover); text-decoration: none; }
.dash-tile-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.dash-tile-name { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; }
.dash-tile-open { font-size: 12.5px; color: var(--fg-2); }
.dash-tile-open b { font-size: 22px; font-weight: 500; color: var(--fg); margin-right: 4px; font-variant-numeric: tabular-nums; }
.dash-states { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dash-states li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg-2); }
.dash-states .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.dash-states .dash-state { flex: 1; color: var(--fg); }
.dash-states .num { font-variant-numeric: tabular-nums; color: var(--fg-2); }
.dash-empty { margin: 0; font-size: 13px; }
.dash-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.dash-person { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: var(--r-pill); background: var(--bg-2); color: var(--fg); text-decoration: none; min-width: 0;
  transition: background-color 400ms var(--ease-flow); }
.dash-person:hover { background: var(--accent-bg); text-decoration: none; }
.dash-avatar { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-bg); color: var(--fg-on-tint); font-size: 13px; font-weight: 500; text-transform: uppercase; }
.dash-person:hover .dash-avatar { background: var(--bg); }
.dash-person-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.dash-person-text b { font-weight: 500; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-person-text span { font-size: 12px; color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-states .dot { background: var(--c, var(--fg-3)); }   /* kleur van de stap (tone-*) */
.box table.grid { box-shadow: none; background: transparent; }   /* tabel in een blok: geen kaart in een kaart */
.page > .doc:has(> .box) { max-width: none; margin: 0; padding: 0; }   /* dashboard: de blokken bepalen de opmaak */

/* Ons bedrijf: mensen als kaarten in een raster, teams als kaarten met leden, links en bestanden */
.company-people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.company-person { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--r-card); background: var(--bg-2); min-width: 0; }
.company-person-link { display: flex; align-items: center; gap: 12px; color: var(--fg); text-decoration: none; min-width: 0; }
.company-person-link:hover .company-person-name { color: var(--accent); }
.company-person > .prof-photo, .company-person-link > .prof-photo { flex: none; }
.company-person .prof-photo img, .company-person .prof-photo-empty { width: 44px; height: 44px; font-size: 16px; }
.company-person:not(:has(.company-person-link)) { flex-direction: row; flex-wrap: wrap; align-items: center; }
.company-person-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.company-person-name { font-weight: 500; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color 400ms var(--ease-flow); }
.company-person-title { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.company-person-teams { display: flex; flex-wrap: wrap; gap: 4px; padding-left: 56px; }
.team-chip, .team-name .pill { background: var(--accent-bg); color: var(--fg-on-tint); font-size: 12px; }
#company-teams { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--s-16); }
#company-teams > .section-title, #company-teams > .muted, #company-teams > .team-new, #company-teams > p, #company-teams > form { grid-column: 1 / -1; }
.team-card { display: grid; gap: var(--s-16); padding: var(--s-20); border-radius: var(--r-card); background: var(--bg-2); align-content: start; }
.team-head .team-name { margin: 0; }
.team-head .team-name .pill { font-size: 14px; padding: 4px 12px; }
.team-description { margin: 8px 0 0; }
.team-sub { margin: 0 0 8px; font-size: 12.5px; font-weight: 500; color: var(--fg-2); }
.team-card .prof-items { margin-bottom: 8px; }
.team-member .muted { margin-left: 4px; font-size: 12px; }
.team-link a { color: var(--fg); text-decoration: none; }
.team-link a:hover { color: var(--accent); }
.team-inline { display: inline-flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.team-add-member, .team-add-link, .team-card form.team-inline:not(li form) { display: flex; width: 100%; }
.team-card select, .team-card input[type=text], .team-card input[type=url], .team-card input[type=file] { flex: 1; min-width: 120px; height: 34px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: var(--bg); font: inherit; font-size: 13px; }
.team-edit > summary, .team-new > summary { cursor: pointer; font-size: 13px; color: var(--fg-3); list-style: none; }
/* Gebruikersmenu rechtsboven (Mijn profiel, Ons bedrijf, Teams, Instellingen) */
.me-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--r-pill); }
.me-menu > summary::-webkit-details-marker { display: none; }
.me-menu > summary:hover { background: var(--bg-2); }
.me-menu-panel { border-radius: var(--r-card) !important; box-shadow: var(--shadow-float) !important; padding: 6px !important; }
.me-menu-panel a, .me-menu-panel button { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: var(--r-xs); color: var(--fg); text-decoration: none; }
.me-menu-panel a:hover, .me-menu-panel button:hover { background: var(--bg-2); }

/* Brandboek: kop met tellers, tabs als pillen, kleuren als stalen in een raster, typografie en overige tokens als rijen,
   componenten en visuals als kaarten per kanaal */
.brand-head .brand-counts, .brand-head ul { list-style: none; margin: var(--s-16) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-12); }
.brand-head .brand-counts li, .brand-head ul li { min-width: 120px; display: flex; flex-direction: column; gap: 4px; padding: var(--s-12) var(--s-16); border-radius: var(--r-card); background: var(--bg-2); font-size: 12.5px; color: var(--fg-2); }
.brand-head .brand-counts b, .brand-head ul li b, .brand-head ul li strong { font-size: 22px; font-weight: 500; color: var(--fg); line-height: 1; }
.brand-note { margin: var(--s-12) 0 0; font-size: 13px; color: var(--fg-on-tint); }
.tabs button { height: 30px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: none; color: var(--fg-2); font: inherit; font-size: 13.5px; cursor: pointer; }
.tabs button.active { background: var(--bg); color: var(--fg); box-shadow: 0 1px 2px rgb(12 15 14 / 8%); }
.brand [data-tabs] { margin-bottom: var(--s-20); }
.brand-token-group { margin-bottom: var(--s-24); }
.brand-group-title { margin: 0 0 var(--s-12); font-size: 14px; font-weight: 500; }
.brand-group-title .n { margin-left: 6px; font-size: 12px; color: var(--fg-3); font-weight: 400; }
.brand-token-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.brand-tokens--kleuren .brand-token-list { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.brand-token { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--r-md); background: var(--bg-2); min-width: 0; }
.brand-token--color { flex-direction: column; align-items: stretch; padding: 8px 8px 10px; }
.brand-swatches { display: flex; height: 64px; border-radius: var(--r-sm); overflow: hidden; box-shadow: inset 0 0 0 1px rgb(12 15 14 / 6%); }
.brand-swatch { flex: 1; background: var(--swatch); }
.brand-token-body { min-width: 0; display: grid; gap: 2px; }
.brand-token-name { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-token-desc { font-size: 12px; color: var(--fg-2); }
.brand-token-values { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.brand-token-value { display: flex; gap: 6px; align-items: baseline; font-size: 12px; color: var(--fg-2); min-width: 0; }
.brand-token-value code { font-family: var(--font); font-variant-numeric: tabular-nums; background: none; padding: 0; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-mode { padding: 0 6px; border-radius: var(--r-pill); background: var(--bg); font-size: 11px; }
.brand-alias { font-size: 11px; color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.brand-asset { padding: 10px; border-radius: var(--r-card); background: var(--bg-2); display: grid; gap: 8px; }
.brand-asset-preview { aspect-ratio: 4 / 3; border-radius: var(--r-md); background: var(--bg) center / contain no-repeat; display: grid; place-items: center; overflow: hidden; }
.brand-asset-preview img { max-width: 80%; max-height: 80%; object-fit: contain; }
.brand-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--s-16); }
.brand-channel { margin-bottom: var(--s-24); }
.brand-channel h3, .brand-channel > h2 { margin: 0 0 var(--s-12); font-size: 14px; font-weight: 500; }
.brand-channel ul, .brand-items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.brand-item { padding: 12px; border-radius: var(--r-card); background: var(--bg-2); display: grid; gap: 6px; align-content: start; }
.brand-item img { width: 100%; border-radius: var(--r-md); background: var(--bg); }
.brand-import textarea { width: 100%; min-height: 140px; border: 0; border-radius: var(--r-md); background: var(--bg-2); padding: 12px; font-family: var(--font); font-size: 13px; }
.brand-set { padding: 10px 12px; border-radius: var(--r-md); background: var(--bg-2); }
.brand-set--active { box-shadow: inset 0 0 0 1.5px var(--accent); }

/* Woordenboek: kop, toevoegen, filter en lijst als witte blokken; termen als rustige rijen (term, pijl, juiste schrijfwijze, soort) */
.dict { padding-bottom: var(--s-24); }
.dict-head, .dict-add, .dict-filter, .dict-list { margin: var(--s-16) var(--s-24) 0; padding: var(--s-20) var(--s-24); border-radius: var(--r-card); background: var(--bg); box-shadow: var(--shadow-card); }
.dict-head .page-title { margin: 0; }
.dict-lead { margin: var(--s-12) 0 0; max-width: 70ch; font-size: 14.5px; line-height: 1.55; color: var(--fg-2); }
.dict-add > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; }
.dict-add > summary::before { content: "+"; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 16px; }
.dict-add > summary::-webkit-details-marker { display: none; }
.dict-add form, .dict-edit form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; margin-top: var(--s-16); }
.dict-field { display: grid; gap: 4px; font-size: 12.5px; color: var(--fg-2); }
.dict-field:has(textarea) { grid-column: 1 / -1; }
.dict-field input, .dict-field select, .dict-field textarea { height: 36px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: var(--bg-2); font: inherit; font-size: 13.5px; color: var(--fg); }
.dict-field textarea { height: auto; min-height: 64px; padding: 8px 12px; border-radius: var(--r-md); resize: vertical; }
.dict-save, .dict-add button[type=submit] { justify-self: start; grid-column: 1 / -1; }
.dict-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 0; border-radius: var(--r-card) var(--r-card) 0 0; box-shadow: none; padding-bottom: var(--s-12); }
.dict-filter + .dict-list { margin-top: 0; border-radius: 0 0 var(--r-card) var(--r-card); padding-top: 0; }
.dict-search input { width: 260px; height: 36px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: var(--bg-2); font: inherit; font-size: 14px; }
.dict-soort select { height: 36px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: var(--bg-2); font: inherit; font-size: 13.5px; }
.dict-tabs { display: inline-flex; gap: 2px; padding: 3px; margin-bottom: var(--s-16); border-radius: var(--r-pill); background: var(--bg-2); }
.dict-tab { height: 30px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: var(--r-pill); color: var(--fg-2); font-size: 13.5px; text-decoration: none; }
.dict-tab.active { background: var(--bg); color: var(--fg); box-shadow: 0 1px 2px rgb(12 15 14 / 8%); }
.dict-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dict-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 12px 16px; border-radius: var(--r-md); background: var(--bg-2); }
.dict-row > :not(.dict-main):not(.dict-actions) { grid-column: 1; }
.dict-main { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.dict-term { font-weight: 500; font-size: 14.5px; }
.dict-arrow { color: var(--fg-3); }
.dict-correct { font-size: 14.5px; color: var(--fg-on-tint); font-weight: 500; }
.dict-chip, .dict-status, .dict-variant { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--r-pill); background: var(--bg); font-size: 12px; color: var(--fg-2); }
.dict-chip--niet_zeggen { background: color-mix(in srgb, var(--bad) 14%, var(--bg)); color: var(--bad); }
.dict-status--voorgesteld { background: color-mix(in srgb, var(--warn) 30%, var(--bg)); color: var(--fg); }
.dict-status--afgewezen { text-decoration: line-through; }
.dict-uitleg, .dict-varianten, .dict-profile, .dict-meta { margin: 0; font-size: 13px; color: var(--fg-2); }
.dict-varianten { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.dict-label { color: var(--fg-3); margin-right: 4px; font-size: 12px; }
.dict-meta { display: flex; gap: 10px; font-size: 12px; color: var(--fg-3); }
.dict-actions { grid-column: 2; grid-row: 1 / span 3; display: flex; gap: 6px; align-items: flex-start; }
.dict-actions form { margin: 0; }
.dict-actions button { height: 30px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: var(--bg); font: inherit; font-size: 13px; cursor: pointer; }
.dict-actions form:first-child button { background: var(--accent); color: var(--on-accent); }
.dict-edit { grid-column: 1 / -1; }
.dict-edit > summary { list-style: none; cursor: pointer; font-size: 12.5px; color: var(--fg-3); }
.dict-edit > summary::-webkit-details-marker { display: none; }
.dict-empty { padding: 16px; color: var(--fg-3); }

/* Kop van LinkedIn, opnieuw: links voor wie de cijfers gelden en drie cijfers in tegels, rechts alleen wat iemand moet doen */
.head-main .story { max-width: none; gap: var(--s-12); }
.head-main .story .story-scope { margin: 0; font-size: 13px; color: var(--fg-2); }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kpi { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 14px; border-radius: var(--r-md); background: var(--bg-2); }
.kpi-label { font-size: 12.5px; color: var(--fg-2); }
.kpi-value { font-size: 24px; font-weight: 500; line-height: 1.15; color: var(--fg); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi-value--text { font-size: 15px; line-height: 1.35; padding: 4px 0 3px; text-decoration: none; }
a.kpi-value:hover { color: var(--accent); }
.kpi-sub { font-size: 12.5px; color: var(--fg-2); }
.kpi.tone-up .kpi-sub { color: color-mix(in srgb, var(--ok) 60%, var(--fg)); }
.kpi.tone-down .kpi-sub { color: var(--bad); }
.head-main .story .story-tip { margin: 0; font-size: 13.5px; }
.attn { gap: 0; }
.attn-row { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: baseline; gap: 10px; padding: 10px 0; }
.attn-row + .attn-row { border-top: 1px solid color-mix(in srgb, var(--fg-3) 20%, transparent); }
.attn-row:first-child { padding-top: 0; }
.attn-row:last-child { padding-bottom: 0; }
.attn-num { font-size: 20px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.attn-row.tone-bad .attn-num { color: var(--bad); }
.attn-row.tone-info .attn-num { color: var(--info); }
.attn-row.tone-ok .attn-num { color: color-mix(in srgb, var(--ok) 60%, var(--fg)); }
.attn-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.attn-label { font-size: 12.5px; color: var(--fg-2); }
.attn-link { color: var(--fg); font-weight: 500; font-size: 14px; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attn-link:hover { color: var(--accent); }
.attn-row .attn-sub { grid-column: auto; }
@media (max-width: 900px) { .kpis { grid-template-columns: 1fr; } }

/* Bestand kiezen in teamkaarten en de fotobank: eigen knop in plaats van de grijze "Choose files" van de browser */
.team-card input[type=file], .prof-fotos input[type=file] { padding: 0 12px 0 4px; line-height: 34px; color: var(--fg-2); cursor: pointer; }
.team-card input[type=file]::file-selector-button, .prof-fotos input[type=file]::file-selector-button {
  height: 26px; margin: 4px 10px 4px 0; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; }
.team-card input[type=file]::file-selector-button:hover, .prof-fotos input[type=file]::file-selector-button:hover { filter: brightness(1.08); }

/* Woordenboek, tweede ronde: verborgen labels echt verborgen, zoekveld en Soort met meer ruimte, eigen pijl in de keuzelijst, teller los van het woord */
.dict .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dict-filter { gap: 12px; align-items: center; padding-top: var(--s-20); }
.dict-search { flex: 1 1 320px; max-width: 440px; }
.dict-search input { width: 100%; height: 40px; padding: 0 16px 0 38px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none' stroke='%238C918D' stroke-width='1.4' stroke-linecap='round'><circle cx='7' cy='7' r='4.6'/><path d='M10.4 10.4L14 14'/></svg>");
  background-repeat: no-repeat; background-position: 14px center; }
.dict-search input:focus, .dict-soort select:focus { outline: none; box-shadow: 0 0 0 2px var(--accent-bg); }
.dict-soort select { -webkit-appearance: none; appearance: none; height: 40px; min-width: 200px; padding: 0 40px 0 16px; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%235C615E' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M3 4.5L6 7.5L9 4.5'/></svg>");
  background-repeat: no-repeat; background-position: right 16px center; }
.dict-tabs { margin-top: 4px; }
.dict-tab { gap: 8px; }
.dict-count { display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 6px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--fg-3) 16%, transparent); font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--fg-2); }
.dict-tab.active .dict-count { background: var(--accent-bg); color: var(--fg-on-tint); }
/* Bewerken in een rij: wit vlak met grijze velden, zodat elk veld zichtbaar is; Bewerken als kleine knop met pijl */
.dict-edit > summary { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; margin-top: 4px; border-radius: var(--r-pill); background: var(--bg); color: var(--fg-2); font-size: 12.5px; }
.dict-edit > summary::after { content: ""; width: 10px; height: 10px; background: currentColor; transition: transform .2s var(--ease-flow, ease);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 4.5L6 7.5L9 4.5' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 4.5L6 7.5L9 4.5' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat; }
.dict-edit[open] > summary::after { transform: rotate(180deg); }
.dict-edit > summary:hover { color: var(--fg); }
.dict-row .dict-edit form { margin-top: 10px; padding: var(--s-16); border-radius: var(--r-md); background: var(--bg); }
.dict-field { min-width: 0; }
.dict-field input, .dict-field select, .dict-field textarea { width: 100%; box-sizing: border-box; }
.dict-field select { -webkit-appearance: none; appearance: none; padding-right: 36px; cursor: pointer;
  background: var(--bg-2) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%235C615E' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M3 4.5L6 7.5L9 4.5'/></svg>") no-repeat right 14px center; }
.dict-field input:focus, .dict-field select:focus, .dict-field textarea:focus { outline: none; box-shadow: 0 0 0 2px var(--accent-bg); }
.dict-row .dict-save, .dict-row .dict-edit button[type=submit] { height: 34px; padding: 0 16px; border: 0; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }

/* LinkedIn-kop: Aandacht nodig even hoog als de cijfertegels; de tip staat boven de tegels, zodat beide blokken onderaan gelijk eindigen */
.box-head.box-split[data-post-head] { align-items: stretch; }
[data-post-head] .head-main { display: flex; flex-direction: column; }
[data-post-head] .head-main .story { flex: 1; display: flex; flex-direction: column; }
[data-post-head] .head-main .story .kpis { margin-top: auto; }
[data-post-head] .head-side { display: flex; flex-direction: column; }
[data-post-head] .attn { flex: 1; align-content: center; }
.attn-row { align-items: center; }
.attn-num { text-align: center; }

/* Woordenboek als één lijst: rijen met een dunne lijn ertussen in plaats van losse grijze blokken; Bewerken rechtsboven naast Bevestigen en Afwijzen */
.dict-rows { gap: 0; }
.dict-row { position: relative; background: none; border-radius: 0; padding: 14px 4px; border-top: 1px solid color-mix(in srgb, var(--fg-3) 18%, transparent); }
.dict-row:first-child { border-top: 0; }
.dict-row:has(.dict-actions) .dict-actions { margin-right: 96px; }
.dict-actions button { background: var(--bg-2); }
.dict-edit > summary { position: absolute; top: 14px; right: 4px; margin: 0; height: 30px; padding: 0 12px; background: var(--bg-2); font-size: 13px; }
.dict-row .dict-edit form { margin-top: 12px; background: var(--bg-2); }
.dict-row .dict-edit .dict-field input, .dict-row .dict-edit .dict-field select, .dict-row .dict-edit .dict-field textarea { background-color: var(--bg); }
.dict-chip, .dict-status, .dict-variant { background: var(--bg-2); }
/* Woordenboek: toch een blok per term (zo werk je per woord), met Bewerken rechtsboven; velden en labels wit op het grijze blok */
.dict-rows { gap: 6px; }
.dict-row { padding: 14px 16px; border-top: 0; border-radius: var(--r-md); background: var(--bg-2); }
.dict-edit > summary { top: 14px; right: 16px; background: var(--bg); }
.dict-actions button { background: var(--bg); }
.dict-chip, .dict-status, .dict-variant { background: var(--bg); }
.dict-row .dict-edit form { background: var(--bg); }
.dict-row .dict-edit .dict-field input, .dict-row .dict-edit .dict-field select, .dict-row .dict-edit .dict-field textarea { background-color: var(--bg-2); }
/* Liaise heeft een gestapeld logo (woordbeeld, streep, advocaten): even hoog als de rest van de kopbalk, zodat de onderregel leesbaar blijft */
.clientpick-current img[src*="klanten/liaise"] { height: 28px; }

/* Ons bedrijf rechtsboven in de kopbalk: zelfde hoogte als zoeken (28px), opent mensen, teams en bedrijfspagina */
.company-menu { position: relative; }
.company-menu > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: var(--r-pill); background: var(--bg); color: var(--fg-2); font-size: 13px; cursor: pointer; }
.company-menu > summary::-webkit-details-marker { display: none; }
.company-menu > summary:hover, .company-menu[open] > summary { color: var(--fg); }
.company-menu-panel, .me-menu-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 220px; display: grid; padding: 4px; background: var(--bg); border-radius: var(--r-card); box-shadow: var(--shadow-float); font-size: 13px; }
.company-menu-panel a, .me-menu-link { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--r-md); color: var(--fg); text-decoration: none; }
.company-menu-panel a:hover, .me-menu-link:hover { background: var(--bg-2); }
.company-menu-panel a svg { color: var(--fg-2); }

/* Waarschuwing op klantprofielen die nog uit oude skills en notities komen */
.docs-stale { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0 0; padding: 12px 14px; border-radius: var(--r-md); background: color-mix(in srgb, var(--warn) 22%, var(--bg)); color: var(--fg); font-size: 13.5px; line-height: 1.5; }
.docs-stale svg { flex: none; margin-top: 2px; color: color-mix(in srgb, var(--warn) 60%, var(--fg)); }
.docs-stale p { margin: 0; }
.docs-stale b { font-weight: 500; }

/* Brandguide: links een vaste inhoudsopgave, rechts elke sectie als eigen blok met titel en knoppen op één regel */
.brand-guide { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s-24); align-items: start; }
.brand-guide-toc { position: sticky; top: 72px; display: grid; gap: 2px; font-size: 13px; }
.brand-guide-toc-title { margin: 0 0 6px; padding: 0 10px; font-size: 12px; color: var(--fg-3); }
.brand-guide-toc a { padding: 6px 10px; border-radius: var(--r-md); color: var(--fg-2); text-decoration: none; }
.brand-guide-toc a:hover { background: var(--bg-2); color: var(--fg); }
.brand-guide-sections { display: grid; gap: var(--s-12); min-width: 0; }
.brand-guide-sections > .brand-note { margin: 0 0 4px; font-size: 13.5px; color: var(--fg-2); }
.brand-guide-section { padding: var(--s-20) var(--s-24); border-radius: var(--r-card); background: var(--bg-2); scroll-margin-top: 72px; }
.brand-guide-titlerow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand-guide-titlerow h3 { margin: 0; font-size: 20px; font-weight: 500; }
.brand-guide-actions { display: flex; gap: 6px; }
.brand-guide-actions .btn { height: 30px; padding: 0 12px; border-radius: var(--r-pill); background: var(--bg); font-size: 13px; }
.brand-guide-meta { margin: 6px 0 0; font-size: 12.5px; color: var(--fg-3); }
.brand-guide-version { margin-left: 8px; }
.brand-guide-section .docs-stale { background: color-mix(in srgb, var(--warn) 22%, var(--bg-2)); }
.brand-guide-body { margin-top: var(--s-16); max-width: 72ch; font-size: 14.5px; line-height: 1.6; }
.brand-guide-body h2, .brand-guide-body h3 { margin: 1.4em 0 .4em; font-size: 15px; font-weight: 500; }
.brand-guide-body h4, .brand-guide-body h5 { margin: 1.2em 0 .3em; font-size: 13px; font-weight: 500; color: var(--fg-2); }
.brand-guide-body > :first-child { margin-top: 0; }
.brand-guide-proposal { margin-top: var(--s-12); padding: 12px 14px; border-radius: var(--r-md); background: var(--bg); font-size: 13.5px; }
.brand-guide-form { padding: var(--s-20) var(--s-24); border-radius: var(--r-card); background: var(--bg-2); }
.brand-guide-form textarea { width: 100%; min-height: 360px; padding: 12px 14px; border: 0; border-radius: var(--r-md); background: var(--bg); font: inherit; font-size: 14px; line-height: 1.55; }
@media (max-width: 900px) { .brand-guide { grid-template-columns: 1fr; } .brand-guide-toc { position: static; display: flex; flex-wrap: wrap; } }