/* briq-ui — BRIQWorks tokens (DESIGN.md §2–§5) and component styles.
   The ONLY place with colour values, radii and spacing; components use the
   classes and variables below. Mobile-first: the base is the phone (390 px),
   wider screens add things (DESIGN.md §7). Dark mode follows the system
   unless <html data-theme="light|dark"> overrides it. */

:root {
  --bw-dark: #1d1d1b;
  --bw-red: #b2161a;
  --bw-orange: #f25a2b;
  --bw-crimson: #901625;
  --bw-page: #faf7f5;
  --bw-surface: #ffffff;
  --bw-subtle: #f4efec;
  --bw-line: #ece5e1;
  --bw-ink: #221d1c;
  --bw-muted: #6f615d;
  --bw-on-red: #ffffff;
  --bw-on-dark: #f1ebe7;
  --bw-rail-muted: #b2a79f;
  --bw-rail-hover: rgba(255, 255, 255, 0.08);
  --bw-rail-active-fg: #ffffff;
  --bw-focus: #b2161a;

  --bw-ok: #1a7f37;
  --bw-warn: #8a5900;   /* #c47f00 darkened for 4.5:1 text on its fill */
  --bw-fail: #b00020;
  --bw-ok-bg: #e4f4e8;
  --bw-warn-bg: #fbf0db;
  --bw-fail-bg: #fbe6e9;
  --bw-info-bg: #f8e3e3;
  --bw-info-fg: #b2161a;   /* text of an info/primary label on --bw-info-bg (5.7:1) */
  --bw-contrast-bg: #1d1d1b;
  --bw-contrast-fg: #f1ebe7;

  /* Chart series: fixed order, never wrapping past five. */
  --bw-series-1: #b2161a;
  --bw-series-2: #1d1d1b;
  --bw-series-3: #c47f00;
  --bw-series-4: #1a7f37;
  --bw-series-5: #6f615d;

  /* Person colours persoon-1 … persoon-12 (white initials ≥ 4.5:1). */
  --bw-persoon-0: #6f615d;
  --bw-persoon-1: #b2161a;
  --bw-persoon-2: #0b5cad;
  --bw-persoon-3: #1a7f37;
  --bw-persoon-4: #8a5900;
  --bw-persoon-5: #6d28d9;
  --bw-persoon-6: #be185d;
  --bw-persoon-7: #0f766e;
  --bw-persoon-8: #9a3412;
  --bw-persoon-9: #3f4a5a;
  --bw-persoon-10: #4d7c0f;
  --bw-persoon-11: #1e40af;
  --bw-persoon-12: #86198f;
  --bw-on-persoon: #ffffff;

  /* Accent scopes (.accent-…): text on page/surface/subtle and --bw-on-red on
     them ≥ 4.5:1 (WCAG AA); red is the house red. */
  --bw-accent-green: #18733a;
  --bw-accent-blue: #0b5cad;
  --bw-accent-ochre: #8a5900;
  --bw-accent-purple: #6d28d9;
  --bw-accent-slate: #3f4a5a;

  /* Code tokens (chroma classes) and diff lines. */
  --bw-code-keyword: #901625;
  --bw-code-string: #1a7f37;
  --bw-code-comment: #6f615d;
  --bw-code-number: #8a5900;
  --bw-code-name: #0b5cad;
  --bw-code-add-bg: #e4f4e8;
  --bw-code-del-bg: #fbe6e9;

  /* QR codes: always dark modules on white, in dark mode too (scanners and
     the quiet zone need it). Deliberately not overridden in the dark blocks. */
  --bw-qr-dark: #000000;
  --bw-qr-light: #ffffff;

  --bw-font: "Segoe UI", Arial, Helvetica, sans-serif;
  --bw-display: "Space Grotesk", var(--bw-font);
  --bw-size: 15px;
  --bw-size-small: 13px;
  --bw-size-tiny: 12px;

  --bw-radius: 10px;
  --bw-radius-inner: 8px;
  --bw-radius-float: 12px;
  --bw-radius-area: 18px;
  --bw-radius-check: 6px;
  --bw-pill: 999px;
  --bw-shadow: 0 1px 3px rgba(29, 29, 27, 0.08);
  --bw-shadow-up: 0 -1px 3px rgba(29, 29, 27, 0.08);

  --bw-space-1: 2px;
  --bw-space-2: 4px;
  --bw-space-3: 8px;
  --bw-space-4: 12px;
  --bw-space-5: 16px;
  --bw-space-6: 24px;
  --bw-side: 16px;
  --bw-tap: 44px;
  --bw-control: 44px;
  --bw-avatar: 32px;
  --bw-rail: 16rem;
  --bw-topbar: 56px;
  --bw-measure: 72ch;
  --bw-form: 48rem;
  --bw-stripe: 4px;
  --bw-speed: 180ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bw-red: #e2565a;
    --bw-page: #161412;
    --bw-surface: #211e1c;
    --bw-subtle: #2a2623;
    --bw-line: #352f2b;
    --bw-ink: #f1ebe7;
    --bw-muted: #b2a79f;
    --bw-on-red: #161412;
    --bw-focus: #e2565a;
    --bw-ok: #6fcf8a;
    --bw-warn: #f0b85a;
    --bw-fail: #ff7a8a;
    --bw-ok-bg: #1e3326;
    --bw-warn-bg: #3a2e17;
    --bw-fail-bg: #3d1d22;
    --bw-info-bg: #3d1e1f;
    --bw-info-fg: #ee7a7d;   /* the dark --bw-red is 4.1:1 on --bw-info-bg; this is 5.5:1 */
    --bw-contrast-bg: #f1ebe7;
    --bw-contrast-fg: #1d1d1b;
    --bw-series-1: #e2565a;
    --bw-series-2: #f1ebe7;
    --bw-series-3: #f0b85a;
    --bw-series-4: #6fcf8a;
    --bw-series-5: #b2a79f;
    --bw-persoon-0: #b2a79f;
    --bw-persoon-1: #f28b8e;
    --bw-persoon-2: #7cb7f2;
    --bw-persoon-3: #6fcf8a;
    --bw-persoon-4: #f0b85a;
    --bw-persoon-5: #b9a2f5;
    --bw-persoon-6: #f39ac4;
    --bw-persoon-7: #5fd3c6;
    --bw-persoon-8: #f4a582;
    --bw-persoon-9: #b8c2d0;
    --bw-persoon-10: #a7d66a;
    --bw-persoon-11: #9db5f7;
    --bw-persoon-12: #e19ae8;
    --bw-on-persoon: #161412;
    --bw-accent-green: #6fcf8a;
    --bw-accent-blue: #7ab4f0;
    --bw-accent-ochre: #f0b85a;
    --bw-accent-purple: #b9a1f5;
    --bw-accent-slate: #a9b4c4;
    --bw-code-keyword: #f28b8e;
    --bw-code-string: #6fcf8a;
    --bw-code-comment: #b2a79f;
    --bw-code-number: #f0b85a;
    --bw-code-name: #7cb7f2;
    --bw-code-add-bg: #1e3326;
    --bw-code-del-bg: #3d1d22;
    --bw-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    --bw-shadow-up: 0 -1px 3px rgba(0, 0, 0, 0.4);
  }
}

