/* The Command Center: phone first, light and dark following the phone; the wide-screen layer (a PC) is at the end. */

:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #eef0f3;
  --text: #16181d;
  --muted: #5d6573;
  --line: #dde1e7;
  --accent: #2f5bd3;
  --accent-text: #ffffff;
  --accent-soft: #e5ecfc;
  --advice: #1f7a4d;
  --advice-soft: #e2f4ea;
  --danger: #c23b33;
  --danger-soft: #fbe7e5;
  --warn: #9a6200;
  --warn-soft: #fff3d6;
  /* The kind of a report on Meldingen (COMMAND-101): Idee blue, Bug red, Feedback purple, Kaart green, Crash dark
     orange, Overig grey. */
  --type-idea: var(--accent);
  --type-bug: var(--danger);
  --type-feedback: #7c3aed;
  --type-map: var(--advice);
  --type-crash: #c2410c;
  --type-alert: var(--warn);
  --type-other: var(--muted);
  --radius: 14px;
  --shadow: 0 1px 2px rgb(0 0 0 / 6%);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1115;
    --surface: #181b21;
    --surface-2: #22262e;
    --text: #e8eaee;
    --muted: #9aa2af;
    --line: #2c313a;
    --accent: #7c9cf5;
    --accent-text: #0f1115;
    --accent-soft: #1f2a45;
    --advice: #5cc98e;
    --advice-soft: #16301f;
    --danger: #f07b72;
    --danger-soft: #3a1b19;
    --warn: #f0b64a;
    --warn-soft: #34290f;
    --type-feedback: #b39afb;
    --type-crash: #fb923c;
    --shadow: none;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow-wrap: anywhere;
}
a { color: var(--accent); }
/* Links inside free text from the floor (linkify.js): underlined so they read as
   links in both themes; a long URL wraps instead of widening the page. */
.auto-link { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; word-break: break-word; }
h1, h2, h3 { line-height: 1.25; margin: 0; }
.hidden { display: none !important; }
/* A file input the label opens: invisible but not display:none (older iOS ignores those). */
.file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
label.btn { position: relative; }
.muted { color: var(--muted); }
.small { font-size: 0.86rem; }
.error { color: var(--danger); }
.warn-text { color: var(--warn); }

/* ---------- shell ---------- */

/* The top of every screen: the header row and, under it, the tab bar — ONE
   sticky block, in view however far the PO scrolls (PO, 2026-09-29: "de navigatie
   in de bodem is schijt irritant, dit moet naar boven.... en gewoon altijd
   zichtbaar"). The notch is kept clear by the header's top padding. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(env(safe-area-inset-top) + 8px) calc(env(safe-area-inset-right) + 16px) 2px calc(env(safe-area-inset-left) + 16px);
}
.top h1 { font-size: 1.15rem; flex: 1; }
.sync { font-size: 0.8rem; text-align: right; }
.icon-btn {
  width: 40px; height: 40px;
  border: 0; border-radius: 50%;
  background: var(--surface-2); color: var(--text);
  display: grid; place-items: center;
}
.icon-btn svg { width: 22px; height: 22px; }

/* No bar at the bottom any more: the room there is for the chat button, so the
   last card of a page scrolls clear of it (56px button + 16px from the edge + 16px). */
.view {
  max-width: 720px;
  margin: 0 auto;
  padding: 12px 16px calc(env(safe-area-inset-bottom) + 88px);
}

/* The tab bar: one row, never wrapped, the labels never cut or shrunk. When the
   tabs do not fit (a phone) the row scrolls sideways, the open tab is scrolled
   into view (app.js placeTabs) and a fade at an edge says there is more; when
   they fit, they share the width evenly, as wide as the page. */
