/* ──────────────────────────────────────────────────────────────
   TOKENS
   ────────────────────────────────────────────────────────────── */
:root {
  /* paper neutrals */
  --paper-0: oklch(98.4% 0.004 80);     /* page bg */
  --paper-1: oklch(99.2% 0.003 80);     /* card */
  --paper-2: oklch(96.6% 0.006 80);     /* recessed */
  --paper-3: oklch(94.0% 0.008 75);     /* deeper recess */

  --line:    oklch(91% 0.008 75);
  --line-2:  oklch(86% 0.010 70);

  /* ink (cool-shifted) */
  --ink-0:   oklch(20% 0.018 250);
  --ink-1:   oklch(32% 0.014 250);
  --ink-2:   oklch(48% 0.012 250);
  --ink-3:   oklch(62% 0.010 250);
  --ink-4:   oklch(74% 0.008 250);

  /* accent — clay (tweakable) */
  --accent:  oklch(58% 0.115 36);
  --accent-soft: oklch(58% 0.115 36 / 0.10);
  --accent-line: oklch(58% 0.115 36 / 0.28);
  /* one hover shade for the clay primary button (tracks whatever --accent
     resolves to, including the app-2 re-skin + the night theme). */
  --accent-hover: color-mix(in oklch, var(--accent) 90%, white);

  /* semantic */
  --good:    oklch(52% 0.085 155);
  --warn:    oklch(64% 0.110 70);
  --bad:     oklch(54% 0.130 25);

  --shadow-sm: 0 1px 2px oklch(20% 0.02 250 / 0.05), 0 6px 18px oklch(20% 0.02 250 / 0.06);
  --shadow-md: 0 2px 4px oklch(20% 0.02 250 / 0.06), 0 14px 40px oklch(20% 0.02 250 / 0.09);
  --shadow-lg: 0 2px 6px oklch(20% 0.02 250 / 0.06), 0 18px 48px oklch(20% 0.02 250 / 0.12);

  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --sb-w: 232px;

  /* density (tweakable) */
  --pad-card: 26px;
  --gap-grid: 18px;
}

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

html, body {
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  color: var(--ink-0);
  background: var(--paper-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
  min-height: 100vh;
  /* Reserve the scrollbar gutter so locking page scroll (overlay open)
     doesn't shift the layout when the scrollbar disappears. */
  scrollbar-gutter: stable;
}

body {
  display: flex;
  background:
    radial-gradient(1100px 600px at 100% -10%, oklch(58% 0.115 36 / 0.05), transparent 60%),
    radial-gradient(900px 500px at -10% 100%, oklch(48% 0.06 250 / 0.04), transparent 60%),
    var(--paper-0);
}

/* ── APP BACKGROUND ──────────────────────────────────────────
   Sits behind everything (sidebar at z:60, cards in flow, chat).
   White base + subtle 16×16px dot grid. Cards paint on top via
   their own opaque bg; pattern shows in the gaps. */
.app-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: #ffffff;
  background-image: radial-gradient(#e5e7eb 1px, transparent 1px);
  background-size: 16px 16px;
}
/* Main content sits ABOVE the fixed bg layer. .main isn't positioned
   in normal flow, so we give it an explicit stacking context. */
.main { position: relative; z-index: 1; }

/* shared atoms */
.serif { font-family: 'Geist', sans-serif; font-weight: 400; letter-spacing: -0.005em; }
.mono  { font-family: 'Geist Mono', ui-monospace, monospace; }

.eyebrow {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.hairline { height: 1px; background: var(--line); border: 0; }

::selection { background: var(--accent-soft); color: var(--ink-0); }

/* ──────────────────────────────────────────────────────────────
   SIDEBAR
   ────────────────────────────────────────────────────────────── */
.sidebar {
  position: fixed; inset: 0 auto 0 0;
  width: var(--sb-w);
  border-right: 1px solid var(--line);
  background:
    linear-gradient(180deg, var(--paper-1), var(--paper-0));
  display: flex; flex-direction: column;
  z-index: 60;
  overflow-y: auto;
}

.brand {
  padding: 22px 22px 18px;
  display: flex; align-items: baseline; gap: 10px;
}
.brand-mark {
  width: 30px; height: 30px;
  border-radius: 9px;
  background: linear-gradient(150deg, var(--ink-0), var(--ink-1) 60%, var(--accent));
  display: grid; place-items: center;
  color: var(--paper-1);
  font-family: 'Geist', sans-serif;
  font-size: 19px;
  line-height: 1;
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.18), 0 1px 2px oklch(20% 0.02 250 / 0.18);
}
.brand-mark span { transform: translateY(-1px); }
.brand-name {
  font-family: 'Geist', sans-serif;
  font-size: 24px;
  letter-spacing: 0.02em;
  color: var(--ink-0);
  margin-left: 2px;
}
.brand-sub {
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-top: 1px;
}

.nav { padding: 8px 12px; display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.nav-section {
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.20em;
  color: var(--ink-4);
  text-transform: uppercase;
  padding: 16px 10px 6px;
}
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease);
  border: none; background: transparent; width: 100%; text-align: left;
}
.nav-item:hover { background: var(--paper-2); color: var(--ink-0); }
.nav-item.active {
  background: var(--paper-2);
  color: var(--ink-0);
  box-shadow: inset 0 0 0 1px var(--line);
}
.nav-item.active .nav-dot { background: var(--accent); }
.nav-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ink-4);
  flex-shrink: 0;
}
.nav-kbd {
  margin-left: auto;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--ink-4);
}
.nav-badge {
  margin-left: auto;
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 2px 7px;
  border-radius: 999px;
}

.sb-bottom {
  flex-shrink: 0;
  padding: 14px 14px 16px;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 12px;
}
.user-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--paper-2);
  border: 1px solid var(--line);
}
.avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), oklch(45% 0.08 25));
  color: white;
  display: grid; place-items: center;
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  flex-shrink: 0;
}
.user-name { font-size: 12.5px; color: var(--ink-0); font-weight: 500; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-org  { font-size: 10.5px; color: var(--ink-3); line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-logout {
  width: 24px; height: 24px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  display: grid; place-items: center;
  font-size: 12px; line-height: 1;
  flex-shrink: 0;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.user-logout:hover { background: var(--paper-3); color: var(--bad); border-color: oklch(54% 0.130 25 / 0.4); }
.user-logout:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Workspace switcher (Group C — Life accounts) ── */
.sb-bottom { position: relative; }
.user-chip.switchable { cursor: pointer; transition: border-color var(--ease), background var(--ease); }
.user-chip.switchable:hover { border-color: var(--accent); background: var(--paper-3); }
.ws-caret { color: var(--ink-3); display: grid; place-items: center; flex-shrink: 0; }
.ws-switcher {
  position: absolute; left: 14px; right: 14px; bottom: 64px;
  background: var(--paper-1, #fff); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,0.16);
  padding: 6px; display: none; flex-direction: column; gap: 2px; z-index: 60;
}
.ws-switcher.open { display: flex; }
.ws-row {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 10px; border-radius: 8px; border: 0; background: transparent;
  cursor: pointer; text-align: left; font-size: 12.5px; color: var(--ink-1);
  transition: background var(--ease);
}
.ws-row:hover { background: var(--paper-2); }
.ws-row.active { background: var(--paper-2); font-weight: 600; }
.ws-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-live { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2, #c9c4bb); flex-shrink: 0; }
.ws-live.on { background: oklch(62% 0.17 145); box-shadow: 0 0 0 3px oklch(62% 0.17 145 / 0.18); }
.ws-check { color: var(--accent); font-size: 12px; flex-shrink: 0; }
.ws-sep { height: 1px; background: var(--line); margin: 4px 2px; }
.ws-add {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 8px 10px; border-radius: 8px; border: 0; background: transparent;
  cursor: pointer; text-align: left; font-size: 12.5px; font-weight: 600; color: var(--accent);
  transition: background var(--ease);
}
.ws-add:hover { background: var(--paper-2); }

/* ── Auto-pilot Settings surface (Group C) ── */
.ap-meta { font-size: 11.5px; color: var(--ink-3); margin-top: 5px; font-variant-numeric: tabular-nums; }
.ap-paused { color: oklch(62% 0.12 75); font-weight: 600; }
.ap-err { font-size: 12px; color: var(--bad); margin-top: 6px; }

/* ── Add-buddy modal (Group C) ── */
.ws-add-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; }
.ws-add-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.32); }
.ws-add-card {
  position: relative; background: var(--paper-1, #fff); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: 0 24px 70px rgba(0,0,0,0.28);
  padding: 22px; width: 360px; max-width: calc(100vw - 32px);
}
.ws-add-title { font-size: 16px; font-weight: 700; color: var(--ink-0); }
.ws-add-sub { font-size: 12.5px; color: var(--ink-3); margin: 4px 0 14px; }
.ws-add-input {
  width: 100%; padding: 10px 12px; font-size: 14px; font-family: inherit;
  border: 1px solid var(--line); border-radius: 9px; background: var(--paper-2, #fff);
  color: var(--ink-0); outline: none; transition: border-color var(--ease), box-shadow var(--ease);
}
.ws-add-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ws-add-err { font-size: 12px; color: var(--bad); margin-top: 8px; min-height: 1px; }
.ws-add-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

.status-line {
  display: flex; align-items: center; gap: 7px;
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.10em;
  color: var(--ink-3);
  text-transform: uppercase;
  padding: 0 4px;
}
.pulse {
  width: 6px; height: 6px; border-radius: 50%; background: var(--good);
  animation: pulse 2.4s ease-in-out infinite;
  box-shadow: 0 0 0 0 oklch(52% 0.085 155 / 0.55);
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 oklch(52% 0.085 155 / 0.55); }
  50% { box-shadow: 0 0 0 5px oklch(52% 0.085 155 / 0); }
}

/* ──────────────────────────────────────────────────────────────
   MAIN
   ────────────────────────────────────────────────────────────── */
.main {
  margin-left: var(--sb-w);
  flex: 1;
  padding: 36px 44px 200px;
  max-width: calc(100vw - var(--sb-w));
}

.page { display: none; animation: page-in .35s var(--ease); }
.page.active { display: block; }
@keyframes page-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 28px;
  gap: 24px;
}

.greet-eyebrow {
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 10px;
}
.greet-eyebrow::after {
  content: ''; height: 1px; flex: 1; max-width: 90px;
  background: linear-gradient(90deg, var(--line), transparent);
}
.greet {
  font-family: 'Geist', sans-serif;
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink-0);
}
.greet em { font-style: italic; color: var(--ink-2); }
.greet-sub {
  margin-top: 10px;
  font-size: 14.5px;
  color: var(--ink-2);
  max-width: 580px;
  line-height: 1.5;
}

.metric-rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  min-width: 480px;
  align-self: stretch;
}
.metric {
  background: var(--paper-1);
  padding: 14px 18px;
  display: flex; flex-direction: column; gap: 4px;
}
.metric-lbl {
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.metric-val {
  font-family: 'Geist', sans-serif;
  font-size: 28px;
  line-height: 1;
  color: var(--ink-0);
  letter-spacing: -0.01em;
  display: flex; align-items: baseline; gap: 5px;
}
.metric-val small {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--ink-3);
  font-style: normal;
}
.metric-delta {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--good);
}
.metric-delta.down { color: var(--bad); }

/* ──────────────────────────────────────────────────────────────
   GRID + CARDS
   ────────────────────────────────────────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: var(--gap-grid);
  align-items: start;
}
.col { display: flex; flex-direction: column; gap: var(--gap-grid); }

/* A4.4 (W3.3b, reworked rev 22.1) — dashboard customization shell.
   .dash-container is mounted into #dash-mount on the Brief landing by
   block-container.js. The toolbar floats Customize / Add / Cancel / Save
   top-right. The layout is TWO independent column stacks (wide left
   1.55, narrow right 1) — each card fills its column and stacks
   vertically, exactly like the original Brief, so there are never
   auto-flow gaps. Edit mode reveals a small floating tool bar per block
   (drag handle / move-column / cog / remove) and a dashed outline. */
.dash-container { position: relative; }
.dash-toolbar {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-bottom: 14px;
}
.dash-block { position: relative; }
.dash-block-body > * { margin: 0; }
.dash-block-loading {
  padding: 28px 24px; color: var(--ink-3); font-size: 13px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--paper-1);
}
.dash-block.dash-block-ghost { opacity: 0.35; }

/* Edit mode — dashed outline per block + a floating tool bar top-right. */
.dash-container.is-edit .dash-block {
  outline: 2px dashed var(--line-2);
  outline-offset: 4px;
  border-radius: var(--r-md);
  transition: outline-color .18s var(--ease);
}
.dash-container.is-edit .dash-block:hover { outline-color: var(--accent, #6366f1); }
.dash-block-overlay {
  /* Float the tool bar into the outline gap just above the card's top
     edge so it never covers the card's own action button (Calendar →,
     All →, etc.). */
  position: absolute; top: -13px; right: 10px; z-index: 3;
  pointer-events: none;
}
.dash-block-tools {
  display: flex; gap: 3px; pointer-events: auto;
  background: var(--paper-1); border: 1px solid var(--line);
  border-radius: 9px; padding: 3px; box-shadow: var(--shadow-sm);
}
.dash-block-tools button {
  font-size: 12px; line-height: 1; padding: 5px 8px; border-radius: 6px;
}
.dash-block-tools .dash-drag-handle { cursor: grab; }
.dash-block-tools .dash-drag-handle:active { cursor: grabbing; }
.dash-block-tools .dash-x { color: var(--warn, #dc2626); }
@media (max-width: 768px) {
  .dash-toolbar { justify-content: stretch; flex-wrap: wrap; }
}

/* Edit-mode tooltips — styled bubble below each tool button. Geist Mono
   micro-label on dark ink, fades + rises in after a short intent delay so
   it reads as deliberate, not twitchy. */
.dash-block-tools button[data-tip] { position: relative; }
.dash-block-tools button[data-tip]::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 7px); left: 50%;
  transform: translateX(-50%) translateY(-3px);
  background: var(--ink-0); color: var(--paper-0);
  font-family: 'Geist Mono', monospace; font-size: 9.5px; letter-spacing: 0.06em;
  text-transform: uppercase; white-space: nowrap;
  padding: 5px 8px; border-radius: 6px; box-shadow: var(--shadow-md);
  opacity: 0; pointer-events: none;
  transition: opacity .14s var(--ease), transform .14s var(--ease);
}
.dash-block-tools button[data-tip]::before {
  content: ''; position: absolute; top: calc(100% + 2px); left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent; border-bottom-color: var(--ink-0);
  opacity: 0; pointer-events: none; transition: opacity .14s var(--ease);
}
.dash-block-tools button[data-tip]:hover::after {
  opacity: 1; transform: translateX(-50%) translateY(0); transition-delay: .34s;
}
.dash-block-tools button[data-tip]:hover::before { opacity: 1; transition-delay: .34s; }

/* ── Block filter modal (.dash-fm-*) — refined, matches the app's card +
   form language: warm-blur backdrop, serif title under a mono eyebrow,
   pill toggles for booleans, a chip cloud for multiselect, clay Save. ── */
.dash-fm-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: oklch(22% 0.02 250 / 0.42);
  -webkit-backdrop-filter: blur(5px) saturate(1.08);
  backdrop-filter: blur(5px) saturate(1.08);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  animation: dashFmFade .2s var(--ease);
}
@keyframes dashFmFade { from { opacity: 0; } to { opacity: 1; } }
.dash-fm {
  position: relative; width: 100%; max-width: 440px; max-height: 88vh; overflow: auto;
  background: var(--paper-1); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: 26px 26px 20px;
  animation: dashFmRise .26s var(--ease);
}
@keyframes dashFmRise {
  from { opacity: 0; transform: translateY(10px) scale(.975); }
  to   { opacity: 1; transform: none; }
}
.dash-fm::before {
  content: ''; position: absolute; top: 0; left: 26px; right: 26px; height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent 72%);
  border-radius: 0 0 2px 2px;
}
.dash-fm-eyebrow {
  font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-3);
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.dash-fm-eyebrow::after {
  content: ''; height: 1px; flex: 1;
  background: linear-gradient(90deg, var(--line), transparent);
}
.dash-fm-title {
  font-family: 'Geist', sans-serif; font-size: 27px; line-height: 1.04;
  letter-spacing: -0.01em; color: var(--ink-0); margin-bottom: 3px;
}
.dash-fm-sub { font-size: 12px; color: var(--ink-3); margin-bottom: 22px; }
.dash-fm-field { margin-bottom: 16px; }
.dash-fm-label { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink-1); margin-bottom: 8px; }
.dash-fm-select {
  width: 100%; font-family: 'Geist', sans-serif; font-size: 13px; color: var(--ink-0);
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 9px 12px; outline: none; cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.dash-fm-select:focus, .dash-fm-select:hover { border-color: var(--accent-line); background: var(--paper-1); }
/* Boolean → a clickable row with a pill toggle on the right. */
.dash-fm-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  cursor: pointer; padding: 10px 0;
  border-top: 1px solid var(--line);
}
.dash-fm-toggle .dash-fm-label { margin-bottom: 0; }
.dash-fm-switch {
  position: relative; width: 42px; height: 23px; flex: none;
  background: var(--paper-3); border: 1px solid var(--line);
  border-radius: 999px; transition: background .18s var(--ease), border-color .18s var(--ease);
}
.dash-fm-switch::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px;
  border-radius: 50%; background: var(--paper-1); box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease);
}
.dash-fm-switch.on { background: var(--accent); border-color: var(--accent); }
.dash-fm-switch.on::after { transform: translateX(19px); }
/* Multiselect → a chip cloud; selected chips fill with the soft accent. */
.dash-fm-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.dash-fm-chip {
  font-family: 'Geist Mono', monospace; font-size: 10.5px; letter-spacing: 0.03em;
  padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--paper-2); color: var(--ink-3); cursor: pointer;
  transition: all .14s var(--ease); user-select: none;
}
.dash-fm-chip:hover { border-color: var(--line-2); color: var(--ink-1); }
.dash-fm-chip.on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.dash-fm-foot {
  display: flex; align-items: center; gap: 8px;
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line);
}
.dash-fm-foot .dash-fm-reset { margin-right: auto; }

/* ── Bottom-centre Customize / Done pill ── */
.dash-customize-bar { display: flex; justify-content: center; margin-top: 26px; }
.dash-customize-btn {
  font-family: 'Geist', sans-serif; font-size: 13px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--paper-1); color: var(--ink-1);
  box-shadow: var(--shadow-sm);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
}
.dash-customize-btn:hover { border-color: var(--line-2); box-shadow: var(--shadow-md); }
.dash-customize-btn .dash-cz-ico { font-size: 12px; opacity: 0.85; }
.dash-customize-btn.is-done {
  background: var(--accent); border-color: var(--accent); color: oklch(99% 0.003 80);
  box-shadow: var(--shadow-md);
}
.dash-customize-btn.is-done:hover { background: oklch(54% 0.115 36); }

/* ── "+ Add a section" drop zone (edit mode, per column) ── */
.dash-add-section {
  width: 100%; border: 1.5px dashed var(--line-2); border-radius: var(--r-md);
  background: transparent; color: var(--ink-3);
  font-family: 'Geist', sans-serif; font-size: 13px; font-weight: 500;
  padding: 22px 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease);
}
.dash-add-section:hover { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); }
.dash-add-section .dash-add-plus { font-size: 16px; line-height: 1; opacity: 0.8; }

/* ── Add-block picker list (reuses .dash-fm overlay/card) ── */
.dash-ap-list { display: flex; flex-direction: column; gap: 6px; max-height: 56vh; overflow: auto; margin: 2px -4px 0; padding: 0 4px; }
.dash-ap-item {
  display: flex; flex-direction: column; gap: 2px; text-align: left; width: 100%;
  padding: 11px 13px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--paper-1); cursor: pointer;
  transition: border-color .13s var(--ease), background .13s var(--ease);
}
.dash-ap-item:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.dash-ap-name { font-size: 13.5px; font-weight: 500; color: var(--ink-0); }
.dash-ap-desc { font-size: 11.5px; color: var(--ink-3); }

.card {
  background: var(--paper-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.card:hover { box-shadow: var(--shadow-md); border-color: var(--line-2); }
.card-pad { padding: var(--pad-card); }

.card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px;
}
.card-title-row .eyebrow { margin-bottom: 6px; }
.card-title {
  font-family: 'Geist', sans-serif;
  font-size: 22px;
  line-height: 1.1;
  color: var(--ink-0);
}
.card-meta {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 2px;
}

.icon-btn {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--paper-1);
  border: 1px solid var(--line);
  color: var(--ink-2);
  display: grid; place-items: center;
  cursor: pointer;
  transition: all .15s var(--ease);
}
.icon-btn:hover { background: var(--paper-2); color: var(--ink-0); border-color: var(--line-2); }

.btn {
  font-family: 'Geist', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  border-radius: 8px;
  padding: 7px 12px;
  cursor: pointer;
  transition: all .15s var(--ease);
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid transparent;
}
.btn-ghost {
  background: var(--paper-1);
  border-color: var(--line);
  color: var(--ink-1);
}
.btn-ghost:hover { background: var(--paper-2); border-color: var(--line-2); }
.btn-accent {
  background: var(--ink-0);
  color: var(--paper-1);
}
.btn-accent:hover { background: var(--ink-1); }
.btn-accent.clay { background: var(--accent); }
.btn-accent.clay:hover { background: oklch(54% 0.115 36); }
.btn .arrow { transition: transform .2s var(--ease); }
.btn:hover .arrow { transform: translateX(2px); }

/* ── BRIEF CARD ───────────────────────────────────────────── */
.brief-card { position: relative; }
.brief-card::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(420px 200px at 100% 0%, var(--accent-soft), transparent 60%);
  pointer-events: none;
}
/* Brief body collapse animation — uses the grid-template-rows
   0fr→1fr technique so the card animates between its natural
   expanded height and 0 without us needing to measure pixels. The
   inner wrapper is `overflow: hidden` so content clips cleanly
   during the transition. Modern Chrome / Firefox / Safari all
   support animating fr-unit grid tracks. */
.brief-body-wrap {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .42s var(--ease), margin-top .42s var(--ease);
  margin-top: 0;
}
.brief-body-inner {
  overflow: hidden;
  min-height: 0;
}
.brief-card.collapsed .brief-body-wrap {
  grid-template-rows: 0fr;
  margin-top: -2px;  /* removes the residual hairline gap when fully collapsed */
}
.brief-card .brief-narrative,
.brief-card .brief-priorities { transition: opacity .35s var(--ease); }
.brief-card.collapsed .brief-narrative,
.brief-card.collapsed .brief-priorities { opacity: 0; }
/* Brief page rhythm: roomier columns + card, narrower narrative for read pace.
   Scoped to #page-brief so the global --gap-grid and other pages stay untouched.
   block-container.js lays the brief out with an inline gap:18px on .dash-layout
   and .dash-col, so !important is needed to beat that inline style (CSS-only). */
