/* Hive design system: Line network x Departure board (see design/mockups/).
   Every session is a line; status reads like a departure board. Red means
   one thing everywhere: this needs your attention (plus the primary button).

   The whole point of this UI remains that code, diffs and terminal output stay
   readable on a phone: no character limit per message, and anything too wide
   scrolls horizontally within its own block instead of dragging the page
   along. */
@font-face {
  font-family: Overpass; src: url(/static/fonts/overpass-latin.woff2) format("woff2");
  font-weight: 100 900; font-display: swap;
}
@font-face {
  font-family: "Overpass Mono"; src: url(/static/fonts/overpass-mono-latin.woff2) format("woff2");
  font-weight: 300 700; font-display: swap;
}
:root {
  /* ground and surfaces, warm black from the icon */
  --bg: #16090C;
  --s1: #1E1215;
  --s2: #281A1D;
  --s3: #332326;
  --line: #3A2A2D;
  --line-2: #4E3B3E;
  --code-bg: #10070A;
  --text: #F1EDE8;
  --dim: #B3A6A1;
  --faint: #9A8C87;

  /* attention: one red */
  --red: #E5383B;
  --red-ink: #FF6B6D;
  --red-wash: #3A1216;
  --red-fill: #D42D31;        /* button surface: white on it reaches 5:1 */
  --red-fill-hover: #C8282C;
  --dim-on-red: #E3CFCB;
  --on-fill: #FFFFFF;

  /* outcome */
  --ok: #4CC487;
  --ok-wash: rgba(76, 196, 135, .1);   /* end of the turn */
  --ok-ring: rgba(76, 196, 135, .35);
  --del: #F28B8D;

  /* line colours: each session gets one, fixed; never red */
  --l-blue: #4A86E0;
  --l-yellow: #F2C230;
  --l-green: #2FA66A;
  --l-violet: #A578E0;
  --l-orange: #F08A3C;
  --l-cyan: #34B5C4;
  --l-pink: #E77FB3;
  --l-off: #6E6265;
  /* Zones: departments (Collective) and memory layers. A zone is an area, never
     a line: a soft wash behind things and a small mark in the full hue. Lines stay
     the sessions' own (Vaste-Lijn-regel); see DESIGN.md, Zone-regel. */
  --z1: var(--l-blue); --z2: var(--l-violet); --z3: var(--l-cyan); --z4: var(--l-green);
  --z5: var(--l-orange); --z6: var(--l-yellow); --z7: var(--l-pink);
  --zone-wash: 13%;

  /* stops: white with a dark border, like on the map */
  --st-fill: var(--text);
  --st-edge: var(--s1);

  /* what the browser would otherwise pick itself */
  --sel-ink: #0B0507;
  --on-ok: #0B0507;
  --zebra: rgba(255, 255, 255, .025);
  --red-ring: rgba(229, 56, 59, .45);
  --shadow-pop: 0 16px 40px rgba(0, 0, 0, .45);
  --scrim: rgba(11, 5, 7, .55);
  color-scheme: dark;

  /* old names, so every existing rule stays correct */
  --panel: var(--s1);
  --panel-2: var(--s2);
  --accent: var(--red);       /* tekenWave reads these for the waveform */
  --warn: var(--l-orange);
  --err: var(--red-ink);
  --fg: var(--text);

  --sans: Overpass, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Overpass Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --r-1: 4px; --r-2: 8px; --r-3: 12px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --fast: 140ms;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
/* Light: the same metro map, printed on warm paper. By day at the desk
   near a window the dark board is a mirror; this is the daylight version, not
   an inverted one. Red remains the only alarm, lines get a shade deeper
   so they reach their 3:1 on paper. */
:root[data-theme="light"] {
  --bg: #F6F1EC;
  --s1: #FFFDFB;
  --s2: #EEE6E0;
  --s3: #E3D8D1;
  --line: #DDD0C8;
  --line-2: #C2B2A9;
  --code-bg: #F0E9E3;
  --text: #1E1215;
  --dim: #5B4C48;
  --faint: #6E5E58;

  --red: #D42D31;
  --red-ink: #B11D22;
  --red-wash: #FBE4E2;
  --red-fill: #D42D31;
  --red-fill-hover: #B9252A;
  --dim-on-red: #6E2B2D;
  --on-fill: #FFFFFF;

  --ok: #1C7A4B;
  --ok-wash: rgba(28, 122, 75, .1);   /* end of the turn */
  --ok-ring: rgba(28, 122, 75, .35);
  --del: #B93437;

  --l-blue: #2F6FCF;
  --l-yellow: #C99500;
  --l-green: #23905A;
  --l-violet: #8A58CF;
  --l-orange: #D9692A;
  --l-cyan: #16919F;
  --l-pink: #CC5592;
  --l-off: #A3948E;
  --zone-wash: 16%;

  --st-fill: #FFFFFF;
  --st-edge: var(--text);

  --sel-ink: #FFFFFF;
  --on-ok: #FFFFFF;
  --zebra: rgba(30, 18, 21, .035);
  --red-ring: rgba(212, 45, 49, .5);
  --shadow-pop: 0 12px 32px rgba(46, 24, 28, .16), 0 2px 6px rgba(46, 24, 28, .08);
  --scrim: rgba(46, 24, 28, .28);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%;
  background: var(--bg); color: var(--text);
  font: 400 15px/1.5 var(--sans);
  font-feature-settings: "tnum";
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
[hidden] { display: none !important; }
code, pre, kbd { font-family: var(--mono); }
::selection { background: var(--l-blue); color: var(--sel-ink); }
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 10px; border: 3px solid var(--bg); }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
button { font-family: inherit; }
a { color: var(--text); text-underline-offset: 3px; text-decoration-color: var(--line-2); }
input, textarea { caret-color: var(--text); }
input::placeholder, textarea::placeholder { color: var(--faint); }

/* Icons: one set, drawn on a 24 grid with stroke 1.8 (sprite in index.html). */
.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8;
     stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }

/* Board label: column headers, status words, menu headers. */
.t-board { font: 700 11px/16px var(--sans); letter-spacing: .08em; text-transform: uppercase; }

/* ---------- login ---------- */
.gate { max-width: 420px; margin: 15vh auto; padding: 0 20px; }
.gate h1 { font-size: 22px; margin: 0 0 6px; }
.gate p { color: var(--dim); font-size: 14px; }
.gate input, .gate button {
  width: 100%; padding: 12px; margin-top: 10px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 16px;
}
.gate button { background: var(--red-fill); color: var(--on-fill); font-weight: 700; border: 0; }
.err { color: var(--err); min-height: 1.2em; }

/* ---------- frame ---------- */
#app { display: flex; flex-direction: column; height: 100%; }
header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 8px; background: var(--panel);
  border-bottom: 1px solid var(--line); position: relative; z-index: 5;
}
header .title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; overflow: hidden; }
header .title > * { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
header .title strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.state { font-size: 11px; color: var(--dim); }
.state.busy { color: var(--text); }
.state.idle { color: var(--ok); }
.state.dead { color: var(--err); }
.icon {
  display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 8px;
  background: transparent; border: 0; color: var(--dim);
  font-size: 19px; border-radius: var(--r-2); cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.icon:hover { background: var(--s2); color: var(--text); }
.icon:active { background: var(--s3); }

/* ---------- project drawer ---------- */
#drawer {
  position: fixed; inset: 0 auto 0 0; width: min(86vw, 360px); z-index: 20;
  background: var(--panel); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; padding: 10px;
}
.drawer-head { display: flex; align-items: center; justify-content: space-between; }
.drawer-actions { display: flex; align-items: center; gap: 6px; }
.mini {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 8px; padding: 6px 10px; font-size: 13px; cursor: pointer;
}
.mini:active { background: var(--line); }
#projFilter {
  margin: 10px 0; padding: 10px; border-radius: 8px; font-size: 16px;
  border: 1px solid var(--line); background: var(--bg); color: var(--text);
}
#projList { overflow-y: auto; flex: 1; }
.ver { color: var(--dim); font-size: 11px; padding: 6px 2px 0; }
.proj {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 10px; margin-bottom: 4px; border-radius: 8px; cursor: pointer;
  background: transparent; border: 0; color: var(--text); font-size: 14px; text-align: left;
}
.proj:active, .proj.active { background: var(--panel-2); }
/* folders without a session are off the board; this line says how many and opens the search */
.projmeer { display: block; width: 100%; padding: 10px; margin-top: 4px; border: 0; background: transparent; color: var(--faint); font-size: 13px; text-align: left; cursor: pointer; }
.projmeer:hover { color: var(--dim); }
.proj .dot, .stab .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--line); flex: none;
}
.proj .dot.idle, .stab .dot.idle { background: var(--ok); }
.proj .dot.busy, .stab .dot.busy { background: var(--text); animation: pulse 1.4s infinite; }
.proj .dot.dead, .stab .dot.dead { background: var(--err); }
.proj span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.popup {
  position: absolute; top: 52px; right: 8px; z-index: 30;
  background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--r-3);
  display: flex; flex-direction: column; min-width: 220px; overflow: hidden;
  box-shadow: var(--shadow-pop);
}
/* A popup with a max height scrolls; its rows keep their height instead of shrinking
   (the Meldingen title was squashed to 21px under a long list) */
.popup > * { flex-shrink: 0; }
.popup button {
  display: flex; align-items: center; gap: 10px;
  background: transparent; border: 0; color: var(--text);
  padding: 11px 14px; text-align: left; font-size: 14px; cursor: pointer;
}
.popup button .i { color: var(--dim); width: 18px; height: 18px; }
.popup button:hover { background: var(--s3); }
.popup button:active { background: var(--panel); }

/* ---------- conversation ---------- */
#log { flex: 1; overflow-y: auto; padding: 10px 10px 4px; -webkit-overflow-scrolling: touch; }
.msg { margin-bottom: 10px; }
.msg.user {
  background: var(--panel-2); border-radius: 12px 12px 4px 12px;
  padding: 8px 12px; margin-left: auto; max-width: 88%; width: fit-content;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.msg.text { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.text h1, .msg.text h2, .msg.text h3 { font-size: 16px; margin: 12px 0 4px; }
.msg.text ul, .msg.text ol { padding-left: 20px; margin: 6px 0; }

/* This is why we don't use a chat app: code may be wide and scrolls
   within its own block, without dragging the page horizontally along. */
.msg.text pre, .tool-body pre {
  background: var(--code-bg); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px; margin: 8px 0; overflow-x: auto;
  font-size: 12.5px; line-height: 1.45; white-space: pre; tab-size: 2;
}
.msg.text code:not(pre code) {
  background: var(--panel-2); border-radius: 4px; padding: 1px 5px; font-size: 12.5px;
}
/* Tables scroll within their own block, just like code: on a 360px
   phone a four-column table shouldn't drag the whole page along. */
.msg.text table {
  border-collapse: collapse; display: block; width: max-content; max-width: 100%;
  overflow-x: auto; font-size: 13px; margin: 8px 0; white-space: normal;
}
.msg.text th, .msg.text td {
  border: 1px solid var(--line); padding: 6px 9px; overflow-wrap: anywhere;
}
.msg.text th { background: var(--panel-2); font-weight: 600; }
.msg.text tbody tr:nth-child(even) { background: var(--zebra); }
.diff-add { color: var(--ok); }
.diff-del { color: var(--err); }

.tool { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 8px; overflow: hidden; }
.tool summary {
  padding: 8px 10px; cursor: pointer; font-size: 13px; display: flex; gap: 8px;
  align-items: baseline; background: var(--panel); list-style: none;
}
.tool summary::-webkit-details-marker { display: none; }
.tool .tname { color: var(--text); font-weight: 600; font-family: var(--mono); font-size: 12px; flex: none; }
.tool .tsum {
  color: var(--dim); font-family: var(--mono); font-size: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tool.err .tname { color: var(--err); }
.tool-body { padding: 0 10px 8px; }
.tool-body pre { max-height: 60vh; overflow: auto; }

/* End of a turn: a stop on the session's line, green KLAAR. The
   last stop at the bottom of the conversation is fully in view: your turn. */
.turn {
  --lijn: var(--l-off);
  display: flex; align-items: center; gap: 10px; margin: 6px 0 16px; padding: 6px 0;
  color: var(--faint); font-size: 12px; position: relative;
}
.turn::before {                      /* the piece of line up to the stop */
  content: ""; width: 28px; height: 4px; border-radius: 2px; background: var(--lijn); flex: none; opacity: .6;
}
.turn .tstop {
  width: 12px; height: 12px; border-radius: 50%; flex: none; margin-left: -12px;
  background: var(--bg); border: 3px solid var(--ok); box-sizing: border-box;
}
.turn .status.done { color: var(--ok); }
.turn .tjij { display: none; color: var(--text); font-weight: 600; }
.turn .tmeta { margin-left: auto; font: 400 11px/16px var(--mono); color: var(--faint); }
.turn:last-child {
  margin-top: 12px; padding: 10px 14px; border-radius: var(--r-2);
  background: var(--ok-wash); box-shadow: inset 0 0 0 1px var(--ok-ring);
}
.turn:last-child::before { display: none; }
.turn:last-child .tstop { margin-left: 0; background: var(--ok); border-color: var(--ok); }
.turn:last-child .tjij { display: inline; }

/* Tools in a row: one line, expanding shows each step. */
.toolgroup { border: 1px solid var(--line); border-radius: var(--r-2); margin-bottom: 8px; background: var(--panel); }
.toolgroup > summary {
  display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 8px 12px;
  cursor: pointer; list-style: none; font-size: 13px; color: var(--dim);
}
.toolgroup > summary::-webkit-details-marker { display: none; }
.toolgroup > summary .i { width: 16px; height: 16px; color: var(--faint); }
.toolgroup > summary:hover { color: var(--text); }
.toolgroup .gcount { color: var(--text); font-weight: 600; flex: none; }
.toolgroup .gkinds { font: 600 12px/16px var(--mono); color: var(--dim); flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toolgroup .glast { font: 400 12px/16px var(--mono); color: var(--faint); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 0; }
.toolgroup .gmis { color: var(--red-ink); font-weight: 600; flex: none; }
.toolgroup .gmis:empty { display: none; }
.toolgroup .glimit { color: var(--l-orange); font: 600 12px/16px var(--sans); flex: none; white-space: nowrap; }
.toolgroup .glimit:empty { display: none; }
.toolgroup .ratenote { display: flex; align-items: center; gap: 8px; color: var(--dim); font-size: 12px; padding: 4px 2px; }
.toolgroup .ratenote .i { width: 14px; height: 14px; color: var(--l-orange); flex: none; }
.notice.ratenote.stop { color: var(--red-ink); font-weight: 600; }
.toolgroup[open] > summary { border-bottom: 1px solid var(--line); }
.toolgroup .gbody { padding: 8px; }
.toolgroup .gbody .tool:last-child { margin-bottom: 0; }
.notice { color: var(--dim); font-size: 12px; margin-bottom: 8px; }
.imgs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.imgs img { max-width: 120px; border-radius: 8px; }

/* ---------- questions from other sessions ---------- */
#askBar { border-top: 1px solid var(--red); background: var(--red-wash); padding: 10px; }
.ask-q { font-size: 14px; margin-bottom: 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ask-src { color: var(--faint); font-size: 12px; }
.ask-q .ask-src { color: var(--red-ink); font-size: inherit; font-weight: 700; }
.ask-choices { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.ask-choices button {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 16px; padding: 6px 12px; font-size: 13px; cursor: pointer;
}
.ask-row { display: flex; gap: 6px; }
.ask-row input {
  flex: 1; padding: 9px; border-radius: 8px; font-size: 16px;
  border: 1px solid var(--line); background: var(--bg); color: var(--text);
}
.ask-row button { background: var(--red-fill); color: var(--on-fill); border: 0; border-radius: 8px; padding: 0 14px; font-weight: 600; }

/* ---------- input ---------- */
footer { border-top: 1px solid var(--line); background: var(--panel); padding: 8px 8px calc(8px + var(--safe-b)); }
/* A file dragged over the conversation: the same mark as any drop target. */
#log.doel, footer.doel { background: var(--s2); box-shadow: inset 0 0 0 1px var(--dim); }
/* While dragging, and while attachments wait to go, the quick actions step aside. */
footer.doel #chips, footer.bijlagen #chips { display: none; }
#thumbs { display: flex; gap: 6px; flex-wrap: wrap; }
#thumbs img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; }
#thumbs .wrap { position: relative; }
#thumbs .x {
  position: absolute; top: -6px; right: -6px; background: var(--red-fill); color: var(--on-fill);
  border: 0; border-radius: 50%; width: 20px; height: 20px; font-size: 12px; cursor: pointer;
}
.composer { display: flex; align-items: flex-end; gap: 6px; margin-top: 6px; }
#input {
  flex: 1; resize: none; max-height: 40vh; padding: 10px; font-size: 16px;
  border-radius: 10px; border: 1px solid var(--line); background: var(--bg);
  color: var(--text); font-family: inherit; line-height: 1.4;
}
.send {
  display: inline-grid; place-items: center;
  background: var(--red-fill); color: var(--on-fill); border: 0; border-radius: var(--r-2);
  width: 40px; height: 40px; font-size: 19px; font-weight: 700; flex: none; cursor: pointer;
}
.send:disabled { opacity: .4; }
#micBtn.rec { color: var(--err); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .35; } }

@media (min-width: 780px) {
  #log { padding: 16px 24px 4px; }
  footer { padding: 10px 24px calc(10px + var(--safe-b)); }
}

/* Install button on the login gate: present but not louder than "Verbinden". */
.gate button.ghost {
  background: transparent;
  color: var(--dim);
  border: 1px solid var(--line);
  font-weight: 500;
}

/* Recording bar: waveform + elapsed time, only visible while recording. */
#recBar { display: flex; align-items: center; gap: 10px; padding: 6px 12px 0; }
#wave { flex: 1; height: 36px; display: block; }
.rectime { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--dim); }

/* Interim transcription: deliberately muted, because it may still change. */
#interim {
  padding: 4px 12px 0;
  font-size: 14px;
  font-style: italic;
  color: var(--dim);
  max-height: 4.5em;
  overflow-y: auto;
}

/* Overview: search bar across all transcripts. */
.searchrow { display: flex; gap: 6px; align-items: center; }
.searchrow input { flex: 1; }
#qResults { max-height: 45vh; overflow-y: auto; margin: 8px 0; }
#qResults .hit {
  display: block; width: 100%; text-align: left; background: var(--s1);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px;
  margin-bottom: 6px; color: var(--fg); font-size: 13px;
}
#qResults .hit b { color: var(--text); font-weight: 600; }
#qResults .hit .when { color: var(--dim); font-size: 11px; }

/* Project row in the overview: state, title and what is waiting for you. */
.proj .meta { display: block; color: var(--dim); font-size: 11px; margin-top: 2px; }
.proj .badge {
  margin-left: auto; background: var(--s3); color: var(--text);
  border-radius: 10px; padding: 1px 7px; font-size: 11px; font-weight: 700;
}
.proj .badge.ask { background: var(--red-fill); }

/* Messages waiting for network. */
.queued { padding: 4px 12px 0; font-size: 12px; color: var(--red-ink); }

/* ---------- file browser ---------- */
/* Unfolds below the folder in the header and stays put: you browse the list with
   one hand while the conversation next to it simply carries on. You close it
   with the cross or by tapping the folder again - not by clicking
   beside it, because then it would close just as you are trying to read a
   preview. */
#fileDrawer {
  position: fixed; z-index: 25;
  top: 0; right: 0; width: min(94vw, 460px);
  max-height: 78vh;
  background: var(--panel);
  border: 1px solid var(--line); border-right: 0; border-top: 0;
  border-radius: 0 0 0 12px;
  box-shadow: var(--shadow-pop);
  display: flex; flex-direction: column;
  padding: 6px 8px 8px;
}
.fhead { display: flex; align-items: center; gap: 8px; }
.fwho {
  font-size: 12px; color: var(--dim); font-family: var(--mono);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34%;
}
.fhead .tabs { flex: 1; margin: 0; }
.fhead .icon { padding: 4px 6px; font-size: 16px; }
#fileDrawer input {
  margin: 6px 0; padding: 7px 9px; border-radius: 7px; font-size: 15px;
  border: 1px solid var(--line); background: var(--bg); color: var(--text);
}
#fileList { overflow-y: auto; flex: 1; }
.tabs { display: flex; gap: 4px; }
.tab {
  flex: 1; padding: 5px 8px; border-radius: 7px; cursor: pointer; font-size: 12px;
  background: var(--bg); border: 1px solid var(--line); color: var(--dim);
}
.tab.active { background: var(--panel-2); color: var(--text); border-color: var(--text); }
.fpath {
  font-size: 11px; color: var(--dim); font-family: var(--mono);
  padding: 4px 2px 0; overflow-wrap: anywhere;
}
.fnote { color: var(--dim); font-size: 12px; padding: 8px 4px; }