.tabs {
  position: relative;
  display: flex;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 calc(env(safe-area-inset-right) + 4px) 0 calc(env(safe-area-inset-left) + 4px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs.more-right { -webkit-mask-image: linear-gradient(to left, transparent, #000 28px); mask-image: linear-gradient(to left, transparent, #000 28px); }
.tabs.more-left { -webkit-mask-image: linear-gradient(to right, transparent, #000 28px); mask-image: linear-gradient(to right, transparent, #000 28px); }
.tabs.more-left.more-right {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}
.tab {
  position: relative;
  flex: 1 0 auto;
  min-width: 56px;
  border: 0; border-bottom: 3px solid transparent;
  background: none; color: var(--muted);
  padding: 6px 8px 4px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font: inherit; font-size: 0.75rem; line-height: 1.25;
  white-space: nowrap; overflow-wrap: normal;
  cursor: pointer;
}
.tab svg { width: 20px; height: 20px; flex: none; }
.tab.active { color: var(--accent); font-weight: 600; border-bottom-color: var(--accent); }
.badge {
  position: absolute; top: 2px; left: calc(50% + 5px);
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px;
  background: var(--danger); color: #fff;
  font-size: 0.7rem; font-weight: 700; line-height: 18px; text-align: center;
}
svg path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Te doen: the Floor Managers' items that escalated to the PO (COMMAND-88), a red "X!" on the other side of the icon. */
.badge.badge-alert { left: auto; right: calc(50% + 5px); }

/* The chat button (PO, 2026-09-29: "als 'Chat Boxje' rechtsonderin, zodat ik op
   elke pagina gewoon een bericht kan sturen"): on every page; a dot when a message
   was typed but not sent. Its panel is a bottom sheet on a phone and a small window
   above the button on a wide screen. Bottom LEFT since COMMAND-86 (PO, 2026-09-30:
   a Windows notification slides in at the bottom right and covered it), on every
   screen: one place to look, and a phone has nothing at the bottom left either. */
.chat-fab {
  position: fixed;
  left: calc(env(safe-area-inset-left) + 16px);
  bottom: calc(env(safe-area-inset-bottom) + 16px);
  z-index: 8;
  width: 56px; height: 56px;
  border: 0; border-radius: 50%;
  background: var(--accent); color: var(--accent-text);
  display: grid; place-items: center;
  box-shadow: 0 4px 14px rgb(0 0 0 / 25%);
  cursor: pointer;
}
.chat-fab svg { width: 26px; height: 26px; }
/* The camera button beside it (COMMAND-82): a screenshot of the page for the chat,
   without opening it. Smaller, level with the chat button's middle, 12px to its right. */
.shot-fab {
  position: fixed;
  left: calc(env(safe-area-inset-left) + 84px);
  bottom: calc(env(safe-area-inset-bottom) + 22px);
  z-index: 8;
  width: 44px; height: 44px;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--surface); color: var(--text);
  display: grid; place-items: center;
  box-shadow: 0 3px 10px rgb(0 0 0 / 18%);
  cursor: pointer;
}
.shot-fab svg { width: 22px; height: 22px; }
/* While the picture is taken: dimmed, and a second tap does nothing (it is disabled). */
.shot-fab.busy { opacity: .55; cursor: progress; }
.fab-dot { position: absolute; top: 3px; right: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--warn); border: 2px solid var(--bg); }
body.chat-open { overflow: hidden; }
.chat-backdrop {
  position: fixed; inset: 0;
  z-index: 20;
  display: flex; align-items: flex-end; justify-content: center;
  padding-top: calc(env(safe-area-inset-top) + 16px);
  background: rgb(0 0 0 / 40%);
}
/* Only when it opens: a redraw while it is open (new data) must not replay it. */
.chat-backdrop.enter { animation: modal-in .15s ease-out; }
.chat-backdrop.enter .chat-panel { animation: sheet-up .18s ease-out; }
.chat-panel {
  width: 100%; max-width: 560px;
  background: var(--surface);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 30px rgb(0 0 0 / 22%);
}
.chat-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.chat-head h2 { font-size: 1.05rem; }
.chat-close { flex: none; }
.chat-to-mine { padding: 0; font-size: inherit; font-weight: 600; }
/* COMMAND-223: the thread on screen, named under the panel's title with the way to its own reply box — a muted line
   with an accent bar. The panel itself only ever starts a new conversation. */
.chat-reply-elsewhere {
  margin: 0 0 6px; padding: 2px 0 2px 8px;
  border-left: 3px solid var(--accent);
  color: var(--muted);
}
.chat-to-reply { padding: 0; font-size: inherit; font-weight: 600; }
@keyframes sheet-up { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
/* A wide screen: the window on the left, above the buttons (COMMAND-86). */
@media (min-width: 600px) {
  .chat-backdrop {
    justify-content: flex-start;
    padding: 16px 16px calc(env(safe-area-inset-bottom) + 84px) calc(env(safe-area-inset-left) + 16px);
    background: rgb(0 0 0 / 20%);
  }
  .chat-panel { width: 400px; border: 1px solid var(--line); border-radius: var(--radius); }
}
@media (prefers-reduced-motion: reduce) { .chat-backdrop.enter, .chat-backdrop.enter .chat-panel { animation: none; } }

.toast {
  position: fixed;
  left: 16px; right: 16px;
  bottom: calc(env(safe-area-inset-bottom) + 84px);
  /* Above the chat panel and the dialogs: an error while sending shows there too. */
  z-index: 30;
  max-width: 560px; margin: 0 auto;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--text); color: var(--bg);
  opacity: 0; transform: translateY(8px);
  transition: opacity .2s, transform .2s;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: none; }
.toast.error { background: var(--danger); color: #fff; }
.toast.warn { background: var(--warn); color: #fff; }
/* A toast with one button (Ongedaan maken, COMMAND-266): the text and the button on one line; only the button takes a tap. */
.toast.has-action { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.toast-action { flex: none; min-height: 36px; padding: 6px 12px; border: 1px solid currentColor; border-radius: 8px; background: transparent; color: inherit; font: inherit; font-weight: 600; cursor: pointer; }
.toast.show .toast-action { pointer-events: auto; }

/* ---------- cards ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
  margin: 0 0 12px;
}
.card h2 { font-size: 1.05rem; margin-bottom: 8px; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.card-id { font-weight: 700; text-decoration: none; }
.asker { color: var(--muted); margin-top: 2px; }
.context { white-space: pre-wrap; margin: 10px 0 4px; }
.waiting {
  margin: 10px 0 0; padding: 8px 10px;
  border-radius: 10px;
  background: var(--surface-2);
  font-size: 0.9rem;
}
.tag {
  display: inline-block;
  margin-left: 6px; padding: 1px 7px;
  border-radius: 8px;
  background: var(--surface-2); color: var(--muted);
  font-size: 0.72rem;
}
.empty { text-align: center; color: var(--muted); padding: 40px 0; }

.group { margin-bottom: 18px; }
.group-title { font-size: 1rem; margin: 8px 2px; display: flex; align-items: center; gap: 8px; }
.project-title { font-size: 0.9rem; color: var(--muted); margin: 10px 2px 6px; display: flex; align-items: center; gap: 8px; font-weight: 600; }
.count {
  min-width: 22px; padding: 0 7px;
  border-radius: 11px;
  background: var(--surface-2); color: var(--muted);
  font-size: 0.75rem; line-height: 22px; text-align: center;
}

/* ---------- questions ---------- */

.question { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 12px; }
.question h3 { font-size: 1.02rem; margin: 4px 0 10px; }
.chip {
  display: inline-block;
  padding: 1px 8px; border-radius: 8px;
  background: var(--accent-soft); color: var(--accent);
  font-size: 0.75rem; font-weight: 600;
}
.options { display: grid; gap: 8px; }
.option {
  text-align: left;
  width: 100%;
  padding: 11px 12px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  display: grid; gap: 3px;
}
.option { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.option:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.option.advised { border-color: color-mix(in srgb, var(--advice) 55%, var(--line)); }
.option.picked { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.option-label { font-weight: 650; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.option-desc { color: var(--muted); font-size: 0.9rem; }
.advice {
  padding: 0 7px; border-radius: 8px;
  background: var(--advice-soft); color: var(--advice);
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
}
.why { color: var(--muted); margin: 8px 0 0; }

.input {
  width: 100%;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.input:focus { outline: none; border-color: var(--accent); }
textarea.input { resize: vertical; }
/* Every box the PO writes in (COMMAND-48; PO, 2026-09-30: "Maak de reactie boxen groter bij
   default... dit is krapjes"): it opens about seven lines tall (a line is 1.45em; 23px is the
   padding and border of .input), grows with its text up to 60% of the screen and then scrolls,
   the same on phone and PC. app.js's h() gives every textarea the class grow; this is the one
   place its sizes live. A browser that sizes a box to its text itself does it here; elsewhere
   app.js (fitBox) follows the text. */
textarea.input.grow {
  min-height: calc(7 * 1.45em + 23px);
  max-height: 60vh;
  max-height: 60dvh;
  overflow-y: auto;
}
@supports (field-sizing: content) {
  textarea.input.grow { field-sizing: content; }
}
/* @project tags (COMMAND-106): after an @ the box offers the projects that fit, in a list right
   under it (app.js tagBox). Big enough rows for a thumb; the marked one (Tab/Enter) stands out.
   A tag in a shown text is the project's pill (.proj-pill, below) in the flow of the text. */
.tag-suggest { margin: 4px 0 0; padding: 4px; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 4px 14px rgb(0 0 0 / 12%); }
.tag-option { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 10px; border-radius: 8px; cursor: pointer; }
.tag-option.active, .tag-option:hover { background: var(--surface-2); }
.tag-pill { vertical-align: 1px; }
/* @PC tags (COMMAND-134): a PC's name with a small PC icon — in the list, in a shown text, and on a
   work item that waits for that PC. Neutral (not a project colour); its kind word sits at the end. */
.device-pill { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; border-radius: 8px; background: var(--surface-2); color: var(--text); font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.device-pill svg { width: 13px; height: 13px; flex: none; }
.tag-kind { margin-left: auto; }
select.input { appearance: auto; }

.gallery { display: flex; gap: 8px; overflow-x: auto; margin: 10px 0 2px; }
.gallery img { height: 120px; max-width: 220px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); display: block; }
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.thumb { position: relative; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; font-size: 0.7rem; color: var(--muted); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb-x {
  position: absolute; top: 3px; right: 3px;
  width: 24px; height: 24px; border: 0; border-radius: 50%;
  background: rgb(0 0 0 / 60%); color: #fff; font-size: 16px; line-height: 24px; padding: 0;
}

/* ---------- buttons ---------- */

.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; justify-content: flex-end; }
.actions.tight { margin-top: 0; flex-wrap: nowrap; }
.btn {
  min-height: 44px;
  padding: 0 16px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  /* A label never breaks inside a word (COMMAND-137): the body's overflow-wrap: anywhere broke a label that came
     out a fraction of a pixel wider than its button (browser zoom, rounding) before its last letter ("Afwijze n"). */
  overflow-wrap: normal;
}
/* In a row of buttons that wraps (.actions), each label on one line: the row wraps as whole buttons instead
   (COMMAND-137; "Terugsturen met feedback" broke over two lines). The rows that squeeze their buttons into one
   line on purpose (.tight, an approval's Akkoord / Weigeren / Anders) still wrap a label between its words. */
.actions:not(.tight):not(.approval-actions) > .btn { white-space: nowrap; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.btn.danger { background: var(--danger-soft); border-color: transparent; color: var(--danger); }
.btn.ghost { background: transparent; }
.btn.big { width: 100%; min-height: 52px; font-size: 1.05rem; margin-top: 12px; }
.btn:disabled { opacity: .45; cursor: default; }
.small-btn { min-height: 38px; padding: 0 12px; font-size: 0.88rem; }
.link { border: 0; background: none; color: var(--accent); padding: 4px 0; font: inherit; cursor: pointer; }

/* ---------- folds ---------- */

.fold { margin: 16px 0; }
.fold summary { cursor: pointer; color: var(--muted); font-weight: 600; padding: 8px 2px; }
.answered { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 8px 0; }
.answered .q { margin: 4px 0; }
.answered .a { margin: 4px 0; font-weight: 650; white-space: pre-wrap; }
.todo-text { white-space: pre-wrap; margin: 8px 0; font-size: 1.02rem; }
/* A todo's feedback history and the feedback / decline box. */
.feedback-list { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.feedback-title, .composer-title { font-weight: 600; color: var(--muted); }
.feedback { margin: 6px 0 10px; }
.feedback-text { white-space: pre-wrap; margin: 2px 0; }
.composer { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.composer-title { margin-bottom: 6px; }

/* ---------- who does what ---------- */

.pc.stale { opacity: .7; }
.usage { display: grid; grid-template-columns: 56px 1fr 44px; align-items: center; gap: 8px; margin-top: 10px; }
.usage-reset { grid-column: 2 / 4; margin-top: -4px; font-variant-numeric: tabular-nums; }
.usage-label { font-size: 0.85rem; color: var(--muted); }
.usage-num { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.bar { height: 10px; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
/* A usage bar's fill gets its width and its blue-to-red colour from app.js (usageFill, COMMAND-77); width 0 until then. */
.fill { width: 0; height: 100%; border-radius: 5px; background: var(--accent); }
.warn { background: var(--warn-soft); color: var(--warn); padding: 8px 10px; border-radius: 10px; margin: 10px 0 0; font-size: 0.9rem; }
.roster { list-style: none; margin: 10px 0 0; padding: 0; }
.roster li { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.dot { flex: none; width: 10px; height: 10px; border-radius: 50%; margin-top: 7px; }
.dot.on { background: var(--advice); }
.dot.off { background: var(--line); }

/* ---------- controls ---------- */

.row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.row:first-of-type { border-top: 0; }
.field { display: block; margin-top: 10px; font-size: 0.9rem; color: var(--muted); }
.radios, .checks { display: grid; gap: 6px; margin-top: 10px; }
.check { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.check input { width: 20px; height: 20px; accent-color: var(--accent); }
.commands { list-style: none; margin: 0; padding: 0; }
.commands li { padding: 8px 0; border-top: 1px solid var(--line); }

/* ---------- login ---------- */

.login { max-width: 420px; margin: 0 auto; padding: calc(env(safe-area-inset-top) + 48px) 16px 48px; }
.login h1 { font-size: 1.6rem; margin-bottom: 6px; }
.login h2 { font-size: 1.05rem; margin: 28px 0 4px; }
.first-time { border-top: 1px solid var(--line); margin-top: 24px; }
.code { text-transform: uppercase; letter-spacing: .12em; font-family: ui-monospace, "SF Mono", Menlo, monospace; text-align: center; font-size: 1.1rem; }
.login .error { margin-top: 14px; }

/* ---------- accounts: limits, the account page, messages ---------- */

/* An account's name anywhere: a tap opens its page. */
.acct-link { border: 0; background: none; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-align: left; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); text-underline-offset: 3px; }
.acct-link.strong { font-weight: 700; }
.top h1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.limits { margin-top: 2px; }
.usage.stale .fill { opacity: .4; }
.usage.stale .usage-num { color: var(--muted); }
.usage-updated { margin-top: 6px; }

/* The Accounts overview (COMMAND-74): one card per account in the Financiën list style — its head (e-mail, status and
   connector chips) a tap to its page, the PCs on it now and the bars. Old numbers are greyed with a short "verouderd".
   No pause per account (COMMAND-120): every PC's stop is the last row on the page for every PC (COMMAND-146,
   COMMAND-152: the bar on top of Devices opens it), in the one-row look below. */
.everybody-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding-top: 10px; padding-bottom: 10px; }
.everybody-row > .actions { margin-top: 0; }
.acct-open { border: 0; background: none; color: var(--text); font: inherit; padding: 0 0 6px; width: 100%; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; cursor: pointer; text-align: left; }
.acct-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.acct-name { font-size: 1.05rem; overflow-wrap: anywhere; }
.acct-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chip.acct-status.working { background: var(--advice-soft); color: var(--advice); }
.chip.acct-status.no-floor-manager { background: var(--surface-2); color: var(--muted); }
/* An account's connector (COMMAND-70, COMMAND-98): its own block under the PCs line, never in the head's row of chips
   (the amber pill there overlapped "Nu geen pc op dit account"). Connected: one tag. Not yet: its own address with
   Kopieer and one line where to add it. */
.acct-connector { margin: 8px 0 0; }
.acct-connector .tag.conn-state { margin: 0; }
/* The connector set of every account (COMMAND-363): a tick or a cross per connector, words and colour. */
.acct-cset { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 0; }
.tag.acct-cset-mark.connected { color: var(--advice); background: var(--advice-soft); }
.tag.acct-cset-mark.missing { color: var(--danger); background: var(--danger-soft); }
.acct-cset-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.acct-cset-switches { display: grid; gap: 8px; }
.acct-cset-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.acct-cset-switch .switch.busy { opacity: 0.6; pointer-events: none; }
.conn-add { padding: 8px 10px; border-radius: 10px; background: var(--warn-soft); }
.conn-add-title { display: block; font-size: 0.9rem; }
.conn-add-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.conn-add-row .conn-url { flex: 1 1 220px; min-width: 0; margin: 0; padding: 6px 10px; font-size: 0.82rem; background: var(--surface); }
.acct-made .acct-head { padding: 0 0 6px; }
.conn-new-actions { justify-content: flex-start; margin-top: 8px; }
.acct-pcs { margin: 2px 0 0; }
.limits.stale .usage-label { color: var(--muted); }
.tag.stale-tag { margin-left: 0; font-weight: 700; }
/* An account's page: the PCs that came and went (COMMAND-73). */
.acct-moves { list-style: none; margin: 0; padding: 0; }
.acct-moves li { padding: 6px 0; border-top: 1px solid var(--line); }
.acct-moves li:first-child { border-top: 0; }
.acct-before { margin-top: 6px; }
.chev { color: var(--muted); font-size: 1.4rem; line-height: 1; }
.pill { display: inline-block; min-width: 18px; padding: 0 7px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 0.72rem; font-weight: 700; line-height: 18px; text-align: center; }
.rare { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 8px; }

.acct-pc + .acct-pc { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 10px; }
.section-title { font-size: 1rem; margin: 18px 2px 8px; }

.status { display: inline-block; padding: 1px 8px; border-radius: 8px; font-size: 0.75rem; font-weight: 650; white-space: nowrap; background: var(--surface-2); color: var(--muted); }
.status.waiting { background: var(--warn-soft); color: var(--warn); }
.status.picked-up { background: var(--accent-soft); color: var(--accent); }
.status.answered { background: var(--advice-soft); color: var(--advice); }
.per-account { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.reply { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border-left: 3px solid var(--advice); }
.reply.interim { border-left-color: var(--line); }
/* The PO's own reply in a thread: indented, on the accent side. */
.reply.po { margin-left: 24px; background: var(--accent-soft); border-left: 3px solid var(--accent); }
/* Belangrijk again beside the thread's Archiveren (COMMAND-244, COMMAND-245, COMMAND-395): a ghost button, lit in the
   app's amber. */
.msg-important-inline { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.msg-important-inline svg { width: 16px; height: 16px; flex: none; }
.msg-important-inline.on { border-color: var(--warn); background: var(--warn-soft); color: var(--warn); }
.msg-important-inline.on svg path { fill: currentColor; stroke-width: 2.2; }
/* Belangrijk (COMMAND-238, the Vastzetten of COMMAND-118 under a new name) and Archiveren / Terughalen (COMMAND-239): the
   buttons on top of a conversation's page; the star on a Belangrijk one (the app's amber, light and dark), the quiet mark
   on an archived one. */
.msg-important, .msg-archive { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 4px 2px; color: var(--muted); font-size: 0.8rem; white-space: nowrap; }
.msg-important.on { color: var(--warn); font-weight: 650; }
.msg-important svg, .msg-archive svg, .important-mark svg, .archived-mark svg, .msg-views svg { width: 14px; height: 14px; flex: none; }
.msg-important.on svg path, .important-mark svg path { fill: currentColor; stroke-width: 2.2; }
.important-mark { display: inline-flex; align-items: center; gap: 3px; vertical-align: 1px; background: var(--warn-soft); color: var(--warn); font-weight: 650; }
.archived-mark { display: inline-flex; align-items: center; gap: 3px; vertical-align: 1px; background: var(--surface-2); color: var(--muted); font-weight: 650; }
/* Gesprekken in the Leesvenster (COMMAND-236; the List view's split variant since COMMAND-454, .list-split): a phone
   shows the list, or the conversation alone with its back on top — the sub-tabs and Antwoorden op pagina's go with the
   list; a wide screen shows both side by side (the layer at the end). */
.view.record-of-message > .sub-tabs,
.view.record-of-message > .threads-waiting { display: none; }
/* Alle berichten (COMMAND-227): one row per conversation, like a todo's line — a dot when an answer waits on the PO,
   the title on one line, under it the star of a Belangrijk one, a project, where it stands and how many replies
   (wrapping, never sideways); a tap opens the conversation. Like Gmail (COMMAND-236): a row whose answer waits on the PO is bold; the open one is
   marked like the question on screen in Vragen aan mij's list (a bar on its left), also under the pointer. */
.msg-list { padding-top: 4px; padding-bottom: 4px; }
.msg-line { padding-left: 6px; }
.msg-dot { flex: none; align-self: flex-start; width: 9px; height: 9px; margin-top: 7px; border-radius: 50%; background: transparent; }
.msg-dot.on { background: var(--danger); }
.msg-line.unread .msg-line-title { font-weight: 750; }
.msg-line-meta { flex-wrap: wrap; row-gap: 4px; }
.msg-line-meta .tag, .msg-line-meta .status { margin-left: 0; flex: none; }
.msg-line-meta .proj-pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.msg-line-count { flex: none; white-space: nowrap; }
/* A Belangrijk row (COMMAND-238; PO: "dan krijgt het ook een ander kleurtje in de navigatie links"): a soft amber
   background and an amber bar on its left, under the pointer too. The open row's blue selection below is drawn over it
   (same weight, later). */
.msg-line.important, .msg-line.important:hover { background: var(--warn-soft); box-shadow: inset 3px 0 0 var(--warn); }
.msg-line.on, .msg-line.on:hover { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
/* The chips on top of the list (COMMAND-238, COMMAND-239): Belangrijk (lit in amber) and Archief, with their counts. */
.msg-views { margin: 0 0 10px; }
/* Archiveer alles ouder dan 1 dag (N) under the chips (COMMAND-266): a comfortable tap, the width of its words. */
.msg-archive-old { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin: 0 0 10px; }
.msg-archive-old svg { width: 14px; height: 14px; flex: none; }
.msg-views .seg { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; }
.seg.msg-view-important.on { background: var(--warn); border-color: var(--warn); color: var(--accent-text); }
/* A conversation on its own page: its state and tags in one row; Belangrijk and Archiveren on top a comfortable tap. */
.msg-page-state { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.msg-page-state .tag { margin-left: 0; }
.record-actions .msg-important, .record-actions .msg-archive { min-height: 40px; padding: 6px 4px; font-size: 0.9rem; }
/* A phone (COMMAND-245; PO, 2026-10-04: "Zou wel handig zijn als ik die optie voor gesprekken ook kan uitvoeren"): the two
   buttons on top of a conversation get their own row under the title (the title the full width again), as clear
   outlined buttons, a 44px tap. A wide screen keeps them small beside the title (the layer at the end). */
.record-message .record-actions { flex-basis: 100%; }
.record-message .record-actions .msg-important, .record-message .record-actions .msg-archive { min-height: 44px; padding: 0 14px; gap: 6px; border: 1.5px solid var(--line); border-radius: 12px; font-size: 0.95rem; font-weight: 600; }
.record-message .record-actions .msg-important.on { border-color: var(--warn); background: var(--warn-soft); }
.reply-text { white-space: pre-wrap; margin: 4px 0 0; }
.tag.new { background: var(--danger-soft); color: var(--danger); font-weight: 700; }
/* Every thread the PO can answer (COMMAND-89): the opening message on top as it always read, a line under it, the
   buttons or the reply box, where it stands in one small line, then the replies as chat bubbles, newest first. */
.thread-divider { border: 0; border-top: 1px solid var(--line); margin: 12px 0 0; }
.thread-divider + .composer { padding-top: 0; border-top: 0; }
.thread-status { margin-top: 8px; color: var(--muted); }
.thread-status .per-account { display: inline-flex; margin-top: 0; vertical-align: middle; }
.reply.feedback { margin-bottom: 0; }
.reply-foot { margin-top: 4px; }

/* ---------- Segment buttons (.seg-group, .seg) ---------- */

.seg-group { display: flex; flex-wrap: wrap; gap: 6px; }
/* A tab or segment button keeps its label, and the count beside it, on one line, never broken inside a word
   (COMMAND-159, as COMMAND-137 did for .btn): the body's overflow-wrap: anywhere broke a label that came out a
   fraction of a pixel wider than its button ("Goedkeuringe / n", "Vragen aan / mij" with its count under it). Its
   row wraps (.seg-group) or scrolls (Te doen's, Nieuws's and Kosten's tabs on a phone, a board's lanes) as whole buttons. */
.seg { min-height: 38px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; font-size: 0.88rem; font-weight: 600; white-space: nowrap; overflow-wrap: normal; cursor: pointer; }
.seg.on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.seg:disabled { opacity: .45; }

/* ---------- Sub-tabs: Vragen's parts, and Vaults' (COMMAND-53) ---------- */

.sub-tabs { margin: 0 0 12px; }
.sub-tabs .seg { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; }
.seg-count { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 9px; background: var(--surface-2); color: var(--text); font-size: 0.75rem; line-height: 20px; }
.seg.on .seg-count { background: color-mix(in srgb, var(--accent-text) 25%, transparent); color: var(--accent-text); }

/* ---------- Projecten: one row per project (COMMAND-76), its own page (COMMAND-92) ---------- */

/* The list is the shared List view (COMMAND-394): the name, the status, the versions with their lights, who works on it,
   what needs attention. */
/* The bar on top of Devices for every PC (COMMAND-152): one row in this look — "Voor alle pc's" and the settings as
   chips — a tap to its page, as the row "Voor alle projecten" was on Projecten. */
.every-pc-bar { padding-top: 2px; padding-bottom: 2px; }
.project-row .fin-main { flex: 1 1 auto; gap: 4px; }
.project-envs { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.project-env { display: inline-flex; align-items: center; gap: 6px; }
.project-env .dot { margin-top: 0; }
.project-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.project-chips .tag { margin-left: 0; }
.tag.row-chip.is-warn { background: var(--warn-soft); color: var(--warn); font-weight: 700; }
.tag.row-chip.is-danger { background: var(--danger-soft); color: var(--danger); font-weight: 700; }
/* A number that is old (a PC's memory, COMMAND-135): greyed; its title says how old. */
.tag.row-chip.stale { opacity: .6; }
/* New projects (COMMAND-315): New in the Page Header (COMMAND-394), its form in a card under it, and each project's
   status as a tag. */
.project-new-form { padding: 4px 0; }
.project-new-form h2 { margin-bottom: 4px; }
.project-new-form .field .input { margin-top: 4px; width: 100%; }
.project-new-key { margin: 4px 0 0; min-height: 1em; }
.tag.project-status { margin-left: 0; }
.tag.project-status.is-warn { background: var(--warn-soft); color: var(--warn); font-weight: 700; }
.tag.project-status.is-danger { background: var(--danger-soft); color: var(--danger); font-weight: 700; }
/* A new project's setup (COMMAND-317): one line per step, its state as a small tag; a failed step's reason under it. */
.project-setup { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.project-setup-step .tag { margin-left: 0; }
.project-setup-step.state-done .project-setup-name { color: var(--muted); }
.project-setup-step .tag.is-warn { background: var(--warn-soft); color: var(--warn); font-weight: 700; }
.project-setup-step .tag.is-danger { background: var(--danger-soft); color: var(--danger); font-weight: 700; }
.project-setup-why { font-size: 0.9em; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
/* Its page (COMMAND-92): the project's settings and actions as its box had them, in its details card. */
.box-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.box-head h2 { margin-bottom: 4px; }
/* A PC that works on the project and is stopped (COMMAND-120): one line, a link to that PC. */
.project-box.is-stopped { border-color: color-mix(in srgb, var(--warn) 55%, var(--line)); }
.box-stopped { margin: 6px 0 2px; }
.box-stopped a { color: inherit; font-weight: 700; }
.set-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.box-head + .set-row, .card > h2 + .set-row { border-top: 0; }
.set-label { min-width: 0; flex: 1 1 160px; }
.set-control { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.input.pct { width: 76px; margin: 0; padding: 6px 10px; text-align: right; font-variant-numeric: tabular-nums; }
.pct-sign { color: var(--muted); margin-left: -4px; }

/* Vragen aan mij → Eigen besluiten (COMMAND-22): what the sessions decided themselves, folded under the queue. */
.own-decisions > summary { padding: 10px 2px; }
.own-decision h3 { font-size: 1rem; line-height: 1.4; margin: 8px 0 4px; }
.own-pick { margin: 4px 0 0; color: var(--advice); }
.own-decision .fold { margin: 6px 0 0; }
.own-decision .fold summary { padding: 4px 2px; }
.own-options { margin: 8px 0 0; padding-left: 18px; }
.own-options li { margin: 4px 0; }
.own-options li.picked { color: var(--advice); }

/* An on/off switch: a real checkbox under a drawn track. */
.switch { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 38px; cursor: pointer; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.switch-track { position: relative; width: 44px; height: 26px; border-radius: 13px; background: var(--line); transition: background .15s ease; flex: none; }
.switch-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgb(0 0 0 / 25%); transition: transform .15s ease; }
.switch.on .switch-track { background: var(--accent); }
.switch.on .switch-track::after { transform: translateX(18px); }
.switch.limit-switch.on .switch-track { background: var(--warn); }
.switch.own-switch.on .switch-track { background: var(--warn); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch-label { font-size: 0.88rem; font-weight: 600; }
/* In a box row the row says what the switch is: its own label is for screen readers only. */
.set-row .switch-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.claimed { margin: 6px 0 0; }

/* ---------- Devices: one list, a row per PC (COMMAND-135); a PC's page ---------- */

/* The list is the shared List view (COMMAND-394): a PC's name — a tap to its page — when it was seen, its chips, its
   hardware in one line, its account card and its toggle, a row per PC (stacked on a phone). */
.device-row-name { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.lv-table td .acct-mini { margin: 0; }
.device-toggle { flex: none; }
.device-toggle .switch { min-height: 32px; }
.device-toggle.is-stopped .switch-label { color: var(--warn); }
/* Its page: the toggle on top beside its name; under it its settings (COMMAND-73, COMMAND-75: its one account on top;
   "Mag werken aan": a lookup, then a row per project). */
.record-actions .device-toggle { padding-top: 0; }
.device-current { margin: 2px 0 6px; }
/* Its account as a compact account card (COMMAND-103): the Accounts card in small — "Account: <e-mail>", its status
   and the bars with their countdowns, nothing to press in it; the whole card is a tap to the account's page. */
a.acct-mini { display: block; margin: 6px 0 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); text-decoration: none; cursor: pointer; }
a.acct-mini:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
a.acct-mini:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.acct-mini-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.acct-mini .acct-main { gap: 4px; }
.acct-mini .acct-name { font-size: 1rem; }
.acct-mini .usage { margin-top: 6px; }
.acct-mini .usage-updated { margin-top: 4px; }
/* Its memory (COMMAND-105): "RAM", the bar, "41 / 64 GB" on one compact row; the budget line at 90% on the bar (its
   place and the fill's width come from app.js, on the style object); calm, amber past 80%, red past 90%. An old number
   is greyed and says its age under the bar. */
.mem { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; margin: 2px 0 6px; font-size: 0.86rem; }
.mem-label { color: var(--muted); font-weight: 600; }
.mem-num { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mem-bar { position: relative; height: 8px; overflow: visible; }
.mem-fill.mem-ok { background: var(--accent); }
.mem-fill.mem-high { background: var(--warn); }
.mem-fill.mem-over { background: var(--danger); }
.mem-mark { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--text); opacity: .55; }
.mem-age { grid-column: 2 / 4; margin-top: -4px; }
.mem.stale .fill { opacity: .4; }
.mem.stale .mem-num { color: var(--muted); }
/* A PC's hardware (COMMAND-111): its name on top of its box and one line under its memory, both links to its page. */
.box-head h2 a.device-name { color: inherit; text-decoration: none; }
.box-head h2 a.device-name:hover { text-decoration: underline; }
a.specs-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); text-decoration: none; }
a.specs-line:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
a.specs-line:focus-visible, .box-head h2 a.device-name:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.specs-text { min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
a.specs-line .chev { flex: none; font-size: 1.1rem; }
/* The core release (COMMAND-117 step 5): one card on top of Devices, one line in each PC's box. */
.core-release-card .box-head { align-items: baseline; }
.core-release-n { font-variant-numeric: tabular-nums; }
.core-release-note { margin: 4px 0 2px; overflow-wrap: anywhere; }
.core-release-meta, .core-release-back { margin: 2px 0; }
.core-release-card .actions { margin-top: 8px; }
.core-line { margin: 0 0 8px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.core-line .core-label { color: var(--muted, inherit); margin-right: 2px; }
/* The dry run of the named release (COMMAND-117 step 6): right under the core line, as one block with it. */
.core-line + .core-dry-line { margin-top: -6px; }
/* The full list on the PC's page: a label per part, its lines beside it (under it on a phone). */
.specs-list { display: grid; grid-template-columns: minmax(7rem, auto) 1fr; gap: 10px 16px; margin: 8px 0 0; }
.specs-row { display: contents; }
.specs-row dt { color: var(--muted); font-size: 0.86rem; }
.specs-row dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.specs-main { font-weight: 600; font-variant-numeric: tabular-nums; }
.specs-sub { margin-top: 2px; font-variant-numeric: tabular-nums; }
.specs-read { margin: 14px 0 0; }
@media (max-width: 520px) {
  .specs-list { grid-template-columns: 1fr; gap: 2px; }
  .specs-row dd { margin-bottom: 10px; }
}
.allowed-title { font-size: 0.86rem; font-weight: 600; color: var(--muted); margin: 12px 0 0; }

/* A lookup with pills (public/pickers.js, COMMAND-75; any screen that picks projects may use it): one field, its
   options in a list under it, the chosen ones as pills in their project's colour (proj-c*), each with a ×. */
.picker { margin-top: 6px; }
.picker-field { position: relative; }
.picker-input { margin-top: 0; }
.picker-list {
  display: none; position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 10;
  margin: 0; padding: 4px; list-style: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 24px rgb(0 0 0 / 16%);
  max-height: min(320px, 50vh); overflow-y: auto; overscroll-behavior: contain;
}
.picker-list.open { display: block; }
.picker-option { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.picker-option.active, .picker-option:hover { background: var(--accent-soft); }
.picker-option-label { min-width: 0; overflow-wrap: anywhere; }
.picker-swatch { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--proj, var(--muted)); }
.picker-note { padding: 8px 10px; }
.picker-empty { margin: 8px 0 0; }
.pill-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.pick-pill {
  display: inline-flex; align-items: center; max-width: 100%; min-height: 34px;
  border: 1.5px solid transparent; border-radius: 999px; background: var(--proj-soft); color: var(--proj);
  font-size: 0.85rem; font-weight: 700;
}
.pick-pill .pill-name { display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 4px 0 4px 12px; background: none; border: 0; color: inherit; font: inherit; }
.pick-pill button.pill-name { cursor: pointer; }
.pill-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--danger); }
.pill-x {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin-left: 2px; padding: 0;
  border: 0; border-radius: 50%; background: none; color: inherit; font: inherit; font-size: 1.15rem; line-height: 1; cursor: pointer;
}
.pill-x:hover, .pill-x:focus-visible { background: rgb(127 127 127 / 20%); }
/* Not checked out on this PC: drawn faded, a dashed edge. */
.pick-pill.pill-away { background: transparent; border-style: dashed; border-color: var(--proj); }
/* No ×: it cannot be taken away here (a project's vaults it always reads, COMMAND-100). */
.pick-pill.pill-locked .pill-name { padding-right: 12px; }
/* ONE value (pickers.js lookupOne, COMMAND-136): the field's own box with the chosen one as a pill inside it — the
   pill sits over the field — and its × opens the field again. An option may carry more beside its name. */
.picker-one-field { display: flex; align-items: center; min-height: 44px; padding: 4px 6px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); }
.picker-one-pill { background: var(--accent-soft); color: var(--accent); }
.picker-one .picker-swatch { display: none; }
.picker-one .picker-option { flex-wrap: wrap; row-gap: 4px; }
.picker-option-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-left: auto; }
.mini-limits { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.mini-usage { display: inline-flex; align-items: center; gap: 4px; font-size: 0.78rem; color: var(--muted); }
.mini-bar { display: inline-block; width: 44px; height: 6px; }
.mini-usage-num { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.mini-limits.stale .fill { opacity: .4; }
.mini-limits.stale .mini-usage-num { color: var(--muted); }

/* A PC's row per project it may work on (COMMAND-97; PO: "houd het compact aub"): the project in its colour, its
   builders and refiners at once on this PC (two numbers, COMMAND-279), its Custom Limit (a switch and a number), a ×.
   Two lines on a phone (the name, the limit and the × / the two numbers); one line once the box is wide enough. Its
   status (COMMAND-344) is a line of its own under it, the row's full width, only when there is something to say. */
.device-box { container-type: inline-size; }
/* A PC's Status (COMMAND-401): the PC itself — Uit (amber), Aan · aan het werk, Aan · niks te doen. Its toggle beside its
   name (COMMAND-135) is off only for the PO's Stop met alles; then its settings stand out. The two buttons are left for
   every PC at once (the page for every PC). */
.device-box.is-stopped { border-color: color-mix(in srgb, var(--warn) 55%, var(--line)); }
.device-status.is-working { color: var(--advice); }
.device-stop-actions { margin-top: 0; justify-content: flex-end; }
.allow-rows { margin: 10px 0 0; padding: 0; list-style: none; }
.allow-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'name limit' 'cap cap';
  align-items: center; gap: 4px 8px; padding: 6px 0; border-top: 1px solid var(--line);
}
.allow-row:first-child { border-top: 0; }
.allow-name { grid-area: name; min-width: 0; display: flex; align-items: center; gap: 8px; }
/* The project on or off on this PC (COMMAND-387): its switch at the front of the row; an off row greyed, its numbers kept. */
.allow-name .project-on-switch { min-height: 32px; flex: none; }
.allow-name .project-on-switch .switch-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.allow-row.is-off .pill-name, .allow-row.is-off .allow-capacity, .allow-row.is-off .allow-limit { opacity: .45; }
.allow-row.is-off .allow-status { opacity: 1; }
.switch input:disabled { cursor: not-allowed; }
.allow-name .pill-name {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 30px; padding: 2px 10px;
  border: 1.5px solid transparent; border-radius: 999px; background: var(--proj-soft); color: var(--proj);
  font: inherit; font-size: 0.85rem; font-weight: 700;
}
/* Bouwers and Uitwerkers on this PC (COMMAND-279): two labelled numbers. */
.allow-capacity { grid-area: cap; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.capacity-field { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; }
.capacity-field .capacity-input { width: 64px; margin: 0; padding: 4px 8px; text-align: right; font-variant-numeric: tabular-nums; }
.allow-limit { grid-area: limit; display: flex; align-items: center; gap: 6px; }
.allow-limit .switch { min-height: 32px; }
.allow-limit .switch-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.allow-limit .input.pct { width: 60px; padding: 4px 8px; }
.allow-limit .input.pct:disabled { opacity: .55; }
.allow-row.has-status { grid-template-areas: 'name limit' 'cap cap' 'status status'; }
.allow-status { grid-area: status; min-width: 0; }
.allow-status-line { margin: 0; overflow-wrap: anywhere; }
@container (min-width: 600px) {
  .allow-row { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: 'name cap limit'; }
  .allow-row.has-status { grid-template-areas: 'name cap limit' 'status status status'; }
}
.device-claims { margin: 0 0 4px; }
.claim-row .release-claim { white-space: nowrap; }
/* Versions and health per environment (COMMAND-11): a line per environment on the
   project's page, a light that always comes with a word. */
.dot.down { background: var(--danger); }
.env-line, .env-part { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin-top: 4px; }
.env-line .dot, .env-part .dot { margin-top: 0; align-self: center; }
.env-part-list { list-style: none; margin: 4px 0 0; padding: 0; }
.env-row .env-check { white-space: nowrap; }
/* What a PC works on now (COMMAND-95): under a line, its account's pause and a line per work item it claimed and per
   deploy turn it holds (a related-list); a work item's line opens its card, a deploy turn's has nothing to open. */
.device-now { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.device-now .device-now-title { margin: 0; }
.device-work-row .proj-pill { vertical-align: 1px; }
.device-work-meta { display: block; margin-top: 2px; }
div.device-work-deploy { cursor: default; }
.device-work-none { margin: 0; }

/* A reopened todo's older, handled feedback: folded away, closed by default. */
.fold.earlier { margin: 6px 0 0; }
.fold.earlier summary { padding: 4px 2px; }

/* ---------- news (what the Floor Managers told the PO in chat) ---------- */

/* Nieuws is ONE list with filter tabs above it (COMMAND-84): the tabs are Te doen's and
   Financiën's row (.news-tabs with .todo-tabs and .fin-tabs, below), each with how many are new. */
.news-tabs .seg { display: inline-flex; align-items: center; gap: 6px; }

.news-title { display: flex; align-items: center; gap: 8px; }
.news-list { list-style: none; margin: 0; padding: 0; }
.news-item { padding: 8px 0; border-top: 1px solid var(--line); }
.news-item:first-child { border-top: 0; padding-top: 2px; }
.news-item.unread .news-text { font-weight: 600; }
.news-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px; }
.news-text { white-space: pre-wrap; margin: 3px 0 0; }
.kind { display: inline-block; padding: 0 7px; border-radius: 8px; font-size: 0.72rem; font-weight: 700; background: var(--surface-2); color: var(--muted); }
.kind.done { background: var(--advice-soft); color: var(--advice); }
.kind.instruction { background: var(--accent-soft); color: var(--accent); }
.news .link { margin-top: 4px; }
.news-head .proj-pill { margin-right: 4px; }

/* A project as a pill in its own colour (COMMAND-84): the same colour for a project wherever it
   shows — GROUPS.colorClass (groups.js) picks one of the twelve below from the project's id alone.
   Each sets --proj (the text) and --proj-soft (the background), again for the dark theme; proj-floor
   is for what is about no one project (the Floor Manager's). Any screen may use these classes. */
.proj-pill { display: inline-block; padding: 0 8px; border-radius: 8px; background: var(--proj-soft); color: var(--proj); font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.proj-floor { --proj: var(--surface); --proj-soft: var(--muted); }
.proj-c0 { --proj: #b42318; --proj-soft: #fde8e6; }
.proj-c1 { --proj: #8a5a00; --proj-soft: #fdf0cf; }
.proj-c2 { --proj: #4b6b0a; --proj-soft: #eef5d8; }
.proj-c3 { --proj: #2451c7; --proj-soft: #e3ebfd; }
.proj-c4 { --proj: #b4480c; --proj-soft: #fdeadd; }
.proj-c5 { --proj: #19713f; --proj-soft: #dff3e7; }
.proj-c6 { --proj: #b3246b; --proj-soft: #fce4f0; }
.proj-c7 { --proj: #0b6d91; --proj-soft: #dcf1fa; }
.proj-c8 { --proj: #0d7065; --proj-soft: #d8f3ef; }
.proj-c9 { --proj: #4338ca; --proj-soft: #e7e5fc; }
.proj-c10 { --proj: #7e2fb5; --proj-soft: #f2e4fb; }
.proj-c11 { --proj: #7a4a26; --proj-soft: #f3e8de; }
@media (prefers-color-scheme: dark) {
  .proj-c0 { --proj: #ff9b91; --proj-soft: #42201d; }
  .proj-c1 { --proj: #f3c555; --proj-soft: #3a2e10; }
  .proj-c2 { --proj: #b8de6a; --proj-soft: #29331a; }
  .proj-c3 { --proj: #93b2ff; --proj-soft: #1d2a4d; }
  .proj-c4 { --proj: #ffad73; --proj-soft: #432a17; }
  .proj-c5 { --proj: #72d69c; --proj-soft: #173323; }
  .proj-c6 { --proj: #f59cc8; --proj-soft: #431c30; }
  .proj-c7 { --proj: #74cdef; --proj-soft: #14303d; }
  .proj-c8 { --proj: #63d6c7; --proj-soft: #123330; }
  .proj-c9 { --proj: #aaa4ff; --proj-soft: #26234f; }
  .proj-c10 { --proj: #d19df5; --proj-soft: #341f45; }
  .proj-c11 { --proj: #dcb08c; --proj-soft: #372a1f; }
}

/* A question part still in English (the Floor Manager has not translated it yet). */
.tag.untranslated { background: var(--warn-soft); color: var(--warn); font-weight: 700; }
h3 .tag.untranslated { vertical-align: middle; }

/* The patch-note guard: games whose deploys have no note yet. */
.patch-behind { margin: 0 0 10px; padding: 6px 10px; border-radius: 10px; background: var(--danger-soft); color: var(--danger); font-size: 0.86rem; font-weight: 650; }

/* ---------- Vragen: one question at a time ---------- */

.q-strip { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; }
.q-pos { display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; }
.q-pos strong { font-variant-numeric: tabular-nums; }
.q-pos .muted { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-filter { margin: 0 0 10px; }
.q-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.q-tags .tag { margin-left: 0; }
.prio { display: inline-block; padding: 1px 8px; border-radius: 8px; font-size: 0.75rem; font-weight: 700; }
.prio.child-safety { background: var(--danger); color: #fff; }
.prio.urgent { background: var(--warn-soft); color: var(--warn); }
/* Why it reached the PO although Eigen besluit may be on (COMMAND-172): Geld, Publiek, Live data, Jouw woord. */
.tag.po-only { margin-left: 0; font-weight: 700; background: var(--accent-soft); color: var(--accent); }
/* The explanation stands under the title, always open (COMMAND-342): body text, never a fold to click. */
.q-about { margin: 8px 0 0; }
.q-card { position: relative; overflow: hidden; transition: transform .35s ease-in, opacity .35s ease-in; touch-action: pan-y; }
.q-card.leaving { transform: translateX(-110%); opacity: 0; }
.q-sent {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--advice-soft) 88%, transparent);
  color: var(--advice); font-size: 1.4rem; font-weight: 800;
  animation: q-sent-in .12s ease-out;
}
@keyframes q-sent-in { from { opacity: 0; } to { opacity: 1; } }
.q-done { text-align: center; padding: 36px 16px; }
.q-done-mark { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; background: var(--advice-soft); color: var(--advice); font-size: 1.8rem; font-weight: 800; }
.q-done h2 { margin-bottom: 6px; }
@media (prefers-reduced-motion: reduce) { .q-card { transition: none; } }

/* A question that left the queue while the PO had it open: a popup over the
   screen (the next question is already drawn underneath). Phone first: a 16px
   gutter, scrolls inside itself when what the PO had typed is long. */
body.modal-open { overflow: hidden; }
.modal-backdrop {
  position: fixed; inset: 0;
  z-index: 20;
  display: grid; place-items: center;
  padding: calc(env(safe-area-inset-top) + 16px) 16px calc(env(safe-area-inset-bottom) + 16px);
  background: rgb(0 0 0 / 45%);
  animation: modal-in .15s ease-out;
}
.card.modal {
  margin: 0;
  text-align: center;
  box-shadow: 0 12px 40px rgb(0 0 0 / 25%);
}
.modal h2 { font-size: 1.15rem; margin: 0; }
.modal .modal-body > p { margin: 0 0 14px; }
.modal-mark { width: 48px; height: 48px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; background: var(--warn-soft); color: var(--warn); font-size: 1.5rem; font-weight: 800; }
.vanished-q { text-align: left; margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
.vanished-q p { margin: 2px 0 0; font-weight: 600; }
.kept { text-align: left; border-top: 1px solid var(--line); padding-top: 12px; }
.kept-intro { margin: 0 0 4px; color: var(--muted); }
.kept-h { font-size: 0.86rem; font-weight: 650; color: var(--muted); margin: 10px 0 6px; }
.kept-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0 6px; }
.kept-row .kept-h { margin: 0; }
.kept-picks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.kept-picks li { padding: 8px 12px; border: 1.5px solid var(--accent); border-radius: 10px; background: var(--accent-soft); }
.kept-note { margin: 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); white-space: pre-wrap; max-height: 35vh; overflow-y: auto; }
.kept .thumbs { margin-top: 0; }
.modal .modal-foot .btn.big { margin-top: 0; }
@keyframes modal-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .modal-backdrop { animation: none; } }

/* The one popup shell (COMMAND-451, modal.js; PO, 2026-10-09: "We willen altijd de header en footer op een vaste
   locatie, en de content area krijgt een eigen scroll area als het heel veel content heeft"), like a Salesforce modal:
   the title bar and the button bar never move; only the middle scrolls, once the popup reaches about 85% of the screen.
   A short popup stays as small as its content. One steady width per size, never wider than the screen (a 16px gutter
   each side); the chat panel keeps its own width. Used by the chat panel, the question that left the queue, Opzeggen
   and the Bestand sheet. */
.modal-shell {
  display: flex; flex-direction: column;
  max-height: calc(85vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  max-height: calc(85dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow: hidden;
  padding: 0;
}
.modal-head { flex: none; padding: 16px 16px 10px; }
.modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 16px 12px; }
.modal-body:empty { display: none; }
.modal-foot { flex: none; padding: 12px 16px 16px; border-top: 1px solid var(--line); }
.modal-foot > .actions { margin-top: 0; }
.modal-small { width: min(480px, 100vw - 32px); }
.modal-medium { width: min(640px, 100vw - 32px); }
/* The chat panel sits in a backdrop with room kept for the buttons under it: never taller than that room either; on a
   phone its button bar keeps clear of the home bar. */
.chat-panel.modal-shell { max-height: min(100%, 85vh); max-height: min(100%, 85dvh); }
.chat-panel .modal-head { padding-top: 12px; padding-bottom: 6px; }
.chat-panel .modal-foot { padding-bottom: calc(env(safe-area-inset-bottom) + 16px); }
@media (min-width: 600px) { .chat-panel .modal-foot { padding-bottom: 16px; } }

/* A screenshot dragged over a text box: it lands as a photo. */
.input.dropping { border-color: var(--accent); background: var(--accent-soft); }

/* ---------- formatted text: steps, bullets, headings, copy chips ---------- */

.fmt { white-space: normal; }
.fmt > * { margin: 0 0 10px; }
.fmt > *:last-child { margin-bottom: 0; }
.fmt p { line-height: 1.5; }
.fmt-h { font-size: 1rem; margin: 14px 0 6px; }
.fmt-h:first-child { margin-top: 0; }
.todo-text.fmt, .context.fmt { margin: 10px 0; font-size: 1rem; }
.fmt-steps { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 12px; }
.fmt-steps li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; }
.step-n {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-text);
  font-size: 0.85rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.step-body { padding-top: 3px; line-height: 1.5; min-width: 0; }
.fmt-list { margin: 0 0 10px; padding-left: 20px; display: grid; gap: 6px; }
/* A highlighted word or example in a todo, a question, a message (COMMAND-471; it was a code chip with a Kopieer button):
   the normal font, a little bolder, a faint accent background; it wraps like the words around it. */
.text-mark {
  font: inherit; font-weight: 600;
  padding: 0 4px; border-radius: 4px;
  background: var(--accent-soft);
  white-space: normal;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* A block to copy: its text as it is, the copy icon inside its top-right corner, visible without hovering (a phone has none). */
.copy-block {
  position: relative;
  margin: 6px 0 10px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface-2);
}
.copy-block pre { margin: 0; padding: 10px 44px 10px 12px; overflow-x: auto; }
.copy-block code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.85rem; line-height: 1.5; white-space: pre; }
.copy-icon {
  position: absolute; top: 6px; right: 6px;
  width: 30px; height: 30px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 6px;
  background: transparent; color: var(--muted);
  opacity: 1;
  cursor: pointer;
}
.copy-icon:hover, .copy-icon:focus-visible { background: var(--line); color: var(--text); }
.copy-icon.copied { color: var(--accent); }
.copy-icon svg { width: 18px; height: 18px; }
.copy-btn {
  flex: none;
  white-space: nowrap;
  min-height: 28px; padding: 0 10px;
  border: 0; border-radius: 6px;
  background: var(--accent); color: var(--accent-text);
  font: inherit; font-size: 0.78rem; font-weight: 700;
  cursor: pointer;
}
.lock-chip { display: inline-block; padding: 0 7px; border-radius: 8px; background: var(--warn-soft); color: var(--warn); font-size: 0.8rem; font-weight: 700; white-space: nowrap; }
.option .fmt.option-desc { color: var(--muted); font-size: 0.9rem; }
.option .fmt.option-desc > * { margin-bottom: 4px; }
.reply-text.fmt { margin: 4px 0 0; }

/* ---------- Te doen: the shared List view with filter tabs above it (COMMAND-71, COMMAND-394), the todo on its own page (COMMAND-92) ---------- */

/* The tabs are Financiën's (.fin-tabs, below), each with how many open todos. */
.todo-tabs .seg { display: inline-flex; align-items: center; gap: 6px; }
/* Te doen → Voor agents (COMMAND-88): the Floor Managers' work queue, a row per item in the List view (COMMAND-394), a
   tap opens its page; escalated ones on top, red. */
.seg-count.alert { background: var(--danger); color: #fff; font-weight: 700; }
.seg.on .seg-count.alert { background: var(--danger); color: #fff; }
.agent-item.agent-escalated { border-color: var(--danger); box-shadow: inset 3px 0 0 var(--danger); }
.agent-item.agent-done, .agent-item.agent-dropped { opacity: 0.75; }
.agent-held-none { margin: 0 0 10px; }
.agent-line-main { min-width: 0; display: inline-flex; flex-direction: column; gap: 2px; }
.agent-line-subject { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-state-escalated { background: var(--danger-soft); color: var(--danger); font-weight: 700; }
.agent-state-held { background: var(--warn-soft); color: var(--warn); font-weight: 650; }
/* COMMAND-233: nobody who picks it up is live. */
/* The agents' tasks the PCs claim (COMMAND-452; built without a design: POC): a group of their own above the work
   queue's List view, a line per task. */
.agent-list { padding-top: 4px; padding-bottom: 4px; }
.agent-items { list-style: none; margin: 0; padding: 0; }
.agent-items li + li { border-top: 1px solid var(--line); }
.agent-group-title { margin: 6px 4px 4px; font-size: 0.95rem; }
.agent-line { width: 100%; min-height: 44px; display: flex; align-items: baseline; gap: 10px; padding: 10px 4px 10px 10px; border-radius: 8px; color: var(--text); }
.agent-line > .tag { flex: none; margin-left: 0; }
.agent-line > .agent-line-main { flex: 1; display: flex; }
.agent-age { flex: none; margin-left: auto; }
/* An agent task that failed 3 times (COMMAND-452): its last reason. */
.agent-task-reason { color: var(--danger); }
.agent-state.agent-state-stuck { background: var(--danger-soft); color: var(--danger); font-weight: 650; }
.agent-subject { margin: 6px 0; overflow-wrap: anywhere; }
.agent-attempts ul { margin: 4px 0 0; padding-left: 18px; }
.agent-attempts li { margin: 2px 0; overflow-wrap: anywhere; }
.agent-actions .actions { flex-wrap: wrap; }
.agent-actions .btn.danger.on { outline: 2px solid var(--danger); }
/* A line of a list that is a link as a whole (Gesprekken's conversations, .msg-line). */
.todo-lines { list-style: none; margin: 0; padding: 0; }
.todo-lines li + li { border-top: 1px solid var(--line); }
.todo-line {
  width: 100%; min-height: 44px;
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px 4px;
  border: 0; border-radius: 8px;
  background: none; color: var(--text);
  font: inherit; text-align: left;
  cursor: pointer;
}
.todo-line:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (hover: hover) { .todo-line:hover { background: var(--surface-2); } }
/* A todo's (or a request's) first cell in Te doen's List view (COMMAND-394): its urgency icon, then its title and what
   it blocks — the row is the line, so no line box of its own. */
.list-view .todo-line { width: auto; min-height: 0; padding: 0; border-radius: 0; cursor: inherit; }
@media (hover: hover) { .list-view .todo-line:hover { background: none; } }
/* The title on one line: what does not fit ends in an ellipsis. */
.todo-line-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
/* On Alle: the project under the title. */
.todo-line-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.todo-line-main > .todo-line-title { flex: none; }
.todo-line-project { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo-line-age { flex: none; }
.fold .todo-lines { margin-top: 6px; }

/* How urgent (COMMAND-72): an icon at the start of every line — a shape and a colour per level —
   what a todo that blocks work blocks under its title, and a filter row under the project tabs. */
.urgency-icon { flex: none; display: inline-flex; }
.urgency-icon svg { width: 20px; height: 20px; }
.urgency-now { color: var(--danger); }
.urgency-now svg path { stroke-width: 2.2; }
.urgency-today { color: var(--warn); }
.urgency-whenever { color: var(--muted); }
/* On the line the icon sits on the title's line, not on the baseline of the whole button. */
.todo-line > .urgency-icon { align-self: flex-start; margin-top: 1px; }
.todo-line-blocks { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--danger); font-weight: 600; }
.todo-line-meta { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tag.urgency-unsorted { flex: none; padding: 0 6px; font-size: 0.72rem; }
.todo-urgency { margin: -4px 0 12px; }
.todo-urgency .seg { display: inline-flex; align-items: center; gap: 6px; }
.todo-urgency .urgency-icon svg { width: 18px; height: 18px; }
.todo-urgency .seg.on .urgency-icon { color: inherit; }
.todo-urgency-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 2px; font-weight: 600; }
.todo-blocks { margin: 6px 0; padding: 8px 10px; border-radius: 10px; background: var(--danger-soft); color: var(--danger); font-weight: 600; }
/* A todo for one PC (COMMAND-136): the Device field on its page — the lookup, beside it (under it on a phone) the
   5-hour and week bars of the account that PC runs; the PC on the todo's line. */
.todo-device { margin: 8px 0 12px; }
.todo-device-label { color: var(--muted); font-weight: 600; }
.todo-device-label .req { color: var(--danger); }
.todo-device-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 20px; margin-top: 4px; }
.todo-device-pick { flex: 1 1 220px; min-width: 0; }
.todo-device-pick .picker { margin-top: 0; }
.todo-device-limits { flex: 1 1 240px; min-width: 0; }
.todo-device-limits .usage { margin-top: 4px; }
.todo-device-needed { margin: 6px 0 0; }
.todo-line-device { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* In the header of a todo's page (COMMAND-92): how urgent, on one line with its word. */
.record-field .todo-urgency-row { margin: 0; }

/* Requests in Te doen (COMMAND-133): a key or a camera beside the urgency icon on the line and on the page; the
   photos of a request in a grid, each with its caption; the delete-on row (Verwijderen na … dagen). */
.request-kind { flex: none; display: inline-flex; color: var(--muted); }
.request-kind svg { width: 18px; height: 18px; }
.todo-line > .request-kind { align-self: flex-start; margin-top: 2px; }
.request-kind-row { display: inline-flex; align-items: center; gap: 6px; }
.request-line-for { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.request-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 10px; }
.request-photo { position: relative; margin: 0; display: grid; gap: 6px; }
.request-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); display: block; }
.request-photo figcaption { overflow-wrap: anywhere; }
.request-photo .input.request-caption { min-height: 40px; margin: 0; }
.request-photo .thumb-x { top: 6px; right: 6px; }
.request-delete-after { margin-top: 12px; }
.request-delete-label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.request-delete-days { width: 5.5em; min-height: 36px; margin: 0; }
.request-delete-when { margin: 4px 0 0; }
/* A request for files (COMMAND-160): the files with a name under each, the ones on their way up with their progress. */
.request-files.dropping { outline: 2px dashed var(--accent); outline-offset: 2px; }
.request-files-count { margin: 10px 0 0; }
.request-file-list, .request-uploads { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.request-file { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 10px 40px 10px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.request-file-icon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; color: var(--accent); }
.request-file-icon svg { width: 22px; height: 22px; }
.request-file-main { min-width: 0; flex: 1; display: grid; gap: 4px; }
.request-file-main .input.request-file-caption { min-height: 40px; margin: 0; }
.request-file-caption { overflow-wrap: anywhere; }
.request-file-meta { overflow-wrap: anywhere; }
.request-file-player { width: 100%; max-width: 360px; height: 36px; }
.request-file .thumb-x { top: 8px; right: 8px; }
.request-upload { display: grid; gap: 6px; padding: 10px; border: 1px dashed var(--line); border-radius: 10px; }
.request-upload-failed { border-style: solid; border-color: var(--warn); background: var(--warn-soft); }
.request-upload-top, .request-upload-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: space-between; }
.request-upload-name { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.request-upload-bar { width: 100%; height: 8px; accent-color: var(--accent); }
.request-upload-foot .btn { min-height: 36px; }
/* A file going up from any text box or the Docs editor (COMMAND-320): the same rows as a file request's. */
.box-uploads { margin: 8px 0; }
.box-uploads .request-uploads { margin-top: 0; }
.box-uploads-busy { margin: 6px 0 0; }

/* ---------- options: a checkbox for "one or more", a radio dot for "one" ---------- */

.pick-hint { margin: 2px 0 8px; font-size: 0.86rem; font-weight: 650; color: var(--muted); }
.option {
  grid-template-columns: 26px 1fr;
  column-gap: 12px; row-gap: 3px;
  align-items: start;
  min-height: 52px;
  padding: 12px 14px;
  background: var(--surface);
  border-color: var(--line);
}
.option > .option-label, .option > .option-desc { grid-column: 2; }
.opt-mark {
  grid-column: 1; grid-row: 1 / span 2;
  width: 24px; height: 24px; margin-top: 1px;
  display: grid; place-items: center;
  border: 2px solid var(--muted);
  background: var(--surface);
  transition: background .12s, border-color .12s;
}
.option.check .opt-mark { border-radius: 6px; }
.option.radio .opt-mark { border-radius: 50%; }
/* Not picked: plain, whatever it advises. Picked: unmistakable. */
.option.advised { border-color: var(--line); }
.option.picked { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.option.check.picked .opt-mark { border-color: var(--accent); background: var(--accent); }
.option.check.picked .opt-mark::after { content: '✓'; color: var(--accent-text); font-size: 16px; font-weight: 900; line-height: 1; }
.option.radio.picked .opt-mark { border-color: var(--accent); }
.option.radio.picked .opt-mark::after { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }

/* A clip per option (COMMAND-140): a round play button in the option's label line; the icon is drawn, never a glyph
   (an iPhone turns the play triangle into an emoji). Playing: two bars, in the accent colour. */
.clip-play {
  display: inline-flex; align-items: center; gap: 6px;
  min-width: 44px; min-height: 32px; padding: 4px 12px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface-2); color: var(--text);
  font: inherit; font-size: 0.82rem; font-weight: 650; line-height: 1;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.clip-play:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.clip-play .clip-icon { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }
.clip-play.playing { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.clip-play.playing .clip-icon { width: 10px; height: 12px; border-width: 0 3px; border-color: currentColor; box-sizing: border-box; }
.clip-play .clip-time { font-variant-numeric: tabular-nums; color: inherit; }
.approval-clips { display: grid; gap: 6px; margin: 8px 0; }
.approval-clip { display: flex; align-items: center; gap: 10px; font-weight: 650; }

/* A command sent from the phone that a Floor Manager has not carried out yet. */
.pending { color: var(--warn); font-weight: 650; }

/* ---------- credentials (the Credentials tab) ---------- */

.cred-target { margin-top: 4px; }
/* Why a key is needed (COMMAND-94): three short lines above a request's steps, or the amber line when missing. */
.cred-why { display: grid; gap: 6px; margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
.cred-why-row { margin: 0; overflow-wrap: anywhere; }
.cred-why-label { display: block; font-size: 0.8rem; font-weight: 650; color: var(--muted); }
.warn.cred-why-missing { margin: 0 0 10px; }
.cred-field { display: flex; align-items: flex-start; gap: 8px; }
.cred-field .input { flex: 1; min-width: 0; }
.cred-eye { flex: none; width: 44px; height: 44px; margin-top: 10px; border-radius: 12px; color: var(--muted); }
.input.secret { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
/* A multi-line value stays hidden until the eye is tapped (WebKit and Chromium). */
textarea.input.secret.masked { -webkit-text-security: disc; }
.cred-actions { align-items: center; justify-content: space-between; }
.cred-multi { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.cred-list { list-style: none; margin: 0; padding: 0; }
.cred-list li { padding: 8px 0; border-top: 1px solid var(--line); }
.cred-list li:first-child { border-top: 0; }
.cred-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.cred-ref { font-weight: 600; overflow-wrap: anywhere; }
.cred-left { flex: none; }
.cred-row .tag { flex: none; }
.tag.stored { background: var(--advice-soft); color: var(--advice); font-weight: 700; }
.tag.waiting { background: var(--warn-soft); color: var(--warn); font-weight: 700; }

/* ---------- vaults (COMMAND-4): one folded card per vault on Vaults, the pills on a project's page on Projecten ---------- */

details.card.vault > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
details.card.vault > summary::-webkit-details-marker { display: none; }
details.card.vault > summary::before { content: '▸'; color: var(--muted); transition: transform .15s ease; }
details.card.vault[open] > summary::before { transform: rotate(90deg); }
.vault-name { font-weight: 700; font-size: 1.05rem; }
.vault-count { margin-left: auto; }
.vault-who { margin: 8px 0 4px; }
/* The vaults as a tree (COMMAND-69): each level indented under the vault above it, with a line to show where it hangs. */
details.card.vault.vault-depth-1 { margin-left: 12px; border-left: 3px solid var(--line); }
details.card.vault.vault-depth-2 { margin-left: 24px; border-left: 3px solid var(--line); }
.vault-value { margin-top: 8px; white-space: pre-wrap; }
.vault-actions { justify-content: flex-start; margin-top: 8px; }
.vault-form { margin-top: 8px; }
.vault-add-names { display: flex; flex-wrap: wrap; gap: 8px; }
.vault-add-names .input { flex: 1 1 180px; min-width: 0; margin: 0; }
.vault-form-buttons { display: inline-flex; gap: 8px; }
.vault-backup { margin: 4px 2px 16px; }
/* A project's vaults on its page (COMMAND-100): the lookup with pills of Devices, beside the label on a wide screen,
   under it on a phone. */
.vault-picker { flex: 1 1 300px; max-width: 460px; min-width: 0; }
.vault-picker .picker { margin-top: 0; }

/* ---------- a new PC: the connector address (on top of Accounts, the only place; COMMAND-58) ---------- */

/* A value shown on screen (a vault key after Tonen): the look the new-PC key had. */
.newpc-key {
  min-height: 44px; padding: 11px 12px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9rem;
  overflow-wrap: anywhere; user-select: all;
}
.newpc-actions { justify-content: flex-start; margin-top: 10px; }

/* ---------- record pages (every detail page; after Salesforce record pages) ---------- */
/* Drawn in phone order: highlights, side panel (the messages), then the tab set.
   A wide screen gets two columns: the tabs left, the side panel right. */

.view.record-view { max-width: 1240px; }
.record-head { padding: 14px 16px; }
/* Every record page (COMMAND-92): a link back to the list it was opened from, on top of its header. */
.link.record-back { display: inline-flex; align-items: center; min-height: 32px; margin: -6px 0 6px; font-weight: 600; }
.record-missing .link.record-back { margin: 0; }
/* The rows that open a record page are links to its address: no underline, the row's own colour. */
a.todo-line, a.fin-row { text-decoration: none; }
.record-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.record-icon { flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--accent); color: var(--accent-text); display: grid; place-items: center; }
.record-icon svg { width: 24px; height: 24px; }
.record-name { flex: 1; min-width: 0; }
.record-kicker { line-height: 1.2; }
.card h2.record-title { font-size: 1.2rem; margin: 0; overflow-wrap: anywhere; }
.record-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.record-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.record-field dt { font-size: 0.78rem; color: var(--muted); }
.record-field dd { margin: 2px 0 0; font-weight: 650; overflow-wrap: anywhere; }
.level-text.mid { color: var(--warn); }
.level-text.high { color: var(--danger); }

.record-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 12px; border-bottom: 1px solid var(--line); }
.record-tab {
  border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px;
  background: none; color: var(--muted);
  padding: 10px 14px; min-height: 44px;
  font: inherit; font-weight: 650;
  display: inline-flex; align-items: center; gap: 6px;
  /* One line, never broken inside a word, the count beside its label (COMMAND-159, like .seg). */
  white-space: nowrap; overflow-wrap: normal;
  cursor: pointer;
}
.record-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.record-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 0 0 4px; }
.record-dl dt { color: var(--muted); font-size: 0.86rem; }
.record-dl dd { margin: 0; overflow-wrap: anywhere; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.related-list { list-style: none; margin: 0; padding: 0; }
.related-row {
  width: 100%; min-height: 44px;
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px 0; border: 0; border-top: 1px solid var(--line);
  background: none; color: var(--text); font: inherit; text-align: left;
  cursor: pointer;
}
.related-list li:first-child > .related-row { border-top: 0; }
.related-row .card-id { flex: none; color: var(--accent); }
.related-text { flex: 1; min-width: 0; }
.related-row .chev { flex: none; align-self: center; }

@media (min-width: 600px) {
  .record-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
  .record {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(340px, 1fr);
    grid-template-areas: "highlights highlights" "main side";
    column-gap: 16px;
    align-items: start;
  }
  .record-head { grid-area: highlights; }
  .record-main { grid-area: main; }
  .record-side { grid-area: side; }
  /* A page without a side panel (a card without its action panel open, COMMAND-7; a todo, a project, a work item,
     COMMAND-92): one column, no empty one beside it. */
  .record:not(:has(> .record-side)) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "highlights" "main"; }
}

/* ---------- the one layout for every table (COMMAND-393, public/record-page) ---------- */
/* After Salesforce (PO, 2026-10-08): the same Page Header on an index page, a record page and a View-all page; a List
   view (search, sort, a click opens the record) under it; on a record's Gerelateerd one related list per foreign key —
   its first 6 rows in a compact table and "Alles bekijken". Phone first: below 600px a table's rows stack (each cell
   with its column's name, nothing scrolls sideways) and the column names stay on top as a row of sort buttons. Every
   page keeps the one page box (COMMAND-43): a wide screen gives the List view the page's whole width. */
.page-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin: -4px 0 8px; padding: 0; font-size: 0.86rem; }
.page-crumbs li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.page-crumbs li + li::before { content: '›'; color: var(--muted); }
.page-crumb { color: var(--muted); }
a.page-crumb { color: var(--accent); font-weight: 600; text-decoration: none; }
.page-count { font-weight: 500; }
.page-notice { margin: 0 0 12px; }

.list-view { padding: 0; overflow: hidden; }
.lv-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.lv-search { flex: 1 1 220px; max-width: 420px; min-height: 40px; }
.lv-limited { flex: none; }
.lv-results > .lv-empty { margin: 14px; }
.lv-shown { margin: 0; padding: 8px 14px 12px; }
.lv-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.lv-table th { text-align: left; font-size: 0.8rem; font-weight: 650; color: var(--muted); padding: 8px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface-2); }
.lv-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.lv-table tbody tr:last-child td { border-bottom: 0; }
.lv-table .lv-num { text-align: right; font-variant-numeric: tabular-nums; }
.lv-sort { border: 0; background: none; padding: 0; min-height: 28px; font: inherit; color: inherit; display: inline-flex; align-items: center; gap: 2px; cursor: pointer; white-space: nowrap; }
.lv-sort.on { color: var(--text); }
.lv-open { cursor: pointer; }
a.lv-link { color: var(--accent); font-weight: 650; text-decoration: none; }
a.lv-ref { color: var(--accent); text-decoration: none; }
@media (hover: hover) {
  .lv-open:hover td { background: var(--surface-2); }
  a.lv-link:hover, a.lv-ref:hover, a.page-crumb:hover { text-decoration: underline; }
}
/* A long text (a description) stays a few lines in a list; its record page shows it whole. */
.lv-table td[data-field="description"] > * { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* The List view's two looks (COMMAND-454): Tabel (above) and Leesvenster (record-page splitView): the list, and the
   opened item beside it on a wide screen (the layer at the end: each side its own scroll box). A phone (and a narrow
   window) shows one side at a time — the list, or the opened item alone with its own way back. The switch
   "Tabel | Leesvenster" sits in the head of a list that has both. */
.list-split.has-open > .list-split-list,
.list-split:not(.has-open) > .list-split-main { display: none; }
.list-split-list > .section-title, .list-split-list > .list-head { margin-top: 4px; }
.list-split-list > .lv-tools { padding: 0 0 10px; border-bottom: 0; }
.list-split-empty p { margin: 0; }
.ls-rows { padding-top: 4px; padding-bottom: 4px; }
.ls-line { padding-left: 6px; }
.ls-line.on, .ls-line.on:hover { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
/* The line under a row's title: its next two columns, on one line. */
.ls-sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Gesprekken as a Tabel: the title bold where an answer waits on the PO, as in the Leesvenster. */
.msg-cell.unread { font-weight: 750; }
.list-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin: 0 0 10px; }
.list-head > .section-title { margin: 0; }
.lv-variants { flex: none; gap: 4px; }
.lv-variants .seg { min-height: 34px; padding: 0 10px; font-size: 0.84rem; }
.record-actions .lv-variants { align-self: center; }
/* An index page in the Leesvenster with a record open: on a phone the record alone (its crumbs lead back), so the
   index's own header goes with the list. */
.view.page-split.page-record > .page-header { display: none; }
/* Te doen and Meldingen in the Leesvenster with a record open (COMMAND-394): the same on a phone and a narrow window —
   the record alone, its own back link leads to the list. Te doen's line in it is the todo's own line, a link as a whole. */
@media (max-width: 1099.98px) { .view.split-open > :not(.list-split) { display: none; } }
a.ls-task { display: block; color: inherit; text-decoration: none; border-radius: 8px; }

.related-card { padding: 0; overflow: hidden; }
.card h2.related-title { font-size: 1rem; margin: 0; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.related-card > .related-empty { margin: 0; padding: 12px 14px; }
.lv-compact { font-size: 0.88rem; }
.lv-compact th { background: none; }
.lv-compact td { padding: 8px 12px; }
.related-foot { border-top: 1px solid var(--line); text-align: center; }
a.related-all { display: flex; align-items: center; justify-content: center; min-height: 44px; font-weight: 650; text-decoration: none; }
.record-system .record-dl dd { color: var(--muted); }
.acct-cell { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* A window's use in the Claude Accounts list: a short bar and the percentage, its reset counting down under them. */
.usage-cell { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.usage-cell .usage-reset { flex-basis: 100%; margin: 0; }
.usage-cell.stale .fill { opacity: .4; }
.usage-cell.stale .usage-num { color: var(--muted); }
.acct-waiting > .section-title { margin-top: 6px; }

@media (max-width: 599px) {
  .lv-table, .lv-table tbody, .lv-table tr, .lv-table td { display: block; }
  .lv-table thead { display: block; }
  .lv-table thead tr { display: flex; flex-wrap: wrap; gap: 0 14px; padding: 4px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
  .lv-table th { padding: 0; border: 0; background: none; }
  .lv-compact thead { display: none; }
  .lv-table tbody tr { padding: 10px 12px; border-bottom: 1px solid var(--line); }
  .lv-table tbody tr:last-child { border-bottom: 0; }
  .lv-table td { display: grid; grid-template-columns: minmax(84px, 38%) minmax(0, 1fr); gap: 10px; padding: 2px 0; border: 0; }
  .lv-table .lv-num { text-align: left; }
  .lv-table td::before { content: attr(data-label); color: var(--muted); font-size: 0.8rem; padding-top: 1px; }
  .lv-table td:first-child { display: block; padding-bottom: 4px; font-size: 0.98rem; }
  .lv-table td:first-child::before { content: none; }
}

/* The App Launcher (COMMAND-393): the nine dots at the left of the tab bar; a tap opens a dialog with a search over every
   table of the ERD. */
.tabs-bar { display: flex; align-items: stretch; max-width: 720px; margin: 0 auto; }
.tabs-bar > .tabs { flex: 1 1 auto; min-width: 0; max-width: none; margin: 0; padding-left: 0; }
.launcher-btn {
  flex: none; width: 44px; margin-left: calc(env(safe-area-inset-left) + 4px);
  border: 0; border-bottom: 3px solid transparent; background: none; color: var(--muted);
  display: grid; place-items: center; cursor: pointer;
}
.launcher-btn svg { width: 22px; height: 22px; }
.launcher-btn svg path { stroke-width: 3.6; }
.launcher-btn.on { color: var(--accent); }
@media (hover: hover) { .launcher-btn:hover { color: var(--accent); } }
.launcher-backdrop { place-items: start center; padding-top: calc(env(safe-area-inset-top) + 56px); }
.launcher-panel { text-align: left; }
.launcher-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.launcher-search { width: 100%; min-height: 44px; }
.card .launcher-sub { margin: 4px 0 6px; font-size: 0.8rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.04em; }
.launcher-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
a.launcher-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 8px 10px; border-radius: 8px; color: var(--text); text-decoration: none; }
.launcher-name { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.launcher-none { padding: 10px; }
@media (hover: hover) { a.launcher-item:hover { background: var(--surface-2); color: var(--accent); } }
a.launcher-item:focus-visible { background: var(--surface-2); }
@media (min-width: 600px) { .launcher-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; } }

/* ---------- Goedkeuringen: approvals in Vragen (2026-09-29) ---------- */

/* Three parts in Vragen (and in Vaults): each as wide as its words, wrapping only on the smallest screens. */
.sub-tabs .seg { flex: 1 1 auto; padding: 0 10px; }
.approval-q { font-size: 1.05rem; line-height: 1.4; margin: 8px 0 4px; }
.approval-about { margin: 6px 0 8px; }
/* The work item's own name under its number (COMMAND-342). */
.card-title { margin: 2px 0 0; line-height: 1.35; }
.approval-actions { justify-content: stretch; flex-wrap: nowrap; }
.approval-actions .btn { flex: 1 1 0; min-width: 0; padding: 0 8px; }
.btn.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
/* Weigeren pressed (COMMAND-217: its reason box is open) keeps its red, with a red edge to show it is the choice. */
.btn.danger.on { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }
.approval-other { margin-top: 10px; }
.approval-other .input { width: 100%; }
/* Beantwoord (COMMAND-169): the approvals the PO answered, under the open ones; the answer as a chip (Akkoord green,
   Geweigerd red, Anders grey), the PO's words under it, then when and from where. */
.answered-approvals { margin-top: 22px; }
.approval-done .approval-q { font-size: 1rem; }
.approval-answer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 4px; }
.answer-chip { display: inline-flex; align-items: center; min-height: 26px; padding: 2px 10px; border-radius: 999px; font-size: 0.86rem; font-weight: 700; background: var(--surface-2); color: var(--text); }
.answer-chip.yes { background: var(--advice-soft); color: var(--advice); }
.answer-chip.no { background: var(--danger-soft); color: var(--danger); }
.approval-done .approval-note { margin: 4px 0; }
.approval-done .answered-when { margin: 6px 0 2px; }
.answered-more { width: 100%; margin: 4px 0 14px; }

/* ---------- Financiën: the full cost picture (COMMAND-10) ---------- */

.fin-total { font-size: 2rem; font-weight: 750; line-height: 1.15; margin: 2px 0; font-variant-numeric: tabular-nums; }
.fin-split { margin: 8px 0 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.fin-refresh { margin: 8px 0 0; }
.fin-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; }
/* The kinds of line under Kosten's tabs (Lopend, Eenmalig, Gepland, Gratis, Gestopt) and Facturen's (Alle, Te controleren,
   Geen factuur), each with how many (COMMAND-394); Binnenkort's total in their place. */
.fin-kinds { margin: 0 0 12px; }
.fin-kinds .seg { display: inline-flex; align-items: center; gap: 6px; }
.fin-soon-line { margin: 0 0 12px; font-variant-numeric: tabular-nums; }
/* A line in the List view: when it is paid under one another (its renewal or its day, its next payment). */
.fin-when { display: inline-flex; flex-direction: column; gap: 2px; }
/* Kosten's tabs (COMMAND-45): "Alle", then each company, project or vendor — one row that
   scrolls sideways on a phone when they do not fit, like a board's lanes. Te doen's tabs
   (COMMAND-71) and Nieuws's (COMMAND-84) are the same row. */
.todo-tabs,
.news-tabs,
.fin-tabs { position: relative; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -16px 12px; padding: 2px 16px; }
.todo-tabs::-webkit-scrollbar,
.news-tabs::-webkit-scrollbar,
.fin-tabs::-webkit-scrollbar { display: none; }
.todo-tabs .seg,
.news-tabs .seg,
.fin-tabs .seg { flex: none; }
/* A line's next payment (COMMAND-81): a short line under its amount ("volgende betaling 12 okt"), on its page a
   whole one; not known is said too, with a pointer to the Startdatum field. */
.fin-details .fin-next-full { margin: 6px 0 0; }
.fin-next-full .fin-next-fill { padding: 0; font-size: inherit; text-align: left; }
.fin-sum { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fin-lines { list-style: none; margin: 0; padding: 0; }
.fin-line + .fin-line { border-top: 1px solid var(--line); }
.fin-row {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
  width: 100%; padding: 10px 0;
  border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.fin-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fin-main strong { overflow-wrap: anywhere; }
.fin-badges .tag:first-child { margin-left: 0; }
.fin-amt { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tag.fin-check { background: var(--warn-soft); color: var(--warn); font-weight: 700; }
.fin-sum-line { margin: 8px 0 0; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
/* A new line's form opens on the list (the corner bottom left is the chat button's); a cost line's is on its own
   page (COMMAND-92, below), and so is an invoice's (COMMAND-394). */
.fin-form { border-color: var(--accent); }
.fin-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 10px; }
.fin-field { display: flex; flex-direction: column; margin-top: 8px; min-width: 0; }
.fin-field .input { margin-top: 4px; }
.fin-f-vendor, .fin-f-name, .fin-f-note { grid-column: 1 / -1; }
.fin-check-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fin-end-row { align-items: center; }
.fin-end { display: flex; align-items: center; gap: 6px; margin-right: auto; }
.fin-end .input { margin-top: 0; width: auto; }
.fin-fold > .card { margin-top: 4px; }
/* A cost's page (COMMAND-92): what it costs on top (its own amount beside it); its details card holds where it stands
   with a cancellation, its next payment in full and its form — no card in a card. */
.fin-pop-amt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-variant-numeric: tabular-nums; }
.record-field .fin-badges .tag { margin: 0 4px 2px 0; }
.fin-form.on-page { margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); border-color: var(--line); }
.fin-cancel-state p { margin: 0; }
.fin-cancel-state .actions { justify-content: flex-start; margin-top: 8px; }
/* The Opzeggen question, in a small dialog over the list or the cost's page: the cost and what it costs, the day it
   stops (today, or the end of the paid period), who cancels it, the yes. */
.card.modal.fin-cancel-modal { text-align: left; }
.fin-cancel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -8px -8px 4px 0; }
.fin-cancel-close { flex: none; }
.fin-cancel-modal h2 { overflow-wrap: anywhere; }
.fin-cancel-step .fin-pop-amt { margin-bottom: 12px; }
.fin-cancel-step h3 { margin: 0 0 4px; font-size: 1rem; }
.fin-cancel-day .input { width: auto; }
.fin-cancel-days { flex-wrap: wrap; margin-top: 8px; }
.fin-cancel-how { margin: 10px 0 0; }
/* COMMAND-180: what removing a Hetzner thing loses (the data on it; an address for good), a warning of its own; and the
   sites that point at an address — both wrap on a phone, however long a name or an address. */
.fin-cancel-lost { margin: 10px 0 0; overflow-wrap: anywhere; }
.fin-cancel-runs { margin: 6px 0 0; padding-left: 18px; }
.fin-cancel-runs li { overflow-wrap: anywhere; }
/* Opzeggen on a row: its own small button in its own column, beside the row's tap (never inside it). */
.lv-table td .fin-cancel { min-height: 32px; }
/* Exporteren per kwartaal (COMMAND-394): a quarter and company, how many and their sum, then the ZIP and the CSV. */
.inv-quarter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 10px 0; }
.inv-quarter .inv-export { margin: 0; }
.tag.fin-cancelled { background: var(--surface-2); font-weight: 700; }
/* What a message is about, in Gesprekken: a tag that opens the cost on Financiën. */
.tag.msg-about { border: 0; font: inherit; font-size: 0.72rem; cursor: pointer; background: var(--accent-soft); color: var(--accent); }

/* ---------- the Claude connector (COMMAND-8): the consent page, the box on Vaults ---------- */

.consent .card { margin-top: 16px; }
.consent-card p, .consent-may p { margin: 6px 0 0; }
.consent-who { font-size: 1.05rem; }
.consent-host { font-size: 1.15rem; color: var(--accent); }
.consent-list { margin: 6px 0 12px; padding-left: 20px; display: grid; gap: 6px; }
.consent-never { color: var(--muted); }
.consent-done { margin-top: 18px; color: var(--advice); font-weight: 600; }
/* Whose connection (COMMAND-156 step 9): the PO's own Claude, or an employee's. */
.consent-whose .consent-role { display: grid; gap: 2px; width: 100%; margin-top: 8px; padding: 10px 12px; text-align: left; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
.consent-whose .consent-role.on { border-color: var(--accent); background: var(--accent-soft); }
.consent-pick { margin: 12px 0 0; }

.conn-url {
  margin-top: 8px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.88rem;
  overflow-wrap: anywhere; user-select: all;
}
.conn-row { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 10px; }
.conn-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.conn-name { font-weight: 600; overflow-wrap: anywhere; }
.conn-row.ended .conn-name { color: var(--muted); text-decoration: line-through; }
.conn-calls { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.conn-call.failed { color: var(--danger); }
.conn-actions { justify-content: flex-start; margin-top: 8px; }
/* The connector on the Accounts tab (COMMAND-68): its switch as one small row on top, each connection in its
   account's box, the ones without an account in a box at the bottom. */
.card.conn-master-row { padding-top: 8px; padding-bottom: 8px; }
/* Whether an account is connected (COMMAND-70): a chip of its own on the account's card. */
.tag.conn-state { margin: 6px 0 0; font-weight: 650; }
.tag.conn-state.connected { background: var(--advice-soft); color: var(--advice); }
.tag.conn-state.not-connected { background: var(--warn-soft); color: var(--warn); }
.todo-recheck { margin-top: 6px; font-weight: 600; }
.conn-master-row .box-head { align-items: center; }
.conn-master-row > p.muted { margin: 4px 0 2px; }
.tag.via-claude { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.tag.fresh { background: var(--warn-soft); color: var(--warn); font-weight: 700; }

/* ---------- Meldingen: player reports and crashes (COMMAND-12) ---------- */

.inbox-chips { margin: 0 0 8px; }
.inbox-chips .seg { display: inline-flex; align-items: center; gap: 6px; }
.inbox-parts { margin: 0 0 12px; }
.inbox-parts .seg { flex: 1 1 0; min-height: 40px; }
.inbox-status { margin: 0 2px 10px; }
.inbox-status p { margin: 2px 0; }
/* The list is the shared List view (COMMAND-394): a report's title with its kind's icon (and a dot while it is new), a
   tap to its page. */
.inbox-icon { flex: none; display: inline-flex; margin-top: 1px; color: var(--muted); }
.inbox-icon svg { width: 20px; height: 20px; }
/* The kind (COMMAND-101): the icon at the start of the line, the word in the meta line and the filter chips. */
.type-idea { color: var(--type-idea); }
.type-bug { color: var(--type-bug); }
.type-feedback { color: var(--type-feedback); }
.type-map { color: var(--type-map); }
.type-crash { color: var(--type-crash); }
.type-alert { color: var(--type-alert); }
.type-other { color: var(--type-other); }
.inbox-type { font-weight: 600; }
.inbox-types { margin: -4px 0 12px; }
.inbox-types .seg { display: inline-flex; align-items: center; gap: 6px; }
.inbox-type-icon { flex: none; display: inline-flex; }
.inbox-type-icon svg { width: 18px; height: 18px; }
.inbox-types .seg.on .inbox-type-icon { color: inherit; }
.inbox-title, .crash-title { display: inline-flex; align-items: baseline; gap: 7px; overflow-wrap: anywhere; }
.inbox-title.is-new { font-weight: 750; }
.inbox-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); transform: translateY(-1px); }
.tag.env-live { background: var(--danger-soft); color: var(--danger); font-weight: 700; }
.tag.env-test { background: var(--accent-soft); color: var(--accent); }
.tag.picked { background: var(--advice-soft); color: var(--advice); font-weight: 700; }
.inbox-card { font-size: 0.85rem; white-space: nowrap; padding-top: 2px; }
.inbox-detail p { margin: 6px 0; }
.inbox-text { margin-top: 2px; overflow-wrap: anywhere; }
.inbox-actions { margin: 0; }
.inbox-more { display: block; margin: 0 auto 12px; }
.inbox-behaviour .tag { margin-left: 6px; }

/* ---------- Crashes (COMMAND-197): Meldingen's part Crashes and a crash's page ---------- */

.crashes-status { margin: -4px 0 12px; }
.crash-status.resolved { color: var(--advice); }
.crash-culprit { margin: 0 0 8px; font-weight: 600; overflow-wrap: anywhere; }
/* The stack: one line per frame, wrapped inside its card (never a page that scrolls sideways on a phone). */
.crash-frames { margin: 0; padding-left: 22px; font-size: 0.86rem; }
.crash-frame { margin: 3px 0; overflow-wrap: anywhere; }
.crash-frame code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.84rem; overflow-wrap: anywhere; word-break: break-word; }
.crash-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.crash-url { overflow-wrap: anywhere; }
.crash-grouping code { overflow-wrap: anywhere; }
.crash-event { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; }
.crash-link { font-weight: 600; }

/* ---------- Integraties (COMMAND-166): the outside services, the key each uses, Hetzner's servers — Integraties | Servers,
   each the shared List view, an integration's page with its key and facts (COMMAND-394) ---------- */

.int-account-name { font-weight: 600; overflow-wrap: anywhere; }
.tag.int-state { margin-left: 0; font-weight: 700; }
.tag.int-ok { background: var(--advice-soft); color: var(--advice); }
.tag.int-bad { background: var(--danger-soft); color: var(--danger); }
.tag.int-warn { background: var(--warn-soft); color: var(--warn); }
.int-key-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 6px 0; }
.int-key-name { font-weight: 600; overflow-wrap: anywhere; }
.int-key-row .int-link { margin-left: auto; }
.int-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0 8px; }
.int-picker .picker { flex: 1 1 260px; min-width: 0; }
.int-error { margin: 4px 0; overflow-wrap: anywhere; }
/* A server's name in the Servers list (and a project's related list): Beschermd and its conversation's mark beside it. */
.int-server-name { font-weight: 600; overflow-wrap: anywhere; }
.int-price { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tag.int-protected { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.tag.int-server-state { margin-left: 0; background: var(--warn-soft); color: var(--warn); }
.int-total { margin: 8px 4px 4px; font-weight: 600; }
/* An integration's facts on its page (COMMAND-176): one line per fact (its box, its last backup, what still uses it). */
.int-checking { font-style: italic; }
.int-key-env { font-weight: 600; }
.int-fact { margin: 4px 0; overflow-wrap: anywhere; }
.int-box-link { font-weight: 600; color: var(--accent); text-decoration: none; }
.int-box-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
@media (hover: hover) { .int-box-link:hover { text-decoration: underline; } }
.tag.int-backup-state { margin-left: 0; font-weight: 700; }
/* The Gmail card (COMMAND-178): who holds the daily task, a sentence in its tone; it wraps on a phone. */
.tag.int-daily-state { margin-left: 0; font-weight: 700; white-space: normal; max-width: 100%; }
/* A server's page. */
.int-role { margin: 6px 0 2px; font-weight: 600; }
.int-note { margin: 2px 0 6px; overflow-wrap: anywhere; }
.int-run-list { list-style: none; margin: 0 0 8px; padding: 0; }
.int-run { padding: 6px 0; overflow-wrap: anywhere; }
.int-run + .int-run { border-top: 1px solid var(--line); }
/* Open in Hetzner beside a server's name (COMMAND-195): a whole button that wraps under a long name on a phone, its
   label on one line. */
.int-open-hetzner { white-space: nowrap; }
/* What runs on a server (COMMAND-193): what stands out on top, the disks and memory as bars as wide as the card, then
   one group per project under each other on a phone (side by side on a wide screen, below). Long names wrap. */
.int-inv-source { margin: 2px 0 8px; }
.int-inv-advice { margin: 8px 0 12px; padding: 8px 12px; border-radius: 8px; background: var(--warn-soft); }
.int-inv-advice h3 { margin: 0 0 4px; font-size: 1em; }
.int-inv-advice-list { margin: 0; padding-left: 18px; }
.int-inv-advice-item { margin: 3px 0; overflow-wrap: anywhere; }
.int-inv-advice-item.int-bad { color: var(--danger); font-weight: 600; }
.int-inv-machine { display: grid; grid-template-columns: 1fr; gap: 8px 24px; margin: 8px 0 12px; }
.int-inv-disk, .int-inv-memory { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.int-inv-bar { display: block; height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.int-inv-bar-fill { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.int-inv-bar-fill.int-ok { background: var(--ok, var(--accent)); }
.int-inv-bar-fill.int-warn { background: var(--warn); }
.int-inv-bar-fill.int-bad { background: var(--danger); }
.int-inv-groups { display: grid; grid-template-columns: 1fr; gap: 12px; }
.int-inv-group { min-width: 0; }
.int-inv-group h3 { margin: 4px 0; font-size: 1em; }
.int-inv-list { list-style: none; margin: 0; padding: 0; }
.int-inv-item { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; min-width: 0; }
.int-inv-item + .int-inv-item { border-top: 1px solid var(--line); }
.int-inv-item-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; }
.int-inv-name { overflow-wrap: anywhere; }
.tag.int-inv-kind { margin-left: 0; }
.tag.int-inv-untracked { margin-left: 0; background: var(--warn-soft); color: var(--warn); font-weight: 700; }
.int-inv-facts, .int-inv-origin { overflow-wrap: anywhere; }

/* ---------- Skills (COMMAND-143): every skill the PCs run, marked Hardcoded or Company made ---------- */

.skills-tools { margin: 0 0 10px; }
.skills-tools .input { width: 100%; }
.skills-kinds { margin: 0 0 12px; }
.skills-kind { display: inline-flex; align-items: center; gap: 6px; }
/* A skill in the List view (COMMAND-394): its name, the first paragraph of its description (one line, an ellipsis when
   it does not fit), its marks. */
.skill-name { font-weight: 600; overflow-wrap: anywhere; }
.skill-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag.skill-kind { flex: none; margin-left: 0; font-weight: 700; white-space: nowrap; }
.tag.skill-kind-hardcoded { background: var(--accent-soft); color: var(--accent); }
.tag.skill-kind-company { background: var(--advice-soft); color: var(--advice); }
.skills-note { margin: 10px 2px 0; }
/* A skill's page: its description as written, the PCs it is on. */
.skill-description { white-space: pre-wrap; overflow-wrap: anywhere; margin: 6px 0; }
.skill-pc { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 6px 0; }
.skill-pc + .skill-pc { border-top: 1px solid var(--line); }
.tag.skill-other { margin-left: 0; background: var(--warn-soft); color: var(--warn); font-weight: 700; }
/* COMMAND-156: the marks beside the kind (switched off, may be switched off, changed lately), the company's switch, and
   a skill's changes with the old and the new lines side by side. */
.skill-line-tags { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.tag.skill-mark { margin-left: 0; white-space: nowrap; }
.tag.skill-off { background: var(--warn-soft); color: var(--warn); font-weight: 700; }
.tag.skill-optional { background: var(--surface-2); color: var(--muted); }
.tag.skill-recent, .tag.skill-asked { background: var(--accent-soft); color: var(--accent); }
.tag.skill-current { background: var(--surface-2); color: var(--text); }
.tag.skill-undone { background: var(--warn-soft); color: var(--warn); }
.skill-change-list { list-style: none; margin: 0; padding: 0; }
.skill-change { padding: 10px 0; }
.skill-change + .skill-change { border-top: 1px solid var(--line); }
.skill-change-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.skill-change-why { margin: 6px 0 2px; overflow-wrap: anywhere; }
.skill-change-asked { margin: 0 0 6px; }
.skill-diff {
  display: flex; flex-direction: column;
  margin: 6px 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.4;
}
.diff-row { display: grid; grid-template-columns: 1fr 1fr; }
.diff-row + .diff-row, .diff-gap { border-top: 1px solid var(--line); }
.diff-head { font-family: inherit; font-weight: 700; background: var(--surface-2); }
.diff-cell { display: flex; gap: 6px; min-width: 0; padding: 3px 6px; }
.diff-cell + .diff-cell { border-left: 1px solid var(--line); }
.diff-n { flex: none; min-width: 2.2em; text-align: right; color: var(--muted); user-select: none; }
.diff-text { flex: 1; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.diff-out { background: var(--warn-soft); }
.diff-in { background: var(--accent-soft); }
.diff-gap { padding: 3px 6px; text-align: center; background: var(--surface-2); }
/* COMMAND-171: the evaluation of a skill — its advice as a tag in the list and on the page, a filter on the advice, the
   box Evaluatie with the earlier ones folded away, and the thread under it (oldest first) with the reply box. */
.skills-advice { margin: 0 0 12px; }
.skills-advice-pick { display: inline-flex; align-items: center; gap: 6px; }
.tag.skill-advice { margin-left: 0; white-space: nowrap; font-weight: 700; }
.tag.skill-advice-keep { background: var(--advice-soft); color: var(--advice); }
.tag.skill-advice-remove { background: var(--danger-soft); color: var(--danger); }
.tag.skill-advice-archived { background: var(--surface-2); color: var(--muted); }
.skill-eval-fields dd { overflow-wrap: anywhere; }
.skill-eval-fields p { margin: 0; }
.skill-eval-advice { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.skill-eval-why, .skill-eval-used-for { white-space: pre-wrap; overflow-wrap: anywhere; }
.skill-eval-outcome { margin: 8px 0 0; font-weight: 650; }
.skill-eval-outcome-archived { color: var(--muted); }
.skill-eval-outcome-kept { color: var(--advice); }
.skill-eval-none { margin: 4px 0 8px; }
.skill-eval-earlier { margin-top: 10px; }
.skill-eval-earlier-list { list-style: none; margin: 6px 0 0; padding: 0; }
.skill-eval-earlier-item { padding: 8px 0; }
.skill-eval-earlier-item + .skill-eval-earlier-item { border-top: 1px solid var(--line); }
.skill-eval-earlier-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.skill-eval-earlier-item p { margin: 4px 0 0; overflow-wrap: anywhere; }
/* One Threads box everywhere (COMMAND-395, public/thread): a record's page (the right column on a wide screen, under
   the title on a phone), a docs page, a cost, a work card, and Mijn vragen's one thread. The list of the record's threads
   (an unread dot, the subject, the last message, where it stands, how long ago), Nieuwe thread, the open thread, and
   "Gearchiveerd (n)" at the bottom. A phone stacks the list and the open thread; a box with room (600px and more) puts
   them side by side. COMMAND-220: in a thread the reply box and its buttons on top, then the history in a box of its
   own, newest first, every word a bubble; a long one scrolls inside it, never past about half the screen. */
.thread-box { container-type: inline-size; }
.thread-box-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.thread-box-head h2 { margin: 0; font-size: 1rem; }
.thread-new { min-height: 40px; }
.thread-list { list-style: none; margin: 0 0 12px; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.thread-list > li + li { border-top: 1px solid var(--line); }
.thread-row {
  display: flex; align-items: flex-start; gap: 8px; width: 100%; min-height: 48px; padding: 8px 10px;
  border: 0; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.thread-row:hover { background: var(--surface-2); }
.thread-row.on, .thread-row.on:hover { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.thread-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.thread-row-subject { overflow-wrap: anywhere; }
.thread-row.unread .thread-row-subject { font-weight: 750; }
.thread-row-last { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-row-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.thread-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.thread-subject { margin: 0; font-size: 0.98rem; overflow-wrap: anywhere; }
.thread-panel-marks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.thread-archive { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.thread-archive svg { width: 16px; height: 16px; flex: none; }
.thread-panel .thread-status { margin: 8px 0 0; }
.thread-panel .thread-status.claimed { color: var(--accent); }
.thread-panel .thread-status.waiting-hint { color: var(--warn); }
.thread-reply { margin-top: 10px; }
.thread-reply textarea, .thread-subject-input { width: 100%; }
.thread-subject-input { margin-bottom: 6px; }
.thread-reply .actions { justify-content: flex-end; }
/* COMMAND-223, reopened: under a conversation's reply box, with an accent bar like the chat panel's line, the way to a new
   conversation for a new question typed there. */
.reply-elsewhere { margin: 8px 0 0; padding: 2px 0 2px 8px; border-left: 3px solid var(--accent); }
.reply-to-chat { padding: 0; font-size: inherit; font-weight: 600; }
.reply.pending { opacity: .7; }
.thread-none, .thread-box-loading, .thread-loading { margin: 0 0 8px; }
.thread-new-cancel { margin-top: 6px; }
.thread-archived { margin-top: 10px; }
.thread-archived-toggle { min-height: 40px; padding: 0; }
.thread-list-archived { margin-top: 6px; }
.thread-history {
  margin-top: 12px; padding: 0 10px 10px;
  border: 1px solid var(--line); border-radius: 12px;
  max-height: min(30rem, 55vh);
  max-height: min(30rem, 55dvh);
  overflow-y: auto; overscroll-behavior: contain;
}
.thread-history:empty { display: none; }
@container (min-width: 600px) {
  .thread-box-body.with-list { display: grid; grid-template-columns: minmax(200px, 0.8fr) minmax(0, 1.4fr); column-gap: 14px; align-items: start; }
  .thread-box-body.with-list > .thread-list { margin-bottom: 0; }
}
/* A box that scrolls inside the page (COMMAND-220: "ook scrollbar stijlen!!"): a thin scrollbar in the app's own
   colours, light and dark — Firefox and today's Chrome read the first rule, older Chrome and Safari the others. */
.scroll-box { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent; }
.scroll-box::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll-box::-webkit-scrollbar-track { background: transparent; }
.scroll-box::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 45%, transparent); background-clip: padding-box; border: 2px solid transparent; border-radius: 8px; }
.scroll-box::-webkit-scrollbar-thumb:hover { background-color: var(--muted); }
.skill-ask-evaluation { margin-top: 4px; }

/* ---------- Regels (COMMAND-170): the rulebook's sections and the roles, each part marked shared or own ---------- */
.rules-results .card + .card { margin-top: 12px; }
.rules-results h2 { margin: 0 0 6px; font-size: 1rem; }
.tag.rule-layer { margin-left: 0; font-weight: 700; white-space: nowrap; }
.tag.rule-layer-core { background: var(--accent-soft); color: var(--accent); }
.tag.rule-layer-own { background: var(--advice-soft); color: var(--advice); }
.tag.rule-layer-builtin { background: var(--surface-2); color: var(--muted); }
/* COMMAND-192: a project's own rules, a third soft colour (purple), readable in light and dark. */
.tag.rule-layer-project { background: color-mix(in srgb, var(--type-feedback) 14%, var(--surface)); color: var(--type-feedback); }
.rules-project { border-top: 1px solid var(--line); padding: 6px 0; }
.rules-project:first-of-type { border-top: 0; }
.rules-project > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; cursor: pointer; padding: 6px 0; }
.rules-projects-none { margin: 10px 0 0; }
.rule-counts { white-space: nowrap; }
.rule-snippet { overflow-wrap: anywhere; }
.rule-part-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0 0 4px; font-size: 1rem; }
.rule-behind { margin: 0 0 12px; }
.rule-items { list-style: none; margin: 0; padding: 0; }
.rule-item { padding: 8px 0; }
.rule-item + .rule-item { border-top: 1px solid var(--line); }
.rule-item-head { display: flex; align-items: baseline; gap: 6px; margin: 0 0 2px; }
.rule-item .md > :first-child { margin-top: 0; }
.rule-item .md > :last-child { margin-bottom: 0; }
.rule-layers { display: inline-flex; flex-wrap: wrap; gap: 4px; }
/* COMMAND-187: the PO's conversation on a page, in the page's side panel (a phone: right under the title; a wide
   screen: the column on the right, beside the rule text), and its mark in the list: Antwoord where an answer waits. */
.rule-thread h2 { margin: 0 0 6px; font-size: 1rem; }
.tag.rule-thread-mark { margin-left: 0; font-weight: 700; white-space: nowrap; }
.tag.rule-thread-answer { background: var(--warn-soft); color: var(--warn); }
.tag.rule-thread-open { background: var(--surface-2); color: var(--muted); }
.rule-gone p { margin: 0; }
/* COMMAND-194: the PO's conversation on a record — a server, a project, a PC, an account (under its limits), a docs
   page — in the record page's side panel (a phone: right under the title; a wide screen: the column on the right); a
   docs page's under the page, and beside it on a wide screen. Its mark in the lists, and Antwoorden op pagina's in Gesprekken. */
.record-thread h2 { margin: 0 0 6px; font-size: 1rem; }
.record-thread-gone p { margin: 0 0 6px; }
.tag.thread-mark { margin-left: 6px; font-weight: 700; white-space: nowrap; }
.tag.thread-mark-answer { background: var(--warn-soft); color: var(--warn); }
.tag.thread-mark-open { background: var(--surface-2); color: var(--muted); }
.threads-waiting h2 { margin: 0 0 4px; font-size: 1rem; }
.threads-waiting-list { list-style: none; margin: 8px 0 0; padding: 0; }
.thread-waiting { display: flex; flex-direction: column; gap: 2px; min-height: 44px; padding: 10px 0; border-top: 1px solid var(--line); color: var(--text); text-decoration: none; }
.threads-waiting-list li:first-child > .thread-waiting { border-top: 0; }
.thread-waiting-main { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.thread-waiting-sub { overflow-wrap: anywhere; }
@media (min-width: 1500px) {
  .docs-main > .docs-content:has(> .docs-page-split) { max-width: calc(var(--narrow) + 340px + var(--gutter)); }
  .docs-page-split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; column-gap: var(--gutter); align-items: start; }
  .docs-page-split > .record-thread { position: sticky; top: calc(var(--topbar-h) + 12px); }
  /* COMMAND-220: the column stays within the screen — Reageer on top, the history as tall as its words but never
     more than what is left of the screen (then it scrolls); only a reply box on a very low screen lets the column
     itself scroll. */
  .docs-page-split > .record-thread {
    display: flex; flex-direction: column;
    max-height: calc(100vh - var(--topbar-h) - 24px);
    max-height: calc(100dvh - var(--topbar-h) - 24px);
    overflow-y: auto; overscroll-behavior: contain;
  }
  .docs-page-split > .record-thread > * { flex: none; }
  /* The open thread's history takes what is left of the column (COMMAND-395: the box, its open thread, its history). */
  .docs-page-split > .record-thread > .thread-box-body,
  .docs-page-split > .record-thread > .thread-box-body > .thread-panel { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .docs-page-split > .record-thread > .thread-box-body > *,
  .docs-page-split > .record-thread > .thread-box-body > .thread-panel > * { flex: none; }
  .docs-page-split > .record-thread > .thread-box-body > .thread-panel > .thread-history { flex: 0 1 auto; min-height: 0; max-height: none; }
}

/* ---------- Bestanden (COMMAND-142): every file, where it is used, and Bestand in every text box ---------- */

.files-tools { margin: 0 0 10px; }
.files-tools .input { width: 100%; }
.files-chips { margin: 0 0 8px; }
.files-chips .seg { display: inline-flex; align-items: center; gap: 6px; }
.files-area { margin-bottom: 12px; }
/* A file in the List view (COMMAND-394): a small picture (or its kind's icon) before its name, a lock or its "delete on"
   day after it; its projects as chips. A picture loads only as it comes into view; nothing plays from the list. */
.file-row-name { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.file-thumb { flex: none; width: 48px; height: 48px; border-radius: 8px; object-fit: cover; border: 1px solid var(--line); background: var(--surface-2); }
.file-thumb-icon { display: grid; place-items: center; color: var(--accent); }
.file-thumb-icon svg { width: 24px; height: 24px; }
.file-row-name .file-thumb { width: 36px; height: 36px; }
.file-row-name .file-thumb-icon svg { width: 20px; height: 20px; }
.file-name { font-weight: 600; overflow-wrap: anywhere; }
.file-row-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.tag.file-project { margin-left: 0; white-space: nowrap; }
.tag.file-lock { margin-left: 0; background: var(--warn-soft); color: var(--warn); font-weight: 700; }
.file-lock-text { color: var(--warn); font-weight: 650; }
/* A file's page: the file itself, then where it is used (a gone place greyed and marked). */
.file-preview .file-media { margin: 0; }
.file-preview img { display: block; max-width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); }
.file-use-list { list-style: none; margin: 0; padding: 0; }
.file-use { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 8px 0; }
.file-use + .file-use { border-top: 1px solid var(--line); }
.file-use.gone .file-use-link { color: var(--muted); }
.file-use-link { overflow-wrap: anywhere; text-align: left; }
.tag.file-use-deleted, .tag.file-use-archived { margin-left: 0; background: var(--surface-2); color: var(--muted); font-weight: 700; }
/* The files that came with a text: photos as before (.gallery), any other file below them as its media. */
.media-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 2px; }
.file-media { margin: 0; min-width: 0; }
.file-media-photo img { display: block; max-width: 220px; max-height: 160px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.file-video { display: block; width: 100%; max-height: 60vh; border-radius: 10px; border: 1px solid var(--line); background: #000; }
.file-media-bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 6px; font-size: 0.85rem; }
.file-media-name { font-weight: 600; overflow-wrap: anywhere; }
.file-media-audio { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.file-media-file { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.file-media-file .md-file-link { flex: 1; min-width: 0; }
.file-details { flex: none; font-size: 0.85rem; }
.md-media .file-details { margin-top: 6px; }
/* A file that went (COMMAND-138): where it was shown, its name and "Verwijderd op <datum>" in a quiet box. */
.file-gone { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 10px; background: var(--surface-2); color: var(--muted); font-size: 0.9rem; max-width: 100%; }
.file-gone-name { font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.gallery .file-gone { align-self: center; }
.md-link-gone { color: var(--muted); }
.md-link-gone .file-gone { padding: 2px 8px; font-size: 0.8rem; }
/* A file's Instellingen (COMMAND-138): its day, the checkbox with days or a day, Opslaan and Verwijder nu. */
.file-settings h2 { display: flex; align-items: center; gap: 6px; }
.file-settings-icon { display: inline-grid; place-items: center; width: 20px; height: 20px; color: var(--accent); }
.file-settings-icon svg { width: 20px; height: 20px; }
.file-delete-state { margin: 0 0 8px; font-weight: 600; }
.file-delete-rule { font-weight: 400; }
.file-delete-label, .file-delete-on { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 0; }
.file-delete-days { width: 5.5em; min-height: 36px; margin: 0; }
.file-delete-date { width: auto; min-height: 36px; margin: 0; }
.file-settings-actions { margin-top: 12px; }
.file-in-use { margin-top: 12px; }
.file-in-use .file-use-list { margin: 6px 0; }
.tag.file-row-delete { margin-left: 0; background: var(--danger-soft); color: var(--danger); white-space: nowrap; }
/* Regels: one row per kind of file. */
.files-tools { display: flex; gap: 8px; align-items: center; }
.files-tools .files-search { flex: 1; min-width: 0; }
.file-rule-list { list-style: none; margin: 0; padding: 0; }
.file-rule { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; }
.file-rule + .file-rule { border-top: 1px solid var(--line); }
.file-rule-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.file-rule-days { width: 5.5em; min-height: 36px; margin: 0; }
.file-rule-ask { margin-top: 6px; }
/* A file waiting in a text box: its icon and name, with × (a photo keeps its thumbnail). */
.thumb.thumb-file { width: auto; max-width: 220px; height: 44px; padding: 0 34px 0 10px; display: flex; align-items: center; gap: 6px; place-items: initial; }
.thumb-file-icon { flex: none; display: grid; place-items: center; width: 20px; height: 20px; color: var(--accent); }
.thumb-file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8rem; color: var(--text); }
/* The sheet Bestand opens: Nieuw uploaden or Uit Bestanden (a pick from the shared files). Over the page, outside it. */
.file-sheet-back {
  position: fixed; inset: 0; z-index: 20;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 16px; background: rgba(0, 0, 0, 0.45);
}
.file-sheet {
  border-radius: 14px;
  background: var(--surface); color: var(--text); box-shadow: 0 8px 28px rgb(0 0 0 / 25%);
}
.file-sheet h2 { margin: 0; font-size: 1.05rem; }
.file-sheet-actions { flex-wrap: wrap; }
.file-pick-search { width: 100%; margin: 4px 0 8px; }
.file-pick-list { list-style: none; margin: 0; padding: 0; }
.file-pick-list li + li { border-top: 1px solid var(--line); }
.file-pick {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 52px; padding: 6px 4px; border: 0; border-radius: 8px;
  background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
@media (hover: hover) { .file-pick:hover { background: var(--surface-2); } }
.file-pick-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
@media (min-width: 900px) { .file-sheet-back { align-items: center; } }

/* ---------- Documentatie: the spaces (COMMAND-9), laid out like Confluence (COMMAND-85) ---------- */
/* On a phone, stacked: the search over every space, the space switcher (the space on screen;
   a tap lists every space per company), the page tree in a panel that folds away above a
   page, then the content — a space's home, or a page with its breadcrumbs. What a search
   found takes the content's place (a line each, with its space's coloured pill). A page's
   Markdown (markdown.js). The two columns of a wide screen are in the layer at the end.
   Nothing is fixed to the bottom: the chat button keeps bottom left (Design rule 6). */
.docs-side { margin: 0 0 12px; }
.docs-search { margin: 0 0 10px; }
.docs-search .input { width: 100%; }
.docs-results[hidden],
.docs-content[hidden] { display: none; }
.docs-switch { margin: 0 0 10px; }
.docs-switch-btn {
  width: 100%; min-height: 56px;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--text);
  font: inherit; text-align: left; cursor: pointer;
}
.docs-switch-btn:focus-visible, .docs-tree-toggle:focus-visible, .docs-switch-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.docs-switch-btn > svg, .docs-tree-toggle > svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; color: var(--muted); transition: transform .15s; }
.docs-switch-btn.open > svg, .docs-tree-toggle.open > svg { transform: rotate(180deg); }
.docs-mark {
  flex: none; width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--proj-soft, var(--surface-2)); color: var(--proj, var(--text));
  font-weight: 800; font-size: 1rem;
}
.docs-switch-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.docs-switch-name { font-weight: 700; overflow-wrap: anywhere; }
.docs-switch-sub { overflow-wrap: anywhere; }
.docs-switch-list { margin-top: 6px; padding: 4px 6px 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.docs-switch-company-name { margin: 8px 6px 2px; font-size: 0.72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.docs-switch-list ul { list-style: none; margin: 0; padding: 0; }
.docs-switch-item {
  display: flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 6px 8px; border-radius: 8px;
  color: var(--text); text-decoration: none;
}
.docs-switch-item.on { background: var(--accent-soft); }
@media (hover: hover) { .docs-switch-item:not(.on):hover { background: var(--surface-2); } }
.docs-tree-toggle {
  width: 100%; min-height: 44px;
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--text);
  font: inherit; font-weight: 650; text-align: left; cursor: pointer;
}
.docs-tree-title { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.docs-tree { margin-top: 6px; }
.docs-tree[hidden] { display: none; }
.docs-lines { list-style: none; margin: 0; padding: 0; }
.docs-lines li + li { border-top: 1px solid var(--line); }
.docs-line {
  display: flex; flex-direction: column; gap: 4px;
  min-height: 44px; padding: 10px 4px;
  border-radius: 8px;
  color: var(--text); text-decoration: none;
}
.docs-line:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (hover: hover) { .docs-line:hover { background: var(--surface-2); } }
.docs-line-title { font-weight: 600; overflow-wrap: anywhere; }
.docs-line-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.docs-line-when { min-width: 0; overflow-wrap: anywhere; }
.docs-line-meta .proj-pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.docs-result-snippet { color: var(--muted); overflow-wrap: anywhere; }
.docs-result-snippet b { color: var(--text); font-weight: 700; }
.space-sub { margin-top: -2px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px; margin: 0 2px 10px; color: var(--muted); }
.crumb { color: var(--accent); text-decoration: none; }
.crumb.here { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.crumb-sep { color: var(--muted); }
.space-head h2 { margin-bottom: 2px; }
.space-kicker { margin: 0 0 2px; font-size: 0.72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.space-count { margin: 8px 0 0; }
.space-desc { margin: 8px 0 0; }
.tree-card { padding: 8px 10px; }
.tree { list-style: none; margin: 0; padding: 0 0 0 18px; }
.tree.tree-top { padding-left: 0; }
.tree-row { display: flex; align-items: center; gap: 4px; min-height: 40px; border-top: 1px solid var(--line); }
.tree-top > .tree-item:first-child > .tree-row { border-top: 0; }
.tree-fold {
  flex: none; width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: 8px;
}
.tree-fold svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; transition: transform .15s; }
.tree-fold.open svg { transform: rotate(90deg); }
.tree-fold.none { visibility: hidden; }
.tree-link { flex: 1; min-width: 0; padding: 6px 0; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
/* The page on screen, in the tree. */
.tree-row.on { background: var(--accent-soft); border-radius: 8px; }
.tree-link.on { color: var(--accent); font-weight: 700; }
.code-tag { flex: none; }
.md-page { padding: 16px; }
.page-title { font-size: 1.3rem; margin: 0 0 4px; overflow-wrap: anywhere; }
.page-meta { margin: 0 0 12px; }
.md-toc { margin: 4px 0 12px; }
.md-toc ul { margin: 4px 0 0; padding-left: 18px; }
.md { line-height: 1.55; overflow-wrap: anywhere; }
.md > * { margin: 0 0 12px; }
.md > *:last-child { margin-bottom: 0; }
.md p { margin: 0 0 10px; }
.md li > p { margin: 0 0 4px; }
.md-h { line-height: 1.3; margin: 20px 0 8px; scroll-margin-top: 120px; }
.md-h1 { font-size: 1.2rem; }
.md-h2 { font-size: 1.1rem; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.md-h3 { font-size: 1rem; }
.md-h4 { font-size: 0.95rem; color: var(--muted); }
.md > .md-h:first-child { margin-top: 0; }
.md-link { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.md-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.86em; background: var(--surface-2); border-radius: 6px; padding: 1px 5px; }
.md-list { padding-left: 22px; }
.md-list > li { margin: 2px 0; }
.md-task { list-style: none; position: relative; }
.md-tick {
  position: absolute; left: -22px; top: 4px;
  width: 16px; height: 16px; border-radius: 4px;
  border: 1.5px solid var(--muted);
  display: grid; place-items: center; font-size: 11px; line-height: 1;
}
.md-tick.done { background: var(--advice); border-color: var(--advice); color: #fff; }
.md-quote { margin: 0 0 12px; padding: 4px 0 4px 12px; border-left: 3px solid var(--line); color: var(--muted); }
.md-hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
.md-img { display: block; max-width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); }
.md-img-off { display: inline-block; padding: 2px 8px; border-radius: 8px; background: var(--surface-2); color: var(--muted); font-size: 0.85rem; }
/* Files inside a page (COMMAND-141): in the place they are written, never wider than the text. A picture enlarges on
   a tap; a video plays in place; a sound has the clip button (COMMAND-140); any other file is a download row. */
.md-media { margin: 12px 0; min-width: 0; }
.md-zoom { cursor: zoom-in; }
.md-caption { margin-top: 6px; font-size: 0.85rem; color: var(--muted); overflow-wrap: anywhere; }
.md-video-el { display: block; width: 100%; max-height: 70vh; border-radius: 10px; border: 1px solid var(--line); background: #000; }
.md-audio, .md-file-link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.md-file-link { color: var(--text); text-decoration: none; }
.md-file-link:hover strong, .md-file-link:focus-visible strong { text-decoration: underline; }
.md-file-icon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; color: var(--accent); }
.md-media-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.md-lightbox {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 16px; background: rgba(0, 0, 0, 0.9);
}
.md-lightbox-img { max-width: 100%; max-height: calc(100% - 64px); object-fit: contain; border-radius: 8px; touch-action: pinch-zoom; }
.md-lightbox-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
/* The PO's page editor (COMMAND-141): the title, the text, Bestand toevoegen, and the page as it will look under it. */
.docs-edit-field { display: flex; flex-direction: column; gap: 4px; }
.docs-edit-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0 8px; }
.docs-edit-text { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85rem; line-height: 1.5; }
.docs-edit-error { margin: 8px 0 0; }
.docs-preview { margin-top: 18px; padding-top: 12px; border-top: 1px dashed var(--line); }
.docs-preview > h3 { margin: 0 0 8px; font-weight: 600; }
.md-pre { border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); overflow: hidden; }
.md-pre-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--line); }
.md-pre .copy-block.md-pre-body { margin: 0; border: 0; border-radius: 0; background: transparent; }
.md-pre pre { margin: 0; padding: 10px 44px 10px 12px; overflow-x: auto; }
.md-pre code, .md-plain { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8rem; line-height: 1.5; }
.md-plain { white-space: pre-wrap; overflow-wrap: anywhere; }
/* A wide table scrolls sideways inside its own box: the page itself never does. */
.md-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 10px; }
.md-table { border-collapse: collapse; min-width: 100%; font-size: 0.88rem; }
.md-table th, .md-table td { padding: 6px 10px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: normal; }
.md-table thead th { border-top: 0; background: var(--surface-2); font-weight: 650; white-space: nowrap; }
.md-table .al-right { text-align: right; }
.md-table .al-center { text-align: center; }
.page-children { margin-top: 18px; padding-top: 10px; border-top: 1px solid var(--line); }
.page-children h3 { font-size: 0.95rem; margin: 0 0 6px; }
.page-children ul { margin: 0; padding-left: 20px; }
.page-actions { margin-top: 18px; }
.version-list { list-style: none; margin: 0; padding: 0; }
.version-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 10px 2px; border-top: 1px solid var(--line); color: var(--text); text-decoration: none; }
.version-list li:first-child .version-row { border-top: 0; }
.version-note { flex-basis: 100%; }
.old-note { margin: 0 0 12px; }

/* ---------- Borden: every project's board (COMMAND-7) ---------- */
/* Phone first: every board as a row of the List view with its lanes (COMMAND-394); a board as its lanes in one row
   that scrolls sideways (like the tab bar), a search, label chips and a list of cards (Kanban) or the List view of its
   cards (Lijst); a card as a record page. A lane's dot gets its colour from app.js as a style property. */

.lane-dot { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--line); }

/* Every board: its name and its lanes in a row of the List view. */
.work-board-name { overflow-wrap: anywhere; }
.work-board-lanes { display: flex; flex-wrap: wrap; gap: 6px; }
.lane-count { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; font-size: 0.86rem; cursor: pointer; }
.lane-count b { font-variant-numeric: tabular-nums; }
.lane-count.zero { color: var(--muted); }
.work-board-name .tag { margin-left: 6px; }

/* A board. */
.lane-bar { display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -16px 10px; padding: 2px 16px; }
.lane-bar::-webkit-scrollbar { display: none; }
.lane-bar .seg, .work-move-lanes .seg { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.work-tools { display: flex; gap: 8px; align-items: center; margin: 0 0 8px; }
.work-tools .input { flex: 1; min-width: 0; margin: 0; }
.work-tools .work-new { flex: none; min-height: 44px; }
.work-labels { margin: 0 0 10px; }
.seg.label-chip { min-height: 32px; padding: 0 10px; font-size: 0.8rem; }
.work-search-note, .work-archived { margin: 0 2px 10px; }
.work-new-card h2, .work-panel h2 { margin-bottom: 4px; }
.work-new-card .field .input { margin-top: 4px; }

/* The cards of a lane, one row each: number, title, labels, sub-cards. */
.work-list { list-style: none; margin: 0 0 12px; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.work-list li + li { border-top: 1px solid var(--line); }
.work-row { display: grid; gap: 3px; padding: 11px 12px; color: var(--text); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.work-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius); }
@media (hover: hover) { .work-row:hover { background: var(--surface-2); } }
.work-row.active { background: var(--accent-soft); }
.work-row-head { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.work-row-head .card-id { color: var(--accent); font-size: 0.9rem; }
.work-row-head .tag { margin-left: 0; }
.work-row-age { margin-left: auto; white-space: nowrap; }
.work-row-title { font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.work-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
/* Which PC works on a card (COMMAND-231): its own line under the title; it wraps on a phone. */
.work-row-pc { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; min-width: 0; }
.work-row-pc .work-pc-name { font-weight: 600; overflow-wrap: anywhere; }
.work-row-pc .chip { align-self: center; }
.label-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.label-tag { display: inline-block; padding: 1px 7px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); font-size: 0.72rem; font-weight: 600; line-height: 1.5; }
.label-tag.more { background: var(--surface-2); color: var(--muted); }
.work-more { display: block; margin: 0 auto 12px; }

/* Epics and Eerst dit (COMMAND-237): the open Eerst dit list on top of a board, the board's epics in a fold, a chip on
   a row. Built from the board's own parts (fold, card, seg, tag, label-tag, btn). */
.tag.work-first-tag { margin-left: 0; background: var(--warn-soft); color: var(--warn); font-weight: 700; }
.label-tag.work-epic-tag { background: var(--surface-2); color: var(--text); }
.work-first-banner { margin: 0 0 10px; }
.work-first-banner p { margin: 0 0 4px; }
.work-first-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; color: var(--text); }
.work-first-list .card-id { color: var(--accent); }
.work-epics { margin: 0 0 10px; }
.work-epics > summary { display: flex; align-items: center; gap: 8px; padding: 10px 2px; }
.work-epics > p { margin: 0 2px 8px; }
.work-epic-list { list-style: none; margin: 0 0 10px; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.work-epic-list > li + li { border-top: 1px solid var(--line); }
.work-epic-row { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 8px 12px; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.work-epic-row.on { background: var(--accent-soft); }
.work-epic-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius); }
.work-epic-prio { flex: none; display: inline-grid; place-items: center; min-width: 26px; height: 26px; border-radius: 13px; background: var(--surface-2); font-weight: 700; font-variant-numeric: tabular-nums; }
.work-epic-name { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.work-epic-count { flex: none; white-space: nowrap; }
.work-epic-panel { margin: 0 10px 10px; box-shadow: none; }
.work-epic-panel h3 { margin: 12px 0 4px; font-size: 0.9rem; }
.work-epic-edit, .work-epic-add, .work-epic-new { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.work-epic-edit .field { flex: 1; min-width: 160px; margin: 0; }
.work-epic-add .input, .work-epic-new .input { flex: 1; min-width: 160px; margin: 0; }
.work-epic-prio-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; }
.work-epic-prio-row > span { flex: 1; min-width: 120px; }
.work-epic-first { margin: 10px 0 0; }
.work-epic-first p { margin: 4px 0 0; }
.work-epic-cards { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
.work-epic-cards li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.work-epic-cards .card-id { color: var(--accent); }
.work-epic-card-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.work-epic-cards .tag { margin-left: 0; }
.work-epic-pick { flex-wrap: wrap; }
/* A "not before" date (COMMAND-260): the chip on a card that waits for its day, and the date picker in its panel. */
.tag.work-not-before-tag { margin-left: 0; background: var(--surface-2); color: var(--text); font-weight: 600; }
.work-not-before-pick { margin: 0 0 12px; }
.work-not-before-pick .input { width: 100%; max-width: 280px; }
/* A parked card (COMMAND-296): its chip, and the Park sheet's two choices and card number field. */
.tag.work-parked-tag { margin-left: 0; background: var(--surface-2); color: var(--text); font-weight: 600; }
.work-park-modes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.work-park-on { margin: 0 0 12px; }
.work-park-on .input { width: 100%; max-width: 280px; }

/* A card (a record page). The lane beside it only on a wide screen (the layer at the end). */
.work-side { display: none; }
.work-kicker { color: inherit; }
.work-lane { display: inline-flex; align-items: center; gap: 6px; }
.work-panel .input { margin-top: 6px; }
.work-move-lanes { margin: 4px 0 0; }
.work-move-lanes .seg.on { opacity: 1; }
.work-move-lanes .seg.picked { border-color: var(--danger); color: var(--danger); }
.work-reject { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
/* A board's archive (COMMAND-196): a quiet button at the end of the lane row; on an archived card, the note with
   Terugzetten on top; Archiveren's reasons and the other card's number. */
.lane-bar .seg.lane-archive:not(.on) { background: transparent; color: var(--muted); border-style: dashed; }
.work-archive-note { margin: 0 0 10px; }
.work-archive-note p { margin: 0 0 6px; }
.work-archive-note .actions { margin: 0; }
.work-archive-reasons { margin: 4px 0 0; }
.work-archive-by { display: block; margin-top: 10px; }
.work-archive-by .input { width: 100%; }
.tag.work-archived-tag { color: var(--muted); }
.work-reject h3 { margin: 0 0 2px; font-size: 0.9rem; }
a.related-row, a.btn { text-decoration: none; }
.work-history .fold { margin: 0; }
.work-events { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 6px; }
.work-event-reason { color: var(--muted); white-space: pre-wrap; }

/* Stored text drawn by richtext.js (a card's description, its comments): our own elements only. */
.rt { overflow-wrap: anywhere; }
.rt > :first-child { margin-top: 0; }
.rt > :last-child { margin-bottom: 0; }
.rt p { margin: 0 0 10px; line-height: 1.5; }
.rt h1, .rt h2, .rt h3, .rt h4 { font-size: 1rem; margin: 16px 0 6px; }
.rt h1 { font-size: 1.15rem; }
.rt h2 { font-size: 1.08rem; }
.rt ul, .rt ol { margin: 0 0 10px; padding-left: 22px; }
.rt li { margin: 3px 0; }
.rt li > p { margin: 0; }
.rt blockquote { margin: 0 0 10px; padding: 2px 12px; border-left: 3px solid var(--line); color: var(--muted); }
.rt code, .rt kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.88em; padding: 1px 5px; border-radius: 6px; background: var(--surface-2); }
.rt pre { margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); overflow-x: auto; white-space: pre; overflow-wrap: normal; }
.rt pre code { padding: 0; background: none; }
.rt hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }
.rt-table { overflow-x: auto; margin: 0 0 10px; }
.rt table { border-collapse: collapse; font-size: 0.9rem; }
.rt th, .rt td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; overflow-wrap: normal; }
.rt th { background: var(--surface-2); }
.rt td > p:last-child, .rt th > p:last-child { margin: 0; }
.rt-img { display: inline-block; max-width: 100%; margin: 4px 0; }
.rt-img img { display: block; max-width: 100%; max-height: 420px; border-radius: 10px; border: 1px solid var(--line); }
.rt-picture { font-weight: 600; }
.rt-no-picture { display: inline-block; padding: 2px 8px; border-radius: 8px; background: var(--surface-2); color: var(--muted); font-size: 0.85rem; }
.rt-task { list-style: none; margin-left: -20px; display: flex; gap: 6px; }
.rt-task.done { color: var(--muted); }
.rt-tick { flex: none; }
.rt-task > div { flex: 1; min-width: 0; }

/* Project verwijderen (COMMAND-336): the red button at the bottom of a project's page, the two choices, the confirm screen. */
.project-remove .project-remove-mode { display: flex; align-items: baseline; gap: 12px; margin: 8px 0; flex-wrap: wrap; }
.project-remove .project-remove-mode .btn { min-width: 9em; }
.project-remove .project-remove-mode p { margin: 0; flex: 1 1 14em; }
.project-remove-list { margin: 8px 0; }
.project-remove-list ul { margin: 4px 0 0; padding-left: 1.2em; }
.project-remove-confirm h2 { color: var(--danger); }

/* ---------- a wide screen: a PC, a laptop (COMMAND-28) ---------- */
/* ---------- Financiën → Facturen: every invoice per platform (COMMAND-30) ---------- */

.fin-switch { margin: 0 0 12px; }
.fin-switch .seg { flex: 1 1 0; min-height: 42px; }
.fin-inv { display: inline-flex; align-items: center; gap: 6px; }
.inv-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); flex: none; }
.inv-counts { margin: 8px 0 0; font-weight: 700; }
/* COMMAND-175: the daily Gmail run stopped (48 hours): red on top of Facturen. */
.inv-import-stale { margin: 8px 0 0; padding: 6px 10px; border-radius: 10px; background: var(--danger-soft); color: var(--danger); font-size: 0.86rem; font-weight: 650; }
.inv-add.disabled { opacity: .6; pointer-events: none; }
.inv-missing-line { padding: 10px 0; }
.inv-missing-text { margin: 0 0 6px; }
.inv-export { margin-top: 10px; }
.inv-mailbox { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; overflow-wrap: anywhere; }
.inv-imports li { padding: 6px 0; }
.inv-platform { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; }
.inv-platform.off .fin-main { opacity: .55; }
.inv-platform-form { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 4px; }
.fin-f-inote { grid-column: 1 / -1; }
/* The file: a photo inline; a PDF behind "Bestand openen" (a phone's browser shows a PDF best on its own). */
.inv-file { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 10px 0 4px; }
.inv-img { max-width: 100%; max-height: 60vh; border-radius: 10px; border: 1px solid var(--line); }
.inv-preview { display: none; }

/* What a PC may reach (COMMAND-157 step 3): its kind and its companies or projects as segment buttons, a little air
   between the rows. */
.pc-access .seg-group { margin: 8px 0; }
.pc-access .pc-access-list .seg { min-height: 34px; font-size: 0.84rem; }

/* Everything above is the phone layout and stays exactly as it is. From 1100px wide
   this layer, and only this layer, lays the same cards out side by side, up to a
   comfortable maximum width (PO, 2026-09-29: "op een PC voelt het zo smal aan...
   maak gebruik van de ruimte die je hebt ... Dus allebei ondersteunen aub!").
   The navigation stays on top; nothing the phone shows is hidden here.
   app.js gives the page a class per tab (view-todos, ...; on Vragen q-part-to-me,
   q-part-approvals, q-part-mine) and draws the few wrappers this needs (.list-split,
   .box-grid); on a phone those wrappers change nothing. */

/* ---------- the token meter (COMMAND-186 step 5): a card at the bottom of Accounts ---------- */

.tok-card .seg-group { margin-top: 10px; }
.tok-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.tok-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.tok-stat-label { font-size: 0.8rem; color: var(--muted); }
.tok-stat-value { font-size: 1.4rem; font-variant-numeric: tabular-nums; }
/* A change says itself in words with an arrow; the colour only repeats it (less is the aim). */
.tok-change { font-size: 0.85rem; font-weight: 600; }
.tok-change.down { color: var(--advice); }
.tok-change.up { color: var(--danger); }
.tok-change.same { color: var(--muted); }
.tok-sub { margin: 16px 0 6px; font-size: 0.95rem; }
.tok-days, .tok-group-list { list-style: none; margin: 0; padding: 0; }
.tok-day { display: grid; grid-template-columns: 7.5em minmax(0, 1fr) 4.5em; grid-template-areas: 'name bar num' '. comp comp'; align-items: center; gap: 0 10px; padding: 4px 0; }
.tok-day-name { grid-area: name; font-size: 0.85rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tok-day.today .tok-day-name { color: var(--text); font-weight: 600; }
.tok-bar { grid-area: bar; height: 8px; border-radius: 4px; }
.tok-fill { width: 0; height: 100%; border-radius: 4px; background: var(--accent); }
.tok-day.today .tok-fill { opacity: .55; }
.tok-day-num { grid-area: num; text-align: right; font-size: 0.9rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.tok-day-comp { grid-area: comp; }
.tok-day-comp:empty { display: none; }
.tok-day { cursor: pointer; border-radius: 6px; }
.tok-day.open { background: var(--surface-2); }
.tok-day-detail { grid-column: 1 / -1; margin: 2px 0 4px; overflow-wrap: anywhere; }
.tok-group { padding: 10px 0; border-top: 1px solid var(--line); }
.tok-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.tok-group-name { flex: 1 1 12em; min-width: 0; overflow-wrap: anywhere; }
.tok-group-num { font-weight: 700; font-variant-numeric: tabular-nums; }
.tok-group-parts { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 4px 0 0; }
.tok-group-kinds { margin: 2px 0 0; overflow-wrap: anywhere; }
.tok-reported { margin-top: 10px; }

/* The Escalate switch (COMMAND-339): on every box the PO sends from, off by default — red outline when off, solid red
   when on. An escalated word ignores every usage limit and is picked up at once; what the PO sent escalated carries a
   red "Escalated" badge. It sits in the row of buttons (.actions), which wraps on a phone and stays one row on a wide
   screen (the wide-screen block at the end makes it roomier). */
.btn.escalate-toggle { gap: 6px; background: transparent; border-color: var(--danger); color: var(--danger); }
.btn.escalate-toggle .escalate-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid currentColor; flex: none; box-sizing: border-box; }
.btn.escalate-toggle.on { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.escalate-toggle.on .escalate-dot { background: currentColor; }
.escalated-badge {
  display: inline-block; margin-left: 6px; padding: 0 8px;
  border-radius: 9px; background: var(--danger); color: #fff;
  font-size: 0.72rem; font-weight: 700; line-height: 18px; vertical-align: middle; white-space: nowrap;
}
.reply.escalated { box-shadow: inset 3px 0 0 var(--danger); }

/* UI built without a design (the house rule): a red dashed outline and a "POC" badge, so it is visibly not designed yet
   and grep-able. COMMAND-383's status updates row is the first. */
.poc-ui { position: relative; outline: 2px dashed var(--danger); outline-offset: 2px; }
/* The mail compose popup (COMMAND-411, mail-compose.js): built without a design (poc-ui). */
.mail-compose-files { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.mail-compose-bcc { margin-top: 8px; }
.mail-compose-recipients { margin: 8px 0 0; padding-left: 18px; }
.poc-ui::after { content: 'POC'; position: absolute; top: -9px; right: 6px; padding: 0 5px; border-radius: 4px; background: var(--danger); color: #fff; font-size: 0.65rem; font-weight: 700; line-height: 16px; letter-spacing: 0.04em; pointer-events: none; }

/* The ERD row of a project's page (COMMAND-413): the Lucid link and who draws in it now; wraps on a phone. */
.erd-row { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding-right: 28px; }
.erd-turn.is-busy { font-weight: 600; }

/* ----- The ERD viewer (COMMAND-404): a chart of the space's project, in the Docs space ----- */
/* The list of charts under the page tree; the chart itself fills what is left of the screen — on a phone the whole
   width, on a wide screen the content column at full width (no reading width) with the tapped table's columns in a
   panel beside it. The drawing stays white like the PO's Lucid ERDs, in dark mode too. */
.docs-charts { margin-top: 12px; }
.docs-charts-title { margin: 0 0 6px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.75rem; }
.docs-chart-list { list-style: none; margin: 0; padding: 6px 8px; }
.docs-chart-link { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.docs-chart-link svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; }
.docs-main > .docs-content:has(> .chart-screen) { max-width: none; }
.chart-screen { display: flex; flex-direction: column; gap: 8px; }
.chart-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.chart-name { margin: 0; font-size: 1.15rem; }
.chart-zoom { display: flex; gap: 6px; margin-left: auto; }
.chart-zoom-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); cursor: pointer; }
.chart-zoom-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.chart-split { display: flex; flex-direction: column; gap: 10px; }
.chart-stage { position: relative; height: calc(100dvh - 210px); min-height: 360px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #ffffff; touch-action: none; }
.chart-svg { display: block; width: 100%; height: 100%; cursor: grab; user-select: none; -webkit-user-select: none; }
.chart-svg:active { cursor: grabbing; }
.chart-table { cursor: pointer; }
.chart-table:focus { outline: none; }
.chart-table.on .chart-table-box, .chart-table:focus-visible .chart-table-box { stroke: #2f5bd3; stroke-width: 3; }
/* The editor (COMMAND-405): what can be picked up shows a move cursor; note mode a crosshair on the paper. */
.chart-edit { margin-left: 0; }
.chart-zoom-btn.on { background: var(--accent, #2f5bd3); border-color: var(--accent, #2f5bd3); color: #ffffff; }
.chart-zoom-btn:disabled { opacity: 0.4; cursor: default; }
.chart-hint { margin: 0; }
.chart-svg[data-edit='tables'] .chart-table, .chart-svg[data-edit='tables'] .chart-group-handle, .chart-svg[data-edit] .chart-note { cursor: move; }
.chart-svg[data-note-mode='on'] { cursor: crosshair; }
.chart-note-text { width: 100%; box-sizing: border-box; margin-top: 8px; font: inherit; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); resize: vertical; }
.chart-note-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chart-panel { padding: 12px 14px; }
.chart-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chart-panel-name { margin: 0; font-size: 1rem; overflow-wrap: anywhere; }
.chart-panel-close { width: 44px; height: 44px; border: 0; background: none; color: var(--muted); font-size: 1.5rem; cursor: pointer; }
.chart-columns { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-top: 6px; }
.chart-columns th { text-align: left; color: var(--muted); font-weight: 600; padding: 4px 6px; border-bottom: 1px solid var(--line); }
.chart-columns td { padding: 5px 6px; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.chart-col-key { color: var(--muted); white-space: nowrap; }
.chart-col-field { font-weight: 600; }
.chart-refs { margin: 4px 0 8px; padding-left: 18px; font-size: 0.85rem; }
.chart-panel h4 { margin: 12px 0 0; }
/* The Mail screen (COMMAND-410, public/mail.js): the List view's Leesvenster with a mail per row — an unread one bold —
   and the opened mail beside it on a wide screen, alone on a phone. The HTML of a mail sits in a locked frame. No design
   yet: marked POC (poc-ui). */
.mail-screen { margin-top: 4px; }
.mail-boxes, .mail-filters { margin-bottom: 8px; flex-wrap: wrap; }
.mail-row { width: 100%; text-align: left; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; }
.mail-row-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mail-from { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-when { flex: none; }
.mail-subject, .mail-preview { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-preview { display: flex; align-items: center; gap: 6px; }
.mail-unread .mail-from, .mail-unread .mail-subject, .mail-linked-item.mail-unread { font-weight: 700; }
.mail-row:not(.mail-unread) .mail-subject { font-weight: 400; }
.mail-clip svg, .mail-file svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; vertical-align: -2px; }
.mail-open { display: flex; flex-direction: column; gap: 10px; }
.mail-open-subject { margin: 0; font-size: 1.15rem; overflow-wrap: anywhere; }
.mail-head { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 12px; margin: 0; font-size: 0.9rem; }
.mail-head dt { color: var(--muted); }
.mail-head dd { margin: 0; overflow-wrap: anywhere; }
.mail-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.mail-files { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.mail-body { min-width: 0; }
.mail-html { display: block; width: 100%; height: 65vh; min-height: 360px; border: 1px solid var(--line); border-radius: 8px; background: #fff; resize: vertical; }
.mail-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.95rem; }
.mail-pictures { margin-bottom: 8px; font-size: 0.9rem; }
.mail-plain { margin-top: 8px; }
.mail-links h3, .mail-linked h2 { margin: 0 0 6px; }
.mail-link-list, .mail-linked-list, .mail-picker-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.mail-unlink { font-size: 1.1rem; line-height: 1; padding: 0 4px; }
.mail-kind { font-size: 0.75rem; }
.mail-picker { display: flex; flex-direction: column; gap: 6px; }
.mail-picker-item { width: 100%; text-align: left; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: none; font: inherit; color: inherit; cursor: pointer; }
.mail-picker-item[disabled] { opacity: 0.55; cursor: default; }
.mail-linked { margin-top: 10px; }
.mail-linked-item { text-align: left; }
@media (min-width: 1800px) {
  .chart-screen .chart-split.with-panel { grid-template-columns: minmax(0, 1fr) 440px; }
  .chart-columns { font-size: 0.95rem; }
}

@media (min-width: 1100px) {
  :root {
    --wide: 1480px; /* every page: header, tab bar and the page itself, one box */
    /* How wide the content of a page that reads better narrower gets (the width
       a 1120px or a 960px page had inside its gutters before COMMAND-43). */
    --reading: 1072px; /* lists read line by line: Vaults, Accounts, Gesprekken, Meldingen, a board */
    --narrow: 912px; /* text to read: Docs, Instellingen */
    --gutter: 24px;
    --topbar-h: 104px; /* the sticky header + tab bar, for what sticks below it */
  }
  /* A page that scrolls and one that does not keep the same width. */
  html { scrollbar-gutter: stable; }

  /* ----- the top: header row and tab bar as wide as the page ----- */
  .top {
    max-width: var(--wide);
    margin: 0 auto;
    padding-left: calc(env(safe-area-inset-left) + var(--gutter));
    padding-right: calc(env(safe-area-inset-right) + var(--gutter));
  }
  .tabs {
    max-width: var(--wide);
    padding-left: calc(env(safe-area-inset-left) + var(--gutter) - 8px);
    padding-right: calc(env(safe-area-inset-right) + var(--gutter) - 8px);
  }
  .tab:hover:not(.active) { color: var(--text); }
  /* The tab bar with the App Launcher's dots (COMMAND-393): the row as wide as the page, the tabs the rest of it. */
  .tabs-bar { max-width: var(--wide); padding-left: calc(env(safe-area-inset-left) + var(--gutter) - 8px); }
  .tabs-bar > .tabs { max-width: none; padding-left: 0; }
  .launcher-btn { margin-left: 0; }

  /* ----- the page ----- */
  /* Every page, every tab and every part of a tab gets the same box as the header
     and the tab bar: one width, one left edge, so nothing moves when the PO
     switches (COMMAND-43, PO, 2026-09-30: "Foto 1 is juist, maar waarom springt
     foto 2 naar het midden?????" — Gesprekken was a narrower page in the middle). */
  .view {
    max-width: var(--wide);
    padding-left: calc(env(safe-area-inset-left) + var(--gutter));
    padding-right: calc(env(safe-area-inset-right) + var(--gutter));
  }
  /* A record page (an account, a card) too: not the 1240px of a smaller screen. */
  .view.record-view { max-width: var(--wide); }
  /* A page that reads better narrower narrows its CONTENT only, on that same left
     edge, never centred in a column of its own. Its rows of sub-tabs and filters
     (.seg-group, a board's .lane-bar) keep the page's full width, as on every other
     tab. :where() keeps this weaker than a card's own narrower width. Gesprekken is
     two columns like Documentatie (COMMAND-236, below): not narrowed. */
  :where(.view.view-credentials) > :where(:not(.seg-group, .lane-bar)) { max-width: var(--reading); }
  /* A board (COMMAND-394): its Page Header and its Lijst use the page's width; Kanban's lane reads narrower. */
  :where(.view.work-board-view) > :where(:not(.seg-group, .lane-bar, .page-header, .work-cards-list)) { max-width: var(--reading); }
  /* The tabs on the shared index page (COMMAND-394): the Page Header and the List view (or its Leesvenster) use the page's
     width; the boxes under them read narrower. */
  :where(.view.view-inbox, .view.view-skills, .view.view-rules, .view.view-integrations) > :where(:not(.seg-group, .lane-bar, .page-header, .list-view, .list-split)) { max-width: var(--reading); }
  /* Claude Accounts (COMMAND-393): its Page Header and List view use the page's width; the boxes under them read narrower. */
  :where(.view.view-claude-accounts) > :where(:not(.seg-group, .lane-bar, .page-header, .list-view)) { max-width: var(--reading); }
  :where(.view.view-settings) > :where(:not(.seg-group, .lane-bar)) { max-width: var(--narrow); }
  /* What runs on a server (COMMAND-193): the projects side by side, as many as fit; the disks and memory side by side. */
  .int-inv-groups { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px 24px; }
  .int-inv-machine { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

  /* ----- Vragen ----- */
  /* The three parts (of Vaults too): each as wide as its words, on the left. */
  .sub-tabs .seg { flex: 0 0 auto; padding: 0 18px; }
  /* "All answered" / "no approvals": a card of phone width, in the middle. */
  .view-questions .q-done { max-width: 720px; margin-left: auto; margin-right: auto; }

  /* The Leesvenster (COMMAND-454: the List view's split variant, the generic form of Gesprekken's two panes,
     COMMAND-236; PO, 2026-10-03: "beetje vergelijkbaar maken met docs? Links de lijst ... en dan rechts van de navigatie
     heb je de content. Eigenlijk beetje als Gmail look en feel"): the list on the left at a fixed share, in view while
     the opened item scrolls and scrolling on its own when it is long (as Documentatie's page tree); the opened item on
     the right, the room that is left. Both are always there; with none open the right says where it opens. The rows are
     compact, as Gmail's; the opened item's own back link goes (the list is beside it; the header's arrow and Escape
     still close it). Gesprekken's sub-tabs and Antwoorden op pagina's stay on top. */
  .list-split { display: grid; grid-template-columns: minmax(340px, 36%) minmax(0, 1fr); gap: var(--gutter); align-items: start; }
  .list-split.has-open > .list-split-list,
  .list-split:not(.has-open) > .list-split-main { display: block; }
  .view.record-of-message > .sub-tabs { display: flex; }
  .view.record-of-message > .threads-waiting { display: block; }
  .view.page-split.page-record > .page-header { display: block; }
  .list-split-list {
    position: sticky; top: calc(var(--topbar-h) + 12px);
    max-height: calc(100vh - var(--topbar-h) - 24px);
    overflow-y: auto; overscroll-behavior: contain;
    padding: 0 4px 76px 2px; /* its last row scrolls clear of the chat and camera buttons (COMMAND-86) */
  }
  .list-split-list > .section-title, .list-split-list > .list-head { margin-top: 0; }
  .list-split-list .todo-line { min-height: 0; padding: 8px 8px 8px 6px; }
  .list-split-list .todo-line-title { font-size: 0.95rem; }
  .list-split-main .link.record-back { display: none; }
  /* The opened item is its own box too (COMMAND-450; PO, 2026-10-09: "Dit moet een eigen box krijgen net als de lijst
     van items, zo kan ik de knoppen bovenin zien zonder helemaal omhoog te scrollen"): as tall as what is left of the
     screen; a record's header (its title, its buttons and its key fields) always on top, only what is under it
     scrolling; the window no longer moves with a long one. Anything else in it (Vragen aan mij's question) scrolls in
     the box as a whole. The box names the opened item (data-thread-box), so keep.js keeps its place on a refresh and
     another item opens at its top. */
  .list-split-main {
    position: sticky; top: calc(var(--topbar-h) + 12px);
    max-height: calc(100vh - var(--topbar-h) - 24px);
    max-height: calc(100dvh - var(--topbar-h) - 24px);
    display: flex; flex-direction: column; min-height: 0;
    overflow-y: auto; overscroll-behavior: contain;
  }
  .list-split-main > * { flex: none; }
  /* stretch, never the record grid's `align-items: start` (COMMAND-479): in a column that would size each part to its
     content, so a message with several photos (its row of pictures does not wrap) made the conversation wider than the
     pane, and the pane cut off its right side — Versturen with it. */
  .list-split-main > .record { flex: 0 1 auto; display: flex; flex-direction: column; align-items: stretch; min-height: 0; }
  .list-split-main > .record > * { min-width: 0; }
  .list-split-main .record-head { flex: none; }
  .list-split-main .record-main {
    flex: 0 1 auto; min-height: 0;
    overflow-y: auto; overscroll-behavior: contain;
    padding-bottom: 76px; /* its last line scrolls clear of the chat and camera buttons (COMMAND-86) */
  }
  /* The conversation's Belangrijk and Archiveren as they were beside the title (COMMAND-245). */
  .record-message .record-actions { flex-basis: auto; }
  .record-message .record-actions .msg-important, .record-message .record-actions .msg-archive { min-height: 40px; padding: 6px 4px; border: 0; font-size: 0.9rem; }
  .record-message .record-actions .msg-important.on { background: none; }

  /* Vragen aan mij in the Leesvenster (COMMAND-28; on the List view since COMMAND-454): every open question on the
     left, the question on screen on the right — Vorige / Volgende on top of it (in view while the question scrolls in
     its box), the project filter, the question with its context and options, Eigen besluiten under it. The list a
     narrower share than Gesprekken's: the question needs the room. */
  .list-split.q-split { grid-template-columns: minmax(300px, 26%) minmax(0, 1fr); column-gap: 20px; }
  .q-split > .list-split-main > .q-strip { position: sticky; top: 0; z-index: 1; margin: 0; padding: 0 0 12px; background: var(--bg); }
  .q-split > .list-split-main > .q-filter { margin: 0 0 12px; }
  .q-split > .list-split-main > .own-decisions { margin-top: 4px; }
  .q-split > .list-split-main { padding-bottom: 76px; }
  /* Nothing left to answer: Eigen besluiten under the "all answered" card, as wide as it. */
  .view-questions > .own-decisions { max-width: 720px; margin-left: auto; margin-right: auto; }
  .q-rows { padding: 6px; }
  .q-rows .ls-lines { display: grid; gap: 2px; }
  .q-rows .ls-lines li + li { border-top: 0; }
  .q-item {
    width: 100%;
    display: grid; gap: 2px;
    padding: 9px 10px 9px 9px;
    border: 0; border-left: 3px solid transparent; border-radius: 10px;
    background: none; color: var(--text);
    font: inherit; text-align: left;
    cursor: pointer;
  }
  .q-item:hover { background: var(--surface-2); }
  .q-item.active { background: var(--accent-soft); border-left-color: var(--accent); }
  .q-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .q-item-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-width: 0; }
  .q-item-card { flex: none; font-size: 0.86rem; color: var(--accent); }
  .q-item-from { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .q-item-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-size: 0.92rem; line-height: 1.35;
  }
  .q-item.active .q-item-text { font-weight: 600; }
  .q-item-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
  .q-item-tags .tag { margin-left: 0; }

  /* Goedkeuringen: the approvals side by side, two or three in a row. */
  .view.q-part-approvals {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    column-gap: 16px;
    align-items: start;
  }
  .view.q-part-approvals > :not(.approval) { grid-column: 1 / -1; }
  /* Beantwoord (COMMAND-169): the answered ones side by side as well, under the open ones; Oudere laden as wide as its words. */
  .answered-approvals-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    column-gap: 16px;
    align-items: start;
  }
  .answered-approvals-list > .card { min-width: 0; }
  .answered-more { width: auto; padding: 0 22px; }

  /* ----- Borden, Docs and Facturen: the boxes in a grid ----- */
  .box-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 16px;
    align-items: start;
    margin-bottom: 12px;
  }
  .box-grid > .card { margin: 0; min-width: 0; }
  /* Projecten (COMMAND-76): a row reads across — the name, its versions and its chips on one line where they fit. */
  .project-row .fin-main { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
  .project-row .fin-main > strong { flex: 0 0 220px; }

  /* ----- Nieuws ----- */
  /* ONE list as wide as the page, never boxes side by side (COMMAND-84; COMMAND-27's grid of
     a box per project is gone): only its tabs change here, with Te doen's and Kosten's below. */

  /* ----- Te doen ----- */
  /* ONE list as wide as the page, never boxes side by side (COMMAND-71; the boxes per
     project of COMMAND-29 are gone): only its tabs change here, on as many rows as they
     need, like Kosten's below. A todo opens on its own page, a record page like every
     detail page (COMMAND-92). */

  /* ----- Financiën ----- */
  /* Kosten is ONE list as wide as the page, never boxes side by side (COMMAND-45; PO,
     2026-09-30: "3 swimlanes.... ik wil gewoon 1"): only its tabs change here, on as
     many rows as they need. */
  .todo-tabs,
  .news-tabs,
  .fin-tabs { flex-wrap: wrap; overflow: visible; margin: 0 0 12px; padding: 0; }

  /* ----- lists: wider rows, the buttons on the same line ----- */
  /* Credentials: the field with Opslaan beside it. Accounts: the new-PC connector address with Kopieer. */
  .view-credentials .card.cred,
  .view-claude-accounts .card.newpc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
    align-items: center;
  }
  .view-credentials .card.cred > *,
  .view-claude-accounts .card.newpc > * { grid-column: 1 / -1; }
  .view-credentials .card.cred > .tag { justify-self: start; }
  /* The field and its buttons are the top of the request's thread (COMMAND-89): that part lays out the same way. */
  .view-credentials .card.cred > .thread { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: center; }
  .view-credentials .card.cred > .thread > * { grid-column: 1 / -1; }
  .view-credentials .card.cred > .thread > .cred-field { grid-column: 1; align-self: start; }
  .view-credentials .card.cred > .thread > .cred-actions { grid-column: 2; align-self: start; margin-top: 10px; flex-wrap: nowrap; gap: 16px; }
  .view-claude-accounts .card.newpc > .conn-url { grid-column: 1; }
  .view-claude-accounts .card.newpc > .newpc-actions { grid-column: 2; margin-top: 8px; flex-wrap: nowrap; }

  /* Accounts (COMMAND-74): the account cards side by side in the .box-grid above. Every PC's stop (the last row on the
     page for every PC, COMMAND-146, COMMAND-152) keeps its buttons on its one row. */
  .every-pc-row > .actions { flex-wrap: nowrap; }

  /* Meldingen: the chips as wide as their names (its List view uses the page's width, COMMAND-394; Meer laden centred
     under it). */
  .inbox-parts .seg { flex: 0 0 auto; padding: 0 18px; }
  .inbox-detail { max-width: 860px; }
  /* Documentatie (COMMAND-9): a page as wide as the text column; the one list (COMMAND-85) as wide too. */
  .md-page { padding: 22px 26px; }
  .version-row:hover, .tree-link:hover { border-color: var(--accent); color: var(--accent); }

  /* Facturen: the PDF itself beside the form on a wide screen (a phone opens it on its own). */
  .inv-preview { display: block; width: 100%; height: 70vh; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
  /* ----- Borden (COMMAND-7) ----- */
  /* Every board: the List view at the page's width (COMMAND-394). A board: its lanes on as many rows as they need, the
     list read line by line (the reading width, under "the page"). */
  .lane-bar { flex-wrap: wrap; overflow: visible; margin: 0 0 12px; padding: 0; }
  /* A card: the lane it came from beside it, as Vragen aan mij (a phone shows one at a time). */
  .work-layout {
    display: grid;
    grid-template-columns: minmax(280px, 24%) minmax(0, 1fr);
    column-gap: 20px;
    align-items: start;
  }
  .work-side {
    display: block;
    position: sticky;
    top: calc(var(--topbar-h) + 12px);
    max-height: calc(100vh - var(--topbar-h) - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .work-side-head { padding: 2px 4px 8px; font-weight: 600; }
  .work-side .work-list { margin: 0 0 8px; }
  .work-side .work-row { padding: 9px 10px; }
  .work-side .work-row-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-size: 0.92rem;
  }
  /* The chat and camera buttons sit bottom left (COMMAND-86): on a screen too narrow for the page to leave
     them a margin they cover the bottom of a list that sticks on the left. Like the page, the list keeps room
     at its end, so its last line scrolls clear of them. */
  .list-split-list, .work-side { padding-bottom: 76px; }

  /* ----- Documentatie (COMMAND-85): Confluence's two columns ----- */
  /* The search, the space switcher and the page tree a column on the left that stays in view
     (it scrolls on its own when the tree is long); the content on the right, its text at a
     reading width. The tree is always there: the bar that folds it away on a phone goes. */
  .docs-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: var(--gutter); align-items: start; }
  .docs-side {
    position: sticky; top: calc(var(--topbar-h) + 12px);
    max-height: calc(100vh - var(--topbar-h) - 24px);
    overflow-y: auto; overscroll-behavior: contain;
    margin: 0; padding: 2px 4px 76px 2px; /* its last line scrolls clear of the chat and camera buttons (COMMAND-86) */
  }
  .docs-tree-toggle { display: none; }
  .docs-tree, .docs-tree[hidden] { display: block; margin-top: 0; }
  .docs-main > * { max-width: var(--narrow); }
  /* The token meter (COMMAND-186 step 5): each day on one line, its summaries in a column of their own. */
  .tok-day { grid-template-columns: 9em minmax(0, 1fr) 5em 9em; grid-template-areas: 'name bar num comp'; }
  .tok-day-comp:empty { display: block; }
  .tok-stat-value { font-size: 1.6rem; }
  /* The Escalate switch (COMMAND-339): a little roomier on a wide screen. */
  .btn.escalate-toggle { padding-left: 16px; padding-right: 16px; }
  .escalated-badge { font-size: 0.8rem; line-height: 20px; }
  /* The ERD viewer (COMMAND-404): the chart fills the content column, the tapped table's panel beside it. */
  .chart-stage { height: calc(100vh - var(--topbar-h) - 120px); min-height: 480px; }
  .chart-split.with-panel { display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
  .chart-split.with-panel > .chart-panel { max-height: calc(100vh - var(--topbar-h) - 120px); overflow-y: auto; }
}