#page-brief .dash-layout,
#page-brief .dash-col { gap: 22px !important; }
#page-brief .brief-card > .card-pad { padding: 28px; }
#page-brief .brief-narrative { max-width: 640px; }

/* ── NEXT-UP HERO CARD ────────────────────────────────────────── */
.next-card { position: relative; }
.next-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.next-eyebrow {
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 8px;
}
.next-eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--good); box-shadow: 0 0 0 3px color-mix(in oklab, var(--good) 18%, transparent);
}
.next-actions { display: flex; align-items: center; gap: 8px; }
.next-prep-chip {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--paper-2);
  border: 1px solid var(--line);
  padding: 5px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.next-title {
  font-size: 22px;
  color: var(--ink-0);
  letter-spacing: -0.01em;
  margin: 0 0 6px 0;
}
.next-sub {
  font-family: 'Geist Mono', monospace;
  font-size: 11.5px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}
.next-attendees {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.next-att-primary {
  font-size: 13px;
  color: var(--ink-1);
}
.next-att-more {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px;
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  color: var(--ink-3);
  cursor: pointer;
  transition: color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease);
}
.next-att-more:hover { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.next-att-list {
  flex-basis: 100%;
  max-width: 100%;
  padding: 10px 14px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.55;
  overflow-wrap: anywhere;
  box-sizing: border-box;
}
.prepped.internal { background: var(--paper-2); text-align: left; }
.prepped.internal p {
  font-size: 12.5px;
  color: var(--ink-3);
  margin: 0;
  font-style: italic;
}

/* Brief collapse toggle — smoother than the generic icon-btn. Rounded,
   transparent, accent on hover; chevron rotates 180° on state change. */
.brief-toggle {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-3);
  display: grid; place-items: center;
  cursor: pointer;
  transform: rotate(180deg);
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease), transform .3s var(--ease);
}
.brief-toggle:hover { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.brief-toggle.is-collapsed { transform: rotate(0deg); }
.brief-toggle svg { display: block; }
.prepped {
  margin-top: 4px;
  padding: 14px 16px;
  background: var(--paper-2);
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
}
.prepped .eyebrow { margin-bottom: 10px; }
.prepped ul {
  list-style: none;
  display: flex; flex-direction: column;
  gap: 8px;
  margin: 0; padding: 0;
}
.prepped li {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-1);
  display: flex; gap: 10px;
}
.prepped li::before {
  content: ''; flex-shrink: 0;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent);
  margin-top: 8px;
}
.prepped.empty { text-align: center; }
.prepped.empty p { font-size: 12.5px; color: var(--ink-3); margin: 0 0 10px 0; }
.next-foot {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--rule-soft);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.next-sources {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-3);
}
/* ── MEETINGS PAGE (artifact corpus) ─────────────────────────── */
.mtg-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.mtg-card { cursor: pointer; }
/* Meeting recording bot (Phase 7): the per-event "Send assistant" control,
   its status pill, and the consent sheet. Calm FB2 tokens; --affirm = the live
   recording accent. Inert until the backend capability is on. */
.mtg-bot { display: inline-flex; align-items: center; margin-top: 12px; }
.ed-foot .mtg-bot { margin-top: 0; }   /* aligns the control beside Generate prep in the event-detail footer */
.mtg-bot-btn { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px;
  background: none; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-1);
  font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer;
  transition: border-color .12s var(--ease), color .12s var(--ease), background .12s var(--ease); }
.mtg-bot-btn:hover { border-color: var(--affirm-line); color: var(--affirm); background: var(--affirm-soft); }
.mtg-bot-btn:focus-visible { outline: 2px solid var(--affirm-line); outline-offset: 2px; }
.mtg-bot-ico svg { width: 15px; height: 15px; display: block; }
.mtg-bot-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px;
  border-radius: 999px; font-size: 12px; font-weight: 600; }
.mtg-bot-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.mtg-bot-pill--active { background: var(--paper-2); color: var(--ink-2); }
.mtg-bot-pill--live   { background: var(--affirm-soft); color: var(--affirm); }
.mtg-bot-pill--done   { background: var(--paper-2); color: var(--ink-3); }
.mtg-bot-pill--failed { background: color-mix(in oklch, var(--bad) 10%, transparent); color: var(--bad); }
.mtg-consent-title { font-size: 15px; font-weight: 600; color: var(--ink-0); }
.mtg-consent-mtg { font-size: 13px; font-weight: 600; color: var(--ink-1); margin-top: 6px; }
.mtg-consent-sub { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; margin-top: 6px; }
.mtg-consent-facts { list-style: none; margin: 12px 0; padding: 12px 14px; background: var(--paper-2);
  border-radius: var(--r-sm); display: flex; flex-direction: column; gap: 6px;
  font-size: 12.5px; color: var(--ink-1); line-height: 1.45; }
.mtg-consent-facts strong { color: var(--ink-2); font-weight: 600; }
.mtg-consent-check { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px;
  color: var(--ink-1); line-height: 1.45; margin-top: 4px; cursor: pointer; }
.mtg-consent-check input { margin-top: 2px; flex-shrink: 0; }
.mtg-consent-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
/* The "View notes" control on a finished recording (opens the notetaker view). */
.mtg-bot-view { margin-left: 8px; padding: 5px 11px; border: 1px solid var(--affirm-line); border-radius: 999px;
  background: none; color: var(--affirm); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.mtg-bot-view:hover { background: var(--affirm-soft); }
.mtg-bot-view:focus-visible { outline: 2px solid var(--affirm-line); outline-offset: 2px; }
/* The notetaker view (transcript + summary), rendered in the shared _rbDialog. */
.rb-edit-form.ntk-view { min-width: min(560px, 90vw); max-height: 80vh; }
.ntk-title { font-size: 15px; font-weight: 600; color: var(--ink-0); }
.ntk-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; padding-right: 2px; }
.ntk-section-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--eyebrow-tracking); color: var(--ink-3); margin-bottom: 8px; }
.ntk-summary { font-size: 13px; line-height: 1.55; color: var(--ink-1); white-space: pre-wrap; word-break: break-word; }
.ntk-state { font-size: 13px; line-height: 1.5; color: var(--ink-2); padding: 8px 0; }
.ntk-state--soft { color: var(--ink-3); }
.ntk-tabs { margin-bottom: 12px; }
.ntk-transcript { font-size: 12.5px; line-height: 1.6; color: var(--ink-1); white-space: pre-wrap; word-break: break-word; }
.ntk-speakers { display: flex; flex-direction: column; gap: 12px; }
.ntk-seg { display: flex; flex-direction: column; gap: 2px; }
.ntk-spk { font-size: 11px; font-weight: 600; color: var(--affirm); }
.ntk-seg-text { font-size: 12.5px; line-height: 1.5; color: var(--ink-1); word-break: break-word; }
.ntk-actions { display: flex; justify-content: flex-end; padding-top: 4px; }
/* Editable speaker chips (notetaker speaker naming). */
.ntk-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.ntk-chips-h { width: 100%; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--eyebrow-tracking); color: var(--ink-3); }
.ntk-chip { display: inline-flex; align-items: center; gap: 6px; }
.ntk-chip-sel { font: inherit; font-size: 12px; color: var(--ink-1); background: var(--paper-2);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 9px; cursor: pointer; }
.ntk-chip-sel:focus-visible { outline: 2px solid var(--affirm-line); outline-offset: 2px; }
.ntk-chip-custom { font: inherit; font-size: 12px; color: var(--ink-1); background: var(--paper-1);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 4px 9px; width: 130px; }
.ntk-speakers-wrap { min-width: 0; }

/* ── Notetaker + briefing larger variants (the "decrypted notes" surface).
   --lg = the full transcript view: 2-col grid (sticky Summary rail + scrolling
   transcript with pinned chip strip). --report = the briefing recap: a single
   centered column. State/loading/failed paths stay on the base small variant. */
.rb-edit-form.ntk-view.ntk-view--lg,
.rb-edit-form.ntk-view.ntk-view--report {
  display: flex; flex-direction: column;
  gap: 12px;
  max-height: none;
}
.rb-edit-form.ntk-view.ntk-view--lg     { width: min(1040px, 94vw); height: min(88vh, 1000px); }
.rb-edit-form.ntk-view.ntk-view--report { width: min(760px, 92vw);  height: min(86vh, 940px); }
/* The notetaker + briefing forms set their own (wider) width, but the shared
   #rbEditDialog (.mem-add-dialog) is a fixed 440px centered by transform, so a
   wider form overflows it off-center. Grow the dialog to match the form width so
   the modal stays centered. :has() re-evaluates on replaceChildren, so the dialog
   reverts to 440px automatically when another sheet reuses it (no .ntk-view child).
   --lg / --report rules follow the base so they win on equal specificity. */
.mem-add-dialog:has(.ntk-view)         { width: min(560px, 90vw); }
.mem-add-dialog:has(.ntk-view--lg)     { width: min(1040px, 94vw); }
.mem-add-dialog:has(.ntk-view--report) { width: min(760px, 92vw); }
.ntk-view--lg .ntk-head,
.ntk-view--report .ntk-head { display: flex; flex-direction: column; gap: 4px; padding-bottom: 4px; }
.ntk-view--lg .ntk-eyebrow,
.ntk-view--report .ntk-eyebrow {
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--ink-3);
}
.ntk-view--lg .ntk-title,
.ntk-view--report .ntk-title {
  font-family: 'Geist', sans-serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--ink-0);
}
.ntk-view--lg .ntk-body,
.ntk-view--report .ntk-body { flex: 1; min-height: 0; overflow: hidden; padding-right: 0; }
.ntk-view--lg .ntk-actions,
.ntk-view--report .ntk-actions { padding-top: 12px; flex-shrink: 0; }

/* --lg layout: 320 / 1fr grid, collapses to one column under 860px (summary first). */
.ntk-view--lg .ntk-grid {
  display: grid; grid-template-columns: 320px 1fr; gap: 28px;
  height: 100%; min-height: 0;
}
.ntk-view--lg .ntk-rail { min-width: 0; min-height: 0; }
.ntk-view--lg .ntk-rail-card {
  position: sticky; top: 0;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 20px;
}
.ntk-view--lg .ntk-rail-card .ntk-section-h { margin-bottom: 10px; }
.ntk-view--lg .ntk-rail-card .ntk-summary { font-size: 14px; line-height: 1.6; }
.ntk-view--lg .ntk-stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ntk-view--lg .ntk-stage-tabs { flex-shrink: 0; margin-bottom: 0; }
.ntk-view--lg .ntk-stage-scroll {
  flex: 1; overflow-y: auto; min-height: 0;
  scrollbar-gutter: stable;
}
.ntk-view--lg .ntk-stage-scroll:focus-visible { outline: 2px solid var(--affirm-line); outline-offset: -2px; border-radius: var(--r-sm); }
.ntk-view--lg .ntk-stage-scroll .ntk-chips {
  position: sticky; top: 0; z-index: 2;
  background: var(--paper-1);
  margin: 0;
  padding: 12px 4px;
  border-bottom: 1px solid var(--line);
}
.ntk-view--lg .ntk-stage-scroll .ntk-speakers { gap: 16px; padding: 16px 4px 4px 4px; }
.ntk-view--lg .ntk-stage-scroll .ntk-spk { font-size: 11px; font-weight: 700; color: var(--affirm); }
.ntk-view--lg .ntk-stage-scroll .ntk-seg-text { font-size: 14px; line-height: 1.55; color: var(--ink-1); }
.ntk-view--lg .ntk-stage-scroll .ntk-seg {
  border-radius: var(--r-sm);
  padding: 6px 8px; margin: 0 -8px;
  transition: background .15s var(--ease);
}
.ntk-view--lg .ntk-stage-scroll .ntk-seg:hover { background: var(--paper-2); }
.ntk-view--lg .ntk-stage-scroll .ntk-transcript {
  padding: 16px 4px; font-size: 14px; line-height: 1.55; color: var(--ink-1);
}
@media (max-width: 860px) {
  .ntk-view--lg .ntk-grid { grid-template-columns: 1fr; gap: 18px; }
  .ntk-view--lg .ntk-rail-card { position: static; }
}

/* --report layout: a single centered column for the briefing recap. */
.ntk-view--report .ntk-body { overflow-y: auto; }
.ntk-view--report .ntk-body-inner {
  max-width: 640px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 26px;
  padding: 4px 4px 6px 4px;
}
.ntk-view--report .ntk-summary { font-size: 14px; line-height: 1.6; }
.ntk-view--report .ntk-section-h { margin-bottom: 10px; }

/* ── Briefing/prep hierarchy: muted meta line, scannable accent-dot bullets,
   action rows with owner chips, footer Copy/Download group, prep markdown. ── */
.ntk-meta { font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.04em; color: var(--ink-3); margin-top: 6px; }
.ntk-actions-extra { display: flex; gap: 8px; margin-right: auto; }
/* Accent-dot bullets (decisions, follow-ups, prep markdown lists). */
.ntk-bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ntk-bullets li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.55; color: var(--ink-1); word-break: break-word; }
.ntk-bullets li::before { content: ''; position: absolute; left: 2px; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
/* Action items: dot + text + an owner chip pulled to the right. */
.ntk-action-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ntk-action-item { position: relative; padding-left: 18px; display: flex; gap: 12px; align-items: flex-start; justify-content: space-between;
  font-size: 14px; line-height: 1.55; color: var(--ink-1); }
.ntk-action-item::before { content: ''; position: absolute; left: 2px; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.ntk-action-text { flex: 1; min-width: 0; word-break: break-word; }
.ntk-owner-chip { flex-shrink: 0; display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; line-height: 1.4;
  padding: 2px 9px; border-radius: 999px; white-space: nowrap;
  /* Teal fill + border carry the "assigned owner" affordance; the label uses the
     theme-aware --ink-1 so it clears WCAG AA in the dark themes too (the --affirm
     teal is not re-overridden per theme, so teal-on-soft text would fail there). */
  background: var(--affirm-soft); color: var(--ink-1); border: 1px solid var(--affirm-line); }
.ntk-owner-chip--none { background: var(--paper-2); color: var(--ink-2); border-color: var(--line); }
/* Prep markdown rendered to a hierarchy (headings, paragraphs, rules; bullets
   reuse .ntk-bullets above, sized up to match the 15px prep body). */
.prep-md { display: flex; flex-direction: column; gap: 14px; }
.prep-md-h { font-size: 13px; font-weight: 700; color: var(--ink-0); letter-spacing: -0.003em; margin-top: 4px; }
.prep-md-h--lg { font-size: 15px; }
.prep-md-p { font-size: 15px; line-height: 1.6; color: var(--ink-1); word-break: break-word; }
.prep-md-rule { height: 1px; background: var(--line); margin: 2px 0; }
.prep-md strong { font-weight: 650; color: var(--ink-0); }
.prep-md .ntk-bullets li { font-size: 15px; }
/* "Since last time" continuity: prior meetings as muted, left-ruled context
   blocks (secondary to the current recap). */
.ntk-prior { display: flex; flex-direction: column; gap: 18px; }
.ntk-prior-item { display: flex; flex-direction: column; gap: 8px; padding-left: 14px; border-left: 2px solid var(--line); }
.ntk-prior-date { font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.04em; color: var(--ink-3); }
.ntk-prior-summary { font-size: 13px; line-height: 1.55; color: var(--ink-2); word-break: break-word; }
.ntk-prior-h { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--eyebrow-tracking); color: var(--ink-3); }
.ntk-prior .ntk-bullets li { font-size: 13px; color: var(--ink-2); }
.mtg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.mtg-meta {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.mtg-pill-row { display: flex; flex-wrap: wrap; gap: 4px; }
.mtg-pill {
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--ink-3);
  white-space: nowrap;
}
.mtg-pill.prep       { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }
.mtg-pill.summary    { color: oklch(45% 0.10 145); background: oklch(95% 0.03 145); border-color: oklch(88% 0.04 145); }
.mtg-pill.transcript { color: oklch(45% 0.12 280); background: oklch(95% 0.04 280); border-color: oklch(88% 0.06 280); }
.mtg-pill.empty      { opacity: .6; }
.mtg-pill.past       { color: var(--ink-3); background: var(--paper-2); border-color: var(--line); }
.mtg-pill.upcoming   { color: oklch(45% 0.11 70); background: oklch(95% 0.04 70); border-color: oklch(88% 0.06 70); }
.mtg-card.is-past    { opacity: .82; }
.mtg-title { font-size: 18px; color: var(--ink-0); letter-spacing: -0.005em; margin: 6px 0 4px 0; }
.mtg-att { font-size: 12.5px; color: var(--ink-3); line-height: 1.4; }

/* ── WAITING ON YOUR NOD (inbox drafts) ─────────────────────── */
.nod-list { display: flex; flex-direction: column; }
.nod-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  cursor: pointer;
  transition: background .15s;
}
.nod-row:first-child { border-top: 0; }
.nod-row:hover { background: var(--paper-2); }
/* Inline "view original email" icon button — sits between the body
   and the right-side meta column. Click stops row-propagation so it
   doesn't also open the Draft modal. */
.nod-eye {
  background: transparent;
  border: 0;
  width: 28px; height: 28px;
  border-radius: 6px;
  display: grid; place-items: center;
  color: var(--ink-3);
  cursor: pointer;
  transition: background .15s, color .15s;
  font-size: 14px;
}
.nod-eye:hover { background: var(--paper-2); color: var(--ink-0); }
.nod-body { min-width: 0; }
.nod-title {
  font-size: 13px;
  color: var(--ink-0);
  line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nod-snip {
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.4;
  margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nod-meta {
  display: flex; flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  white-space: nowrap;
}
.nod-pill {
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.10em;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  padding: 3px 7px;
  border-radius: 999px;
}
.nod-ago {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--ink-4);
}

/* ── RELATIONSHIPS ──────────────────────────────────────────── */
.rel-list { display: flex; flex-direction: column; }
.rel-row {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.rel-row:first-child { border-top: 0; }
.rel-av {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: oklch(40% 0.08 280);
  color: var(--paper-1);
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  display: grid; place-items: center;
}
.rel-body { min-width: 0; }
.rel-name {
  font-size: 12.5px;
  color: var(--ink-0);
  line-height: 1.35;
}
.rel-reason {
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.4;
  margin-top: 2px;
}
.rel-pill {
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.10em;
  color: var(--ink-2);
  background: var(--paper-2);
  border: 1px solid var(--line);
  padding: 3px 8px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
}
.rel-pill:hover { color: var(--accent); border-color: var(--accent-line); }

/* ── TIME RECLAIMED ─────────────────────────────────────────── */
.tr-list { display: flex; flex-direction: column; gap: 10px; }
.tr-row {
  display: grid;
  grid-template-columns: 1fr 80px 36px;
  gap: 10px;
  align-items: center;
}
.tr-label {
  font-size: 12px;
  color: var(--ink-2);
}
.tr-bar {
  display: block;
  height: 4px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.tr-fill {
  display: block;
  height: 100%;
  background: var(--accent);
}
.tr-val {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--ink-1);
  text-align: right;
}

.brief-narrative {
  font-family: 'Geist', sans-serif;
  font-size: 22px;
  line-height: 1.32;
  color: var(--ink-1);
  letter-spacing: -0.005em;
  margin-top: 18px;
  text-wrap: pretty;
}
.brief-narrative .key { color: var(--accent); font-style: italic; }
.brief-narrative .name { color: var(--ink-0); }

.brief-priorities {
  margin-top: 22px;
  display: flex; flex-direction: column;
  /* breathing room for the .prio hover translateX(4px) — the parent
     card has overflow:hidden, so without this the rightmost edge of
     the meta column clips when a row is hovered. */
  padding-right: 6px;
}
.prio {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  cursor: pointer;
  /* Use transform instead of padding-left for the hover shift — padding
     shrinks the 1fr text column's available width and can reflow long
     text onto a new line mid-hover. transform is purely visual: no
     layout impact, no reflow, same nudge. */
  transition: transform .2s var(--ease);
}
.prio:hover { transform: translateX(4px); }
.prio-num {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.04em;
}
.prio-text { font-size: 14px; color: var(--ink-1); line-height: 1.4; }
.prio-text strong { font-weight: 500; color: var(--ink-0); }
.prio-text .ann {
  display: block;
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 3px;
}
.prio-meta {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  text-transform: uppercase;
  white-space: nowrap;
}
.prio-meta .dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-4); margin-right: 6px; vertical-align: middle; }
.prio.urgent .prio-meta .dot { background: var(--bad); }
.prio.today .prio-meta .dot { background: var(--warn); }
.prio.scheduled .prio-meta .dot { background: var(--good); }

/* ── INBOX QUEUE ──────────────────────────────────────────── */
.queue { display: flex; flex-direction: column; }
.queue-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  cursor: pointer;
  transition: padding-left .18s var(--ease);
}
.queue-row:first-child { border-top: 0; }
.queue-row:hover { padding-left: 4px; }

.q-av {
  width: 30px; height: 30px;
  border-radius: 9px;
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  color: var(--paper-1);
  display: grid; place-items: center;
  flex-shrink: 0;
}