:root[data-theme="dark"] {
  --bw-red: #e2565a;
  --bw-page: #161412;
  --bw-surface: #211e1c;
  --bw-subtle: #2a2623;
  --bw-line: #352f2b;
  --bw-ink: #f1ebe7;
  --bw-muted: #b2a79f;
  --bw-on-red: #161412;
  --bw-focus: #e2565a;
  --bw-ok: #6fcf8a;
  --bw-warn: #f0b85a;
  --bw-fail: #ff7a8a;
  --bw-ok-bg: #1e3326;
  --bw-warn-bg: #3a2e17;
  --bw-fail-bg: #3d1d22;
  --bw-info-bg: #3d1e1f;
  --bw-info-fg: #ee7a7d;
  --bw-contrast-bg: #f1ebe7;
  --bw-contrast-fg: #1d1d1b;
  --bw-series-1: #e2565a;
  --bw-series-2: #f1ebe7;
  --bw-series-3: #f0b85a;
  --bw-series-4: #6fcf8a;
  --bw-series-5: #b2a79f;
  --bw-persoon-0: #b2a79f;
  --bw-persoon-1: #f28b8e;
  --bw-persoon-2: #7cb7f2;
  --bw-persoon-3: #6fcf8a;
  --bw-persoon-4: #f0b85a;
  --bw-persoon-5: #b9a2f5;
  --bw-persoon-6: #f39ac4;
  --bw-persoon-7: #5fd3c6;
  --bw-persoon-8: #f4a582;
  --bw-persoon-9: #b8c2d0;
  --bw-persoon-10: #a7d66a;
  --bw-persoon-11: #9db5f7;
  --bw-persoon-12: #e19ae8;
  --bw-on-persoon: #161412;
  --bw-accent-green: #6fcf8a;
  --bw-accent-blue: #7ab4f0;
  --bw-accent-ochre: #f0b85a;
  --bw-accent-purple: #b9a1f5;
  --bw-accent-slate: #a9b4c4;
  --bw-code-keyword: #f28b8e;
  --bw-code-string: #6fcf8a;
  --bw-code-comment: #b2a79f;
  --bw-code-number: #f0b85a;
  --bw-code-name: #7cb7f2;
  --bw-code-add-bg: #1e3326;
  --bw-code-del-bg: #3d1d22;
  --bw-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  --bw-shadow-up: 0 -1px 3px rgba(0, 0, 0, 0.4);
}

@media (min-width: 1024px) {
  :root { --bw-side: 28px; }
}

/* A mouse on a wide screen may be compact (DESIGN.md §5). */
@media (min-width: 1024px) and (pointer: fine) {
  :root { --bw-control: 32px; --bw-tap: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --bw-speed: 0ms; }
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bw-page);
  color: var(--bw-ink);
  font-family: var(--bw-font);
  font-size: var(--bw-size);
  line-height: 1.5;
  /* break-word (not anywhere): a long URL may still break when it overflows,
     but min-content sizing keeps whole words, so table columns and buttons
     never split a word ("Oppakke|n"). */
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--bw-display);
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0 0 var(--bw-space-3);
}

a { color: var(--bw-red); }

:focus-visible {
  outline: 2px solid var(--bw-focus);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
  left: var(--bw-side);
  top: var(--bw-space-3);
  z-index: 30;
  background: var(--bw-surface);
  padding: var(--bw-space-3) var(--bw-space-5);
  border-radius: var(--bw-pill);
}

.meta { color: var(--bw-muted); font-size: var(--bw-size-small); }

/* ---------- Buttons: always filled, pill (DESIGN.md §1.6) ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bw-space-2);
  min-height: var(--bw-control);
  padding: 0 var(--bw-space-5);
  border: none;
  border-radius: var(--bw-pill);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;   /* a pill never breaks a word; whole buttons wrap instead */
  flex: none;
  transition: background-color var(--bw-speed), filter var(--bw-speed);
}
/* Disabled: still readable (muted on subtle, 5.2:1 light, 6.4:1 dark) and
   clearly not the enabled look (no brand colour, no ink); never opacity,
   which made the text unreadable on the dark surface. Products say why a
   button is disabled in a hint next to it (DESIGN.md §9). */
.btn:disabled, .btn-icon:disabled { background: var(--bw-subtle); color: var(--bw-muted); cursor: not-allowed; }
.btn:not(:disabled):hover { filter: brightness(0.95); }

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--bw-control);
  height: var(--bw-control);
  border: none;
  border-radius: 50%;
  font: inherit;
  cursor: pointer;
  flex: none;
}

.btn.sev-primary { background: var(--bw-red); color: var(--bw-on-red); }
.btn.sev-secondary, .btn-icon.sev-secondary { background: var(--bw-subtle); color: var(--bw-ink); }
.btn.sev-danger, .btn-icon.sev-danger { background: var(--bw-fail); color: var(--bw-on-red); }
.btn.sev-contrast { background: var(--bw-contrast-bg); color: var(--bw-contrast-fg); }

.link-button {
  background: none;
  border: none;
  padding: 0;
  min-height: var(--bw-tap);
  font: inherit;
  font-weight: 600;
  color: var(--bw-red);
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
}

/* ---------- Labels (severity pill with text) ---------- */

.label {
  display: inline-flex;
  white-space: nowrap;
  align-items: center;
  padding: var(--bw-space-1) var(--bw-space-4);
  border-radius: var(--bw-pill);
  font-size: var(--bw-size-small);
  font-weight: 600;
  background: var(--bw-subtle);
  color: var(--bw-ink);
}
.label + .label, a + .label, button + .label { margin-left: var(--bw-space-2); }
.label.sev-success { background: var(--bw-ok-bg); color: var(--bw-ok); }
.label.sev-warn { background: var(--bw-warn-bg); color: var(--bw-warn); }
.label.sev-danger { background: var(--bw-fail-bg); color: var(--bw-fail); }
.label.sev-info, .label.sev-primary { background: var(--bw-info-bg); color: var(--bw-info-fg); }
.label.sev-secondary { background: var(--bw-subtle); color: var(--bw-muted); }
.label.sev-contrast { background: var(--bw-contrast-bg); color: var(--bw-contrast-fg); }
.label-unknown { font-weight: 400; }

/* ---------- Person ---------- */

.person { display: inline-flex; align-items: center; gap: var(--bw-space-3); }
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--bw-avatar);
  height: var(--bw-avatar);
  border-radius: 50%;
  font-size: var(--bw-size-small);
  font-weight: 700;
  color: var(--bw-on-persoon);
  background: var(--bw-persoon-0);
  flex: none;
}
.avatar.persoon-1 { background: var(--bw-persoon-1); }
.avatar.persoon-2 { background: var(--bw-persoon-2); }
.avatar.persoon-3 { background: var(--bw-persoon-3); }
.avatar.persoon-4 { background: var(--bw-persoon-4); }
.avatar.persoon-5 { background: var(--bw-persoon-5); }
.avatar.persoon-6 { background: var(--bw-persoon-6); }
.avatar.persoon-7 { background: var(--bw-persoon-7); }
.avatar.persoon-8 { background: var(--bw-persoon-8); }
.avatar.persoon-9 { background: var(--bw-persoon-9); }
.avatar.persoon-10 { background: var(--bw-persoon-10); }
.avatar.persoon-11 { background: var(--bw-persoon-11); }
.avatar.persoon-12 { background: var(--bw-persoon-12); }

/* ---------- Blocks, notices, states ---------- */

.block {
  background: var(--bw-surface);
  border-radius: var(--bw-radius);
  box-shadow: var(--bw-shadow);
  padding: var(--bw-space-5);
  margin-bottom: var(--bw-space-5);
  min-width: 0;
}
.block-title { font-size: 1.05rem; }

.notice {
  border-radius: var(--bw-radius);
  border-left: var(--bw-stripe) solid var(--bw-muted);
  background: var(--bw-subtle);
  padding: var(--bw-space-3) var(--bw-space-4);
  margin: 0 0 var(--bw-space-4);
}
.notice.sev-warn { border-left-color: var(--bw-warn); background: var(--bw-warn-bg); }
.notice.sev-info { border-left-color: var(--bw-red); background: var(--bw-info-bg); }
/* An outcome with more than one line (a created account with its one-time
   password): the page message's kind colours on a notice. */
.notice.sev-success { border-left-color: var(--bw-ok); background: var(--bw-ok-bg); }
.notice.sev-fail { border-left-color: var(--bw-fail); background: var(--bw-fail-bg); }
/* Paragraphs in a notice: no browser margin at its edges (a one-line notice was too tall). */
.notice > :first-child { margin-top: 0; }
.notice > :last-child { margin-bottom: 0; }

/* The page message (flash) at the top of a page: the kind's colour on a
   stripe, the text, and a compact text "Sluiten" with a 44 px tap area. */