/* One line per file: icon, name, and on the right date and size. No
   margin between the rows - a thin divider keeps them apart and you
   see twice as many at a glance. */
.fitem {
  display: flex; align-items: baseline; gap: 8px; width: 100%;
  padding: 4px 6px; border-radius: 6px; cursor: pointer;
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  color: var(--text); font-size: 13px; text-align: left; line-height: 1.35;
}
.fitem:last-child { border-bottom: 0; }
.fitem:hover, .fitem:active { background: var(--panel-2); }
.fitem .fi { flex: none; font-size: 13px; }
.fitem .fname {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The folder sits after the name, muted: it only has to tell apart two files
   with the same name. */
.fitem .ffolder { color: var(--dim); font-size: 11px; font-family: var(--mono); margin-left: 6px; }
/* Share button on the row: muted until you hover over it, because it is
   the second thing you do with a file, not the first. On a phone it is
   always there — there is no hover to bring it up. */
.fitem .fpub {
  flex: none; padding: 0 4px; border-radius: 5px; font-size: 13px;
  color: var(--dim); opacity: .55;
}
.fitem:hover .fpub { opacity: 1; }
.fitem .fpub:hover { background: var(--s3); color: var(--text); }
@media (hover: none) { .fitem .fpub { opacity: 1; padding: 0 8px; } }

.fitem .fmeta {
  flex: none; color: var(--dim); font-size: 11px; font-family: var(--mono);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}

/* Folder in the header with the counter inside. */
.fbadge { position: relative; }
.fbadge.open { background: var(--panel-2); }
.fbadge .cnt {
  position: absolute; top: 0; right: 2px;
  background: var(--s3); color: var(--text);
  border-radius: 9px; padding: 0 4px; min-width: 15px;
  font-size: 11px; font-weight: 700; line-height: 15px; text-align: center;
}

/* Hover card: what is in the file, without opening it. */
#fpreview {
  position: fixed; z-index: 30;
  max-height: 60vh; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow-pop);
  pointer-events: none;
}
#fpreview .phead {
  display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
  padding: 7px 10px; border-bottom: 1px solid var(--line);
  font-size: 12px; font-weight: 600;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
#fpreview .phead span { color: var(--dim); font-weight: 400; font-family: var(--mono); font-size: 11px; }
#fpreview .ptxt {
  margin: 0; padding: 8px 10px; font-size: 11px; line-height: 1.4;
  max-height: 46vh; overflow: hidden; white-space: pre-wrap; color: var(--dim);
}
#fpreview .pmd {
  padding: 4px 10px; font-size: 12px; max-height: 46vh; overflow: hidden;
}
#fpreview .pmd > :first-child { margin-top: 4px; }
#fpreview .pmd h1 { font-size: 15px; }
#fpreview .pmd h2 { font-size: 14px; }
#fpreview .pmd h3 { font-size: 13px; }
#fpreview .pmd pre { font-size: 11px; }
#fpreview .pempty { padding: 8px 10px; font-size: 11px; color: var(--dim); }

/* Spinning wheel by the prompt: the session is busy. Small and left of the
   input field, where your eye already is when you start typing. */
.spin {
  flex: none; width: 15px; height: 15px; margin: 0 3px 12px;
  border: 2px solid var(--line-2); border-top-color: var(--text);
  border-radius: 50%; animation: draai .8s linear infinite;
}
@keyframes draai { to { transform: rotate(360deg); } }
#input.bezig { border-color: var(--line-2); }

/* ---------- tab bar of running sessions ---------- */
/* Scrolls horizontally, because five projects don't fit on a phone and
   cutting off is better than wrapping down: the bar has to stay one line
   high, otherwise it eats up the conversation. */
#stabs {
  display: flex; gap: 4px; padding: 5px 6px;
  background: var(--panel); border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none; position: relative; z-index: 4;
}
#stabs::-webkit-scrollbar { display: none; }
.stab {
  display: flex; align-items: center; gap: 5px; flex: none;
  max-width: 45vw; padding: 4px 9px; border-radius: 14px; cursor: pointer;
  background: var(--bg); border: 1px solid var(--line); color: var(--dim);
  font-size: 12px; font-family: inherit;
}
.stab.active { background: var(--panel-2); color: var(--text); border-color: var(--text); }
.stab .sname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stab .sbadge {
  background: var(--s3); color: var(--text); border-radius: 9px;
  padding: 0 5px; font-size: 11px; font-weight: 700;
}
.stab .sbadge.ask { background: var(--red-fill); }

/* Choice buttons under an answer (```keuzes). */
.keuzes { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.keuzes button {
  background: var(--s2); color: var(--text); border: 1px solid var(--line-2); border-radius: 22px;
  padding: 11px 18px; font-size: 15px; font-weight: 600; cursor: pointer;
}
.keuzes button:hover { background: var(--s3); }
.keuzes button:active { filter: brightness(0.85); }
.keuzes button.klaar { background: var(--ok); border-color: var(--ok); color: var(--on-ok); }

/* Notice that a newer version is ready. */
.update {
  padding: 8px 12px; font-size: 13px; color: var(--on-fill); background: var(--red-fill);
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
}
.update button {
  background: var(--bg); color: var(--text); border: 0; border-radius: 8px;
  padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
}

/* ---------- counter on an icon in the top bar ---------- */
.kbadge { position: relative; }
.kbadge .cnt {
  position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px;
  background: var(--s3); color: var(--text); border-radius: 8px;
  font-size: 11px; line-height: 15px; font-weight: 700; text-align: center;
}
.kbadge .cnt:empty { display: none; }
.kbadge .cnt.rood { background: var(--red-fill); color: var(--on-fill); }   /* something needs you */

/* A document has no thumbnail: a card with its type, its name and, for text,
   the opening words, so you see what you're attaching. */
#thumbs .wrap.doc {
  display: flex; align-items: center; gap: 8px; width: 220px; max-width: 100%; min-height: 52px;
  padding: 6px 10px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-2);
}
#thumbs .doctype {
  flex: none; font: 600 10px/1 var(--mono); color: var(--dim); background: var(--s2);
  border-radius: var(--r-1); padding: 4px 5px; letter-spacing: .04em;
}
#thumbs .docbody { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#thumbs .docname { font-size: 12px; color: var(--text); line-height: 1.2;
                   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#thumbs .docpeek { font-size: 11px; color: var(--dim); line-height: 1.3; overflow: hidden;
                   display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.ask-std { font-size: 12px; color: var(--dim); margin-bottom: 8px; }
.ask-std b { color: var(--text); }

/* Recording bar for a meeting: must stand out, because the screen stays on
   and it is listening along. */
.meetingbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; background: var(--red-wash); color: var(--text);
  font-family: var(--mono); font-size: 13px;
}
.meetingbar button {
  background: var(--red-fill); color: var(--on-fill); border: 0; border-radius: 8px;
  padding: 7px 14px; font-size: 13px; font-weight: 600;
}

/* Copy: an icon that appears when you hover over the block or the message,
   like in Claude. On a phone (no hover) it is shown muted. */
.msg.text pre, .msg.text, .msg.user { position: relative; }
button.copy {
  position: absolute; top: 6px; right: 6px; display: grid; place-items: center;
  width: 32px; height: 32px; padding: 0; border-radius: var(--r-2); cursor: pointer;
  background: var(--panel-2); color: var(--dim); border: 1px solid var(--line);
  opacity: 0; transition: opacity var(--fast) var(--ease), color var(--fast) var(--ease), background var(--fast) var(--ease);
}
button.copy .i { width: 16px; height: 16px; }
pre:hover > button.copy, blockquote:hover > button.copy,
.msg:hover > button.copy.bericht, button.copy:focus-visible,
button.copy.gelukt, button.copy.mislukt { opacity: 1; }
/* Over a code block or quote only their own button counts; the one of the
   surrounding message disappears then, otherwise you see two. */
.msg:has(pre:hover, blockquote:hover) > button.copy.bericht:not(.gelukt):not(.mislukt) { opacity: 0; pointer-events: none; }
button.copy:hover { color: var(--text); background: var(--s3); }
button.copy.gelukt { color: var(--ok); }
button.copy.mislukt { color: var(--red-ink); }
/* At the desk a message's copy button floats top right, without its
   own row; on a phone it sits muted below the message. */
button.copy.bericht { top: -14px; right: 0; width: 28px; height: 28px; background: var(--s2); border-color: var(--line-2); z-index: 1; }
.msg.user > button.copy.bericht { position: absolute; margin: 0; left: -36px; bottom: 2px; }

@media (hover: none) {
  button.copy { opacity: .55; }
  button.copy.bericht { position: static; margin: 2px 0 -4px auto; background: none; border-color: transparent; }
  .msg.user > button.copy.bericht { display: none; }   /* no room next to the bell on a phone */
}

/* Quote = a draft for an email or message. Clearly delimited, with its
   own copy button, so you don't take the explanation below along with it. */
.msg.text blockquote {
  position: relative;
  margin: 10px 0; padding: 12px 14px 34px;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--r-2); white-space: pre-wrap;
}
.msg.text blockquote button.copy { top: auto; bottom: 6px; right: 6px; }
.msg.text blockquote { padding-bottom: 14px; padding-right: 48px; }


/* ---------- car mode ----------
   The screen in the car is further away than a phone and you look at it in
   glances. So: fewer lines, bolder letters, buttons you hit
   without aiming. What you won't read while driving anyway (tool output,
   code, token counters) goes away — it will still be there when you park. */
body.auto { font-size: 21px; }
body.auto #log { font-size: 21px; line-height: 1.55; }
body.auto .msg { padding: 16px 18px; margin: 10px 0; border-radius: 14px; }
body.auto .msg.text { font-size: 22px; }
body.auto .tool, body.auto .turn, body.auto pre, body.auto .ask-src { display: none; }
body.auto .msg.text pre, body.auto .msg.text code { display: none; }
body.auto #input { font-size: 22px; min-height: 68px; padding: 14px 16px; }
body.auto button, body.auto .tab { min-height: 62px; font-size: 20px; padding: 0 20px; }
body.auto #moreMenu button { min-height: 66px; }
body.auto .ask { font-size: 22px; padding: 18px; }
body.auto .ask button { min-height: 68px; font-size: 21px; }
body.auto .choice, body.auto .cookbtn { min-height: 68px; font-size: 21px; }
body.auto .notice, body.auto .dim, body.auto small { font-size: 18px; }
body.auto #projects .prj { min-height: 64px; font-size: 20px; }

body.auto .gate { max-width: 100%; margin: 6vh auto; padding: 0 28px; }
body.auto .gate input { font-size: 26px; min-height: 68px; letter-spacing: 2px; }
body.auto .gate button { min-height: 70px; font-size: 22px; }
body.auto .gate p, body.auto .gate label { font-size: 20px; }

/* Session menu: the same coat as the main menu, with the session name above it
   so you never accidentally refresh the wrong session. */
.popup .menuhead { padding: 10px 14px; color: var(--faint);
                 font: 700 11px/16px var(--sans); letter-spacing: .08em; text-transform: uppercase;
                 border-bottom: 1px solid var(--line); overflow: hidden;
                 text-overflow: ellipsis; white-space: nowrap; }
body.auto #sessionMenu button { min-height: 66px; }
/* The little car in the bar shows whether car mode is on. */
#autoBtn.aan { background: var(--text); color: var(--bg); border-radius: 10px; }

/* What agents are running now. Sits below the session name, because that's where
   you look when you wonder why it stays quiet. */
.agents { display: block; color: var(--text); font-size: 12px; overflow: hidden;
          text-overflow: ellipsis; white-space: nowrap; }
.stab .sagent { color: var(--text); font-size: 11px; }
body.auto .agents { font-size: 17px; }
.ctx { display: block; font-size: 12px; letter-spacing: -1px; white-space: nowrap; }
.ctx.ok { color: var(--ok); }
.ctx.let { color: var(--warn); }
.ctx.vol { color: var(--l-orange); }
.ctx.kritiek { color: var(--err); font-weight: 700; }
body.auto .ctx { font-size: 17px; }

/* Quick actions above the prompt: one tap instead of typing on a phone.
   They scroll horizontally, because five never fit on a narrow screen. */
#chips { display: flex; gap: 6px; overflow-x: auto; padding: 0 0 6px;
         -webkit-overflow-scrolling: touch; scrollbar-width: none; }