.q-name { font-size: 13.5px; color: var(--ink-0); font-weight: 500; }
.q-name .pill {
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  background: var(--paper-2);
  color: var(--ink-2);
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--line);
  margin-left: 8px;
}
.q-name .pill.ready { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
.q-name .pill.waiting { background: oklch(64% 0.110 70 / 0.10); color: var(--warn); border-color: oklch(64% 0.110 70 / 0.30); }
.q-name .pill.draft { background: oklch(48% 0.06 250 / 0.10); color: oklch(40% 0.06 250); border-color: oklch(40% 0.06 250 / 0.25); }

.q-snip {
  font-size: 12.5px;
  color: var(--ink-3);
  margin-top: 3px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.q-time {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.05em;
  text-align: right;
  white-space: nowrap;
}

/* ── SIDE COLUMN CARDS ────────────────────────────────────── */
.calendar-list { display: flex; flex-direction: column; gap: 0; margin-top: 6px; }
.cal-row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.cal-row:first-child { border-top: 0; }
.cal-time {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--ink-2);
  line-height: 1.3;
}
.cal-time small {
  display: block;
  font-size: 9.5px;
  color: var(--ink-4);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cal-title { font-size: 13px; color: var(--ink-0); line-height: 1.35; }
.cal-title .who { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.cal-tag {
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-1);
  white-space: nowrap;
}
.cal-tag.now { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
.cal-tag.next { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
.cal-tag.focus { background: oklch(95% 0.04 280); color: oklch(45% 0.14 280); border-color: oklch(88% 0.06 280); }
.cal-tag.oneonone { background: oklch(95% 0.04 220); color: oklch(45% 0.12 220); border-color: oklch(88% 0.05 220); }
.cal-tag.hold { background: var(--paper-2); color: var(--ink-3); border-color: var(--line); }
.cal-tag.solo { background: var(--paper-2); color: var(--ink-4); border-color: var(--line); }
.cal-tag.meeting { background: var(--paper-2); color: var(--ink-3); border-color: var(--line); }
.cal-tag-stack { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

/* Earlier-today expand toggle inside the Day-at-a-glance card. */
.cal-past-toggle {
  margin-top: 10px;
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 8px 0;
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-3);
  cursor: pointer;
  transition: color .15s var(--ease);
}
.cal-past-toggle:hover { color: var(--accent); }
.cal-past-toggle svg { transition: transform .25s var(--ease); }
.cal-past-toggle.is-expanded svg { transform: rotate(180deg); }
.cal-past-list { padding-top: 4px; opacity: .7; }
.cal-past-list .cal-row { color: var(--ink-3); }
.cal-past-list .cal-title { color: var(--ink-2); }
.prio-meta .dot.meeting { background: var(--good); }
.prio-meta .dot.bad { background: var(--bad); }
.prio-meta .dot.eod { background: var(--bad); }
.prio-meta.eod { color: var(--bad); }
.prio.eod .prio-num { color: var(--bad); }

/* People radar */
.people { display: flex; flex-direction: column; gap: 0; }
.person {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  cursor: pointer;
}
.person:first-child { border-top: 0; }
.p-av {
  width: 32px; height: 32px;
  border-radius: 50%;
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  color: var(--paper-1);
  display: grid; place-items: center;
}
.p-name { font-size: 13px; color: var(--ink-0); font-weight: 500; line-height: 1.2; }
.p-signal { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; line-height: 1.35; }
.p-signal .hl { color: var(--accent); }
.p-cta {
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-1);
}
.person:hover .p-cta { color: var(--accent); border-color: var(--accent-line); }

/* Time saved card */
.savings-card { position: relative; overflow: hidden; }
.savings-card .bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(260px 160px at 0% 100%, var(--accent-soft), transparent 65%);
}
.savings-num {
  font-family: 'Geist', sans-serif;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink-0);
  display: flex; align-items: baseline; gap: 4px;
  margin: 8px 0 4px;
}
.savings-num .u {
  font-family: 'Geist Mono', monospace;
  font-size: 14px;
  color: var(--ink-3);
  font-style: normal;
}
.savings-sub {
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.45;
  margin-top: 6px;
}
.savings-breakdown {
  margin-top: 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.sav-row {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px;
  font-size: 12px; color: var(--ink-2);
}
.sav-row .v {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--ink-1);
}
.sav-bar {
  height: 3px; border-radius: 99px; overflow: hidden;
  background: var(--paper-3);
  margin-top: 2px;
}
.sav-bar > i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--accent), oklch(54% 0.115 36));
}

/* Decisions card */
.decisions { display: flex; flex-direction: column; }
.decision {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  cursor: pointer;
}
.decision:first-child { border-top: 0; }
.dec-q {
  font-family: 'Geist', sans-serif;
  font-size: 17px;
  line-height: 1.3;
  color: var(--ink-0);
  letter-spacing: -0.005em;
  text-wrap: pretty;
}
.dec-meta {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--ink-3);
}
.dec-actions { display: flex; gap: 6px; align-items: flex-start; padding-top: 2px; }
.dec-btn {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  color: var(--ink-2);
  cursor: pointer;
  transition: all .15s var(--ease);
}
.dec-btn:hover { background: var(--paper-3); color: var(--ink-0); }
.dec-btn.primary { background: var(--ink-0); color: var(--paper-1); border-color: var(--ink-0); }
.dec-btn.primary:hover { background: var(--ink-1); }

/* ──────────────────────────────────────────────────────────────
   FLOATING CHAT (glass + thinking states)
   ────────────────────────────────────────────────────────────── */
.chat-shell {
  position: fixed;
  left: calc(50% + var(--sb-w) / 2);
  bottom: 28px;
  transform: translateX(-50%);
  width: min(720px, calc(100vw - var(--sb-w) - 80px));
  z-index: 120;
}
/* Transparent thread — no visible box, just the bubbles stacking. The
   54px bottom margin lifts the stack clear of the "Speak or type?" prompt
   that floats just above the chat bar. The close (×) sits at the end. */
.chat-thread {
  margin-bottom: 54px;
  overflow: visible;
  display: flex;
  flex-direction: column;
  max-height: 60vh;
}
.chat-thread[hidden] { display: none; }
.chat-thread-head {
  order: 2;                     /* X sits at the end, below the bubbles */
  display: flex; align-items: center; justify-content: flex-end;
  padding: 4px 4px 0;
}
.chat-thread-title { display: none; }
.chat-thread-close {
  background: none; border: none; cursor: pointer;
  color: var(--ink-3); font-size: 18px; line-height: 1;
  padding: 2px 6px; border-radius: 999px;
}
.chat-thread-close:hover { color: var(--ink-0); background: var(--paper-2); }
.chat-thread-body {
  order: 1;
  flex: 1;
  overflow-y: auto;
  padding: 2px 2px 0;
  display: flex; flex-direction: column; gap: 10px;
  font-size: 13.5px; line-height: 1.55;
}
/* Focus backdrop — blurs the page behind the MAIN chat while it's open.
   Tied to the dock thread, so the Conversations page is never affected. */
#chatBackdrop {
  position: fixed; inset: 0; z-index: 110;
  background: oklch(20% 0.02 250 / 0.18);
  backdrop-filter: blur(7px) saturate(105%);
  -webkit-backdrop-filter: blur(7px) saturate(105%);
  opacity: 0; pointer-events: none;
  transition: opacity .2s var(--ease, ease);
}
#chatBackdrop.on { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { #chatBackdrop { transition: none; } }
/* Lock page scroll while a blocking overlay is open: the main chat (its
   backdrop), the voice orb, any modal <dialog>, or the mobile nav drawer.
   Pure CSS via :has — covers every dialog with no per-modal wiring, and
   leaves click-outside-to-close untouched. The Conversations page has no
   backdrop, so it is never locked. */
html:has(#chatBackdrop.on),
html:has(.voice-orb-overlay),
html:has(dialog[open]),
html:has(body.nav-open) { overflow: hidden; }
html:has(#chatBackdrop.on) body,
html:has(.voice-orb-overlay) body,
html:has(dialog[open]) body,
html:has(body.nav-open) body { overflow: hidden; }
/* Native structured rows inside an assistant bubble (meetings/tasks/inbox).
   Colours inherit the bubble so it adapts to light/dark themes. */
.cs-prose { margin-bottom: 2px; }
.chat-struct-list { display: flex; flex-direction: column; margin-top: 8px; }
.chat-struct-row { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; border-top: 1px solid rgba(128,128,128,0.22); }
.chat-struct-row:first-child { border-top: none; }
.cs-lead { font-family: 'Geist Mono', monospace; font-size: 11px; opacity: 0.6; white-space: nowrap; padding-top: 2px; min-width: 44px; }
.cs-main { min-width: 0; }
.cs-title { font-size: 13px; font-weight: 600; }
.cs-sub { font-size: 11.5px; opacity: 0.62; margin-top: 1px; }
/* ── AARO-2 result cards + markdown ── */
.chat-card { display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--paper-1); margin:6px 0; }
.chat-card.clickable { cursor:pointer; }
.chat-card.clickable:hover { background:var(--paper-2); border-color:var(--accent); }
.chat-card .cc-lead { font-family:'Geist Mono', monospace; font-variant-numeric:tabular-nums; color:var(--ink-3); min-width:42px; font-size:12px; padding-top:1px; }
.chat-card .cc-main { min-width:0; }
.chat-card .cc-title { font-weight:600; font-size:13px; color:var(--ink-0); }
.chat-card .cc-sub { font-size:11.5px; color:var(--ink-3); margin-top:2px; }
.chat-card-list { display:flex; flex-direction:column; margin:6px 0; }
.chat-card-head { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-4); margin:8px 0 4px; }
.chat-card.confirm { border-color:var(--accent); background:var(--accent-soft); flex-direction:column; gap:8px; }
.cc-confirm-sum { font-size:13px; color:var(--ink-0); }
.cc-confirm-actions { display:flex; gap:8px; }
.chat-card.err { border-color:var(--bad); color:var(--bad); }
.chat-card.undoable { align-items:center; gap:12px; }
.chat-card.undoable .cc-confirm-sum { flex:1; }
.chat-pills { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0; }
.chat-pill, .chat-chip { font-size:12px; padding:4px 10px; border-radius:999px; border:1px solid var(--line); background:var(--paper-2); color:var(--ink-1); cursor:pointer; }
.chat-pill:hover, .chat-chip:hover { border-color:var(--accent); }
.chat-msg .md p { margin:.4em 0; }
.chat-msg .md h1, .chat-msg .md h2, .chat-msg .md h3, .chat-msg .md h4 { margin:.5em 0 .3em; line-height:1.25; }
.chat-msg .md ul, .chat-msg .md ol { margin:.4em 0; padding-left:1.3em; }
.chat-msg .md table { border-collapse:collapse; margin:.5em 0; font-size:13px; }
.chat-msg .md th, .chat-msg .md td { border:1px solid var(--line); padding:4px 8px; text-align:left; }
.chat-msg .md code { background:var(--paper-2); padding:1px 4px; border-radius:4px; font-size:12px; }
.chat-msg .md pre { background:var(--paper-2); padding:8px 10px; border-radius:8px; overflow:auto; }
.chat-msg .md pre code { background:none; padding:0; }
.chat-msg .md blockquote { border-left:3px solid var(--line); padding-left:10px; color:var(--ink-3); margin:.4em 0; }
/* ── AARO-4 streaming chat (token-by-token + live cards) ── */
.chat-stream-status { font-size:12px; color:var(--ink-3); font-style:italic; margin-bottom:2px; }
.chat-msg .md-stream { white-space:pre-wrap; word-wrap:break-word; }
/* A soft blinking caret while tokens are still arriving; the `streaming` class
   is removed at finalize (when the raw text is replaced by rendered markdown). */
.chat-msg .md-stream.streaming:not(:empty)::after { content:'▌'; color:var(--accent); opacity:.7; animation:chatCaret 1s steps(1) infinite; }
@keyframes chatCaret { 50% { opacity:0; } }
.chat-stream-cards:empty { display:none; }
.chat-stream-err { color:var(--bad); font-size:13px; margin-top:4px; }
/* ── Chat bubbles — Style B (frosted), theme-adaptive (shared by the
   chat dock .chat-msg and the Conversations .conv-bubble) ── */
.chat-msg {
  max-width: 84%;
  padding: 10px 14px;
  border-radius: 18px;
  font-size: 14px; line-height: 1.45;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.chat-msg.user {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 78%, #000));
  color: #fff;
  border-bottom-right-radius: 6px;
  box-shadow: 0 6px 18px color-mix(in oklab, var(--accent) 27%, transparent);
}
.chat-msg.assistant {
  align-self: flex-start;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  color: var(--ink-1);
  border: 1px solid oklch(86% 0.010 70 / 0.55);
  border-bottom-left-radius: 6px;
}
body[data-theme="night"] .chat-msg.assistant {
  background: rgba(255,255,255,0.10);
  color: var(--paper-1);
  border-color: rgba(255,255,255,0.16);
}
.chat-msg.assistant.err { border-color: oklch(54% 0.130 25 / 0.5); color: var(--bad); }
.chat-msg.pending { opacity: 0.6; font-style: italic; }
.chat-tool-card {
  align-self: flex-start;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  color: var(--ink-2);
  border: 1px solid oklch(86% 0.010 70 / 0.55);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 11.5px;
  max-width: 88%;
  font-family: var(--font-mono, monospace);
}
body[data-theme="night"] .chat-tool-card {
  background: rgba(255,255,255,0.10);
  color: var(--paper-2);
  border-color: rgba(255,255,255,0.16);
  border-left-color: var(--accent);
}

/* ── Notifications — top-right frosted stack ── */
#toastStack {
  position: fixed; top: 18px; right: 18px; z-index: 200;
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none; max-width: 360px;
}
.toast-card {
  pointer-events: auto;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid oklch(86% 0.010 70 / 0.6);
  border-left: 3px solid var(--accent);
  box-shadow: 0 10px 30px oklch(20% 0.02 250 / 0.16);
  border-radius: 12px; padding: 11px 15px;
  font-size: 13px; color: var(--ink-0); line-height: 1.4;
  animation: toastInR .25s var(--ease, ease);
}
.toast-card.success { border-left-color: var(--good); }
.toast-card.error   { border-left-color: var(--bad); }
.toast-card.leaving { animation: toastOutR .3s var(--ease, ease) forwards; }
body[data-theme="night"] .toast-card { background: rgba(28,30,36,0.72); color: var(--paper-1); border-color: oklch(40% 0.01 250 / 0.6); }
@keyframes toastInR { from { opacity:0; transform: translateX(16px); } to { opacity:1; transform:none; } }
@keyframes toastOutR { from { opacity:1; transform:none; } to { opacity:0; transform: translateX(16px); } }
@media (prefers-reduced-motion: reduce) {
  .toast-card { animation: none; }
  .toast-card.leaving { animation: none; opacity: 0; }
}

/* Urgent noticer nudges — persistent + dismissable, top-right. Shares the
   corner with the transient toasts (which auto-dismiss); a danger accent and a
   higher z-index distinguish a "needs you today" nudge. */
.urgent-nudge-stack {
  position: fixed; top: 18px; right: 18px; z-index: 210;
  display: flex; flex-direction: column; gap: 10px; max-width: 340px;
}
.urgent-nudge {
  display: flex; align-items: stretch;
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid oklch(86% 0.010 70 / 0.6);
  border-left: 3px solid var(--bad);
  box-shadow: 0 10px 30px oklch(20% 0.02 250 / 0.18);
  border-radius: 12px; overflow: hidden;
  animation: toastInR .25s var(--ease, ease);
}
.urgent-nudge .un-body {
  flex: 1; text-align: left; cursor: pointer; border: none; background: transparent;
  padding: 11px 6px 11px 14px; font: inherit; color: var(--ink-0);
}
.urgent-nudge .un-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--bad); font-weight: 600; margin-bottom: 2px;
}
.urgent-nudge .un-text { font-size: 13px; line-height: 1.4; color: var(--ink-0); }
.urgent-nudge .un-close {
  border: none; background: transparent; cursor: pointer;
  color: var(--ink-3); font-size: 18px; line-height: 1; padding: 0 12px;
}
.urgent-nudge .un-close:hover { color: var(--ink-0); }
body[data-theme="night"] .urgent-nudge { background: rgba(28,30,36,0.82); color: var(--paper-1); border-color: oklch(40% 0.01 250 / 0.6); }
body[data-theme="night"] .urgent-nudge .un-body,
body[data-theme="night"] .urgent-nudge .un-text { color: var(--paper-1); }
@media (prefers-reduced-motion: reduce) { .urgent-nudge { animation: none; } }

.chat {
  position: relative;
  border-radius: 999px;
  background: oklch(99.2% 0.003 80 / 0.72);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid oklch(86% 0.010 70 / 0.6);
  box-shadow:
    0 1px 0 oklch(100% 0 0 / 0.6) inset,
    var(--shadow-lg);
  padding: 10px 10px 10px 18px;
  display: flex; align-items: center; gap: 12px;
  overflow: hidden;
  transition: border-radius .35s var(--ease), padding .35s var(--ease);
}
.chat.expanded {
  border-radius: 22px;
  padding: 14px 14px 14px 18px;
}

/* Collapsed dock — just the bubble icon as a circle; click to expand. */
.chat-shell.collapsed { width: auto; }
.chat-shell.collapsed .chat-thread { display: none; }
.chat-shell.collapsed .chat {
  width: 58px; height: 58px;
  padding: 0; gap: 0;
  justify-content: center;
  cursor: pointer;
}
.chat-shell.collapsed .chat-input-wrap,
.chat-shell.collapsed .chat-actions,
.chat-shell.collapsed .thinking-status { display: none; }

/* breathing halo behind */
.chat-halo {
  position: absolute;
  inset: -22px;
  border-radius: 999px;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(60% 60% at 30% 50%, oklch(58% 0.115 36 / 0.18), transparent 60%),
    radial-gradient(50% 50% at 75% 50%, oklch(45% 0.08 250 / 0.14), transparent 60%);
  filter: blur(18px);
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.chat.thinking .chat-halo {
  opacity: 1;
  animation: halo-drift 4.5s ease-in-out infinite;
}
@keyframes halo-drift {
  0%, 100% { transform: translateX(-6px) scale(1); }
  50% { transform: translateX(8px) scale(1.05); }
}

/* sweep shimmer overlay */
.chat-sweep {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(105deg,
    transparent 30%,
    oklch(58% 0.115 36 / 0.10) 48%,
    oklch(58% 0.115 36 / 0.16) 50%,
    oklch(58% 0.115 36 / 0.10) 52%,
    transparent 70%);
  background-size: 220% 100%;
  background-position: 220% 0;
  opacity: 0;
  transition: opacity .2s var(--ease);
}
.chat.thinking .chat-sweep {
  opacity: 1;
  animation: sweep 2.2s linear infinite;
}
@keyframes sweep {
  0% { background-position: 220% 0; }
  100% { background-position: -50% 0; }
}

/* assistant glyph (left) */
.chat-glyph {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--ink-0), oklch(38% 0.04 250) 60%, var(--accent));
  display: grid; place-items: center;
  color: var(--paper-1);
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.25);
  position: relative;
}
.chat-glyph::after {
  content: '';
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--accent-line);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.chat.thinking .chat-glyph::after {
  opacity: 1;
  animation: glyph-ring 1.6s var(--ease) infinite;
}
@keyframes glyph-ring {
  0% { transform: scale(0.9); opacity: 0.9; }
  100% { transform: scale(1.45); opacity: 0; }
}

.chat-input-wrap { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; }
.chat-input {
  flex: 1;
  border: none; outline: none; background: transparent;
  font-family: 'Geist', sans-serif;
  font-size: 14.5px;
  color: var(--ink-0);
  padding: 6px 0;
  min-width: 0;
}
.chat-input::placeholder { color: var(--ink-3); }
.chat.thinking .chat-input { color: var(--ink-3); }

.chat-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.chat-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-2);
  display: grid; place-items: center;
  cursor: pointer;
  transition: all .15s var(--ease);
  border: 1px solid transparent;
}
.chat-icon:hover { background: var(--paper-2); color: var(--ink-0); }
.chat-send {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--ink-0);
  color: var(--paper-1);
  border: none;
  cursor: pointer;
  display: grid; place-items: center;
  transition: all .2s var(--ease);
}
.chat-send:hover { background: var(--accent); transform: scale(1.04); }
.chat.thinking .chat-send { background: var(--accent); }

/* Thinking indicator inside chat (replaces placeholder area) */
.thinking-status {
  position: absolute;
  left: 64px;
  top: 50%;
  transform: translateY(-50%);
  display: flex; align-items: center; gap: 10px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s var(--ease);
}
.chat.thinking .thinking-status { opacity: 1; }

/* Hide all variant elements by default; each .v-* class re-enables its own */
.thinking-status .dots,
.thinking-status .bars,
.thinking-status .shim { display: none; }

/* Variant: dots */
.thinking-status.v-dots .dots {
  display: flex; gap: 5px;
}
.thinking-status.v-dots .dots i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  display: block;
  animation: dot-bounce 1.1s ease-in-out infinite;
}
.thinking-status.v-dots .dots i:nth-child(2) { animation-delay: .15s; }
.thinking-status.v-dots .dots i:nth-child(3) { animation-delay: .30s; }
@keyframes dot-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
  40% { transform: translateY(-4px); opacity: 1; }
}

/* Variant: waveform bars */
.thinking-status.v-wave .bars {
  display: flex; align-items: center; gap: 3px; height: 16px;
}
.thinking-status.v-wave .bars i {
  width: 2.5px; height: 100%;
  background: var(--accent);
  border-radius: 99px;
  animation: bar-wave 1.2s ease-in-out infinite;
  transform-origin: center;
}
.thinking-status.v-wave .bars i:nth-child(1) { animation-delay: 0s; }
.thinking-status.v-wave .bars i:nth-child(2) { animation-delay: .1s; }
.thinking-status.v-wave .bars i:nth-child(3) { animation-delay: .2s; }
.thinking-status.v-wave .bars i:nth-child(4) { animation-delay: .3s; }
.thinking-status.v-wave .bars i:nth-child(5) { animation-delay: .4s; }
@keyframes bar-wave {
  0%, 100% { transform: scaleY(0.35); opacity: 0.6; }
  50% { transform: scaleY(1); opacity: 1; }
}