.page-message {
  display: flex;
  align-items: center;
  gap: var(--bw-space-3);
  border-radius: var(--bw-radius);
  border-left: var(--bw-stripe) solid var(--bw-muted);
  background: var(--bw-subtle);
  padding: var(--bw-space-2) var(--bw-space-2) var(--bw-space-2) var(--bw-space-4);
  margin: 0 0 var(--bw-space-4);
}
.page-message-text { flex: 1; min-width: 0; margin: var(--bw-space-2) 0; overflow-wrap: anywhere; color: var(--bw-ink); }
.page-message.sev-success { border-left-color: var(--bw-ok); background: var(--bw-ok-bg); }
.page-message.sev-warn { border-left-color: var(--bw-warn); background: var(--bw-warn-bg); }
.page-message.sev-fail { border-left-color: var(--bw-fail); background: var(--bw-fail-bg); }
.page-message.sev-fail .page-message-text { font-weight: 600; }
.page-message-close {
  flex: none;
  min-height: var(--bw-tap);
  min-width: var(--bw-tap);
  padding: 0 var(--bw-space-3);
  background: none;
  border: none;
  border-radius: var(--bw-pill);
  font: inherit;
  font-size: var(--bw-size-small);
  font-weight: 600;
  color: var(--bw-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.page-message-close:hover { text-decoration-thickness: 2px; }

.state { margin: 0 0 var(--bw-space-5); }
.state-empty {
  background: var(--bw-subtle);
  border-radius: var(--bw-radius);
  padding: var(--bw-space-5);
  color: var(--bw-muted);
}
.state-error {
  background: var(--bw-fail-bg);
  border-left: var(--bw-stripe) solid var(--bw-fail);
  border-radius: var(--bw-radius);
  padding: var(--bw-space-4) var(--bw-space-5);
}
.state-error-text { margin: 0 0 var(--bw-space-2); font-weight: 600; color: var(--bw-ink); }
.state-error-ref { margin: 0 0 var(--bw-space-3); color: var(--bw-muted); font-size: var(--bw-size-small); }

.skeleton {
  background: var(--bw-subtle);
  border-radius: var(--bw-pill);
  height: var(--bw-space-5);
  margin-bottom: var(--bw-space-4);
  animation: briq-pulse 1.4s ease-in-out infinite;
}
.skeleton-detail .skeleton { height: 7.5rem; border-radius: var(--bw-radius); }
.skeleton-form .skeleton { height: var(--bw-control); }
@keyframes briq-pulse { 50% { opacity: 0.5; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

/* ---------- Focus page: one task outside the app shell (first-run setup) ----------
   A centred column with the page padding and the app mark on top; the blocks
   inside are ordinary `.block`s. Narrow on purpose: it holds one form. */
.focus-page { max-width: var(--bw-form); margin: 0 auto; padding: var(--bw-space-5) var(--bw-side) var(--bw-space-6); min-width: 0; }
.focus-head { display: flex; align-items: center; gap: var(--bw-space-3); margin: 0 0 var(--bw-space-5); }
.focus-head h1 { margin: 0; font-family: var(--bw-display); font-size: 1.35rem; letter-spacing: -0.01em; }
.step-indicator { margin: 0 0 var(--bw-space-5); }
.step-indicator p { margin: 0; }

/* ---------- Option rows: one of many (radio) or some of many (checkbox) ----------
   The control sits left of its title, a one-line explanation below; the whole
   row is the label (keyboard: the control itself). The chosen row gets the
   accent stripe. */
.options { border: none; padding: 0; margin: 0 0 var(--bw-space-5); display: flex; flex-direction: column; gap: var(--bw-space-3); min-width: 0; }
.options > legend { font-weight: 600; margin-bottom: var(--bw-space-3); padding: 0; }
.option { display: flex; align-items: flex-start; gap: var(--bw-space-4); min-height: var(--bw-tap); padding: var(--bw-space-4); background: var(--bw-subtle); border-radius: var(--bw-radius-inner); border-left: var(--bw-stripe) solid transparent; cursor: pointer; }
.option input { flex: none; width: 1.15rem; height: 1.15rem; margin: 0.15rem 0 0; accent-color: var(--bw-red); }
.option:has(input:checked) { border-left-color: var(--bw-red); background: var(--bw-surface); box-shadow: 0 0 0 1px var(--bw-line); }
.option:has(input:disabled) { cursor: default; color: var(--bw-muted); }
.option-text { display: flex; flex-direction: column; gap: var(--bw-space-1); min-width: 0; overflow-wrap: anywhere; }
.option-title { font-weight: 600; }
.option-hint { color: var(--bw-muted); font-size: var(--bw-size-small); }

/* ---------- Status list: compact lines of a label and a text (checks, progress) ---------- */
.status-list { list-style: none; margin: 0 0 var(--bw-space-5); padding: 0; display: flex; flex-direction: column; gap: var(--bw-space-3); }
.status-list > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--bw-space-2) var(--bw-space-3); min-width: 0; overflow-wrap: anywhere; }
.status-list > li > p { flex-basis: 100%; margin: 0; }

/* ---------- Expand: inline "show more" (details/summary), never a pop-up ---------- */
.expand { margin: var(--bw-space-3) 0 0; }
.expand > summary { min-height: var(--bw-tap); display: flex; align-items: center; gap: var(--bw-space-2); cursor: pointer; font-weight: 600; color: var(--bw-red); list-style: none; }
.expand > summary::-webkit-details-marker { display: none; }
.expand > summary::before { content: "▸"; color: var(--bw-muted); }
.expand[open] > summary::before { content: "▾"; }

/* ---------- MFA QR code (MfaQr): dark on white in every theme, crisp, 240 px ---------- */
.mfa-qr { margin: var(--bw-space-5) 0; }
.mfa-qr-frame { display: inline-block; max-width: 100%; line-height: 0; border-radius: var(--bw-radius); overflow: hidden; background: var(--bw-qr-light); }
.mfa-qr-code { display: block; width: 240px; max-width: 100%; height: auto; }
.mfa-qr-light { fill: var(--bw-qr-light); }
.mfa-qr-dark { fill: var(--bw-qr-dark); }
.mfa-qr-help { margin: var(--bw-space-5) 0 var(--bw-space-3); font-size: 1rem; }
.mfa-key { font-family: ui-monospace, Consolas, monospace; font-size: 1.05rem; letter-spacing: 0.04em; overflow-wrap: anywhere; }
.mfa-open-app { display: inline-flex; align-items: center; min-height: var(--bw-tap); font-weight: 600; }

/* ---------- Inline confirmation (never a pop-up) ---------- */

.inline-check {
  background: var(--bw-fail-bg);
  border-left: var(--bw-stripe) solid var(--bw-fail);
  border-radius: var(--bw-radius);
  padding: var(--bw-space-4);
  margin: var(--bw-space-3) 0;
  display: flex;
  flex-direction: column;
  gap: var(--bw-space-3);
  flex-basis: 100%;
}
.inline-check-question { margin: 0; font-weight: 600; }
.inline-check-buttons { display: flex; flex-wrap: wrap; gap: var(--bw-space-3); }

/* ---------- Actions ---------- */

.action-bar { display: flex; flex-direction: column; gap: var(--bw-space-4); }
.action-group-title { font-size: var(--bw-size-small); text-transform: uppercase; color: var(--bw-muted); margin: 0 0 var(--bw-space-2); }
.action-row { display: flex; flex-wrap: wrap; gap: var(--bw-space-3); }
.action { display: contents; }
.inline-form {
  flex-basis: 100%;
  background: var(--bw-subtle);
  border-radius: var(--bw-radius);
  padding: var(--bw-space-4);
}

/* ---------- Forms ---------- */

.form { display: flex; flex-direction: column; gap: var(--bw-space-5); max-width: var(--bw-form); }
.form-note { margin: 0; color: var(--bw-muted); font-size: var(--bw-size-small); }
.field { display: flex; flex-direction: column; gap: var(--bw-space-2); min-width: 0; }
.field-tick { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--bw-space-3); }
.field-tick .field-hint, .field-tick .field-error, .field-tick .field-warning { flex-basis: 100%; }
.field-label { font-weight: 600; }
.field-hint { margin: 0; color: var(--bw-muted); font-size: var(--bw-size-small); }
.field-warning { margin: 0; color: var(--bw-warn); font-size: var(--bw-size-small); }
.field-error { margin: 0; color: var(--bw-fail); font-size: var(--bw-size-small); font-weight: 600; }
.form-errors {
  border-left: var(--bw-stripe) solid var(--bw-fail);
  background: var(--bw-fail-bg);
  border-radius: var(--bw-radius);
  padding: var(--bw-space-3) var(--bw-space-4);
}
.form-errors p { margin: 0; }
.form-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--bw-space-3);
  position: sticky;
  bottom: 0;
  padding: var(--bw-space-3) 0;
  /* Opaque: the sticky bar covers the fields it scrolls over (inherit was transparent). */
  background: var(--bw-surface);
}