#chips::-webkit-scrollbar { display: none; }
.chip { flex: none; background: var(--panel-2); color: var(--dim); border: 1px solid var(--line);
        border-radius: 14px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
.chip:hover { color: var(--text); }
.chip:active { background: var(--s3); color: var(--text); }
body.auto .chip { font-size: 16px; padding: 10px 16px; }
.chip.wis { color: var(--err); border-color: var(--err); }
.chip.wis.terug { color: var(--warn); border-color: var(--warn); }

/* The agent's plan in the header. Collapsed one line, expanded a
   list — that saves a lot of scrolling in the car. */
.tasks { display: block; font-size: 12px; color: var(--dim); cursor: pointer;
         overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tasks b { color: var(--text); display: block; }
.tasks .task { display: block; white-space: nowrap; overflow: hidden;
               text-overflow: ellipsis; }
.tasks .task.completed { opacity: .55; }
.tasks .task.in_progress { color: var(--text); font-weight: 700; }
body.auto .tasks { font-size: 17px; white-space: normal; }

/* A running agent should be visible without searching: its own colour, its own
   clock, and it stays open until it's done. */
.tool.agentblok { border-color: var(--line-2); background: var(--panel); margin: 8px 0; }
.tool.agentblok .tname { color: var(--text); font-weight: 700; }
.tool.agentblok .aclock { margin-left: auto; padding-left: 10px; font-size: 12px;
                         color: var(--dim); font-family: var(--mono); white-space: nowrap; }
.tool.agentblok.loopt .tname { animation: agentpuls 1.6s ease-in-out infinite; }
.tool.agentblok.gedaan { border-color: var(--line); }
.tool.agentblok.gedaan .tname, .tool.agentblok.gedaan .aclock { color: var(--ok); }
.tool.agentblok.mis { border-color: var(--red); }
.tool.agentblok.mis .tname, .tool.agentblok.mis .aclock { color: var(--err); }
@keyframes agentpuls { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
body.auto .tool.agentblok { display: block; }   /* do show this one on the road */

/* links from this conversation */
.linklist { margin: 6px 0 12px; display: flex; flex-direction: column; gap: 6px; }
.linklist > button { align-self: flex-start; }
.linkrow { display: block; padding: 10px 12px; border-radius: 10px; background: var(--panel);
           border: 1px solid var(--line); text-decoration: none; color: var(--text); }
.linkrow:active { background: var(--line); }
.linkdesc { font-size: 15px; line-height: 1.35; color: var(--text); }
.linkurl { margin-top: 3px; font-size: 12.5px; color: var(--dim); font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linkbar { display: flex; gap: 6px; flex-wrap: wrap; }
.linkbar button { border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 16px; padding: 6px 12px; font: inherit; font-size: 13.5px; }
.linkbar button.aan { background: var(--text); border-color: var(--text); color: var(--bg); }
.linkrow[hidden] { display: none; }

/* Small button with an icon in front (e.g. "+ ad hoc"). */
.mini { display: inline-flex; align-items: center; gap: 6px; }
.mini .i { width: 16px; height: 16px; }

/* =====================================================================
   Cockpit (body.breed, from 1100 px): line network at the top, departure board
   on the left, conversation in the middle, inspector on the right. Narrower than that,
   these parts disappear or stay compact and the phone layout applies.
   ===================================================================== */

/* -- shared: line bar, status word, stops, counters -- */
.linebar { display: inline-block; width: 14px; height: 6px; border-radius: 3px; flex: none; background: var(--line); }
.status { font: 700 11px/16px var(--sans); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.status.busy { color: var(--text); }
.status.busy::before {
  content: ""; display: inline-block; width: 12px; height: 2px; margin-right: 6px; vertical-align: 3px;
  background: linear-gradient(90deg, var(--text) 50%, transparent 0) 0 0 / 6px 2px; animation: streep .6s linear infinite;
}
@keyframes streep { to { background-position: 6px 0; } }
.status.wait, .status.err { color: var(--red-ink); }
.status.done { color: var(--ok); }
.status.off { color: var(--faint); }
.tel { font: 600 11px/16px var(--mono); color: var(--faint); }

.stops { list-style: none; margin: 0; padding: 0; --lijn: var(--l-blue); }
.halte { position: relative; padding: 3px 0 3px 26px; font-size: 13px; line-height: 18px; color: var(--dim); }
.halte::before {                     /* the piece of line to the next stop */
  content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 6px; background: var(--lijn);
}
.halte.pending::before, .halte.in_progress::before { background: var(--line-2); }
.halte.in_progress::before { background: linear-gradient(var(--lijn) 50%, var(--line-2) 50%); }
.halte:first-child::before { top: 50%; }
.halte:last-child::before { bottom: 50%; }
.halte:only-child::before { display: none; }
.halte::after {                      /* the stop itself */
  content: ""; position: absolute; left: 3px; top: 50%; width: 12px; height: 12px; margin-top: -6px;
  border-radius: 50%; background: var(--st-fill); border: 2px solid var(--st-edge); box-shadow: 0 0 0 2px var(--bg); box-sizing: border-box;
}
.halte.pending::after { background: var(--bg); border: 2px solid var(--faint); box-shadow: none; width: 10px; height: 10px; margin-top: -5px; left: 4px; }
.halte.in_progress { color: var(--text); font-weight: 700; }
.halte.in_progress::after { background: var(--bg); border: 3px solid var(--text); box-shadow: 0 0 0 2px var(--bg); width: 14px; height: 14px; margin-top: -7px; left: 2px; }
.stops.loopt .halte.in_progress::after { animation: halte 1.8s var(--ease) infinite; }
@keyframes halte { 0% { box-shadow: 0 0 0 0 var(--lijn); } 100% { box-shadow: 0 0 0 9px transparent; } }
.halte.completed { color: var(--faint); }

/* -- top bar -- */
header.topbar { gap: 8px; padding: 8px; background: var(--bg); }
.topbar .brand { display: flex; align-items: center; gap: 10px; font: 800 18px/1 var(--sans); letter-spacing: -.01em; flex: none;
  background: none; border: 0; color: var(--text); padding: 4px 6px; margin-left: -6px; border-radius: var(--r-2); cursor: pointer; }
.topbar .brand:hover { background: var(--s2); }
.topbar .brand img { width: 28px; height: 28px; border-radius: 7px; }
.cmdk {
  display: flex; align-items: center; gap: 8px; height: 36px; padding: 6px 8px 6px 12px;
  border-radius: var(--r-2); border: 1px solid var(--line); background: var(--s1); color: var(--faint);
  font: 400 14px/20px var(--sans); cursor: pointer; text-align: left;
}
.cmdk:hover { border-color: var(--line-2); color: var(--dim); }
.cmdk span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
kbd {
  display: inline-block; min-width: 20px; padding: 2px 6px; border-radius: var(--r-1);
  border: 1px solid var(--line-2); background: var(--s2); color: var(--dim);
  font: 600 11px/14px var(--mono); text-align: center;
}
body:not(.breed) .topbar .brand b { display: none; }
body:not(.breed) #cmdkBtn, body:not(.breed) #net, body:not(.breed) #inspector,
body:not(.breed) .boardhead, body:not(.breed) .headline { display: none !important; }

/* -- session header: on the phone only the button row -- */
.sesstabs {
  display: flex; gap: 20px; padding: 0 12px; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--line); background: var(--bg);
}
.sesstabs::-webkit-scrollbar { display: none; }
.sesstabs button {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 10px 0; color: var(--dim); font: 600 14px/20px var(--sans); cursor: pointer;
}
.sesstabs button .i { width: 16px; height: 16px; }
.sesstabs button:hover { color: var(--text); }
.sesstabs button.on { color: var(--text); border-bottom-color: var(--text); }
.headline { display: flex; align-items: center; gap: 12px; padding: 12px 24px 4px; min-width: 0; }
#headSlot { display: flex; align-items: baseline; gap: 12px; min-width: 0; flex: 1; }
#headSlot #curKey { font: 700 18px/24px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#headSlot #curState { font: 400 12px/16px var(--mono); color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#headSlot #curState.busy, #headSlot #curState.idle, #headSlot #curState.dead { color: var(--faint); }
#stopSlot #stopBtn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--line-2); color: var(--text); font: 600 13px/1 var(--sans); }
#stopSlot #stopBtn .i { width: 14px; height: 14px; }
#stopSlot #stopBtn::after { content: attr(aria-label); }      /* aria-label is translated (i18n.js) */

/* -- departure board (project drawer); on the phone the same row, more compact -- */
.proj { display: grid; grid-template-columns: 28px 1fr auto auto auto; align-items: center; gap: 2px 10px; }
.proj .dot { display: none; }
.proj .pcore { min-width: 0; display: flex; flex-direction: column; }
.proj .pname { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj .meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj .pnum { display: none; font: 400 12px/16px var(--mono); color: var(--dim); text-align: right; white-space: nowrap; }
.proj .prij { display: flex; align-items: center; gap: 8px; min-width: 0; }
.proj .badge { margin-left: 0; flex: none; }
.proj .pstatus { justify-self: end; }
.proj.lit { background: var(--red-wash); box-shadow: inset 0 0 0 1px var(--red-ring); }
.proj.lit .meta { color: var(--dim-on-red); }
.proj:hover { background: var(--s2); }
.proj.active { background: var(--s2); }
.pstops { padding: 4px 10px 10px 13px; }
.boardhead {
  display: grid; grid-template-columns: minmax(0, 1fr) 48px 36px 44px; gap: 6px;
  padding: 0 10px 8px 34px; color: var(--faint); border-bottom: 1px solid var(--line);
}
.boardhead span:nth-child(n+2) { text-align: right; }

/* -- inspector -- */
#inspector { padding: 20px 20px 24px; overflow-y: auto; background: var(--bg); border-left: 1px solid var(--line); }
.ihead { margin: 0 0 16px; font: 700 16px/22px var(--sans); }
.isec { border-top: 1px solid var(--line); padding: 14px 0 18px; }
.isec h3 { margin: 0 0 10px; color: var(--faint); }
.isec:has(> [hidden]) { display: none; }
.iempty { margin: 0; color: var(--faint); font-size: 13px; display: none; }
#inspector.empty .iempty { display: block; }
.icounter { position: absolute; right: 0; top: -27px; font: 600 12px/16px var(--mono); color: var(--dim); }
#inspector #agents, #inspector #tasks, #inspector #ctxMeter { position: relative; display: block; white-space: normal; letter-spacing: 0; cursor: default; }
#inspector #ctxMeter { color: var(--dim); font-size: 12px; }
#inspector .meter { display: flex; gap: 2px; margin: 2px 0 8px; }
#inspector .meter i { flex: 1; height: 12px; border-radius: 1px; background: var(--s3); }
#inspector .meter i.on { background: var(--dim); }
#inspector .ctx.vol .meter i.on, #inspector .ctx.let .meter i.on { background: var(--l-orange); }
#inspector .ctx.kritiek .meter i.on { background: var(--red); }
.ctxtext { font: 400 12px/16px var(--mono); color: var(--faint); }
.agent { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; padding: 6px 4px; margin: 0 -4px;
  width: calc(100% + 8px); border: 0; border-radius: var(--r-2); background: none; color: var(--text); text-align: left; font: inherit; }
button.agent { cursor: pointer; }
button.agent:hover { background: var(--s2); }
.agent .cav { width: 28px; height: 28px; border-radius: 7px; display: block; }
.agent .aface { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; background: var(--s2); }
.agent .awho b .mono { font: 400 11px var(--mono); color: var(--faint); }
.agent .i { color: var(--dim); margin-top: 1px; }
.agent .awho { display: flex; flex-direction: column; min-width: 0; font-size: 13px; line-height: 18px; }
.agent .awho span { color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent .aduration { font: 600 13px/18px var(--mono); color: var(--text); }
#inspector #askBar { border: 0; background: none; padding: 0; }
#inspector #askBar > div { border: 1px solid var(--red); background: var(--red-wash); border-radius: var(--r-3); padding: 14px 16px; margin-bottom: 10px; }
#inspector .ask-q { font: 600 15px/22px var(--sans); }
#inspector .ask-std { color: var(--dim-on-red); }

/* -- line network -- */
#net { background: var(--s1); border-bottom: 1px solid var(--line); overflow: hidden; }
#net svg { display: block; }
#net .ln, #netMobile .ln, .vsvg .ln { fill: none; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
#net .ln.spur, #netMobile .ln.spur, .vsvg .ln.spur { stroke-width: 4; }
#net .ln.ahead, #netMobile .ln.ahead, .vsvg .ln.ahead { stroke: var(--line-2); }
#net .st, #netMobile .st, .vsvg .st { fill: var(--st-fill); stroke: var(--st-edge); stroke-width: 3; }
#net .st.todo, #netMobile .st.todo, .vsvg .st.todo { fill: var(--s1); stroke: var(--faint); stroke-width: 2; }
#net .st.now, #netMobile .st.now, .vsvg .st.now { fill: var(--s1); stroke: var(--text); stroke-width: 3.5; }
#net .st.wacht, #netMobile .st.wacht, .vsvg .st.wacht { stroke: var(--red); }
#net .halo, #netMobile .halo, .vsvg .halo { fill: none; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: halo 1.8s var(--ease) infinite; }
@keyframes halo { from { opacity: .7; transform: scale(.6); } to { opacity: 0; transform: scale(1.6); } }
#net text { font-family: var(--sans); fill: var(--text); }
#net .netname { font-size: 13px; font-weight: 600; }
#netMobile .netcount { font: 400 11px var(--mono); fill: var(--faint); }
#net .netrow.open .netname { font-weight: 800; }
#net .netlbl { font-size: 12px; fill: var(--dim); }
#net .netlbl.nu { font-weight: 700; fill: var(--text); }
#net .netmono { font-family: var(--mono); }
#net .netstatus { font-size: 11px; font-weight: 700; letter-spacing: .08em; fill: var(--dim); }
#net .netstatus.wait, #net .netstatus.err { fill: var(--red-ink); }
#net .netstatus.done { fill: var(--ok); }
#net .netplane { fill: transparent; }
#net .netrow { cursor: pointer; }
#net .netrow:hover .netplane { fill: var(--s2); }

/* -- the layout itself -- */
body.breed #app {
  display: grid; height: 100%;
  grid-template-columns: var(--kol-bord, 408px) minmax(0, 1fr) var(--kol-insp, 320px);
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  grid-template-areas:
    "top   top   top"
    "net   net   net"
    "board kop   insp"
    "board log   insp"
    "board foot  insp";
}
body.breed header.topbar { grid-area: top; padding: 10px 16px 10px 24px; gap: 16px; border-bottom: 1px solid var(--line); }
body.breed #menuBtn { display: none; }
body.breed .topbar .title { display: none; }
/* The search field is the entry to everything (⌘K): big and clear, not tucked away. */
/* Centred on the page, not in the space between logo and buttons; narrower
   when the screen gets tight, so it never touches the buttons on the right. */
body.breed header.topbar { position: relative; }
/* In the row, growing between logo and buttons (max 600px, centred in that space):
   centred on the page it slid under the buttons once the top bar had nine of them. */
body.breed #cmdkBtn { flex: 0 1 600px; min-width: 200px; margin: 0 auto; height: 44px; padding: 8px 10px 8px 14px; gap: 10px;
  background: var(--s2); border-color: var(--line-2); color: var(--dim); font-size: 15px; border-radius: var(--r-3); }
body.breed #cmdkBtn .i { width: 20px; height: 20px; color: var(--text); }
body.breed #cmdkBtn:hover { border-color: var(--dim); color: var(--text); background: var(--s3); }
body.breed #cmdkBtn kbd { font-size: 12px; padding: 3px 8px; }
body.breed #net { grid-area: net; }
body.breed #stabs { display: none !important; }
body.breed #drawer, body.breed #drawer[hidden] {
  grid-area: board; display: flex !important; position: static; width: auto; z-index: auto;
  border-right: 1px solid var(--line); background: var(--bg); padding: 16px 12px 12px; min-height: 0;
}
body.breed #drawerClose { display: none; }
body.breed .proj { grid-template-columns: 28px minmax(0, 1fr) 48px 36px 44px; gap: 2px 6px; padding: 10px; border-radius: var(--r-2); margin-bottom: 2px; }
body.breed .proj .pnum { display: block; }
body.breed .proj .meta { font-size: 12px; }
body.breed #sesshead { grid-area: kop; min-width: 0; }
body.breed .sesstabs { padding: 0 24px; }
body.breed #log { grid-area: log; padding: 24px 32px 8px; }

body.breed footer { grid-area: foot; padding: 12px 32px 16px; background: var(--bg); border-top: 0; }

body.breed .composer { border: 1px solid var(--line-2); border-radius: var(--r-3); background: var(--s1); padding: 6px; align-items: flex-end; }
body.breed .composer:focus-within { border-color: var(--dim); }
body.breed #input { border: 0; background: none; }
body.breed #input:focus { outline: none; }
body.breed #inspector { grid-area: insp; }

/* search bar in the drawer/the board */
.searchrow { margin-bottom: 12px; }
.searchrow input {
  height: 36px; padding: 0 12px; border-radius: var(--r-2); font-size: 14px;
  border: 1px solid var(--line); background: var(--s1); color: var(--text);
}
.searchrow input:focus, #projFilter:focus { outline: none; border-color: var(--dim); }
#projFilter { height: 36px; font-size: 14px; background: var(--s1); }
.drawer-head { margin-bottom: 4px; gap: 8px; }
.drawer-actions { display: flex; align-items: center; gap: 6px; min-width: 0; }
.drawer-actions .mini { white-space: nowrap; flex: none; }
#boomAlles, #idleBtn { padding-left: 8px; padding-right: 8px; }
.drawer-head strong { font: 700 11px/16px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
/* on the phone: the same status word as on the board, no separate label */
.proj .badge.ask { display: none; }

/* -- top bar: bell, theme, gear -- */
#filesBtn { display: none !important; }        /* the Files tab counts now */
.notifybtn { position: relative; }
.notifydot {
  position: absolute; top: 7px; right: 7px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--red); box-shadow: 0 0 0 2px var(--bg);
}
/* something needs you: a red counter, like a badge, not just a dot */
.notifydot.telt {
  top: 2px; right: 2px; width: auto; height: 16px; min-width: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--red-fill); color: var(--on-fill); font: 700 11px/16px var(--sans); text-align: center;
}
body.breed #themaBtn { margin-left: 0; }
body:not(.breed) #themaBtn { display: none; }   /* on the phone in the settings */
.icon[aria-pressed="true"], .icon[aria-expanded="true"] { background: var(--s2); color: var(--text); }

/* -- notifications -- */
.notifymenu { width: min(380px, calc(100vw - 16px)); max-height: min(70vh, 520px); overflow-y: auto; }
body.breed .notifymenu { top: 58px; right: 72px; }
.notify {
  width: 100%;
  /* first column fits a small avatar with its status dot; text never runs under it */
  display: grid !important; grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: 12px; align-items: center;
  padding-top: 10px !important; padding-bottom: 10px !important;
  border-top: 1px solid var(--line) !important;
}
.notify > .avatar, .notify > .linebar { justify-self: center; }
.notify .mcore { gap: 2px; }
.notify .tel, .notify .status { justify-self: end; white-space: nowrap; }
.notify.lit { background: var(--red-wash); }
.notify.lit:hover { background: var(--red-wash); box-shadow: inset 0 0 0 1px var(--red-ring); }
.notify .mcore { display: flex; flex-direction: column; min-width: 0; }
.notify .mcore b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notify .mcore span { color: var(--dim); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notify.lit .mcore span { color: var(--dim-on-red); }
.notifyempty { margin: 0; padding: 12px 14px 16px; color: var(--faint); font-size: 13px; border-top: 1px solid var(--line); }

/* -- disabled: doesn't work on this machine -- */
[aria-disabled="true"] { color: var(--faint) !important; cursor: help; }
[aria-disabled="true"]:hover { background: transparent !important; }

/* -- process tree in the board -- */
.prow { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; }
.prow > .proj { grid-column: 2; }
.treebtn {
  grid-column: 1; align-self: stretch; display: grid; place-items: center; width: 20px; padding: 0;
  background: none; border: 0; border-radius: var(--r-1); color: var(--faint); cursor: pointer;
}
.treebtn .i { width: 14px; height: 14px; transition: transform var(--fast) var(--ease); }
.treebtn[aria-expanded="true"] .i { transform: rotate(90deg); }
.treebtn:hover { color: var(--text); background: var(--s2); }
.boom { grid-column: 2; padding: 6px 10px 12px 13px; display: flex; flex-direction: column; gap: 12px; }
.treehead { display: flex; justify-content: space-between; color: var(--faint); margin-bottom: 6px; }
.branches { list-style: none; margin: 0; padding: 0; }
.branch { display: grid; grid-template-columns: 20px 20px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 4px 0; }
.branch .spur { width: 20px; height: 20px; color: var(--lijn); stroke-width: 2.5; }
/* an agent's face (#65): the Collective badge or the agent icon, the same in every place */
.branch .cav, .branch .aface { width: 20px; height: 20px; border-radius: 5px; flex: none; }
.branch .aface { display: grid; place-items: center; background: var(--s2); color: var(--dim); }
.branch .aface .i { width: 13px; height: 13px; }
.oagents .cav, .oagents .aface { width: 18px; height: 18px; border-radius: 5px; flex: none; }
.oagents .aface { display: grid; place-items: center; }
.tool.agentblok .tname { display: inline-flex; align-items: center; gap: 6px; }
.tool.agentblok .tname .cav { width: 18px; height: 18px; border-radius: 5px; }
.tool.agentblok .tface { display: inline-grid; place-items: center; }
#net .netav { clip-path: inset(0 round 4px); }
.branch .awho { display: flex; flex-direction: column; min-width: 0; font-size: 13px; line-height: 18px; }
.branch .awho span { color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.branch .aduration { font: 600 12px/18px var(--mono); color: var(--text); }
.boardhead { padding-left: 50px; padding-right: 10px; }
#boomAlles .i { width: 14px; height: 14px; transition: transform var(--fast) var(--ease); }
#boomAlles[aria-pressed="true"] .i { transform: rotate(90deg); }

/* -- settings -- */
#settings {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 70; width: min(480px, 100vw);
  display: flex; flex-direction: column; background: var(--bg); border-left: 1px solid var(--line);
  box-shadow: var(--shadow-pop);
  animation: instIn 220ms var(--ease);
}
@keyframes instIn { from { transform: translateX(24px); opacity: .4; } to { transform: none; opacity: 1; } }
body.inst-open::after { content: ""; position: fixed; inset: 0; z-index: 65; background: var(--scrim); }
.insthead {
  display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 24px;
  padding-top: max(12px, env(safe-area-inset-top)); border-bottom: 1px solid var(--line);
}
.insthead h2 { flex: 1; margin: 0; font: 700 18px/24px var(--sans); }
.instbody { overflow-y: auto; padding: 0 24px calc(32px + var(--safe-b)); }
.instsec { padding: 24px 0 8px; border-bottom: 1px solid var(--line); }
.instsec:last-child { border-bottom: 0; }
.instsec h3 { margin: 0 0 4px; color: var(--faint); }
.instrow {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 2px; align-items: center;
  width: calc(100% + 16px); margin: 0 -8px; padding: 12px 8px; border: 0; border-radius: var(--r-2);
  background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.instrow.static { cursor: default; }
button.instrow:hover { background: var(--s2); }
.instrow .ilabel { grid-column: 1; font: 600 15px/20px var(--sans); }
.instrow .idesc { grid-column: 1; font-size: 13px; line-height: 18px; color: var(--dim); max-width: 46ch; }
.instrow .ictl { grid-column: 2; grid-row: 1 / span 2; }
.instrow.gevaar .ilabel, .instrow.gevaar .btntext { color: var(--red-ink); }
.instrow[aria-disabled="true"] .ilabel, .instrow[aria-disabled="true"] .idesc { color: var(--faint); }
.btntext {
  padding: 6px 12px; border: 1px solid var(--line-2); border-radius: var(--r-2);
  font: 600 13px/18px var(--sans); color: var(--text); white-space: nowrap;
}
button.instrow:hover .btntext { border-color: var(--dim); }
.btntext.istatus { border-color: transparent !important; padding-right: 0; color: var(--faint); }
.instrow .chev { width: 18px; height: 18px; color: var(--faint); transition: transform var(--fast) var(--ease); }
.instrow[aria-expanded="true"] .chev { transform: rotate(90deg); }
.toggle {
  position: relative; width: 40px; height: 24px; border-radius: 12px; flex: none;
  background: var(--s3); box-shadow: inset 0 0 0 1px var(--line-2); transition: background var(--fast) var(--ease);
}
.toggle::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--dim); transition: transform var(--fast) var(--ease), background var(--fast) var(--ease);
}
[aria-checked="true"] > .toggle { background: var(--text); box-shadow: none; }
[aria-checked="true"] > .toggle::after { transform: translateX(16px); background: var(--bg); }
.segment { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--r-2); background: var(--s2); }
.segment button {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 0; border-radius: 6px;
  background: none; color: var(--dim); font: 600 13px/18px var(--sans); cursor: pointer;
}
.segment button .i { width: 15px; height: 15px; }
.segment button:hover { color: var(--text); }
.segment button[aria-pressed="true"] { background: var(--s1); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .18); }
.instsub { display: flex; flex-direction: column; margin: 0 0 8px; padding: 4px 0 4px 12px; border-left: 1px solid var(--line); }
.instsub button {
  padding: 9px 12px; border: 0; border-radius: var(--r-2); background: none; color: var(--text);
  font: 400 14px/20px var(--sans); text-align: left; cursor: pointer;
}
.instsub button:hover { background: var(--s1); }
@media (max-width: 520px) {
  .instrow.static { grid-template-columns: 1fr; }
  .instrow.static .ictl { grid-column: 1; grid-row: auto; margin-top: 8px; justify-self: start; }
}

/* -- browser-native things in the card's colours -- */
:focus-visible { outline: 2px solid var(--l-blue); outline-offset: 2px; }
* { scrollbar-color: var(--line-2) transparent; }
input, textarea { caret-color: var(--text); }

/* -- icons in buttons that JS creates -- */
.chip .i { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }
.tname .i, .sagent .i { width: 13px; height: 13px; vertical-align: -2px; }