/* Variant: shimmer text only */
.thinking-status.v-shim .shim {
  display: inline-block;
  font-family: 'Geist', sans-serif;
  font-size: 14.5px;
  background: linear-gradient(90deg, var(--ink-3) 0%, var(--ink-3) 35%, var(--ink-0) 50%, var(--ink-3) 65%, var(--ink-3) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shim-pan 1.8s linear infinite;
}
@keyframes shim-pan {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.thinking-label {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--ink-2);
  letter-spacing: 0.02em;
}

/* chat suggestion chips (above the bar) */
.chat-suggest {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 10px;
  justify-content: center;
  opacity: 1;
  transition: opacity .3s var(--ease);
}
.chat.thinking ~ .chat-suggest, .chat-shell.hide-suggest .chat-suggest { opacity: 0; pointer-events: none; }
.suggest-chip {
  font-family: 'Geist', sans-serif;
  font-size: 12px;
  color: var(--ink-2);
  background: oklch(99.2% 0.003 80 / 0.7);
  backdrop-filter: blur(14px);
  border: 1px solid oklch(86% 0.010 70 / 0.5);
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .15s var(--ease);
}
.suggest-chip:hover {
  color: var(--accent);
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

/* tiny floating timestamp / mode toggle */

/* ── density mode ─ */
body[data-density="compact"] { --pad-card: 18px; --gap-grid: 14px; }
body[data-density="comfortable"] { --pad-card: 26px; --gap-grid: 18px; }
body[data-density="spacious"] { --pad-card: 32px; --gap-grid: 22px; }

/* responsive */
@media (max-width: 1200px) {
  .grid { grid-template-columns: 1fr; }
  .metric-rail { display: none; }
}

/* ──────────────────────────────────────────────────────────────
   MOBILE TOPBAR + DRAWER  (< 900px)
   ────────────────────────────────────────────────────────────── */
.m-topbar { display: none; }
.m-backdrop { display: none; }

@media (max-width: 900px) {
  /* mobile topbar — fixed at top */
  .m-topbar {
    display: flex; align-items: center; justify-content: space-between;
    position: fixed; top: 0; left: 0; right: 0;
    height: 54px;
    padding: 0 16px;
    background: oklch(99.2% 0.003 80 / 0.85);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid var(--line);
    z-index: 70;
  }
  body[data-theme="night"] .m-topbar { background: oklch(20% 0.013 250 / 0.85); }
  body[data-theme="mono"]  .m-topbar { background: oklch(100% 0 0 / 0.9); }
  body[data-theme="sage"]  .m-topbar { background: oklch(98.5% 0.008 165 / 0.85); }

  .m-topbar .m-brand {
    display: flex; align-items: center; gap: 9px;
    font-family: 'Geist', sans-serif;
    font-size: 22px;
    color: var(--ink-0);
  }
  .m-topbar .m-brand .mark {
    width: 26px; height: 26px;
    border-radius: 8px;
    background: linear-gradient(150deg, var(--ink-0), var(--ink-1) 60%, var(--accent));
    color: var(--paper-1);
    display: grid; place-items: center;
    font-size: 14px;
  }
  .m-topbar .m-burger {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
    color: var(--ink-1);
  }
  .m-topbar .m-burger svg { width: 16px; height: 16px; }
  .m-topbar .m-current {
    font-family: 'Geist Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-2);
  }

  /* drawer-ify the sidebar */
  .sidebar {
    width: 280px;
    transform: translateX(-100%);
    transition: transform .28s var(--ease);
    box-shadow: 0 20px 60px oklch(20% 0.02 250 / 0.18);
    z-index: 90;
  }
  /* When the drawer is open it owns the screen: lift it (and its backdrop)
     above the fixed chat dock (z-index 120) so the bottom-left Sign-out
     button is always tappable and the floating dock can't intercept taps
     meant for the drawer. */
  body.nav-open .sidebar { transform: translateX(0); z-index: 130; }

  .m-backdrop {
    display: block;
    position: fixed; inset: 0;
    background: oklch(20% 0.02 250 / 0.35);
    backdrop-filter: blur(2px);
    z-index: 80;
    opacity: 0; pointer-events: none;
    transition: opacity .25s var(--ease);
  }
  body.nav-open .m-backdrop { opacity: 1; pointer-events: auto; z-index: 122; }

  /* main fills width, leaves room for top bar + chat */
  .main {
    margin-left: 0;
    max-width: 100vw;
    padding: 70px 18px 160px;
  }

  /* page-hd: stack and shrink */
  .page-hd, .topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    margin-bottom: 20px;
  }
  .page-title, .greet { font-size: 30px; line-height: 1.08; }
  .page-sub, .greet-sub { font-size: 13.5px; max-width: none; }
  .page-actions {
    width: 100%;
    flex-wrap: wrap;
    gap: 6px;
  }
  .page-actions .seg { flex: 0 0 auto; }
  .page-actions .btn { font-size: 12px; padding: 7px 11px; }

  /* card density */
  .card-pad { padding: 18px; }
  .card-head { gap: 12px; }
  .card-title { font-size: 19px; }
  .brief-narrative { font-size: 18px; line-height: 1.36; margin-top: 12px; }
  .savings-num { font-size: 46px; }

  /* chat — mobile pill */
  .chat-shell {
    left: 12px;
    right: 12px;
    width: auto;
    transform: none;
    bottom: 14px;
  }
  /* Collapsed, the shell is just the 58px bubble. The full-width
     (left:12/right:12) anchor would park that circle at the bottom-LEFT,
     directly over the sidebar drawer's bottom-left Sign-out button, making
     it untappable. Anchor the collapsed dock to the bottom-RIGHT instead so
     it never overlaps the logout. Expanded chat stays full-width. */
  .chat-shell.collapsed {
    left: auto;
    right: 12px;
    width: auto;
  }
  .chat { padding: 8px 8px 8px 14px; gap: 9px; }
  .chat-glyph { width: 28px; height: 28px; font-size: 13px; }
  .chat-input { font-size: 14px; }
  .chat-actions { gap: 4px; }
  .chat-icon { width: 30px; height: 30px; }
  .chat-send  { width: 34px; height: 34px; }
  .chat-suggest { display: none; }
  .thinking-status { left: 56px; }
  .thinking-status .shim { font-size: 13px; }

  /* CALENDAR — horizontal scroll for the week */
  .cal-wrap { grid-template-columns: 1fr; gap: 14px; }
  .cal-week { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cal-week-head, .cal-body {
    min-width: 720px;
  }

  /* INBOX */
  .inbox-wrap { grid-template-columns: 1fr; gap: 14px; }
  .td-hd { padding: 18px 18px 14px; }
  .td-body { padding: 14px 18px; }
  .td-subj { font-size: 21px; }
  .td-draft { padding: 14px; }
  .td-draft-foot { flex-direction: column; align-items: stretch; gap: 10px; }

  /* DECISIONS */
  .dec-card .head { padding: 18px 20px 12px; flex-direction: column; }
  .dec-card .stamps { flex-wrap: wrap; }
  .dec-card .q { font-size: 22px; max-width: none; }
  .dec-card .rec { margin: 0 20px; padding: 12px 14px; font-size: 13px; }
  .dec-grid { grid-template-columns: 1fr; }
  .dec-grid > div { padding: 16px 20px; }
  .dec-grid > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .dec-foot {
    padding: 14px 20px;
    flex-direction: column; align-items: stretch; gap: 10px;
  }
  .dec-foot .actions { flex-wrap: wrap; }
  .dec-log-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "when out"
      "what what"
      "impact impact";
    gap: 4px 10px;
    padding: 12px 18px;
  }
  .dec-log-row .when { grid-area: when; }
  .dec-log-row .what { grid-area: what; }
  .dec-log-row .impact { grid-area: impact; }
  .dec-log-row .out { grid-area: out; justify-self: end; }

  /* PEOPLE */
  .people-wrap { grid-template-columns: 1fr; gap: 14px; }
  .ppl-thead { display: none; }
  .ppl-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name action"
      "meta meta";
    gap: 8px 12px;
    padding: 14px 16px;
  }
  .ppl-row > div:nth-child(1) { grid-area: name; min-width: 0; }
  .ppl-row > div:nth-child(2) { display: none; }
  .ppl-row > div:nth-child(3) { grid-area: meta; align-self: end; font-size: 11px; }
  .ppl-row > div:nth-child(4) { display: none; }
  .ppl-row > div:nth-child(5) { grid-area: action; font-size: 10px; text-align: right; }
  .person-detail .pd-stats { grid-template-columns: repeat(3, 1fr); }

  /* PIPELINE — horizontal carousel */
  .pipe-board {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
  }
  .pipe-col {
    flex: 0 0 78%;
    min-width: 240px;
    scroll-snap-align: start;
  }
  .pipe-summary { grid-template-columns: repeat(2, 1fr); }
  .pipe-summary .cell { padding: 12px 14px; }
  .pipe-summary .cell .v { font-size: 24px; }

  /* TRAVEL */
  .trip-hero { padding: 20px 20px; }
  .trip-route { font-size: 26px; gap: 10px; flex-wrap: wrap; }
  .trip-body { padding: 18px 20px; grid-template-columns: 1fr; gap: 18px; }
  .trip-meta-block { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .itin-day { grid-template-columns: 48px 1fr; gap: 12px; }
  .itin-item { grid-template-columns: 54px 22px 1fr; gap: 8px; }
  .trip-side-grid { grid-template-columns: 1fr; }

  /* MEMORY */
  .mem-wrap { grid-template-columns: 1fr; gap: 14px; }
  .mem-card {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "tag actions"
      "body body";
    gap: 10px;
    padding: 16px 18px;
  }
  .mem-tag { grid-area: tag; padding-top: 0; }
  .mem-body { grid-area: body; }
  .mem-actions { grid-area: actions; }
  .mem-body .h { font-size: 16px; }
  .mem-filters { gap: 6px; }
  .mem-filter { padding: 6px 10px; font-size: 9.5px; }

  /* INTEGRATIONS */
  .int-summary { grid-template-columns: repeat(2, 1fr); }
  .int-summary .cell { padding: 14px 16px; }
  .int-summary .cell .v { font-size: 26px; }
  .int-grid { grid-template-columns: 1fr; }
  .int-card { padding: 16px 18px; gap: 12px; }

  /* SETTINGS */
  .set-wrap { grid-template-columns: 1fr; gap: 16px; }
  .set-nav {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    overflow-x: auto;
    padding: 4px 0;
  }
  .set-nav-section { display: none; }
  .set-nav button {
    padding: 6px 12px;
    font-size: 12px;
    background: var(--paper-1);
    border: 1px solid var(--line);
    border-radius: 999px;
    white-space: nowrap;
  }
  .set-nav button.on { background: var(--ink-0); color: var(--paper-1); border-color: var(--ink-0); box-shadow: none; }
  .set-section-hd { padding: 16px 18px 12px; }
  .set-section-hd .h { font-size: 19px; }
  .set-row {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px 18px;
  }
  .set-row.stack { gap: 12px; }
  .set-row .hint { max-width: none; }
  .set-slider { width: 100%; }
  .theme-swatches { grid-template-columns: repeat(2, 1fr); }
  .accent-swatches { flex-wrap: wrap; }

  /* CALENDAR (brief side) */
  .cal-row {
    grid-template-columns: 56px 1fr auto;
    gap: 10px;
  }
  .cal-title { font-size: 12.5px; }

  /* QUEUE */
  .queue-row { grid-template-columns: 30px 1fr; gap: 10px; padding: 12px 0; }
  .queue-row .q-time { display: none; }
  .q-name { font-size: 13px; }
  .q-name .pill { font-size: 8.5px; }

  /* PEOPLE radar (brief side) */
  .person { grid-template-columns: 32px 1fr auto; gap: 10px; padding: 12px 0; }

  /* CARD-HEAD: stack action when title is long */
  .card-head { flex-wrap: wrap; }
  .card-head > div:last-child { flex-wrap: wrap; }
}

/* extra tight phones */
@media (max-width: 480px) {
  .main { padding: 66px 14px 150px; }
  .page-title, .greet { font-size: 26px; }
  .card-pad { padding: 16px; }
  .card-title { font-size: 17px; }
  .brief-narrative { font-size: 16.5px; }
  .savings-num { font-size: 40px; }
  .prio { grid-template-columns: 24px 1fr; gap: 10px; padding: 12px 0; }
  .prio-meta { grid-column: 2; font-size: 9.5px; padding-top: 2px; }
  .pipe-col { flex-basis: 86%; }
  .trip-meta-block { grid-template-columns: 1fr; }
  .mem-actions { gap: 4px; }
  .mem-act { padding: 5px 8px; }
  .td-meta { gap: 6px; }
  .td-meta > span { font-size: 11.5px; }
  .seg button { padding: 5px 9px; font-size: 9px; }
  .topbar .metric-rail { display: none; }
  .chat-suggest { display: none; }
  /* Below 480px the 2-column banner still has cells cramming
     "Not connected" + a 26px serif numeral into one tile width.
     Drop both: smaller numerals + tighter padding + scrollable
     row so all four pills stay on one line if they fit, otherwise
     swipe horizontally. */
  .int-summary {
    grid-template-columns: repeat(4, minmax(110px, 1fr));
    overflow-x: auto;
    /* The 1px gap is a visual divider via background-color; on a
       scroll container it bleeds into the scrollbar track. Keep
       it but cap container height so the bleed isn't ugly. */
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  .int-summary .cell {
    padding: 12px 14px;
    scroll-snap-align: start;
  }
  .int-summary .cell .v { font-size: 22px; }
  .int-summary .cell .l { font-size: 8.5px; letter-spacing: 0.14em; }
}

/* Tiny phones — stack the banner vertically into a 2x2 grid so
   nothing requires a horizontal swipe to read at a glance. */
@media (max-width: 380px) {
  .int-summary {
    grid-template-columns: 1fr 1fr;
    overflow-x: visible;
  }
  .int-summary .cell .v { font-size: 24px; }
}

/* keep the original "hide sidebar on tiny" rules harmonized */
@media (min-width: 901px) {
  .m-topbar, .m-backdrop { display: none !important; }
}

/* ── Task modal field row (due date + priority) ──────────────────────
   Side by side on roomy screens, stacked on phones so the date picker
   and the priority select never collide (operator-reported overlap). */
.task-modal-fields { display: flex; gap: 12px; flex-wrap: wrap; }
.task-modal-fields > label { flex: 1 1 130px; min-width: 0; }
@media (max-width: 560px) {
  .task-modal-fields { flex-direction: column; }
  .task-modal-fields > label { flex: 1 1 auto; }
}

/* ── Non-desktop header + modal polish ───────────────────────────────
   Operator-reported on tablet/phone: header "out of place" (rendered
   centred / shifted right), inputs trigger an iOS focus-zoom that never
   resets. NOT gated to 900px alone so the tablet range (incl. iPad
   landscape at 1024px) is covered too. */
@media (max-width: 1100px) {
  /* Stack the header and pin it HARD LEFT — force flex-start + full-width
     children + explicit text-align so nothing can centre the eyebrow/
     title the way the operator saw. */
  .page-hd {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 14px;
    text-align: left;
  }
  .page-hd > * { width: 100%; align-self: stretch; }
  .page-eyebrow { justify-content: flex-start; flex-wrap: wrap; gap: 6px; }
  .page-eyebrow::after { display: none; }
  .page-title, .page-sub { text-align: left; }
  .page-actions { justify-content: flex-start; width: 100%; }
}

/* iOS/iPadOS Safari auto-zooms (and never restores) when you focus any
   text field smaller than 16px. The app uses 11–14px inputs throughout
   (modals, chat bar, search boxes), so the zoom fired on EVERY popup.
   Force 16px on every text-entry control below tablet width — the one
   reliable cure. !important because many inputs set their own size.
   Checkbox/radio/range are excluded (no text, never trigger zoom). */
@media (max-width: 1100px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
  select,
  textarea { font-size: 16px !important; }
}
/* ──────────────────────────────────────────────────────────────
   SHARED PAGE CHROME
   ────────────────────────────────────────────────────────────── */
.page-hd {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}
.page-eyebrow {
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  text-transform: uppercase;
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
}
.page-eyebrow::after {
  content: ''; height: 1px; flex: 1; max-width: 90px;
  background: linear-gradient(90deg, var(--line), transparent);
}
.page-title {
  font-family: 'Geist', sans-serif;
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink-0);
}
.page-title em { font-style: italic; color: var(--ink-2); }
.page-sub {
  margin-top: 8px;
  font-size: 14.5px;
  color: var(--ink-2);
  max-width: 560px;
  line-height: 1.5;
}
.page-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.seg {
  display: inline-flex;
  background: var(--paper-1);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.seg button {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: transparent;
  border: 0;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .15s var(--ease);
}
.seg button.on {
  background: var(--ink-0);
  color: var(--paper-1);
}
.seg button:not(.on):hover { color: var(--ink-0); }

/* ──────────────────────────────────────────────────────────────
   CALENDAR
   ────────────────────────────────────────────────────────────── */
/* Mini-calendar on left (220px) + week/day grid filling rest. */
.cal-wrap { display: grid; grid-template-columns: 220px 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .cal-wrap { grid-template-columns: 1fr; } }

/* ── Mini-calendar widget ─────────────────────────────────────── */
.cal-mini {
  background: var(--paper-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px;
  position: sticky;
  top: 16px;
}
.mc-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; margin-bottom: 10px;
}
.mc-head .icon-btn { width: 24px; height: 24px; font-size: 14px; }
.mc-title {
  font-size: 12.5px;
  color: var(--ink-0);
  letter-spacing: 0.02em;
  flex: 1;
  text-align: center;
  text-transform: capitalize;
}
.mc-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.mc-dow {
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--ink-4);
  text-align: center;
  padding: 4px 0 6px 0;
}
.mc-day {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  color: var(--ink-1);
  font: inherit;
  font-size: 11.5px;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  margin: 0 auto;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.mc-day:hover { background: var(--paper-2); color: var(--ink-0); }
.mc-day.off { color: var(--ink-4); opacity: .5; }
.mc-day.today { color: var(--accent); font-weight: 600; }
.mc-day.picked { background: var(--accent); color: var(--paper-1); border-color: var(--accent); }
.mc-day.picked.today { color: var(--paper-1); }

/* Calendar nav arrows next to view toggle. */
.cal-nav { display: inline-flex; gap: 4px; }
.cal-nav .icon-btn { width: 30px; height: 30px; font-size: 16px; }

.cal-week {
  background: var(--paper-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  /* Vertical scroll for the 24h hour grid; horizontal scroll for narrow
     viewports (mobile / split-screen). The header inside stays sticky
     at the top of the scroll container. */
  max-height: calc(100vh - 200px);
  overflow: auto;
  position: relative;
}
.cal-week-head {
  display: grid;
  grid-template-columns: 56px repeat(7, 1fr);
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
  position: sticky;
  top: 0;
  z-index: 4;
}
.cal-day-head { padding: 12px 8px; text-align: center; border-left: 1px solid var(--line); min-width: 0; }
.cal-day-head:first-child { border-left: 0; }
.cal-day-head .dow { font-family: 'Geist Mono', monospace; font-size: 9.5px; letter-spacing: 0.18em; color: var(--ink-3); text-transform: uppercase; }
.cal-day-head .day { font-family: 'Geist', sans-serif; font-size: 22px; color: var(--ink-0); line-height: 1.1; margin-top: 2px; }
.cal-day-head.today .day { color: var(--accent); }
.cal-day-head.today { background: var(--accent-soft); }

.cal-body { display: grid; grid-template-columns: 56px repeat(7, 1fr); position: relative; }
/* Mobile: each day column gets a min-width so the grid overflows the
   container instead of squashing — horizontal scroll inside .cal-week
   reveals the days that wrap off-screen. */
@media (max-width: 900px) {
  .cal-week-head, .cal-body {
    grid-template-columns: 48px repeat(var(--cal-day-count, 7), minmax(120px, 1fr)) !important;
  }
}
.cal-hour-col, .cal-day-col { display: flex; flex-direction: column; }
.cal-day-col { border-left: 1px solid var(--line); position: relative; }
.cal-hour-cell, .cal-cell {
  height: 32px;
  border-top: 1px solid var(--line);
}
.cal-hour-cell {
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  color: var(--ink-3);
  text-align: right;
  padding: 2px 8px 0 0;
  border-top-color: transparent;
}
.cal-hour-cell.hour { border-top-color: var(--line); }
.cal-day-col .cal-cell { border-top: 1px dashed transparent; }
.cal-day-col .cal-cell.hour { border-top: 1px solid var(--line); }
.cal-day-col .cal-cell.half { border-top: 1px dashed var(--line); opacity: 0.5; }

.cal-day-col > .cal-evt {
  position: absolute;
  left: 4px; right: 4px;
  padding: 6px 8px;
  background: var(--paper-2);
  border: 1px solid var(--line-2);
  border-left: 2px solid var(--ink-3);
  border-radius: 6px;
  font-size: 11.5px;
  color: var(--ink-1);
  line-height: 1.25;
  cursor: pointer;
  overflow: hidden;
  transition: all .15s var(--ease);
}
.cal-day-col > .cal-evt:hover { box-shadow: var(--shadow-md); z-index: 5; }
.cal-day-col > .cal-evt:focus { outline: 2px solid var(--accent); outline-offset: 1px; z-index: 5; }
.cal-evt .evt-title { font-weight: 500; color: var(--ink-0); }
.cal-evt .evt-time { font-family: 'Geist Mono', monospace; font-size: 9.5px; color: var(--ink-3); margin-top: 1px; }
/* Opaque event backgrounds so overlapping events fully hide whatever
   sits behind them — translucent fills let the back-event text bleed
   through the front box, which is unreadable. Per-type background
   keeps colour-coding intact. */
.cal-evt.t-meeting { border-left-color: var(--accent); background: oklch(95% 0.020 36); }
.cal-evt.t-focus   { border-left-color: var(--good);   background: oklch(95% 0.018 155); }
.cal-evt.t-hold    { border-left-color: var(--warn);   background: oklch(96% 0.018 70); }
.cal-evt.t-travel  { border-left-color: var(--ink-2);  background: var(--paper-2); }

/* Click-selected event: pops to top + adds an accent ring, matching the
   Google-style behaviour where the clicked event surfaces in front of
   any overlapping siblings while the detail popover is open. Cleared
   when the popover closes. */
.cal-evt.selected {
  z-index: 6;
  box-shadow: 0 6px 18px oklch(20% 0.02 250 / 0.18), 0 0 0 1.5px var(--accent);
}
.cal-evt.selected  { box-shadow: 0 0 0 2px var(--accent), var(--shadow-sm); }

.cal-now {
  position: absolute;
  left: 56px; right: 0;
  height: 2px;
  background: var(--bad);
  z-index: 5;
  pointer-events: none;
}
.cal-now::before {
  content: '';
  width: 8px; height: 8px;
  background: var(--bad);
  border-radius: 50%;
  position: absolute; top: -3px; left: -4px;
}

/* event detail panel */
.evt-detail .e-title { font-family: 'Geist', sans-serif; font-size: 24px; line-height: 1.15; color: var(--ink-0); }
.evt-detail .e-when {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 6px;
}
.evt-detail .e-meta { font-size: 12.5px; color: var(--ink-2); margin-top: 8px; line-height: 1.5; }
.evt-detail .e-section { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.evt-detail .e-h {
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.evt-detail ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.evt-detail ul li { font-size: 12.5px; color: var(--ink-1); line-height: 1.45; display: flex; gap: 8px; }
.evt-detail ul li::before { content: ''; flex-shrink: 0; width: 3px; height: 3px; border-radius: 50%; background: var(--accent); margin-top: 7px; }
.evt-detail .e-foot { margin-top: 18px; display: flex; gap: 8px; }

/* ──────────────────────────────────────────────────────────────
   INBOX
   ────────────────────────────────────────────────────────────── */
.inbox-wrap { display: grid; grid-template-columns: 360px 1fr; gap: 18px; align-items: start; }
@media (max-width: 1100px) { .inbox-wrap { grid-template-columns: 1fr; } }

/* Inbox detail modal — mobile-only reading view (body + staged draft). */
.inbox-detail-dialog {
  width: min(560px, 96vw);
  max-width: 96vw;
  max-height: 88vh;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper-1);
  color: var(--ink-0);
  overflow: hidden;
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
}
.inbox-detail-dialog::backdrop { background: rgba(0, 0, 0, 0.42); backdrop-filter: blur(3px); }
#inboxDetailModalBody { max-height: 88vh; overflow-y: auto; }
.inbox-detail-close {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--paper-1);
  color: var(--ink-1); cursor: pointer; font-size: 18px; line-height: 1;
}
/* Clear the email body + draft from the fixed chat bar / suggestion
   bubbles at the bottom of the viewport, so the draft and its buttons are
   never hidden behind them. */
.td-bottom-spacer { height: 150px; }
/* Inside the mobile modal the chat bar is behind the backdrop, so far
   less clearance is needed; and keep the category pill out from under the
   close ✕ in the top-right. */
#inboxDetailModalBody .td-bottom-spacer { height: 22px; }
#inboxDetailModalBody .td-hd { padding-right: 42px; }

@media (max-width: 900px) {
  /* List goes full-width; the inline detail pane is replaced by the
     modal opened on tap (see selectEmail). */
  #emailDetail { display: none; }
  /* Filter pills scroll horizontally so every category fits the width. */
  #inboxFilterSeg {
    display: flex; flex-wrap: nowrap; overflow-x: auto;
    max-width: 100%; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #inboxFilterSeg::-webkit-scrollbar { display: none; }
  #inboxFilterSeg button { flex: 0 0 auto; }
}

/* Sticky right pane — when the user scrolls through a long thread
   list, the email detail stays anchored so clicking another row
   lands them right back on the preview without scrolling up. Has
   its own internal scroll for long emails. `top` matches the
   sticky page-hd offset so the detail snaps just below it. */
@media (min-width: 1101px) {
  #emailDetail {
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    align-self: start;
  }
}

/* Compact pill row — the inbox filter row carries 8 buttons which
   would dominate the page-hd at the default .seg size. `compact`
   variant trims padding + font + letter-spacing so all categories +
   Replied + Unclassified fit comfortably alongside the Triage button
   without wrapping. */
.seg.compact button {
  font-size: 8.5px;
  letter-spacing: 0.08em;
  padding: 4px 9px;
}

.thread-list {
  background: var(--paper-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.thread-list-hd { padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.thread-list-hd .eyebrow { margin: 0; }
.thread-search {
  width: 100%;
  padding: 10px 16px;
  border: 0;
  border-bottom: 1px solid var(--line);
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  background: var(--paper-2);
  color: var(--ink-0);
  outline: none;
}

.thread {
  display: grid; grid-template-columns: 1fr auto;
  gap: 11px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background .12s var(--ease);
}
.thread:hover { background: var(--paper-2); }
.thread.active { background: var(--accent-soft); border-left: 2px solid var(--accent); padding-left: 14px; }
.thread .t-from { font-size: 13px; color: var(--ink-0); font-weight: 500; line-height: 1.2; }
.thread .t-subj { font-size: 12.5px; color: var(--ink-1); margin-top: 2px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.thread .t-snip { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.thread .t-time { font-family: 'Geist Mono', monospace; font-size: 10.5px; color: var(--ink-3); white-space: nowrap; align-self: start; padding-top: 2px; }
.thread .t-status {
  font-family: 'Geist Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  margin-top: 4px;
  display: inline-block;
}
.t-status.ready  { background: var(--accent-soft); color: var(--accent); }
.t-status.wait   { background: oklch(64% 0.110 70 / 0.10); color: var(--warn); }
.t-status.draft  { background: oklch(48% 0.06 250 / 0.10); color: oklch(40% 0.06 250); }
.t-status.done   { background: oklch(52% 0.085 155 / 0.10); color: var(--good); }

/* Detail-pane category pill — larger than the .t-status one used in
   the list, sized to read alongside the 26px subject without looking
   accidental. Same colour palette as the list pill, just a different
   shell. */
.td-cat-pill {
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  display: inline-block;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Thread detail — structured like a real email ─────────────────
   Top: subject as title. Below: a single From/Date row (the "email
   header" line everyone recognises). Body is plain prose with no
   surrounding card — same shape Gmail uses, no double framing. The
   draft block is a compose-style mini-form (To / Subject / Body
   labels) so a glance tells you "this is a reply being composed"
   without reading the eyebrow. */
.thread-detail { background: var(--paper-1); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.td-hd { padding: 24px 28px 16px; border-bottom: 1px solid var(--line); }
.td-subj { font-family: 'Geist', sans-serif; font-size: 26px; line-height: 1.2; color: var(--ink-0); }
.td-from-line { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; margin-top: 10px; font-size: 13px; color: var(--ink-2); }
.td-from-line .who { color: var(--ink-0); font-weight: 500; }
.td-from-line .addr { color: var(--ink-3); }
.td-from-line .dot { color: var(--ink-3); }
.td-from-line .when { color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.td-body { padding: 22px 28px 28px; }
.td-msg {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-1);
  white-space: pre-wrap;
  word-wrap: break-word;
  /* `anywhere` covers the pathological case of a long unbroken URL
     or hash in a marketing email — without it, one token bigger than
     the column width pushes the whole pane sideways and the user has
     to horizontal-scroll. */
  overflow-wrap: anywhere;
  font-family: inherit;
  margin-bottom: 24px;
  max-width: 100%;
}
/* Truncated long body — adds a fade at the bottom edge so the
   "Show more" affordance reads as continuation, not as the end of
   the email. */
.td-msg.collapsed {
  position: relative;
  max-height: 280px;
  overflow: hidden;
  margin-bottom: 12px;
}
.td-msg.collapsed::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 80px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--paper-1) 90%);
}
.td-msg-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 24px;
  font-size: 12px;
  color: var(--accent);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.td-msg-toggle:hover { text-decoration: underline; }
.td-draft {
  padding: 18px 20px;
  background: var(--paper-1);
  border: 1px solid var(--accent-line);
  border-radius: 12px;
  border-left: 3px solid var(--accent);
}
.td-draft-hd {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.td-draft-hd .eyebrow {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.td-draft-field {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-1);
  align-items: baseline;
}
.td-draft-field .lbl {
  color: var(--ink-3);
  font-size: 11.5px;
  font-family: 'Geist Mono', monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.td-draft-edit {
  width: 100%;
  box-sizing: border-box;
  margin: 12px 0 14px;
  min-height: 200px;
  resize: vertical;
  font-family: 'Geist', sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-0);
  background: var(--paper-1);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 12px 14px;
  outline: none;
}
.td-draft-edit:focus { box-shadow: 0 0 0 3px var(--accent-soft); }
.td-draft-body {
  white-space: pre-wrap;
  word-wrap: break-word;
  padding: 14px 0 16px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-1);
  min-height: 60px;
}
.td-draft-body.empty {
  color: var(--ink-3);
  font-style: italic;
}
.td-draft-foot {
  display: flex; gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  justify-content: flex-end;
  align-items: center;
}

/* ──────────────────────────────────────────────────────────────
   DECISIONS PAGE
   ────────────────────────────────────────────────────────────── */
.dec-card { background: var(--paper-1); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm); overflow: hidden; }
.dec-card .head { padding: 22px 28px 16px; display: flex; gap: 18px; justify-content: space-between; align-items: flex-start; }
.dec-card .q {
  font-family: 'Geist', sans-serif;
  font-size: 26px;
  line-height: 1.2;
  color: var(--ink-0);
  letter-spacing: -0.005em;
  max-width: 600px;
}
.dec-card .stamps { display: flex; gap: 8px; flex-shrink: 0; }
.stamp {
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink-2);
  background: var(--paper-2);
}
.stamp.urgent { background: oklch(54% 0.130 25 / 0.10); color: var(--bad); border-color: oklch(54% 0.130 25 / 0.3); }
.stamp.today { background: oklch(64% 0.110 70 / 0.12); color: var(--warn); border-color: oklch(64% 0.110 70 / 0.3); }

.dec-card .rec {
  margin: 0 28px;
  padding: 14px 18px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 10px;
  font-size: 13.5px;
  color: var(--ink-1);
  line-height: 1.5;
}
.dec-card .rec .lbl {
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.dec-card .rec b { color: var(--ink-0); font-weight: 500; }

.dec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 18px 0 0; }
.dec-grid > div { padding: 18px 28px 22px; }
.dec-grid > div + div { border-left: 1px solid var(--line); }
.dec-h {
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.dec-list { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.dec-list li { font-size: 12.5px; color: var(--ink-1); line-height: 1.5; display: flex; gap: 10px; }
.dec-list li::before { content: ''; flex-shrink: 0; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); margin-top: 7px; }
.dec-conf {
  display: flex; align-items: baseline; gap: 8px;
  font-family: 'Geist', sans-serif; font-size: 30px; color: var(--ink-0); line-height: 1;
  margin-bottom: 8px;
}
.dec-conf small { font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--ink-3); }
.dec-bar { height: 4px; background: var(--paper-3); border-radius: 99px; overflow: hidden; margin: 8px 0 14px; }
.dec-bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), oklch(54% 0.115 36)); }
.dec-sources { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.src-chip {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--ink-2);
  padding: 4px 9px;
  border: 1px solid var(--line);
  background: var(--paper-2);
  border-radius: 999px;
}

.dec-foot { padding: 16px 28px; background: var(--paper-2); border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.dec-foot .l { font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase; }
.dec-foot .actions { display: flex; gap: 8px; }

.dec-log { background: var(--paper-1); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.dec-log-row { display: grid; grid-template-columns: 100px 1fr auto auto; gap: 18px; align-items: center; padding: 14px 24px; border-top: 1px solid var(--line); font-size: 13px; }
.dec-log-row:first-of-type { border-top: 0; }
.dec-log-row .when { font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--ink-3); }
.dec-log-row .what { color: var(--ink-0); }
.dec-log-row .impact { font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--ink-2); }
.dec-log-row .out { font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: 0.10em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
.dec-log-row .out.ok { color: var(--good); background: oklch(52% 0.085 155 / 0.10); }
.dec-log-row .out.no { color: var(--ink-2); background: var(--paper-2); }
.dec-log-row .out.wait { color: var(--warn); background: oklch(64% 0.110 70 / 0.10); }

/* ──────────────────────────────────────────────────────────────
   PEOPLE PAGE
   ────────────────────────────────────────────────────────────── */
.people-wrap { display: grid; grid-template-columns: 1fr 360px; gap: 18px; align-items: start; }
@media (max-width: 1200px) { .people-wrap { grid-template-columns: 1fr; } }

.people-table { background: var(--paper-1); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.ppl-thead, .ppl-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 100px 100px 1fr;
  gap: 14px; align-items: center;
  padding: 12px 22px;
}
.ppl-thead { background: var(--paper-2); border-bottom: 1px solid var(--line); }
.ppl-thead > div {
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ppl-row { border-top: 1px solid var(--line); cursor: pointer; transition: background .12s var(--ease); }
.ppl-row:hover { background: var(--paper-2); }
.ppl-row.active { background: var(--accent-soft); }
.ppl-av { width: 32px; height: 32px; border-radius: 50%; color: var(--paper-1); font-family: 'Geist', sans-serif; font-size: 13px; display: grid; place-items: center; }
.ppl-name { font-size: 13.5px; color: var(--ink-0); font-weight: 500; }
.ppl-role { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.ppl-co { font-size: 12.5px; color: var(--ink-1); }
.ppl-last { font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--ink-2); }
.ppl-last.stale { color: var(--warn); }
.ppl-last.cold { color: var(--bad); }
.ppl-strength { display: flex; gap: 3px; }
.ppl-strength i { width: 6px; height: 14px; border-radius: 2px; background: var(--paper-3); }
.ppl-strength i.on { background: var(--accent); }
.ppl-action { font-family: 'Geist Mono', monospace; font-size: 10.5px; color: var(--ink-2); letter-spacing: 0.05em; }
.ppl-action .hl { color: var(--accent); }

/* person detail panel */
.person-detail .pd-av {
  width: 72px; height: 72px;
  border-radius: 50%;
  font-family: 'Geist', sans-serif;
  font-size: 28px;
  color: var(--paper-1);
  display: grid; place-items: center;
}
.person-detail .pd-name { font-family: 'Geist', sans-serif; font-size: 26px; color: var(--ink-0); line-height: 1.15; margin-top: 12px; }
.person-detail .pd-role { font-size: 13px; color: var(--ink-2); margin-top: 3px; }
.person-detail .pd-bio { font-size: 12.5px; color: var(--ink-2); margin-top: 12px; line-height: 1.55; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.person-detail .pd-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin: 14px 0; }
.person-detail .pd-stat { background: var(--paper-1); padding: 10px; text-align: center; }
.person-detail .pd-stat .v { font-family: 'Geist', sans-serif; font-size: 20px; color: var(--ink-0); line-height: 1; }
.person-detail .pd-stat .l { font-family: 'Geist Mono', monospace; font-size: 8.5px; letter-spacing: 0.14em; color: var(--ink-3); text-transform: uppercase; margin-top: 4px; }
.person-detail .pd-section { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.person-detail .pd-h { font-family: 'Geist Mono', monospace; font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.person-detail .pd-tl { display: flex; flex-direction: column; gap: 10px; }
.person-detail .pd-tl-item { font-size: 12.5px; color: var(--ink-1); line-height: 1.45; display: grid; grid-template-columns: 62px 1fr; gap: 10px; }
.person-detail .pd-tl-item .d { font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--ink-3); padding-top: 2px; }

/* ──────────────────────────────────────────────────────────────
   PIPELINE
   ────────────────────────────────────────────────────────────── */
.pipe-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; margin-bottom: 18px; }
.pipe-summary .cell { background: var(--paper-1); padding: 16px 20px; }
.pipe-summary .cell .v { font-family: 'Geist', sans-serif; font-size: 32px; color: var(--ink-0); line-height: 1; }
.pipe-summary .cell .v small { font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--ink-3); }
.pipe-summary .cell .l { font-family: 'Geist Mono', monospace; font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); margin-top: 4px; }

.pipe-board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; align-items: start; }
@media (max-width: 1300px) { .pipe-board { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .pipe-board { grid-template-columns: 1fr; } }

.pipe-col { background: var(--paper-2); border: 1px solid var(--line); border-radius: 14px; padding: 12px; min-height: 280px; }
.pipe-col-hd { display: flex; align-items: baseline; justify-content: space-between; padding: 4px 6px 10px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.pipe-col-hd .stage { font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.pipe-col-hd .sum { font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--ink-3); }

.pipe-card {
  background: var(--paper-1);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
  cursor: grab;
  transition: all .15s var(--ease);
}
.pipe-card:hover { border-color: var(--line-2); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.pipe-card .co { font-family: 'Geist', sans-serif; font-size: 17px; color: var(--ink-0); line-height: 1.15; }
.pipe-card .val { font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--ink-2); margin-top: 3px; }
.pipe-card .val b { color: var(--ink-0); }
.pipe-card .meta { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.pipe-card .owner { width: 22px; height: 22px; border-radius: 50%; color: var(--paper-1); font-family: 'Geist', sans-serif; font-size: 10px; display: grid; place-items: center; }
.pipe-card .last { font-family: 'Geist Mono', monospace; font-size: 9.5px; color: var(--ink-3); }
.pipe-card .flag {
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 999px;
  margin-top: 8px;
  display: inline-block;
}
.flag.risk { background: oklch(54% 0.130 25 / 0.10); color: var(--bad); }
.flag.heat { background: var(--accent-soft); color: var(--accent); }
.flag.warm { background: oklch(64% 0.110 70 / 0.10); color: var(--warn); }
.flag.cold { background: var(--paper-3); color: var(--ink-3); }

/* Pipeline — List view (stage-grouped rows; toggled with Board via the .seg) */
.pl-wrap { background: var(--paper-1); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.pl-thead, .pl-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 100px 110px 1fr;
  gap: 14px; align-items: center;
  padding: 11px 20px;
}
.pl-thead { background: var(--paper-2); border-bottom: 1px solid var(--line); }
.pl-thead > div {
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3);
}
.pl-group {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 20px; background: var(--paper-2);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.pl-group .stage { font-family: 'Geist', sans-serif; font-size: 12px; font-weight: 600; color: var(--ink-1); letter-spacing: -0.01em; }
.pl-group .sum { font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--ink-2); }
.pl-row { border-top: 1px solid var(--line); cursor: pointer; transition: background .12s var(--ease); }
.pl-group + .pl-row { border-top: none; }
.pl-row:hover { background: var(--paper-2); }
.pl-co { font-family: 'Geist', sans-serif; font-size: 14px; color: var(--ink-0); font-weight: 500; min-width: 0; }
.pl-ct { font-size: 12.5px; color: var(--ink-2); min-width: 0; }
.pl-val { font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--ink-0); }
.pl-last { font-family: 'Geist Mono', monospace; font-size: 10.5px; color: var(--ink-3); }
.pl-row .flag {
  font-family: 'Geist Mono', monospace; font-size: 9px; letter-spacing: 0.10em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 999px; display: inline-block;
}
@media (max-width: 768px) {
  .pl-thead { display: none; }
  .pl-row { grid-template-columns: 1fr auto; gap: 3px 12px; padding: 12px 16px; }
  .pl-row > div:nth-child(1) { grid-area: 1 / 1; }
  .pl-row > div:nth-child(3) { grid-area: 1 / 2; text-align: right; }
  .pl-row > div:nth-child(2) { grid-area: 2 / 1; font-size: 11.5px; }
  .pl-row > div:nth-child(4) { grid-area: 2 / 2; text-align: right; }
  .pl-row > div:nth-child(5) { display: none; }
  .pl-group { padding: 9px 16px; }
}

/* ──────────────────────────────────────────────────────────────
   TRAVEL
   ────────────────────────────────────────────────────────────── */
.trip-card { background: var(--paper-1); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm); overflow: hidden; }
.trip-hero {
  padding: 28px 32px;
  background:
    linear-gradient(135deg, var(--accent-soft), transparent 70%),
    var(--paper-1);
  border-bottom: 1px solid var(--line);
}
.trip-route {
  font-family: 'Geist', sans-serif;
  font-size: 32px;
  line-height: 1.1;
  color: var(--ink-0);
  display: flex; align-items: center; gap: 14px;
}
.trip-route .iata { letter-spacing: 0.04em; }
.trip-route .arr {
  color: var(--accent);
  font-size: 22px;
}
.trip-when { margin-top: 8px; font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--ink-2); letter-spacing: 0.10em; text-transform: uppercase; }
.trip-purpose { margin-top: 10px; font-size: 13.5px; color: var(--ink-2); max-width: 540px; line-height: 1.5; }