.input, .select {
  width: 100%;
  min-height: var(--bw-control);
  padding: 0 var(--bw-space-5);
  border: 1px solid var(--bw-line);
  border-radius: var(--bw-pill);
  background: var(--bw-surface);
  color: var(--bw-ink);
  font: inherit;
}
.textarea {
  width: 100%;
  min-height: 7rem;
  padding: var(--bw-space-4) var(--bw-space-5);
  border: 1px solid var(--bw-line);
  border-radius: var(--bw-radius-area);
  background: var(--bw-surface);
  color: var(--bw-ink);
  font: inherit;
  resize: vertical;
}
[aria-invalid="true"] { border-color: var(--bw-fail); }
.tick {
  width: 22px;
  height: 22px;
  margin: 11px;
  border-radius: var(--bw-radius-check);
  accent-color: var(--bw-red);
  flex: none;
}
.choices { border: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--bw-space-3); }
.choice { display: inline-flex; align-items: center; min-height: var(--bw-tap); background: var(--bw-subtle); border-radius: var(--bw-pill); padding-right: var(--bw-space-5); }
.date-range { display: grid; gap: var(--bw-space-2); }
.date-range-label { font-size: var(--bw-size-small); color: var(--bw-muted); }
.md-tabs { display: flex; gap: var(--bw-space-3); margin-bottom: var(--bw-space-3); }
.md-preview { background: var(--bw-subtle); border-radius: var(--bw-radius-area); padding: var(--bw-space-4) var(--bw-space-5); min-height: 7rem; }
/* The hint under a Markdown field keeps 8 px from the filled preview box
   (the field's own gap is 4 px; the text area is a control, the preview a box). */
.md-input + .field-hint { margin-top: var(--bw-space-2); }
.file-picker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bw-space-3); }
.file-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--bw-space-3); flex-basis: 100%; }
.file-list li { display: flex; align-items: center; gap: var(--bw-space-3); }
.rows-editor { display: flex; flex-direction: column; gap: var(--bw-space-4); align-items: flex-start; }
.rows-card {
  width: 100%;
  border: 1px solid var(--bw-line);
  border-radius: var(--bw-radius);
  padding: var(--bw-space-4);
  margin: 0;
  display: grid;
  gap: var(--bw-space-4);
}
.rows-card legend { font-weight: 600; padding: 0 var(--bw-space-2); }
.rows-buttons { display: flex; flex-wrap: wrap; gap: var(--bw-space-3); }
@media (min-width: 641px) {
  .rows-card { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
  .rows-card .rows-buttons, .rows-card .inline-check { grid-column: 1 / -1; }
}

/* ---------- Rich text ---------- */

.prose { max-width: var(--bw-measure); }
.prose pre { background: var(--bw-subtle); border-radius: var(--bw-radius-inner); padding: var(--bw-space-4); overflow-x: auto; }
.prose code { font-family: ui-monospace, Consolas, monospace; font-size: 0.92em; }
.prose blockquote { margin: 0; padding-left: var(--bw-space-4); border-left: var(--bw-stripe) solid var(--bw-line); color: var(--bw-muted); }
.mention { color: var(--bw-red); font-weight: 600; }

/* ---------- Tables; cards on a narrow screen ---------- */

.table-scroll { overflow-x: auto; max-width: 100%; border-radius: var(--bw-radius); }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: var(--bw-space-3) var(--bw-space-4); border-bottom: 1px solid var(--bw-line); vertical-align: middle; }
.table thead th { background: var(--bw-subtle); font-size: var(--bw-size-small); overflow-wrap: normal; word-break: keep-all; hyphens: manual; }
.table td { overflow-wrap: normal; }
.cell-actions { width: 1%; }
.cell-actions .action-row { flex-wrap: nowrap; }
.num { display: block; text-align: right; font-variant-numeric: tabular-nums; }
.sort-button { background: none; border: none; font: inherit; font-weight: 600; color: inherit; cursor: pointer; min-height: var(--bw-tap); padding: 0; }
.cell-primary { font-weight: 600; }
.row-link { color: var(--bw-ink); }
.col-select { width: 1%; }

tr.accent-warn > :first-child { box-shadow: inset var(--bw-stripe) 0 var(--bw-warn); }
tr.accent-info > :first-child { box-shadow: inset var(--bw-stripe) 0 var(--bw-red); }
tr.accent-danger > :first-child { box-shadow: inset var(--bw-stripe) 0 var(--bw-fail); }
tr.accent-success > :first-child { box-shadow: inset var(--bw-stripe) 0 var(--bw-ok); }

@media (max-width: 1023px) {
  .cards-narrow thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .cards-narrow, .cards-narrow tbody, .cards-narrow tr, .cards-narrow td { display: block; width: 100%; }
  .cards-narrow tr {
    background: var(--bw-surface);
    border-radius: var(--bw-radius);
    box-shadow: var(--bw-shadow);
    padding: var(--bw-space-3) var(--bw-space-4);
    margin-bottom: var(--bw-space-4);
  }
  .cards-narrow td { border: none; padding: var(--bw-space-2) 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--bw-space-3); }
  .cards-narrow td[data-label]::before { content: attr(data-label); color: var(--bw-muted); font-size: var(--bw-size-small); min-width: 7rem; }
  .cards-narrow td.cell-primary::before, .cards-narrow td.cell-actions::before { content: none; }
  .cards-narrow td.cell-primary { font-size: 1.05rem; }
  .cards-narrow .col-wide { display: none; }
  .cards-narrow td.cell-actions { width: 100%; }
  .cards-narrow .cell-actions .action-row { flex-wrap: wrap; }
  .cards-narrow tr > :first-child { box-shadow: none; }
  .cards-narrow tr.accent-warn { box-shadow: inset var(--bw-stripe) 0 var(--bw-warn), var(--bw-shadow); }
  .cards-narrow tr.accent-info { box-shadow: inset var(--bw-stripe) 0 var(--bw-red), var(--bw-shadow); }
  .cards-narrow tr.accent-danger { box-shadow: inset var(--bw-stripe) 0 var(--bw-fail), var(--bw-shadow); }
  .cards-narrow tr.accent-success { box-shadow: inset var(--bw-stripe) 0 var(--bw-ok), var(--bw-shadow); }
}

/* ---------- List page ---------- */

.list { display: flex; flex-direction: column; gap: var(--bw-space-4); }
.filter-bar { display: flex; flex-direction: column; gap: var(--bw-space-3); }
.filter { display: block; }
.toolbar { display: flex; flex-wrap: wrap; gap: var(--bw-space-3); }
@media (min-width: 641px) {
  .filter-bar { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .filter-bar .search { width: 16rem; }
  .filter-bar .select { width: auto; }
  .toolbar { margin-left: auto; }
}
.bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bw-space-3);
  background: var(--bw-subtle);
  border-radius: var(--bw-radius);
  padding: var(--bw-space-3) var(--bw-space-4);
}
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--bw-space-3); }