/* -- command palette -- */
body.breed .searchrow { display: none; }     /* ⌘K searches at the desk */
#palet { position: fixed; inset: 0; z-index: 80; display: flex; justify-content: center; align-items: flex-start; padding: 72px 16px 16px; background: var(--scrim); }
.palettebox {
  width: min(720px, 100%); max-height: min(72vh, 680px); display: flex; flex-direction: column;
  background: var(--s1); border: 1px solid var(--line-2); border-radius: var(--r-3); box-shadow: var(--shadow-pop);
  overflow: hidden; animation: paletIn 180ms var(--ease);
}
@keyframes paletIn { from { transform: translateY(-8px); opacity: .5; } to { transform: none; opacity: 1; } }
.palettefield { display: flex; align-items: center; gap: 12px; padding: 0 16px; height: 60px; border-bottom: 1px solid var(--line); }
.palettefield .i { width: 20px; height: 20px; color: var(--dim); }
#paletInput { flex: 1; min-width: 0; border: 0; background: none; color: var(--text); font: 400 18px/24px var(--sans); padding: 0; }
#paletInput:focus { outline: none; }
#paletInput::placeholder { color: var(--faint); }
#paletteList { overflow-y: auto; padding: 6px 8px 8px; }
.pgroup { display: flex; justify-content: space-between; padding: 14px 12px 6px; color: var(--faint); }
.pitem {
  display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%;
  padding: 9px 12px; border: 0; border-radius: var(--r-2); background: none; color: var(--text); text-align: left; cursor: pointer;
}
.pitem[aria-selected="true"] { background: var(--s2); }
.plabel { display: flex; align-items: baseline; gap: 12px; min-width: 0; font: 600 14px/20px var(--sans); }
.plabel span { color: var(--dim); font-weight: 400; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pitem.uit .plabel { color: var(--faint); font-weight: 400; }
.pitem.uit .plabel span { color: var(--faint); }
.paletteempty { margin: 0; padding: 20px 12px; color: var(--faint); font-size: 14px; }
.palettefoot { display: flex; align-items: center; gap: 6px; padding: 10px 16px; border-top: 1px solid var(--line); color: var(--dim); font-size: 12px; }
.palettefoot kbd + kbd { margin-left: -2px; }
.palettefoot .tel { margin-left: auto; }


/* -- lines outside the network: phone and proposal -- */
#netMobile .st.xfer, .vsvg .st.xfer { fill: var(--st-fill); stroke: var(--st-edge); stroke-width: 3.5; }
.vsvg .ln.spur { stroke-dasharray: 2 7; }
#netMobile { padding: 4px 2px 12px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
#netMobile svg { display: block; }
#netMobile text { font-family: var(--sans); fill: var(--text); }
#netMobile .netname { font-size: 13px; font-weight: 600; }
#netMobile .netrow { cursor: pointer; }
.netmkop { display: flex; justify-content: space-between; color: var(--faint); padding: 4px 0 10px; }
body:not(.breed) #drawer { width: 100vw; max-width: none; border-right: 0; padding: 12px 12px calc(12px + var(--safe-b)); padding-top: max(12px, env(safe-area-inset-top)); overflow-y: auto; }
body:not(.breed) #drawer #projList { overflow: visible; }

/* -- choice bar: multiple choice instead of the input field -- */
footer.choicemode .composer, footer.choicemode #chips { display: none !important; }
.keuzes.inbar { display: none; }
#choiceBar { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: var(--r-3); background: var(--s1); }
.kbhead { display: flex; flex-direction: column; gap: 2px; }
.kbsource { font: 700 11px/16px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--red-ink); }
.kbquestion { font: 600 15px/22px var(--sans); color: var(--text); }
.kbbtns { display: flex; flex-direction: column; gap: 6px; }
.kbknop {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 8px 12px;
  border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--bg); color: var(--text);
  font: 600 15px/20px var(--sans); text-align: left; cursor: pointer;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.kbknop:hover { border-color: var(--dim); background: var(--s2); }
.kbknop.first { border-color: var(--red); }
.kbknop.first:hover { background: var(--red-wash); }
.kbknop kbd { flex: none; }
.kbknop .kbstd { margin-left: auto; font: 400 12px/16px var(--sans); color: var(--faint); }
.kbknop.other { color: var(--dim); font-weight: 400; border-style: dashed; }
.kbknop.other .i { width: 16px; height: 16px; margin: 0 4px 0 2px; }
.kbback { align-self: flex-start; margin-bottom: 6px; }
body.breed .kbbtns { flex-direction: row; flex-wrap: wrap; }
body.breed .kbknop { width: auto; }

/* -- change proposal -- */
.voorstel { margin: 12px 0 4px; padding: 16px 18px 18px; border: 1px solid var(--line-2); border-radius: var(--r-3); background: var(--s1); }
.vhead { display: flex; align-items: center; justify-content: space-between; color: var(--faint); }
.vlarge { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: var(--r-2); background: none; color: var(--dim); cursor: pointer; }
.vlarge:hover { background: var(--s2); color: var(--text); }
.vlarge .i { width: 16px; height: 16px; }
.vtitle { margin: 2px 0 2px; font: 700 18px/24px var(--sans); }
.vmeta { margin: 0 0 12px; font: 400 12px/18px var(--mono); color: var(--dim); }
.vplus { color: var(--ok); fill: var(--ok); }
.vmin { color: var(--del); fill: var(--del); }
.vlijnvak { overflow-x: auto; margin: 0 -18px 8px; padding: 0 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg); }
.vsvg { display: block; }
.vsvg text { font-family: var(--sans); }
.vsvg .vpath { font: 600 13px var(--mono); fill: var(--text); }
.vsvg .vwhat { font-size: 12px; fill: var(--dim); }
.vsvg .vnum { font: 400 11px var(--mono); fill: var(--faint); }
.vsvg .vline { font: 700 10px var(--sans); letter-spacing: .08em; }
.vpart { margin-top: 12px; }
.vpart h4 { margin: 0 0 6px; color: var(--faint); display: flex; gap: 8px; }
.vpart ul { list-style: none; margin: 0; padding: 0; }
.vpart li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; padding: 3px 0; font-size: 13px; line-height: 18px; color: var(--dim); }
.vpart li .i { width: 14px; height: 14px; margin-top: 2px; color: var(--faint); }
.vpart li.risk .i { color: var(--l-orange); }
.vpart code { font: 400 12px var(--mono); color: var(--text); }
.vbtns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
.vbtns button {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: var(--r-2);
  font: 600 14px/1 var(--sans); cursor: pointer; border: 1px solid var(--line-2); background: var(--bg); color: var(--text);
}
.vbtns button .i { width: 16px; height: 16px; }
.vbtns .vok { background: var(--red-fill); border-color: var(--red-fill); color: var(--on-fill); }
.vbtns .vok:hover { background: var(--red-fill-hover); }
.vbtns .vbij:hover { border-color: var(--dim); }
.vbtns button:disabled { opacity: .5; cursor: default; }
#voorstelScherm { position: fixed; inset: 0; z-index: 85; display: flex; padding: 24px; background: var(--scrim); }
.vsbox { flex: 1; display: flex; flex-direction: column; min-height: 0; background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--r-3); box-shadow: var(--shadow-pop); overflow: hidden; animation: paletIn 180ms var(--ease); }
.vshead { display: flex; align-items: center; gap: 16px; padding: 18px 16px 18px 24px; border-bottom: 1px solid var(--line); }
.vstitle { flex: 1; min-width: 0; }
.vstitle h2 { margin: 0; font: 700 20px/26px var(--sans); }
.vsmeta { font: 400 12px/18px var(--mono); color: var(--dim); }
.vsactions .vbtns { margin: 0; }
.vsbody { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 340px; min-height: 0; }
.vsline { overflow: auto; padding: 24px; }
.vsside { overflow-y: auto; padding: 20px 24px; border-left: 1px solid var(--line); }
.vsside h4 { margin: 0 0 8px; color: var(--faint); display: flex; gap: 8px; }
.vstops { list-style: none; margin: 0 0 8px; padding: 0; }
.vstops li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.vstops .linebar { margin-top: 7px; }
.vhpath { display: flex; flex-direction: column; min-width: 0; }
.vhpath code { font: 600 13px/18px var(--mono); overflow-wrap: anywhere; }
.vhpath span { font-size: 13px; color: var(--dim); }
.vhnum { font: 400 12px/18px var(--mono); white-space: nowrap; }
@media (max-width: 760px) {
  #voorstelScherm { padding: 0; }
  .vsbox { border-radius: 0; }
  .vshead { flex-wrap: wrap; }
  .vsbody { grid-template-columns: 1fr; overflow-y: auto; }
  .vsside { border-left: 0; border-top: 1px solid var(--line); }
}

/* -- plan panel: same side panel as the settings -- */
.sidepanel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 70; width: min(480px, 100vw);
  display: flex; flex-direction: column; background: var(--bg); border-left: 1px solid var(--line);
  box-shadow: var(--shadow-pop); animation: instIn 220ms var(--ease);
}
.boom.large { padding: 20px 0 0; gap: 20px; }
.boom.large .halte { font-size: 15px; line-height: 22px; padding-top: 6px; padding-bottom: 6px; }

/* -- collapsing: line network and "Nu bezig" -- */
#net { position: relative; }
#net .netbtn { position: absolute; top: 6px; right: 8px; transform: rotate(-90deg); }
body.net-dicht #net .netbtn { top: 50%; margin-top: -20px; transform: rotate(90deg); }
.netshort { display: flex; gap: 8px; align-items: center; padding: 8px 56px 8px 24px; overflow-x: auto; scrollbar-width: none; }
.netshort::-webkit-scrollbar { display: none; }
.netpil {
  display: inline-flex; align-items: center; gap: 8px; flex: none; height: 32px; padding: 0 12px;
  border-radius: var(--r-2); border: 1px solid var(--line); background: var(--bg); color: var(--text);
  font: 600 13px/1 var(--sans); cursor: pointer;
}
.netpil:hover { background: var(--s2); }
.netpil.open { border-color: var(--text); }
.netpil.lit { background: var(--red-wash); border-color: rgba(229, 56, 59, .6); }
.iheadline { display: flex; align-items: center; justify-content: space-between; margin: -8px -8px 8px 0; }
.iheadline .ihead { margin: 0; }
#inspToggle .i { transform: rotate(0deg); transition: transform var(--fast) var(--ease); }
.irail { display: none; }
body.breed.insp-dicht #app { --kol-insp: 52px; }
body.breed.insp-dicht #inspector { padding: 10px 6px; overflow: hidden; }
body.breed.insp-dicht #inspector > :not(.iheadline):not(.irail) { display: none !important; }
body.breed.insp-dicht .iheadline { margin: 0; justify-content: center; }
body.breed.insp-dicht .ihead { display: none; }
body.breed.insp-dicht #inspToggle .i { transform: rotate(180deg); }
body.breed.insp-dicht .irail {
  display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 12px; cursor: pointer;
}
.irail .rpip {
  display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: var(--r-3);
  background: var(--red-fill); color: var(--on-fill); font: 700 12px/1 var(--mono);
}
.irail .rcount { display: flex; flex-direction: column; align-items: center; gap: 4px; font: 600 12px/1 var(--mono); color: var(--dim); }
.irail .rcount .i { width: 18px; height: 18px; }
.irail .rlabel {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font: 700 11px/16px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--faint);
}

/* -- inspector header: the session with its line colour -- */
.ihead { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ihead #iheadName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.isec h3 .tel { float: right; color: var(--dim); }

/* -- question card like the mockup: sender as label, question large, choices equally
   wide with the first as primary button, free answer below -- */
.ask-from { font: 700 11px/16px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--red-ink); margin-bottom: 4px; }
#askBar .ask-q { font: 600 16px/24px var(--sans); margin: 0 0 12px; }
.ask-choices.ask-keuzes { display: flex; gap: 8px; flex-wrap: nowrap; }
.ask-choices.ask-keuzes button {
  flex: 1 1 0; min-width: 0; height: 36px; padding: 0 10px; border-radius: var(--r-2);
  background: var(--s2); border: 1px solid var(--line-2); color: var(--text);
  font: 600 14px/1 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ask-choices.ask-keuzes button:hover { background: var(--s3); }
.ask-choices.ask-keuzes button.primary { background: var(--red-fill); border-color: var(--red-fill); color: var(--on-fill); }
.ask-choices.ask-keuzes button.primary:hover { background: var(--red-fill-hover); border-color: var(--red-fill-hover); }
.ask-row { margin-top: 10px; }
.ask-row input { height: 36px; font-size: 14px; }
.ask-row button { height: 36px; }

/* The dialog has its own stylesheet: /static/dialog.css. */

/* =====================================================================
   Overview: the start page across all projects.
   ===================================================================== */
#overview { overflow-y: auto; padding: 24px 32px 40px; min-height: 0; }

body.overview #log, body.overview footer, body.overview #sesshead, body.overview #askBar:not(#inspector #askBar) { display: none !important; }
body:not(.breed).overview #overview { flex: 1; padding: 16px 12px 32px; }
body.breed #overview { grid-column: 2; grid-row: 3 / 6; }
.ohead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.otitle { margin: 0; font: 800 28px/34px var(--sans); letter-spacing: -.01em; }
.osummary { margin: 4px 0 0; color: var(--dim); font-size: 14px; }
.osec { margin-bottom: 28px; }
.osec > h2 { margin: 0 0 10px; color: var(--faint); }
.olist { display: grid; gap: 8px; }
.ogrid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.ocard {
  display: block; width: 100%; text-align: left; padding: 12px 14px; border-radius: var(--r-3);
  border: 1px solid var(--line); background: var(--s1); color: var(--text); font: inherit;
}
button.ocard { cursor: pointer; transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease); }
button.ocard:hover { background: var(--s2); border-color: var(--line-2); }
.ocard.open { border-color: var(--dim); }
.ocard.lit, .ocard.wacht { background: var(--red-wash); border-color: var(--red-ring); }
.ocard.wacht .oquestion { font: 600 16px/24px var(--sans); margin: 8px 0 12px; }
.orow { display: flex; align-items: center; gap: 10px; min-width: 0; }
.orow b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orow .status { margin-left: auto; }
.orow .olink + .status, .orow .status + .olink { margin-left: 0; }
.orow .tel { margin-left: 4px; }
.olink {
  margin-left: auto; background: none; border: 0; padding: 4px 6px; border-radius: var(--r-1);
  color: var(--dim); font: 600 13px/1 var(--sans); cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.olink:hover { color: var(--text); }
.onow { margin: 6px 0 0 24px; font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onow.dim { font-weight: 400; color: var(--dim); }
.oprogress { display: flex; gap: 3px; margin: 10px 0 0 24px; --lijn: var(--l-blue); }
.oprogress i { flex: 1; height: 6px; border-radius: 3px; background: var(--s3); }
.oprogress i.completed { background: var(--lijn); }
.oprogress i.in_progress { background: linear-gradient(90deg, var(--lijn) 50%, var(--s3) 50%); }
.oagents { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 0 24px; font-size: 13px; color: var(--dim); }
.oagents > span { display: inline-flex; align-items: center; gap: 6px; }
.oagents .i { width: 16px; height: 16px; }
#oTasks .stops { margin: 10px 0 0 6px; }
.omore { margin: 4px 0 0 32px; font-size: 12px; color: var(--faint); }
.otitleline { margin: 6px 0 0 24px; color: var(--dim); font-size: 13px; line-height: 18px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ometa { margin: 8px 0 0 24px; font: 400 12px/16px var(--mono); color: var(--faint); }
.tag-new { flex: none; padding: 0 6px; border-radius: var(--r-1); background: var(--red-fill); color: var(--on-fill);
  font: 700 11px/16px var(--sans); letter-spacing: .04em; }
.orest { color: var(--faint); margin: 0; }
#overview.calm #oStructure::before {
  content: attr(data-empty); display: block; margin: -8px 0 16px; color: var(--dim);
}

/* -- collapse the session bar; on the overview it isn't there (the cards
   are the board there) -- */
.brail { display: none; }
body.breed.board-closed #app { --kol-bord: 52px; }
body.breed.board-closed #drawer { padding: 10px 6px; overflow: hidden; }
body.breed.board-closed #drawer > :not(.brail):not(.drawer-head) { display: none !important; }
body.breed.board-closed .drawer-head { justify-content: center; }
body.breed.board-closed .drawer-head > strong, body.breed.board-closed .drawer-actions > :not(#bordToggle) { display: none; }
body.breed.board-closed .brail {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 14px; cursor: pointer; order: 2;
}
body.breed.board-closed #drawer { flex-direction: column; }
.brail .rline { width: 18px; height: 6px; border-radius: 3px; }
.brail .rline.open { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--text); }
.brail .rpip { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: var(--r-3);
  background: var(--red-fill); color: var(--on-fill); font: 700 12px/1 var(--mono); }
.brail .rlabel { writing-mode: vertical-rl; transform: rotate(180deg); margin-top: 6px;
  font: 700 11px/16px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
#bordToggle .i { transform: rotate(180deg); transition: transform var(--fast) var(--ease); }
body.board-closed #bordToggle .i { transform: rotate(0deg); }
body:not(.breed) #bordToggle { display: none; }
body.breed.overview #app { --kol-bord: 0px; }
body.breed.overview #drawer { display: none !important; }

/* -- tab pages of a session -- */
body[data-tab]:not([data-tab="gesprek"]) #log,
body[data-tab]:not([data-tab="gesprek"]) footer,
body:not(.breed)[data-tab]:not([data-tab="gesprek"]) #askBar { display: none !important; }
body.overview #tabPagina { display: none !important; }
#tabPagina { overflow-y: auto; min-height: 0; padding: 24px 32px 40px; }
body:not(.breed) #tabPagina { flex: 1; padding: 16px 12px 32px; }
body.breed #tabPagina { grid-column: 2; grid-row: 4 / 6; }
.tpag > * { max-width: 960px; }
.thead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.ttitle { margin: 0; font: 800 24px/30px var(--sans); letter-spacing: -.01em; }
.texplain { margin: 4px 0 0; color: var(--dim); font-size: 14px; max-width: 70ch; }
.tactions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.tsec { margin-bottom: 28px; }
.tsec > h2 { margin: 0 0 10px; color: var(--faint); }
.tempty { margin: 0; color: var(--faint); font-size: 14px; }
.temptycard { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; padding: 18px 20px;
  border: 1px dashed var(--line-2); border-radius: var(--r-3); color: var(--dim); }
.temptycard .i { width: 28px; height: 28px; color: var(--faint); }
.temptycard b { color: var(--text); }
.temptycard p { margin: 4px 0 0; font-size: 14px; max-width: 64ch; }
.segment { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r-2); overflow: hidden; }
.segment button { background: none; border: 0; padding: 0 12px; height: 32px; color: var(--dim); font: 600 13px/1 var(--sans); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.segment button + button { border-left: 1px solid var(--line-2); }
/* Plan */
.ppanel { padding: 20px 24px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--s1); }
.pprogress { display: flex; gap: 4px; margin-top: 16px; --lijn: var(--l-blue); }
.pprogress i { flex: 1; height: 8px; border-radius: 4px; background: var(--s3); }
.pprogress i.completed { background: var(--lijn); }
.pprogress i.in_progress { background: linear-gradient(90deg, var(--lijn) 50%, var(--s3) 50%); }

/* Files: the file browser lives on the page */
#pBestanden #fileDrawer {
  position: static; width: auto; max-height: none; box-shadow: none; border: 1px solid var(--line);
  border-radius: var(--r-3); background: var(--s1); padding: 12px; z-index: auto;
}
#pBestanden #fileClose { display: none; }
#pBestanden .fitem { padding: 8px 10px; font-size: 14px; }
#pBestanden #fileList { max-height: none; }

/* Changes */
.wlist, .llist { display: grid; gap: 6px; }
.wrow { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; gap: 12px; align-items: center;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--s1); }
.wcode { display: grid; place-items: center; height: 24px; border-radius: var(--r-1); background: var(--s3);
  font: 700 12px/1 var(--mono); color: var(--dim); }
.wcode.cM { color: var(--l-orange); } .wcode.cA, .wcode.cN { color: var(--ok); } .wcode.cD { color: var(--red-ink); }
.wpath { display: flex; flex-direction: column; min-width: 0; }
.wpath b { font-weight: 600; }
.wpath span { font: 400 12px/16px var(--mono); color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wkind { color: var(--faint); font-size: 12px; }
.clist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.clist li { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.clist code { color: var(--dim); }

/* Links */
.lrow { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--r-2); background: var(--s1); color: var(--text); text-decoration: none; }
.lrow:hover { background: var(--s2); border-color: var(--line-2); }
.lrow .i { width: 18px; height: 18px; color: var(--faint); }
.lcore { display: flex; flex-direction: column; min-width: 0; }
.lcore b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lcore span { font: 400 12px/16px var(--mono); color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lwho { font-size: 12px; color: var(--faint); white-space: nowrap; }

/* Session */
.sinfo { padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--s1); margin-bottom: 24px; }
.shead { display: flex; align-items: center; gap: 10px; }
.shead b { font: 700 18px/24px var(--sans); }
.shead .status { margin-left: auto; }
.stitle { margin: 6px 0 4px 24px; color: var(--dim); font-size: 14px; }
.srow { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 12px; padding: 8px 0 8px 24px; border-top: 1px solid var(--line); font-size: 14px; }
.srow:first-of-type { margin-top: 10px; }
.srow > span:first-child { color: var(--faint); }
.srow code { overflow-wrap: anywhere; }
.sgroups { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.sgroup > h2 { margin: 0 0 8px; color: var(--faint); }
.sgroup button {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; width: 100%; text-align: left;
  padding: 10px 12px; margin-bottom: 6px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--s1);
  color: var(--text); font: inherit; cursor: pointer;
}
.sgroup button:hover:not(:disabled) { background: var(--s2); border-color: var(--line-2); }
.sgroup button:disabled { opacity: .5; cursor: not-allowed; }
.sgroup button .i { width: 18px; height: 18px; color: var(--dim); margin-top: 1px; }
.sgroup button > span { display: flex; flex-direction: column; gap: 2px; }
.sgroup button b { font-weight: 600; font-size: 14px; }
.sgroup button > span > span { color: var(--dim); font-size: 13px; line-height: 18px; }
.sgroup.gevaar button[data-act="close"] b { color: var(--red-ink); }
.sgroup.gevaar button[data-act="close"] .i { color: var(--red-ink); }
@media (max-width: 700px) { .srow { grid-template-columns: 1fr; gap: 2px; } .wrow { grid-template-columns: 30px minmax(0, 1fr) auto; } .wkind { display: none; } }

/* -- notifications: recent -- */
.notifyhead { padding: 10px 14px 4px; color: var(--faint); }
.notify.vers { background: var(--s2); }
.notify.vers .mcore b::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-radius: 50%;
  background: var(--red); vertical-align: 1px; }

/* Open steps are buttons: same line as a stop, but tappable. */
.stepbtn {
  display: block; width: 100%; padding: 2px 6px; margin: -2px -6px; border: 0; border-radius: var(--r-1);
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.stepbtn:hover { background: var(--s2); color: var(--text); }
.stepbtn:hover::after { content: " · " attr(data-hint); color: var(--faint); font-weight: 400; }
@media (hover: none) { .stepbtn:hover::after { content: none; } }
/* A step from the plan is your own choice: neutral label and first button. */
#choiceBar.step .kbsource { color: var(--faint); }
#choiceBar.step .kbknop.first { border-color: var(--dim); }
#choiceBar.step .kbknop.first:hover { background: var(--s2); }

/* -- overview as a grid, across the full width: no session bar and no
   panel of a single session; the structure here is the board -- */
body.breed.overview #app { --kol-bord: 0px; --kol-insp: 0px; }
body.breed.overview #inspector { display: none !important; }
#overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 28px; align-content: start; }
#overview > .ohead, #oStructure { grid-column: 1 / -1; }
#overview .osec { margin-bottom: 0; min-width: 0; }
@media (max-width: 1099px) { #overview { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1700px) { #overview { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* -- structure: each suite a trunk with a side branch per project -- */
.ostructure { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.suite { border: 1px solid var(--line); border-radius: var(--r-3); background: var(--s1); padding: 12px 14px 10px; min-width: 0; }
.suite.lit { border-color: var(--red-ring); }
.suitehead { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; min-width: 0; }
.suitehead b { font: 700 16px/22px var(--sans); flex: none; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suitehead .status { margin-left: auto; }
.suitehead .tel { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suitehead .status { flex: none; }
.snet { list-style: none; margin: 0; padding: 0 0 0 8px; position: relative; }
.suite:not(.loose) .snet::before {      /* the trunk of the suite */
  content: ""; position: absolute; left: 8px; top: 0; bottom: 16px; width: 4px; border-radius: 2px; background: var(--line-2);
}
.sproj {
  --lijn: var(--l-off);
  display: grid; grid-template-columns: 22px 14px minmax(0, 1fr) auto auto; align-items: center; gap: 8px;
  width: 100%; min-height: 34px; padding: 4px 6px 4px 0; border: 0; border-radius: var(--r-1);
  background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; position: relative;
}
.sproj:hover { background: var(--s2); }
.sproj.open { background: var(--s2); }
.sproj .sbranch { height: 4px; border-radius: 2px; background: var(--line-2); margin-left: 4px; }
.sproj.has .sbranch { background: var(--lijn); }
.suite.loose .sproj .sbranch { visibility: hidden; }
.sproj .sstop { width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box; background: var(--s1); border: 2px solid var(--faint); }
.sproj.has .sstop { background: var(--text); border: 3px solid var(--s1); box-shadow: 0 0 0 1px var(--lijn); }
.sproj.loopt .sstop { background: var(--s1); border: 3px solid var(--text); animation: halte 1.8s var(--ease) infinite; }
.sproj.wacht .sstop { background: var(--s1); border: 3px solid var(--red); }
.sproj .sname { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sproj:not(.has) .sname { color: var(--dim); font-weight: 400; }
.sproj .tel { min-width: 0; text-align: right; white-space: nowrap; }
.sproj .tel:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .sproj.loopt .sstop { animation: none; } }
/* A button doesn't shrink below its content by itself; the card must stay in its column. */
.ocard, .sproj { min-width: 0; max-width: 100%; }
.ocard > *, .sproj > * { min-width: 0; }

/* =====================================================================
   Avatars of units: replace the line bars in lists. The dot on the
   avatar is the status; on hover it is shown as text alongside.
   ===================================================================== */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.avatar {
  --av: var(--l-off);
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: 28px; height: 28px; border-radius: var(--r-2);
  background: color-mix(in srgb, var(--av) 22%, var(--s2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--av) 55%, transparent);
  color: var(--text);
}
.avatar.s { width: 24px; height: 24px; border-radius: 6px; }
.avatar.l { width: 40px; height: 40px; border-radius: var(--r-2); }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.avatar .avini { font: 800 11px/1 var(--sans); letter-spacing: .02em; color: color-mix(in srgb, var(--av) 35%, var(--text)); }
.avatar.l .avini { font-size: 15px; }
.avatar .avstip {
  position: absolute; right: -4px; bottom: -4px; width: 12px; height: 12px; border-radius: 50%;
  box-sizing: border-box; border: 2px solid var(--bg); background: var(--faint);
}
.avatar.l .avstip { width: 15px; height: 15px; right: -5px; bottom: -5px; }
.avatar.st-busy .avstip { background: var(--text); animation: avpuls 1.8s var(--ease) infinite; }
.avatar.st-wait .avstip, .avatar.st-err .avstip { background: var(--red); }
/* waiting on you: a halo around the dot, so it stands out between the grey ones */
.avatar.st-wait .avstip { box-shadow: 0 0 0 2px color-mix(in srgb, var(--red) 30%, transparent); }
.avatar.st-done .avstip { background: var(--ok); }
.avatar.st-off .avstip { background: var(--l-off); }
.avatar.st-none .avstip { background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--faint); }
@keyframes avpuls { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--text) 60%, transparent); } 100% { box-shadow: 0 0 0 6px transparent; } }
/* status as text on hover: see the floating tooltip (#hovertip) in app.js */
#hovertip {
  position: fixed; z-index: 100; max-width: 320px; padding: 5px 9px; border-radius: var(--r-1);
  background: var(--s3); color: var(--text); box-shadow: var(--shadow-pop); pointer-events: none;
  font: 600 12px/16px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (hover: none) { #hovertip { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .avatar.st-busy .avstip { animation: none; } }
.avslot { display: inline-flex; }
.avslot:empty { display: none; }

/* structure with units */
.osechead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.osechead h2 { margin: 0; color: var(--faint); }
.mini.primary { background: var(--red-fill); border-color: var(--red-fill); color: var(--on-fill); }
.suitehead .avatar { margin-right: 2px; }
.suiteword { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.suiteword b { font: 700 16px/22px var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suiteword .tel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sproj { grid-template-columns: 22px 14px minmax(0, 1fr) auto; }
.sproj.st-busy .sstop { background: var(--s1); border: 3px solid var(--text); animation: halte 1.8s var(--ease) infinite; }
.sproj.st-wait .sstop, .sproj.st-err .sstop { background: var(--s1); border: 3px solid var(--red); box-shadow: none; }
.sproj.st-done .sstop { background: var(--ok); border: 3px solid var(--s1); box-shadow: 0 0 0 1px var(--ok); }
.sproj.st-off .sstop { background: var(--l-off); border: 3px solid var(--s1); box-shadow: none; }

/* edit */
.suite.bewerk { border-style: dashed; }
.suite.bewerk .suitehead { gap: 8px; }
.avbtn { background: none; border: 0; padding: 0; cursor: pointer; border-radius: var(--r-2); }
.avbtn:hover .avatar { box-shadow: inset 0 0 0 2px var(--av); }
.uname { flex: 1; min-width: 0; height: 34px; padding: 0 10px; border-radius: var(--r-2); border: 1px solid var(--line-2);
  background: var(--bg); color: var(--text); font: 700 15px/1 var(--sans); }
.uname:focus { outline: none; border-color: var(--dim); }
.avpaneel { display: grid; gap: 10px; padding: 10px 0 12px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.avkleuren { display: flex; gap: 8px; }
.avkleur { width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--av); cursor: pointer; }
.avkleur[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--s1), 0 0 0 4px var(--text); }
.avfield { display: flex; align-items: center; gap: 10px; color: var(--dim); font-size: 13px; }
.avfield input { width: 64px; height: 30px; padding: 0 8px; border-radius: var(--r-1); border: 1px solid var(--line-2); background: var(--bg); color: var(--text); font: 700 14px/1 var(--sans); text-transform: uppercase; }
.avactions { display: flex; gap: 8px; flex-wrap: wrap; }
.avactions label.mini { cursor: pointer; }
.imembers { list-style: none; margin: 0; padding: 4px 0 0; min-height: 40px; border-radius: var(--r-2); }
.imembers.doel { background: var(--s2); box-shadow: inset 0 0 0 1px var(--dim); }
.imember { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 4px 6px;
  border-radius: var(--r-1); cursor: grab; }
.imember:hover { background: var(--s2); }
.imember.dragging { opacity: .4; }
.imember .grip { width: 16px; height: 16px; color: var(--faint); }
.imember .sname { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smove { max-width: 140px; height: 28px; border-radius: var(--r-1); border: 1px solid var(--line); background: var(--bg); color: var(--dim); font: 400 12px/1 var(--sans); }
.iempty { padding: 10px 6px; color: var(--faint); font-size: 13px; }
.suite.new { display: grid; place-content: center; justify-items: center; gap: 6px; min-height: 140px; text-align: center;
  border: 1px dashed var(--line-2); background: none; color: var(--dim); font: inherit; cursor: pointer; }
.suite.new:hover { background: var(--s1); color: var(--text); }
.suite.new .i { width: 22px; height: 22px; }
.suite.new span { font-size: 13px; color: var(--faint); max-width: 30ch; }

/* -- the board per unit -- */
.bgroep { margin-bottom: 6px; border-radius: var(--r-2); }
.bgroep + .bgroep { border-top: 1px solid var(--line); padding-top: 6px; }
.bgrouphead {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 6px 8px 6px 4px;
  border: 0; border-radius: var(--r-2); background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.bgrouphead:hover { background: var(--s2); }
.bgrouphead .chev { width: 14px; height: 14px; color: var(--faint); transform: rotate(90deg); transition: transform var(--fast) var(--ease); flex: none; }
.bgroep.dicht .bgrouphead .chev { transform: rotate(0deg); }
.bgname { flex: 1; min-width: 0; font: 700 13px/18px var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bgrouphead .tel { flex: none; }
.bgpip { flex: none; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-3);
  background: var(--red-fill); color: var(--on-fill); font: 700 11px/1 var(--mono); }
.bgbusy { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--text); animation: avpuls 1.8s var(--ease) infinite; }
.bgroep.dicht.lit .bgrouphead { background: var(--red-wash); }
.bgroupbody { padding-left: 6px; }
.avatar.geen { background: var(--s2); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--faint); }
.avatar.geen .i { width: 14px; height: 14px; }
@media (prefers-reduced-motion: reduce) { .bgbusy { animation: none; } }

/* -- overview without line network: the structure there is the card -- */
body.overview #net { display: none !important; }
.bgtip { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }

/* -- add to your message -- */
.attachdlg {
  margin: 0; position: fixed; width: 340px; max-width: calc(100vw - 24px); padding: 12px;
  border: 1px solid var(--line-2); border-radius: var(--r-3); background: var(--s1); color: var(--text);
  box-shadow: var(--shadow-pop);
}
.attachdlg::backdrop { background: transparent; }
.attachdlg[open] { animation: dlgIn 160ms var(--ease); }
.attachdlg h2 { margin: 2px 6px 8px; color: var(--faint); }
.attachchoices { display: grid; gap: 2px; }
.bchoice {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; width: 100%;
  padding: 10px; border: 0; border-radius: var(--r-2); background: none; color: var(--text);
  font: inherit; text-align: left; cursor: pointer;
}
.bchoice:hover, .bchoice:focus-visible { background: var(--s2); }
.bchoice .i { width: 20px; height: 20px; color: var(--dim); margin-top: 1px; }
.bchoice > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bchoice b { font-weight: 600; font-size: 14px; }
.bchoice > span > span { color: var(--dim); font-size: 13px; line-height: 18px; }
@media (max-width: 1099px) {
  .attachdlg { inset: auto 0 0 0; width: 100%; max-width: 100%; border-radius: var(--r-3) var(--r-3) 0 0; border-bottom: 0;
    padding-bottom: calc(12px + var(--safe-b)); }
  .attachdlg::backdrop { background: var(--scrim); }
  .bchoice { padding: 14px 10px; }
}
@media (prefers-reduced-motion: reduce) { .attachdlg[open] { animation: none; } }

/* -- notifications are off: say so, with a button -- */
.pushbanner { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  margin: 8px 10px; padding: 10px 12px; border-radius: var(--r-2); border: 1px solid var(--line-2); background: var(--s2); }
.pushbanner .i { width: 18px; height: 18px; color: var(--l-orange); }
.pushbanner > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pushbanner b { font-size: 13px; }
.pushbanner > span > span { color: var(--dim); font-size: 12px; line-height: 17px; }
.pushbanner.large { grid-column: 1 / -1; margin: 0; padding: 14px 16px; }
.pushbanner.large b { font-size: 15px; }
.pushbanner.large > span > span { font-size: 13px; }

/* -- pairing a device and paired devices (in the dialog) --
   The code is the only thing you type over: large, mono, neutral. Red is not
   needed here; revoking only turns red in the confirmation. */
.dlgcontent { min-width: 0; }
.pair {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 16px; border-radius: var(--r-2); background: var(--s2); box-shadow: inset 0 0 0 1px var(--line);
}
.paircode { font: 600 32px/40px var(--mono); letter-spacing: .08em; color: var(--text); user-select: all; }
.pairrest { font: 400 13px/20px var(--sans); color: var(--dim); font-variant-numeric: tabular-nums; }
.pairurl { font: 500 14px/20px var(--mono); color: var(--text); overflow-wrap: anywhere; }
.pair.expired .paircode { color: var(--faint); text-decoration: line-through; }
.dlist { list-style: none; margin: 0; padding: 0; max-height: 50vh; overflow-y: auto; }
.drow {
  display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line);
}
.drow:first-child { border-top: 0; }
.dword { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.dname { font: 600 14px/20px var(--sans); overflow-wrap: anywhere; }
.dmeta { font: 400 13px/18px var(--sans); color: var(--dim); }
.dbtn {
  flex: none; height: 36px; padding: 0 14px; border-radius: var(--r-2); cursor: pointer;
  border: 1px solid var(--line-2); background: var(--s1); color: var(--text); font: 600 13px/1 var(--sans);
}
.dbtn:hover { background: var(--s3); }

/* -- memory (Mindflayer) in the inspector -- */
.grow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 5px 0; font-size: 13px; border-bottom: 1px solid var(--line); }
.grow > span:first-child { color: var(--dim); }
.grow > span:last-child { font: 600 13px/18px var(--mono); text-align: right; }
.grow.wacht > span:last-child { color: var(--l-cyan); }
.gactions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.gempty { margin: 0; color: var(--faint); font-size: 13px; line-height: 19px; }
.gempty code { font-size: 12px; color: var(--dim); }
.grow .faint { font: 400 13px/18px var(--sans); color: var(--faint); }
/* choices on a question card may wrap to a second line instead of being cut off */
.ask-choices.ask-keuzes { flex-wrap: wrap; }
.ask-choices.ask-keuzes button { flex: 1 1 auto; overflow: visible; text-overflow: clip; }

/* ---------- inbox: triage columns + one at a time (inbox.js) ----------
   Same page mode as the overview (body.overview), with the inbox instead
   of the overview cards. Red only for waiting on you, error and
   the primary button. */
#inbox { overflow-y: auto; min-height: 0; padding: 24px 32px 40px; display: flex; flex-direction: column; gap: 16px; }
body.breed #inbox { grid-column: 2; grid-row: 3 / 6; }
body:not(.breed) #inbox { flex: 1; padding: 16px 12px 32px; }
body.inboxpage #overview { display: none !important; }
.inboxbtn[aria-pressed="true"] { background: var(--s2); color: var(--text); }
.inboxbtn.wacht .cnt { background: var(--red-fill); color: var(--on-fill); }

.ihead { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.ihead > div:first-child { margin-right: auto; }
.osummary .rood, .ihead .rood { color: var(--red-ink); font-weight: 700; }
.ifilter { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--s1); }
.ifilter button { border: 0; background: none; color: var(--dim); font: 600 13px/1 var(--sans); padding: 8px 12px; border-radius: var(--r-1); cursor: pointer; min-height: 32px; }
.ifilter button:hover { color: var(--text); }
.ifilter button[aria-selected="true"] { background: var(--s3); color: var(--text); }
.ifilter .tel { color: var(--faint); margin-left: 4px; }

.inew { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--s1); }
.inew:focus-within { border-color: var(--line-2); }
.inew > .i { color: var(--faint); flex: none; }
.inew input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--text); font: 15px/22px var(--sans); padding: 8px 0; }

.icolumns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 1099px) { .icolumns { grid-template-columns: minmax(0, 1fr); } }
.icolhead { display: flex; align-items: baseline; gap: 10px; padding-bottom: 8px; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
.icolhead h2 { margin: 0; color: var(--text); }
.icolhead h2 .tel { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 6px; border: 1px solid var(--line-2); border-radius: var(--r-1); text-align: center; color: var(--dim); }
.icolexplain { margin-left: auto; color: var(--faint); font-size: 12px; }
.ilist { display: grid; gap: 8px; }
.iempty { margin: 0; padding: 16px; border: 1px dashed var(--line); border-radius: var(--r-3); color: var(--faint); font-size: 13px; line-height: 20px; }

.ikaart { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--s1); cursor: pointer;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.ikaart:hover { background: var(--s2); border-color: var(--line-2); }
.ikaart:focus-visible { outline: 2px solid var(--dim); outline-offset: 2px; }
.ikaart.wacht { background: var(--red-wash); border-color: var(--red-ring); }
.ikaart.gekozen { border-color: var(--dim); }
.irow { display: flex; align-items: center; gap: 10px; min-width: 0; }
.irow .status { margin-left: auto; flex: none; }
.itile { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--s2); color: var(--dim); }
.itile .i { width: 16px; height: 16px; }
.itile.hive img { width: 18px; height: 18px; border-radius: 4px; }
.iwho { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 2px; min-width: 0; font-size: 13px; line-height: 18px; color: var(--dim); }
.iwho b { color: var(--text); font-weight: 700; }
.iwho .tel { flex-basis: 100%; color: var(--faint); font-size: 12px; }
.itext { margin: 10px 0 0; font-size: 14px; line-height: 21px; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ikaart.fout .itext { color: var(--red-ink); }
.itext.quote::before { content: "„"; } .itext.quote::after { content: "”"; }

.iroute { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 10px; font-size: 13px; line-height: 18px; --lijn: var(--l-off); }
.iline { position: relative; flex: none; width: 34px; height: 6px; border-radius: 3px; background: var(--lijn); }
.iline b { position: absolute; right: -2px; top: 50%; width: 12px; height: 12px; transform: translateY(-50%); border-radius: 50%; background: var(--bg); border: 3px solid var(--lijn); }
.itarget { font-weight: 600; }
.iwhy { color: var(--dim); }
.iroute.reads { color: var(--faint); }
.iroute.reads .iline { display: inline-flex; gap: 4px; background: none; width: auto; }
.iroute.reads .iline i { width: 8px; height: 6px; border-radius: 3px; background: var(--s3); animation: ileest 1.2s var(--ease) infinite; }
.iroute.reads .iline i:nth-child(2) { animation-delay: .2s; } .iroute.reads .iline i:nth-child(3) { animation-delay: .4s; }
@keyframes ileest { 50% { background: var(--dim); } }
@media (prefers-reduced-motion: reduce) { .iroute.reads .iline i { animation: none; } }
.ibtns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ibtns:empty { display: none; }
.ibtns.large .mini { min-height: 40px; padding: 0 16px; }

/* focus: queue on the left, the item large, the proposal on the right */
.ifhead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.ifhead [data-ido="terug"] .i { transform: rotate(180deg); }
.status.iproposal { color: var(--text); }
.ifhead kbd, .ifnav kbd { font: 600 11px/16px var(--mono); padding: 0 5px; border: 1px solid var(--line-2); border-radius: 4px; color: var(--dim); }
.ifpath { color: var(--dim); font-size: 14px; } .ifpath b { color: var(--text); }
.ifnav { margin-left: auto; display: flex; gap: 8px; }
.ifgrid { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) minmax(280px, 340px); gap: 24px; margin-top: 16px; align-items: start; }
@media (max-width: 1099px) { .ifgrid { grid-template-columns: minmax(0, 1fr); } .ifrow { display: none; } }
.ifrow { display: grid; gap: 6px; }
.iwrow { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px; border: 1px solid transparent; border-radius: var(--r-2); background: none; color: var(--text); font: inherit; cursor: pointer; }
.iwrow:hover { background: var(--s1); }
.iwrow.gekozen { background: var(--s2); border-color: var(--line-2); }
.iwrow.wacht { background: var(--red-wash); border-color: var(--red-ring); }
.iwcore { flex: 1; min-width: 0; display: grid; font-size: 13px; line-height: 18px; }
.iwcore b, .iwcore span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iwcore span { color: var(--dim); }
.iwmeta { display: grid; justify-items: end; gap: 2px; flex: none; }
.iwmeta .tel { color: var(--faint); font-size: 12px; }
.ifitem { min-width: 0; }
.ifmain { display: flex; align-items: flex-start; gap: 14px; }
.ifmain .itile { width: 44px; height: 44px; }
.ifmain h2 { margin: 0; font: 800 22px/28px var(--sans); }
.ifmain p { margin: 2px 0 0; font-size: 13px; }
.ifmain .status { margin-left: auto; }
.ifitem h3 { margin: 24px 0 8px; color: var(--faint); }
.iftext { font-size: 16px; line-height: 26px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ifnames { margin: 0; padding-left: 18px; color: var(--dim); line-height: 24px; }
.ifproposal { padding: 18px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--s1); }
.ifproposal h2 { margin: 0 0 8px; font: 700 17px/24px var(--sans); }
.ifproposal > p { font-size: 13px; line-height: 20px; }
.ifnext { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; width: 100%; margin-top: 16px; padding: 12px 14px; text-align: left;
  border: 0; border-radius: var(--r-2); background: var(--s2); color: var(--text); font: inherit; cursor: pointer; }
.ifnext:hover { background: var(--s3); }
.ifnext span { color: var(--dim); font-size: 12px; }
.ifnext b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ifnext .i { grid-row: 1 / 3; grid-column: 2; color: var(--dim); }
.ifkeys { margin: 12px 0 0; color: var(--faint); font-size: 12px; }

/* inbox routing: the steps as branches of one line */
.isteps { list-style: none; margin: 4px 0 12px; padding: 0; display: grid; }
.istep { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 8px 0 8px 4px; --lijn: var(--l-off); }
.istep::before { content: ""; position: absolute; left: 13px; top: 0; bottom: 0; width: 4px; border-radius: 2px; background: var(--lijn); opacity: .55; }
.istep:first-child::before { top: 18px; } .istep:last-child::before { bottom: calc(100% - 22px); }
.istep.uit { opacity: .55; }
.icheck, .istop { position: relative; z-index: 1; flex: none; width: 22px; height: 22px; margin-top: 1px; }
.icheck input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.icheck span, .istop { display: grid; place-items: center; border-radius: 6px; border: 2px solid var(--lijn); background: var(--bg); }
.icheck span { width: 22px; height: 22px; box-sizing: border-box; }
.icheck input:checked + span { background: var(--lijn); }
.icheck input:checked + span::after { content: ""; width: 9px; height: 5px; border: solid var(--bg); border-width: 0 0 2.5px 2.5px; transform: translateY(-1px) rotate(-45deg); }
.icheck input:focus-visible + span { outline: 2px solid var(--dim); outline-offset: 2px; }
.istop { border-radius: 50%; box-sizing: border-box; }
.istep.klaar .istop { background: var(--lijn); }
.istepcore { flex: 1; min-width: 0; display: grid; gap: 1px; font-size: 13px; line-height: 18px; }
.istepcore b { font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.ikind { display: inline-flex; align-items: center; gap: 5px; color: var(--faint); font: 700 11px/16px var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.ikind .i { width: 13px; height: 13px; }
.iclash { display: inline-flex; align-items: center; gap: 5px; color: var(--red-ink); font-weight: 600; }
.iclash .i { width: 14px; height: 14px; }
.istep > .status { flex: none; margin-top: 2px; }
.iedit { flex: none; width: 32px; height: 32px; margin-top: -4px; color: var(--faint); }
.iedit:hover { color: var(--text); }

/* ---------- settings as its own page (settings.js) ----------
   Full page like Claude's settings: sections on the left, one
   section on the right. On the phone first the list, then the section. */
#settings { left: 0; width: auto; border-left: 0; box-shadow: none; animation: instPagIn 160ms var(--ease); }
@keyframes instPagIn { from { opacity: .6; } to { opacity: 1; } }
body.inst-open::after { display: none; }
.insthead { padding-left: 16px; }
body.breed .insthead { padding: 14px 24px; }
.instback .i { transform: rotate(180deg); }
.instframe { flex: 1; min-height: 0; display: grid; grid-template-columns: 260px minmax(0, 1fr); }
.instnav { display: flex; flex-direction: column; gap: 2px; padding: 20px 12px; border-right: 1px solid var(--line); overflow-y: auto; }
.instnav button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: var(--r-2);
  background: none; color: var(--dim); font: 600 14px/20px var(--sans); text-align: left; cursor: pointer; }
.instnav button:hover { background: var(--s1); color: var(--text); }
.instnav button[aria-current="page"] { background: var(--s2); color: var(--text); font-weight: 700; }
.instnav button[aria-current="page"] .i { color: var(--text); }
.instnav button:focus-visible { outline: 2px solid var(--dim); outline-offset: -2px; }
.instnav .i { width: 18px; height: 18px; flex: none; }
.instnav button > span { flex: 1; min-width: 0; display: grid; }
.instnav button > span span { font-weight: 400; font-size: 13px; color: var(--faint); }
.instnav .arrow { color: var(--faint); }
/* The whole column scrolls (bar on the right against the edge); the content stays readably narrow. */
.instbody { padding: 8px 40px 48px; width: 100%; box-sizing: border-box; overflow-y: auto; min-height: 0; }
.instbody > * { max-width: 760px; }
.instsec { border-bottom: 0; }
.instsec:not([hidden]) ~ .instsec:not([hidden]) { border-top: 1px solid var(--line); }
.instpagetitle { margin: 28px 0 0; font: 800 26px/32px var(--sans); letter-spacing: -.01em; }
.instpagedesc { margin: 4px 0 0; color: var(--dim); font-size: 14px; }
@media (max-width: 1099px) { .instpagetitle, .instpagedesc { display: none; } }
.instsechead { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.instsechead h3 { margin: 0; }
.instsechead .mini { margin-left: auto; }
@media (max-width: 1099px) {
  .instframe { grid-template-columns: minmax(0, 1fr); }
  #settings.lijst .instbody, #settings:not(.lijst) .instnav { display: none; }
  .instnav { border-right: 0; padding: 8px 12px; }
  .instnav button { padding: 14px 12px; min-height: 56px; }
  .instbody { padding: 0 16px calc(32px + var(--safe-b)); }
}

/* TeamClaude */
.tcbody { display: grid; gap: 14px; padding-bottom: 16px; }
.tcservice { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--s1); }
.tcservice > div { flex: 1; min-width: 0; display: grid; }
.tcservice .dim { font-size: 13px; }
.tclamp { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px var(--ok-wash); flex: none; }
.tcservice.fout { background: var(--red-wash); border-color: var(--red-ring); }
.tcservice.fout .tclamp { background: var(--red-ink); box-shadow: none; }
.tcnotice { padding: 12px 16px; border-radius: var(--r-3); border: 1px solid var(--line); }
.tcnotice.fout { border-color: var(--red-ring); color: var(--red-ink); }
.tcnotice p { margin: 4px 0 0; }
.tctiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 700px) { .tctiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tctiles > div { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-3); min-width: 0; }
.tctiles .t-board { color: var(--faint); }
.tctiles b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tctiles .dim { font-size: 12px; }
.tcsub { margin: 10px 0 0; color: var(--faint); }
.tcaccounts { display: grid; gap: 8px; }
.tcaccount { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--s1); display: grid; gap: 8px; }
.tcaccount.current { border-color: var(--dim); }
.tchead { display: flex; align-items: flex-start; gap: 12px; }
.tchead > div { flex: 1; min-width: 0; display: grid; }
.tchead b { overflow-wrap: anywhere; }
.tchead .dim { font-size: 12px; }
.status.tcnow::before { display: none; }
.tcmeter { display: grid; grid-template-columns: 96px minmax(0, 1fr) 40px minmax(0, 120px); align-items: center; gap: 10px; font-size: 13px; }
.tcmname { color: var(--dim); }
.tcbar { height: 8px; border-radius: 4px; background: var(--s3); overflow: hidden; }
.tcbar i { display: block; height: 100%; border-radius: 4px; background: var(--text); }
.tcmeter.vol .tcbar i { background: var(--red-fill); }
.tcmeter.vol .tel { color: var(--red-ink); font-weight: 700; }
.tcmeter .tel { text-align: right; }
@media (max-width: 700px) {
  .tcmeter { grid-template-columns: 84px minmax(0, 1fr) 40px; row-gap: 0; }
  .tcmreset { grid-column: 2 / -1; }
  .tcmreset:empty { display: none; }
}
.tcmreset { color: var(--faint); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcmeta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--dim); }
.tcmeta .rood { color: var(--red-ink); }
.tcaction { padding: 14px 16px; border: 1px dashed var(--line-2); border-radius: var(--r-3); }
.tcaction > p { margin: 0; font-size: 13px; }
.tcsteps { margin: 0 0 8px; padding-left: 20px; display: grid; gap: 12px; }
.tcsteps li > b { display: block; margin-bottom: 6px; }
.tcsteps a.mini { display: inline-flex; text-decoration: none; }
.tccode { display: flex; gap: 8px; }
.tccode input { flex: 1; min-width: 0; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--bg); color: var(--text); font: 14px/20px var(--mono); }

/* Image from the hub in a message: a small preview, click opens it large */
a.mdimage { display: inline-block; margin: 6px 0; border: 1px solid var(--line); border-radius: var(--r-2); overflow: hidden; background: var(--s1); line-height: 0; vertical-align: top; }
a.mdimage:hover { border-color: var(--dim); }
a.mdimage img { display: block; max-width: min(360px, 100%); max-height: 220px; width: auto; height: auto; object-fit: cover; object-position: top left; }

/* ---------- map: layers and dependencies (map.js, Keten tab) ----------
   Layers are zones, relations lines in
   the line colours, broken is red dotted; red otherwise only for whoever
   is waiting on you. */
.mapscroll { overflow: auto; min-height: 0; border-radius: var(--r-3); }
.chainside h4 { margin: 14px 0 4px; color: var(--faint); }
.kloading { padding: 24px; }

.mapsvg { display: block; font-family: var(--mono); }
.kzone { fill: var(--s1); }
.kzone.om { fill: var(--bg); }
.kzonename { font: 700 11px var(--sans); letter-spacing: .08em; fill: var(--dim); }
.kzonetel { font: 400 11px var(--mono); fill: var(--faint); }
.kline { fill: none; stroke: var(--lijn); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.kline.broken { stroke: var(--red-ink); stroke-dasharray: 2 9; stroke-width: 5; }
.kline.vague, .knode.vague { opacity: .22; }
.knode { cursor: pointer; }
.knode:focus { outline: none; }
.knode:focus-visible .kround { stroke: var(--dim); stroke-width: 6; }
.kround { fill: var(--text); stroke: var(--bg); stroke-width: 4; }
.knode.large .kround { fill: var(--bg); stroke: var(--text); stroke-width: 4; }
.knode.st-building .kround { fill: var(--bg); stroke: var(--text); stroke-width: 3; }
.knode.st-designed .kround, .knode.st-unknown .kround { fill: var(--bg); stroke: var(--faint); stroke-width: 2.5; stroke-dasharray: 3 3; }
.knode.wacht .kround { fill: var(--red-fill); stroke: var(--red-ring); stroke-width: 6; stroke-dasharray: none; }
.knode.gekozen .kround { stroke: var(--text); stroke-width: 6; }
.khalo { fill: var(--text); opacity: .14; animation: khalo 1.8s var(--ease) infinite; transform-box: fill-box; transform-origin: center; }
@keyframes khalo { 50% { opacity: .04; transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .khalo { animation: none; } }
.klabel { font: 600 12.5px var(--mono); fill: var(--text); text-anchor: middle; paint-order: stroke; stroke: var(--bg); stroke-width: 4px; }
.kstatus { font: 400 11px var(--mono); fill: var(--faint); text-anchor: middle; paint-order: stroke; stroke: var(--bg); stroke-width: 4px; }
.knode.ziek .kstatus { fill: var(--dim); }
.kextra { font: 700 11px var(--sans); letter-spacing: .08em; text-anchor: middle; fill: var(--text); paint-order: stroke; stroke: var(--bg); stroke-width: 7px; stroke-linejoin: round; }
.kextra.rood { fill: var(--red-ink); }
.kextra.hier { fill: var(--text); }

.kzrow { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border: 1px solid transparent; border-radius: var(--r-2);
  background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
div.kzrow { cursor: default; }
button.kzrow:hover { background: var(--s1); }
.kzrow.wacht { background: var(--red-wash); border-color: var(--red-ring); }
.kztext { flex: 1; min-width: 0; display: grid; font-size: 13px; line-height: 18px; }
.kztext b, .kztext span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kztext span { color: var(--dim); }
.kzrow > .status { flex: none; }
.kzline { flex: none; width: 22px; height: 5px; border-radius: 3px; background: var(--l-off); }
.kzline.broken { background: repeating-linear-gradient(90deg, var(--red-ink) 0 4px, transparent 4px 8px); }
.ksource { margin: 12px 0 0; font: 400 11px/16px var(--mono); color: var(--faint); overflow-wrap: anywhere; }

.kdetail { padding: 14px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--s1); display: grid; gap: 8px; }
.kdhead { display: flex; align-items: baseline; gap: 10px; }
.kdhead b { font-size: 16px; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.kdl { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px 10px; margin: 0; font: 400 12px/18px var(--mono); }
.kdl dt { color: var(--faint); }
.kdl dd { margin: 0; overflow-wrap: anywhere; }
.kdnote { margin: 0; font-size: 13px; line-height: 19px; color: var(--dim); overflow-wrap: anywhere; }
.kdbroken p { overflow-wrap: anywhere; }
.kdbroken p { margin: 0; color: var(--red-ink); font-size: 13px; font-weight: 600; }
.kdlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.kdlist li { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.kdlink { background: none; border: 0; padding: 2px 0; color: var(--text); font: 600 13px var(--sans); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }


/* session tab Keten */
.chainblock { margin-bottom: 28px; }
.chainhead { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.chainhead h2 { margin: 0; font: 700 17px/24px var(--sans); }
.chainframe { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.chainframe .mapscroll { max-height: 70vh; }
.chainside { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); align-content: start; gap: 6px 20px; }
.chainside > h4, .chainside > .ksource { grid-column: 1 / -1; }
.klink { display: grid; gap: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.klink label { color: var(--faint); }
.kkrow { display: flex; flex-wrap: wrap; gap: 6px; }
.kkrow input { flex: 1 1 160px; min-width: 0; padding: 7px 10px; border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--bg); color: var(--text); font: 13px/18px var(--mono); }
.kkrow input:focus { outline: none; border-color: var(--dim); }
.kkorigin { font-size: 12px; color: var(--faint); }

/* ---------- memory: collective in Hive (recall.js) ---------- */
.recognize { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line);
  font: 400 12px/18px var(--sans); color: var(--faint); white-space: normal; }
.recognize .i { width: 15px; height: 15px; color: var(--l-cyan); }
.recognize button { display: inline-flex; gap: 5px; align-items: baseline; padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--s1); color: var(--dim); font: 400 12px/18px var(--sans); cursor: pointer; }
.recognize button b { font: 600 11px/18px var(--mono); color: var(--l-cyan); }
.recognize button:hover { border-color: var(--line-2); color: var(--text); }
.readpane { width: min(760px, calc(100vw - 32px)); max-height: min(84vh, 900px); padding: 0; border: 1px solid var(--line-2); border-radius: var(--r-3);
  background: var(--bg); color: var(--text); box-shadow: var(--shadow-pop); display: flex; flex-direction: column; }
.readpane:not([open]) { display: none; }
.readpane::backdrop { background: var(--scrim); }
.lvhead { display: flex; align-items: flex-start; gap: 12px; padding: 18px 18px 14px 24px; border-bottom: 1px solid var(--line); }
.lvhead > div { flex: 1; min-width: 0; }
.lvhead .t-board { color: var(--l-cyan); }
.lvhead h2 { margin: 4px 0 0; font: 800 22px/28px var(--sans); }
.lvtext { overflow-y: auto; padding: 16px 24px 28px; white-space: normal; max-width: none; }
.lvwhen { padding: 10px 12px; border-radius: var(--r-2); background: var(--s1); font-size: 13px; }
.gtiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
@media (max-width: 900px) { .gtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gtiles > div { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-3); min-width: 0; }
.gtiles .t-board { color: var(--faint); }
.gtiles b { font-size: 16px; }
.gtiles .dim { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gnote { margin: 6px 0; font-size: 13px; line-height: 19px; max-width: 72ch; }
.ghead { margin: 22px 0 6px; color: var(--faint); }
#gAlles h4 { margin: 14px 0 4px; color: var(--faint); }
.glist { display: grid; gap: 2px; }
.gempty { font-size: 13px; }
.gid { flex: none; width: 76px; font: 600 12px var(--mono); color: var(--l-cyan); }
.gitem[hidden] { display: none; }
.gsearch { width: 100%; max-width: 480px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--s1); color: var(--text); font: 14px var(--sans); }

/* Session bar: whatever needs an action from you is shown as a word in the row */
.paction { display: inline-block; margin: 2px 6px 0 0; vertical-align: middle; padding: 1px 8px; border-radius: 999px; font: 700 11px/16px var(--sans); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.paction.wacht { background: var(--red-fill); color: var(--on-fill); }
.paction.fout { color: var(--red-ink); box-shadow: inset 0 0 0 1px var(--red-ring); }
.paction.nieuw { background: var(--text); color: var(--bg); }
.paction.vraag { color: var(--red-ink); box-shadow: inset 0 0 0 1.5px var(--red-ring); background: var(--bg); cursor: help; }
.proj.vraag .dot { box-shadow: 0 0 0 2px var(--red-ring); }
.proj.lit, .proj.lit:hover { background: var(--red-wash); box-shadow: inset 0 0 0 1px var(--red-ring); }
.proj.nieuw .pname { font-weight: 800; }

/* ---------- planner (planner.js): day, week, task window, calendars ----------
   Same page mode as the overview. Appointments in their calendar's colour,
   read-only hatched; own blocks with a stripe in the colour of their
   folder. Red only for overdue and the primary button. */
#planner { overflow-y: auto; min-height: 0; padding: 20px 28px 32px; display: flex; flex-direction: column; gap: 12px; }
body.breed #planner { grid-column: 2; grid-row: 3 / 6; }
body:not(.breed) #planner { flex: 1; padding: 14px 12px 28px; }
body.plannerpage #overview { display: none !important; }
.plannerbtn[aria-pressed="true"] { background: var(--s2); color: var(--text); }
.plannerbtn.wacht .cnt { background: var(--red-fill); color: var(--on-fill); }
.plnav { display: flex; gap: 4px; margin-left: auto; }
.plnav .plback { transform: rotate(180deg); }
#plView button[aria-pressed="true"] { background: var(--s3); color: var(--text); }
.plfolders { display: flex; flex-wrap: wrap; gap: 6px; }
.plfolders button { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px;
  background: none; color: var(--dim); font: 600 13px var(--sans); cursor: pointer; }
.plfolders button i { width: 16px; height: 5px; border-radius: 3px; }
.plfolders button[aria-pressed="true"] { background: var(--s2); color: var(--text); border-color: var(--line-2); }
.plframe { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
@media (max-width: 1099px) { .plframe { grid-template-columns: minmax(0, 1fr); } }
.plvplane { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.plnote { margin: 0; font-size: 13px; color: var(--dim); }
.plweek { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.plwd { display: grid; gap: 3px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--s1); color: var(--text); font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.plwd b { font: 700 11px/16px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.plwd[data-today] b { color: var(--text); }
.plwd > span { font: 600 13px/18px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plwd em { font-style: normal; color: var(--red-ink); font-size: 12px; }
.plwd i { display: flex; gap: 2px; height: 4px; }
.plwd i u { flex: 1; border-radius: 2px; background: var(--s3); }
.plwd i u.f { background: var(--text); } .plwd i u.l { background: var(--red); }
.plwd[aria-current="date"] { background: var(--s2); border-color: var(--dim); }
@media (max-width: 700px) { .plweek { grid-template-columns: repeat(7, minmax(44px, 1fr)); } .plwd > span, .plwd i { display: none; } }
.plritual { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--s1); }
.plico { width: 36px; height: 36px; border-radius: var(--r-2); display: grid; place-items: center; background: var(--s2); flex: none; color: var(--l-yellow); }
.pltx { flex: 1 1 200px; min-width: 0; display: grid; } .pltx span { color: var(--dim); font-size: 13px; }
.pltargets { display: flex; flex-wrap: wrap; gap: 6px; }
.pltarget { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border: 1px dashed var(--line-2); border-radius: var(--r-2);
  font: 400 13px var(--sans); color: var(--faint); background: none; max-width: 240px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pltarget.vol { border-style: solid; color: var(--text); background: var(--s2); cursor: pointer; }
.pltarget.klaar { text-decoration: line-through; color: var(--dim); }
.pltarget em { font: 700 12px var(--mono); font-style: normal; color: var(--l-yellow); }
.plwhole { display: flex; flex-wrap: wrap; gap: 6px; }
.plafs-h { padding: 3px 10px; border-radius: var(--r-1); font: 600 12px/18px var(--sans); background: color-mix(in srgb, var(--c) 18%, var(--s1)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent); }
.plafs-h.ro, .plafs.ro { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 12%, var(--bg)) 0 6px, var(--bg) 6px 12px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent); }
.plwithout { display: grid; gap: 2px; padding: 10px 12px; border: 1px dashed var(--line-2); border-radius: var(--r-3); }
.plwithout .t-board { color: var(--faint); margin-bottom: 4px; }
.pltl { position: relative; border-top: 1px solid var(--line); }
.plhead { display: grid; grid-template-columns: 56px 1fr 1fr; height: 28px; align-items: center; color: var(--faint); font: 700 11px/16px var(--sans); letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid var(--line); }
.plhours { position: absolute; inset: 36px 0 0 0; }
.plhour { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line); }
.plhour span { position: absolute; left: 4px; top: -9px; padding-right: 6px; background: var(--bg); font: 400 12px/16px var(--mono); color: var(--faint); }
.plnow { position: absolute; left: 50px; right: 0; border-top: 2px solid var(--red); z-index: 2; }
.plnow::before { content: ""; position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); }
.plcol { position: absolute; top: 0; bottom: 0; }
.plcol.afs { left: 56px; right: 50%; }
.plcol.blk { left: 50%; right: 0; }
.plafs { position: absolute; border-radius: var(--r-2); padding: 5px 9px; overflow: hidden; font-size: 12px; line-height: 16px;
  background: color-mix(in srgb, var(--c) 16%, var(--s1)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent); }
.plafs b, .plblock b { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plafs span, .plblock span { color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.plblock { position: absolute; left: 6px; right: 6px; border-radius: var(--r-2); padding: 5px 9px 5px 34px; overflow: hidden; font-size: 12px; line-height: 16px;
  background: var(--s2); box-shadow: inset 3px 0 0 var(--c); cursor: grab; }
.plblock:hover { background: var(--s3); }
.plblock.ritual { background: color-mix(in srgb, var(--l-yellow) 9%, var(--s1)); }
.plblock.late { background: var(--red-wash); box-shadow: inset 3px 0 0 var(--red), inset 0 0 0 1px var(--red-ring); }
.plblock.late span { color: var(--dim-on-red); }
.plblock.klaar { opacity: .55; } .plblock.klaar b { text-decoration: line-through; }
.plblock .plck { position: absolute; left: 10px; top: 6px; }
.plexample { position: absolute; left: 6px; right: 6px; border: 1.5px dashed var(--dim); border-radius: var(--r-2); padding: 4px 9px; font: 600 12px var(--mono); color: var(--dim); pointer-events: none; }
.plck { width: 18px; height: 18px; flex: none; border-radius: 6px; border: 1.5px solid var(--line-2); background: none; padding: 0; cursor: pointer; }
.plck:hover { border-color: var(--dim); }
.plck.aan { background: var(--ok); border-color: var(--ok); }
.plside { display: grid; gap: 14px; min-width: 0; }
.plnew input { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--s1); color: var(--text); font: 14px var(--sans); }
.plnew input:focus { outline: none; border-color: var(--dim); }
.plsec h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; color: var(--faint); }
.plsec h2.rood { color: var(--red-ink); }
.plsec h2 .plactions, .plsec h2 .plright { margin-left: auto; display: flex; gap: 8px; letter-spacing: 0; text-transform: none; }
.plempty { margin: 4px 0; font-size: 13px; }
.plrow { display: grid; grid-template-columns: 18px minmax(0, 1fr) 24px; align-items: center; gap: 10px; padding: 7px 8px; margin: 0 -8px; border-radius: var(--r-2); cursor: pointer; }
.plrow:hover { background: var(--s2); }
.plrow.late { background: var(--red-wash); box-shadow: inset 0 0 0 1px var(--red-ring); margin-bottom: 4px; }
.plrow.late .plrt span { color: var(--dim-on-red); }
.plrow.klaar .plrt b { text-decoration: line-through; color: var(--dim); }
.plrt { min-width: 0; display: grid; }
.plrt b { font-size: 13px; line-height: 18px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plrt span { font-size: 12px; line-height: 16px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pltargetbtn { width: 24px; height: 24px; border: 0; border-radius: 6px; background: none; color: var(--line-2); font-size: 15px; cursor: pointer; padding: 0; }
.plrow:hover .pltargetbtn { color: var(--dim); }
.pltargetbtn.aan { color: var(--l-yellow) !important; }
/* week */
.plwas { position: relative; height: 18px; margin-left: 96px; font: 400 12px/16px var(--mono); color: var(--faint); }
.plwas span { position: absolute; transform: translateX(-50%); }
.plwrow { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; width: 100%; min-height: 80px; padding: 0; border: 0; border-top: 1px solid var(--line);
  background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.plwrow:hover { background: var(--s1); }
.plwrow.from { background: linear-gradient(90deg, var(--s1), transparent 70%); }
.plwdg { display: grid; gap: 1px; padding-left: 4px; }
.plwdg b { font: 700 11px/16px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.plwdg span { font-weight: 600; font-size: 13px; }
.plwdg em { font-style: normal; font-size: 12px; color: var(--red-ink); font-weight: 600; }
.plwbox { position: relative; height: 80px; }
.plwline { width: 100%; height: 74px; position: absolute; left: 0; top: 4px; overflow: visible; }
.plln { fill: none; stroke-width: 6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.plln.empty { stroke: var(--line-2); }
.plst { fill: var(--bg); stroke: var(--faint); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.plst.f { fill: var(--text); stroke: var(--bg); }
.plst.l { fill: var(--red); stroke: var(--bg); }
.plov { fill: color-mix(in srgb, var(--c) 18%, var(--bg)); stroke: var(--c); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.plov.ro { stroke-dasharray: 4 3; fill: var(--bg); }
.plwl { position: absolute; transform: translateX(-50%); font: 600 11.5px/14px var(--mono); white-space: nowrap; padding: 0 3px; background: var(--bg); border-radius: 3px; }
.plwl.rood { color: var(--red-ink); }
.plwo { position: absolute; top: 51px; padding-left: 6px; font: 400 11px/14px var(--mono); color: var(--faint); white-space: nowrap; pointer-events: none; }
/* task window */
.plvtitle { width: 100%; margin-top: 4px; padding: 4px 0; border: 0; border-bottom: 1px solid transparent; background: none; color: var(--text); font: 800 21px/28px var(--sans); }
.plvtitle:focus { outline: none; border-bottom-color: var(--line-2); }
.plvbody { display: grid; gap: 14px; }
.plvgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 640px) { .plvgrid { grid-template-columns: 1fr 1fr; } }
.plvgrid label, .plvnote { display: grid; gap: 4px; font: 700 11px/16px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.plvgrid .breed { grid-column: 1 / -1; }
.plvgrid input, .plvgrid select, .plvnote textarea { padding: 8px 10px; border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--s1); color: var(--text); font: 400 14px/20px var(--sans); text-transform: none; letter-spacing: 0; color-scheme: dark light; }
.plvnote textarea { resize: vertical; font: 400 13px/19px var(--mono); }
.plvcheck { display: grid; gap: 4px; }
.plvcheck .t-board { color: var(--faint); }
.plvcheck label { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 19px; }
.plvcheck input { margin-top: 3px; accent-color: var(--ok); }
.plvbtns { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 24px 18px; border-top: 1px solid var(--line); }
.plvbtns > span { flex: 1; }
.mini.gevaar { color: var(--red-ink); }
/* calendars in the settings */
.plcalendars { display: grid; gap: 8px; }
.plag { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-2); }
.plagk { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.plagt { flex: 1; min-width: 0; display: grid; font-size: 13px; } .plagt span { color: var(--dim); font-size: 12px; overflow-wrap: anywhere; }
.plagt .rood { color: var(--red-ink); }
.plagform { display: grid; gap: 8px; padding-top: 8px; }
.plagform h4 { margin: 8px 0 0; color: var(--faint); }
.plagform input[type=url], .plagform input#plAgName { padding: 8px 12px; border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--s1); color: var(--text); font: 14px var(--sans); }
.plagform select { padding: 6px 8px; border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--s1); color: var(--text); }
.plagread { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--dim); flex: 1; }
.plagread input { flex: none; width: 16px; height: 16px; accent-color: var(--text); }
/* phone: the timeline as a list */
@media (max-width: 700px) {
  .pltl { height: auto !important; border: 0; }
  .plhead { display: none; }
  .plhours { position: static; display: flex; flex-direction: column; gap: 6px; }
  .plhour, .plnow { display: none; }
  .plcol { position: static; display: contents; }
  .plafs, .plblock { position: static; height: auto !important; width: auto !important; min-height: 48px; padding-top: 8px; padding-bottom: 8px; }
}

.segment button[aria-pressed="true"] { background: var(--s3); color: var(--text); }

.isep { font-style: normal; }

/* -- Collective: the council's matters on the board, in the inspector and in the conversation (cases.js) -- */
.czrow {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; width: 100%;
  margin: 2px 0 10px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-2);
  background: var(--s1); color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.czrow:hover { border-color: var(--line-2); background: var(--s2); }
.cztile { width: 28px; height: 28px; border-radius: var(--r-2); display: grid; place-items: center; background: var(--s2); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text); }
.cztile .i { width: 16px; height: 16px; }
.czcore { min-width: 0; display: flex; flex-direction: column; }
.czcore b { font: 600 14px/20px var(--sans); }
.czcore > span { font: 400 12px/16px var(--sans); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.czcore em { font-style: normal; color: var(--red-ink); font-weight: 700; }
.czright { display: flex; align-items: center; gap: 8px; color: var(--faint); }
.czright .i { width: 14px; height: 14px; }

.pmatter { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 6px 0 4px; border-radius: var(--r-1);
  font: 600 11px/16px var(--mono); color: var(--dim); box-shadow: inset 0 0 0 1px var(--line-2); }
.pmatter .i { width: 12px; height: 12px; stroke-width: 2; }
.proj.lit .pmatter { color: var(--dim-on-red); box-shadow: inset 0 0 0 1px var(--red-ring); }

.zaken { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.zk, .izk { display: block; width: 100%; padding: 8px; margin-left: -8px; border: 0; border-radius: var(--r-2);
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.izk { margin-left: 0; padding: 8px 10px; }
.zk:hover, .izk:hover { background: var(--s2); }
.zk.wacht, .izk.wacht, .zk.wacht:hover, .izk.wacht:hover { background: var(--red-wash); box-shadow: inset 0 0 0 1px var(--red-ring); }
.zkhead { display: flex; align-items: baseline; gap: 8px; }
.zkw { color: var(--text); }
.wacht .zkw, .fout .zkw { color: var(--red-ink); }
.dicht .zkw { color: var(--ok); }
.zkbox { margin-left: auto; font: 400 12px/16px var(--mono); color: var(--faint); }
.wacht .zkbox { color: var(--dim-on-red); }
.zkquestion, .izkquestion { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 2px; font: 400 13px/18px var(--sans); color: var(--text); }
.izk.dicht .izkquestion { color: var(--dim); }
.izk .part { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.izk + .izk { margin-top: 4px; }
.zkmore { display: flex; align-items: center; gap: 6px; padding: 4px 0 0; border: 0; background: none; font: 400 12px/16px var(--sans); color: var(--faint); cursor: pointer; }
.zkmore .i { width: 12px; height: 12px; }
.zkmore:hover { color: var(--text); }

.zkroute { display: block; margin-top: 4px; overflow: visible; max-width: 100%; }
.zkroute .ln { fill: none; stroke: var(--lijn, var(--dim)); stroke-width: 6; stroke-linecap: round; }
.zkroute.large .ln { stroke-width: 6; }
.zkroute .ln.ahead { stroke: var(--line-2); }
.zkroute .ln.rood { stroke: var(--red); }
.zkroute .st { fill: var(--st-fill); stroke: var(--st-edge); stroke-width: 3; }
.zkroute .st.todo { fill: var(--bg); stroke: var(--faint); stroke-width: 2; }
.zkroute .st.now { fill: var(--bg); stroke: var(--text); stroke-width: 3; }
.zkroute .st.wacht { fill: var(--bg); stroke: var(--red); stroke-width: 3.5; }
.zkroute .st.ok { fill: var(--ok); }
.zkroute .st.ring { fill: var(--bg); stroke: var(--text); stroke-width: 2.5; }
.zkroute text { font: 600 10.5px/1 var(--mono); fill: var(--faint); }
.zkroute.large text { font-size: 11px; }
.zkroute text.nu { fill: var(--text); }
.zkroute text.rood { fill: var(--red-ink); }
.zkroute text.okt { fill: var(--ok); }
.wacht .zkroute .st.todo { stroke: var(--dim-on-red); }
.wacht .zkroute .st.wacht { stroke: var(--red); }
.wacht .zkroute .st.ring { stroke: var(--text); fill: var(--red-wash); }
.wacht .zkroute text { fill: var(--dim-on-red); }
.wacht .zkroute text.rood { fill: var(--red-ink); }

.rt { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px 0 6px; border-radius: var(--r-1);
  background: var(--s2); font: 600 12px/1 var(--sans); color: var(--text); white-space: nowrap; }
.rt .i { width: 14px; height: 14px; color: var(--dim); }
.rt i { font: 600 11px/1 var(--mono); color: var(--faint); font-style: normal; }
.rt.against { background: none; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--dim); }
.wacht .rt { background: color-mix(in srgb, var(--red-wash) 60%, var(--s2)); }
/* a role with a Collective badge (org.v2 avatar) */
.rt:has(.cav) { height: 30px; padding-left: 4px; }
.rt .cav { width: 22px; height: 22px; border-radius: 6px; flex: none; }
.rt.ask-open { background: none; box-shadow: none; border: 1px dashed var(--line-2); color: var(--dim); }
.rt.ask-open .cav { opacity: .55; }
/* asked in this round, no position yet (council.v2 `asked`) */
.zbasked { padding: 10px 16px 8px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.zbasked > .t-board { color: var(--faint); width: 64px; }
.zbasked .w { font: 400 12px/16px var(--mono); color: var(--faint); }
.zbasked .hint { flex-basis: 100%; margin-left: 72px; font-size: 12px; line-height: 17px; color: var(--faint); }
@media (max-width: 700px) { .zbasked .hint { margin-left: 0; } }

.matterblock { margin: 14px 0 18px; max-width: 860px; border: 1px solid var(--line-2); border-radius: var(--r-3); background: var(--s1); overflow: hidden; white-space: normal; }
.matterblock.wacht { border-color: var(--red); }
.zbhead { padding: 14px 16px 12px; border-bottom: 1px solid var(--line); }
.matterblock.wacht .zbhead { background: var(--red-wash); border-bottom-color: var(--red-ring); }
.zbline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.zbw { color: var(--text); }
.matterblock.wacht .zbw, .matterblock.fout .zbw { color: var(--red-ink); }
.matterblock.dicht .zbw { color: var(--ok); }
.zbr { font: 400 12px/16px var(--mono); color: var(--faint); }
.matterblock.wacht .zbr { color: var(--dim-on-red); }
.zbbox { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px 0 7px; border-radius: 11px;
  box-shadow: inset 0 0 0 1px var(--line-2); font: 600 12px/1 var(--mono); color: var(--dim); }
.matterblock.wacht .zbbox { box-shadow: inset 0 0 0 1px var(--red-ring); color: var(--dim-on-red); }
.zbbox .i { width: 13px; height: 13px; }
.zbhead h3 { margin: 6px 0 0; font: 700 18px/24px var(--sans); }
.zboptions { padding: 4px 16px 0; }
.zbopt { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.zbopt:last-child { border-bottom: 0; }
.zbletter { width: 28px; height: 28px; border-radius: var(--r-2); display: grid; place-items: center; background: var(--s2); font: 700 13px/1 var(--mono); }
.zbopt.gekozen .zbletter { background: var(--ok); color: var(--on-ok); }
.zbopt p { margin: 3px 0 8px; font: 600 14px/20px var(--sans); }
.zbrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.zbrow > .t-board { width: 64px; color: var(--faint); }
.zbargs { margin: 2px 0 0 70px; font: 400 13px/19px var(--sans); color: var(--dim); }
.zbargs summary { cursor: pointer; color: var(--faint); font-size: 12px; width: fit-content; }
.zbargs summary:hover { color: var(--text); }
.zbargs p { margin: 4px 0 0; padding-left: 12px; border-left: 1px solid var(--line-2); font: 400 13px/19px var(--sans); }
.zbargs p b { font: 600 12px/1 var(--mono); color: var(--faint); margin-right: 6px; }
.zbroute { padding: 12px 16px 6px; border-top: 1px solid var(--line); }
.zbroutebox { overflow-x: auto; }
.zbroute h4, .zbadvice h4, .zbdecision h4 { margin: 0 0 6px; color: var(--faint); }
.matterblock .zkroute .st.todo, .matterblock .zkroute .st.now, .matterblock .zkroute .st.ring, .matterblock .zkroute .st.wacht { fill: var(--s1); }
.zbadvice, .zbdecision { padding: 10px 16px 6px; border-top: 1px solid var(--line); }
.zbadvice p, .zbdecision p { margin: 0 0 6px; font: 400 13px/19px var(--sans); color: var(--dim); }
.zbadvice p b, .zbdecision p b { color: var(--text); font-weight: 600; }
.zbbtns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 12px 16px 16px; border-top: 1px solid var(--line); }
.zbbtns.quiet { padding: 8px 16px 10px; }
.knop { height: 36px; padding: 0 14px; border-radius: var(--r-2); font: 600 13px/1 var(--sans); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.knop.p { background: var(--red-fill); color: var(--on-fill); border: 0; }
.knop.o { background: none; color: var(--text); border: 1px solid var(--line-2); }
.knop.o:hover { border-color: var(--dim); }
.knop:disabled { opacity: .5; cursor: default; }
.knop .i { width: 16px; height: 16px; }
.knop.wheel { margin-left: auto; }
.zbbtns.quiet .knop { height: 30px; }
.zbfoot { font: 400 12px/16px var(--mono); color: var(--faint); }
#pMattersBody .matterblock { margin-top: 0; }
@media (max-width: 1099px) {
  .zbargs { margin-left: 0; }
  .zbrow > .t-board { width: 100%; }
  .knop.wheel { margin-left: 0; }
}
/* On the phone the topbar is already full; there the drawer carries the Collective entry. */
body:not(.breed) #collectiveBtn { display: none; }
/* The narrowest phones (360 px): eight 40 px buttons only fit with smaller gaps. The session
   title has no room there anyway (it collapsed to a few stray pixels), so it goes. */
@media (max-width: 380px) {
  body:not(.breed) header.topbar { gap: 4px; padding-left: 6px; padding-right: 6px; }
  body:not(.breed) header.topbar .title { display: none; }
  body:not(.breed) header.topbar .brand { margin-left: -2px; }
}
#pZaken .thead .mini { white-space: nowrap; flex: none; }

/* Stop on the phone: in the top bar it was an empty square next to the
   and bell, so you could not see it when you needed it. Red surface,
   filled stop sign, same place. */
header > #stopBtn { background: var(--red-fill); color: #fff; border-radius: 10px; }
header > #stopBtn:hover { background: var(--red-fill-hover); }
header > #stopBtn .i rect { fill: currentColor; }

/* Automatic grouping: a proposed project is marked until you save, with the reason under its name. */
.imember.suggested { box-shadow: inset 2px 0 0 var(--l-blue); }
.imember.suggested .sname { white-space: normal; }
.ssuggest { display: block; font: 400 11px/15px var(--sans); color: var(--faint); white-space: normal; }
.ssuggest b { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--l-blue); margin-right: 4px; }
#autoGroupBtn { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 8px; }
.bgauto { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 6px 6px; }

/* Closing a session: an x at the end of the board row, visible on hover and focus
   (not on the phone); it sits over the "last" column, which it covers briefly. */
.prow { position: relative; }
.prow .pclose { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); height: 32px; min-width: 32px;
  background: var(--s2); opacity: 0; pointer-events: none; }
.prow:hover .pclose, .prow:focus-within .pclose { opacity: 1; pointer-events: auto; }
.prow .pclose:hover { color: var(--text); background: var(--s3); }
/* the phone has no hover: a cross on every row became a column of crosses. There you close from
   the session header or with a long press on the row (session menu). */
body:not(.breed) .prow .pclose { display: none; }
#sessClose { height: 32px; min-width: 32px; margin-left: 4px; }
#idleBtn .i { width: 14px; height: 14px; }

/* ---------- housekeeping: old adhoc projects (archive) ----------
   A side panel like settings used to be. Drag the left edge to make it
   wider (a list of folder names is wider than 480 px); double-click resets. */
#archive {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 70; width: min(var(--panel-w, 480px), 100vw);
  display: flex; flex-direction: column; background: var(--bg); border-left: 1px solid var(--line);
  box-shadow: var(--shadow-pop); animation: instIn 220ms var(--ease);
}
body.arch-open::after { content: ""; position: fixed; inset: 0; z-index: 65; background: var(--scrim); }
.archbody { overflow-y: auto; padding: 0 24px calc(32px + var(--safe-b)); }
.archsec { padding: 20px 0 8px; border-bottom: 1px solid var(--line); }
.archsec:last-child { border-bottom: 0; }
.archsec h3 { margin: 0 0 4px; color: var(--faint); }
.archnote { margin: 0 0 8px; font-size: 13px; line-height: 19px; color: var(--dim); }
.archbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 4px 0 10px; position: sticky; top: 0; background: var(--bg); z-index: 1; }
.archbar label { font-size: 14px; display: flex; gap: 8px; align-items: center; }
.archbar select { font: inherit; color: var(--text); background: var(--s1); border: 1px solid var(--line-2); border-radius: 6px; padding: 1px 4px; }
.archbtn { margin-left: auto; padding: 8px 14px; border: 0; border-radius: var(--r-2); background: var(--red-fill); color: var(--on-fill); font: 600 14px/18px var(--sans); cursor: pointer; }
.archbtn:disabled { opacity: .4; cursor: default; }
.archlist { display: flex; flex-direction: column; }
.archrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; align-items: start; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; }
.archrow:first-child { border-top: 0; }
.archrow input { margin-top: 3px; }
.archrow .aname { font-weight: 600; overflow-wrap: anywhere; }
.archrow .ameta { grid-column: 2; font-size: 12px; color: var(--dim); }
.archrow .areason { grid-column: 2; font-size: 12px; color: var(--warn); }
.archrow.stuck .aname { color: var(--faint); }
.archrow .arestore { grid-row: 1 / span 2; grid-column: 3; padding: 4px 10px; border: 1px solid var(--line-2); border-radius: var(--r-2); background: none; color: var(--text); font: 600 13px/18px var(--sans); cursor: pointer; }
.archempty { padding: 8px 0; font-size: 13px; color: var(--dim); }
.panelgrip { position: absolute; left: -4px; top: 0; bottom: 0; width: 8px; cursor: col-resize; z-index: 2; touch-action: none; }
.panelgrip::after { content: ""; position: absolute; left: 3px; top: 50%; width: 2px; height: 40px; margin-top: -20px; border-radius: 1px; background: var(--line-2); opacity: 0; transition: opacity var(--fast) var(--ease); }
.panelgrip:hover::after, .panelgrip:focus-visible::after, body.panel-dragging .panelgrip::after { opacity: 1; }
body.panel-dragging { cursor: col-resize; user-select: none; }
body.panel-dragging #archive { animation: none; }
@media (max-width: 520px) { .panelgrip { display: none; } }

/* ---------- Vector (vector.js): the icon on what Vector sent, its card ----------
   A command the hub typed for Vector carries the Vector icon where the sender
   would be; tapping it opens the card with the reason and the check table (D-13). */
.msg.user.vector { border: 1px solid var(--line-2); }
.vsender { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; padding: 2px 6px 2px 2px; border: 0; border-radius: var(--r-1);
  background: none; color: var(--dim); font: 700 11px/16px var(--sans); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.vsender img { width: 18px; height: 18px; border-radius: 4px; }
.vsender:hover, .vsender:focus-visible { background: var(--s3); color: var(--text); }
.vcard { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.vcardhead { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.vcardhead img { width: 28px; height: 28px; border-radius: 7px; }
.vcardhead b { display: block; font-size: 15px; }
.vcardhead code { display: block; font: 400 13px/18px var(--mono); color: var(--dim); overflow-wrap: anywhere; }
.vreason { margin: 0; font-size: 14px; line-height: 21px; overflow-wrap: anywhere; }
.vchecks { width: 100%; border-collapse: collapse; font-size: 13px; }
.vchecks td { padding: 6px 4px; border-bottom: 1px solid var(--line); vertical-align: top; }
.vchecks tr:last-child td { border-bottom: 0; }
.vchecks .vrule { width: 52px; font-family: var(--mono); color: var(--dim); white-space: nowrap; }
.vchecks .vwhy code { display: block; font: 400 11px/16px var(--mono); color: var(--faint); }
.vchecks .vwhy span { overflow-wrap: anywhere; }
.vchecks .vverdict { text-align: right; white-space: nowrap; }
.vchecks tr.needs-owner td, .vchecks tr.fail td { background: var(--red-wash); }
.vtally { margin: 0; font-size: 12px; color: var(--faint); }
.vfacts { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px 12px; margin: 0; }
.vfacts dt { font: 700 10px/14px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.vfacts dd { margin: 0; font: 400 13px/18px var(--mono); overflow-wrap: anywhere; }

/* -- Vector in its own box under Collective (D-15, #64) -- */
.vpin { margin: 0 0 10px; }
.vpin .vrow { margin-bottom: 2px; }
.vrow.lit { border-color: var(--red-ring); background: var(--red-wash); }
.vrow.lit .czcore > span { color: var(--dim-on-red); }
.vtile { overflow: hidden; background: none; box-shadow: none; }
.vtile img { width: 28px; height: 28px; border-radius: 7px; }

/* -- the Vector view: a page like the inbox (body.vectorpage) -- */
#vector { overflow-y: auto; min-height: 0; padding: 24px 32px 40px; display: flex; flex-direction: column; gap: 16px; }
body.breed #vector { grid-column: 2; grid-row: 3 / 6; }
body:not(.breed) #vector { flex: 1; padding: 16px 12px 32px; }
body.vectorpage #overview { display: none !important; }
#vectorBody { display: flex; flex-direction: column; gap: 16px; max-width: 1080px; }
.vhead { flex-wrap: wrap; gap: 14px; }
.vhead > img { width: 40px; height: 40px; border-radius: 10px; }
.vhead .vmode { margin-left: auto; }
.vprojects { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 16px; }
.vproj { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: var(--r-3); background: var(--s1); min-width: 0; }
.vproj.lit { border-color: var(--red-ring); }
.vprojhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vprojhead b { font: 700 16px/22px var(--sans); }
.vprojhead .vkey { font: 400 12px/16px var(--mono); color: var(--faint); }
.vprojhead .mini { margin-left: auto; }
.vlabel { font: 700 11px/16px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.vnext { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vnext code { font: 600 14px/20px var(--mono); color: var(--text); overflow-wrap: anywhere; }
.vnext .vkind { font: 600 14px/20px var(--mono); color: var(--dim); }
.vnext .vclass { height: 20px; padding: 0 8px; border-radius: var(--r-1); box-shadow: inset 0 0 0 1px var(--line-2); font: 600 12px/20px var(--sans); color: var(--dim); }
.vnext .vwhen { font: 400 12px/16px var(--mono); color: var(--faint); }
.vsteps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; list-style: none; margin: 0; padding: 0; }
.vstep { position: relative; padding: 14px 0 0; font: 600 11px/14px var(--mono); color: var(--faint); text-align: center; }
.vstep::before { content: ""; position: absolute; top: 2px; left: 50%; width: 9px; height: 9px; margin-left: -5px; border-radius: 50%;
  background: var(--bg); box-shadow: inset 0 0 0 2px var(--faint); }
.vstep.done { color: var(--text); }
.vstep.done::before { background: var(--text); box-shadow: none; }
.vstep.failed, .vstep.stopped { color: var(--red-ink); }
.vstep.failed::before, .vstep.stopped::before { background: var(--red); box-shadow: none; }
.vstep.skipped { text-decoration: line-through; }
.vasks ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.vasks li { padding: 8px 10px; border-radius: var(--r-2); background: var(--red-wash); }
.vasks li b { display: block; font: 600 14px/20px var(--sans); overflow-wrap: anywhere; }
.vasks li code { font: 400 11px/16px var(--mono); color: var(--dim-on-red); overflow-wrap: anywhere; }
.vgoal { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.vgoalhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vgoalhead .vdate { font: 400 13px/18px var(--mono); color: var(--dim); }
.vpace { margin: 0; font-size: 12px; color: var(--faint); }
.vgoalform { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--dim); }
.vgoalform label { display: inline-flex; align-items: center; gap: 6px; }
.vgoalform select, .vgoalform input { height: 32px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: var(--r-2);
  background: var(--bg); color: var(--text); font: 400 13px/1 var(--sans); }
.vgoalform input[name="phase"] { width: 64px; font-family: var(--mono); }

/* -- the metro map of a steered project (Roadmap tab, roadmap.v1) -- */
.vroadmap .chainhead .olink { margin-left: auto; }
.vroadmap .vak { border: 1px solid var(--line); border-radius: var(--r-3); background: var(--s1); }
.vmetro { display: block; }
.vmetro .vline { fill: none; stroke: var(--l-blue); stroke-width: 6; stroke-linecap: round; }
.vmetro .vline.ahead { stroke: var(--line-2); }
.vmetro .vdep { fill: none; stroke: var(--faint); stroke-width: 1.5; stroke-dasharray: 2 4; }
.vmetro .vstop { fill: var(--text); stroke: var(--bg); stroke-width: 3; }
.vmetro .vstop.active { fill: var(--bg); stroke: var(--text); stroke-width: 3.5; }
.vmetro .vstop.planned { fill: var(--bg); stroke: var(--faint); stroke-width: 2; }
.vmetro .vstop.wacht { stroke: var(--red); }
.vmetro .vhalo { fill: none; stroke: var(--l-blue); stroke-width: 2; }
.vmetro .vpnr { font: 600 13px var(--mono); fill: var(--text); text-anchor: middle; }
.vmetro .vlbl { font: 400 12px var(--sans); fill: var(--dim); text-anchor: middle; }
.vmetro .vlbl.small { font-size: 11px; fill: var(--faint); }
.vmetro .vsub { fill: var(--bg); stroke: var(--faint); stroke-width: 1.5; }
.vmetro .vsub.done { fill: var(--text); stroke: var(--text); }
.vmetro .vflag rect { fill: var(--bg); stroke: var(--line-2); }
.vmetro .vflag .vpole { stroke: var(--line-2); stroke-width: 1.5; }
.vmetro .vflagtext { font: 600 12px var(--mono); fill: var(--text); }
.vlegend { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 10px 4px 0; font-size: 12px; color: var(--dim); }
.vlegend span { display: inline-flex; align-items: center; gap: 8px; }
.vlegend .vkey { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.vlegend .vkey.done { background: var(--text); }
.vlegend .vkey.active { box-shadow: inset 0 0 0 3px var(--text); }
.vlegend .vkey.planned { box-shadow: inset 0 0 0 2px var(--faint); }
.vlegend .vkey.dep { width: 24px; height: 0; border-radius: 0; border-top: 2px dashed var(--faint); }
.vlegend .vkey.sub { width: 6px; height: 6px; background: var(--text); }

/* ---------- zones (DESIGN.md, Zone-regel) ---------- */
.zone { --z: var(--line-2); }
.zchip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px 0 7px; border-radius: 11px;
  background: color-mix(in srgb, var(--z) var(--zone-wash), transparent); color: var(--text); font: 600 12px/1 var(--sans); }
.zchip::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--z); flex: none; }

/* ---------- the session's memory in the inspector: layers as zones ---------- */
.mlayer { padding: 8px 0 10px; border-bottom: 1px solid var(--line); }
.mlhead { display: flex; align-items: center; gap: 8px; }
.mlhead::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--z); flex: none; }
.mlname { font: 600 13px/18px var(--sans); flex: 1; }
.mlcount { font: 400 12px/16px var(--mono); color: var(--dim); }
.mlitems { list-style: none; margin: 6px 0 0 18px; padding: 0 0 0 10px; border-left: 1px solid color-mix(in srgb, var(--z) 55%, transparent); }
.mlitems li { font-size: 12.5px; line-height: 19px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mlitems li.mlid { cursor: pointer; }
.mlitems li.mlid:hover { color: var(--text); }
.mlitems .mono { font: 600 11px var(--mono); color: var(--faint); }
.mlmore { display: block; margin: 4px 0 0 18px; font-size: 12px; line-height: 17px; color: var(--faint); }
.mstand { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-2);
  background: none; color: var(--text); font: 600 13px/18px var(--sans); text-align: left; cursor: pointer; }
.mstand:hover { background: var(--s2); }
.mstand > span:nth-child(2) { flex: 1; }
.mstand .mono { font: 400 11px var(--mono); color: var(--faint); }
.mstand .i { width: 16px; height: 16px; color: var(--faint); }
.mdot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }
.mdot.let { background: var(--l-orange); }

/* ---------- side branches (#56) ---------- */
/* on the board: under its parent, with a bend in the parent's line colour */
.prow.tak { margin-left: 22px; }
.prow.tak::before { content: ""; position: absolute; left: -14px; top: -6px; width: 10px; height: 26px;
  border-left: 4px solid var(--parent, var(--line-2)); border-bottom: 4px solid var(--parent, var(--line-2)); border-bottom-left-radius: 8px; }
.takmark { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 0 6px; height: 18px; border-radius: 9px;
  box-shadow: inset 0 0 0 1px var(--line-2); font: 600 11px/1 var(--mono); color: var(--dim); vertical-align: 1px; }
.takmark .i { width: 12px; height: 12px; }
/* session header of a branch */
#branchSlot { display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; }
#branchSlot:empty { display: none; }
#branchSlot .from { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 12px; background: var(--s2); color: var(--dim); font: 600 12px var(--sans); white-space: nowrap; }
#branchSlot .from i { width: 10px; height: 4px; border-radius: 2px; background: var(--parent); }
#branchSlot .mini { white-space: nowrap; }
body:not(.breed) #branchSlot .from { display: none; }
/* Claude's proposal in the conversation */
.tkcard { margin: 14px 0; max-width: 680px; border: 1px solid var(--line-2); border-radius: var(--r-3); background: var(--s1); overflow: hidden; white-space: normal; }
.tkcard .tkh { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 14px 16px 12px; }
.tkcard .tki { width: 40px; height: 40px; border-radius: var(--r-2); background: var(--s2); display: grid; place-items: center; color: var(--dim); }
.tkcard .tki .i { width: 22px; height: 22px; }
.tkcard h4 { margin: 0; font: 700 16px/22px var(--sans); }
.tkcard p { margin: 4px 0 0; color: var(--dim); font-size: 14px; line-height: 21px; }
.tkcard .tkb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 16px 14px; border-top: 1px solid var(--line); }
.tkcard .tkb .sp { margin-left: auto; color: var(--faint); font-size: 12px; }
.tkcard .tkgo { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 0; border-radius: var(--r-2); background: var(--red-fill); color: var(--on-fill); font: 600 13px var(--sans); cursor: pointer; }
.tkcard .tkgo .i { width: 16px; height: 16px; }
.tkcard.gedaan .tkb { color: var(--dim); font-size: 13px; gap: 6px; }
.tkcard.gedaan .tkb .i { width: 16px; height: 16px; color: var(--ok); }
/* the report that comes back into the parent */
.terug { margin: 14px 0; max-width: 680px; border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; white-space: normal; }
.terug .th { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--s1); border-bottom: 1px solid var(--line); }
.terug .th .i { width: 18px; height: 18px; color: var(--dim); }
.terug .th b { font: 600 14px var(--sans); }
.terug .th .mono { margin-left: auto; min-width: 0; max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 11px var(--mono); color: var(--faint); }
.terug .tb { padding: 10px 14px 12px; font-size: 14px; line-height: 22px; white-space: pre-wrap; }
.terug .tb > :first-child { margin-top: 0; }
.terug .tb > :last-child { margin-bottom: 0; }
/* the split dialog */
.tform { display: flex; flex-direction: column; gap: 6px; }
.tform .tlbl { margin: 8px 0 0; color: var(--faint); }
.tform .fld { height: 36px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--s1); color: var(--text); font: 400 14px var(--sans); }
.tform .fld:focus { outline: 0; border-color: var(--dim); }
.topt { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-2); cursor: pointer; }
.topt:has(input:checked) { border-color: var(--text); background: var(--s2); }
.topt input { margin: 3px 0 0; accent-color: var(--text); }
.topt b { display: block; font: 600 14px/20px var(--sans); }
.topt span span { color: var(--dim); font-size: 13px; line-height: 19px; }
/* transfer ring on the line map: where a side branch left or came back */
#net .st.ring { fill: var(--s1); stroke: var(--text); stroke-width: 3; }
#net .netrow.tak .netname { fill: var(--dim); font-weight: 600; }