.trip-body { padding: 22px 32px; display: grid; grid-template-columns: 220px 1fr; gap: 28px; }
@media (max-width: 900px) { .trip-body { grid-template-columns: 1fr; } }

.trip-meta-block { display: flex; flex-direction: column; gap: 14px; }
.trip-meta { font-size: 12.5px; color: var(--ink-1); line-height: 1.5; }
.trip-meta .l { font-family: 'Geist Mono', monospace; font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.trip-meta b { color: var(--ink-0); font-weight: 500; }

.itin { display: flex; flex-direction: column; }
.itin-day { display: grid; grid-template-columns: 60px 1fr; gap: 18px; padding: 14px 0; border-top: 1px solid var(--line); }
.itin-day:first-child { border-top: 0; padding-top: 0; }
.itin-day .day-lbl { font-family: 'Geist', sans-serif; font-size: 22px; color: var(--ink-0); line-height: 1; }
.itin-day .day-lbl small { display: block; font-family: 'Geist Mono', monospace; font-size: 9.5px; color: var(--ink-3); letter-spacing: 0.14em; text-transform: uppercase; margin-top: 4px; }
.itin-items { display: flex; flex-direction: column; gap: 8px; }
.itin-item { display: grid; grid-template-columns: 70px 22px 1fr; gap: 12px; align-items: start; }
.itin-time { font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--ink-2); padding-top: 2px; }
.itin-ico { width: 22px; height: 22px; border-radius: 6px; background: var(--paper-2); border: 1px solid var(--line); display: grid; place-items: center; font-size: 11px; color: var(--ink-2); }
.itin-body .h { font-size: 13px; color: var(--ink-0); font-weight: 500; line-height: 1.3; }
.itin-body .s { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; line-height: 1.3; }
.itin-body .tag {
  display: inline-block;
  margin-top: 4px;
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink-3);
  border: 1px solid var(--line);
}
.itin-body .tag.booked { background: oklch(52% 0.085 155 / 0.10); color: var(--good); border-color: oklch(52% 0.085 155 / 0.3); }
.itin-body .tag.held { background: oklch(64% 0.110 70 / 0.10); color: var(--warn); border-color: oklch(64% 0.110 70 / 0.3); }
.itin-body .tag.confirmed { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }

.trip-side-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
@media (max-width: 1100px) { .trip-side-grid { grid-template-columns: 1fr; } }

/* ──────────────────────────────────────────────────────────────
   THEMES
   ────────────────────────────────────────────────────────────── */

/* PAPER (default) is the :root values. */

/* NIGHT — deep ink, warm accents pop */
body[data-theme="night"] {
  --paper-0: oklch(17% 0.012 250);
  --paper-1: oklch(20% 0.013 250);
  --paper-2: oklch(24% 0.014 250);
  --paper-3: oklch(28% 0.015 250);
  --line:    oklch(30% 0.014 250);
  --line-2:  oklch(38% 0.014 250);
  --ink-0:   oklch(96% 0.005 80);
  --ink-1:   oklch(86% 0.006 80);
  --ink-2:   oklch(70% 0.008 80);
  --ink-3:   oklch(54% 0.010 80);
  --ink-4:   oklch(40% 0.012 80);
  --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.5), 0 1px 1px oklch(0% 0 0 / 0.3);
  --shadow-md: 0 1px 2px oklch(0% 0 0 / 0.5), 0 6px 22px oklch(0% 0 0 / 0.4);
  --shadow-lg: 0 2px 6px oklch(0% 0 0 / 0.5), 0 18px 48px oklch(0% 0 0 / 0.5);
}
body[data-theme="night"] {
  background:
    radial-gradient(1100px 600px at 100% -10%, oklch(58% 0.115 36 / 0.10), transparent 60%),
    radial-gradient(900px 500px at -10% 100%, oklch(48% 0.06 250 / 0.10), transparent 60%),
    var(--paper-0);
}
body[data-theme="night"] .brand-mark {
  background: linear-gradient(150deg, oklch(40% 0.04 250), oklch(28% 0.02 250) 60%, var(--accent));
}
body[data-theme="night"] .chat {
  background: oklch(22% 0.014 250 / 0.78);
  border-color: oklch(38% 0.014 250 / 0.6);
}
body[data-theme="night"] .suggest-chip {
  background: oklch(22% 0.014 250 / 0.75);
  border-color: oklch(38% 0.014 250 / 0.5);
  color: var(--ink-1);
}
body[data-theme="night"] .btn-accent:not(.clay) { background: var(--paper-1); color: var(--ink-0); border-color: var(--line-2); }
body[data-theme="night"] .dec-btn.primary { background: var(--ink-0); color: var(--paper-0); }
body[data-theme="night"] .seg button.on { background: var(--ink-0); color: var(--paper-0); }

/* MONO — neutral greyscale, higher contrast */
body[data-theme="mono"] {
  --paper-0: oklch(99% 0 0);
  --paper-1: oklch(100% 0 0);
  --paper-2: oklch(96% 0 0);
  --paper-3: oklch(92% 0 0);
  --line:    oklch(90% 0 0);
  --line-2:  oklch(82% 0 0);
  --ink-0:   oklch(14% 0 0);
  --ink-1:   oklch(28% 0 0);
  --ink-2:   oklch(44% 0 0);
  --ink-3:   oklch(60% 0 0);
  --ink-4:   oklch(74% 0 0);
}
body[data-theme="mono"] {
  background: var(--paper-0);
}
body[data-theme="mono"] .brand-mark {
  background: linear-gradient(150deg, var(--ink-0), var(--ink-1) 60%);
}