/* ---------- Tiles ---------- */

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--bw-space-3); }
.tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bw-space-1);
  min-height: var(--bw-tap);
  padding: var(--bw-space-4);
  border: none;
  border-left: var(--bw-stripe) solid var(--bw-line);
  border-radius: var(--bw-radius);
  background: var(--bw-surface);
  box-shadow: var(--bw-shadow);
  color: var(--bw-ink);
  font: inherit;
  text-align: left;
}
button.tile { cursor: pointer; }
.tile.active { outline: 2px solid var(--bw-red); }
.tile.sev-success { border-left-color: var(--bw-ok); }
.tile.sev-warn { border-left-color: var(--bw-warn); }
.tile.sev-danger { border-left-color: var(--bw-fail); }
.tile.sev-info, .tile.sev-primary { border-left-color: var(--bw-red); }
.tile.sev-contrast { border-left-color: var(--bw-dark); }
.tile-value { font-family: var(--bw-display); font-size: 1.6rem; font-weight: 700; white-space: nowrap; }
.tile-label { color: var(--bw-muted); font-size: var(--bw-size-small); }
@media (min-width: 1024px) {
  .tile { flex-direction: row; align-items: baseline; gap: var(--bw-space-3); }
  .tile-value { font-size: 1.25rem; }
}

/* ---------- Detail ---------- */

.detail { display: flex; flex-direction: column; gap: var(--bw-space-5); }
.detail-tools { display: flex; justify-content: flex-end; }
.detail.side-first .detail-side { order: -1; }
.detail-main, .detail-side { min-width: 0; }
@media (min-width: 992px) {
  .detail.has-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 30rem); align-items: start; }
  .detail.has-side .detail-tools { grid-column: 1 / -1; }
  .detail.side-first .detail-side { order: 0; }
}
.fields { margin: 0; display: grid; gap: var(--bw-space-3); }
.fields-row { display: grid; gap: var(--bw-space-1); }
.fields dt { color: var(--bw-muted); font-size: var(--bw-size-small); }
.fields dd { margin: 0; }
@media (min-width: 641px) {
  .fields-row { grid-template-columns: 10rem minmax(0, 1fr); gap: var(--bw-space-4); }
}
.attachments, .explorer, .checklist-items, .timeline-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--bw-space-3); }
.attachment, .explorer-item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bw-space-3); min-height: var(--bw-tap); border-bottom: 1px solid var(--bw-line); padding-bottom: var(--bw-space-3); }
.attachment-name { font-weight: 600; flex: 1 1 12rem; }
.upload { display: flex; flex-direction: column; gap: var(--bw-space-3); margin-top: var(--bw-space-4); align-items: flex-start; }
/* A small upload box: its buttons stay in place (a sticky bar would float over the box). */
.upload > .form-buttons { position: static; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--bw-space-3); padding: 0; margin: 0 0 var(--bw-space-4); }
.breadcrumb li + li::before { content: "/"; color: var(--bw-muted); margin-right: var(--bw-space-3); }
.preview-media { max-width: 100%; height: auto; border-radius: var(--bw-radius-inner); }

.chart-svg { width: 100%; height: auto; display: block; background: var(--bw-subtle); border-radius: var(--bw-radius-inner); }
.chart-line { stroke-width: 3; stroke-linejoin: round; }
.series-1 { fill: var(--bw-series-1); stroke: var(--bw-series-1); }
.series-2 { fill: var(--bw-series-2); stroke: var(--bw-series-2); }
.series-3 { fill: var(--bw-series-3); stroke: var(--bw-series-3); }
.series-4 { fill: var(--bw-series-4); stroke: var(--bw-series-4); }
.series-5 { fill: var(--bw-series-5); stroke: var(--bw-series-5); }
.series-sev-success { fill: var(--bw-ok); stroke: var(--bw-ok); }
.series-sev-warn { fill: var(--bw-warn); stroke: var(--bw-warn); }
.series-sev-danger { fill: var(--bw-fail); stroke: var(--bw-fail); }
.series-sev-info, .series-sev-primary { fill: var(--bw-red); stroke: var(--bw-red); }
.series-sev-secondary { fill: var(--bw-muted); stroke: var(--bw-muted); }
.series-sev-contrast { fill: var(--bw-ink); stroke: var(--bw-ink); }
polyline.chart-line { fill: none; }
.chart-legend { list-style: none; display: flex; flex-wrap: wrap; gap: var(--bw-space-4); padding: 0; margin: var(--bw-space-3) 0; }
.legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: var(--bw-space-2); }
.legend-dot.series-1 { background: var(--bw-series-1); }
.legend-dot.series-2 { background: var(--bw-series-2); }
.legend-dot.series-3 { background: var(--bw-series-3); }
.legend-dot.series-4 { background: var(--bw-series-4); }
.legend-dot.series-5 { background: var(--bw-series-5); }
.legend-dot.series-sev-success { background: var(--bw-ok); }
.legend-dot.series-sev-warn { background: var(--bw-warn); }
.legend-dot.series-sev-danger { background: var(--bw-fail); }
.legend-dot.series-sev-info, .legend-dot.series-sev-primary { background: var(--bw-red); }
.legend-dot.series-sev-secondary { background: var(--bw-muted); }
.legend-dot.series-sev-contrast { background: var(--bw-ink); }
.chart-table summary { min-height: var(--bw-tap); display: flex; align-items: center; cursor: pointer; font-weight: 600; color: var(--bw-red); }

.checklist-progress { display: flex; align-items: center; gap: var(--bw-space-3); margin-bottom: var(--bw-space-3); }
.checklist-progress progress { flex: 1; height: var(--bw-space-3); accent-color: var(--bw-ok); }
.checklist-item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bw-space-2); }
.checklist-item label { flex: 1 1 10rem; }
.checklist-item.done label { color: var(--bw-muted); text-decoration: line-through; }
.checklist-add { display: flex; gap: var(--bw-space-3); margin-top: var(--bw-space-4); }

.timeline-entry { border-left: var(--bw-stripe) solid var(--bw-line); padding: var(--bw-space-2) 0 var(--bw-space-2) var(--bw-space-4); }
.timeline-event { color: var(--bw-muted); font-size: var(--bw-size-small); }
.timeline-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--bw-space-3); }
.timeline-head time { color: var(--bw-muted); font-size: var(--bw-size-small); }
.timeline-text { white-space: pre-wrap; margin: var(--bw-space-2) 0; }
.timeline-post { display: flex; flex-direction: column; gap: var(--bw-space-3); margin-top: var(--bw-space-4); }

/* ---------- Board ---------- */

.board-wrap { display: flex; flex-direction: column; gap: var(--bw-space-4); }
.board { display: flex; gap: var(--bw-space-4); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--bw-space-3); }
.board-column {
  flex: 0 0 min(85vw, 20rem);
  scroll-snap-align: start;
  background: var(--bw-subtle);
  border-top: var(--bw-stripe) solid var(--bw-line);
  border-radius: var(--bw-radius);
  padding: var(--bw-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--bw-space-3);
}
.board-column.sev-success { border-top-color: var(--bw-ok); }
.board-column.sev-warn { border-top-color: var(--bw-warn); }
.board-column.sev-danger { border-top-color: var(--bw-fail); }
.board-column.sev-info, .board-column.sev-primary { border-top-color: var(--bw-red); }
.board-head { display: flex; justify-content: space-between; align-items: baseline; }
.board-title { font-size: 1rem; margin: 0; }
.board-count { color: var(--bw-muted); font-size: var(--bw-size-small); }
.board-count.over { color: var(--bw-warn); font-weight: 700; }
.card {
  background: var(--bw-surface);
  border-radius: var(--bw-radius-inner);
  box-shadow: var(--bw-shadow);
  padding: var(--bw-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--bw-space-3);
}
.card-title { font-size: 1rem; margin: 0; }
/* A card that is one link as a whole: the link fills the card (padding
   included), no underline on the body text; the title shows it on hover
   and keyboard focus. Use: li.card > a.card-link > h3.card-title + p. */
.card:has(> .card-link) { padding: 0; gap: 0; }
/* Its other children (labels, actions) keep the card's inner padding, also at the bottom edge. */
.card:has(> .card-link) > :not(.card-link) { margin: 0 var(--bw-space-4) var(--bw-space-4); }
.card-link { display: flex; flex-direction: column; gap: var(--bw-space-3); height: 100%; padding: var(--bw-space-4); border-radius: inherit; color: var(--bw-ink); text-decoration: none; }
.card-link .card-title { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.15em; }
.card-link:hover .card-title, .card-link:focus-visible .card-title { text-decoration-color: currentColor; }
.card-link:hover { background: var(--bw-subtle); }
.card-lines { margin: 0; display: grid; gap: var(--bw-space-1); font-size: var(--bw-size-small); }
.card-lines div { display: flex; gap: var(--bw-space-3); }
.card-lines dt { color: var(--bw-muted); }
.card-lines dd { margin: 0; }
.board-move { display: flex; flex-wrap: wrap; gap: var(--bw-space-3); }

/* ---------- Shell (DESIGN.md §6) ---------- */

.shell { min-height: 100vh; }
.rail {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(var(--bw-rail), 85vw);
  background: var(--bw-dark);
  color: var(--bw-on-dark);
  display: flex;
  flex-direction: column;
  gap: var(--bw-space-4);
  padding: var(--bw-space-5) var(--bw-space-4);
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform var(--bw-speed);
  z-index: 20;
}
.rail.open { transform: none; }
.rail-brand { display: flex; align-items: center; gap: var(--bw-space-3); font-family: var(--bw-display); font-weight: 700; }
.rail-logo { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--bw-red); color: var(--bw-on-red); }
.rail-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--bw-space-1); }
.rail-group-label { margin: var(--bw-space-3) var(--bw-space-4) var(--bw-space-2); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bw-rail-muted); }
.rail-item {
  display: flex;
  align-items: center;
  gap: var(--bw-space-3);
  min-height: var(--bw-tap);
  padding: 0 var(--bw-space-4);
  border-radius: var(--bw-pill);
  color: var(--bw-on-dark);
  text-decoration: none;
}
.rail-item:hover { background: var(--bw-rail-hover); }
.rail-item.active { background: var(--bw-red); color: var(--bw-rail-active-fg); font-weight: 600; }
.rail-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-count { flex: none; min-width: 20px; height: 20px; padding: 0 var(--bw-space-2); border-radius: var(--bw-pill); background: var(--bw-red); color: var(--bw-on-red); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.rail-item.active .rail-count { background: var(--bw-surface); color: var(--bw-red); }
.rail-foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--bw-space-3); }
.rail-version { margin: 0; color: var(--bw-rail-muted); font-size: var(--bw-size-tiny); padding: 0 var(--bw-space-4); }

.shell-body { display: flex; flex-direction: column; min-height: 100vh; padding-bottom: calc(var(--bw-tap) + var(--bw-space-5)); }
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--bw-space-3);
  min-height: var(--bw-topbar);
  padding: var(--bw-space-2) var(--bw-side);
  background: var(--bw-surface);
  box-shadow: var(--bw-shadow);
}
.topbar .page-title { font-size: 1.1rem; margin: 0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-right { display: flex; align-items: center; gap: var(--bw-space-3); }
.bell { position: relative; }
.bell-count {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  border-radius: var(--bw-pill);
  background: var(--bw-red);
  color: var(--bw-on-red);
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--bw-space-2);
}
.account .person-name { display: none; }
@media (min-width: 481px) { .account .person-name { display: inline; } }
.content { padding: var(--bw-space-5) var(--bw-side); outline: none; flex: 1; min-width: 0; }

.bottom-nav {
  position: fixed;
  inset: auto 0 0 0;
  display: flex;
  justify-content: space-around;
  background: var(--bw-surface);
  box-shadow: var(--bw-shadow-up);
  padding: var(--bw-space-2) var(--bw-space-3);
  z-index: 15;
}
.bottom-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: var(--bw-tap);
  min-width: var(--bw-tap);
  padding: var(--bw-space-3);   /* icon + label keep 8 px inside the active pill */
  border-radius: var(--bw-pill);
  color: var(--bw-ink);
  text-decoration: none;
  font-size: var(--bw-size-tiny);
}
.bottom-item.active { background: var(--bw-red); color: var(--bw-on-red); font-weight: 600; }

@media (min-width: 1024px) {
  .rail { transform: none; width: var(--bw-rail); }
  .hamburger, .bottom-nav { display: none; }
  .shell-body { margin-left: var(--bw-rail); padding-bottom: 0; }
}

/* ---------- Code and diff (CONTRACT.md §code, §diff) ---------- */

.code, .diff { display: flex; flex-direction: column; gap: var(--bw-space-3); min-width: 0; }
.code-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--bw-space-3); }
.code-file { font-family: ui-monospace, Consolas, monospace; font-size: var(--bw-size-small); color: var(--bw-muted); overflow-wrap: anywhere; }
.code-scroll { overflow-x: auto; max-width: 100%; background: var(--bw-subtle); border-radius: var(--bw-radius-inner); }
.code-pre { margin: 0; padding: var(--bw-space-3) 0; font-family: ui-monospace, Consolas, monospace; font-size: var(--bw-size-small); line-height: 1.55; overflow-wrap: normal; white-space: pre; }
.code-pre:not(:has(> .code-line, > .diff-line, > .diff-head)) { padding: var(--bw-space-3) var(--bw-space-4); }
.code-line, .diff-line, .diff-head { display: block; padding: 0 var(--bw-space-4) 0 0; min-width: max-content; }
.code-nr { display: inline-block; min-width: 3.5em; padding: 0 var(--bw-space-3); text-align: right; color: var(--bw-muted); user-select: none; }
.diff-mark { display: inline-block; width: 1.5em; text-align: center; user-select: none; }
.diff-head { color: var(--bw-muted); padding-left: var(--bw-space-4); }
.diff-add { background: var(--bw-code-add-bg); }
.diff-del { background: var(--bw-code-del-bg); }
.diff-plus { color: var(--bw-ok); font-weight: 600; }
.diff-minus { color: var(--bw-fail); font-weight: 600; }
.diff-total { margin: 0; color: var(--bw-muted); font-size: var(--bw-size-small); }
.diff-file { border: 1px solid var(--bw-line); border-radius: var(--bw-radius-inner); padding: var(--bw-space-2) var(--bw-space-3); }
.diff-summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bw-space-3); min-height: var(--bw-tap); cursor: pointer; }
.diff-path { font-family: ui-monospace, Consolas, monospace; font-size: var(--bw-size-small); overflow-wrap: anywhere; flex: 1 1 12rem; }
.diff-hunk { margin: var(--bw-space-3) 0; }
.tok.k, .tok.kc, .tok.kd, .tok.kn, .tok.kp, .tok.kr, .tok.kt, .tok.nt { color: var(--bw-code-keyword); font-weight: 600; }
.tok.s, .tok.sa, .tok.sb, .tok.sc, .tok.dl, .tok.sd, .tok.s2, .tok.se, .tok.sh, .tok.si, .tok.sx, .tok.sr, .tok.s1, .tok.ss { color: var(--bw-code-string); }
.tok.c, .tok.ch, .tok.cm, .tok.cp, .tok.cpf, .tok.c1, .tok.cs { color: var(--bw-code-comment); font-style: italic; }
.tok.m, .tok.mb, .tok.mf, .tok.mh, .tok.mi, .tok.il, .tok.mo { color: var(--bw-code-number); }
.tok.nf, .tok.fm, .tok.nc, .tok.nb, .tok.bp, .tok.na { color: var(--bw-code-name); }
.tok.gd { background: var(--bw-code-del-bg); }
.tok.gi { background: var(--bw-code-add-bg); }
.tok.err { color: var(--bw-fail); }

/* ---------- Row-editor totals, mentions ---------- */

.rows-total { margin: 0; display: flex; gap: var(--bw-space-3); align-items: baseline; }
.rows-grand { margin: 0; font-weight: 700; display: flex; gap: var(--bw-space-3); align-items: baseline; }
.num-inline { font-variant-numeric: tabular-nums; }
.mention-field { display: flex; flex-direction: column; gap: var(--bw-space-2); }
.mention-list { list-style: none; margin: 0; padding: var(--bw-space-2); background: var(--bw-surface); border: 1px solid var(--bw-line); border-radius: var(--bw-radius-inner); display: flex; flex-direction: column; gap: var(--bw-space-1); }
.mention-option { min-height: var(--bw-tap); display: flex; align-items: center; gap: var(--bw-space-2); padding: 0 var(--bw-space-4); border-radius: var(--bw-pill); cursor: pointer; }
.mention-option.active { background: var(--bw-subtle); font-weight: 600; }
.timeline-who { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--bw-space-3); }
.timeline-internal { background: var(--bw-warn-bg); border-left-color: var(--bw-warn); border-radius: 0 var(--bw-radius-inner) var(--bw-radius-inner) 0; }
.timeline-entry.accent-warn { border-left-color: var(--bw-warn); }
.timeline-entry.accent-info { border-left-color: var(--bw-red); }
.timeline-entry.accent-danger { border-left-color: var(--bw-fail); }
.timeline-entry.accent-success { border-left-color: var(--bw-ok); }

/* ---------- Row menu (inline, no layer over the page), quick create ---------- */

.row-menu { display: flex; flex-direction: column; align-items: flex-end; gap: var(--bw-space-2); }
.row-menu-button { font-size: 1.2rem; line-height: 1; }
.row-menu-list { list-style: none; margin: 0; padding: var(--bw-space-2); min-width: 12rem; background: var(--bw-surface); border: 1px solid var(--bw-line); border-radius: var(--bw-radius-inner); box-shadow: var(--bw-shadow); display: flex; flex-direction: column; gap: var(--bw-space-1); }
.row-menu-item { display: flex; align-items: center; width: 100%; min-height: var(--bw-tap); padding: 0 var(--bw-space-4); border: none; border-radius: var(--bw-pill); background: none; font: inherit; color: var(--bw-ink); text-align: left; white-space: nowrap; cursor: pointer; }
.row-menu-item:hover, .row-menu-item:focus-visible { background: var(--bw-subtle); }
.row-menu-item.danger { color: var(--bw-fail); font-weight: 600; }
.row-menu-sep { border-top: 1px solid var(--bw-line); margin-top: var(--bw-space-2); padding-top: var(--bw-space-2); }
.quick-create { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bw-space-3); padding: var(--bw-space-3); background: var(--bw-surface); border: 1px solid var(--bw-line); border-radius: var(--bw-radius); }
.quick-create-text { flex: 1 1 16rem; min-width: 0; }
.quick-create-select { flex: 0 1 11rem; min-width: 8rem; }
.quick-create-error { flex-basis: 100%; }

/* ---------- Views: cards, reader, tiles, sortable ---------- */

.cards-grid, .tiles-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--bw-space-4); }
.list-card { height: 100%; }
.list-card.accent-warn { box-shadow: inset var(--bw-stripe) 0 var(--bw-warn), var(--bw-shadow); }
.list-card.accent-info { box-shadow: inset var(--bw-stripe) 0 var(--bw-red), var(--bw-shadow); }
.list-card.accent-danger { box-shadow: inset var(--bw-stripe) 0 var(--bw-fail), var(--bw-shadow); }
.list-card.accent-success { box-shadow: inset var(--bw-stripe) 0 var(--bw-ok), var(--bw-shadow); }
.card-top { display: flex; align-items: flex-start; gap: var(--bw-space-3); }
.card-image { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--bw-radius-inner); }
.card-badges { display: flex; flex-wrap: wrap; gap: var(--bw-space-2); }
.card-badges .label + .label { margin-left: 0; }
.card-summary, .reader-summary, .tile-subtitle { margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tile-subtitle { -webkit-line-clamp: 2; color: var(--bw-muted); font-size: var(--bw-size-small); }
.source-link { font-weight: 600; }
.reader { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--bw-space-4); }
.reader-item { display: flex; gap: var(--bw-space-4); background: var(--bw-surface); border-radius: var(--bw-radius); box-shadow: var(--bw-shadow); padding: var(--bw-space-4); }
.reader-image { width: 6rem; height: 6rem; object-fit: cover; border-radius: var(--bw-radius-inner); flex: none; }
.reader-body { display: flex; flex-direction: column; gap: var(--bw-space-2); min-width: 0; }
.reader-title { margin: 0; font-size: 1.05rem; }
.reader-meta { margin: 0; }
.reader-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bw-space-3); }
.tiles-view { display: flex; flex-direction: column; gap: var(--bw-space-5); }
.tile-group-title { font-size: 1rem; margin: 0 0 var(--bw-space-3); }
.tile-card { position: relative; height: 100%; background: var(--bw-surface); border-radius: var(--bw-radius); box-shadow: var(--bw-shadow); padding: var(--bw-space-4); display: flex; flex-direction: column; gap: var(--bw-space-2); }
.tile-card.disabled { opacity: 0.55; }
.tile-media { width: 3rem; height: 3rem; border-radius: var(--bw-radius-inner); overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--bw-red); color: var(--bw-on-red); font-family: var(--bw-display); font-weight: 700; }
.tile-image { width: 100%; height: 100%; object-fit: cover; }
.tile-pin { position: absolute; top: var(--bw-space-4); right: var(--bw-space-4); }
.tile-title { margin: 0; font-size: 1rem; }
.sortable-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--bw-space-3); }
.sortable-item { display: flex; align-items: center; gap: var(--bw-space-3); background: var(--bw-surface); border-radius: var(--bw-radius); box-shadow: var(--bw-shadow); padding: var(--bw-space-3) var(--bw-space-4); }
.sortable-item.dragging, .board-card.dragging { opacity: 0.5; }
.sortable-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--bw-space-1); }
.sortable-buttons { display: flex; gap: var(--bw-space-2); }
.sortable-nr { min-width: 2rem; text-align: center; color: var(--bw-muted); font-weight: 700; }
.drag-handle { display: inline-flex; align-items: center; justify-content: center; min-width: var(--bw-tap); min-height: var(--bw-tap); cursor: grab; color: var(--bw-muted); touch-action: none; }
.board-card[draggable="true"] { cursor: grab; }
.board-column.drop-target { outline: 2px dashed var(--bw-red); outline-offset: 2px; }
.list-card .meta, .sortable-body .meta, .tile-card .meta, .board-card .meta { margin: 0; }
.tile-group-toggle { color: var(--bw-ink); text-decoration: none; }
.diff-summary::before { content: "▸"; color: var(--bw-muted); }
.diff-file[open] > .diff-summary::before { content: "▾"; }
@media (max-width: 1023px) { .cards-narrow td.cell-actions .row-menu { width: 100%; } }

/* ---------- Accent scopes (a page or block in one of six fixed colours) ----------
   `.accent-red|green|blue|ochre|purple|slate` on a wrapper sets `--bw-accent`
   (with `--bw-on-accent`, the text on it) for everything inside: the `.hero`
   header stripe, block titles, links, primary buttons, the focus ring and
   `.swatch` dots. A fixed list keeps the strict CSP (no inline styles); the
   values are tokens (`--bw-accent-…`, light and dark above). Contrast,
   measured (WCAG AA): light, each accent as text on page, surface and subtle
   and with white text on it 5.2:1 or more (red 6.1, green 5.2, blue 5.9,
   ochre 5.2, purple 6.2, slate 7.9 at the lowest); dark, on page and surface
   and with the dark --bw-on-red text on it 7.5:1 or more, the house red as
   the house has it (5.0 with text, 4.5 on surface). `.accent-red` is the
   house red, so it changes nothing. */

:root { --bw-accent: var(--bw-red); --bw-on-accent: var(--bw-on-red); }
.accent-red { --bw-accent: var(--bw-red); --bw-on-accent: var(--bw-on-red); }
.accent-green { --bw-accent: var(--bw-accent-green); --bw-on-accent: var(--bw-on-red); }
.accent-blue { --bw-accent: var(--bw-accent-blue); --bw-on-accent: var(--bw-on-red); }
.accent-ochre { --bw-accent: var(--bw-accent-ochre); --bw-on-accent: var(--bw-on-red); }
.accent-purple { --bw-accent: var(--bw-accent-purple); --bw-on-accent: var(--bw-on-red); }
.accent-slate { --bw-accent: var(--bw-accent-slate); --bw-on-accent: var(--bw-on-red); }

:is(.accent-red, .accent-green, .accent-blue, .accent-ochre, .accent-purple, .accent-slate) a,
:is(.accent-red, .accent-green, .accent-blue, .accent-ochre, .accent-purple, .accent-slate) .link-button,
:is(.accent-red, .accent-green, .accent-blue, .accent-ochre, .accent-purple, .accent-slate) .block-title { color: var(--bw-accent); }
:is(.accent-red, .accent-green, .accent-blue, .accent-ochre, .accent-purple, .accent-slate) .btn.sev-primary { background: var(--bw-accent); color: var(--bw-on-accent); }
:is(.accent-red, .accent-green, .accent-blue, .accent-ochre, .accent-purple, .accent-slate) :focus-visible { outline-color: var(--bw-accent); }

/* A page header in the accent: a top stripe, an optional wide banner photo
   (rounded, never stretched: a 3:1 crop, so nothing shifts while it loads)
   and a brand row with a small square logo next to the title. */
.hero { border-top: var(--bw-stripe) solid var(--bw-accent); }
.hero-banner { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: cover; border-radius: var(--bw-radius-inner); margin-bottom: var(--bw-space-4); background: var(--bw-subtle); }
.hero-brand { display: flex; align-items: center; gap: var(--bw-space-4); min-width: 0; }
.hero-brand > div { min-width: 0; }
.hero-logo { flex: none; width: 4rem; height: 4rem; object-fit: contain; border-radius: var(--bw-radius-inner); background: var(--bw-surface); box-shadow: var(--bw-shadow); }
@media (min-width: 641px) { .hero-logo { width: 5rem; height: 5rem; } }

/* A colour choice: a radio with a round dot in the accent it picks. */
.swatch { flex: none; display: inline-block; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--bw-accent); margin-right: var(--bw-space-3); box-shadow: 0 0 0 1px var(--bw-line); }

/* A result bar (poll results, shares): a rounded track with a fill in the
   accent. The width comes from a fixed class in steps of 5 % (.bar-w-0 …
   .bar-w-100), never from an inline style (strict CSP). The number is always
   written beside it as text; the bar only repeats it. */
.result-bar { height: var(--bw-space-3); border-radius: var(--bw-pill); background: var(--bw-subtle); box-shadow: inset 0 0 0 1px var(--bw-line); overflow: hidden; margin-top: var(--bw-space-1); }
.result-bar-fill { height: 100%; background: var(--bw-accent); border-radius: inherit; }
.bar-w-0 { width: 0%; } .bar-w-5 { width: 5%; } .bar-w-10 { width: 10%; } .bar-w-15 { width: 15%; } .bar-w-20 { width: 20%; } .bar-w-25 { width: 25%; } .bar-w-30 { width: 30%; } .bar-w-35 { width: 35%; } .bar-w-40 { width: 40%; } .bar-w-45 { width: 45%; } .bar-w-50 { width: 50%; } .bar-w-55 { width: 55%; } .bar-w-60 { width: 60%; } .bar-w-65 { width: 65%; } .bar-w-70 { width: 70%; } .bar-w-75 { width: 75%; } .bar-w-80 { width: 80%; } .bar-w-85 { width: 85%; } .bar-w-90 { width: 90%; } .bar-w-95 { width: 95%; } .bar-w-100 { width: 100%; }

/* A month grid (calendar): seven columns from Monday, drawn as ONE grid
   with hairline separators; the list carries data-bw-join="grid"
   (DESIGN.md §5: seven cells 8 px apart would drop under the 44 px tap
   target on a 390 px phone, so the tap target wins over the gap). A day
   with something is a link that fills its cell. Fits 390 px without
   horizontal scroll; taller cells from 641 px. */
.month-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bw-space-3); }
.month-nav .month-title { margin: 0 auto 0 0; font-family: var(--bw-display); letter-spacing: -0.01em; font-size: 1.1rem; }
.month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--bw-line); border: 1px solid var(--bw-line); border-radius: var(--bw-radius-inner); overflow: hidden; list-style: none; margin: 0; padding: 0; }
.month-grid > li { display: flex; min-width: 0; }
.month-head { justify-content: center; text-align: center; font-size: var(--bw-size-small); color: var(--bw-muted); background: var(--bw-surface); padding: var(--bw-space-3) 0; }
.month-nav + .month-grid { margin-top: var(--bw-space-4); }
.month-day { flex: 1; min-width: 0; min-height: var(--bw-tap); padding: var(--bw-space-3) 0; background: var(--bw-subtle); color: var(--bw-ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--bw-space-1); font-variant-numeric: tabular-nums; text-decoration: none; }
.month-day-blank { background: var(--bw-surface); }
a.month-day:hover { box-shadow: inset 0 0 0 1px var(--bw-line); }
.month-day.month-today { box-shadow: inset 0 0 0 2px var(--bw-red); }
.month-day-count { font-size: var(--bw-size-tiny); }
@media (min-width: 641px) { .month-day { min-height: 4.5rem; } }

/* A photo strip: square thumbnails in a wrapping row, cropped, never
   stretched; .photo-full shows one photo at the column's width. */
.photo-strip { display: flex; flex-wrap: wrap; gap: var(--bw-space-3); list-style: none; margin: 0; padding: 0; }
.photo-strip li { position: relative; display: flex; flex-direction: column; gap: var(--bw-space-2); align-items: flex-start; }
.photo-thumb { display: block; width: 7.5rem; height: 7.5rem; object-fit: cover; border-radius: var(--bw-radius-inner); background: var(--bw-subtle); }
.photo-full { display: block; max-width: 100%; height: auto; border-radius: var(--bw-radius-inner); background: var(--bw-subtle); }

/* A mood scale (1 = very bad … 5 = very good), on a pill (.label) or a day
   cell: tokens only, contrast ≥ 4.5:1 in light and dark (the severity
   pairs, and white-on-ok for 5). Colour is never the only carrier: the
   mood is always written too (text or an accessible name). Last in the
   file, so it wins over a cell's or a choice's own background. */
.mood-1 { background: var(--bw-fail-bg); color: var(--bw-fail); }
.mood-2 { background: var(--bw-warn-bg); color: var(--bw-warn); }
.mood-3 { background: var(--bw-subtle); color: var(--bw-ink); }
.mood-4 { background: var(--bw-ok-bg); color: var(--bw-ok); }
.mood-5 { background: var(--bw-ok); color: var(--bw-surface); }

/* ---------- Vertical rhythm (ADR 0030) ----------
   Nothing on a page touches what is above it. Between the parts of the
   content column (blocks, tiles, action rows, messages): --bw-space-5.
   Inside a block (and an inline form) a kern box or row that follows
   something gets --bw-space-4 above it, so a select never sits on its
   buttons, a pager never on its cards, a result line never on its button
   row. Margins collapse in these flow containers: a larger margin that is
   already there wins. A block that is a flex or grid container (.form, or a
   product's own layout) keeps its own gap; .form is excluded here. Last in
   the file on purpose (it wins over a box's own `margin: 0 0 …`). */
.content > * + * { margin-top: var(--bw-space-5); }
:is(.block:not(.form), .inline-form) > * + :is(.notice, .page-message, .form-errors, .state, .inline-check, .inline-form, .form, .action-row, .action-bar, .form-buttons, .code, .code-scroll, .diff, .pager, .cards-grid, .tiles-grid, .tiles, .table-scroll, .field, .file-picker, .upload, .bulk-bar, .quick-create, .filter-bar, .list, .card, .reader, .sortable-list, .status-list, .options, .mfa-qr, .fields, .checklist, .timeline, .board-wrap) { margin-top: var(--bw-space-4); }
/* Cards stacked in a plain list (sessions, tokens): 8 px apart; the card
   grids keep their own gap. */
:where(ul, ol):not(.cards-grid, .tiles-grid) > li.card + li.card { margin-top: var(--bw-space-3); }