/* SAGE — cool muted green base */
body[data-theme="sage"] {
  --paper-0: oklch(97% 0.010 165);
  --paper-1: oklch(98.5% 0.008 165);
  --paper-2: oklch(94% 0.012 165);
  --paper-3: oklch(89% 0.014 165);
  --line:    oklch(86% 0.013 165);
  --line-2:  oklch(78% 0.015 165);
  --ink-0:   oklch(22% 0.015 165);
  --ink-1:   oklch(33% 0.014 165);
  --ink-2:   oklch(48% 0.012 165);
  --ink-3:   oklch(62% 0.010 165);
  --ink-4:   oklch(74% 0.008 165);
}
body[data-theme="sage"] {
  background:
    radial-gradient(1100px 600px at 100% -10%, oklch(58% 0.115 36 / 0.04), transparent 60%),
    radial-gradient(900px 500px at -10% 100%, oklch(48% 0.06 165 / 0.06), transparent 60%),
    var(--paper-0);
}

/* ──────────────────────────────────────────────────────────────
   CHAT — pulse fix (no overlap, slower cadence)
   ────────────────────────────────────────────────────────────── */
/* While thinking, blank the input & placeholder so the status doesn't overlap them */
.chat.thinking .chat-input { color: transparent; caret-color: transparent; }
.chat.thinking .chat-input::placeholder { color: transparent; }

/* Status sits to the right of the glyph; left padding wraps right side of input area */
.thinking-status {
  background: transparent;
  padding: 0 12px 0 0;
  border-radius: 999px;
}

/* ──────────────────────────────────────────────────────────────
   MEMORY PAGE
   ────────────────────────────────────────────────────────────── */
.mem-wrap { display: grid; grid-template-columns: 1fr 320px; gap: 18px; align-items: start; }
@media (max-width: 1200px) { .mem-wrap { grid-template-columns: 1fr; } }

.mem-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.mem-filter {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--paper-1);
  border: 1px solid var(--line);
  color: var(--ink-2);
  cursor: pointer;
  transition: all .15s var(--ease);
}
.mem-filter:hover { color: var(--ink-0); border-color: var(--line-2); }
.mem-filter.on { background: var(--ink-0); color: var(--paper-1); border-color: var(--ink-0); }

.mem-list { display: flex; flex-direction: column; gap: 10px; }
.mem-card {
  background: var(--paper-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 22px;
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 18px;
  align-items: start;
  transition: all .15s var(--ease);
}
.mem-card:hover { border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.mem-tag {
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 2px;
}
.mem-tag::before {
  content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--ink-4); margin-right: 7px; vertical-align: middle;
}
.mem-tag.rule::before    { background: var(--accent); }
.mem-tag.pref::before    { background: var(--good); }
.mem-tag.person::before  { background: oklch(50% 0.080 250); }
.mem-tag.project::before { background: var(--warn); }
.mem-tag.context::before { background: oklch(50% 0.080 290); }

.mem-body .h {
  font-family: 'Geist', sans-serif;
  font-size: 18px;
  line-height: 1.3;
  color: var(--ink-0);
  letter-spacing: -0.005em;
  text-wrap: pretty;
}
.mem-body .h em { font-style: italic; color: var(--accent); }
.mem-body .src {
  margin-top: 8px;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  display: flex; gap: 10px; flex-wrap: wrap;
}
.mem-body .src span { display: inline-flex; align-items: center; gap: 5px; }
.mem-body .src .sep { color: var(--ink-4); }
.mem-actions { display: flex; gap: 4px; }
.mem-act {
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 6px 10px;
  border: 1px solid var(--line);
  background: var(--paper-1);
  color: var(--ink-2);
  border-radius: 999px;
  cursor: pointer;
  transition: all .15s var(--ease);
}
.mem-act:hover { background: var(--paper-2); color: var(--ink-0); }
.mem-act.forget:hover { color: var(--bad); border-color: oklch(54% 0.130 25 / 0.4); }

.mem-side .card-pad { padding: 22px; }
.mem-stat-row {
  display: grid; grid-template-columns: 1fr auto; gap: 8px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-1);
  align-items: baseline;
}
.mem-stat-row:first-of-type { border-top: 0; }
.mem-stat-row .v { font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--ink-0); }
.mem-add-btn {
  margin-top: 14px;
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  background: var(--paper-2);
  border: 1px dashed var(--line-2);
  color: var(--ink-2);
  font-family: 'Geist', sans-serif;
  font-size: 12.5px;
  cursor: pointer;
  transition: all .15s var(--ease);
}
.mem-add-btn:hover { border-color: var(--accent-line); color: var(--accent); background: var(--accent-soft); }

.mem-recent { display: flex; flex-direction: column; gap: 0; margin-top: 4px; }
.mem-recent-row {
  display: grid; grid-template-columns: 56px 1fr;
  gap: 10px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.4;
}
.mem-recent-row:first-of-type { border-top: 0; }
.mem-recent-row .d { font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--ink-3); padding-top: 2px; }
.mem-recent-row .what { color: var(--ink-1); }
.mem-recent-row .what em { font-style: italic; color: var(--accent); }

/* ──────────────────────────────────────────────────────────────
   INTEGRATIONS PAGE
   ────────────────────────────────────────────────────────────── */
.int-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: 22px;
}
.int-summary .cell { background: var(--paper-1); padding: 18px 22px; }
.int-summary .cell .v { font-family: 'Geist', sans-serif; font-size: 32px; color: var(--ink-0); line-height: 1; }
.int-summary .cell .l { font-family: 'Geist Mono', monospace; font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); margin-top: 4px; }

.int-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 1100px) { .int-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px)  { .int-grid { grid-template-columns: 1fr; } }

.int-card {
  background: var(--paper-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 20px 22px;
  display: flex; flex-direction: column; gap: 14px;
  transition: all .15s var(--ease);
}
.int-card:hover { border-color: var(--line-2); box-shadow: var(--shadow-sm); }

.int-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.int-logo {
  width: 36px; height: 36px;
  border-radius: 9px;
  display: grid; place-items: center;
  font-family: 'Geist', sans-serif;
  font-size: 16px;
  color: var(--paper-1);
  flex-shrink: 0;
  letter-spacing: -0.02em;
}
.int-name { font-size: 14.5px; color: var(--ink-0); font-weight: 500; line-height: 1.2; }
.int-cat { font-family: 'Geist Mono', monospace; font-size: 9.5px; color: var(--ink-3); letter-spacing: 0.10em; text-transform: uppercase; margin-top: 3px; }

.int-status {
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.int-status::before { content: ''; width: 5px; height: 5px; border-radius: 50%; }
.int-status.live   { color: var(--good); background: oklch(52% 0.085 155 / 0.10); }
.int-status.live::before { background: var(--good); }
.int-status.syncing { color: var(--accent); background: var(--accent-soft); }
.int-status.syncing::before { background: var(--accent); animation: pulse 1.6s ease-in-out infinite; }
.int-status.warn   { color: var(--warn); background: oklch(64% 0.110 70 / 0.10); }
.int-status.warn::before { background: var(--warn); }
.int-status.off    { color: var(--ink-3); background: var(--paper-2); }
.int-status.off::before { background: var(--ink-4); }

.int-desc { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.int-meta { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.int-meta-row {
  display: grid; grid-template-columns: 1fr auto; gap: 10px;
  font-size: 11.5px; color: var(--ink-2);
}
.int-meta-row .v { font-family: 'Geist Mono', monospace; font-size: 10.5px; color: var(--ink-1); }
.int-foot { display: flex; gap: 6px; padding-top: 4px; }
.int-foot .btn { flex: 1; justify-content: center; }

.int-card.disabled .int-logo { background: var(--paper-3) !important; color: var(--ink-3) !important; }
/* Disabled-tile invert was designed for monochrome white-fill SimpleIcons
   SVGs — it turns a white glyph into a dark-grey one that reads correctly
   on the dimmed tile. Applied to a full-colour brand PNG (Slack pinwheel,
   Salesforce blue cloud) it mangles every colour: blue→brown,
   green→magenta, etc. Skip the filter for full-colour marks and keep
   them at full strength — the "Not connected" / "Coming soon" status
   badge already conveys the disabled state. Dimming the icon on top
   of that just made everyone read it as "broken brand". */
.int-card.disabled .int-logo img { filter: invert(1) brightness(0.55); }
.int-card.disabled .int-logo.full-color img { filter: none; opacity: 1; }
.int-logo img { display: block; }
.int-card.disabled .int-name { color: var(--ink-2); }

/* available services row */
.int-avail {
  margin-top: 28px;
  padding: 20px 22px;
  background: var(--paper-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.int-avail-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.int-avail-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px 8px 8px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--ink-1);
  cursor: pointer;
  transition: all .15s var(--ease);
}
.int-avail-chip:hover { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); }
.int-avail-chip .lg {
  width: 22px; height: 22px;
  border-radius: 6px;
  display: grid; place-items: center;
  font-family: 'Geist', sans-serif;
  font-size: 11px;
  color: var(--paper-1);
}

/* Integration settings modal */
.int-set-dialog { max-width: 460px; }
.int-set-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.int-set-id { display: flex; align-items: flex-start; gap: 12px; }
.int-set-head-r { display: flex; align-items: center; gap: 10px; }
.int-set-close { border: none; background: none; font-size: 20px; line-height: 1; color: var(--ink-3); cursor: pointer; padding: 0 2px; }
.int-set-close:hover { color: var(--ink-0); }
.int-set-desc { font-size: 13px; color: var(--ink-2); line-height: 1.5; margin-bottom: 4px; }
.int-set-section { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 16px; }
.int-set-section-h { font-family: 'Geist Mono', monospace; font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.int-set-opt { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; cursor: pointer; }
.int-set-opt input { margin-top: 3px; accent-color: var(--accent); flex-shrink: 0; }
.int-set-opt-t { font-size: 13.5px; color: var(--ink-0); font-weight: 500; }
.int-set-opt-s { font-size: 12px; color: var(--ink-3); line-height: 1.45; margin-top: 2px; }
.int-set-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 22px; }
.int-set-foot-r { display: flex; gap: 8px; }
.int-set-danger { color: var(--bad); }

/* ──────────────────────────────────────────────────────────────
   SETTINGS PAGE
   ────────────────────────────────────────────────────────────── */
.set-wrap { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: start; }
@media (max-width: 1100px) { .set-wrap { grid-template-columns: 1fr; } }

.set-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 30px; }
.set-nav-section {
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.20em;
  color: var(--ink-4);
  text-transform: uppercase;
  padding: 16px 10px 6px;
}
.set-nav-section:first-child { padding-top: 4px; }
.set-nav button {
  text-align: left;
  background: transparent;
  border: 0;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
  transition: all .15s var(--ease);
  font-family: 'Geist', sans-serif;
}
.set-nav button:hover { background: var(--paper-2); color: var(--ink-0); }
.set-nav button.on { background: var(--paper-2); color: var(--ink-0); box-shadow: inset 0 0 0 1px var(--line); }

.set-section {
  background: var(--paper-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: 18px;
  overflow: hidden;
}
.set-section-hd {
  padding: 20px 26px 14px;
  border-bottom: 1px solid var(--line);
}
.set-section-hd .h {
  font-family: 'Geist', sans-serif;
  font-size: 22px;
  line-height: 1.15;
  color: var(--ink-0);
}
.set-section-hd .s { font-size: 12.5px; color: var(--ink-3); margin-top: 4px; }

.set-row {
  display: grid;
  grid-template-columns: 230px 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 16px 26px;
  border-top: 1px solid var(--line);
}
.set-row:first-of-type { border-top: 0; }
.set-row.stack { grid-template-columns: 1fr; align-items: start; }
.set-row .lbl { font-size: 13px; color: var(--ink-0); font-weight: 500; }
.set-row .hint { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; line-height: 1.45; max-width: 320px; }
.set-row .val { font-family: 'Geist Mono', monospace; font-size: 11.5px; color: var(--ink-2); justify-self: start; }

/* form controls */
.set-input, .set-select, .set-textarea {
  width: 100%;
  font-family: 'Geist', sans-serif;
  font-size: 13.5px;
  color: var(--ink-0);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 12px;
  outline: none;
  transition: all .15s var(--ease);
}
.set-input:focus, .set-select:focus, .set-textarea:focus { border-color: var(--accent-line); background: var(--paper-1); }
.set-textarea { resize: vertical; min-height: 76px; font-family: 'Geist', sans-serif; font-size: 16px; line-height: 1.45; }

.set-switch {
  position: relative;
  width: 40px; height: 22px;
  background: var(--paper-3);
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid var(--line);
  transition: all .15s var(--ease);
  flex-shrink: 0;
}
.set-switch::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: var(--paper-1);
  border-radius: 50%;
  transition: transform .2s var(--ease);
  box-shadow: 0 1px 2px oklch(20% 0.02 250 / 0.18);
}
.set-switch.on { background: var(--accent); border-color: var(--accent); }
.set-switch.on::after { transform: translateX(18px); }
.set-switch[disabled] { opacity: 0.4; cursor: not-allowed; }

/* Notification channel toggles (Settings → Notifications) */
.chan-list { display: flex; flex-direction: column; gap: 9px; min-width: 210px; }
.chan-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.chan-name { font-size: 13px; color: var(--ink-1); display: flex; align-items: center; gap: 7px; }
.chan-row.chan-off .chan-name { color: var(--ink-3); }
.chan-always {
  font-size: 10px; color: var(--ink-3); text-transform: uppercase;
  letter-spacing: 0.08em; font-weight: 600;
}
.chan-connect { font-size: 11px; color: var(--accent); text-decoration: none; }
.chan-connect:hover { text-decoration: underline; }

.set-slider {
  display: flex; align-items: center; gap: 14px;
  width: 280px;
}
.set-slider .track {
  flex: 1; height: 4px; border-radius: 99px;
  background: var(--paper-3);
  position: relative;
}
.set-slider .track > i {
  position: absolute; left: 0; top: 0; height: 100%;
  background: var(--accent);
  border-radius: inherit;
}
.set-slider .track > b {
  position: absolute;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--paper-1);
  border: 2px solid var(--accent);
  top: -5px;
  transform: translateX(-7px);
  box-shadow: var(--shadow-sm);
}
.set-slider .v {
  font-family: 'Geist Mono', monospace;
  font-size: 11.5px;
  color: var(--ink-1);
  min-width: 48px;
  text-align: right;
}

.set-hours {
  display: flex; gap: 8px; align-items: center;
  font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--ink-1);
}
.set-hours .pill {
  padding: 6px 12px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink-0);
}

/* theme swatches */
.theme-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.theme-swatch {
  background: var(--paper-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
  transition: all .15s var(--ease);
  display: flex; flex-direction: column; gap: 10px;
}
.theme-swatch:hover { border-color: var(--line-2); }
.theme-swatch.on {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.theme-prev {
  height: 70px; border-radius: 8px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
}
.theme-prev::before {
  content: '';
  position: absolute; left: 8px; top: 10px; width: 30%; height: 8px;
  border-radius: 99px;
  background: var(--prev-ink);
}
.theme-prev::after {
  content: '';
  position: absolute; left: 8px; bottom: 10px; width: 60%; height: 6px;
  border-radius: 99px;
  background: var(--prev-ink-soft);
}
.theme-prev > i {
  position: absolute; right: 8px; bottom: 8px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--prev-accent);
}
.theme-swatch .nm { font-size: 13px; color: var(--ink-0); font-weight: 500; }
.theme-swatch .sub { font-family: 'Geist Mono', monospace; font-size: 9.5px; letter-spacing: 0.10em; color: var(--ink-3); text-transform: uppercase; }

.theme-prev.paper { background: oklch(98.4% 0.004 80); --prev-ink: oklch(28% 0.014 250); --prev-ink-soft: oklch(60% 0.010 250); --prev-accent: oklch(58% 0.115 36); }
.theme-prev.night { background: oklch(17% 0.012 250); --prev-ink: oklch(90% 0.005 80); --prev-ink-soft: oklch(60% 0.010 80); --prev-accent: oklch(58% 0.115 36); }
.theme-prev.mono  { background: oklch(99% 0 0);        --prev-ink: oklch(20% 0 0);      --prev-ink-soft: oklch(60% 0 0);     --prev-accent: oklch(20% 0 0); }
.theme-prev.sage  { background: oklch(97% 0.010 165);  --prev-ink: oklch(28% 0.015 165); --prev-ink-soft: oklch(55% 0.013 165); --prev-accent: oklch(48% 0.080 165); }

/* accent swatch row */
.accent-swatches { display: flex; gap: 10px; }
.accent-swatch {
  width: 36px; height: 36px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid var(--paper-1);
  outline: 1px solid var(--line);
  outline-offset: 0;
  transition: all .15s var(--ease);
}
.accent-swatch.on { outline: 2px solid var(--ink-0); outline-offset: 2px; }
.accent-swatch:hover { transform: scale(1.06); }

/* danger row */
.set-section.danger { border-color: oklch(54% 0.130 25 / 0.3); }
.set-section.danger .set-section-hd .h { color: var(--bad); }

/* ━━━ LIVE-ONLY ADDITIONS (preserved) ━━━ */

/* Live-only rules preserved across design CSS port */

/* Language pills live in Settings → Display now (used to be in the
 * sidebar). The wrapping .lang-toggle div + .lang-label were sidebar
 * chrome; deleted alongside the move. .lang-pills + .lang-pill rules
 * below still apply — they style the DE/EN buttons wherever mounted. */
.lang-pills {
  display: flex; gap: 3px;
}

.lang-pill {
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: transparent;
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-3); cursor: pointer;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}

.lang-pill.on {
  background: var(--ink-0); color: var(--paper-1); border-color: var(--ink-0);
}

.btn-primary { background: var(--accent); color: #fff; border-color: transparent; }

.btn-primary:hover { filter: brightness(1.1); }

.prio.active-prio { background: var(--accent-soft); border-radius: 8px; margin: 0 -8px; padding-left: 8px; padding-right: 8px; }

.brief-suggest-panel {
  margin: 2px 0 6px;
  padding: 14px 16px;
  background: var(--paper-1);
  border: 1px solid var(--accent-line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}

.brief-suggest-panel.in { opacity: 1; transform: none; }

.bsp-head {
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}

.bsp-list { display: flex; flex-direction: column; gap: 5px; }

.bsp-btn {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}

.bsp-btn:hover { background: var(--accent-soft); border-color: var(--accent-line); }

.bsp-btn-icon { font-size: 14px; flex-shrink: 0; }

.bsp-btn-body { display: flex; flex-direction: column; gap: 1px; }

.bsp-lbl { font-size: 13px; font-weight: 500; color: var(--ink-0); }

.bsp-sub { font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--ink-3); }

.sidebar-close {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 12px; right: 12px;
    width: 36px; height: 36px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: transparent;
    color: var(--ink-2);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

.empty-state {
  padding: 56px 32px;
  text-align: center;
  background: var(--paper-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  max-width: 560px;
  margin: 24px auto;
}

.empty-state .empty-icon {
  font-size: 36px;
  margin-bottom: 14px;
  opacity: 0.85;
}

.empty-state h2 {
  font-family: 'Geist', sans-serif;
  font-size: 24px;
  color: var(--ink-0);
  margin-bottom: 10px;
}

.empty-state p {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0 auto 18px;
  max-width: 380px;
}

.set-row-label { display: flex; align-items: center; }

.set-row-label span { font-size: 13px; color: var(--ink-1); }

/* ── Random-Brain (Phase 2): the calm window into the brain ──────────────── */
.rb-hd { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; }
.rb-hd-actions { display:flex; gap:10px; flex-shrink:0; align-items:center; }
.rb-advanced { color:var(--ink-3); }
.rb-group { margin-top:30px; }
.rb-group-hd { font-size:11px; color:var(--ink-3); margin-bottom:14px; }
.rb-cards { display:flex; flex-direction:column; gap:10px; }
.rb-card {
  display:flex; align-items:center; gap:14px; padding:15px 18px;
  background:var(--paper-1); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--shadow-sm); cursor:pointer; transition:border-color .12s var(--ease), box-shadow .12s var(--ease);
}
.rb-card:hover { border-color:var(--accent-line); box-shadow:0 2px 10px oklch(20% 0.02 250 / 0.07); }
.rb-card:focus-visible { outline:2px solid var(--accent-line); outline-offset:2px; }
/* Card icons: one calm monochrome line-glyph family, no colored tile (Fable). */
.rb-icon { flex-shrink:0; width:40px; height:40px; display:flex; align-items:center; justify-content:center; color:var(--ink-2); background:transparent; }
.rb-icon svg { width:20px; height:20px; display:block; }
.rb-line { flex:1; min-width:0; font-size:14px; line-height:1.45; color:var(--ink-1);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rb-pill { flex-shrink:0; font-size:11px; font-weight:600; padding:3px 11px; border-radius:999px; }
.rb-pill.on { background:color-mix(in oklch, var(--good) 14%, transparent); color:var(--good); }
.rb-pill.off { background:var(--paper-2); color:var(--ink-3); }
.rb-steps-toggle { flex-shrink:0; background:none; border:none; color:var(--ink-3); font-size:12px; cursor:pointer; padding:4px 6px; }
.rb-steps-toggle:hover { color:var(--ink-1); }
.rb-steps { margin:-2px 0 4px 54px; padding:10px 14px; background:var(--paper-2); border-radius:var(--r-sm);
  font-size:12.5px; color:var(--ink-2); line-height:1.7; }
.rb-steps-note { margin-top:6px; color:var(--ink-3); font-size:11.5px; }
.rb-empty { padding:30px 22px; text-align:center; color:var(--ink-3); font-size:13px; line-height:1.6;
  background:var(--paper-2); border-radius:var(--r-md); }
.rb-undo { display:flex; align-items:center; gap:12px; margin-top:14px; padding:10px 14px;
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-sm); font-size:13px; color:var(--ink-2); }
.rb-undo-btn { background:none; border:none; color:var(--accent); font-weight:600; cursor:pointer; font-size:13px; }
/* The edit/delete window (reuses .mem-add-dialog shell) */
.rb-edit-form { display:flex; flex-direction:column; gap:13px; min-width:min(440px,86vw); }
.rb-edit-title { font-size:14px; font-weight:600; color:var(--ink-0); }
.rb-edit-form textarea { width:100%; box-sizing:border-box; font:inherit; font-size:14px; line-height:1.5;
  padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--paper-1); color:var(--ink-1); resize:vertical; min-height:54px; }
.rb-edit-row { font-size:12.5px; color:var(--ink-2); }
.rb-edit-row .lbl { color:var(--ink-4); }
.rb-advanced-link { color:var(--accent); text-decoration:none; }
.rb-toggle { display:flex; align-items:center; gap:10px; }
.rb-snooze-chips { display:flex; gap:8px; flex-wrap:wrap; }
.rb-chip { font-size:12px; padding:5px 12px; border-radius:999px; border:1px solid var(--line); background:var(--paper-1); color:var(--ink-2); cursor:pointer; }
.rb-chip:hover { border-color:var(--accent-line); }
.rb-edit-actions { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:6px; }
.rb-edit-right { display:flex; gap:8px; }
.rb-delete { background:none; border:none; color:var(--ink-3); font-size:13px; cursor:pointer; padding:6px 4px; }
.rb-delete:hover { color:var(--bad); }

/* ── Random-Brain Canvas (Advanced view): a calm vertical flow (designed by Fable) ── */
.rbc-hd { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; }
.rbc-hd-title { font-size:16px; font-weight:600; color:var(--ink-0); min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rbc-canvas {
  position:relative; padding:34px 22px 30px;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--ink-3) 22%, transparent) 1px, transparent 1.5px)
    0 0 / 22px 22px,
    var(--paper-2);
  border:1px solid var(--line); border-radius:var(--r-md);
}
.rbc-flow { max-width:540px; margin:0 auto; display:flex; flex-direction:column; align-items:stretch; }
.rbc-trigger {
  align-self:center; display:inline-flex; align-items:center; gap:11px;
  max-width:100%; box-sizing:border-box; padding:9px 20px 9px 16px;
  background:var(--accent-soft); border:1px solid var(--accent-line); border-radius:999px;
  font:inherit; cursor:pointer; text-align:left;
  transition:border-color .12s var(--ease), background .12s var(--ease);
}
.rbc-trigger:hover { border-color:var(--accent); }
.rbc-trigger:focus-visible { outline:2px solid var(--accent-line); outline-offset:2px; }
.rbc-trigger-icon { flex-shrink:0; display:flex; color:var(--accent); }
.rbc-trigger-icon svg { width:17px; height:17px; display:block; }
.rbc-trigger-body { min-width:0; display:flex; flex-direction:column; gap:1px; }
.rbc-trigger-eyebrow { font-size:10px; color:var(--accent); }
.rbc-trigger-label { font-size:13.5px; color:var(--ink-1);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rbc-node {
  position:relative; display:flex; align-items:center; gap:13px;
  padding:13px 15px 13px 13px;
  background:var(--paper-1); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--shadow-sm); cursor:pointer;
  transition:border-color .12s var(--ease), box-shadow .12s var(--ease);
}
.rbc-node:hover { border-color:var(--accent-line); box-shadow:0 2px 10px oklch(20% 0.02 250 / 0.07); }
.rbc-node:focus-visible { outline:2px solid var(--accent-line); outline-offset:2px; }
.rbc-icon { flex-shrink:0; width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  background:var(--paper-2); border-radius:10px; color:var(--ink-2); }
.rbc-icon svg { width:20px; height:20px; display:block; }
.rbc-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.rbc-title { font-size:14px; font-weight:500; color:var(--ink-0);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rbc-sub { font-size:12.5px; color:var(--ink-3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rbc-sub:empty { display:none; }
.rbc-chip { flex-shrink:0; font-size:11px; font-weight:600; padding:3px 10px;
  border-radius:999px; background:var(--accent-soft); color:var(--accent); white-space:nowrap; }
.rbc-node-actions {
  position:absolute; top:-13px; right:10px; display:flex; gap:2px; padding:2px;
  background:var(--paper-1); border:1px solid var(--line); border-radius:9px;
  box-shadow:var(--shadow-sm);
  opacity:0; transform:translateY(2px); pointer-events:none;
  transition:opacity .14s var(--ease), transform .14s var(--ease);
}
.rbc-node:hover .rbc-node-actions,
.rbc-node:focus-within .rbc-node-actions { opacity:1; transform:none; pointer-events:auto; }
@media (hover:none) { .rbc-node-actions { opacity:1; transform:none; pointer-events:auto; } }
.rbc-act { width:26px; height:26px; display:flex; align-items:center; justify-content:center;
  background:none; border:none; border-radius:7px; padding:0; color:var(--ink-3); cursor:pointer;
  transition:background .12s var(--ease), color .12s var(--ease); }
.rbc-act svg { width:14px; height:14px; display:block; }
.rbc-act:hover { background:var(--paper-2); color:var(--ink-1); }
.rbc-act:focus-visible { outline:2px solid var(--accent-line); outline-offset:1px; }
.rbc-act.danger:hover { color:var(--bad); background:color-mix(in srgb, var(--bad) 10%, transparent); }
.rbc-act:disabled { opacity:.35; cursor:default; }
.rbc-act:disabled:hover { background:none; color:var(--ink-3); }
.rbc-link { position:relative; width:2px; height:26px; margin:0 auto; background:var(--line); }
.rbc-link::before, .rbc-link::after { content:""; position:absolute; left:50%;
  transform:translateX(-50%); width:6px; height:6px; border-radius:50%; background:var(--ink-4); }
.rbc-link::before { top:-3px; }
.rbc-link::after { bottom:-3px; }
.rbc-children { display:flex; flex-direction:column; gap:10px;
  margin:10px 0 2px 24px; padding-left:16px; border-left:2px solid var(--line); }
.rbc-children .rbc-node { padding:11px 13px; }
.rbc-children .rbc-icon { width:32px; height:32px; }
.rbc-children .rbc-icon svg { width:18px; height:18px; }
.rbc-add { display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  box-sizing:border-box; padding:13px;
  background:none; border:1.5px dashed color-mix(in srgb, var(--ink-3) 45%, transparent);
  border-radius:var(--r-md); color:var(--ink-3);
  font:inherit; font-size:13px; font-weight:500; cursor:pointer;
  transition:border-color .14s var(--ease), color .14s var(--ease), background .14s var(--ease); }
.rbc-add svg { width:16px; height:16px; display:block; }
.rbc-add:hover { border-color:var(--accent-line); color:var(--accent); background:var(--accent-soft); }
.rbc-add:focus-visible { outline:2px solid var(--accent-line); outline-offset:2px; }
/* Step editor select + the add-step primitive picker (in the shared dialog shell). */
.rbc-select { width:100%; box-sizing:border-box; font:inherit; font-size:14px; padding:9px 11px;
  border:1px solid var(--line); border-radius:10px; background:var(--paper-1); color:var(--ink-1); }
.rbc-picker { display:flex; flex-direction:column; gap:8px; min-width:min(420px,84vw); }
.rbc-pick { display:flex; align-items:center; gap:12px; padding:11px 13px; text-align:left;
  background:var(--paper-1); border:1px solid var(--line); border-radius:var(--r-sm); cursor:pointer;
  transition:border-color .12s var(--ease), background .12s var(--ease); }
.rbc-pick:hover { border-color:var(--accent-line); background:var(--paper-2); }
.rbc-pick-body { display:flex; flex-direction:column; gap:1px; min-width:0; }
@media (max-width: 560px) { .rbc-canvas { padding:26px 14px 24px; } }

/* ── Flow Builder v2: Decide branches, grouped picker, sentence editor (Fable) ── */
.rbc-branches { position:relative; display:flex; flex-direction:column; gap:14px;
  margin:10px 0 2px 24px; padding-left:16px; min-width:0; }
.rbc-branches::before { content:""; position:absolute; left:0; top:-10px; bottom:15px;
  width:2px; border-radius:1px; background:var(--line); }
.rbc-branch { position:relative; display:flex; flex-direction:column; align-items:stretch;
  min-width:0; padding-left:14px; }
.rbc-branch::before { content:""; position:absolute; left:-16px; top:12px;
  width:16px; height:2px; background:var(--line); }
.rbc-branch::after { content:""; position:absolute; left:0; top:27px; bottom:4px;
  width:2px; border-radius:1px; background:color-mix(in srgb, var(--line) 55%, transparent); }
.rbc-branch-pill { align-self:flex-start; max-width:100%; box-sizing:border-box;
  margin:0 0 9px; padding:3px 11px; font-size:12px; font-weight:600; line-height:1.5;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:var(--accent-soft); border:1px solid var(--accent-line);
  border-radius:999px; color:var(--accent); }
.rbc-branch-pill.otherwise { background:var(--paper-2); border-color:var(--line); color:var(--ink-3); }
.rbc-branch .rbc-node { padding:11px 13px 11px 12px; }
.rbc-branch .rbc-icon { width:32px; height:32px; }
.rbc-branch .rbc-icon svg { width:18px; height:18px; }
.rbc-branch .rbc-link { height:18px; }
.rbc-branches .rbc-branches { margin-left:14px; padding-left:12px; }
.rbc-branches .rbc-branches .rbc-branches { margin-left:8px; padding-left:10px; }
.rbc-branch-add { position:relative; align-self:flex-start; display:inline-flex;
  align-items:center; gap:6px; margin-left:14px; padding:6px 13px; background:none;
  border:1.5px dashed color-mix(in srgb, var(--ink-3) 40%, transparent);
  border-radius:999px; color:var(--ink-3); font:inherit; font-size:12px; font-weight:500; cursor:pointer;
  transition:border-color .12s var(--ease), color .12s var(--ease), background .12s var(--ease); }
.rbc-branch-add svg { width:13px; height:13px; display:block; }
.rbc-branch-add::before { content:""; position:absolute; left:-30px; top:50%; margin-top:-1px;
  width:16px; height:2px; background:var(--line); }
.rbc-branch-add:hover { border-color:var(--accent-line); color:var(--accent); background:var(--accent-soft); }
.rbc-branch-add:focus-visible { outline:2px solid var(--accent-line); outline-offset:2px; }
.rbc-branch-empty { padding:3px 2px 1px; font-size:12.5px; font-style:italic; color:var(--ink-4); }
.rbc-pick-group { display:flex; flex-direction:column; gap:8px; }
.rbc-pick-group + .rbc-pick-group { margin-top:8px; }
.rbc-pick-group-hd { padding:0 2px; font-size:10.5px; color:var(--ink-4); }
.rbc-pick[disabled], .rbc-pick.soon { opacity:.5; cursor:not-allowed; }
.rbc-pick[disabled]:hover, .rbc-pick.soon:hover { border-color:var(--line); background:var(--paper-1); }
.rbc-pick-soon { margin-left:auto; flex-shrink:0; padding:2px 8px; font-size:10px; background:var(--paper-2); border-radius:999px; color:var(--ink-3); }
.rbc-sentence { display:flex; flex-wrap:wrap; align-items:center; gap:8px 7px; min-width:0; }
.rbc-word { font-size:13.5px; color:var(--ink-2); }
.rbc-pill-select { max-width:100%; padding:6px 12px; font:inherit; font-size:13px; font-weight:500;
  color:var(--ink-1); background:var(--paper-2); border:1px solid var(--line); border-radius:999px; cursor:pointer;
  transition:border-color .12s var(--ease), box-shadow .12s var(--ease); }
.rbc-pill-select:hover { border-color:var(--accent-line); }
.rbc-pill-select:focus { outline:none; border-color:var(--accent-line); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.rbc-pill-input { flex:1 1 88px; min-width:72px; box-sizing:border-box; padding:6px 12px;
  font:inherit; font-size:13px; color:var(--ink-0); background:var(--paper-1);
  border:1px solid var(--line); border-radius:999px;
  transition:border-color .12s var(--ease), box-shadow .12s var(--ease); }
.rbc-pill-input::placeholder { color:var(--ink-4); }
.rbc-pill-input:focus { outline:none; border-color:var(--accent-line); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.rbc-branch-list { display:flex; flex-direction:column; gap:10px; }
.rbc-cond-row { display:flex; align-items:flex-start; gap:8px; }
.rbc-cond-row .rbc-sentence { flex:1; min-width:0; }
.rbc-cond-row .rbc-act { flex-shrink:0; margin-top:2px; }
.rbc-insert { align-self:flex-start; display:inline-flex; align-items:center; gap:6px; padding:5px 11px;
  background:none; border:1px dashed color-mix(in srgb, var(--ink-3) 40%, transparent);
  border-radius:999px; color:var(--ink-3); font:inherit; font-size:12px; font-weight:500; cursor:pointer;
  transition:border-color .12s var(--ease), color .12s var(--ease), background .12s var(--ease); }
.rbc-insert svg { width:13px; height:13px; display:block; }
.rbc-insert:hover { border-color:var(--accent-line); color:var(--accent); background:var(--accent-soft); }
.rbc-insert:focus-visible { outline:2px solid var(--accent-line); outline-offset:2px; }
.rbc-fieldlist { display:flex; flex-direction:column; gap:8px; }
.rbc-fieldlist > div { display:flex; align-items:center; gap:8px; }
.rbc-fieldlist input { flex:1; min-width:0; box-sizing:border-box; padding:8px 12px; font:inherit;
  font-size:13.5px; color:var(--ink-0); background:var(--paper-1); border:1px solid var(--line); border-radius:var(--r-sm);
  transition:border-color .12s var(--ease), box-shadow .12s var(--ease); }
.rbc-fieldlist input::placeholder { color:var(--ink-4); }
.rbc-fieldlist input:focus { outline:none; border-color:var(--accent-line); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.rbc-fieldlist .rbc-insert { margin-top:2px; }
.rbc-hint { margin:2px 0 0; font-size:12px; color:var(--ink-4); }
.rbc-namefield { width:100%; box-sizing:border-box; padding:8px 10px; font:inherit; font-size:18px;
  font-weight:600; color:var(--ink-0); background:none; border:1px solid transparent; border-radius:var(--r-sm);
  transition:border-color .12s var(--ease), background .12s var(--ease), box-shadow .12s var(--ease); }
.rbc-namefield:hover { border-color:color-mix(in srgb, var(--line) 70%, transparent); }
.rbc-namefield:focus { outline:none; background:var(--paper-1); border-color:var(--accent-line); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.rbc-namefield::placeholder { color:var(--ink-4); font-weight:500; }

/* ── Data Room (Phase 6): a quiet file room (designed by Fable) ──────────── */
.dr-layout { display:grid; grid-template-columns:218px minmax(0,1fr); gap:28px; align-items:start; }
.dr-rail { display:flex; flex-direction:column; gap:2px; position:sticky; top:24px; }
.dr-folder { display:flex; align-items:center; gap:10px; width:100%; box-sizing:border-box;
  padding:9px 12px; background:none; border:1px solid transparent; border-radius:10px;
  font:inherit; font-size:13.5px; color:var(--ink-2); text-align:left; cursor:pointer;
  transition:background .12s var(--ease), color .12s var(--ease); }
.dr-folder svg { width:17px; height:17px; flex-shrink:0; display:block; color:var(--ink-3); }
.dr-folder span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dr-folder:hover { background:var(--paper-2); color:var(--ink-1); }
.dr-folder:focus-visible { outline:2px solid var(--accent-line); outline-offset:2px; }
.dr-folder.on { background:var(--accent-soft); color:var(--accent); font-weight:600; }
.dr-folder.on svg { color:var(--accent); }
.dr-newfolder { display:flex; align-items:center; gap:10px; margin-top:12px; padding:8px 12px;
  background:none; border:1px dashed var(--line); border-radius:10px;
  font:inherit; font-size:13px; color:var(--ink-3); cursor:pointer;
  transition:color .12s var(--ease), border-color .12s var(--ease); }
.dr-newfolder svg { width:16px; height:16px; flex-shrink:0; display:block; }
.dr-newfolder:hover { color:var(--accent); border-color:var(--accent-line); }
.dr-newfolder:focus-visible { outline:2px solid var(--accent-line); outline-offset:2px; }
.dr-hd { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.dr-hd-title { font-family:'Geist',sans-serif; font-size:22px; letter-spacing:-0.01em; color:var(--ink-0); margin-right:auto; }
.dr-search { position:relative; width:min(300px,40vw); }
.dr-search svg { position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:var(--ink-3); pointer-events:none; }
.dr-search input { width:100%; box-sizing:border-box; height:36px; padding:0 14px 0 36px;
  font:inherit; font-size:13.5px; color:var(--ink-1);
  background:var(--paper-1); border:1px solid var(--line); border-radius:999px;
  transition:border-color .12s var(--ease); }
.dr-search input::placeholder { color:var(--ink-4); }
.dr-search input:hover { border-color:var(--accent-line); }
.dr-search input:focus { outline:none; border-color:var(--accent-line); box-shadow:0 0 0 3px var(--accent-soft); }
.dr-list { display:flex; flex-direction:column; gap:8px; }
.dr-row { display:flex; align-items:center; gap:13px; padding:12px 14px;
  background:var(--paper-1); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--shadow-sm); cursor:pointer;
  transition:border-color .12s var(--ease), box-shadow .12s var(--ease); }
.dr-row:hover { border-color:var(--accent-line); box-shadow:0 2px 10px oklch(20% 0.02 250 / 0.07); }
.dr-row:focus-visible { outline:2px solid var(--accent-line); outline-offset:2px; }
.dr-ficon { flex-shrink:0; width:34px; height:34px; display:flex; align-items:center; justify-content:center; color:var(--ink-2); }
.dr-ficon svg { width:20px; height:20px; display:block; }
.dr-name { flex:1; min-width:0; font-size:14px; color:var(--ink-1);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dr-searchable { flex-shrink:0; display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-3); }
.dr-search-dot { width:7px; height:7px; border-radius:50%; background:var(--good);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--good) 16%, transparent); }
.dr-notext { flex-shrink:0; font-size:12px; color:var(--ink-4); }
.dr-meta { flex-shrink:0; display:inline-flex; gap:14px; font-size:12.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.dr-chip { flex-shrink:0; font-size:11px; font-weight:600; padding:3px 10px; border-radius:999px;
  background:var(--paper-2); color:var(--ink-3); }
.dr-kebab-wrap { position:relative; flex-shrink:0; }
.dr-kebab { width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  background:none; border:none; border-radius:8px; color:var(--ink-3); cursor:pointer;
  transition:background .12s var(--ease), color .12s var(--ease); }
.dr-kebab svg { width:17px; height:17px; display:block; }
.dr-kebab:hover, .dr-kebab[aria-expanded="true"] { background:var(--paper-2); color:var(--ink-1); }
.dr-kebab:focus-visible { outline:2px solid var(--accent-line); outline-offset:2px; }
.dr-menu { position:absolute; right:0; top:calc(100% + 4px); z-index:30; min-width:152px;
  padding:5px; background:var(--paper-1); border:1px solid var(--line);
  border-radius:var(--r-sm); box-shadow:var(--shadow-md); }
.dr-menu-item { display:block; width:100%; box-sizing:border-box; padding:8px 11px;
  background:none; border:none; border-radius:8px;
  font:inherit; font-size:13px; color:var(--ink-1); text-align:left; cursor:pointer; }
.dr-menu-item:hover { background:var(--paper-2); }
.dr-menu-item.danger { color:var(--bad); }
.dr-menu-item.danger:hover { background:color-mix(in srgb, var(--bad) 8%, transparent); }
.dr-empty { padding:48px 22px; text-align:center; color:var(--ink-3); font-size:13.5px; line-height:1.6;
  background:var(--paper-2); border-radius:var(--r-md); }
.dr-empty svg { width:26px; height:26px; display:block; margin:0 auto 12px; color:var(--ink-4); }
.dr-empty strong { display:block; font-weight:600; color:var(--ink-2); margin-bottom:3px; }
.dr-foot { margin-top:16px; text-align:center; font-size:12px; color:var(--ink-4); }
.dr-viewer { width:min(900px,92vw); height:min(80vh,860px); max-height:90vh;
  padding:0; display:flex; flex-direction:column; overflow:hidden; }
.dr-viewer-hd { flex-shrink:0; display:flex; align-items:center; gap:14px;
  padding:15px 20px; border-bottom:1px solid var(--line); }
.dr-viewer-title { flex:1; min-width:0; font-size:14px; font-weight:600; color:var(--ink-0);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dr-viewer-dl { flex-shrink:0; font-size:12.5px; color:var(--accent); text-decoration:none; }
.dr-viewer-dl:hover { text-decoration:underline; }
.dr-viewer-x { flex-shrink:0; width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  background:none; border:none; border-radius:8px; color:var(--ink-3); font-size:16px; line-height:1; cursor:pointer; }
.dr-viewer-x:hover { background:var(--paper-2); color:var(--ink-1); }
.dr-viewer-body { flex:1; min-height:0; overflow:auto; background:var(--paper-2); }
.dr-viewer-frame { display:block; width:100%; height:100%; border:0; background:var(--paper-2); object-fit:contain; }
.dr-viewer-text { box-sizing:border-box; max-width:76ch; margin:0 auto; padding:26px 30px;
  font-family:'Geist Mono', ui-monospace, monospace; font-size:13px; line-height:1.75;
  color:var(--ink-1); white-space:pre-wrap; word-break:break-word; }
/* Folder management round 2 (designed by Fable): the rail delete control +
   drag-drop move states. */
.dr-folder { position:relative; }
.dr-folder span { flex:1; }
.dr-folder-del { display:flex; align-items:center; justify-content:center;
  width:22px; height:22px; flex-shrink:0; margin-left:auto;
  padding:0; background:none; border:none; border-radius:var(--r-sm);
  color:var(--ink-3); cursor:pointer; opacity:0; pointer-events:none;
  transition:opacity .12s var(--ease), background .12s var(--ease), color .12s var(--ease); }
.dr-folder-del svg { width:14px; height:14px; display:block; color:currentColor; }
.dr-folder:hover .dr-folder-del,
.dr-folder:focus-visible .dr-folder-del,
.dr-folder:focus-within .dr-folder-del,
.dr-folder-del:focus-visible { opacity:1; pointer-events:auto; }
/* Touch has no hover, so the hover-only delete control was unreachable; show it
   on touch (mirrors the FB-node actions rule at .rbc-node-actions). */
@media (hover:none) { .dr-folder-del { opacity:1; pointer-events:auto; } }
.dr-folder.on .dr-folder-del { color:color-mix(in srgb, var(--accent) 55%, var(--ink-3)); }
.dr-folder-del:hover { background:color-mix(in srgb, var(--bad) 10%, transparent); color:var(--bad); }
.dr-folder-del:focus-visible { outline:2px solid var(--accent-line); outline-offset:2px; }
.dr-row[draggable="true"] { cursor:grab; }
.dr-row[draggable="true"]:active { cursor:grabbing; }
.dr-row.dragging { opacity:.45; border-style:dashed; border-color:var(--accent-line); box-shadow:none; }
.dr-folder.dr-drop { background:var(--accent-soft); border-color:var(--accent-line);
  box-shadow:inset 0 0 0 1px var(--accent-line); color:var(--accent); }
.dr-folder.dr-drop svg { color:var(--accent); }
.dr-folder.on.dr-drop { box-shadow:inset 0 0 0 1px var(--accent-line); }
@media (max-width: 760px) {
  .dr-layout { grid-template-columns:1fr; gap:18px; }
  .dr-rail { position:static; flex-direction:row; overflow-x:auto; padding-bottom:4px; }
  .dr-folder, .dr-newfolder { flex-shrink:0; width:auto; margin-top:0; }
  .dr-hd { flex-wrap:wrap; }
  .dr-search { width:100%; order:3; }
  .dr-meta, .dr-chip { display:none; }
}

/* ── P2 design-polish (2026-06-12, Fable): converged card geometry + new states ── */
/* One padding + row-gap + list-gap + transparent icon container across the three
   list-card surfaces (Random-Brain card / Flow Builder node / Data Room row);
   the Flow Builder icon tile is dropped per the "no colored tile" intent. */
.rb-cards, .dr-list { gap:9px; }
.rb-card, .dr-row { gap:13px; padding:14px 16px; }
.rbc-node { gap:13px; padding:14px 16px 14px 14px; }
.rb-icon, .rbc-icon, .dr-ficon { width:38px; height:38px; background:transparent; border-radius:0; color:var(--ink-2); }
.rb-icon svg, .rbc-icon svg, .dr-ficon svg { width:20px; height:20px; }
/* A display-only (non-interactive) parallel-child node: no click affordance. */
.rbc-node--static { cursor:default; }
.rbc-node--static:hover { border-color:var(--line); box-shadow:var(--shadow-sm); }
/* Data Room drag-drop upload target. */
.dr-dropzone { border-radius:var(--r-md); transition:box-shadow .12s var(--ease), background-color .12s var(--ease), padding .12s var(--ease); }
.dr-dropzone-over { padding:8px; background:color-mix(in srgb, var(--accent-soft) 60%, transparent); box-shadow:inset 0 0 0 2px var(--accent-line); }
/* Picker skeleton row (the "Saved" group loads async). */
.rbc-skeleton { display:flex; flex-direction:column; justify-content:center; gap:7px;
  padding:11px 13px; min-height:56px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--paper-1); cursor:default; pointer-events:none; }
.rbc-skeleton-bar { height:10px; border-radius:999px; background:color-mix(in srgb, var(--ink-4) 35%, var(--paper-2)); animation:rbc-skeleton-breathe 1.4s ease-in-out infinite; }
.rbc-skeleton-bar--wide { width:72%; }
.rbc-skeleton-bar--narrow { width:44%; }
@keyframes rbc-skeleton-breathe { 0%, 100% { opacity:1; } 50% { opacity:.45; } }
@media (prefers-reduced-motion: reduce) { .rbc-skeleton-bar { animation:none; } }

/* ── P1 design-polish (2026-06-12, Fable): teal --affirm token, contrast, kebab, DR states ── */
:root {
  --affirm: oklch(50% 0.080 190);
  --affirm-soft: oklch(50% 0.080 190 / 0.12);
  --affirm-line: oklch(50% 0.080 190 / 0.30);
}
/* Branch pill: teal means "yes, this path" (clay stays for triggers/primary). */
.rbc-branch-pill { background:var(--affirm-soft); border:1px solid var(--affirm-line); color:var(--affirm); }
/* Searchable dot: teal with a matching soft ring. */
.dr-search-dot { background:var(--affirm); box-shadow:0 0 0 3px color-mix(in srgb, var(--affirm) 16%, transparent); }
/* Contrast: lift load-bearing faint copy off --ink-4 to --ink-2. */
.rbc-hint { color:var(--ink-2); }
.rbc-branch-empty { color:var(--ink-2); }
.rbc-pick-group-hd { color:var(--ink-2); }
.dr-notext { color:var(--ink-2); }
.dr-foot { color:var(--ink-2); }
/* Canvas: plain fill, no borrowed dot-grid texture. */
.rbc-canvas { background:var(--paper-2); }
/* Kebab in Random-Brain cards + Flow Builder nodes (reuses the Data Room .dr-kebab/.dr-menu). */
.rb-card .dr-kebab-wrap, .rbc-node .dr-kebab-wrap { flex-shrink:0; margin-left:auto; align-self:center; display:flex; align-items:center; }
.rb-card .dr-kebab { opacity:.35; transition:opacity .15s var(--ease); }
.rb-card:hover .dr-kebab, .rb-card:focus-within .dr-kebab, .rb-card .dr-kebab:focus-visible { opacity:1; }
.rbc-node .dr-kebab-wrap { margin-left:6px; }
.rbc-node .dr-kebab { opacity:0; transition:opacity .15s var(--ease); }
.rbc-node:hover .dr-kebab, .rbc-node:focus-within .dr-kebab, .rbc-node .dr-kebab:focus-visible { opacity:1; }
/* Document viewer: a quiet inline loading indicator. */
.dr-loading { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:48px 22px; font-size:12px; color:var(--ink-3); }
.dr-loading::before { content:""; width:22px; height:22px; border-radius:50%; border:1.5px solid var(--accent-line); border-top-color:var(--accent); animation:dr-spin .7s linear infinite; }
@keyframes dr-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dr-loading::before { display:none; } }
/* File list: a distinct error state (NOT the empty state). */
.dr-error { padding:48px 22px; text-align:center; font-size:13px; line-height:1.5; color:var(--ink-2); }
.dr-error strong { display:block; margin-bottom:6px; font-size:14px; font-weight:600; color:var(--ink-0); }
.dr-error .btn { margin-top:16px; padding:7px 16px; font-size:12.5px; color:var(--ink-2); background:transparent; border:1px solid var(--line); border-radius:var(--r-sm); cursor:pointer; transition:background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease); }
.dr-error .btn:hover { color:var(--ink-0); background:var(--paper-2); border-color:color-mix(in srgb, var(--line) 60%, var(--ink-4)); }

/* ── P1 structural: de-nested card main regions + cron disclosure + move list ── */
/* The clickable region inside a card (sibling of the kebab/actions). */
.rb-card-main, .dr-row-main, .rbc-node-main { display:flex; align-items:center; gap:13px; flex:1; min-width:0; cursor:pointer; border-radius:var(--r-sm); }
.rb-card-main:focus-visible, .dr-row-main:focus-visible, .rbc-node-main:focus-visible { outline:2px solid var(--accent-line); outline-offset:3px; }
/* The card containers no longer click as a whole; the main region does. */
.rb-card, .dr-row, .rbc-node { cursor:default; }
/* Data Room header actions (search + Upload), right side of the page-hd. */
.dr-hd-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
/* Cron "Advanced" disclosure: a calm, marker-free summary. */
.rbc-advanced { margin-top:6px; }
.rbc-advanced summary { cursor:pointer; list-style:none; padding:4px 0; font-size:12.5px; color:var(--ink-2); }
.rbc-advanced summary::-webkit-details-marker { display:none; }
.rbc-advanced summary::before { content:"\25B8\00a0"; color:var(--ink-3); }
.rbc-advanced[open] summary::before { content:"\25BE\00a0"; }
/* Move-to-folder list: the current folder is shown disabled. */
.rbc-pick:disabled { opacity:.55; cursor:default; }
.rbc-pick.on { border-color:var(--affirm-line); }

/* ── P3 design-polish (2026-06-12, Fable): token/dedup cleanup ── */
/* One uppercase-eyebrow label token (was four near-identical recipes). Each
   selector keeps only its own font-size + color; the label treatment is shared. */
:root { --eyebrow-tracking: .12em; }
.rb-group-hd, .rbc-trigger-eyebrow, .rbc-pick-group-hd, .rbc-pick-soon, .rbc-panel-eyebrow {
  text-transform:uppercase; font-weight:700; letter-spacing:var(--eyebrow-tracking);
}
/* Document-viewer close: the X line-icon (was a "×" glyph). */
.dr-viewer-x svg { width:16px; height:16px; display:block; }
/* Long condition pills wrap to two lines on mobile instead of truncating behind
   a hover-only tooltip (touch has no hover, so the full text was unreachable). */
@media (max-width: 560px) {
  .rbc-branch-pill { white-space:normal; overflow:hidden; text-overflow:clip;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; }
}

/* ── FB2 step panel (2026-06-12, Fable): the right-side editor panel, channel
   picker, radio cards, inline field errors (spec 2026-06-12-step-panel). ── */
/* The canvas + panel share a grid; the canvas SHIFTS when the panel opens. */
.rbc-wrap { display:block; }
@media (min-width: 901px) {
  .rbc-wrap--open { display:grid; grid-template-columns: minmax(0,1fr) min(380px, 42vw); gap:18px; align-items:start; }
}
@media (min-width: 1100px) {
  .rbc-wrap--open { grid-template-columns: minmax(0,1fr) 380px; }
}
.rbc-panel { background:var(--paper-1); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-md); display:flex; flex-direction:column; overflow:hidden; min-width:0; }
@media (min-width: 901px) {
  .rbc-panel { position:sticky; top:18px; max-height:calc(100vh - 36px); }
}
.rbc-panel-hd { flex-shrink:0; display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line); }
.rbc-panel-heads { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.rbc-panel-eyebrow { font-size:10px; color:var(--ink-3); }
.rbc-panel-title { font-size:16px; font-weight:600; color:var(--ink-0); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rbc-panel-title:focus-visible { outline:none; }
.rbc-panel-x { flex-shrink:0; width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  background:none; border:none; border-radius:8px; color:var(--ink-3); cursor:pointer;
  transition:background .12s var(--ease), color .12s var(--ease); }
.rbc-panel-x svg { width:16px; height:16px; display:block; }
.rbc-panel-x:hover { background:var(--paper-2); color:var(--ink-1); }
.rbc-panel-x:focus-visible { outline:2px solid var(--affirm-line); outline-offset:2px; }
.rbc-panel-body { flex:1; min-height:0; overflow-y:auto; padding:16px 18px; display:flex; flex-direction:column; gap:16px; }
.rbc-panel-body #rbcTrigFields { display:flex; flex-direction:column; gap:16px; }
.rbc-panel-foot { flex-shrink:0; display:flex; justify-content:flex-end; gap:8px; padding:12px 18px; border-top:1px solid var(--line); }
.rbc-field { display:flex; flex-direction:column; gap:6px; }
/* The teal affirmative Save button (clay stays the trigger/brand accent). */
.btn-affirm { background:var(--affirm); color:#fff; border:1px solid var(--affirm); border-radius:var(--r-sm); }
.btn-affirm:hover { background:color-mix(in oklch, var(--affirm) 90%, white); border-color:color-mix(in oklch, var(--affirm) 90%, white); }
.btn-affirm:focus-visible { outline:2px solid var(--affirm-line); outline-offset:2px; }
/* Selected-node ring (one node, or the trigger pill, at a time). */
.rbc-node--selected { border-color:var(--affirm-line); box-shadow:0 0 0 3px var(--affirm-soft), var(--shadow-sm); }
.rbc-trigger--selected { border-color:var(--affirm-line); box-shadow:0 0 0 3px var(--affirm-soft); }
/* Inline field error (replaces toast-only). */
.rbc-field-err { font-size:12.5px; color:var(--warn); margin-top:4px; line-height:1.4; }
/* Status lines (trigger connection state, "being wired up"). */
.rbc-status { font-size:12.5px; line-height:1.5; color:var(--ink-2); margin:0; }
.rbc-status--warn { color:var(--warn); }
.rbc-readonly { font-size:13.5px; color:var(--ink-2); }
/* Radio cards (fetch-document modes, draft modes). */
.rbc-radio-cards { display:flex; gap:8px; flex-wrap:wrap; }
.rbc-radio-card { flex:1 1 auto; min-width:120px; padding:9px 12px; font:inherit; font-size:13px; color:var(--ink-2);
  background:var(--paper-1); border:1px solid var(--line); border-radius:var(--r-sm); cursor:pointer; text-align:center;
  transition:border-color .12s var(--ease), color .12s var(--ease), box-shadow .12s var(--ease); }
.rbc-radio-card:hover { border-color:var(--accent-line); }
.rbc-radio-card.on { border-color:var(--affirm-line); color:var(--ink-0); box-shadow:0 0 0 3px var(--affirm-soft); }
.rbc-radio-card:focus-visible { outline:2px solid var(--affirm-line); outline-offset:2px; }
/* The notify channel picker. */
.rbc-channel-list { display:flex; flex-direction:column; gap:8px; }
.rbc-channel { border:1px solid var(--line); border-radius:var(--r-md); background:var(--paper-1); padding:11px 13px; cursor:pointer;
  transition:border-color .12s var(--ease), box-shadow .12s var(--ease); }
.rbc-channel.on { border-color:var(--affirm-line); box-shadow:0 0 0 3px var(--affirm-soft); }
.rbc-channel:focus-visible { outline:2px solid var(--affirm-line); outline-offset:2px; }
.rbc-channel-main { display:flex; align-items:center; gap:11px; }
.rbc-channel-icon { flex-shrink:0; display:flex; color:var(--ink-2); }
.rbc-channel.on .rbc-channel-icon { color:var(--affirm); }
.rbc-channel-icon svg { width:20px; height:20px; display:block; }
.rbc-channel-name { flex:1; min-width:0; font-size:13.5px; color:var(--ink-1); }
.rbc-channel-status { flex-shrink:0; display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-3); }
.rbc-channel-dot { width:7px; height:7px; border-radius:50%; background:var(--ink-3); flex-shrink:0; }
.rbc-channel-status--ok .rbc-channel-dot { background:var(--affirm); }
.rbc-channel-status--warn .rbc-channel-dot { background:var(--warn); }
.rbc-channel-status--off .rbc-channel-dot { background:var(--ink-4); }
.rbc-channel-sub { margin-top:10px; padding-left:31px; display:flex; flex-direction:column; gap:8px; }
.rbc-channel-notice { font-size:12.5px; color:var(--ink-2); line-height:1.5; margin:0; }
.rbc-channel-notice--warn { color:var(--warn); }
/* Mobile: the panel becomes a bottom sheet with a scrim; body scroll locks. */
.rbc-scrim { display:none; }
@media (max-width: 900px) {
  .rbc-scrim { display:block; position:fixed; inset:0; background:oklch(20% 0.02 250 / 0.35); z-index:55; }
  .rbc-panel { position:fixed; inset:auto 0 0 0; max-height:86vh; border-radius:var(--r-lg) var(--r-lg) 0 0; z-index:60; }
  body.rbc-sheet-open { overflow:hidden; }
}
/* Entry transitions, behind prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  .rbc-panel { animation:rbc-panel-in .16s var(--ease); }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 900px) {
  .rbc-panel { animation:rbc-sheet-in .2s var(--ease); }
}
@keyframes rbc-panel-in { from { opacity:0; transform:translateX(8px); } to { opacity:1; transform:none; } }
@keyframes rbc-sheet-in { from { transform:translateY(100%); } to { transform:none; } }

/* ── In-app notifications (rev 204 F2): the bell (sidebar + mobile topbar) +
   the dropdown feed. Built by Chat 2, matches the FB2 panel token system. ── */
.notif-bell { position:relative; flex-shrink:0; width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  background:none; border:none; border-radius:var(--r-sm); color:var(--ink-2); cursor:pointer;
  transition:background .12s var(--ease), color .12s var(--ease); }
.notif-bell svg { width:19px; height:19px; display:block; }
.notif-bell:hover { background:var(--paper-2); color:var(--ink-0); }
.notif-bell:focus-visible { outline:2px solid var(--accent-line); outline-offset:2px; }
.m-topbar .notif-bell { margin-left:auto; }
/* The desktop bell sits in its own quiet row between the brand block and the nav
   (no longer overlapping the logo), styled like a nav row: glyph + label + count.
   The mobile topbar bell keeps the compact icon treatment above. */
.notif-bell--side { width:auto; height:auto; margin:2px 12px 4px; padding:8px 10px;
  justify-content:flex-start; gap:11px; border-radius:8px; color:var(--ink-2); }
.notif-bell--side svg { width:18px; height:18px; }
.notif-bell-label { font-size:13.5px; color:inherit; white-space:nowrap; }
.notif-badge { position:absolute; top:3px; right:3px; min-width:16px; height:16px; box-sizing:border-box;
  padding:0 4px; display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:700; line-height:1; color:#fff; background:var(--accent);
  border-radius:999px; border:2px solid var(--paper-1); }
.notif-badge[hidden] { display:none; }
/* The sidebar-row count reads as a calm clay pill, matching the nav badges below. */
.notif-bell--side .notif-badge { position:static; top:auto; right:auto; margin-left:auto;
  min-width:0; height:auto; border:none; padding:2px 7px; border-radius:999px;
  font-family:'Geist Mono', monospace; font-size:9.5px; font-weight:600;
  color:var(--accent); background:var(--accent-soft); }
.notif-panel { position:fixed; z-index:90; width:min(372px, 94vw); max-height:min(74vh, 520px);
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--paper-1); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-md); }
.notif-hd { flex-shrink:0; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 14px; border-bottom:1px solid var(--line); }
.notif-hd-title { font-size:14px; font-weight:600; color:var(--ink-0); }
.notif-markall { background:none; border:none; color:var(--accent); font:inherit; font-size:12.5px; cursor:pointer; padding:2px 4px; }
.notif-markall:hover { text-decoration:underline; }
.notif-list { flex:1; min-height:0; overflow-y:auto; padding:4px 6px 6px; }
/* Day / category groups with quiet sticky eyebrow headers (clean scroll). */
.notif-group + .notif-group { margin-top:2px; }
.notif-group-hd { position:sticky; top:0; z-index:1; padding:9px 10px 5px;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:var(--eyebrow-tracking);
  color:var(--ink-3); background:var(--paper-1); }
.notif-group-hd--approval { color:var(--affirm); }
/* Approval holds: actionable, so a calm teal accent like the Decisions cards.
   "Review" navigates to the Decisions page (it does not approve inline). */
.notif-group--approval { margin-bottom:4px; }
.notif-hold { margin:0 4px 6px; padding:11px 12px; display:flex; flex-direction:column; gap:9px;
  background:var(--affirm-soft); border:1px solid var(--affirm-line); border-radius:var(--r-sm); }
.notif-hold-msg { font-size:13px; line-height:1.45; color:var(--ink-0); word-break:break-word; }
.notif-hold-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.notif-hold-time { font-size:11px; color:var(--ink-3); }
.notif-hold-review { flex-shrink:0; padding:5px 13px; border:none; border-radius:999px;
  background:var(--affirm); color:#fff; font:inherit; font-size:12px; font-weight:600; cursor:pointer;
  transition:filter .12s var(--ease); }
.notif-hold-review:hover { filter:brightness(1.06); }
.notif-hold-review:focus-visible { outline:2px solid var(--affirm-line); outline-offset:2px; }
/* A notification row: a category glyph, a provenance + time header line, the message. */
.notif-item { display:flex; align-items:flex-start; gap:11px; padding:10px; border-radius:var(--r-sm); cursor:default; }
.notif-item--unread { cursor:pointer; }
.notif-item--unread:hover { background:var(--paper-2); }
.notif-item--unread:focus-visible { outline:2px solid var(--accent-line); outline-offset:-2px; }
.notif-ico { flex-shrink:0; width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background:var(--paper-2); color:var(--ink-3); }
.notif-ico svg { width:17px; height:17px; display:block; }
.notif-item--unread .notif-ico { background:var(--affirm-soft); color:var(--affirm); }
.notif-body { min-width:0; flex:1; display:flex; flex-direction:column; gap:2px; }
.notif-row-hd { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.notif-cat { font-size:11px; font-weight:600; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.notif-item--unread .notif-cat { color:var(--ink-2); }
.notif-time { flex-shrink:0; font-size:11px; color:var(--ink-4); }
.notif-msg { font-size:13px; line-height:1.45; color:var(--ink-2); word-break:break-word;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.notif-item--unread .notif-msg { color:var(--ink-0); font-weight:500; }
.notif-row-review { align-self:flex-start; margin-top:4px; padding:3px 11px; border:1px solid var(--affirm-line);
  border-radius:999px; background:none; color:var(--affirm); font:inherit; font-size:11.5px; font-weight:600; cursor:pointer; }
.notif-row-review:hover { background:var(--affirm-soft); }
.notif-row-review:focus-visible { outline:2px solid var(--affirm-line); outline-offset:2px; }
/* Real empty state (glyph + line + subline), distinct from the error state. */
.notif-empty { padding:30px 18px; text-align:center; color:var(--ink-3); }
.notif-empty-ico { display:inline-grid; place-items:center; width:40px; height:40px; margin-bottom:10px; color:var(--ink-4); }
.notif-empty-ico svg { width:26px; height:26px; }
.notif-empty-title { font-size:13.5px; font-weight:600; color:var(--ink-1); }
.notif-empty-sub { font-size:12px; line-height:1.5; color:var(--ink-3); margin-top:4px; }
.notif-empty--error .notif-empty-sub { color:var(--ink-2); }
.notif-retry { margin-top:12px; padding:5px 14px; border:1px solid var(--line); border-radius:999px;
  background:none; color:var(--ink-1); font:inherit; font-size:12px; cursor:pointer; }
.notif-retry:hover { background:var(--paper-2); }
/* The "coming soon" phone channel card: visible for the roadmap, not selectable. */
.rbc-channel--soon { opacity:.6; cursor:default; }
.rbc-channel--soon:hover { border-color:var(--line); box-shadow:none; }

/* rb-ux-04: the "Run now" control on a manual flow card (run-from-chat flows). */
.rb-run { display:inline-flex; align-items:center; gap:5px; flex-shrink:0; padding:4px 10px;
  background:none; border:1px solid var(--line); border-radius:999px; color:var(--ink-2);
  font:inherit; font-size:12px; font-weight:500; cursor:pointer;
  transition:border-color .12s var(--ease), color .12s var(--ease), background .12s var(--ease); }
.rb-run svg { width:13px; height:13px; display:block; }
.rb-run:hover { border-color:var(--affirm-line); color:var(--affirm); background:var(--affirm-soft); }
.rb-run:focus-visible { outline:2px solid var(--affirm-line); outline-offset:2px; }

/* rb-ux-01: flow approval-gate holds rendered on the Decisions page (autonomous
   holds routed approve_via='decisions'); reuses .dec-btn / .dec-btn.primary. */
.dec-holds { margin:0 0 22px; display:flex; flex-direction:column; gap:10px; }
.dec-holds-hd { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:var(--eyebrow-tracking); color:var(--affirm); }
.dec-hold { background:var(--paper-1); border:1px solid var(--affirm-line); border-left:3px solid var(--affirm);
  border-radius:var(--r-md); box-shadow:var(--shadow-sm); padding:16px 18px; display:flex; flex-direction:column; gap:12px; }
.dec-hold-msg { font-size:14px; line-height:1.5; color:var(--ink-0); white-space:pre-wrap; word-break:break-word; }
.dec-hold-actions { display:flex; gap:8px; flex-wrap:wrap; }

/* Screen-reader-only utility (the notifications live region). */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }