/* ═══════════════════════════════════════════════════════════════════
   Three60 Cockpit — application theme
   Flat, fast, minimal. Loads after foundation.css and overrides its
   tokens + components. Reference feel: Linear / Stripe Dashboard.
   No glassmorphism, no blur, color-only transitions, hairline borders.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ───────────────────────────────────────────────────────
   One decisive accent (teal→emerald), a cool-gray neutral ramp tuned for
   true hairlines, and a single coherent semantic/tone palette reused by
   every badge, rail and risk state. Token NAMES are stable — components
   downstream re-theme automatically.
   ──────────────────────────────────────────────────────────────────── */
/* the browser's own widgets (dropdown lists, scrollbars, date pickers) follow the cockpit theme; without this
   Chrome on Windows in dark mode first paints an open dropdown list black */
:root {
  color-scheme: light;
  /* — Accent (AA-safe with white text for filled controls) ── */
  --accent: #0f766e;
  --accent-strong: #0b5d56;
  --accent-soft: #99f6e4;
  --accent-bright: #14b8a6;
  --accent-tint: color-mix(in srgb, var(--accent) 8%, transparent);
  --accent-tint-2: color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-contrast: #ffffff;

  /* — Surfaces & ink (cool light theme) ───────────────────── */
  --bg: #f5f7fa;     /* app canvas         */
  --bg-2: #edf0f4;   /* inset / table head */
  --bg-3: #ffffff;   /* card surface       */
  --bg-4: #e4e8ee;   /* deepest inset      */
  --text: #0d1117;
  --text-2: #2d3748;
  --muted: #4a5568;
  --muted-2: #718096;
  --border: #cbd5e0;
  --border-2: #a0aec0;

  /* — Interaction helpers ─────────────────────────────────── */
  --hover: color-mix(in srgb, var(--text) 4%, transparent);
  --hover-strong: color-mix(in srgb, var(--text) 7%, transparent);
  --ring: color-mix(in srgb, var(--accent) 32%, transparent);

  /* — Semantic feedback ───────────────────────────────────── */
  --success: #157f3c;
  --warning: #b45309;
  --danger: #c0392f;
  --info: #1d4ed8;

  /* — Tone palette (badges, rails, sources) ───────────────── */
  --tone-teal: #0f766e;
  --tone-blue: #1d4ed8;
  --tone-green: #157f3c;
  --tone-amber: #b45309;
  --tone-violet: #6d28d9;
  --tone-rose: #be123c;
  --tone-slate: #475569;

  --radius-sm: 6px;
  --radius: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(15, 20, 25, 0.05);
  --shadow-md: 0 2px 8px -2px rgba(15, 20, 25, 0.08), 0 1px 2px rgba(15, 20, 25, 0.04);
  --shadow-lg: 0 12px 32px -8px rgba(15, 20, 25, 0.16), 0 4px 8px -4px rgba(15, 20, 25, 0.06);
  --shadow-pop: 0 18px 44px -12px rgba(15, 20, 25, 0.24), 0 6px 14px -8px rgba(15, 20, 25, 0.12);

  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.12s;
  --dur: 0.18s;
  --dur-slow: 0.28s;
}

[data-theme="dark"] {
  color-scheme: dark;
  --accent: #2dd4bf;
  --accent-strong: #5eead4;
  --accent-soft: #134e4a;
  --accent-bright: #5eead4;
  --accent-tint: color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-tint-2: color-mix(in srgb, var(--accent) 24%, transparent);
  --accent-contrast: #042b26;

  --bg: #0b0d10;
  --bg-2: #14171c;
  --bg-3: #16191f;
  --bg-4: #1d212a;
  --text: #e9ecef;
  --text-2: #d5dae1;
  --muted: #aab3bf;
  --muted-2: #87919f;
  --border: #3a424f;
  --border-2: #596476;

  --hover: color-mix(in srgb, #ffffff 5%, transparent);
  --hover-strong: color-mix(in srgb, #ffffff 9%, transparent);
  --ring: color-mix(in srgb, var(--accent) 40%, transparent);

  --success: #4ade80;
  --warning: #fbbf24;
  --danger: #f87171;
  --info: #60a5fa;

  --tone-teal: #2dd4bf;
  --tone-blue: #60a5fa;
  --tone-green: #4ade80;
  --tone-amber: #fbbf24;
  --tone-violet: #a78bfa;
  --tone-rose: #fb7185;
  --tone-slate: #94a3b8;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 2px 10px -2px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 14px 36px -10px rgba(0, 0, 0, 0.7), 0 4px 10px -4px rgba(0, 0, 0, 0.45);
  --shadow-pop: 0 20px 48px -12px rgba(0, 0, 0, 0.75), 0 8px 18px -10px rgba(0, 0, 0, 0.55);
}

/* ── 2. Base ─────────────────────────────────────────────────────── */
body {
  min-height: 100vh;
  font-size: var(--text-sm);
  line-height: 1.5;
  letter-spacing: 0;
}

.hidden {
  display: none !important;
}

::selection {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}

/* thin, themed scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-2) transparent;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-2);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--muted-2);
  background-clip: padding-box;
}

/* tighten foundation's fluid display scale for an app context */
h1, h2, h3, h4 {
  letter-spacing: -0.01em;
}

/* ── 3. Buttons (override foundation's lift + slow transitions) ──── */
.btn {
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.2;
  border: 1px solid transparent;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease,
    color var(--dur-fast) ease;
}

.btn:active {
  transform: none;
}

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

.btn-primary:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  transform: none;
  box-shadow: none;
}

/* In dark mode the accent is bright cyan — near-black text is more readable */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-primary:hover {
  color: #0d1117;
}

.btn-ghost {
  background: var(--bg-3);
  border-color: var(--border-2);
  color: var(--text-2);
  -webkit-tap-highlight-color: transparent;
}

.btn-ghost:hover {
  background: var(--bg-2);
  border-color: var(--border-2);
  color: var(--text);
}

.btn-ghost:active,
.btn-ghost:focus-visible {
  color: var(--text);
  background: var(--bg-2);
}

/* Dark mode: pin all interaction states to light text so the browser's
   native active-highlight can't bleed in and make text invisible */
[data-theme="dark"] .btn-ghost,
[data-theme="dark"] .btn-ghost:hover,
[data-theme="dark"] .btn-ghost:active,
[data-theme="dark"] .btn-ghost:focus-visible {
  color: var(--text-2);
}
[data-theme="dark"] .btn-ghost:hover,
[data-theme="dark"] .btn-ghost:active {
  color: var(--text);
  background: var(--bg-2);
}

.btn-sm {
  padding: 0.4rem 0.65rem;
  font-size: var(--text-xs);
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ── 4. Top bar ──────────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0.55rem clamp(16px, 3vw, 32px);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-3) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  transition: border-color var(--dur) ease, box-shadow var(--dur) ease;
}

/* subtle elevation once the page scrolls under the bar */
.topbar.is-scrolled {
  border-bottom-color: var(--border-2);
  box-shadow: var(--shadow-sm);
}

/* brand zone */
.topbar-brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}

.brand-mark {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  color: var(--accent-contrast);
  background: linear-gradient(150deg, var(--accent-bright), var(--accent) 55%, var(--accent-strong));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 16%, transparent),
    0 1px 2px color-mix(in srgb, var(--accent) 35%, transparent);
}

.brand-mark svg {
  width: 22px;
  height: 22px;
}

.topbar-title {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.topbar .eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1;
}

.topbar h1 {
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.app-version {
  align-self: center;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--muted-2);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.last-sync-badge {
  align-self: center;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.last-sync-badge--syncing { color: var(--info); border-color: color-mix(in srgb, var(--info) 30%, var(--border)); }
.last-sync-badge--err     { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, var(--border)); }

.topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.topbar-utils {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.process-monitor-btn .nav-count {
  margin-left: 4px;
}

.process-monitor {
  position: fixed;
  top: 72px;
  right: 20px;
  z-index: var(--z-modal, 1000);
  width: min(380px, calc(100vw - 32px));
  max-height: min(520px, calc(100vh - 96px));
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-3);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.process-monitor-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.process-monitor-head strong {
  margin-right: auto;
}

.process-monitor-list {
  display: grid;
  gap: var(--space-2);
  max-height: 340px;
  overflow-y: auto;
  padding-right: 2px;
}

.process-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
}

.process-notification {
  border-left-color: var(--success);
  background: color-mix(in srgb, var(--success) 7%, var(--bg-2));
}

.process-dismiss-btn {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
}

.process-item strong,
.process-item small {
  display: block;
}

.process-item small {
  color: var(--muted);
  margin-top: 2px;
}

.process-item p {
  margin: 4px 0 0;
  color: var(--danger);
  font-size: var(--text-xs);
}

.process-item > span {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
}

.process-done { border-left-color: var(--success, #22c55e); }
.process-error { border-left-color: var(--danger); }

.sidebar-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* whole sidebar collapses behind its header */
.sidebar-collapse > summary.sidebar-head {
  cursor: pointer;
  list-style: none;
  flex-wrap: nowrap;
  justify-content: space-between;
  user-select: none;
}

.sidebar-collapse > summary.sidebar-head::-webkit-details-marker {
  display: none;
}

.sidebar-collapse > summary.sidebar-head::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform var(--dur-fast) ease;
}

.sidebar-collapse[open] > summary.sidebar-head::after {
  transform: rotate(-135deg);
}

.sidebar-collapse[open] > summary.sidebar-head {
  margin-bottom: var(--space-3);
}

.sidebar-collapse > summary.sidebar-head:hover h2 {
  color: var(--accent);
}

.sidebar-toggle-icon {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-3);
  color: var(--muted);
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.sidebar-toggle-icon svg {
  width: 17px;
  height: 17px;
}

.sidebar-collapse > summary.sidebar-head:hover .sidebar-toggle-icon,
.sidebar-collapse[open] .sidebar-toggle-icon {
  color: var(--accent);
  border-color: var(--accent);
}

.sidebar-head-text {
  flex: 1;
  min-width: 0;
}

/* collapsed: only the icon button remains, no panel chrome */
.sidebar:has(.sidebar-collapse:not([open])) {
  padding: 0;
  background: none;
  border: 0;
  width: max-content;
}

.sidebar-collapse:not([open]) > summary.sidebar-head {
  margin: 0;
}

.sidebar-collapse:not([open]) .sidebar-head-text,
.sidebar-collapse:not([open]) > summary.sidebar-head::after {
  display: none;
}

.cockpit:has(.sidebar-collapse:not([open])) {
  grid-template-columns: max-content 1fr;
}

/* segmented mode switch */
.mode-switch {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.mode-switch .btn {
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-weight: 500;
  box-shadow: none;
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease,
    box-shadow var(--dur-fast) ease;
}

.mode-switch .btn:hover {
  background: var(--hover);
  color: var(--text);
}

.mode-switch .btn {
  white-space: nowrap;
  flex: none;
}

/* narrower screens: brand on top, tab strip + utilities on a second row */
@media (max-width: 1500px) {
  .topbar {
    flex-wrap: wrap;
    row-gap: var(--space-2);
  }

  .topbar-actions {
    flex: 1 1 100%;
    min-width: 0;
  }

  .mode-switch {
    flex: 1 1 0;
    min-width: 0;
    flex-wrap: wrap; /* grouped menus are few enough to wrap; scrolling would clip the dropdowns */
  }

  .mode-switch::-webkit-scrollbar {
    display: none;
  }

  .topbar-utils {
    flex: none;
  }
}

.mode-switch .btn.btn-primary {
  background: var(--bg-3);
  color: var(--text);
  border-color: var(--border);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.llm-switch {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
  color: var(--muted);
  font-size: var(--text-xs);
}

.toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-2);
  font-weight: 600;
  cursor: pointer;
}

.toggle input {
  width: 32px;
  height: 18px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.toggle input:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.icon-btn {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  color: var(--text-2);
  background: var(--bg-3);
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease,
    border-color var(--dur-fast) ease;
}

.icon-btn:hover {
  background: var(--bg-2);
  color: var(--text);
}

.icon-btn svg {
  width: 16px;
  height: 16px;
}

.ai-info-btn {
  width: 32px;
  height: 32px;
  color: var(--accent-strong);
  background: var(--accent-tint);
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
}

.ai-info-btn:hover {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

/* theme icon: show one glyph per theme */
[data-theme="light"] .icon-moon,
[data-theme="dark"] .icon-sun {
  display: none;
}

/* ── 5. Shell + login ────────────────────────────────────────────── */
.app-shell {
  max-width: 1680px;
  margin-inline: auto;
  padding: clamp(14px, 2.4vw, 28px);
}

.login-panel {
  min-height: calc(100vh - 120px);
  display: grid;
  place-items: center;
  color: var(--text);
}

.login-shell {
  width: min(860px, 100%);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  background: var(--bg-3);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.login-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: clamp(1.8rem, 3vw, 2.6rem);
  color: #eafaf7;
  background: linear-gradient(150deg, #093f3c, #0f766e 60%, #0d9488);
}

.login-brand-mark {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin-bottom: var(--space-2);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.login-brand-mark svg {
  width: 34px;
  height: 34px;
}

.login-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(234, 250, 247, 0.75);
}

.login-brand h2 {
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.2;
  color: #ffffff;
}

.login-tagline {
  color: rgba(245, 255, 253, 0.9);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.login-points {
  display: grid;
  gap: var(--space-2);
  margin-top: auto;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}

.login-points li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: rgba(245, 255, 253, 0.95);
}

.login-tick {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 11px;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: clamp(1.8rem, 3vw, 2.6rem);
  background: var(--bg-3);
}

.login-form-head {
  margin-bottom: var(--space-3);
}

.login-form-head h2 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text);
}

.login-form-head .text-muted {
  font-size: var(--text-sm);
  margin-top: 2px;
  color: var(--muted);
}

.compact h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: var(--space-4);
}

.login-form .label {
  margin-bottom: 0;
  color: var(--text);
  font-weight: 600;
}

.login-form .field {
  background: var(--bg-3);
  color: var(--text);
  border-color: var(--border-2);
}

.login-form .field:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

.login-form .btn {
  width: 100%;
  justify-content: center;
  margin-top: var(--space-3);
}

.status-line {
  min-height: 22px;
  color: var(--danger);
  font-size: var(--text-sm);
}

@media (max-width: 720px) {
  .login-shell {
    grid-template-columns: 1fr;
  }

  .login-brand {
    display: none;
  }
}

/* ── 6. Cockpit layout ──────────────────────────────────────────── */
.cockpit {
  display: grid;
  grid-template-columns: minmax(260px, 320px) 1fr;
  gap: var(--space-4);
  align-items: start;
}

/* the universal panel — flat, no blur, no shadow, hairline border */
.glass-panel {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: var(--space-6);
}

.compact {
  padding: 1.05rem 1.15rem;
}

.sidebar {
  position: sticky;
  top: 80px;
  display: grid;
  gap: var(--space-4);
  max-height: calc(100vh - 100px);
}

.sidebar h2 {
  font-size: 1rem;
  font-weight: 600;
}

.sync-status {
  color: var(--muted);
  font-size: var(--text-xs);
}

.sync-schedule-hint {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.01em;
}
.sync-schedule-hint:empty { display: none; }

.sync-status-row {
  display: grid;
  grid-template-columns: 1fr 34px;
  gap: var(--space-2);
  align-items: center;
}

.sync-info-btn {
  width: 34px;
  height: 34px;
}

.sync-details {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
  padding: var(--space-3);
}

.sync-detail-list {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
}

.sync-detail-list dt {
  color: var(--muted);
}

.sync-detail-list dd {
  overflow-wrap: anywhere;
}

.sync-error {
  color: var(--danger);
}

.sync-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.sync-actions .btn {
  justify-content: center;
}

/* ── 7. Org search dropdown (a real popover → gets a shadow) ──────── */
.org-search {
  position: relative;
}

/* leading magnifier icon on the org search field */
.org-search .field {
  padding-left: 2.1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398a1ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0.65rem center;
  background-size: 16px 16px;
}

.org-dropdown {
  position: absolute;
  z-index: var(--z-dropdown);
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 320px;
  overflow: auto;
  display: grid;
  gap: 2px;
  padding: var(--space-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  background: var(--bg-3);
  box-shadow: var(--shadow-lg);
}

.client-list {
  overflow: auto;
  display: grid;
  gap: 2px;
}

.client-item {
  text-align: left;
  padding: 0.5rem 0.6rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-2);
  font-size: var(--text-sm);
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}

.client-item:hover {
  background: var(--bg-2);
  color: var(--text);
}

.client-item.active {
  border-color: var(--accent);
  background: var(--accent-tint);
  color: var(--text);
  box-shadow: none;
}

.dropdown-empty {
  padding: var(--space-2);
  font-size: var(--text-sm);
}

/* ── 8. Workspace, empty state ──────────────────────────────────── */
.workspace {
  min-width: 0;
}

.empty-state {
  min-height: 300px;
  display: grid;
  place-content: center;
  text-align: center;
  gap: var(--space-3);
}

.empty-state h2 {
  font-size: 1.25rem;
  font-weight: 600;
}

.customer-view,
.book-view,
.fit-view,
.partner-fit-view,
.approvals-view,
.stats-view {
  display: grid;
  gap: var(--space-4);
}

/* ── 9. Headers + metric stat-strips ────────────────────────────── */
.customer-header {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: center;
  flex-wrap: wrap;
}

.customer-header .eyebrow {
  font-size: 11px;
}

.customer-header h2 {
  font-size: 1.25rem;
  font-weight: 600;
}

/* hairline-separated stat strip */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(88px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.book-metrics {
  grid-template-columns: repeat(6, minmax(112px, 1fr));
  min-width: min(760px, 100%);
  background: color-mix(in srgb, var(--border) 55%, var(--bg-3));
}

/* ── Book statistics panel ────────────────────────────────────── */
.book-stats-panel {
  padding: var(--space-4);
  display: grid;
  gap: var(--space-4);
  background: var(--bg-1);
}

.book-stats-panel.glass-panel {
  background: var(--bg-1);
}

.customer-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.bks-section-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  justify-content: space-between;
  flex-wrap: wrap;
}

.bks-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.bks-card {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bks-card.bks-danger { border-left: 3px solid var(--danger); }
.bks-card.bks-warn   { border-left: 3px solid var(--warning); }
.bks-card.bks-ok     { border-left: 3px solid var(--success, #22c55e); }

.bks-value { font-size: 18px; font-weight: 700; color: var(--text); line-height: 1.1; }
.bks-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.bks-note  { font-size: 11px; color: var(--text-2); margin-top: 2px; }

.bks-charts {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-3);
}

@media (max-width: 700px) { .bks-charts { grid-template-columns: 1fr; } }

.bks-chart-block {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-3);
}
.bks-chart-title { font-size: var(--text-sm); font-weight: 700; color: var(--text); margin: 0; }

.bks-stage-list { display: grid; gap: var(--space-2); }

.bks-stage-row,
.bks-risk-row {
  display: grid;
  grid-template-columns: minmax(120px, 220px) 1fr 32px;
  align-items: center;
  gap: var(--space-3);
}

.bks-risk-row {
  grid-template-columns: minmax(104px, 132px) 1fr 32px;
  padding: 4px 0;
  border-top: 1px solid var(--border);
}

.bks-risk-row:first-child {
  border-top: 0;
  padding-top: 0;
}

/* Compact stacked risk bar (kept for reference, no longer rendered in stats) */
.bks-risk-stacked { display: grid; gap: var(--space-2); }

.bks-risk-bar {
  display: flex;
  height: 12px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-4);
}
.bks-risk-seg { height: 100%; }
.bks-risk-seg--high   { background: var(--danger); }
.bks-risk-seg--medium { background: var(--warning); }
.bks-risk-seg--low    { background: var(--success, #22c55e); }

.bks-risk-legend {
  display: flex;
  align-items: center;
  gap: 4px 10px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--muted);
}
.bks-risk-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.bks-risk-dot--high   { background: var(--danger); }
.bks-risk-dot--medium { background: var(--warning); }
.bks-risk-dot--low    { background: var(--success, #22c55e); }

/* Total-projects KPI card (distinct border) */
.bks-card.bks-total { border-left: 3px solid var(--tone-blue); }

/* Risk KPI card (H/M/L inline display) */
.bks-risk-split-card { justify-content: flex-start; }
.bks-risk-card-footer {
  display: flex;
  align-items: center;
  gap: 4px;
}
.bks-risk-info-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
  padding: 0 2px;
  border-radius: 3px;
}
.bks-risk-info-btn:hover { color: var(--text); background: var(--hover); }
.bks-risk-info {
  margin-top: 4px;
  font-size: 10px;
  color: var(--muted);
  border-top: 1px solid var(--border);
  padding-top: 4px;
  display: grid;
  gap: 2px;
}
.bks-risk-info p { margin: 0; }
.bks-risk-info small { color: var(--muted-2); }
.bks-risk-mini-row {
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.bks-risk-mini {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.1;
  min-width: 22px;
  text-align: center;
}
.bks-risk-mini-sep  { font-size: 13px; color: var(--muted); }
.bks-risk-mini--high   { color: var(--danger); }
.bks-risk-mini--medium { color: var(--warning); }
.bks-risk-mini--low    { color: var(--success, #22c55e); }

/* Group sub-totals strip (Pipeline / Open requests / Blocked) */
.bks-group-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.bks-group-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  border-top: 3px solid var(--accent);
  text-align: center;
}
.bks-group-stat--blocked { border-top-color: var(--text); }
.bks-group-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
.bks-group-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.bks-group-sub {
  font-size: 10px;
  color: var(--muted-2);
}
@media (max-width: 600px) { .bks-group-stats { grid-template-columns: 1fr; } }

/* Right chart column: risk mini card + group bar rows */
.bks-chart-right {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.bks-group-bar-list {
  display: grid;
  gap: var(--space-2);
}

.bks-group-bar-row {
  display: grid;
  grid-template-columns: minmax(90px, 120px) 1fr 28px;
  align-items: center;
  gap: var(--space-2);
}

.bks-group-bar-label {
  font-size: 11px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Section-level collapse for approved deals */
.approval-section-details {
  margin-top: var(--space-3);
}

.approval-section-head--summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  user-select: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  border: 1px solid var(--border);
}
.approval-section-head--summary::-webkit-details-marker { display: none; }
.approval-section-head--summary h3 { margin: 0; flex: 1; font-size: var(--text-sm); }

.approval-section-details[open] .approval-section-head--summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.approval-section-details .approval-section-approved {
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  padding: var(--space-3);
  display: grid;
  gap: var(--space-2);
}

/* Approved deal card: collapsible summary */
.approval-approved-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  user-select: none;
}
.approval-approved-summary::-webkit-details-marker { display: none; }

.approval-approved-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.approval-approved-title strong { font-size: var(--text-sm); }
.approval-approved-title small  { font-size: var(--text-xs); color: var(--muted); }

.approval-approved-body { margin-top: var(--space-3); }

.bks-stage-name {
  font-size: 11px;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bks-stage-bar-wrap {
  height: 6px;
  border-radius: 4px;
  background: var(--bg-4);
  overflow: hidden;
}

.bks-stage-bar {
  height: 100%;
  border-radius: 4px;
  transition: width 300ms var(--ease);
  min-width: 2px;
}

.bks-stage-count { font-size: 11px; font-weight: 600; color: var(--text); text-align: right; }

.stats-summary-grid {
  grid-template-columns: repeat(4, minmax(110px, 1fr));
  min-width: min(540px, 100%);
}

.approval-metrics {
  grid-template-columns: repeat(3, minmax(100px, 1fr));
  min-width: min(360px, 100%);
}

.metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.6rem 0.75rem;
  border: 0;
  border-radius: 0;
  background: var(--bg-3);
}

.metric span {
  display: block;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/* Book header metric color variants — match category colors in the stats chart */
.metric--total    { border-bottom: 3px solid var(--tone-blue); }
.metric--pipeline { border-bottom: 3px solid var(--tone-blue); }
.metric--open-req { border-bottom: 3px solid var(--tone-green); }
.metric--blocked  { border-bottom: 3px solid var(--text); }
.metric--followup { border-bottom: 3px solid var(--warning); }

/* Metric value row: number + info button side by side */
.metric-value-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2px;
}
.metric-value-row > span {
  /* preserve original font sizing from .metric span */
  display: block;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.metric-info-btn {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--muted-2);
  background: transparent;
  border: none;
  box-shadow: none;
}
.metric-info-btn svg { width: 20px; height: 20px; }
.metric-info-btn:hover { color: var(--text); background: transparent; }

.metric small {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ── 10. Tabs → underline (horizontal scroll, no wrap-jank) ──────── */
.tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-bottom: 1px solid var(--border);
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tab {
  flex: none;
  white-space: nowrap;
  padding: 0.55rem 0.8rem;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  margin-bottom: -1px;
  background: transparent;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease,
    background var(--dur-fast) ease;
}

.tab:hover {
  color: var(--text);
  background: var(--hover);
}

.tab:disabled,
.tab[aria-disabled="true"] {
  color: var(--muted-2);
  cursor: not-allowed;
  opacity: 0.55;
}

.tab:disabled:hover,
.tab[aria-disabled="true"]:hover {
  color: var(--muted-2);
  background: transparent;
}

.tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
  background: transparent;
}

.tab-panel {
  display: grid;
  gap: var(--space-4);
}

/* ── 11. Definition lists ───────────────────────────────────────── */
.field-list {
  display: grid;
  grid-template-columns: minmax(120px, 0.4fr) 1fr;
  gap: var(--space-2) var(--space-4);
}

.field-list dt {
  color: var(--muted);
  font-size: var(--text-sm);
}

.field-list dd {
  min-width: 0;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

/* ── 12. Tables ─────────────────────────────────────────────────── */
.table-wrap {
  overflow-x: auto;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}

th,
td {
  padding: 0.55rem 0.8rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  font-size: var(--text-sm);
}

th {
  color: var(--muted);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--bg-2);
}

tbody tr {
  transition: background var(--dur-fast) ease;
}

tbody tr:hover td {
  background: var(--bg-2);
}

.book-detail-row:hover td {
  background: var(--bg-2);
}

td strong {
  font-weight: 600;
}

td small,
.contact-card small,
.action-card small {
  display: block;
  color: var(--muted);
  font-size: var(--text-xs);
}

/* ── 13. Timeline ───────────────────────────────────────────────── */
.timeline {
  display: grid;
  gap: 0.5rem;
}

/* Scrollable recent timeline — cap at ~10 visible items */
#recentTimeline {
  max-height: 520px;
  overflow-y: auto;
  padding-right: 4px;
  scroll-behavior: smooth;
}

/* Tech stack overview panel source label */
.tech-stack-source {
  font-size: 11px;
  margin-bottom: 8px;
}

.timeline-item {
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-3);
}

.timeline-overdue {
  border-left: 4px solid var(--danger);
  background: color-mix(in srgb, var(--danger) 7%, var(--bg-3));
}

.timeline-upcoming {
  border-left: 4px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-3));
}

.timeline-item strong {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
}

.timeline-item small {
  color: var(--muted);
  font-size: var(--text-xs);
}

.timeline-item p {
  margin-top: 0.35rem;
  font-size: var(--text-sm);
  color: var(--text-2);
}

.timeline-item-head {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  justify-content: space-between;
}

.timeline-item-head > div {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.timeline-details {
  display: none;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.timeline-item.expanded .timeline-details {
  display: block;
}

.timeline-details dl {
  display: grid;
  grid-template-columns: minmax(90px, 140px) 1fr;
  gap: var(--space-2) var(--space-3);
  margin: 0;
}

.timeline-details dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.timeline-details dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* ── 14. Warnings ───────────────────────────────────────────────── */
.warning-list {
  display: grid;
  gap: var(--space-2);
  padding-left: var(--space-6);
  font-size: var(--text-sm);
}

.warning-list li small {
  color: var(--muted);
}

/* ── 15. Section heads ──────────────────────────────────────────── */
.section-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: flex-start;
  margin-bottom: var(--space-4);
}

.section-head.tight {
  align-items: center;
  margin-bottom: var(--space-3);
}

.section-head h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0;
}

.section-head .text-muted {
  font-size: var(--text-xs);
}

/* ── 16. Match cards ────────────────────────────────────────────── */
.match-list,
.match-cards {
  display: grid;
  gap: var(--space-3);
}

.partner-fit-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.9fr) minmax(420px, 1.2fr);
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.partner-client-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-2);
  max-height: 420px;
  overflow: auto;
  margin-top: var(--space-3);
  padding: var(--space-1);
}

.partner-client-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2);
  align-items: start;
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
  cursor: pointer;
}

.partner-client-card.active {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  background: var(--accent-tint);
}

.partner-client-card strong,
.partner-client-card small {
  display: block;
}

.partner-client-card small {
  margin-top: 0.2rem;
  color: var(--muted);
}

.match-card {
  display: grid;
  grid-template-columns: 1fr 76px;
  gap: var(--space-4);
  align-items: center;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-3);
}

.match-card strong {
  font-weight: 600;
}

.match-card p {
  color: var(--text-2);
  font-size: var(--text-sm);
  margin-top: 0.25rem;
}

.match-card small {
  display: block;
  color: var(--muted);
  font-size: var(--text-xs);
}

.score-pill {
  min-height: 58px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: var(--accent-tint);
  color: var(--accent-strong);
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.score-pill small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

.score-pill--disqualified {
  opacity: 0.6;
  background: color-mix(in srgb, var(--danger) 8%, var(--bg-2));
  color: var(--danger);
}

/* Disqualified match cards */
.match-card--disqualified {
  opacity: 0.72;
  border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
  background: color-mix(in srgb, var(--danger) 3%, var(--bg-3));
}

.disqualified-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: color-mix(in srgb, var(--danger) 14%, var(--bg-3));
  color: var(--danger);
  margin-right: 4px;
}

/* ── Horizontal score breakdown bars (one row per dimension) ─── */
.score-hbars {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 6px 0 8px;
}
.score-hbar-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.score-hbar-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  width: 70px;
  flex-shrink: 0;
  white-space: nowrap;
}
/* Colour the label to match its dimension */
.score-hbar-label--tech_stack        { color: var(--accent); }
.score-hbar-label--roles             { color: var(--tone-blue); }
.score-hbar-label--seniority         { color: var(--tone-green); }
.score-hbar-label--commercial        { color: var(--tone-teal); }
.score-hbar-label--candidate_history, .score-hbar-label--track_record { color: var(--tone-violet, #9b7cf0); }
.score-hbar-track {
  flex: 1;
  height: 7px;
  background: var(--bg-4);
  border-radius: 4px;
  overflow: hidden;
}
.score-hbar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.35s var(--ease);
}
.score-hbar-fill--tech_stack        { background: var(--accent); }
.score-hbar-fill--roles             { background: var(--tone-blue); }
.score-hbar-fill--seniority         { background: var(--tone-green); }
.score-hbar-fill--commercial        { background: var(--tone-teal); }
.score-hbar-fill--candidate_history, .score-hbar-fill--track_record { background: var(--tone-violet, #9b7cf0); }
.score-hbar-pts {
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  min-width: 40px;
  text-align: right;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Extraction mode badges ───────────────────────────────────── */
.extraction-mode-llm      { color: var(--success); font-weight: 600; }
.extraction-mode-fallback { color: var(--warning); font-weight: 600; }

/* ── Confirmed vs claimed tech terms ─────────────────────────── */
.term-pill--confirmed {
  background: color-mix(in srgb, var(--success) 15%, var(--bg-3));
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 30%, var(--border));
}
.term-pill--claimed {
  background: color-mix(in srgb, var(--warning) 12%, var(--bg-3));
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 25%, var(--border));
}

/* ── Enrichment toggle (Fit + Partner Fit panels) ─────────────── */
.fit-enrichment-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.kpi-button {
  width: 100%;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.kpi-button.active {
  border-color: color-mix(in srgb, var(--accent) 46%, var(--border));
  background: var(--accent-tint);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}

.kpi-button.active .kpi-label,
.kpi-button.active .kpi-value {
  color: var(--accent-strong);
}

.match-hint,
.match-engine {
  font-size: var(--text-xs);
  color: var(--muted);
}

.match-hint {
  flex-basis: 100%;
}

.tab-loading-banner {
  margin: 0 0 var(--space-3);
  padding: 0.55rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  border-radius: var(--radius);
  background: var(--accent-tint);
  color: var(--accent-strong);
  font-size: var(--text-xs);
  font-weight: 700;
}

/* candidate / developer dossier inside a match card */
.candidate-profile {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-3) 0;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
}

.candidate-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.candidate-head strong {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
}

.candidate-head a {
  color: var(--accent-strong);
  text-decoration: none;
}

.candidate-head a:hover {
  text-decoration: underline;
}

/* facts as a tidy definition grid */
.candidate-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.3rem var(--space-3);
  margin: 0;
  font-size: var(--text-xs);
}

.candidate-facts dt {
  color: var(--muted);
  font-weight: 500;
}

.candidate-facts dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

/* free-text candidate fields (interview feedback, limitations, notes) */
.candidate-textfield {
  margin-top: 0.4rem;
}

.candidate-textfield-label {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.15rem;
}

.candidate-textfield p {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--text-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.candidate-text-block {
  padding: .55rem .65rem;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bg-1) 70%, transparent);
}

.candidate-text-block strong {
  display: block;
  margin-bottom: .2rem;
  color: var(--text);
  font-size: .74rem;
}

.candidate-text-block p {
  margin: 0;
  color: var(--text-2);
  font-size: var(--text-xs);
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.candidate-text-block-warning {
  border-color: color-mix(in srgb, var(--warning, #f59e0b) 38%, var(--border));
  background: color-mix(in srgb, var(--warning, #f59e0b) 8%, var(--bg-1));
}

/* tech stack chips */
.candidate-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.chip.chip-skill {
  font-family: inherit;
  padding: 2px 0.5rem;
  border-radius: var(--radius-full);
  background: var(--accent-tint);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.chip.chip-skill:hover {
  background: var(--accent-tint-2);
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
  color: var(--accent-strong);
}

.candidate-contact {
  font-size: var(--text-xs);
  color: var(--muted);
}

.candidate-contact a {
  color: var(--accent-strong);
  text-decoration: none;
}

.candidate-contact a:hover {
  text-decoration: underline;
}

.candidate-notes {
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--text-2);
}

.pricing-panel {
  display: grid;
  gap: var(--space-3);
}

.pricing-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(90px, 1fr));
  gap: var(--space-2);
}

.pricing-rate-card {
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
}

.pricing-rate-card strong {
  color: var(--text);
  font-size: var(--text-sm);
}

.pricing-rate-card p {
  margin: 0.25rem 0 0;
  color: var(--text-2);
  font-size: var(--text-sm);
}

.pricing-detail {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
  overflow: hidden;
}

.pricing-detail summary {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  cursor: pointer;
  padding: 0.65rem 0.8rem;
  color: var(--text);
  font-weight: 700;
}

.pricing-detail summary span {
  color: var(--accent-strong);
  font-variant-numeric: tabular-nums;
}

.pricing-row-list {
  display: grid;
  gap: 1px;
  max-height: 260px;
  overflow: auto;
  border-top: 1px solid var(--border);
  background: var(--border);
}

.pricing-row {
  display: grid;
  gap: 0.1rem;
  padding: 0.6rem 0.75rem;
  background: var(--bg-3);
}

.pricing-row strong,
.pricing-row a {
  color: var(--text);
}

.pricing-row span {
  color: var(--text-2);
  font-size: var(--text-sm);
}

.pricing-row small {
  color: var(--muted);
  font-size: var(--text-xs);
}

/* ── 17. Brief ──────────────────────────────────────────────────── */
.brief-box {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.15rem, 2vw, 1.55rem);
  font: inherit;
  font-size: var(--text-sm);
  line-height: 1.68;
  color: var(--text);
}

.brief-content {
  white-space: normal;
  display: grid;
  gap: var(--space-3);
}

.brief-content h4 {
  margin: var(--space-3) 0 0;
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: 700;
}

.brief-content p {
  margin: 0;
}

.brief-content ul {
  margin: 0;
  padding-left: 1.25rem;
}

.brief-content li {
  margin-bottom: 0.35rem;
}

.brief-table-wrap {
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-3);
}

.brief-table {
  width: 100%;
  border-collapse: collapse;
  white-space: normal;
  font-size: var(--text-sm);
}

.brief-table th,
.brief-table td {
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.brief-table th {
  color: var(--text);
  background: var(--bg-2);
  font-weight: 700;
}

.brief-table td {
  color: var(--text-2);
}

.brief-badge-row {
  margin-bottom: var(--space-2);
}

.brief-stale-notice {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-2));
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--text-sm);
}

/* ── 18. Risk ───────────────────────────────────────────────────── */
.risk-badge {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 0.85rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin-bottom: var(--space-3);
  font-weight: 600;
  font-size: var(--text-sm);
  text-transform: capitalize;
}

.risk-low {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 10%, transparent);
  border-color: color-mix(in srgb, var(--success) 30%, var(--border));
}

.risk-medium {
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 10%, transparent);
  border-color: color-mix(in srgb, var(--warning) 30%, var(--border));
}

.risk-high {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  border-color: color-mix(in srgb, var(--danger) 30%, var(--border));
}

.risk-one-line {
  margin-bottom: var(--space-3);
  font-weight: 600;
  font-size: var(--text-sm);
}

.risk-narrative {
  margin-bottom: var(--space-4);
  white-space: pre-wrap;
}

.risk-dot {
  display: inline-flex;
  align-items: center;
  margin-bottom: var(--space-1);
  padding: 1px 0.5rem;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
}

.risk-dot.risk-high {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  border: 0;
}

.risk-dot.risk-medium {
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 12%, transparent);
  border: 0;
}

.risk-dot.risk-low {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 12%, transparent);
  border: 0;
}

/* ── 19. KPI + field cards ──────────────────────────────────────── */
/* KPI card = a COUNT: big number headline, small label reference below. */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: var(--space-2);
}

.kpi-card {
  display: grid;
  gap: 0.15rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
}

.kpi-value {
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.kpi-label {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  overflow-wrap: anywhere;
}

/* field card = an ATTRIBUTE: small label reference on top, readable value below. */
#orgFields {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.field-card {
  display: grid;
  gap: 0.2rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
}

.field-card-label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.field-card-value {
  color: var(--text);
  font-size: var(--text-sm);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* ── Partner Profile (curated org custom fields, top of Overview tab) ── */
.org-profile {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* named contact people — accent-tinted cards with initials avatar */
.op-people {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-2);
}

.op-person {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-4));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}

.op-avatar {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

.op-person-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.op-person-role {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
}

.op-person-name {
  font-weight: 600;
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

.op-person-email {
  font-size: var(--text-xs);
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* at-a-glance fact + link pills */
.op-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.op-fact {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  font-size: var(--text-xs);
  line-height: 1.4;
}

.op-fact-k {
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 9.5px;
  letter-spacing: 0.04em;
}

.op-fact-v {
  color: var(--text);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.op-fact--accent {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.op-fact--accent .op-fact-v { color: var(--accent); }

.op-fact--good {
  border-color: color-mix(in srgb, var(--success) 45%, transparent);
  background: color-mix(in srgb, var(--success) 10%, transparent);
}

.op-fact--muted { opacity: 0.7; }

.op-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 600;
  text-decoration: none;
}
.op-link:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.op-link svg { flex-shrink: 0; }

/* taxonomy chip groups (industry focus, certifications) */
.op-chip-groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.op-chip-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.op-group-label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.org-field-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.org-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.55rem;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  background: var(--bg-3);
  font-size: var(--text-xs);
  line-height: 1.5;
}

/* free-text notes — borderless, quiet left accent rule (less boxy) */
.op-notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-2) var(--space-3);
}

.op-note {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-left: 0.6rem;
  border-left: 2px solid var(--border-2);
}

.op-note-text {
  margin: 0;
  color: var(--text);
  font-size: var(--text-sm);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ── 20. Contacts + actions ─────────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-2);
}

.action-list {
  display: grid;
  gap: var(--space-2);
}

.contact-card,
.action-card {
  display: grid;
  gap: 0.3rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-3);
}

.contact-card strong,
.action-card strong {
  font-weight: 600;
  font-size: var(--text-sm);
}

.contact-lines,
.action-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.6rem;
  color: var(--muted);
  font-size: var(--text-xs);
}

/* contact card: name + role/type badges */
.contact-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

.contact-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.25rem;
  flex-shrink: 0;
}

.contact-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border: 1px solid transparent;
}

.contact-badge--internal {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

.contact-badge--dev {
  color: var(--muted);
  background: var(--bg-2);
  border-color: var(--border-2);
}

.contact-badge--key {
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 14%, transparent);
  border-color: color-mix(in srgb, var(--warning) 40%, transparent);
}

/* named contact person card gets a quiet accent border */
/* each contact kind carries a distinct left-accent border so internal members,
   developers and named contact people are tellable apart at a glance */
.contact-card--key,
.contact-card--internal,
.contact-card--dev {
  border-left-width: 3px;
  border-left-style: solid;
}

.contact-card--key {
  border-color: color-mix(in srgb, var(--warning) 45%, var(--border));
  border-left-color: var(--warning);
  background: color-mix(in srgb, var(--warning) 7%, var(--bg-3));
}

.contact-card--internal {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
  border-left-color: var(--accent);
}

.contact-card--dev {
  border-left-color: var(--border-2);
}

.contact-dev-disclosure {
  margin-top: var(--space-2);
}

.contact-dev-disclosure > summary {
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--muted);
  padding: 0.35rem 0;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.contact-dev-disclosure > summary::-webkit-details-marker { display: none; }
.contact-dev-disclosure > summary::before {
  content: "▸";
  display: inline-block;
  transition: transform 0.15s ease;
}
.contact-dev-disclosure[open] > summary::before { transform: rotate(90deg); }
.contact-dev-disclosure[open] > summary { margin-bottom: var(--space-2); }

/* priority as a quiet left accent rather than a full coloured border */
.action-card {
  border-left: 3px solid var(--border-2);
}

.priority-high {
  border-left-color: var(--danger);
}

.priority-medium {
  border-left-color: var(--warning);
}

.priority-low {
  border-left-color: var(--success);
}

/* Action card: collapsible <details>/<summary> */
.action-card { gap: 0; }  /* remove grid gap — details handles spacing */
.action-card details { margin: 0; }

.action-card summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0;
  user-select: none;
}
.action-card summary::-webkit-details-marker { display: none; }

.action-summary-title {
  font-weight: 600;
  font-size: var(--text-sm);
  flex: 1 1 0;
  min-width: 0;
}
.action-badges {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.action-priority-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.priority-badge-high   { background: color-mix(in srgb, var(--danger) 15%, var(--bg-3)); color: var(--danger); }
.priority-badge-medium { background: color-mix(in srgb, var(--warning) 15%, var(--bg-3)); color: var(--warning); }
.priority-badge-low    { background: color-mix(in srgb, var(--success) 15%, var(--bg-3)); color: var(--success); }

.action-body {
  margin-top: var(--space-2);
  display: grid;
  gap: 4px;
}
.action-evidence { font-size: var(--text-xs); color: var(--muted); }
.action-reason   { color: var(--muted); font-size: var(--text-xs); }

/* ── 21. Filters ────────────────────────────────────────────────── */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-3);
}

.stats-filters {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr)) auto;
  gap: var(--space-3);
  align-items: end;
}

.stats-search {
  min-width: 220px;
}

.stats-status {
  color: var(--muted);
  font-size: var(--text-sm);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-3);
}

.stats-card {
  min-height: 154px;
  display: grid;
  gap: var(--space-2);
  align-content: start;
  padding: clamp(1rem, 1.6vw, 1.25rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-3);
  box-shadow: var(--shadow-sm);
}

.stats-card-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: flex-start;
  color: var(--text-2);
  font-size: var(--text-sm);
  font-weight: 700;
}

.stats-card strong {
  color: var(--text);
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stats-card small {
  color: var(--accent-strong);
  font-size: var(--text-xs);
  font-weight: 700;
}

.stats-card p {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-xs);
}

/* Compact KPI cards for the per-project email overview — these 7 metrics are
   simple value + label pairs, so the tall default stat-card is oversized. */
#emKpiGrid {
  grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
  gap: var(--space-2);
}
#emKpiGrid .stats-card {
  min-height: 0;
  gap: 0.15rem;
  padding: 0.5rem 0.65rem;
  box-shadow: none;
}
#emKpiGrid .stats-card-head {
  font-size: var(--text-xs);
  font-weight: 600;
}
#emKpiGrid .stats-card strong {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
}
/* the section header already carries an info button — drop the per-card ones */
#emKpiGrid .stats-info-btn { display: none; }

.stats-card-detail {
  margin-top: var(--space-2);
  border-top: 1px solid var(--border);
  padding-top: var(--space-2);
}

.stats-card-detail summary,
.stats-underlying-group summary,
.stats-list-details summary {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: center;
  cursor: pointer;
  list-style: none;
}

.stats-card-detail summary::-webkit-details-marker,
.stats-underlying-group summary::-webkit-details-marker,
.stats-list-details summary::-webkit-details-marker {
  display: none;
}

.stats-card-detail summary span {
  color: var(--accent-strong);
  font-size: var(--text-xs);
  font-weight: 700;
}

.stats-card-detail summary strong,
.stats-underlying-group summary strong {
  color: var(--text);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.stats-card-detail-body {
  margin-top: var(--space-2);
  max-height: 330px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
}

.stats-underlying-list {
  display: grid;
  gap: 1px;
  background: var(--border);
}

.stats-underlying-list.compact {
  margin-top: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.stats-underlying-row {
  display: grid;
  gap: 0.15rem;
  padding: 0.65rem 0.75rem;
  background: var(--bg-3);
}

.stats-underlying-row strong {
  color: var(--text);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

.stats-underlying-row span {
  color: var(--text-2);
  font-size: var(--text-xs);
}

.stats-underlying-row small {
  color: var(--muted);
  font-size: var(--text-xs);
  overflow-wrap: anywhere;
}

.stats-underlying-group {
  background: var(--bg-3);
}

.stats-underlying-group > summary {
  padding: 0.7rem 0.75rem;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
}

.pricing-stats-grid {
  margin-bottom: var(--space-3);
}

.pricing-stats-list {
  display: grid;
  gap: var(--space-2);
  max-height: 420px;
  overflow-y: auto;
  padding-right: 2px;
}

.pricing-stats-client {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
  overflow: hidden;
}

.pricing-stats-client summary {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) repeat(4, minmax(88px, auto));
  gap: var(--space-3);
  align-items: center;
  padding: 0.8rem 0.9rem;
  cursor: pointer;
  list-style: none;
}

.pricing-stats-client summary::-webkit-details-marker {
  display: none;
}

.pricing-stats-client summary > span {
  color: var(--text-2);
  font-size: var(--text-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pricing-stats-client summary strong {
  display: block;
  color: var(--text);
  font-size: var(--text-sm);
}

.pricing-stats-client summary small {
  display: block;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 500;
}

.stats-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.bar-row {
  display: grid;
  grid-template-columns: minmax(90px, 170px) 1fr 42px;
  gap: var(--space-3);
  align-items: center;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--border);
}

.bar-row span,
.bar-row strong {
  color: var(--text-2);
  font-size: var(--text-xs);
}

.bar-row strong {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.bar-row div {
  height: 10px;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--bg-2);
}

.bar-row i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-bright));
}

.stats-list {
  display: grid;
  gap: var(--space-2);
}

.stats-list-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: center;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
}

.stats-list-row strong {
  color: var(--text-2);
  font-size: var(--text-sm);
}

.stats-list-row span {
  color: var(--accent-strong);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.stats-list-details {
  display: block;
}

.stats-list-details summary {
  width: 100%;
}

.supplier-step-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-2);
}

.supplier-step-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
  overflow: hidden;
}

.supplier-step-card summary {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: center;
  cursor: pointer;
  padding: 0.6rem 0.75rem;
}

.supplier-step-card summary strong {
  color: var(--text);
  font-size: var(--text-xs);
}

.supplier-step-card summary span {
  color: var(--accent-strong);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.supplier-step-list {
  display: grid;
  gap: 1px;
  max-height: 220px;
  overflow: auto;
  border-top: 1px solid var(--border);
  background: var(--border);
}

.supplier-step-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.05rem;
  padding: 0.45rem 0.6rem;
  background: var(--bg-3);
}

.supplier-step-row span {
  color: var(--text);
  font-weight: 600;
  font-size: var(--text-xs);
}

.supplier-step-row small,
.supplier-step-row em {
  color: var(--muted);
  font-size: var(--text-xs);
  font-style: normal;
}

.stats-info-btn {
  width: 30px;
  height: 30px;
}

.filter-field {
  display: grid;
  gap: 0.25rem;
  font-size: var(--text-sm);
  min-width: 170px;
}

.filter-field span {
  color: var(--muted);
  font-size: var(--text-xs);
}

.compact-filter {
  margin: var(--space-3) 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.threshold-field .inline-control {
  display: grid;
  grid-template-columns: 18px minmax(64px, 1fr) auto;
  gap: var(--space-2);
  align-items: center;
  color: var(--text-2);
}

.threshold-field input[type="checkbox"] {
  margin: 0;
  accent-color: var(--accent);
}

.threshold-field small {
  color: var(--muted);
}

.checkbox-field input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.book-filter-status {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--muted);
}

/* book toolbar + progressive-disclosure filters */
.book-controls {
  display: grid;
  gap: var(--space-3);
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-3);
}

.toolbar .filter-field {
  min-width: 150px;
}

.toolbar-search {
  flex: 1 1 240px;
  min-width: 200px;
}

.disclosure-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.disclosure {
  flex: 1 1 280px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
  align-self: start;
}

/* Narrow refine panel — 4 filters in a single column */
.disclosure--narrow {
  flex: 0 0 220px;
}
.filter-grid--single-col {
  grid-template-columns: 1fr;
}

/* Phase disclosure — more width so chip grid has room */
.disclosure--phase {
  flex: 1 1 420px;
}

.disclosure > summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.55rem 0.75rem;
  list-style: none;
  cursor: pointer;
  color: var(--text-2);
  font-size: var(--text-sm);
  user-select: none;
}

.disclosure > summary::-webkit-details-marker {
  display: none;
}

.disclosure > summary::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform var(--dur-fast) ease;
}

.disclosure[open] > summary::before {
  transform: rotate(45deg);
}

.disclosure[open] > summary {
  border-bottom: 1px solid var(--border);
}

.disclosure-label {
  font-weight: 600;
  color: var(--text);
}

.disclosure-meta {
  margin-left: auto;
  color: var(--muted);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  padding: var(--space-3) 0.75rem 0.85rem;
}

.filter-field.full-span {
  grid-column: 1 / -1;
}

.disclosure-body {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3) 0.75rem 0.85rem;
}

.disclosure-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.disclosure-actions .text-muted {
  font-size: var(--text-xs);
}

/* collapsible glass-panel section (e.g. Next Best Actions) — minimised by default */
.section-collapse > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  user-select: none;
}
.section-collapse > summary::-webkit-details-marker { display: none; }

.section-collapse-title { display: grid; gap: 0.15rem; min-width: 0; }
.section-collapse-title h3 { margin: 0; }

.section-collapse-caret {
  flex: none;
  width: 9px;
  height: 9px;
  margin-top: 7px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform var(--dur-fast) ease;
}
.section-collapse[open] > summary .section-collapse-caret { transform: rotate(45deg); }
.section-collapse[open] > summary { margin-bottom: var(--space-3); }

.section-collapse-body { display: grid; gap: var(--space-3); }

/* ── 22. Selectable chips (phase / project / stage) ─────────────── */
.phase-actions {
  align-items: center;
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.phase-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-2);
}

.book-phase-section {
  display: grid;
  gap: var(--space-3);
}

.phase-chip {
  min-height: 52px;
  display: grid;
  gap: 2px;
  align-content: center;
  text-align: left;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  background: var(--bg-3);
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.phase-chip:hover {
  background: var(--bg-2);
  border-color: var(--muted-2);
}

.phase-chip.active {
  border-color: var(--accent);
  background: var(--accent-tint);
  box-shadow: none;
}

.stalling-stage-chip {
  border-left-width: 4px;
}

.stalling-stage-chip--client-blue {
  border-color: color-mix(in srgb, var(--tone-blue) 72%, var(--border));
  border-left-color: var(--tone-blue);
}

.stalling-stage-chip--empty {
  background: color-mix(in srgb, var(--bg-3) 86%, var(--bg-2));
  opacity: 0.78;
}

/* Dark mode: cards need more contrast — default border is near-invisible on dark bg */
[data-theme="dark"] .phase-chip            { border-color: var(--muted-2); }
[data-theme="dark"] .phase-chip:hover      { border-color: var(--muted); background: var(--bg-4); }
[data-theme="dark"] .stalling-stage-chip--client-blue { border-color: color-mix(in srgb, var(--tone-blue) 80%, var(--border)); }

.phase-chip strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
  font-weight: 600;
}

.phase-chip small {
  color: var(--muted);
  font-size: var(--text-xs);
}

.project-select-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  max-height: 300px;   /* show ~3 rows; user can scroll for more */
  overflow-y: auto;
  overscroll-behavior: contain;
}

.project-chip {
  align-content: start;
  min-height: 88px;
  text-align: left;
}

.filter-field--wide {
  min-width: min(520px, 100%);
}

.phase-actions--tight {
  margin-bottom: 6px;
}

.fit-stage-chip-grid {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  max-height: 150px;
  overflow-y: auto;
}

.fit-stage-chip {
  min-height: 46px;
}

.project-chip strong,
.project-chip small {
  overflow-wrap: anywhere;
  white-space: normal;
}

.fit-explanation {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
}

.fit-explanation summary {
  cursor: pointer;
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 600;
}

/* ── Fit result context card ──────────────────────────────────── */
.fit-context-card h3 { margin: 0 0 2px; font-size: 1rem; }
.fit-context-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.fit-context-badges {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
}
.fit-missing-section {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
}
.fit-missing-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  white-space: nowrap;
}
.fit-missing-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  background: color-mix(in srgb, var(--warning) 14%, var(--bg-3));
  color: var(--warning);
  border: 1px solid color-mix(in srgb, var(--warning) 30%, var(--border));
  white-space: nowrap;
}
.fit-no-research { }
.fit-no-research-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* ── Section mode switch (per-section LLM/Deterministic) ─────── */
.section-mode-switch {
  display: inline-flex;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
}
.section-mode-switch .btn {
  border-radius: 0;
  border: none;
  font-size: var(--text-sm);
}
.section-mode-switch .btn:not(:last-child) {
  border-right: 1px solid var(--border);
}

.fit-highlight-panel {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-2));
}

.fit-highlight-label {
  display: block;
  color: var(--accent-strong);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.fit-highlight-panel > strong {
  color: var(--accent-strong);
  font-size: var(--text-sm);
}

/* Fit summary — clean stacked rows (no columns) */
.fit-summary-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.fit-summary-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}

.fit-summary-row:last-child { border-bottom: none; }

.fit-summary-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.fit-summary-value {
  display: block;
  font-size: 13px;
  color: var(--text);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.fit-evidence-note {
  font-size: var(--text-xs);
  margin-top: 4px;
}

/* Term pills */
.term-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.term-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-2));
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--text);
  white-space: nowrap;
}

.terms-count {
  font-size: var(--text-xs);
  color: var(--muted);
  font-weight: 400;
}

.fit-highlight-list {
  display: grid;
  grid-template-columns: minmax(110px, 0.28fr) minmax(0, 1fr);
  gap: 0.35rem var(--space-3);
  margin: 0;
}

.fit-highlight-list dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.fit-highlight-list dd {
  margin: 0;
  color: var(--text-2);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

.fit-explanation-grid {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.fit-explanation-meta {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.fit-explanation-meta span {
  padding: 0.2rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-3);
  color: var(--muted);
  font-size: var(--text-xs);
}

.fit-explanation-section {
  display: grid;
  gap: 0.25rem;
  background: var(--bg-2);
  border-left: 3px solid var(--border-2);
  padding: 7px 10px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.fit-explanation-section strong {
  color: var(--text);
  font-size: var(--text-sm);
}

.fit-explanation-section p,
.fit-explanation-section ul {
  margin: 0;
  color: var(--text);
  font-size: var(--text-sm);
}

.fit-explanation-section ul {
  padding-left: 1.2rem;
}

.fit-explanation-section li {
  margin-bottom: 0.25rem;
}

.fit-source-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-3);
}

.fit-research-card details {
  display: grid;
  gap: var(--space-2);
}

.fit-research-card summary {
  cursor: pointer;
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 600;
}

.scrape-text {
  max-height: 240px;
  overflow: auto;
  margin-top: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
  color: var(--text-2);
  font-size: var(--text-sm);
  line-height: 1.65;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 1000);
  display: grid;
  place-items: center;
  padding: clamp(14px, 2vw, 28px);
  background: rgba(15, 17, 21, 0.48);
}

.fit-wizard {
  width: min(760px, 100%);
  max-height: min(860px, calc(100vh - 32px));
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  overflow: hidden;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  background: var(--bg-3);
  color: var(--text);
  box-shadow: var(--shadow-lg);
}

.fit-wizard-head,
.fit-wizard-actions {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: center;
  padding: clamp(1rem, 2vw, 1.35rem);
  border-bottom: 1px solid var(--border);
}

.fit-wizard-actions {
  justify-content: flex-end;
  border-top: 1px solid var(--border);
  border-bottom: 0;
}

.fit-wizard-head h3 {
  font-size: 1.1rem;
  font-weight: 700;
}

.fit-wizard-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border-bottom: 1px solid var(--border);
}

.fit-wizard-steps span {
  padding: 0.65rem 0.85rem;
  background: var(--bg-2);
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 600;
  text-align: center;
}

.fit-wizard-steps span.active {
  background: var(--accent-tint);
  color: var(--accent-strong);
}

.fit-wizard-body {
  overflow: auto;
  padding: clamp(1.15rem, 2vw, 1.6rem);
}

.fit-wizard-status {
  min-height: 1.25rem;
  padding: 0 clamp(1.15rem, 2vw, 1.6rem) var(--space-3);
}

.fit-wizard-step {
  display: grid;
  gap: var(--space-4);
}

.fit-wizard-step h4 {
  font-size: 1rem;
  font-weight: 700;
}

.check-row {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  color: var(--text-2);
  font-size: var(--text-sm);
}

.checkbox-pill {
  align-items: center;
  padding: 0.42rem 0.7rem;
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  background: var(--bg-3);
  cursor: pointer;
  font-weight: 700;
  white-space: nowrap;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.checkbox-pill:hover {
  background: var(--bg-2);
  border-color: var(--accent);
}

.checkbox-pill input {
  accent-color: var(--accent);
  margin: 0;
}

.checkbox-pill:has(input:checked) {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-tint);
}

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-2);
}

.enrichment-method-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
}

.wizard-page-list {
  display: grid;
  gap: var(--space-2);
}

.page-check-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
}

.page-check-card input {
  margin-top: 0.25rem;
  accent-color: var(--accent);
}

.page-check-card span {
  display: grid;
  gap: 0.2rem;
}

.page-check-card strong {
  color: var(--text);
  font-size: var(--text-sm);
}

.page-check-card small,
.page-check-card em {
  color: var(--muted);
  font-size: var(--text-xs);
  font-style: normal;
  overflow-wrap: anywhere;
}

.check-card {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  min-height: 64px;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
  color: var(--text-2);
  font-size: var(--text-sm);
}

.check-card span {
  display: grid;
  gap: 0.2rem;
}

.check-card small {
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.35;
}

.check-card input,
.check-row input {
  margin-top: 0.15rem;
  accent-color: var(--accent);
}

.wizard-review {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
}

.enrichment-summary,
.enrichment-card {
  display: grid;
  gap: var(--space-4);
}

/* Enrichment: summary header */
.enrichment-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(240px, 0.8fr);
  gap: var(--space-3);
}

.enrichment-overview-grid section {
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
}

.enrichment-overview-grid strong {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--text);
}

.enrichment-overview-grid ul {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--text-2);
  font-size: var(--text-sm);
}

.enrichment-source-pages {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* ── Enrichment section layout ─────────────────────────────────────────── */
.enr-layout {
  display: grid;
  gap: var(--space-3);
}

/* tech_stack spans full width */
.enr-section.enr-full {
  grid-column: 1 / -1;
}

/* Other sections flow in a 2-column grid */
.enr-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.enr-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
}

.enr-section-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.enr-section-title {
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text);
}

.enr-section-count {
  font-size: 11px;
  color: var(--muted);
}

/* ── Confidence badges ─────────────────────────────────────────────────── */
.enr-conf-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 20px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.enr-conf-badge--high   { background: color-mix(in srgb, var(--success, #22c55e) 15%, transparent); color: var(--success, #22c55e); }
.enr-conf-badge--medium { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.enr-conf-badge--low    { background: color-mix(in srgb, var(--muted) 15%, transparent); color: var(--muted); }

/* ── Validation score badge (shown on every extracted fact) ─────────────── */
.enr-score {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 20px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  cursor: help;
  border: 1px solid transparent;
}
.enr-score--high   { background: color-mix(in srgb, var(--success, #22c55e) 16%, transparent); color: var(--success, #22c55e); border-color: color-mix(in srgb, var(--success, #22c55e) 30%, transparent); }
.enr-score--medium { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 26%, transparent); }
.enr-score--low    { background: color-mix(in srgb, var(--warning, #f59e0b) 16%, transparent); color: var(--warning, #f59e0b); border-color: color-mix(in srgb, var(--warning, #f59e0b) 30%, transparent); }
.enr-chip .enr-score { margin-left: 4px; }
.enr-row-badges { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }

/* ── "How it works" info button + explainer panel ──────────────────────── */
.enr-head-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.enr-info-btn {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.enr-info-btn:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent) 8%, var(--bg-2)); }
.enr-info-btn[aria-expanded="true"] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }

.enr-explainer {
  margin: 10px 0 4px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-2));
  font-size: 12.5px;
  line-height: 1.5;
}
.enr-explainer-lead { margin: 0 0 10px; color: var(--text); }
.enr-explainer-steps { margin: 0 0 10px; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: var(--muted); }
.enr-explainer-steps li { padding-left: 2px; }
.enr-explainer-steps strong { color: var(--text); }
.enr-explainer-steps code, .enr-explainer-score code {
  font-size: 11.5px;
  padding: 0 4px;
  border-radius: 4px;
  background: var(--bg-3);
  color: var(--text);
}
.enr-explainer-score { margin: 0; padding-top: 10px; border-top: 1px solid var(--border); color: var(--muted); }
.enr-explainer-score .enr-score { margin: 0 2px; }

/* ── Tech stack chip grid ──────────────────────────────────────────────── */
.enr-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.enr-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: default;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: border-color 120ms, background 120ms, box-shadow 120ms;
  user-select: none;
}

.enr-chip small {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 800;
  color: var(--text-2);
}

/* Source link inside overview tech chips */
.enr-chip-src {
  display: inline;
  font-size: 9px;
  margin-left: 3px;
  color: var(--accent);
  text-decoration: none;
  opacity: 0.7;
}

.enr-chip-src:hover { opacity: 1; }

.enr-chip--high   { background: color-mix(in srgb, var(--success, #22c55e) 12%, var(--bg-2)); border-color: color-mix(in srgb, var(--success, #22c55e) 30%, transparent); color: var(--text); }
.enr-chip--medium { background: color-mix(in srgb, var(--accent) 10%, var(--bg-2)); border-color: color-mix(in srgb, var(--accent) 25%, transparent); color: var(--text); }
.enr-chip--low    { background: var(--bg-3); border-color: var(--border); color: var(--muted); }

.enr-chip[data-enr-source-type="job_posting"] {
  border-color: color-mix(in srgb, var(--danger, #ef4444) 34%, var(--border));
  background: color-mix(in srgb, var(--danger, #ef4444) 9%, var(--bg-3));
}

.enr-chip[data-enr-source-type="stated_capability"] {
  border-color: color-mix(in srgb, var(--accent) 36%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-3));
}

/* Clickable chips (have evidence) */
.enr-chip--clickable { cursor: pointer; }
.enr-chip--clickable::after { content: " ▾"; font-size: 9px; opacity: 0.55; margin-left: 3px; }
.enr-chip--clickable:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
}
.enr-chip--active {
  border-color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 15%, var(--bg-2)) !important;
  color: var(--text) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}
.enr-chip--active::after { content: " ▴" !important; opacity: 0.7; }

/* ── Chip evidence panel (shared, shown below the chip grid) ─────────── */
.enr-evidence-panel {
  margin-top: var(--space-2);
  border-radius: var(--radius);
  border: 1px solid var(--accent);
  background: var(--surface);
  overflow: hidden;
}

.enr-evidence-inner {
  padding: var(--space-2) var(--space-3);
  display: grid;
  gap: 6px;
}

.enr-evidence-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.enr-ev-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.enr-ev-cat {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.enr-ev-text {
  margin: 0;
  font-size: 13px;
  color: var(--text);
  line-height: 1.6;
  padding: var(--space-2) var(--space-2);
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-2));
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent);
}

.enr-ev-link {
  margin: 0;
  font-size: var(--text-sm);
}

.enr-cat-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

/* ── Other sections: expandable rows ──────────────────────────────────── */
.enr-expand-list {
  display: grid;
  gap: 2px;
}

.enr-expand-row {
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.enr-expand-row > summary,
.enr-expand-row--static {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  list-style: none;
  cursor: pointer;
  transition: background 100ms;
}
.enr-expand-row > summary::-webkit-details-marker { display: none; }
.enr-expand-row--static { cursor: default; }
.enr-expand-row > summary:hover { background: var(--bg-3); }
.enr-expand-row[open] > summary { background: color-mix(in srgb, var(--accent) 8%, var(--bg-2)); }

.enr-expand-value {
  flex: 1;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.enr-expand-row > summary::before {
  content: "▶";
  font-size: 8px;
  color: var(--muted);
  flex-shrink: 0;
  transition: transform 150ms;
}
.enr-expand-row[open] > summary::before { transform: rotate(90deg); color: var(--accent); }

.enr-expand-detail {
  padding: 6px 10px 8px 10px;
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-2));
  border-top: none;
}

.enr-expand-detail p {
  margin: 0;
  font-size: 13px;
  color: var(--text);
  line-height: 1.6;
  padding: var(--space-1) var(--space-2);
  border-left: 3px solid var(--accent);
}

/* ── Open roles section — distinct card layout ────────────────── */
.enr-roles-list {
  display: grid;
  gap: 8px;
}

.enr-role-card {
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: grid;
  gap: 5px;
}

.enr-role-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.enr-role-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  flex: 1 1 auto;
}

.enr-cat-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: color-mix(in srgb, var(--tone-violet) 10%, var(--bg-3));
  color: var(--tone-violet);
  border: 1px solid color-mix(in srgb, var(--tone-violet) 20%, transparent);
  white-space: nowrap;
}

.enr-role-evidence {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

.enr-role-source-link {
  font-size: 11px;
  color: var(--accent);
  text-decoration: underline;
}

/* Legacy enrichment compat (still used in some views) */
.enrichment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
}
.enrichment-section {
  display: grid;
  gap: 0.35rem;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
}
.enrichment-fact-list { display: grid; gap: var(--space-2); }
.enrichment-fact {
  display: grid; gap: 0.2rem; padding: 0.55rem 0.65rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-3);
}
.enrichment-fact span { color: var(--accent-strong); font-size: 10px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.enrichment-fact p { margin: 0; color: var(--text-2); font-size: var(--text-sm); line-height: 1.45; }

@media (max-width: 860px) {
  .enrichment-overview-grid,
  .enr-cols {
    grid-template-columns: 1fr;
  }

  .pricing-stats-client summary {
    grid-template-columns: 1fr 1fr;
  }
}

.risk-explanation {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-3) 0;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
}

.risk-explanation h4 {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 700;
}

/* ── 23. Source + status badges (quiet, neutral) ────────────────── */
.source-badge {
  display: inline-block;
  margin-bottom: 0.4rem;
  padding: 1px 0.45rem;
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: var(--bg-2);
  color: var(--muted);
  border: 1px solid var(--border);
}

.source-badge a {
  color: inherit;
}

.approval-card {
  display: grid;
  gap: var(--space-3);
}

.approval-section {
  display: grid;
  gap: var(--space-3);
}

.approval-section + .approval-section {
  margin-top: var(--space-4);
}

.approval-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0 var(--space-1);
}

.approval-section-head h3 {
  margin: 0;
  font-size: var(--text-base);
}

.approval-card-approved {
  border-left: 4px solid var(--success);
}

.approval-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.approval-card-actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.approval-card-head strong,
.approval-card-head small {
  display: block;
}

.approval-summary-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--space-2);
  margin: 0;
}

.approval-summary-row div {
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
}

.approval-summary-row dt {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 700;
}

.approval-summary-row dd {
  margin: 0.15rem 0 0;
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: 700;
}

.approval-note {
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
}

.approval-note p {
  margin: 0.35rem 0 0;
  color: var(--text-2);
  font-size: var(--text-sm);
  line-height: 1.55;
}

.approval-approved-rate {
  display: grid;
  grid-template-columns: minmax(140px, auto) max-content auto;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--success) 35%, var(--border));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--success) 8%, var(--bg-3));
}

.approval-approved-rate span,
.approval-approved-rate small {
  color: var(--muted);
  font-size: var(--text-xs);
}

.approval-approved-rate strong {
  color: var(--success);
  font-size: var(--text-base);
}

/* Approval action row — rate input + approve button */
.approval-action-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.approval-rate-input {
  width: 130px;
}

.approval-rate-input:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.approval-rate-input.field-error {
  border-color: var(--danger);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 20%, transparent);
}

.approval-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* Simple modal box (used for approval password and similar small dialogs) */
.modal-box {
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  background: var(--bg-3);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.2rem, 3vw, 1.8rem);
}

.modal-box h3 {
  margin: 0;
}

.modal-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  margin-top: var(--space-1);
}

.text-danger {
  color: var(--danger);
  font-size: var(--text-sm);
}

.text-danger.hidden {
  display: none;
}

.approval-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--space-3);
}

.approval-block {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  background: var(--bg-2);
}

.approval-block > strong {
  display: block;
  margin-bottom: var(--space-2);
}

.approval-block dl {
  display: grid;
  grid-template-columns: minmax(110px, 0.7fr) 1fr;
  gap: 6px var(--space-2);
  margin: 0;
}

.approval-block dt {
  color: var(--text-2);
  font-size: var(--text-xs);
  font-weight: 700;
}

.approval-block dd {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text);
  overflow-wrap: anywhere;
}

.nav-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.2rem;
  height: 1.2rem;
  margin-left: 0.25rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--danger, #ef4444);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.partner-result-filter-panel {
  margin-bottom: var(--space-3);
}

.overview-tech-stack {
  display: grid;
  gap: var(--space-3);
}

.overview-tech-source {
  display: grid;
  gap: var(--space-2);
}

.overview-tech-source-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  justify-content: space-between;
}

.score-pill--compact {
  min-height: 46px;
  font-size: 1rem;
  flex-shrink: 0;
  align-self: flex-start;
  white-space: nowrap;
}

/* Partner/client fit card header — name left, score right */
.fit-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.fit-card-head > div:first-child {
  flex: 1 1 0;
  min-width: 0;
}

.fit-card-head strong {
  display: block;
  font-size: var(--text-base);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.fit-card-head small {
  display: block;
  color: var(--muted);
  font-size: var(--text-xs);
  margin-top: 2px;
}

/* ── Sync log modal ──────────────────────────────────────────────── */
.modal-box--wide { width: min(700px, 100%); }

.modal-box-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.sync-log-body {
  display: grid;
  gap: 8px;
  max-height: 480px;
  overflow-y: auto;
  padding-right: 4px;
}

.sync-log-run {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: var(--bg-2);
  display: grid;
  gap: 4px;
}

.sync-log-run-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.sync-log-status {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sync-log-ok      { background: color-mix(in srgb, var(--success, #22c55e) 12%, var(--bg-2)); color: var(--success, #22c55e); }
.sync-log-running { background: color-mix(in srgb, var(--accent) 12%, var(--bg-2)); color: var(--accent); }
.sync-log-err     { background: color-mix(in srgb, var(--danger) 12%, var(--bg-2)); color: var(--danger); }
.sync-log-skipped { background: color-mix(in srgb, var(--muted) 14%, var(--bg-2)); color: var(--muted); }

/* header Sync log: Pipedrive, email and calendar runs together */
.sync-log-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.sync-log-chip {
  padding: 3px 11px;
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-2);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
}
.sync-log-chip:hover { border-color: var(--accent); color: var(--accent); }
.sync-log-chip:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.sync-log-chip.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.sync-log-source {
  min-width: 68px;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text);
}
.sync-log-mode { font-size: var(--text-xs); color: var(--muted); }

.sync-log-time, .sync-log-dur {
  font-size: var(--text-xs);
  color: var(--muted);
}

.sync-log-msg { font-size: var(--text-xs); color: var(--text-2); margin: 0; }

.sync-log-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.sync-log-stat {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 8px;
  font-size: 11px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text-2);
}

.sync-log-trigger {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.sync-log-trigger--manual    { background: color-mix(in srgb, var(--tone-blue, #1d4ed8) 12%, var(--bg-2)); color: var(--tone-blue, #1d4ed8); }
.sync-log-trigger--scheduled { background: color-mix(in srgb, var(--tone-green, #157f3c) 12%, var(--bg-2)); color: var(--tone-green, #157f3c); }

/* ── Stalling view ──────────────────────────────────────────────── */
.stalling-view { display: grid; gap: var(--space-4); }

.stall-badge {
  display: inline-block;
  margin-top: 3px;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: color-mix(in srgb, var(--danger) 14%, var(--bg-3));
  color: var(--danger);
}

.col-days { text-align: right; white-space: nowrap; width: 88px; }
.days-cell--ok     { color: var(--success); }
.days-cell--notice { color: var(--warning); }
.days-cell--warn   { color: var(--danger); font-weight: 600; }

tr.row-stalled       { background: color-mix(in srgb, var(--danger) 4%, transparent); }
tr.row-stalled:hover { background: color-mix(in srgb, var(--danger) 7%, transparent); }

.col-expand { width: 34px; padding-right: 0; }

/* Stage history list inside stalling deal expand */
.stall-history-section { border-left: 3px solid var(--muted-2); padding-left: 10px; }

.stage-history-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stage-history-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--muted);
}

.stage-history-item--current {
  color: var(--text);
  font-weight: 500;
}

.stage-history-days {
  font-weight: 600;
  min-width: 30px;
}

/* ── Stalling filtered KPI strip ─────────────────────────────── */
.stalling-kpi-strip {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
  align-items: flex-start;
}
.stalling-kpi-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 140px;
}
.stalling-kpi-val {
  font-size: 1.25rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--text);
}
.stalling-kpi-item small {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* ── Toast notifications ────────────────────────────────────────── */
.app-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border-2);
  border-left-width: 4px;
  background: var(--bg-3);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
  max-width: 380px;
  animation: toast-in 180ms ease;
}

.app-toast.hidden { display: none; }
.app-toast--info    { border-left-color: var(--accent); }
.app-toast--running { border-left-color: var(--accent); }
.app-toast--done    { border-left-color: var(--success, #22c55e); }
.app-toast--error   { border-left-color: var(--danger); }

.toast-msg { flex: 1; }

.toast-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 14px;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
}

.toast-close:hover { color: var(--text); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Data analysis page ─────────────────────────────────────────── */
.data-view {
  display: grid;
  gap: var(--space-4);
}

/* Side-by-side layout: table list on left, sample on right */
.data-browser {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-3);
  align-items: start;
}

.data-table-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 600px;
  overflow-y: auto;
  padding-right: 4px;
}

/* Keep old grid class for backwards compat but redirect to list */
.data-table-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.data-table-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  cursor: pointer;
  text-align: left;
  transition: border-color 120ms, background 120ms;
  color: var(--text);
  width: 100%;
}

.data-table-card:hover,
.data-table-card.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-2));
}

.data-table-name {
  font-weight: 600;
  font-size: var(--text-sm);
}

.data-table-count {
  font-size: var(--text-xs);
  color: var(--muted);
  flex-shrink: 0;
}

.data-sample-wrap { display: grid; gap: var(--space-3); min-width: 0; }

.data-sample-scroll {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 560px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.data-sample-table {
  border-collapse: collapse;
  font-size: 12px;
  white-space: nowrap;
  width: max-content;
  min-width: 100%;
}

.data-sample-table th {
  position: sticky;
  top: 0;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-top: none;
  padding: 6px 10px;
  font-weight: 600;
  text-align: left;
  color: var(--text);
  z-index: 1;
}

.data-sample-table td {
  border: 1px solid var(--border);
  padding: 4px 10px;
  color: var(--text-2);
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.data-sample-table tr:nth-child(even) td { background: var(--bg-2); }

/* Download bar above table */
.data-download-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
  flex-wrap: wrap;
  font-size: var(--text-sm);
}

.enr-role-list {
  display: grid;
  gap: var(--space-2);
}

.enr-role-row {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  overflow: hidden;
}

.enr-role-row > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0.55rem 0.7rem;
  cursor: pointer;
  list-style: none;
}

.enr-role-row > summary::-webkit-details-marker {
  display: none;
}

.enr-role-row strong,
.enr-role-row small {
  display: block;
}

/* one coherent, theme-aware tinting recipe drives every source hue */
.source-deal {
  color: var(--tone-teal);
  background: color-mix(in srgb, var(--tone-teal) 10%, transparent);
  border-color: color-mix(in srgb, var(--tone-teal) 28%, transparent);
}

.source-organization,
.source-crm {
  color: var(--tone-blue);
  background: color-mix(in srgb, var(--tone-blue) 10%, transparent);
  border-color: color-mix(in srgb, var(--tone-blue) 28%, transparent);
}

.source-website,
.source-note,
.source-ai {
  color: var(--tone-violet);
  background: color-mix(in srgb, var(--tone-violet) 10%, transparent);
  border-color: color-mix(in srgb, var(--tone-violet) 28%, transparent);
}

.source-mixed {
  color: var(--accent-strong);
  background: var(--accent-tint);
  border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
}

.source-project {
  color: var(--tone-amber);
  background: color-mix(in srgb, var(--tone-amber) 10%, transparent);
  border-color: color-mix(in srgb, var(--tone-amber) 28%, transparent);
}

.source-person {
  color: var(--tone-green);
  background: color-mix(in srgb, var(--tone-green) 10%, transparent);
  border-color: color-mix(in srgb, var(--tone-green) 28%, transparent);
}

/* ── Enrichment evidence chips ───────────────────────────────────────────── */
.enrichment-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
  border: 1px solid;
  cursor: default;
  white-space: nowrap;
}

.enrichment-chip[data-source-type="stated_capability"],
.enrichment-chip[data-source-type="certification"],
.enrichment-chip[data-source-type="partner_badge"],
.enrichment-chip[data-source-type="case_study"] {
  color: var(--accent-strong);
  background: var(--accent-tint);
  border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
}

.enrichment-chip[data-source-type="job_posting"] {
  color: var(--tone-blue);
  background: color-mix(in srgb, var(--tone-blue) 10%, transparent);
  border-color: color-mix(in srgb, var(--tone-blue) 28%, transparent);
}

.enrichment-chip[data-source-type="inferred"] {
  color: var(--text-muted);
  background: var(--surface-1);
  border-color: var(--border);
  opacity: 0.7;
  text-decoration: line-through;
}

.chip-badge {
  font-size: 10px;
  font-weight: 400;
  opacity: 0.75;
  letter-spacing: 0.02em;
}

/* JS-rendering warning in wizard */
.text-warning {
  color: var(--tone-amber);
  font-size: var(--text-sm);
  margin: 4px 0;
}

.source-calendar {
  color: var(--tone-violet, #9b7cf0);
  background: color-mix(in srgb, var(--tone-violet, #9b7cf0) 10%, transparent);
  border-color: color-mix(in srgb, var(--tone-violet, #9b7cf0) 28%, transparent);
}

.source-activity {
  color: var(--tone-rose);
  background: color-mix(in srgb, var(--tone-rose) 10%, transparent);
  border-color: color-mix(in srgb, var(--tone-rose) 28%, transparent);
}

.ai-info-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-modal, 1000) - 1);
  background: color-mix(in srgb, var(--bg) 52%, transparent);
  backdrop-filter: blur(3px);
}

.ai-info-panel {
  position: fixed !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: var(--z-modal, 1000);
  width: min(620px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 32px));
  overflow: auto;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  background: var(--bg-3);
  color: var(--text);
  box-shadow: var(--shadow-lg);
}

.ai-info-panel-head {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
  align-items: flex-start;
  padding: clamp(1.2rem, 2.2vw, 1.6rem);
  border-bottom: 1px solid var(--border);
  background: var(--bg-3);
}

.ai-info-panel-head h3 {
  font-size: 1rem;
  font-weight: 700;
}

.ai-info-body {
  display: grid;
  gap: var(--space-4);
  padding: clamp(1.2rem, 2.2vw, 1.7rem);
}

.ai-info-body p {
  margin: 0;
  color: var(--text-2);
  font-size: var(--text-sm);
  line-height: 1.65;
}

.ai-info-section {
  display: grid;
  gap: 0.5rem;
}

.ai-info-section strong {
  color: var(--text);
  font-size: var(--text-sm);
}

.ai-info-section ul {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--text-2);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.ai-info-section li {
  margin-bottom: 0.2rem;
}

.ai-info-note {
  padding: 0.8rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
  border-radius: var(--radius);
  background: var(--accent-tint);
  color: var(--accent-strong);
  font-size: var(--text-xs);
}

@media (max-width: 560px) {
  .ai-info-panel {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
  }
}

.match-explanation {
  margin-top: var(--space-2);
}

.match-explanation summary {
  cursor: pointer;
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 600;
}

.match-explanation small {
  margin-top: 2px;
}

.match-breakdown {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: .35rem;
  margin: .6rem 0 .75rem;
}

.match-breakdown-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .35rem .5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  color: var(--muted);
  font-size: .75rem;
}

.match-breakdown-row strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.match-breakdown-positive {
  border-color: color-mix(in srgb, var(--success, #16a34a) 32%, var(--border));
}

.match-breakdown-positive strong {
  color: var(--success, #16a34a);
}

.match-breakdown-negative {
  border-color: color-mix(in srgb, var(--danger, #dc2626) 32%, var(--border));
}

.match-breakdown-negative strong {
  color: var(--danger, #dc2626);
}

.chip {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
  background: var(--bg-2);
  border: 1px solid var(--border);
  padding: 2px 0.5rem;
  border-radius: var(--radius-sm);
}

.chip:hover {
  border-color: var(--border-2);
  color: var(--text);
  background: var(--bg-2);
}

/* ── 23b. Book table readability ────────────────────────────────── */
.book-table table {
  min-width: 880px;
}

.book-table th:nth-child(1),
.book-table td:nth-child(1) { width: 15%; }
.book-table th:nth-child(2),
.book-table td:nth-child(2) { width: 24%; }
.book-table th:nth-child(3),
.book-table td:nth-child(3) { width: 10%; }
.book-table th:nth-child(4),
.book-table td:nth-child(4) { width: 12%; }
.book-table th:nth-child(5),
.book-table td:nth-child(5) { width: 11%; }
.book-table th:nth-child(6),
.book-table td:nth-child(6) { width: 12%; }
.book-table th:nth-child(7),
.book-table td:nth-child(7) { width: 16%; }

.cell-request {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.cell-request .row-expand {
  margin-right: 0;
}

.cell-request-body {
  min-width: 0;
}

.cell-request-body strong {
  display: block;
  overflow-wrap: anywhere;
}

.book-row-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.book-commercial-chip,
.book-followup-chip,
.book-nocand-chip,
.book-phase-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  color: var(--text-2);
  font-size: 10px;
  line-height: 1.5;
  white-space: nowrap;
}

.book-commercial-chip strong,
.book-followup-chip strong,
.book-nocand-chip strong {
  color: var(--text);
  font-weight: 700;
}

.book-commercial-chip--target {
  border-color: color-mix(in srgb, var(--tone-blue) 44%, var(--border));
  background: color-mix(in srgb, var(--tone-blue) 10%, var(--bg-3));
}

.book-followup-chip {
  border-color: color-mix(in srgb, var(--warning) 55%, var(--border));
  background: color-mix(in srgb, var(--warning) 12%, var(--bg-3));
  color: var(--warning);
  font-weight: 700;
}

.book-nocand-chip {
  border-color: color-mix(in srgb, var(--tone-violet) 55%, var(--border));
  background: color-mix(in srgb, var(--tone-violet) 12%, var(--bg-3));
  color: var(--tone-violet);
  font-weight: 700;
}

/* Days-in-current-phase chip. Neutral until a project passes the stall threshold,
   then a warning style so stalling projects stand out in the table. */
.book-phase-chip {
  gap: 0;
  font-weight: 600;
}

.book-phase-chip--stalling {
  border-color: color-mix(in srgb, var(--danger) 55%, var(--border));
  background: color-mix(in srgb, var(--danger) 12%, var(--bg-3));
  color: var(--danger);
  font-weight: 700;
}

/* Untracked phase: duration unknown, so we show "tracking since …" in a muted style
   with no stalling emphasis. */
.book-phase-chip--untracked {
  color: var(--muted);
  font-weight: 500;
  font-style: italic;
}

/* Phase-duration note in the project expansion (shown before any phase change is tracked) */
.book-phase-untracked-note {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--muted);
}

/* Contacted-suppliers section in the Book project expansion */
.book-contacted-org-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.book-contacted-org {
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
}
.book-contacted-org--awaiting {
  border-color: color-mix(in srgb, var(--warning) 45%, var(--border));
  background: color-mix(in srgb, var(--warning) 8%, var(--bg-2));
}
.book-contacted-org-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.book-contacted-org small {
  color: var(--muted);
  font-size: 11px;
}
.org-status {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.org-status--awaiting {
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 14%, transparent);
}
.org-status--received {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 14%, transparent);
}

.cell-empty {
  color: var(--muted-2);
}

.cell-cand {
  display: grid;
  gap: 1px;
}

.cell-cand .num {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.cell-cand small {
  color: var(--muted);
  font-size: var(--text-xs);
}

.cell-cand.cand-none .num {
  color: var(--warning);
}

/* Row urgency is shown via the Risk column only — the left accent bar was removed
   as it was visually too heavy (especially for no-candidate / high-risk rows). */

.book-row--closed td {
  background: color-mix(in srgb, var(--bg-2) 72%, var(--bg-3));
  color: var(--muted);
  opacity: 0.72;
}

.book-row--closed a,
.book-row--closed .book-email-btn,
.book-row--closed .book-info-btn,
.book-row--closed .row-expand {
  opacity: 1;
}

.book-row--closed .cell-request-body strong::after {
  content: "Closed";
  display: inline-flex;
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-2);
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  vertical-align: middle;
}

/* ── 24. Candidate detail (book expand) ─────────────────────────── */
.row-expand {
  width: 26px;
  height: 26px;
  margin-right: var(--space-2);
  vertical-align: middle;
}

.row-expand svg {
  width: 13px;
  height: 13px;
  transition: transform var(--dur-fast) ease;
}

.row-expand.open svg {
  transform: rotate(90deg);
}

.book-detail-row td {
  background: var(--bg-2);
  padding: var(--space-4);
  border-bottom: none;
}

/* Stronger separation between project rows. The default 1px var(--border) line was
   too faint to scan; a bold top border on each project row clearly divides one
   project block from the next, whether or not the previous one is expanded. */
.book-row td {
  border-top: 2px solid var(--muted);
  border-bottom: none;
}

/* Candidate row that matched the active Developer/Supplier filter — high-contrast
   tinted background, thick accent bar and outline so it is easy to spot when
   scrolling quickly. */
.candidate-detail-list li.candidate-filter-match {
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-3));
  border: 2px solid var(--text);
  border-radius: var(--radius-sm);
}

.candidate-detail-list li.candidate-filter-match strong,
.candidate-detail-list li.candidate-filter-match .candidate-detail-org {
  color: var(--text);
}

/* "Only matched dev/supplier" note shown when non-matching candidates are hidden. */
.book-match-only-note {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--accent-strong);
  font-weight: 600;
}

.book-detail-panel {
  display: grid;
  gap: var(--space-3);
}

.book-detail-panel h4 {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
}

.candidate-stage-group {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border);
}

.candidate-stage-group:first-child {
  border-top: 0;
  padding-top: 0;
}

.candidate-stage-group h4 {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  margin: 0;
}

.candidate-stage-group h4 small {
  color: var(--muted);
  font-weight: 500;
}

.candidate-detail-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.candidate-detail-list li {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) minmax(160px, 0.8fr) minmax(140px, 0.8fr);
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-3);
}

.candidate-detail-list small {
  color: var(--muted);
}

/* ── 25. Leads ──────────────────────────────────────────────────── */
.candidate-stage-duration {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 2px;
}

.stage-duration-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 22px;
  max-width: 220px;
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-3) 86%, var(--accent) 14%);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
}

.stage-duration-badge span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage-duration-badge strong {
  color: var(--text);
  font-weight: 700;
  white-space: nowrap;
}

.stage-duration-badge--total {
  background: var(--bg-2);
  border-color: var(--border-2);
  color: var(--muted);
  font-weight: 600;
}

.stage-duration-badge--current {
  border-color: var(--tone-blue);
  background: color-mix(in srgb, var(--tone-blue) 14%, var(--bg-3));
  color: var(--text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone-blue) 42%, transparent);
}

.stage-duration-badge--current strong {
  color: var(--tone-blue);
}

.lead-list {
  display: grid;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
}

.lead-list li {
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-3);
  font-size: var(--text-sm);
}

.lead-list li small {
  color: var(--muted);
  margin-left: var(--space-2);
}

.lead-linked {
  border-color: var(--accent);
  background: var(--accent-tint);
  box-shadow: none;
}

.lead-linked .dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--accent);
}

/* ── 26. Misc layout ────────────────────────────────────────────── */
.grid-auto {
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.field {
  padding: 0.45rem 0.6rem;
  font-size: var(--text-sm);
  border-color: var(--border-2);
}

[data-theme="dark"] .field,
[data-theme="dark"] select.field,
[data-theme="dark"] textarea.field {
  border-color: var(--border-2);
  color: var(--text);
  background: var(--bg-2);
}

[data-theme="dark"] .glass-panel,
[data-theme="dark"] .disclosure,
[data-theme="dark"] .table-wrap,
[data-theme="dark"] .candidate-detail-item,
[data-theme="dark"] .book-detail-panel,
[data-theme="dark"] .book-commercial-chip,
[data-theme="dark"] .candidate-dev-details > summary {
  border-color: var(--border);
}

[data-theme="dark"] .text-muted,
[data-theme="dark"] small,
[data-theme="dark"] .cell-empty,
[data-theme="dark"] .candidate-rating-label {
  color: var(--muted);
}

.label {
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
}

/* ── 26b. Polish: links, table edges, empty states ──────────────── */
/* make in-content hyperlinks discoverable without shouting */
.workspace td a,
.match-card a,
.timeline-item a,
.contact-card a,
.book-detail-panel a,
.candidate-detail-list a {
  color: var(--accent);
  transition: color var(--dur-fast) ease;
}

.workspace td a:hover,
.match-card a:hover,
.timeline-item a:hover,
.contact-card a:hover,
.book-detail-panel a:hover,
.candidate-detail-list a:hover {
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* badges stay neutral even when they wrap a link */
.source-badge a {
  color: inherit;
  text-decoration: none;
}

/* drop the doubled hairline where the last row meets the table border */
tbody tr:last-child td {
  border-bottom: 0;
}

/* centre + mute "Loading…" / "No records" spanning cells (not detail rows) */
tbody tr:not(.book-detail-row):not(.find-dev-detail-row) td[colspan] {
  text-align: center;
  color: var(--muted);
  padding: var(--space-8);
}

/* ── 27. Responsive ─────────────────────────────────────────────── */
@media (max-width: 920px) {
  .cockpit {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    max-height: none;
  }

  .metric-grid {
    grid-template-columns: repeat(3, minmax(96px, 1fr));
  }

  .match-card {
    grid-template-columns: 1fr;
  }

  .candidate-detail-list li {
    grid-template-columns: 1fr;
  }

  .stats-filters,
  .stats-layout,
  .partner-fit-layout {
    grid-template-columns: 1fr;
  }

  .stats-summary-grid {
    min-width: 100%;
  }
}

@media (max-width: 560px) {
  .metric-grid {
    grid-template-columns: repeat(2, minmax(96px, 1fr));
  }

  /* topbar stacks: brand · mode-switch · utilities, each on its own row */
  .topbar {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .topbar-actions {
    width: 100%;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .mode-switch {
    width: 100%;
  }

  .mode-switch .btn {
    flex: 1;
  }

  .topbar-utils {
    width: 100%;
    justify-content: flex-end;
  }

  .app-version {
    display: none;
  }
}

/* ── 28. Motion, skeletons & state polish ───────────────────────────
   Subtle, fast entrances. All durations collapse under the global
   prefers-reduced-motion rule in foundation.css §7.
   ──────────────────────────────────────────────────────────────────── */
@keyframes c360-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

@keyframes c360-pop-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

@keyframes c360-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

.tab-panel {
  animation: c360-fade-in var(--dur) var(--ease) both;
}

.customer-view,
.book-view,
.fit-view,
.partner-fit-view,
.stats-view {
  animation: c360-fade-in var(--dur-slow) var(--ease) both;
}

.org-dropdown:not(.hidden) {
  animation: c360-pop-in var(--dur) var(--ease-spring) both;
}

/* loading skeleton: add `.skeleton` to any block while data loads */
.skeleton {
  color: transparent !important;
  background: linear-gradient(
    90deg,
    var(--bg-2) 25%,
    var(--bg-4) 37%,
    var(--bg-2) 63%
  );
  background-size: 400% 100%;
  border-radius: var(--radius-sm);
  animation: c360-shimmer 1.4s ease infinite;
  user-select: none;
  pointer-events: none;
}

.skeleton * {
  visibility: hidden;
}

/* ============================================================
   §29 — Feature additions: book project info, pricing filter,
          client overview table
   ============================================================ */

/* Project info popup: grid of label/value rows inside the aiInfoPanel */
.info-detail-grid {
  display: grid;
  gap: 14px;
  padding: 4px 0;
}

.info-detail-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.info-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tone-blue);
}

.info-value {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}

.supplier-request-panel {
  display: grid;
  gap: 12px;
}

.supplier-request-preview {
  max-height: 58vh;
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  color: var(--text);
}

.supplier-request-preview p {
  margin: 0 0 10px;
  line-height: 1.5;
}

.supplier-request-preview ul {
  margin: 0 0 12px 18px;
  padding: 0;
}

.supplier-request-preview table {
  width: 100%;
  border-collapse: collapse;
  border: 2px solid #000;
  margin: 0 0 12px;
  font-size: var(--text-xs);
}

.supplier-request-preview th,
.supplier-request-preview td {
  border: 2px solid #000;
  padding: 6px 8px;
  vertical-align: top;
  text-align: left;
}

.supplier-request-preview th {
  background: #f2f2f2;
  color: #111;
  font-weight: 700;
}

.supplier-request-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Candidate item — default (pipeline) vs client-side (sent onwards) */
.candidate-detail-item { display: grid; gap: 2px; padding: 6px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-2); }

/* "In client's hands" — from Sent to the Customer onwards.
   Uses --tone-blue: #1d4ed8 in light mode (high contrast on white),
                     #60a5fa in dark mode (bright on dark).
   6px border + left-side background wash for maximum visibility. */
.candidate-client-side {
  border-color: color-mix(in srgb, var(--tone-blue) 40%, var(--border));
  border-left: 6px solid var(--tone-blue);
  background: color-mix(in srgb, var(--tone-blue) 4%, var(--bg-3));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--tone-blue) 20%, transparent),
              0 1px 0 color-mix(in srgb, var(--tone-blue) 10%, transparent);
}

.candidate-detail-list li.candidate-client-side {
  border-color: color-mix(in srgb, var(--tone-blue) 40%, var(--border));
  border-left: 6px solid var(--tone-blue);
  background: color-mix(in srgb, var(--tone-blue) 4%, var(--bg-3));
}

.project-stage-chip {
  display: inline-flex;
  max-width: 180px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  color: var(--text-2);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.candidate-detail-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.candidate-detail-org { font-size: var(--text-sm); color: var(--text-2); }
.candidate-dev-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; margin-top: 4px; }
.candidate-dev-actions .candidate-dev-details { margin-top: 0; }
.candidate-dev-actions .candidate-dev-details[open] { flex-basis: 100%; }
.candidate-client-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  min-height: 22px;
  padding: 1px 7px;
  border: 1.5px solid color-mix(in srgb, var(--accent) 62%, var(--border));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-3));
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.25;
  cursor: pointer;
}
.candidate-client-share-btn:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-3));
}
.candidate-client-share-btn svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}

/* Rating label — always shown */
.candidate-rating-label {
  font-size: 11px;
  color: var(--muted);
  margin-left: 4px;
  flex-shrink: 0;
}

.candidate-rating-value {
  font-weight: 600;
  color: var(--tone-amber);
}

/* Expandable developer (person) details inside a Book candidate item */
.candidate-dev-details { margin-top: 4px; }
.candidate-dev-details > summary {
  width: fit-content;
  max-width: 100%;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
  padding: 1px 6px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-3));
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1.35;
}
.candidate-dev-details > summary::-webkit-details-marker { display: none; }
.candidate-dev-details > summary::before { content: "▶"; font-size: 8px; transition: transform 120ms; }
.candidate-dev-details[open] > summary::before { transform: rotate(90deg); }

/* Lost deal badge + row treatment in the Candidates view */
.deal-lost-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--border));
  color: var(--danger);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

.candidate-main-row.deal-row-lost td { opacity: 0.62; }
.candidate-main-row.deal-row-lost .deal-lost-badge { opacity: 1; }

/* Find Devs */
.find-devs-filters {
  display: grid;
  gap: 0;
  padding: 0;
}

.find-devs-filters-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.find-devs-filters-head strong {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.find-devs-filters .filter-grid {
  align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  padding: var(--space-4) .9rem;
}

.find-devs-filters .filter-field--wide {
  grid-column: span 2;
}

.find-devs-filters .filter-field span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .4rem;
  font-weight: 600;
  color: var(--text-2);
}

.filter-hint {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-2);
}

.find-devs-filter-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: .75rem .9rem;
  border-top: 1px solid var(--border);
  background: var(--bg-2);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.find-devs-hint {
  margin: 0;
  font-size: var(--text-xs);
}

@media (max-width: 720px) {
  .find-devs-filters .filter-field--wide { grid-column: span 1; }
}

/* ── Custom checkbox dropdown (multi-select) ─────────────────────────── */
.ms { position: relative; }

.ms-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  width: 100%;
  min-height: 40px;
  padding: .5rem .65rem;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  background: var(--bg-3);
  color: var(--text);
  font-size: var(--text-sm);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}

.ms-toggle:hover { border-color: var(--accent); }
.ms--open .ms-toggle {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

.ms-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
}
.ms--active .ms-label { color: var(--text); font-weight: 600; }

.ms-caret { color: var(--muted); font-size: .7rem; transition: transform var(--dur-fast) ease; }
.ms--open .ms-caret { transform: rotate(180deg); }

.ms-pop {
  position: absolute;
  z-index: var(--z-dropdown);
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  display: grid;
  gap: .35rem;
  padding: .5rem;
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  background: var(--bg-3);
  box-shadow: var(--shadow-lg);
}

/* The [hidden] attribute must win over the display:grid above */
.ms-pop[hidden] { display: none; }

.ms-search { min-height: 34px; padding: .35rem .55rem; font-size: var(--text-sm); }

/* Cap the option list at 8 rows (34px each), then scroll vertically. */
.ms-list { display: grid; gap: 0; max-height: 272px; overflow-y: auto; }

.ms-opt {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-height: 34px;
  box-sizing: border-box;
  padding: .3rem .5rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--text);
  cursor: pointer;
}
.ms-opt:hover { background: var(--accent-tint); }

.ms-opt input[type=checkbox] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
  flex: 0 0 auto;
}

.ms-opt--all {
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  margin-bottom: .15rem;
  padding-bottom: .45rem;
}

.ms-empty { margin: 0; padding: .4rem .5rem; font-size: var(--text-xs); }

.find-devs-results {
  overflow-x: auto;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* Compact, container-fitting layout — no horizontal scrolling. */
.find-devs-table {
  min-width: 0;
  width: 100%;
  table-layout: fixed;
  border: 0;
}

/* ── Company Search results — card grid (additive) ─────────────────────── */
.company-results { margin-top: .25rem; }
.company-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}

.company-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-2);
  cursor: pointer;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.company-card:hover {
  border-color: var(--accent);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .10);
  transform: translateY(-1px);
}
.company-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.company-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.company-card-name { margin: 0; font-size: 15px; font-weight: 650; line-height: 1.25; }

.company-card-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  color: var(--muted);
  font-size: 12px;
}
.company-card-facts .fact:not(:last-child)::after {
  content: "·";
  margin-left: 6px;
  color: var(--border);
}

.company-card-group { display: flex; flex-direction: column; gap: 5px; }
.group-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.chip-row { display: flex; flex-wrap: wrap; gap: 5px; }
.company-card .chip.chip-skill { font-size: 11px; padding: 2px 8px; }
.chip.chip-more {
  font-size: 11px; padding: 2px 8px; cursor: default;
  background: var(--bg-3); color: var(--muted); border-color: var(--border);
}

.company-card-open {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  opacity: 0;
  transition: opacity var(--dur-fast) ease;
}
.company-card:hover .company-card-open,
.company-card:focus-visible .company-card-open { opacity: 1; }

/* Tier badge */
.company-tier {
  display: inline-block; flex: none; font-size: 10.5px; font-weight: 600; line-height: 1.3;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent;
}
.company-tier.tier--high    { background: rgba(16,185,129,.14); color: #059669; border-color: rgba(16,185,129,.35); }
.company-tier.tier--regular { background: rgba(59,130,246,.14); color: #2563eb; border-color: rgba(59,130,246,.35); }
.company-tier.tier--cost    { background: rgba(245,158,11,.16); color: #b45309; border-color: rgba(245,158,11,.35); }
.company-tier.tier--none    { background: var(--bg-3);          color: var(--muted); border-color: var(--border); }

/* Employees range inputs */
.company-range { display: flex; align-items: center; gap: 6px; }
.company-range .field-sm { width: 100%; min-width: 0; }
.company-range-sep { color: var(--muted); }

.company-empty {
  grid-column: 1 / -1;
  text-align: center; padding: 2.5rem 1rem; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: .75rem;
}

.find-devs-table th,
.find-devs-table td {
  padding: .4rem .55rem;
  font-size: 13px;
}

/* Clip cell content to its fixed column so nothing overflows into the next.
   A solid cell background keeps fractional-width column seams from showing. */
.find-devs-table th,
.find-devs-table .find-dev-main-row > td {
  overflow: hidden;
}

.find-devs-table .find-dev-main-row > td {
  background: var(--bg-3);
  display: table-cell;
  height: 52px;
  line-height: 1.25;
  vertical-align: middle;
}

/* Single-line, ellipsised cell content keeps every column narrow. */
.find-devs-table td strong,
.find-devs-table td small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.find-devs-table .find-dev-main-row > .col-eng,
.find-devs-table .find-dev-main-row > .col-created {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.find-devs-table .find-dev-main-row > .col-eng,
.find-devs-table .find-dev-main-row > .col-rating,
.find-devs-table .find-dev-main-row > .col-created,
.find-devs-table .find-dev-main-row > .col-deals {
  text-align: center;
}

.find-devs-table .col-created {
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}

.find-devs-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-2);
  white-space: nowrap;
}

/* Sortable header affordance (none existed for this table before) */
.find-devs-table th.sortable-th {
  cursor: pointer;
  user-select: none;
  transition: color var(--dur-fast) ease, background var(--dur-fast) ease;
}

.find-devs-table th.sortable-th:hover {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-2));
}

.find-devs-table th.sorted-asc,
.find-devs-table th.sorted-desc {
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-2));
}

.find-devs-table td {
  vertical-align: middle;
}

.find-devs-table td strong {
  color: var(--text);
}

.find-devs-table td small,
.find-dev-main-row td small {
  margin-top: .1rem;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}

/* Daily cost — the key commercial number, emphasised */
.find-devs-table .col-cost strong {
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--accent-strong);
}

/* Rating chip */
.fd-rating-chip {
  display: inline-block;
  max-width: 100%;
  padding: 1px .4rem;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--warning) 12%, var(--bg-3));
  color: var(--warning);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.find-dev-deal-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 .55rem;
  border-radius: var(--radius-full);
  background: var(--accent-tint);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  color: var(--accent-strong);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}

.find-dev-deal-pill.is-empty {
  background: var(--bg-2);
  border-color: var(--border);
  color: var(--muted);
}

.find-dev-main-row:hover td {
  background: color-mix(in srgb, var(--accent) 4%, var(--bg-3));
}

.find-dev-main-row.is-expanded td {
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-3));
}

.find-dev-tech-inline {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem;
  max-width: 100%;
  overflow: hidden;
}

.find-devs-table .col-tech .chip-skill {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.find-dev-more {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 .4rem;
  border-radius: var(--radius-full);
  background: var(--bg-4);
  color: var(--muted);
  font-size: .72rem;
  font-weight: 600;
}

.find-dev-detail-row > td {
  padding: 0;
  text-align: left;
  background: var(--bg-2);
}

/* ── Expanded developer detail — compact, structured layout ──────────── */
.fd-detail {
  box-sizing: border-box;
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-top: 2px solid var(--accent);
  background: var(--bg-2);
}

.fd-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.fd-detail-name {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text);
}

.fd-detail-sub {
  margin: .1rem 0 0;
  font-size: var(--text-xs);
  color: var(--muted);
}
.fd-detail-sub a { color: var(--accent-strong); font-weight: 600; }

.fd-detail-cost {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  padding: .3rem .65rem;
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
  border-radius: var(--radius-sm);
  background: var(--bg-3);
}
.fd-cost-value {
  font-size: var(--text-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent-strong);
  line-height: 1.1;
}
.fd-cost-label { font-size: var(--text-xs); color: var(--muted); }

/* Key facts as badges */
.fd-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.fd-badge {
  display: inline-flex;
  flex-direction: column;
  gap: 0;
  padding: .2rem .5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-3);
  line-height: 1.25;
}
.fd-badge-k {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.fd-badge-v { font-size: var(--text-sm); font-weight: 600; color: var(--text); }
.fd-badge--accent {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  background: var(--accent-tint);
}
.fd-badge--accent .fd-badge-v { color: var(--accent-strong); }
.fd-badge--rating {
  border-color: color-mix(in srgb, var(--warning) 35%, var(--border));
  background: color-mix(in srgb, var(--warning) 10%, var(--bg-3));
}
.fd-badge--rating .fd-badge-v { color: var(--warning); }

/* Note cards */
.fd-notes-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
}
.fd-card {
  display: grid;
  gap: .2rem;
  padding: .5rem .65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-3);
}
.fd-card-title {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-strong);
}
.fd-card-body {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-2);
  white-space: pre-wrap;
}
.fd-card--empty .fd-card-body { color: var(--muted-2); font-style: italic; }
.fd-card--warn {
  border-color: color-mix(in srgb, var(--warning) 35%, var(--border));
  background: color-mix(in srgb, var(--warning) 7%, var(--bg-3));
}
.fd-card--warn .fd-card-title { color: var(--warning); }

/* Sub-blocks */
.fd-block { display: grid; gap: var(--space-2); }
.fd-block-head { display: flex; align-items: center; gap: var(--space-2); }
.fd-block-title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text);
}
.fd-block-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 .4rem;
  border-radius: var(--radius-full);
  background: var(--accent-tint);
  color: var(--accent-strong);
  font-size: var(--text-xs);
  font-weight: 700;
}
.fd-chips { display: flex; flex-wrap: wrap; gap: .3rem; }

.fd-deal-table { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.fd-deal-table table { min-width: 0; border: 0; }
.fd-deal-table th, .fd-deal-table td { padding: .35rem .5rem; font-size: 13px; }
.fd-deal-table th { background: var(--bg-3); }
.fd-deal-cost { font-variant-numeric: tabular-nums; font-weight: 600; }

.fd-status {
  display: inline-flex;
  align-items: center;
  padding: 1px .5rem;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: capitalize;
  background: var(--bg-4, var(--bg-2));
  color: var(--muted);
}
.fd-status--open { background: var(--accent-tint); color: var(--accent-strong); }
.fd-status--won { background: color-mix(in srgb, var(--success) 14%, var(--bg-3)); color: var(--success); }
.fd-status--lost { background: color-mix(in srgb, var(--danger) 12%, var(--bg-3)); color: var(--danger); }

@media (max-width: 860px) {
  .fd-notes-grid { grid-template-columns: 1fr; }
  .fd-detail { padding: var(--space-4); }
}

.match-lost-loading {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: -.25rem 0 .75rem;
  padding: .75rem .9rem;
  border: 1px solid color-mix(in srgb, var(--warning) 40%, var(--border));
  border-left: 4px solid var(--warning);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--warning) 8%, var(--bg-3));
}

.match-lost-loading strong {
  color: var(--text);
  white-space: nowrap;
}

.match-lost-loading span {
  color: var(--muted);
}

.candidate-detail-item--lost {
  opacity: 0.68;
  background: color-mix(in srgb, var(--bg-2) 72%, var(--bg-3));
}

.candidate-detail-item--lost .deal-lost-badge {
  opacity: 1;
}

.book-hidden-lost-note {
  margin: 0 0 var(--space-2);
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 700;
}

.book-candidate-context-details {
  margin-top: 6px;
  border-top: 1px solid var(--border);
  padding-top: 6px;
}

.book-candidate-context-summary {
  width: fit-content;
  cursor: pointer;
  color: var(--text-2);
  font-size: 11px;
  font-weight: 800;
  list-style: none;
}

.book-candidate-context-summary::-webkit-details-marker { display: none; }
.book-candidate-context-summary::before {
  content: "›";
  display: inline-block;
  margin-right: 4px;
  transition: transform 120ms;
}
.book-candidate-context-details[open] .book-candidate-context-summary::before {
  transform: rotate(90deg);
}

/* Subtle blue stripe on the expanded panel when the candidate is in the client's
   hands (stage-dependent). Intentionally understated — just a thin left accent. */
.book-detail-panel.candidate-detail-clientside {
  border-left: 3px solid color-mix(in srgb, var(--tone-blue) 50%, transparent);
  padding-left: 12px;
}

/* Candidates view: lift each inner section onto its own surface so it reads
   clearly against the grey expanded-row background (scoped to #dealRows so the
   Book tab is unaffected). */
#dealRows .book-detail-panel .candidate-stage-group {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}
#dealRows .book-detail-panel .book-notes-section {
  border-left: 3px solid var(--accent);
}
#dealRows .book-detail-panel .stall-history-section {
  border-left: 3px solid var(--muted-2);
}

/* Activities/tasks collapsible toggle in book expand */
.book-activities-details { margin-top: 6px; }

.book-activities-summary {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  padding: 4px 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 4px;
}

.book-activities-summary::-webkit-details-marker { display: none; }
.book-activities-summary::before { content: "▶"; font-size: 10px; transition: transform 120ms; }
.book-activities-details[open] .book-activities-summary::before { transform: rotate(90deg); }

/* Book note badge (📝 shown in project row when waiting/blocked and has notes) */
.book-note-badge {
  font-size: 13px;
  vertical-align: middle;
  cursor: default;
}

.book-task-badge {
  color: var(--tone-blue);
  font-weight: 800;
  margin-left: 3px;
}

/* Book notes/activities in expanded row */
.book-notes-section { border-left: 3px solid var(--accent); padding-left: 10px; }

.book-notes-details {
  display: grid;
  gap: 8px;
}

.book-notes-summary {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  cursor: pointer;
  list-style: none;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
}

.book-notes-summary::-webkit-details-marker { display: none; }
.book-notes-summary::before {
  content: "▶";
  font-size: 10px;
  color: var(--muted);
  transition: transform var(--dur-fast) ease;
}
.book-notes-details[open] .book-notes-summary::before { transform: rotate(90deg); }
.book-notes-summary small { color: var(--muted); font-weight: 500; }

.book-notes-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.book-note-item {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  display: grid;
  gap: 3px;
}

.book-note-item--activity { border-left: 3px solid var(--tone-amber); }

.book-note-meta {
  display: flex;
  align-items: center;
  gap: 6px;
}

.book-note-subject {
  font-size: var(--text-sm);
  color: var(--text);
}

.book-note-body {
  margin: 0;
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Book request row — info button aligned right of project title */
.cell-request {
  position: relative;
}

.book-info-btn {
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity 120ms ease;
}

.book-info-btn:hover {
  opacity: 1;
}

/* Pricing filter row */
.pricing-filter-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px 0 2px;
}

.pricing-filter-row .field-label {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.field-sm {
  width: 90px;
  min-width: 0;
}

/* Client overview table */
.client-overview-table {
  width: 100%;
}

.client-overview-table th.sortable-th {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.client-overview-table th.sortable-th:hover {
  color: var(--accent);
}

.client-overview-table th.sorted-desc::after {
  content: " ↓";
  color: var(--accent);
}

.client-overview-table th.sorted-asc::after {
  content: " ↑";
  color: var(--accent);
}

.client-overview-table td.cell-warn {
  color: var(--danger);
  font-weight: 600;
}

/* Mini progress bar (inline, used in client overview) */
.mini-bar {
  display: inline-block;
  height: 5px;
  min-width: 2px;
  border-radius: 3px;
  background: var(--accent);
  opacity: 0.6;
  vertical-align: middle;
  margin-left: 6px;
  transition: width 200ms ease;
}

/* ─── Book table: Info column ──────────────────────────────────────────── */
th.col-info,
td.col-info {
  width: 76px;
  text-align: center;
  white-space: nowrap;
}
td.col-info .icon-btn + .icon-btn { margin-left: 4px; }

.book-info-btn,
.book-email-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.55;
  transition: opacity 120ms ease, color 120ms ease;
}
.book-info-btn:hover,
.book-email-btn:hover {
  opacity: 1;
  color: var(--accent);
}

/* ─── Client Overview: scrollable table + visualizations ────────────────── */
.client-overview-scroll {
  max-height: 400px;
  overflow-y: auto;
  overflow-x: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

/* Sticky header inside the scrollable client overview */
.client-overview-scroll .client-overview-table thead th {
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 2;
  box-shadow: 0 1px 0 var(--border);
}

/* Client overview visualizations ─────────────────────────────────────── */
.cov-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
@media (max-width: 900px) {
  .cov-charts { grid-template-columns: 1fr; }
}

.cov-chart-panel {
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-3) var(--space-2);
  border: 1px solid var(--border);
}
.cov-chart-panel h4 {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin: 0 0 var(--space-2) 0;
}

/* Horizontal bar chart rows */
.cov-bar-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 6px;
  font-size: 12px;
}
.cov-bar-label {
  width: 110px;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
.cov-bar-track {
  flex: 1;
  height: 10px;
  background: var(--surface);
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.cov-bar-fill {
  height: 100%;
  border-radius: 5px;
  transition: width 280ms ease;
}
.cov-bar-fill.fill-active   { background: var(--accent); }
.cov-bar-fill.fill-stale    { background: var(--danger); opacity: 0.75; }
.cov-bar-fill.fill-activity { background: color-mix(in srgb, var(--accent) 55%, var(--success)); }
.cov-bar-fill.fill-cost     { background: color-mix(in srgb, var(--accent) 40%, var(--warning, #f59e0b)); }
.cov-bar-val {
  width: 38px;
  text-align: right;
  flex-shrink: 0;
  color: var(--muted);
  font-size: 11px;
}

/* ── Pipeline health metric cards ─────────────────────────────────────── */
.cov-health-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.cov-health-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-2) var(--space-1);
  border-radius: var(--radius-sm);
  text-align: center;
  gap: 2px;
}
.cov-health-metric strong {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
}
.cov-health-metric span {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.cov-health-metric small {
  font-size: 11px;
  opacity: 0.7;
}

.cov-health-ok    { background: color-mix(in srgb, var(--success, #22c55e) 10%, transparent); }
.cov-health-ok    strong, .cov-health-ok span { color: var(--success, #22c55e); }
.cov-health-stale { background: color-mix(in srgb, var(--danger) 10%, transparent); }
.cov-health-stale strong, .cov-health-stale span { color: var(--danger); }
.cov-health-none  { background: color-mix(in srgb, var(--muted) 10%, transparent); }
.cov-health-none  strong, .cov-health-none span { color: var(--muted); }

/* Stacked bar below metrics */
.cov-health-bar {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-3);
  margin-bottom: 6px;
}
.cov-health-seg {
  height: 100%;
  transition: width 300ms ease;
  min-width: 2px;
}
.cov-seg-ok    { background: var(--success, #22c55e); opacity: 0.85; }
.cov-seg-stale { background: var(--danger); opacity: 0.8; }
.cov-seg-none  { background: var(--muted); opacity: 0.3; }

.cov-health-caption {
  margin: 0;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
}

/* ── Pricing sort bar ─────────────────────────────────────────────────── */
.pricing-sort-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 4px 0 8px;
}

.pricing-sort-btn {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--muted);
  cursor: pointer;
  transition: background 100ms, color 100ms, border-color 100ms;
  white-space: nowrap;
}
.pricing-sort-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-2));
}
.pricing-sort-btn.active {
  background: color-mix(in srgb, var(--accent) 15%, var(--bg-2));
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 700;
}

/* ── Previous Matches panel ─────────────────────────────────────── */
.prev-matches-panel {
  margin-top: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-2);
  overflow: hidden;
}
.prev-matches-summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--muted);
  list-style: none;
  user-select: none;
}
.prev-matches-summary::-webkit-details-marker { display: none; }
.prev-matches-summary::before {
  content: "›";
  display: inline-block;
  transition: transform 0.2s;
  font-size: 1.1rem;
  color: var(--muted);
}
.prev-matches-panel[open] .prev-matches-summary::before { transform: rotate(90deg); }
.prev-matches-toolbar {
  padding: var(--space-2) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--border);
  background: var(--bg-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
}
#prevMatchesList,
#partnerFitPrevMatchesList { padding: var(--space-2) var(--space-4) var(--space-4); display: grid; gap: var(--space-3); }
.prev-match-row { margin-bottom: var(--space-2); }
.prev-match-entry {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-3);
}
.prev-match-entry-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}
.prev-match-org {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
}
.prev-match-org-badge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 3px 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
  border-radius: var(--radius-sm);
  background: var(--accent-tint);
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  overflow-wrap: anywhere;
}
.prev-match-project-label {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 700;
}

/* ── Scoring transparency panel ("What was used to score this project") ──────── */
.score-transparency { display: grid; gap: var(--space-3); margin-top: var(--space-2); }
.sx-block { display: grid; gap: 4px; }
.sx-head {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.sx-row { display: flex; gap: var(--space-2); align-items: baseline; flex-wrap: wrap; }
.sx-label { flex: 0 0 88px; font-size: 11px; font-weight: 600; color: var(--muted); }
.sx-vals { display: flex; gap: 4px; flex-wrap: wrap; font-size: var(--text-sm); }

/* Extracted chips — colour-coded by kind */
.term-pill--core {
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-2));
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--accent);
}
.term-pill--commodity {
  background: color-mix(in srgb, var(--muted) 12%, var(--bg-2));
  border-color: color-mix(in srgb, var(--muted) 28%, transparent);
  color: var(--muted);
  font-style: italic;
}
.term-pill--role {
  background: color-mix(in srgb, var(--tone-blue) 14%, var(--bg-2));
  border-color: color-mix(in srgb, var(--tone-blue) 32%, transparent);
  color: var(--tone-blue);
}
.term-pill--seniority {
  background: color-mix(in srgb, var(--tone-green) 14%, var(--bg-2));
  border-color: color-mix(in srgb, var(--tone-green) 32%, transparent);
  color: var(--tone-green);
}

/* Weighting table */
.score-weight-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.score-weight-table th {
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 2px 8px 2px 0;
  border-bottom: 1px solid var(--border);
}
.score-weight-table td { padding: 3px 8px 3px 0; vertical-align: top; border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent); }
.score-weight-table .sw-dim { font-weight: 600; white-space: nowrap; }
.score-weight-table .sw-matched { color: var(--muted); }
.score-weight-table .sw-pts { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }

/* Candidate-history score-bar segment colour (new dimension) */
.score-bar-segment--candidate_history .score-bar-fill { background: var(--tone-violet, #9b7cf0); }
.score-bar-key--candidate_history { background: color-mix(in srgb, var(--tone-violet, #9b7cf0) 18%, var(--bg-3)); color: var(--tone-violet, #9b7cf0); }


/* ── Calendar module ─────────────────────────────────────────────────────── */
.cal-scroll-wrap {
  max-height: 400px;
  overflow-y: auto;
  overflow-x: auto;
  padding-right: 4px;
  min-width: 0;       /* allow shrinking inside grid/flex parents */
  max-width: 100%;
}

#calendarView {
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}

#calMoreAnalytics {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

#calMoreAnalytics .section-collapse-body {
  min-width: 0;
  max-width: 100%;
}

#calMoreAnalytics .section-collapse-body > .glass-panel {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

#calKpiGrid {
  grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
  gap: var(--space-2);
}

#calKpiGrid .cal-kpi-card {
  min-height: 0;
  gap: 0.15rem;
  padding: 0.5rem 0.65rem;
  box-shadow: none;
}

#calKpiGrid .cal-kpi-card span {
  color: var(--text-2);
  font-size: var(--text-xs);
  font-weight: 700;
}

#calKpiGrid .cal-kpi-card strong {
  font-size: 1.2rem;
  line-height: 1.15;
}

#calKpiGrid .cal-kpi-card small {
  font-size: 0.68rem;
}

#calendarView .bar-row {
  grid-template-columns: minmax(72px, 140px) minmax(120px, 460px) minmax(36px, auto);
  justify-content: start;
}

#calendarView .bar-row > div {
  width: 100%;
  max-width: 460px;
}

#calendarView .cal-scroll-wrap table,
#calendarView .cal-scroll-wrap .data-table {
  font-size: 0.86rem;
}

#calendarView .cal-org-meetings-detail {
  max-width: 100%;
  overflow-x: auto;
}

#calendarView .cal-org-meetings-detail .data-table {
  min-width: max-content;
  width: max-content;
}
.cal-risk-high    { color: var(--danger);  font-weight: 600; }
.cal-risk-medium  { color: var(--warning); font-weight: 500; }
.cal-risk-low     { color: var(--success); }
.cal-risk-unknown { color: var(--muted);   }
.cal-match-badge  { font-size: .75em; padding: 1px 5px; border-radius: 4px;
                    background: color-mix(in srgb, var(--accent) 12%, var(--bg-2));
                    color: var(--accent); }

/* ── Org relationship analysis ──────────────────────────────────────────── */
.cal-org-description {
  font-size: .82em;
  color: var(--muted);
  line-height: 1.5;
  margin: -.2rem 0 .75rem;
  padding: .5rem .6rem;
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-2));
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.cal-org-description strong { color: var(--text); }
.cal-org-table .cal-org-row:hover td { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.cal-org-table .cal-org-meetings-row td { background: color-mix(in srgb, var(--bg-2) 60%, transparent); }
.cal-org-table .cal-org-meetings-row.hidden { display: none; }

/* ── Pipeline Meeting Engagement (primary section) ───────────────────────── */
.cal-pipe-controls { display: flex; flex-wrap: wrap; gap: .75rem; margin: .25rem 0 .6rem; }
.cal-pipe-controls .filter-field { min-width: 160px; }

/* List capped at ~10 rows tall, scrolls for the rest */
.cal-pipe-list {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  max-height: 520px;
  overflow-y: auto;
  padding-right: .25rem;
}
.cal-pipe-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  padding: .5rem .7rem;
  border-radius: 10px;
  border: 1px solid var(--border-2);
  background: var(--bg-3);
  border-left-width: 4px;
  border-left-color: var(--border-2);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.cal-pipe-row:hover { background: color-mix(in srgb, var(--accent) 5%, var(--bg-3)); }
.cal-pipe-row.selected { background: color-mix(in srgb, var(--accent) 10%, var(--bg-3)); border-color: var(--accent); }
.cal-pipe--at-risk  { border-left-color: var(--danger); }
.cal-pipe--slipping { border-left-color: var(--warning); }
.cal-pipe--engaged  { border-left-color: var(--accent); }
.cal-pipe-row-main { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.cal-pipe-org { font-size: .92rem; line-height: 1.2; }
.cal-pipe-badge {
  flex: none;
  font-size: .66rem;
  font-weight: 600;
  padding: .12rem .45rem;
  border-radius: 999px;
  white-space: nowrap;
}
.cal-pipe-badge--at-risk  { background: color-mix(in srgb, var(--danger) 22%, transparent);  color: var(--danger); }
.cal-pipe-badge--slipping { background: color-mix(in srgb, var(--warning) 22%, transparent); color: var(--warning); }
.cal-pipe-badge--engaged  { background: color-mix(in srgb, var(--accent) 20%, transparent);  color: var(--accent); }
.cal-pipe-row-stats { display: flex; flex-wrap: wrap; gap: .35rem .6rem; align-items: center; }
.cal-pipe-pm { font-size: .76rem; font-weight: 600; color: var(--text); white-space: nowrap; }
.cal-pipe-stat { font-size: .76rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cal-pipe-stat.ok   { color: var(--accent); }
.cal-pipe-stat.warn { color: var(--warning); }
.cal-pipe-stat.bad  { color: var(--danger); }
.cal-pipe-stat.muted { color: var(--muted); }

/* Detail panel: stats + meeting history for the selected org */
.cal-pipe-detail:empty { display: none; }
.cal-mh-panel {
  margin-top: .75rem;
  border: 1px solid var(--border-2);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-2) 50%, transparent);
  padding: .75rem .85rem;
}
.cal-mh-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .6rem; }
.cal-mh-head > strong { font-size: 1rem; }
.cal-mh-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--muted); cursor: pointer; }
.cal-mh-stats { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .7rem; }
.cal-mh-stat {
  display: flex;
  flex-direction: column;
  min-width: 92px;
  padding: .45rem .6rem;
  border-radius: 9px;
  background: var(--bg-3);
  border: 1px solid var(--border-2);
}
.cal-mh-stat-val { font-size: 1rem; font-weight: 700; color: var(--text); }
.cal-mh-stat-lbl { font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.cal-mh-list { display: flex; flex-direction: column; gap: .25rem; max-height: 360px; overflow-y: auto; }
.cal-mh-row { border-radius: 8px; background: var(--bg-3); border: 1px solid var(--border-2); }
.cal-mh-summary {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  padding: .45rem .6rem;
  cursor: pointer;
  list-style: none;
  font-size: .84rem;
}
.cal-mh-summary::-webkit-details-marker { display: none; }
.cal-mh-date { font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.cal-mh-status { font-weight: 600; white-space: nowrap; }
.cal-mh-status--ok    { color: var(--accent); }
.cal-mh-status--warn  { color: var(--warning); }
.cal-mh-status--bad   { color: var(--danger); }
.cal-mh-status--muted { color: var(--muted); }
.cal-mh-title { flex: 1 1 160px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-mh-flags { display: inline-flex; gap: .3rem; flex-wrap: wrap; }
.cal-mh-dur { white-space: nowrap; font-size: .78rem; }
.cal-mh-attendees { margin: 0; padding: .1rem .6rem .55rem 1.4rem; list-style: none; display: flex; flex-direction: column; gap: .2rem; }
.cal-mh-attendees li { font-size: .8rem; }
.cal-mh-att-resp { display: inline-block; min-width: 70px; font-weight: 600; }
.cal-mh-att-resp.ok   { color: var(--accent); }
.cal-mh-att-resp.warn { color: var(--warning); }
.cal-mh-att-resp.bad  { color: var(--danger); }
.cal-mh-att-resp.muted { color: var(--muted); }
.cal-expand-icon {
  display: inline-block;
  width: 1em;
  text-align: center;
  color: var(--muted);
  font-size: .85em;
  margin-right: .2em;
}
.cal-org-meetings-detail { border-left: 2px solid var(--accent); margin-left: .5rem; }
.cal-org-meetings-detail .data-table { font-size: .85em; }

.filter-group-label { font-size: .75em; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); align-self: center; white-space: nowrap; }

/* ── Calendar sync bar ──────────────────────────────────────────────────── */
.cal-sync-bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .75rem;
  flex-wrap: wrap;
}
.cal-sync-bar-label {
  font-size: .7em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-right: .25rem;
}
.cal-sync-status {
  font-size: .82em;
  min-width: 0;
}

/* Persistent "last sync + status + schedule" line under the sync bar */
.cal-sync-meta {
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.cal-sync-meta:empty { display: none; }
.sync-meta-badge {
  font-weight: 700;
  padding: 0 6px;
  border-radius: var(--radius-full);
  font-size: 10px;
}
.sync-meta-ok  { color: var(--success); background: color-mix(in srgb, var(--success) 12%, transparent); }
.sync-meta-bad { color: var(--danger);  background: color-mix(in srgb, var(--danger) 12%, transparent); }
.sync-meta-run { color: var(--accent);  background: color-mix(in srgb, var(--accent) 12%, transparent); }
.sync-meta-time { color: var(--text-2); font-variant-numeric: tabular-nums; }

/* ── Calendar filter panel ──────────────────────────────────────────────── */
.cal-filters-panel {
  display: flex;
  flex-direction: column;
  gap: .875rem;
  padding: 1rem 1.25rem;
}
.cal-filter-group {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.cal-filter-group-title {
  font-size: .9em;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: baseline;
  gap: .4rem;
  flex-wrap: wrap;
}
.cal-filter-group-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .75rem;
}
.cal-filter-divider {
  height: 1px;
  background: var(--border);
  margin: .125rem 0;
}

/* ── Calendar period tabs ───────────────────────────────────────────────── */
.cal-period-tabs {
  display: flex;
  gap: 2px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 2px;
}
.cal-period-tab {
  padding: 2px 10px;
  font-size: .78em;
  font-weight: 500;
  background: transparent;
  border: none;
  border-radius: calc(var(--radius-md) - 2px);
  cursor: pointer;
  color: var(--muted);
  transition: background .12s, color .12s;
}
.cal-period-tab.active,
.cal-period-tab:hover {
  background: var(--accent);
  color: #fff;
}

/* ── Bar chart label truncation ─────────────────────────────────────────── */
.bar-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-bar-list {
  max-height: 360px;
  overflow-y: auto;
  padding-right: 4px;
}

.cal-pipe-scope-pill {
  align-self: end;
  margin: 0;
  min-height: 34px;
}

/* ── Org analysis panel header ─────────────────────────────────────────── */
.cal-org-head {
  flex-wrap: wrap;
  row-gap: .5rem;
}
.cal-org-head-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin-left: auto;          /* push to right on wide screens */
}
.cal-org-head-controls .filter-field {
  min-width: 0;
}
.cal-org-head-controls .field {
  width: min(200px, 100%);   /* never wider than 200px, shrinks on narrow screens */
}

/* ── Calendar layout foundation (all sizes) ─────────────────────────────── */

/* Grid items must be able to shrink so overflow-x: auto on scroll wrappers works */
.stats-view > * {
  min-width: 0;
}

/* Scroll wrappers: constrain width + ensure both axes are handled */
.cal-scroll-wrap {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
}

/* Tables inside scroll wrappers: override the global 720px minimum.
   min-content makes the table take its natural width so the wrapper can scroll. */
.cal-scroll-wrap table,
.cal-scroll-wrap .data-table {
  min-width: max-content;
  width: max-content;
  max-width: none;
}

#calendarView .cal-scroll-wrap .data-table {
  white-space: nowrap;
}

/* ── Admin module ─────────────────────────────────────────────────────────── */
.admin-user-form,
.admin-filter-grid {
  align-items: end;
}

.admin-user-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.admin-filter-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  min-height: 36px;
}

.admin-table-wrap {
  margin-top: var(--space-3);
}

.admin-users-table,
.admin-audit-table {
  min-width: max-content;
  width: max-content;
  max-width: none;
}

.admin-inline-field {
  width: min(180px, 100%);
  min-width: 120px;
  padding: .25rem .45rem;
  font-size: .85rem;
}

.admin-active-toggle {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .85rem;
  color: var(--text-2);
  white-space: nowrap;
}

.admin-reset-row {
  display: flex;
  align-items: center;
  gap: .4rem;
}

.admin-delete-btn {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 35%, var(--border-2));
}

.admin-delete-btn:hover {
  color: var(--danger);
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, var(--bg-2));
}

.admin-action-list {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: var(--space-3);
}

.admin-action-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .55rem;
  border-radius: var(--radius-full);
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: .78rem;
}

.admin-action-chip strong {
  color: var(--text);
  font-weight: 700;
}

.admin-stats-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.admin-user-activity-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.admin-stats-filter {
  display: flex;
  align-items: end;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.admin-stats-filter .filter-field {
  min-width: 180px;
}

.admin-stats-metrics {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.admin-insight-list {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.admin-insight-chip {
  display: inline-flex;
  align-items: center;
  padding: .35rem .6rem;
  border-radius: var(--radius-full);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--text-2);
  font-size: .82rem;
  line-height: 1.3;
}

.admin-stats-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3);
}

.admin-stats-card {
  min-width: 0;
  padding: .75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--bg-1) 72%, transparent);
}

.admin-stats-card-wide {
  grid-column: 1 / -1;
}

.admin-stats-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: .65rem;
  font-size: .9rem;
}

.admin-hour-chart {
  display: flex;
  align-items: flex-end;
  gap: .25rem;
  height: 176px;
  overflow-x: auto;
  padding: .25rem .1rem 0;
}

.admin-hour-col {
  min-width: 24px;
  flex: 1 0 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.admin-hour-val {
  height: 1.1rem;
  font-size: .68rem;
  font-weight: 700;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

.admin-hour-track {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}

.admin-hour-bar {
  width: 70%;
  max-width: 18px;
  min-height: 0;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(to top, #1d4ed8, #60a5fa);
}

.admin-hour-bar-peak {
  background: linear-gradient(to top, #0f766e, #14b8a6);
}

.admin-hour-label {
  margin-top: .25rem;
  font-size: .68rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.admin-service-bars {
  display: flex;
  flex-direction: column;
  gap: .65rem;
}

.admin-service-row {
  display: grid;
  grid-template-columns: minmax(140px, 220px) minmax(140px, 1fr) minmax(150px, auto);
  align-items: center;
  gap: .75rem;
}

.admin-service-name {
  font-weight: 700;
  color: var(--text);
}

.admin-service-track {
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--bg-2);
  overflow: hidden;
}

.admin-service-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1d4ed8, #38bdf8);
}

.admin-service-meta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: .45rem;
  color: var(--muted);
  font-size: .78rem;
  white-space: nowrap;
}

.admin-service-meta strong {
  color: var(--text);
  font-size: .9rem;
}

/* Admin → Ino answer feedback */
.admin-feedback-fill {
  background: var(--danger);
}

#adminFeedbackWeekly .admin-service-row {
  grid-template-columns: minmax(80px, auto) minmax(80px, 1fr) auto;
}

.admin-feedback-list {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.admin-feedback-item {
  border: 1px solid var(--border);
  border-left: 3px solid var(--success);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--bg-1) 72%, transparent);
}

.admin-feedback-item.is-down {
  border-left-color: var(--danger);
}

.admin-feedback-item > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem .65rem;
  padding: .55rem .75rem;
  cursor: pointer;
  font-size: .86rem;
}

.admin-feedback-rating {
  padding: .1rem .5rem;
  border-radius: var(--radius-full);
  font-size: .74rem;
  font-weight: 700;
  color: var(--success);
  background: color-mix(in srgb, var(--success) 12%, transparent);
  white-space: nowrap;
}

.admin-feedback-item.is-down .admin-feedback-rating {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
}

.admin-feedback-when {
  color: var(--muted);
  font-size: .8rem;
  white-space: nowrap;
}

.admin-feedback-question {
  flex: 1 1 260px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}

.admin-feedback-comment {
  flex-basis: 100%;
  color: var(--danger);
  font-style: italic;
}

.admin-feedback-body {
  padding: 0 .75rem .75rem;
  border-top: 1px solid var(--border);
}

.admin-feedback-body h4 {
  margin: .7rem 0 .3rem;
  font-size: .8rem;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.admin-feedback-body h4 small {
  margin-left: .35rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

.admin-feedback-text {
  padding: .5rem .65rem;
  border-radius: var(--radius-sm, 6px);
  background: var(--bg-2);
  font-size: .86rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.admin-feedback-text.chat-markdown {
  white-space: normal;
  max-height: 420px;
  overflow: auto;
}

.admin-rank-list {
  display: flex;
  flex-direction: column;
  gap: .45rem;
}

.admin-rank-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: .5rem;
  padding: .45rem .5rem;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bg-2) 42%, transparent);
}

.admin-user-rank-button,
.admin-user-link {
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.admin-user-rank-button {
  width: 100%;
}

.admin-user-rank-button:hover,
.admin-clickable-row:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 9%, var(--bg-2));
}

.admin-user-link {
  padding: .15rem .25rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
}

.admin-user-link:hover strong {
  color: var(--accent);
}

.admin-clickable-row {
  cursor: pointer;
}

.admin-day-bars {
  display: flex;
  flex-direction: column;
  gap: .45rem;
}

.admin-day-bar {
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bg-2) 35%, transparent);
  overflow: hidden;
}

.admin-day-bar-selected {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--border));
  background: color-mix(in srgb, var(--accent) 7%, var(--bg-2));
}

.admin-day-bar summary {
  display: grid;
  grid-template-columns: minmax(120px, 170px) minmax(160px, 1fr) auto auto;
  align-items: center;
  gap: .65rem;
  padding: .55rem .65rem;
  cursor: pointer;
  list-style: none;
}

.admin-day-bar summary::-webkit-details-marker {
  display: none;
}

.admin-day-date {
  color: var(--text);
  font-weight: 700;
  white-space: nowrap;
}

.admin-day-track,
.admin-day-hour-track {
  display: block;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--bg-2);
  overflow: hidden;
}

.admin-day-fill,
.admin-day-hour-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0f766e, #38bdf8);
}

.admin-day-bar strong,
.admin-day-hour-row strong {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.admin-day-bar em {
  color: var(--muted);
  font-size: .78rem;
  font-style: normal;
  white-space: nowrap;
}

.admin-day-hour-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
  padding: .3rem .65rem .65rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.admin-day-hour-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .3rem;
}

.admin-day-hour-row {
  display: grid;
  grid-template-columns: 46px minmax(70px, 1fr) 28px;
  align-items: center;
  gap: .45rem;
  color: var(--text-2);
  font-size: .78rem;
}

.admin-day-hour-row span:first-child {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.admin-day-hour-track {
  height: 7px;
}

.admin-day-hour-fill {
  background: linear-gradient(90deg, #1d4ed8, #60a5fa);
}

.admin-rank-row span {
  color: var(--muted);
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
}

.admin-rank-row strong,
.admin-rank-row code {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-rank-row code {
  font-size: .78rem;
}

.admin-rank-row em {
  font-style: normal;
  color: var(--muted);
  font-size: .78rem;
  white-space: nowrap;
}

.admin-activity-endpoint-table,
.admin-activity-timeline-table {
  min-width: max-content;
  width: max-content;
  max-width: none;
}

.admin-activity-endpoint-table .admin-action-chip {
  margin-right: .25rem;
  margin-bottom: .15rem;
}

@media (max-width: 980px) {
  .admin-stats-grid {
    grid-template-columns: 1fr;
  }
  .admin-service-row {
    grid-template-columns: minmax(0, 1fr);
    gap: .35rem;
  }
  .admin-service-meta {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .admin-day-bar summary,
  .admin-day-hour-detail {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Calendar responsive ────────────────────────────────────────────────── */
@media (max-width: 860px) {
  /* Stack filter rows vertically */
  .cal-filter-group-row {
    flex-direction: column;
    align-items: stretch;
  }
  .cal-filter-group-row .filter-field {
    width: 100%;
    min-width: 0;
  }
  .cal-filter-group-row .field { width: 100%; }
  .cal-filter-group-row .btn   { align-self: flex-start; }

  /* Compact sync bar */
  .cal-sync-bar { gap: .375rem; padding: .35rem .6rem; }

  /* Header metrics: 2-column grid */
  .stats-summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Narrower bar chart labels */
  .bar-row {
    grid-template-columns: minmax(60px, 100px) 1fr 36px;
  }
  #calendarView .bar-row {
    grid-template-columns: minmax(60px, 112px) minmax(120px, 1fr) minmax(34px, auto);
  }

  /* Period tabs wrap */
  .cal-period-tabs { flex-wrap: wrap; }

  /* KPI cards: tighter minimum so more fit per row */
  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  }

  /* Org head controls: always full-width below the heading */
  .cal-org-head-controls {
    margin-left: 0;
    width: 100%;
  }
}

@media (max-width: 560px) {
  .stats-summary-grid { grid-template-columns: repeat(2, 1fr); }
  .cal-filters-panel  { padding: .6rem .75rem; }
  .cal-filter-group   { gap: .4rem; }
  .stats-grid         { grid-template-columns: repeat(2, 1fr); }

  /* Sync bar: wrap buttons */
  .cal-sync-bar { flex-wrap: wrap; }

  /* Section heads that have many controls */
  .stats-view .section-head.tight {
    flex-wrap: wrap;
    row-gap: .4rem;
  }
}

/* ── Email module ───────────────────────────────────────────────────────── */
.em-overview-table .em-project-row:hover td {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.em-waiting-banner {
  padding: .55rem .8rem;
  border-radius: var(--radius);
  font-size: .9em;
  margin-bottom: .75rem;
  border-left: 3px solid var(--border);
}
.em-waiting-banner--alert {
  background: color-mix(in srgb, var(--danger) 10%, var(--bg-2));
  border-left-color: var(--danger);
  color: var(--text);
}
.em-waiting-banner--ok {
  background: color-mix(in srgb, var(--success) 10%, var(--bg-2));
  border-left-color: var(--success);
  color: var(--text);
}

/* ── Email KPI cards: smaller values (dates were oversized) ── */
#emKpiGrid .stats-card strong { font-size: 1.25rem; line-height: 1.15; }
#emKpiGrid .stats-card-detail { display: none; }  /* no underlying-data drawer for email */

/* ── Awaiting-reply emphasis in the overview ── */
.em-row-waiting td { background: color-mix(in srgb, var(--danger) 8%, transparent); }
.em-row-waiting td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.em-action-pill {
  display: inline-block;
  background: var(--danger);
  color: #fff;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: var(--radius-full);
  font-size: .92em;
}

/* ── Direction / scope badges ── */
.em-badge {
  display: inline-block;
  font-size: .72em;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  border: 1px solid transparent;
}
.em-badge-out      { background: color-mix(in srgb, var(--accent) 18%, var(--bg-1)); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.em-badge-in       { background: #fde7d2; color: #9a3412; border-color: #f4a667; }
.em-badge-internal { background: var(--bg-2); color: var(--text-2); border-color: var(--border); }
.em-badge-external { background: #ede0ff; color: #6d28d9; border-color: #c4b0f5; }
[data-theme="dark"] .em-badge-in       { background: #4a2410; color: #fdba74; border-color: #9a3412; }
[data-theme="dark"] .em-badge-external { background: #2e1f4d; color: #c4b5fd; border-color: #6d28d9; }

/* Volume bar rows: [week] [bar] [counts outside, readable] */
.em-bar-row { grid-template-columns: minmax(64px, 110px) 1fr minmax(56px, auto); }
.em-split-bar {
  display: flex;
  height: 16px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-2);   /* unfilled track — subtle, not a third "bar" */
}
/* Note: higher specificity (.em-split-bar i.…) + background-image:none is required
   to override the global `.bar-row i { background: linear-gradient(…) }` rule. */
.em-split-bar i.em-bar-sent,
.em-split-bar i.em-bar-recv { display: block; height: 100%; background-image: none; }
.em-split-bar i.em-bar-sent { background-color: #1d4ed8; }   /* blue-700 — cool */
.em-split-bar i.em-bar-recv { background-color: #ea580c; }   /* orange-600 — warm; colourblind-safe */
.em-bar-counts {
  text-align: right; white-space: nowrap;
  font-size: .8rem; font-variant-numeric: tabular-nums;
}
.em-c-sent { color: #1d4ed8; font-weight: 700; }
.em-c-recv { color: #ea580c; font-weight: 700; }
.em-c-sep  { color: var(--muted); margin: 0 .15rem; }
[data-theme="dark"] .em-c-sent { color: #93b4fb; }
[data-theme="dark"] .em-c-recv { color: #fdab76; }
.em-legend { display: flex; gap: 1rem; font-size: .8em; color: var(--text-2); margin-bottom: .5rem; }
.em-legend-item { display: inline-flex; align-items: center; gap: .35rem; }
.em-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.em-swatch-sent { background: #1d4ed8; }
.em-swatch-recv { background: #ea580c; }

/* Searchable project combobox */
.em-project-combo { position: relative; }
.em-project-results {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
  margin-top: 2px; max-height: 320px; overflow-y: auto;
  background: var(--bg-3); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
}
.em-project-results.hidden { display: none; }
.em-project-result { padding: .45rem .7rem; cursor: pointer; border-bottom: 1px solid var(--border); }
.em-project-result:last-child { border-bottom: none; }
.em-project-result:hover { background: color-mix(in srgb, var(--accent) 10%, var(--bg-3)); }
.em-project-result--empty { color: var(--muted); cursor: default; }
.em-project-result--empty:hover { background: none; }
.em-project-result-sub { font-size: .8em; }
.em-pr-badge { margin-left: .35rem; }

/* Threads toolbar (expand all / hide invites) */
.em-threads-toolbar {
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: .6rem; flex-wrap: wrap;
}
.em-invite-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .7rem; border-radius: var(--radius-full);
  border: 1px solid var(--border); background: var(--bg-2);
  font-size: .82em; font-weight: 500; cursor: pointer; user-select: none;
}
.em-invite-pill:hover { border-color: var(--accent); }
.em-invite-pill.active {
  background: color-mix(in srgb, #6d28d9 14%, var(--bg-2));
  border-color: #6d28d9; color: #6d28d9; font-weight: 600;
}
.em-invite-pill input { margin: 0; }

/* Domain groups in the threads panel */
.em-project-thread-group {
  margin-bottom: .85rem;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 4%, transparent);
  overflow: hidden;
}
.em-project-thread-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .75rem;
  cursor: pointer;
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-3));
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  flex-wrap: wrap;
}
.em-project-thread-head:hover {
  background: color-mix(in srgb, var(--accent) 15%, var(--bg-3));
}
.em-project-thread-title {
  display: grid;
  gap: 1px;
  min-width: min(260px, 100%);
}
.em-project-thread-title strong {
  font-size: .96rem;
  line-height: 1.2;
}
.em-project-thread-title span {
  color: var(--muted);
  font-size: .8rem;
  overflow-wrap: anywhere;
}
.em-project-thread-body {
  display: grid;
  gap: .55rem;
  padding: .6rem;
}
.em-project-thread-body.hidden { display: none; }
.em-project-thread-body .em-domain-group {
  margin-bottom: 0;
  background: var(--bg-3);
}

.em-domain-group { margin-bottom: .75rem; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.em-domain-head {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .75rem; cursor: pointer;
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-3));
  font-size: .95em;
}
.em-domain-head:hover { background: color-mix(in srgb, var(--accent) 14%, var(--bg-3)); }
.em-domain-head strong { font-size: 1em; }
.em-domain-sub { font-size: .8em; color: var(--muted); font-weight: 400; }
.em-domain-unmapped { font-style: italic; }
.em-domain-stats { margin-left: auto; font-size: .8em; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.em-domain-last { font-size: .8em; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 88px; text-align: right; }
.em-sort-ctl { display: inline-flex; align-items: center; gap: .35rem; font-size: .8em; color: var(--muted); }
.em-sort-ctl .field { width: auto; padding: .15rem .4rem; font-size: .95em; }
.em-domain-body { padding: .5rem; display: grid; gap: .4rem; }
.em-domain-body.hidden { display: none; }

/* Calendar-invite + internal CC badges */
.em-badge-invite { background: #ede9fe; color: #6d28d9; border-color: #c4b5fd; }
[data-theme="dark"] .em-badge-invite { background: #2e1f4d; color: #c4b5fd; border-color: #6d28d9; }
.em-cc-badge {
  display: inline-block; font-size: .74em; font-weight: 600;
  padding: 1px 7px; border-radius: var(--radius-full);
  background: var(--bg-2); color: var(--text-2); border: 1px dashed var(--border);
}
.em-msg-cc { margin-top: .2rem; }

/* Threads */
.em-thread {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: .5rem;
  overflow: hidden;
}
.em-thread-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .75rem;
  background: var(--bg-3);
  flex-wrap: wrap;
}
.em-thread-head:hover { background: color-mix(in srgb, var(--accent) 6%, var(--bg-3)); }
.em-expand { width: 1em; color: var(--muted); font-size: .85em; }
.em-thread-subject { flex: 1; min-width: 120px; font-size: .92em; }
.em-thread-stats { font-size: .8em; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.em-thread-date { font-size: .8em; color: var(--muted); white-space: nowrap; }
.em-thread-body { padding: .5rem .75rem; display: grid; gap: .5rem; }
.em-thread-body.hidden { display: none; }

.em-msg {
  padding: .5rem .7rem;
  border-radius: var(--radius);
  background: var(--bg-2);
  border-left: 4px solid var(--border);
}
.em-msg--outbound { border-left-color: #1d4ed8; }
.em-msg--inbound  { border-left-color: #ea580c; }
/* Background per scope so internal vs external reads at a glance */
.em-msg--internal { background: color-mix(in srgb, var(--bg-3) 60%, var(--bg-2)); }
.em-msg--external { background: color-mix(in srgb, #ea580c 7%, var(--bg-2)); }
/* Calendar invites: muted violet wash + dashed edge */
.em-msg--invite {
  background: color-mix(in srgb, #6d28d9 8%, var(--bg-2));
  border-left-style: dashed;
  border-left-color: #6d28d9;
}
[data-theme="dark"] .em-msg--external { background: color-mix(in srgb, #ea580c 14%, var(--bg-2)); }
[data-theme="dark"] .em-msg--invite   { background: color-mix(in srgb, #6d28d9 18%, var(--bg-2)); }
.em-msg-head { display: flex; align-items: center; gap: .4rem; font-size: .88em; flex-wrap: wrap; }
.em-msg-date { margin-left: auto; color: var(--muted); font-size: .92em; white-space: nowrap; }
.em-msg-to { font-size: .78em; color: var(--muted); margin-top: .15rem; }
.em-msg-snippet { font-size: .85em; color: var(--text-2); margin-top: .3rem; line-height: 1.45; }
.em-msg-body {
  font-size: .85em;
  color: var(--text);
  margin-top: .4rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 420px;
  overflow-y: auto;
  padding: .5rem .6rem;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.em-msg-body.hidden, .em-msg-snippet.hidden { display: none; }
.em-msg-toggle {
  margin-top: .35rem;
  background: none;
  border: none;
  color: var(--accent);
  font-size: .8em;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.em-msg-toggle:hover { text-decoration: underline; }

/* per-thread "Show original" button + reading-view popup */
.em-show-original { margin-left: .5rem; flex: none; }

.em-original-body {
  display: grid;
  gap: .6rem;
  max-height: 70vh;
  overflow-y: auto;
  padding-right: 4px;
}
.em-orig-msg {
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-2);
  border-radius: var(--radius);
  background: var(--bg-2);
  padding: .55rem .7rem;
}
.em-orig-msg--outbound { border-left-color: var(--accent); }
.em-orig-msg--inbound  { border-left-color: var(--info); }
.em-orig-msg-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
  font-size: .9em;
}
.em-orig-dir { color: var(--muted); font-size: .85em; font-weight: 600; }
.em-orig-date { margin-left: auto; color: var(--muted); font-size: .8em; white-space: nowrap; }
.em-orig-to { color: var(--muted); font-size: .8em; margin-top: .15rem; }
.em-orig-text {
  margin: .45rem 0 0;
  font-size: .85em;
  color: var(--text);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
}

/* "Sync from" control in the sync bar */
.em-sync-since { display: inline-flex; align-items: center; gap: .3rem; font-size: .8em; color: var(--muted); }
.em-sync-since .field { padding: .15rem .4rem; font-size: .92em; width: auto; }

/* ── Expandable statistics section ── */
/* Statistics expander integrated into the project KPI panel (not a separate banner) */
.em-stats-inline {
  margin-top: var(--space-3);
  border-top: 1px solid var(--border);
  padding-top: var(--space-3);
}
.em-stats-inline #emStatsContent { margin-top: var(--space-3); }

.em-stats-kpis { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }
.em-stat-mini {
  flex: 1; min-width: 120px;
  display: flex; flex-direction: column; gap: 2px;
  padding: .5rem .7rem; border: 1px solid var(--border);
  border-radius: var(--radius-md); background: var(--bg-2);
}
.em-stat-mini strong { font-size: 1.3rem; font-variant-numeric: tabular-nums; line-height: 1.1; }
.em-stat-mini span { font-size: .75em; color: var(--muted); }
.em-stats-h {
  font-size: .9rem; font-weight: 600; margin: 1rem 0 .5rem;
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.em-stats-select { width: auto; padding: .15rem .4rem; font-size: .85em; margin-left: auto; }
.em-stats-orgtable { max-height: 360px; }  /* ~10 rows then scroll */

.em-stats-sub { font-size: .8em; color: var(--muted); margin: .3rem 0 .25rem; }

/* Follow-up status badges */
.em-badge-urgent       { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }
.em-badge-followup     { background: #ffedd5; color: #c2410c; border-color: #fdba74; }
.em-badge-followup-soft{ background: #fef9c3; color: #854d0e; border-color: #fde047; }
[data-theme="dark"] .em-badge-urgent        { background: #4c1d1d; color: #fca5a5; border-color: #b91c1c; }
[data-theme="dark"] .em-badge-followup      { background: #4a2a10; color: #fdba74; border-color: #c2410c; }
[data-theme="dark"] .em-badge-followup-soft { background: #3f3711; color: #fde047; border-color: #854d0e; }

/* Calendar (GitHub-style) day heatmap */
.em-cal-scroll { overflow-x: auto; padding-bottom: 4px; }
.em-cal { display: inline-block; min-width: max-content; }
.em-cal-months { display: flex; gap: 3px; margin-left: 0; height: 14px; }
.em-cal-month { width: 13px; font-size: 9px; color: var(--muted); white-space: nowrap; overflow: visible; }
.em-cal-grid { display: flex; gap: 3px; }
.em-cal-col { display: flex; flex-direction: column; gap: 3px; }
.em-cal-cell { width: var(--em-cell, 13px); height: var(--em-cell, 13px); border-radius: 3px; }
.em-cal-month { width: var(--em-cell, 13px); }
.em-cal-empty { background: transparent !important; }
.em-cal-legend { display: flex; align-items: center; gap: 4px; font-size: .75em; color: var(--muted); margin-top: .5rem; }
.em-cal-legend .em-cal-cell { width: 12px; height: 12px; }

/* Two-column stats layout (heatmap next to chart, weekday next to time-of-day) */
.em-stats-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.em-stats-card {
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: transparent; padding: .65rem .75rem; min-width: 0;
}
@media (max-width: 900px) { .em-stats-grid2 { grid-template-columns: 1fr; } }

/* Daily bar chart (responsive, modern) */
.em-day-chart { display: flex; align-items: stretch; gap: .5rem; height: 132px; }
.em-day-yaxis { display: flex; flex-direction: column; justify-content: space-between; font-size: 10px; color: var(--muted); padding: 2px 0; }
.em-day-bars { flex: 1; display: flex; align-items: flex-end; gap: 1px; padding: 16px 1px 0; min-height: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  background: repeating-linear-gradient(to top, transparent, transparent 32px, color-mix(in srgb, var(--border) 14%, transparent) 32px, color-mix(in srgb, var(--border) 14%, transparent) 33px);
}
.em-day-bar { position: relative; flex: 1 1 0; min-width: 1px; border-radius: 2px 2px 0 0;
  background: linear-gradient(to top, #1d4ed8, #3b82f6); transition: filter .1s; }
.em-day-bar:hover { filter: brightness(1.15) saturate(1.2); }
.em-day-bar--mon { background: linear-gradient(to top, #0f766e, #14b8a6); }  /* Mondays stand out (teal) */
.em-day-bar--peak { outline: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); }
.em-day-peak {
  position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
  font-size: .68rem; font-weight: 700; color: var(--accent);
  font-variant-numeric: tabular-nums; pointer-events: none;
}
.em-day-foot { display: flex; justify-content: space-between; align-items: center; font-size: .75em; color: var(--muted); margin-top: .35rem; }
.em-day-legend { display: inline-flex; align-items: center; gap: .3rem; }
.em-day-swatch { width: 10px; height: 10px; border-radius: 2px; background: #0f766e; display: inline-block; }

/* Categorical bar chart (weekday / time-of-day) */
.em-cat-chart { display: flex; align-items: flex-end; gap: .5rem; height: 150px; padding-top: 4px; }
.em-cat-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; height: 100%; }
.em-cat-val { font-size: .72rem; font-weight: 700; color: var(--text-2); height: 1.1em; font-variant-numeric: tabular-nums; }
.em-cat-bar-track { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; min-height: 0; }
.em-cat-bar { width: 70%; max-width: 46px; border-radius: 4px 4px 0 0;
  background: linear-gradient(to top, #1d4ed8, #60a5fa); }
.em-cat-bar--hl { background: linear-gradient(to top, #0f766e, #14b8a6); }  /* Monday */
.em-cat-label { font-size: .72rem; color: var(--muted); margin-top: .3rem; white-space: nowrap; }

.em-toporg .bar-label { max-width: 220px; }

/* Sync progress bar */
.em-progress { margin-top: .4rem; }
.em-progress-track {
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--bg-2);
  overflow: hidden;
}
.em-progress-bar {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-bright, var(--accent)));
  transition: width .35s ease;
}
.em-progress-bar--indeterminate {
  width: 40% !important;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: em-indeterminate 1.1s ease-in-out infinite;
}
@keyframes em-indeterminate {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}

@media (max-width: 860px) {
  .em-overview-table { min-width: max-content; }
  .em-custom-dates .field { width: 100%; }
}

/* ── Book filter panel: compact bar, phase strip, "more" drawer, active chips ── */
.book-controls {
  gap: var(--space-2);
}

.book-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-3);
}

.book-bar .filter-field {
  min-width: 150px;
}

.book-bar-search {
  flex: 1 1 260px;
}

.book-phase-strip {
  display: grid;
  gap: 6px;
}

.book-phase-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.book-phase-hint {
  font-size: var(--text-xs);
  margin-right: auto;
}

#bookPhaseMetrics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#bookPhaseMetrics .phase-chip {
  min-height: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.28rem 0.6rem;
  border-radius: var(--radius-full);
}

#bookPhaseMetrics .phase-chip strong {
  font-size: var(--text-xs);
  font-weight: 600;
}

#bookPhaseMetrics .phase-chip small {
  min-width: 1.5em;
  padding: 0 6px;
  border-radius: var(--radius-full);
  background: var(--bg-2);
  color: var(--text-2);
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

#bookPhaseMetrics .phase-chip.active small {
  background: var(--accent);
  color: var(--accent-contrast);
}

.book-more {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
}

.book-more > summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.book-more > summary::-webkit-details-marker { display: none; }

.book-more > summary::before {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform var(--dur-fast) ease;
}

.book-more[open] > summary::before { transform: rotate(45deg); }

.book-more-body {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-2) 0.75rem 0.85rem;
}

.book-more-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-3);
}

.book-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.book-toggles .checkbox-pill {
  font-weight: 500;
  font-size: var(--text-sm);
}

.book-status-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.book-active-chips {
  display: contents;
}

.book-active-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.15rem 0.55rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius-full);
  background: var(--accent-tint);
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
}

.book-active-chip::after {
  content: "\00d7";
  font-size: 1.1em;
  line-height: 1;
}

.book-active-chip:hover {
  background: var(--bg-2);
}

.book-status-row .book-filter-status {
  margin: 0 0 0 auto;
  font-size: var(--text-xs);
}

/* ── Book expansion: compact candidate rows ───────────────────────── */
.book-detail-panel .candidate-stage-group {
  gap: 6px;
  padding: var(--space-2) 0;
}

.book-detail-panel .candidate-stage-group h4 {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.book-detail-panel .candidate-detail-list {
  gap: 4px;
}

.book-detail-panel .candidate-detail-list li.candidate-detail-item {
  display: block;
  padding: 0;
  overflow: hidden;
}

.cand-row {
  display: grid;
  grid-template-columns: 14px minmax(180px, 1.7fr) auto minmax(110px, 0.8fr) auto auto;
  align-items: center;
  gap: 4px var(--space-3);
  padding: 6px 10px;
  min-height: 38px;
}

summary.cand-row {
  cursor: pointer;
  list-style: none;
}

summary.cand-row::-webkit-details-marker { display: none; }
summary.cand-row:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }

.cand-caret {
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform var(--dur-fast) ease;
}

.cand-caret--none { visibility: hidden; }
.cand-details[open] > summary .cand-caret { transform: rotate(45deg); }

.cand-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.cand-meta {
  display: inline-flex;
  gap: var(--space-2);
  white-space: nowrap;
}

.cand-meta .candidate-rating-label { margin-left: 0; }

.cand-row .candidate-detail-org {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cand-when {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.cand-when small { font-size: 11px; color: var(--muted); }

.cand-stage-days {
  min-width: 2.6em;
  padding: 1px 7px;
  border: 1px solid var(--tone-blue);
  border-radius: 999px;
  background: color-mix(in srgb, var(--tone-blue) 12%, var(--bg-3));
  color: var(--tone-blue);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.cand-stage-days--empty {
  border-color: var(--border);
  background: transparent;
  color: var(--muted);
}

.cand-actions { display: inline-flex; min-width: 0; }

.cand-panel {
  display: grid;
  gap: var(--space-2);
  padding: 8px 12px 10px 34px;
  border-top: 1px dashed var(--border);
  background: color-mix(in srgb, var(--bg-2) 60%, var(--bg-3));
}

.cand-panel-block {
  display: grid;
  gap: 4px;
}

.cand-panel-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.cand-panel .candidate-stage-duration { margin-top: 0; }

/* developer profile inside the panel: no nested box, no repeated name, facts in a grid */
.cand-profile-block .candidate-stage-group { padding: 0; border: 0; }

.cand-profile-block .candidate-profile {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  gap: 6px;
}

.cand-profile-block .candidate-head { display: none; }

.cand-profile-block .candidate-facts {
  grid-template-columns: repeat(3, max-content minmax(0, 1fr));
  gap: 2px var(--space-3);
}

.cand-person-link { font-size: var(--text-xs); width: fit-content; }

.cand-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

.book-hidden-lost-link {
  width: fit-content;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.book-phase-untracked-note {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--muted);
}

.info-dot { cursor: help; }

@media (max-width: 900px) {
  .cand-profile-block .candidate-facts {
    grid-template-columns: max-content minmax(0, 1fr);
  }
  .cand-row {
    grid-template-columns: 14px 1fr auto;
  }
  .cand-meta,
  .cand-row .candidate-detail-org { grid-column: 2 / -1; }
}

/* stage timeline always visible: second line of the candidate row */
.cand-timeline {
  grid-column: 2 / -1;
  min-width: 0;
}

.cand-timeline .candidate-stage-duration {
  margin-top: 0;
}

/* one slim line above the candidates: phase note · lost-deals link · expand/collapse */
.book-detail-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px var(--space-4);
}

.book-detail-top:empty { display: none; }

.book-detail-top .book-phase-duration-section {
  padding: 0;
  border: 0;
  gap: 0;
}

.book-detail-top .book-hidden-lost-note,
.book-detail-top .book-phase-untracked-note { margin: 0; }

.book-detail-top .cand-toolbar { margin-left: auto; }

.book-detail-top .cand-toolbar .btn { padding: 1px 8px; min-height: 24px; font-size: var(--text-xs); }

/* ── Rate approvals: structured description + candidate/calculation details ── */
.approval-desc {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
}

.approval-desc > summary {
  padding: 0.55rem var(--space-3);
  cursor: pointer;
  font-weight: 700;
  font-size: var(--text-sm);
}

.approval-desc-body {
  display: grid;
  gap: var(--space-3);
  padding: 0 var(--space-3) var(--space-3);
}

.approval-desc-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
}

.approval-desc-facts > div {
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-3);
  min-width: 0;
}

.approval-desc-facts dt {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 700;
}

.approval-desc-facts dd {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text);
}

.approval-desc-sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: var(--space-3) var(--space-4);
  align-items: start;
}

.approval-desc-section h5 {
  margin: 0 0 4px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-2);
}

.approval-desc-section p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-2);
}

.approval-desc-section ul {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 3px;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--text-2);
}

.approval-desc-section h5 + p,
.approval-desc-section h5 + ul { margin-top: 4px; }

/* details: 3 compact cards on top, candidate full width below */
.approval-detail-top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--space-3);
}

.approval-details .approval-block dl {
  grid-template-columns: 1fr auto;
}

.approval-details .approval-block dd {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.approval-block--calc dt:nth-of-type(3),
.approval-block--calc dd:nth-of-type(3),
.approval-block--calc dt:nth-of-type(4),
.approval-block--calc dd:nth-of-type(4) {
  font-weight: 700;
  color: var(--text);
}

.approval-candidate { margin-top: var(--space-3); display: grid; gap: var(--space-2); }
.approval-candidate > strong { margin-bottom: 0; }

.approval-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
}

.approval-facts > div {
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--bg-3);
}

.approval-facts dt {
  display: inline;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 700;
}

.approval-facts dt::after { content: ": "; }

.approval-facts dd {
  display: inline;
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
}

.approval-texts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--space-3);
  align-items: start;
}

.approval-text {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-3);
}

.approval-text > span {
  display: block;
  margin-bottom: 3px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.approval-text p {
  margin: 0;
  white-space: pre-line;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-2);
}

.approval-text--warning {
  border-color: color-mix(in srgb, var(--tone-amber) 55%, var(--border));
  background: color-mix(in srgb, var(--tone-amber) 8%, var(--bg-3));
}

.approval-details .approval-block dl.approval-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.approval-details .approval-block dl.approval-facts dd {
  text-align: left;
}

/* ── Company chatbot ("Ino") ─────────────────────────────────────── */
.chat-view {
  --chat-col: 768px;
  --chat-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --chat-grad: linear-gradient(135deg, var(--accent-bright) 0%, var(--accent) 55%, var(--tone-blue) 130%);
}

.chat-shell {
  position: relative;
  display: flex;
  flex-direction: row;
  height: calc(100dvh - var(--chat-offset, 150px));
  min-height: 520px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
}

/* soft ambient glow behind the empty state */
.chat-shell::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto;
  height: 70%;
  background:
    radial-gradient(40% 60% at 35% 40%, color-mix(in srgb, var(--accent-bright) 14%, transparent), transparent 70%),
    radial-gradient(35% 50% at 70% 35%, color-mix(in srgb, var(--tone-blue) 10%, transparent), transparent 70%);
  filter: blur(10px);
  opacity: 0;
  transition: opacity 600ms var(--chat-ease);
  pointer-events: none;
  z-index: -1;
}

.chat-view.is-empty .chat-shell::before { opacity: 1; }

/* ── top bar ── */
.chat-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 12px 16px 12px 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: color-mix(in srgb, var(--bg-3) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  z-index: 2;
}

.chat-index-status {
  flex: none;
  padding: 10px 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--warning) 35%, var(--border));
  background: color-mix(in srgb, var(--warning) 12%, var(--bg-3));
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.45;
  z-index: 2;
}

/* index build progress under the status text */
.chat-index-track {
  display: block;
  height: 4px;
  margin-top: 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--warning) 22%, var(--bg-2));
  overflow: hidden;
}
.chat-index-track > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--warning);
  transition: width 600ms ease;
}

.chat-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.chat-orb {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--chat-grad);
  color: #fff;
  box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--accent) 60%, transparent);
}

.chat-orb svg { width: 18px; height: 18px; }

.chat-brand-text h2 {
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.chat-brand-text p {
  margin: 0;
  font-size: 0.75rem;
  color: var(--muted-2);
}

/* segmented control with sliding indicator */
.chat-mode-switch {
  position: relative;
  display: inline-flex;
  padding: 3px;
  background: var(--bg-2);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 999px;
}

.chat-mode-indicator {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: var(--indicator-w, 0);
  transform: translateX(var(--indicator-x, 3px));
  background: var(--bg-3);
  border-radius: 999px;
  box-shadow: var(--shadow-sm), 0 0 0 1px color-mix(in srgb, var(--border) 60%, transparent);
  transition: transform 320ms var(--chat-ease), width 320ms var(--chat-ease);
}

.chat-mode-btn {
  position: relative;
  z-index: 1;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 200ms;
  white-space: nowrap;
}

.chat-mode-btn:hover { color: var(--text); }
.chat-mode-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.chat-mode-btn.active { color: var(--text); }

.chat-soon {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--accent-tint-2);
  color: var(--accent-strong);
}

.chat-icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 7px 11px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 160ms, color 160ms, border-color 160ms;
}

.chat-icon-btn svg { width: 16px; height: 16px; }
.chat-icon-btn:hover { background: var(--hover); color: var(--text); border-color: color-mix(in srgb, var(--border) 70%, transparent); }
.chat-icon-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }

/* ── conversation ── */
.chat-scroll {
  flex: 1;
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-gutter: stable both-edges;
}

.chat-scroll::-webkit-scrollbar { width: 10px; }
.chat-scroll::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--muted-2) 30%, transparent);
  border-radius: 999px;
  border: 3px solid var(--bg-3);
}

.chat-thread {
  max-width: var(--chat-col);
  margin: 0 auto;
  padding: 28px 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-height: 100%;
}

.chat-view.is-empty .chat-thread,
.chat-thread:has(> .chat-hero:only-child) {
  justify-content: center;
}

.chat-row { display: flex; }
.chat-row.is-new { animation: chat-rise 420ms var(--chat-ease) both; }

.chat-row-user { justify-content: flex-end; }

.chat-bubble {
  max-width: min(82%, 620px);
  padding: 10px 16px;
  background: var(--bg-2);
  color: var(--text);
  border-radius: 20px 20px 6px 20px;
  font-size: 0.93rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.chat-row-assistant {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.chat-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--chat-grad);
  color: #fff;
  margin-top: 1px;
}

.chat-avatar svg { width: 16px; height: 16px; }

.chat-avatar.is-thinking::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 60%, var(--accent-bright) 85%, transparent);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  animation: chat-spin 1.1s linear infinite;
}

.chat-avatar.is-error {
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  color: var(--danger);
  font-weight: 700;
  font-size: 0.9rem;
}

.chat-body { min-width: 0; }

.chat-markdown {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text);
  overflow-wrap: anywhere;
}

.chat-markdown p { margin: 0 0 0.5em; }
.chat-markdown > :last-child { margin-bottom: 0; }
.chat-markdown ul, .chat-markdown ol { margin: 0.1em 0 0.55em; padding-left: 1.2em; }
.chat-markdown li { margin: 0.12em 0; padding-left: 0.15em; }
.chat-markdown li::marker { color: var(--muted-2); }
.chat-markdown h4 { font-size: 0.98rem; font-weight: 650; margin: 1.1em 0 0.4em; letter-spacing: -0.005em; }
.chat-markdown > h4:first-child { margin-top: 0; }
.chat-markdown strong { font-weight: 650; color: var(--text); }
.chat-markdown hr { border: 0; border-top: 1px solid var(--border); margin: 1em 0; }
.chat-markdown code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.84em;
  background: var(--bg-2);
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  padding: 1px 5px;
  border-radius: 5px;
}

.chat-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.chat-source {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 1px 7px 1px 6px;
  font-size: 0.7rem;
  color: var(--muted);
  background: var(--bg-2);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 5px;
}

.chat-source svg { flex: none; width: 11px; height: 11px; color: var(--muted-2); }
.chat-source span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* questions Ino suggests under its latest answer, and the options of "Before I draft this" */
.chat-suggest { display: grid; gap: 6px; margin-top: 10px; }
.chat-suggest-group { display: grid; justify-items: start; gap: 0; min-width: 0; }
/* the labels are blue so the section is found at a glance (no box, no border) */
.chat-suggest-group .chat-suggest-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 2px;
  color: var(--tone-blue);
}
.chat-suggest-group .chat-suggest-label svg { width: 13px; height: 13px; }
.chat-suggest-label { font-size: 0.75rem; font-weight: 600; color: var(--muted); margin-right: 2px; }
/* one suggested question per row: plain text with an arrow, quiet until hovered */
.chat-suggest-q {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 3px 8px;
  margin-left: -8px;
  font: inherit;
  font-size: 0.84rem;
  line-height: 1.4;
  text-align: left;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}
.chat-suggest-q span { min-width: 0; overflow-wrap: anywhere; }
.chat-suggest-q svg { flex: none; width: 14px; height: 14px; color: var(--tone-blue); }
.chat-suggest-q:hover { background: color-mix(in srgb, var(--tone-blue) 9%, transparent); }
.chat-suggest-q:hover svg { color: var(--tone-blue); }
.chat-suggest-q:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.chat-suggest-chip {
  max-width: 100%;
  padding: 4px 10px;
  font: inherit;
  font-size: 0.78rem;
  line-height: 1.35;
  text-align: left;
  color: var(--text);
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.chat-suggest-chip:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.chat-suggest-chip:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.chat-suggest-chip[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-strong); }
.chat-options { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 4px; }
/* an answer of the user's own, right at the question */
.chat-option-own {
  flex: 1 1 140px;
  max-width: 260px;
  min-width: 0;
  height: 28px;
  padding: 0 10px;
  font: inherit;
  font-size: 0.78rem;
  color: var(--text);
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: 0;
}
.chat-option-own:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.chat-option-own::placeholder { color: var(--muted-2); }
.chat-options-send { margin: 6px 0 0; }

/* "To find what you need" / "Before I draft this": the questions in one quiet box */
.chat-markdown .chat-ask-box {
  margin: 8px 0 10px;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.chat-markdown .chat-ask-box > p { margin-bottom: 4px; }
.chat-markdown .chat-ask-box > ol, .chat-markdown .chat-ask-box > ul { margin-bottom: 0; }

/* the next step stands apart from the answer text */
.chat-markdown p.chat-next {
  margin-top: 10px;
  padding: 6px 10px;
  font-size: 0.85rem;
  background: var(--bg-2);
  border-radius: 8px;
}

/* the data note reads like a footnote: inside "How this was calculated", or one small line */
.chat-steps-note { margin: 6px 0 0; font-size: 0.75rem; line-height: 1.45; color: var(--muted); }
.chat-steps-note strong { font-weight: 600; color: var(--muted); }
.chat-data-note { margin-top: 8px; }
.chat-data-note .chat-steps-note { margin: 0; }
.chat-reads { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin-top: 18px; }
.chat-reads + .chat-cards { margin-top: 16px; }

.chat-actions {
  display: flex;
  gap: 2px;
  margin-top: 8px;
  margin-left: -6px;
  opacity: 0;
  transition: opacity 180ms;
}

.chat-row:hover .chat-actions,
.chat-row:focus-within .chat-actions,
.chat-row:last-child .chat-actions,
.chat-actions.is-visible { opacity: 1; }

.chat-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: transparent;
  color: var(--muted-2);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 150ms, color 150ms;
}

.chat-action svg { width: 14px; height: 14px; }
.chat-action:hover { background: var(--hover); color: var(--text); }
.chat-action:focus-visible { outline: 2px solid var(--ring); }
.chat-action.is-done { color: var(--success); }

.chat-error {
  font-size: 0.9rem;
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent);
  border-radius: 12px;
  padding: 10px 14px;
}

/* thinking state */
.chat-thinking {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  font-size: 0.9rem;
}

.chat-shimmer {
  background: linear-gradient(90deg, var(--muted-2) 0%, var(--muted-2) 35%, var(--text) 50%, var(--muted-2) 65%, var(--muted-2) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: chat-shimmer 2s linear infinite;
}

.chat-dots { display: inline-flex; gap: 3px; }
.chat-dots i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--muted-2);
  animation: chat-dot 1.2s infinite ease-in-out;
}
.chat-dots i:nth-child(2) { animation-delay: 0.15s; }
.chat-dots i:nth-child(3) { animation-delay: 0.3s; }

/* ── empty state ── */
.chat-hero {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 6px;
  animation: chat-rise 600ms var(--chat-ease) both;
}

.chat-hero-orb {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 10px;
  border-radius: 18px;
  background: var(--chat-grad);
  color: #fff;
  box-shadow: 0 12px 32px -10px color-mix(in srgb, var(--accent) 70%, transparent);
  animation: chat-float 5s ease-in-out infinite;
}

.chat-hero-orb svg { width: 28px; height: 28px; }

.chat-hero h3 {
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  font-weight: 650;
  letter-spacing: -0.025em;
  line-height: 1.15;
  background: linear-gradient(120deg, var(--text) 30%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.chat-hero p {
  margin: 0;
  max-width: 440px;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

.chat-hero-link {
  margin-top: 10px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
}

.chat-hero-link:hover { text-decoration: underline; }

.chat-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 26px;
}

.chat-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 2px;
  align-items: start;
  text-align: left;
  padding: 14px 16px;
  font: inherit;
  color: var(--text);
  background: color-mix(in srgb, var(--bg-3) 75%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 14px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: transform 220ms var(--chat-ease), border-color 200ms, box-shadow 220ms, background 200ms;
  animation: chat-rise 520ms var(--chat-ease) both;
  animation-delay: calc(120ms + var(--i, 0) * 60ms);
}

.chat-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: var(--shadow-md);
  background: var(--bg-3);
}

.chat-card:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

.chat-card-icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--accent-tint);
  color: var(--accent);
}

.chat-card-icon svg { width: 17px; height: 17px; }
.chat-card-title { font-size: 0.86rem; font-weight: 650; }
.chat-card-text { font-size: 0.8rem; color: var(--muted); line-height: 1.45; }

/* ── composer ── */
.chat-composer-wrap {
  padding: 8px 20px 14px;
  background: linear-gradient(to bottom, transparent, var(--bg-3) 30%);
}

.chat-composer {
  max-width: var(--chat-col);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 12px 10px 16px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow-md);
  transition: border-color 200ms, box-shadow 200ms;
}

.chat-composer:focus-within {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: var(--shadow-md), 0 0 0 4px var(--ring);
}

.chat-composer textarea {
  width: 100%;
  min-height: 26px;
  max-height: 220px;
  resize: none;
  overflow-y: hidden;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.55;
  padding: 2px 0;
}

.chat-composer textarea::placeholder { color: var(--muted-2); }
.chat-composer textarea:disabled { cursor: not-allowed; }

.chat-composer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.chat-kb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 0.74rem;
  color: var(--muted-2);
  white-space: nowrap;
  overflow: hidden;
}

.chat-kb svg { width: 13px; height: 13px; flex: none; }
.chat-kb-sep { opacity: 0.6; }

.chat-kb-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 18%, transparent);
}

.chat-kb-dot.is-off {
  background: var(--warning);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning) 18%, transparent);
}

.chat-send {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--text);
  color: var(--bg-3);
  cursor: pointer;
  transition: transform 160ms var(--chat-ease), background 200ms, opacity 200ms;
}

.chat-send svg { width: 18px; height: 18px; transition: opacity 150ms; }
.chat-send:not(:disabled):hover { transform: scale(1.06); background: var(--accent); color: var(--accent-contrast); }
.chat-send:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.chat-send:disabled { background: var(--bg-4); color: var(--muted-2); cursor: default; }

.chat-send.is-loading svg { opacity: 0; }
.chat-send.is-loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: chat-spin 0.8s linear infinite;
}

.chat-disclaimer {
  max-width: var(--chat-col);
  margin: 8px auto 0;
  text-align: center;
  font-size: 0.72rem;
  color: var(--muted-2);
}

.chat-disclaimer kbd {
  font-family: inherit;
  font-size: 0.68rem;
  padding: 1px 5px;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--bg-2);
}

/* ── motion ── */
@keyframes chat-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes chat-spin { to { transform: rotate(360deg); } }

@keyframes chat-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -150% 0; }
}

@keyframes chat-dot {
  0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-2px); }
}

@keyframes chat-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  .chat-view *, .chat-view *::before, .chat-view *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── small screens ── */
@media (max-width: 720px) {
  .chat-shell { min-height: 460px; border-radius: var(--radius-md); }
  .chat-topbar { flex-wrap: wrap; padding: 10px 12px; }
  .chat-mode-switch { order: 3; width: 100%; }
  .chat-mode-btn { flex: 1; justify-content: center; }
  .chat-icon-btn span { display: none; }
  .chat-thread { padding: 20px 14px 8px; }
  .chat-cards { grid-template-columns: 1fr; }
  .chat-bubble { max-width: 90%; }
  .chat-composer-wrap { padding: 6px 10px 10px; }
  .chat-disclaimer kbd, .chat-disclaimer { display: none; }
}

/* ── chat: layout with history sidebar ── */
.chat-main {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.chat-sidebar {
  flex: none;
  width: 0;
  overflow: hidden;
  background: color-mix(in srgb, var(--bg-2) 70%, var(--bg-3));
  border-right: 1px solid transparent;
  transition: width 300ms var(--chat-ease), border-color 300ms;
}

.chat-shell.sidebar-open .chat-sidebar {
  width: 268px;
  border-right-color: color-mix(in srgb, var(--border) 70%, transparent);
}

.chat-sidebar-inner {
  width: 268px;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 12px 10px 10px;
  gap: 8px;
}

.chat-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px 0 8px;
  min-height: 34px;
}

.chat-sidebar-title {
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.chat-shell.sidebar-open .chat-sidebar-toggle { display: none; }

.chat-icon-only { padding: 7px; }

.chat-new-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 12px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 160ms, box-shadow 160ms, transform 160ms var(--chat-ease);
}

.chat-new-btn svg { width: 16px; height: 16px; color: var(--accent); }
.chat-new-btn:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: var(--shadow-sm); }
.chat-new-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }

.chat-history {
  flex: 1;
  overflow-y: auto;
  margin: 4px -4px 0;
  padding: 0 4px 8px;
}

.chat-history-group {
  padding: 14px 10px 6px;
  font-size: 0.7rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-2);
}

.chat-history-item {
  position: relative;
  display: grid;
  gap: 1px;
  padding: 8px 34px 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 140ms;
}

.chat-history-item:hover { background: var(--hover); }
.chat-history-item:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.chat-history-item.active { background: var(--accent-tint-2); }
.chat-history-item.active .chat-history-title { color: var(--accent-strong); }

.chat-history-title {
  font-size: 0.85rem;
  font-weight: 550;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-history-meta {
  font-size: 0.72rem;
  color: var(--muted-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-history-delete {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted-2);
  cursor: pointer;
  opacity: 0;
  transition: opacity 140ms, background 140ms, color 140ms;
}

.chat-history-delete svg { width: 15px; height: 15px; }
.chat-history-item:hover .chat-history-delete,
.chat-history-item:focus-within .chat-history-delete { opacity: 1; }
.chat-history-delete:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }

.chat-history-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 36px 16px;
  text-align: center;
  color: var(--muted-2);
  font-size: 0.8rem;
}

.chat-history-empty svg { width: 22px; height: 22px; opacity: 0.7; }
.chat-history-empty p { margin: 0; }

.chat-scrim { display: none; }

/* ── chat: top bar extras ── */
.chat-brand-text p {
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-top-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.chat-spend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  font-size: 0.78rem;
  color: var(--text-2);
  background: color-mix(in srgb, var(--warning) 9%, var(--bg-3));
  border: 1px solid color-mix(in srgb, var(--warning) 28%, var(--border));
  border-radius: 999px;
  cursor: help;
}

.chat-spend svg { width: 14px; height: 14px; color: var(--warning); }
.chat-spend-value { font-weight: 650; font-variant-numeric: tabular-nums; }
.chat-spend-label { color: var(--muted-2); }
.chat-spend:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }

/* ── chat: composer extras (model picker, estimate) ── */
.chat-composer-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.chat-composer-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

.chat-model-picker { position: relative; flex: none; }

.chat-model-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px 5px 10px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-2);
  background: var(--bg-2);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 999px;
  cursor: pointer;
  transition: background 150ms, border-color 150ms;
}

.chat-model-btn svg { width: 14px; height: 14px; color: var(--muted-2); transition: transform 200ms var(--chat-ease); }
.chat-model-btn:hover { background: var(--hover-strong); border-color: var(--border); }
.chat-model-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.chat-model-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }

.chat-model-menu {
  position: absolute;
  left: -6px;
  bottom: calc(100% + 12px);
  z-index: 20;
  width: 280px;
  padding: 6px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-pop);
  animation: chat-pop 180ms var(--chat-ease) both;
}

.chat-model-menu-head {
  padding: 6px 10px 6px;
  font-size: 0.7rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-2);
}

.chat-model-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  font: inherit;
  text-align: left;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}

.chat-model-option:hover { background: var(--hover); }
.chat-model-option:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.chat-model-option.selected { background: var(--accent-tint); }
.chat-model-option-main { display: grid; gap: 2px; min-width: 0; }

.chat-model-option-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.86rem;
  font-weight: 600;
}

.chat-model-option-price { font-size: 0.74rem; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.chat-model-check { width: 16px; height: 16px; flex: none; color: var(--accent); }
.chat-model-check svg { width: 16px; height: 16px; }

.chat-model-badge {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--accent-tint-2);
  color: var(--accent-strong);
}

.chat-kb-cost { color: var(--text-2); font-weight: 600; font-variant-numeric: tabular-nums; }

.chat-estimate {
  display: inline-flex;
  align-items: center;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
  cursor: help;
}

/* per-answer cost tag */
.chat-cost {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 4px;
  padding: 3px 9px 3px 7px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-2);
  background: color-mix(in srgb, var(--warning) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--warning) 22%, transparent);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  cursor: help;
}

.chat-cost svg { width: 13px; height: 13px; color: var(--warning); }
.chat-cost-tokens { color: var(--muted-2); font-weight: 500; }
.chat-cost:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }

/* ── chat: richer answer typography ── */
.chat-markdown h3 {
  font-size: 0.98rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin: 0.9em 0 0.25em;
}

.chat-markdown h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  font-weight: 650;
  margin: 0.85em 0 0.2em;
}

.chat-markdown h4::before { content: none; }

.chat-markdown h5 { font-size: 0.88rem; font-weight: 650; margin: 0.7em 0 0.2em; }
.chat-markdown > h3:first-child,
.chat-markdown > h4:first-child,
.chat-markdown > h5:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.chat-markdown p + h4 { margin-top: 0.85em; }

.chat-markdown li > ul,
.chat-markdown li > ol { margin: 0.3em 0 0.4em; }
.chat-markdown ol { padding-left: 1.5em; }
.chat-markdown ol > li::marker { color: var(--accent); font-weight: 650; }
.chat-markdown ol > li { padding-left: 0.3em; }
.chat-markdown ol > li + li { margin-top: 0.25em; }
.chat-markdown li > p { margin: 0.2em 0; }

.chat-markdown a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

.chat-markdown blockquote {
  margin: 0.6em 0;
  padding: 6px 12px;
  border-left: 3px solid var(--accent);
  background: var(--accent-tint);
  border-radius: 0 8px 8px 0;
  color: var(--text-2);
}

.chat-markdown pre {
  margin: 0.6em 0 0.9em;
  padding: 12px 14px;
  overflow-x: auto;
  background: var(--bg-2);
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  border-radius: 10px;
  font-size: 0.82rem;
  line-height: 1.5;
}

.chat-markdown pre code { background: none; border: 0; padding: 0; }

.chat-table-wrap {
  margin: 0.6em 0 0.9em;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.chat-markdown table { width: 100%; border-collapse: collapse; font-size: 0.86rem; line-height: 1.45; }
.chat-markdown th {
  text-align: left;
  font-weight: 650;
  background: var(--bg-2);
  color: var(--text-2);
  white-space: nowrap;
}
.chat-markdown th,
.chat-markdown td { padding: 8px 12px; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); vertical-align: top; }
.chat-markdown tbody tr:last-child td { border-bottom: 0; }
.chat-markdown tbody tr:hover td { background: var(--hover); }

@keyframes chat-pop {
  from { opacity: 0; transform: translateY(4px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

/* ── chat: small screens (sidebar becomes a drawer) ── */
@media (max-width: 900px) {
  .chat-sidebar {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 30;
    box-shadow: var(--shadow-pop);
  }
  .chat-shell.sidebar-open .chat-scrim {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 25;
    background: color-mix(in srgb, #000 28%, transparent);
    animation: chat-rise 200ms both;
  }
  .chat-shell.sidebar-open .chat-sidebar-toggle { display: inline-flex; }
}

/* phones: Ino fills the screen. The cockpit header hides (the menu button in Ino's header opens its
   navigation sheet), Ino's header is one slim row, and the text field gets more room. */
.chat-nav-btn { display: none; }
@media (max-width: 720px) {
  body.chat-full .topbar:not(.is-nav-open) { display: none; }
  body.chat-full .app-shell { padding: 0; }
  body.chat-full .chat-shell {
    height: 100dvh;
    min-height: 0;
    border: 0;
    border-radius: 0;
  }
  body.chat-full .chat-nav-btn { display: inline-flex; }
  body.chat-full .chat-topbar { flex-wrap: nowrap; gap: 6px; padding: 6px 8px; }
  body.chat-full .chat-brand { min-width: 0; flex: 1; gap: 6px; }
  body.chat-full .chat-brand .chat-orb { display: none; }
  body.chat-full .chat-brand-text { min-width: 0; }
  body.chat-full .chat-brand-text h2 { font-size: 0.95rem; }
  body.chat-full .chat-brand-text p { max-width: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  body.chat-full .chat-user-chip { display: none !important; }
  body.chat-full .chat-top-actions { flex: none; gap: 2px; }
  body.chat-full .chat-thread { padding: 12px 10px 6px; }
  body.chat-full .chat-composer textarea { min-height: 72px; font-size: 1rem; }
  /* phone reading size: answers, bubbles and drafts at 14px, headings one step above */
  body.chat-full .chat-markdown { font-size: 0.875rem; line-height: 1.5; }
  body.chat-full .chat-markdown h3 { font-size: 0.95rem; }
  body.chat-full .chat-markdown h4 { font-size: 0.9rem; }
  body.chat-full .chat-bubble, body.chat-full .chat-draft-body { font-size: 0.875rem; }
  body.chat-full .chat-draft-body { line-height: 1.6; }
  body.chat-full .chat-hero h3 { font-size: 1.25rem; }
  body.chat-full .chat-hero p { font-size: 0.85rem; }
  /* no overflow: the token count stays in the cost's tooltip, the chat's cost in the header spend */
  body.chat-full .chat-cost-tokens, body.chat-full .chat-kb-cost, body.chat-full .chat-kb-sep { display: none; }
  body.chat-full .chat-actions { flex-wrap: wrap; }
}

@media (max-width: 720px) {
  .chat-spend-label, .chat-estimate { display: none; }
  .chat-brand-text p { max-width: 150px; }
  .chat-kb > span:not(.chat-kb-dot):not(.chat-kb-cost):not(.chat-kb-sep) { display: none; }
}

/* ── chat: client-facing safety review ──
   Inpro design system inside the chat: status by soft fill (no outlines), sentence case,
   44 px controls, violet only on the main action, visible focus. */
#chatView {
  --ino-accent: #7A51EF;
  --ino-accent-hover: #6A3FE6;
  --ino-tone: #F1F4FF;
  --ino-tone-2: #E8EDFF;
  --ino-muted: #5D6270;
  --ino-field-line: #C5CBDA;
  --ino-alert: #FFF1DC;
  --ino-alert-2: #FFDFA8;
  --ino-alert-ink: #7A4100;
  --ino-ok: #E2F4E8;
  --ino-ok-ink: #12602F;
}
[data-theme="dark"] #chatView {
  --ino-tone: #1D2030;
  --ino-tone-2: #2A2F45;
  --ino-muted: #A9AFBD;
  --ino-field-line: #40465B;
  --ino-alert: #2F2616;
  --ino-alert-2: #4E3B17;
  --ino-alert-ink: #FFC46B;
  --ino-ok: #16291E;
  --ino-ok-ink: #7FDCA0;
}

.chat-avatar.is-warning {
  background: var(--ino-alert);
  color: var(--ino-alert-ink);
}

.chat-review {
  display: grid;
  gap: 14px;
  padding: 16px;
  background: var(--ino-alert);
  border-radius: 14px;
}

.chat-review-head { display: grid; gap: 2px; }
.chat-review-head strong { font-size: 0.92rem; font-weight: 650; }
.chat-review-head span { font-size: 0.84rem; color: var(--ino-alert-ink); }

.chat-review-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.chat-review-list li {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  font-size: 0.82rem;
}

.chat-review-cat { font-weight: 600; color: var(--text); padding-top: 3px; }
.chat-review-items { display: flex; flex-wrap: wrap; gap: 4px; }

.chat-review-item {
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--ino-alert-2);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.chat-review-skeleton { display: grid; gap: 6px; padding: 2px 0; }
.chat-review-skeleton i {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: var(--ino-alert-2);
}
.chat-review-skeleton i:nth-child(1) { width: 92%; }
.chat-review-skeleton i:nth-child(2) { width: 78%; }
.chat-review-skeleton i:nth-child(3) { width: 54%; }

.chat-review-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.chat-review-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  background: var(--bg-3);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 160ms cubic-bezier(0.22, 1, 0.36, 1), color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.chat-review-btn svg { width: 15px; height: 15px; }
.chat-review-btn:hover:not(:disabled) { background: var(--ino-tone-2); }
.chat-review-btn:focus-visible { outline: 2px solid var(--ino-accent); outline-offset: 2px; }
.chat-review-btn:disabled { opacity: 0.6; cursor: default; }
.chat-review-btn.is-primary { background: var(--ino-accent); color: #fff; }
.chat-review-btn.is-primary:hover:not(:disabled) { background: var(--ino-accent-hover); }

.chat-review-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding: 4px 10px 4px 8px;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 6px;
}

.chat-review-badge svg { width: 14px; height: 14px; }
.chat-review-badge.is-approved {
  color: var(--text);
  background: var(--ino-tone);
  cursor: help;
}
.chat-review-badge.is-clear {
  color: var(--ino-ok-ink);
  background: var(--ino-ok);
}

@media (max-width: 720px) {
  .chat-review-list li { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 480px) {
  /* phones: the approval choices stack as full-width buttons */
  .chat-review-actions .chat-review-btn { flex: 1 1 100%; justify-content: center; }
}

/* ── chat: task brief, pinned goal, done state ── */
.chat-goal {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-3));
  font-size: 0.84rem;
  animation: chat-rise 300ms var(--chat-ease) both;
}

.chat-goal.is-done { background: color-mix(in srgb, var(--success) 6%, var(--bg-3)); }

.chat-goal-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--accent-tint-2);
  color: var(--accent);
}

.chat-goal-icon svg { width: 15px; height: 15px; }

.chat-goal-text {
  flex: 1;
  min-width: 0;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--text-2);
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-goal-text strong {
  margin-right: 8px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-strong);
}

.chat-goal.is-expanded { align-items: flex-start; }
.chat-goal.is-expanded .chat-goal-text { white-space: pre-wrap; overflow: visible; line-height: 1.5; }
.chat-goal-text:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 4px; }

.chat-goal-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-2);
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: background 150ms, border-color 150ms, color 150ms;
}

.chat-goal-btn svg { width: 14px; height: 14px; }
.chat-goal-btn:hover { border-color: var(--border-2); background: var(--hover); color: var(--text); }
.chat-goal-btn.is-primary:hover { border-color: var(--success); color: var(--success); }
.chat-goal-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }

.chat-goal-done {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--success);
}

.chat-goal-done svg { width: 14px; height: 14px; }

.chat-hero-sub {
  margin-top: 4px !important;
  font-size: 0.84rem !important;
  color: var(--muted-2) !important;
}

.chat-bubble.is-brief {
  display: grid;
  gap: 4px;
  background: color-mix(in srgb, var(--accent) 9%, var(--bg-2));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}

.chat-brief-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-strong);
}

.chat-brief-label svg { width: 13px; height: 13px; }

.chat-hint {
  max-width: var(--chat-col);
  margin: 8px auto 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--warning);
  text-align: center;
}
.chat-hint.is-tip { font-weight: 500; color: var(--muted); }

/* checklist items in answers ("- [ ] step") */
.chat-markdown li:has(> .chat-check) { list-style: none; margin-left: -1.25em; }
.chat-check {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  vertical-align: -3px;
  border: 1.5px solid var(--border-2);
  border-radius: 5px;
  color: var(--accent-contrast);
}
.chat-check.is-done { background: var(--accent); border-color: var(--accent); }
.chat-check svg { width: 12px; height: 12px; }

.chat-history-item.is-done .chat-history-title { color: var(--muted); }
.chat-history-done {
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  margin-right: 6px;
  vertical-align: -2px;
  border-radius: 50%;
  background: var(--success);
  color: #fff;
}
.chat-history-done svg { width: 10px; height: 10px; }

.chat-hero-eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.01em;
}

/* chat title truncates inside its own column instead of running under the mode switch */
.chat-brand-text { min-width: 0; overflow: hidden; }
.chat-brand-text p { max-width: 100%; }
.chat-brand { flex: 1 1 auto; }

/* ── chat: streaming, held drafts, internal flag, answer length toggle ── */
.chat-caret {
  display: inline-block;
  width: 7px;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: -0.15em;
  border-radius: 2px;
  background: var(--accent);
  animation: chat-caret 1s steps(2, start) infinite;
}

/* the caret sits right after the text when it directly follows a paragraph
   (top level or inside a draft card) */
.chat-markdown.is-streaming p:has(+ .chat-caret:last-child) { display: inline; }

@keyframes chat-caret { to { visibility: hidden; } }

.chat-stream-hold {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 14px;
  font-size: 0.85rem;
  color: var(--text);
  background: var(--ino-alert);
  border-radius: 12px;
}

.chat-stream-hold svg { width: 16px; height: 16px; color: var(--ino-alert-ink); }
.chat-stream-hold em { font-style: normal; font-size: 0.8rem; color: var(--ino-alert-ink); }
.chat-stream-status { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 0.82rem; }

.chat-internal-flag {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 14px;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--ino-tone);
  border-radius: 10px;
}

.chat-internal-icon { flex: none; display: grid; place-items: center; width: 20px; height: 22px; color: var(--ino-muted); }
.chat-internal-icon svg { width: 15px; height: 15px; }
.chat-internal-flag strong { color: var(--text); font-weight: 600; }

.chat-internal-chip {
  display: inline-block;
  margin: 0 4px 0 0;
  padding: 0 7px;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 6px;
  background: var(--ino-tone-2);
  cursor: help;
}

.chat-style-toggle {
  flex: none;
  display: inline-flex;
  padding: 2px;
  background: var(--bg-2);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 999px;
}

.chat-style-toggle button {
  padding: 4px 10px;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background 150ms, color 150ms;
}

.chat-style-toggle button:hover { color: var(--text); }
.chat-style-toggle button.active { background: var(--bg-3); color: var(--text); box-shadow: var(--shadow-sm); }
.chat-style-toggle button:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }

@media (max-width: 720px) {
  .chat-style-toggle button { padding: 4px 8px; }
}

/* ── soothing ambient page background (from Ino, now on every page) ── */
.chat-ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 900ms ease;
  background:
    radial-gradient(1100px 700px at 8% -8%, color-mix(in srgb, var(--accent-bright) 16%, transparent), transparent 62%),
    radial-gradient(900px 700px at 108% 6%, color-mix(in srgb, var(--tone-blue) 13%, transparent), transparent 60%),
    radial-gradient(1000px 800px at 50% 112%, color-mix(in srgb, var(--tone-violet) 12%, transparent), transparent 62%),
    var(--bg);
}

body.chat-ambient-on { background: transparent; }
body.chat-ambient-on .chat-ambient { opacity: 1; }

/* three slow, heavily blurred light blobs drifting on 40-60s loops */
.chat-ambient i {
  position: absolute;
  width: 46vmax;
  height: 46vmax;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.38;
  will-change: transform;
}

.chat-ambient i:nth-child(1) {
  top: -14vmax;
  left: -8vmax;
  background: color-mix(in srgb, var(--accent-bright) 55%, transparent);
  animation: chat-drift-a 48s ease-in-out infinite alternate;
}

.chat-ambient i:nth-child(2) {
  top: 18vh;
  right: -16vmax;
  background: color-mix(in srgb, var(--tone-blue) 45%, transparent);
  animation: chat-drift-b 60s ease-in-out infinite alternate;
}

.chat-ambient i:nth-child(3) {
  bottom: -22vmax;
  left: 22vw;
  background: color-mix(in srgb, var(--tone-violet) 40%, transparent);
  animation: chat-drift-c 54s ease-in-out infinite alternate;
}

@keyframes chat-drift-a { to { transform: translate(14vw, 10vh) scale(1.12); } }
@keyframes chat-drift-b { to { transform: translate(-16vw, 8vh) scale(0.92); } }
@keyframes chat-drift-c { to { transform: translate(-10vw, -12vh) scale(1.08); } }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chat-ambient i { opacity: 0.22; }
}
:root[data-theme="dark"] .chat-ambient i { opacity: 0.22; }

@media (prefers-reduced-motion: reduce) {
  .chat-ambient i { animation: none; }
}

/* the chat window floats on the ambient background */
body.chat-ambient-on .chat-shell {
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--border) 60%, transparent);
}

body.chat-ambient-on .sidebar.glass-panel {
  background: color-mix(in srgb, var(--bg-3) 80%, transparent);
  backdrop-filter: blur(10px);
}

/* ── chat: signed-in user ── */
.chat-user-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px 3px 3px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-2);
  background: var(--bg-2);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 999px;
  cursor: default;
}

.chat-user-avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent-contrast);
  background: linear-gradient(135deg, var(--tone-slate), var(--text-2));
}

.chat-row-user { flex-direction: column; align-items: flex-end; gap: 4px; }

.chat-user-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted-2);
}

.chat-user-meta .chat-user-avatar { width: 18px; height: 18px; font-size: 0.55rem; }

/* ── chat: reasoning picker in the model menu ── */
.chat-model-reasoning { color: var(--muted-2); font-weight: 500; }

.chat-reasoning-options {
  display: flex;
  gap: 4px;
  padding: 0 6px;
}

.chat-reasoning-option {
  flex: 1;
  padding: 6px 4px;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--bg-2);
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: background 140ms, color 140ms, border-color 140ms;
}

.chat-reasoning-option:hover { color: var(--text); }
.chat-reasoning-option.selected { color: var(--accent-strong); background: var(--accent-tint); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.chat-reasoning-option:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }

.chat-reasoning-hint {
  margin: 6px 10px 8px;
  font-size: 0.72rem;
  color: var(--muted-2);
}

@media (max-width: 720px) {
  .chat-model-reasoning, .chat-user-name { display: none; }
  .chat-user-chip { padding-right: 3px; }
}

/* ── chat: approval after streaming, highlighted sensitive info, general knowledge ── */
/* sensitive info next to an outside-facing draft: two compact lines */
.chat-approval {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--ino-alert);
  border-radius: 10px;
}

.chat-approval-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 0.82rem; }
.chat-approval-head strong { font-weight: 650; margin-right: 2px; }
.chat-approval-icon { display: inline-flex; color: var(--ino-alert-ink); }
.chat-approval-icon svg { width: 15px; height: 15px; }
.chat-approval-group { display: inline-flex; align-items: center; gap: 4px; }
.chat-approval-cat { color: var(--ino-alert-ink); }
.chat-approval-item { padding: 1px 6px; border-radius: 5px; background: var(--ino-alert-2); color: var(--text); }

.chat-approval-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chat-approval-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  background: var(--bg-3);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.chat-approval-btn svg { width: 14px; height: 14px; }
.chat-approval-btn:hover:not(:disabled) { background: var(--ino-tone-2); }
.chat-approval-btn:focus-visible { outline: 2px solid var(--ino-accent); outline-offset: 2px; }
.chat-approval-btn:disabled { opacity: 0.6; cursor: default; }
.chat-approval-btn.is-primary { background: var(--ino-accent); color: #fff; }
.chat-approval-btn.is-primary:hover:not(:disabled) { background: var(--ino-accent-hover); }
.chat-approval-other { display: flex; flex: 1 1 220px; min-width: 0; gap: 6px; }
.chat-approval-other input {
  flex: 1;
  min-width: 0;
  height: 32px;
  padding: 0 10px;
  font: inherit;
  font-size: 0.8rem;
  color: var(--text);
  background: var(--bg-3);
  border: 1px solid var(--ino-field-line);
  border-radius: 8px;
  outline: 0;
}
.chat-approval-other input:focus-visible { outline: 2px solid var(--ino-accent); outline-offset: 2px; }
.chat-approval-other input::placeholder { color: var(--ino-muted); }

/* Book search: every matched word, in rows and candidate panels */
mark.book-hit {
  background: #fde68a;
  color: #1f2937;
  padding: 0 1px;
  border-radius: 2px;
  font-weight: 600;
}
[data-theme="dark"] mark.book-hit { background: #facc15; color: #111827; }

mark.chat-sensitive {
  color: inherit;
  padding: 0 2px;
  border-radius: 3px;
  cursor: help;
}
mark.chat-sensitive.is-client { background: var(--ino-alert-2); }
mark.chat-sensitive.is-internal { background: var(--ino-tone-2); }
mark.chat-sensitive.is-unverified { background: var(--ino-alert-2); }
mark.chat-sensitive.is-approved { background: var(--ino-alert); }

.chat-action:disabled { opacity: 0.45; cursor: not-allowed; }
.chat-action:disabled:hover { background: transparent; color: var(--muted-2); }

.chat-markdown .chat-general {
  padding: 8px 12px;
  border-left: 3px solid var(--tone-blue);
  background: color-mix(in srgb, var(--tone-blue) 7%, transparent);
  border-radius: 0 8px 8px 0;
}
.chat-markdown li.chat-general { list-style: none; margin-left: -1.25em; }
.chat-markdown .chat-general > strong:first-child { color: var(--tone-blue); }

/* email check verdict and "Before I draft this" questions */
.chat-markdown .chat-verdict {
  --verdict: var(--tone-amber);
  padding: 8px 12px;
  border-left: 3px solid var(--verdict);
  background: color-mix(in srgb, var(--verdict) 9%, transparent);
  border-radius: 0 8px 8px 0;
}
.chat-markdown .chat-verdict.is-ok { --verdict: var(--tone-green); }
.chat-markdown .chat-verdict.is-bad { --verdict: var(--tone-rose); }
.chat-markdown .chat-verdict > strong:first-child { color: var(--verdict); }
.chat-markdown .chat-ask-first > strong:first-child { color: var(--accent-strong); }

.chat-source.is-general { color: var(--tone-blue); border-color: color-mix(in srgb, var(--tone-blue) 35%, transparent); }
.chat-source.is-general svg { color: var(--tone-blue); }

/* ── chat: drafts as a clean message card ── */
.chat-draft {
  margin: 12px 0 12px;
  padding-bottom: 6px;
  background: var(--ino-tone);
  border-radius: 14px;
  overflow: hidden;
}

.chat-draft-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 6px 4px 14px;
}

.chat-draft-kind {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
}

.chat-draft-kind svg { width: 16px; height: 16px; color: var(--ino-muted); }

.chat-draft-copy {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  background: var(--bg-3);
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  transition: background-color 160ms cubic-bezier(0.22, 1, 0.36, 1), color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.chat-draft-copy svg { width: 13px; height: 13px; }
.chat-draft-copy:hover:not(:disabled) { background: var(--ino-tone-2); }
.chat-draft-copy:focus-visible { outline: 2px solid var(--ino-accent); outline-offset: 2px; }
.chat-draft-copy:disabled { opacity: 0.5; cursor: not-allowed; }
.chat-draft-copy.is-done { color: var(--ino-ok-ink); background: var(--ino-ok); }

.chat-draft-subject {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 8px;
  padding: 14px 16px 0;
  font-size: 0.95rem;
  background: var(--bg-3);
  border-radius: 12px 12px 0 0;
}

.chat-draft-subject span {
  flex: none;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ino-muted);
}

.chat-draft-subject strong { font-weight: 650; color: var(--text); }

.chat-draft-body {
  margin: 0 8px;
  padding: 14px 16px 18px;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg-3);
  border-radius: 12px;
}

.chat-draft-subject + .chat-draft-body {
  padding-top: 12px;
  border-radius: 0 0 12px 12px;
}

.chat-draft-body p { margin: 0 0 0.85em; }
.chat-draft-body > :last-child { margin-bottom: 0; }
/* headings inside a draft stay plain (no section divider) */
.chat-markdown .chat-draft-body h4 { border-top: 0; padding-top: 0; margin-top: 0.6em; }
.chat-markdown .chat-draft-body h4::before { display: none; }

/* tone rewrite buttons at the bottom of the latest draft */
.chat-draft-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 6px 0 14px;
}

.chat-draft-foot > span {
  margin-right: 2px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ino-muted);
}

@media (max-width: 720px) {
  .chat-draft-subject, .chat-draft-body { margin: 0 6px; padding-left: 12px; padding-right: 12px; }
  .chat-draft-head, .chat-draft-foot { padding-left: 12px; }
}

/* While streaming, the answer is re-rendered on every update: entrance animations
   would restart each time (flicker), so streamed content appears without them. */
.chat-markdown.is-streaming .chat-draft,
.chat-markdown.is-streaming .chat-draft * { animation: none; }

/* "### About <company> (general knowledge)" section */
.chat-markdown h4.chat-general-heading { border-top-color: color-mix(in srgb, var(--tone-blue) 35%, transparent); }
.chat-markdown h4.chat-general-heading::before { background: var(--tone-blue); }
.chat-markdown h4.chat-general-heading + ul { border-left: 3px solid var(--tone-blue); padding-left: 1.6em; margin-left: 0.1em; }

/* ── Ino: cockpit data steps and record links ─────────────────────── */
.chat-steps-live {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin: 2px 0 10px;
}

.chat-step-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 4px 11px 4px 8px;
  font-size: 0.78rem;
  color: var(--muted);
  background: var(--bg-2);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 999px;
}

.chat-step-chip > svg { flex: none; width: 13px; height: 13px; color: var(--accent); }
.chat-step-chip.is-running > svg { opacity: 0.35; }
.chat-step-chip.is-error > svg { color: var(--muted-2); }
.chat-step-label { color: var(--text); font-weight: 600; white-space: nowrap; }
.chat-step-detail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.chat-step-count { white-space: nowrap; color: var(--muted-2); }

.chat-steps {
  margin-top: 10px;
  font-size: 0.78rem;
  color: var(--muted);
}

.chat-steps summary {
  cursor: pointer;
  width: fit-content;
  color: var(--muted-2);
  list-style-position: inside;
}

.chat-steps summary:hover { color: var(--text); }
.chat-steps ol { margin: 6px 0 0 18px; padding: 0; display: grid; gap: 3px; }
.chat-steps li span { color: var(--muted); }
.chat-steps li em { font-style: normal; color: var(--muted-2); }

.chat-verify {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 0.78rem;
  color: var(--muted-2);
}

.chat-verify svg { flex: none; width: 13px; height: 13px; color: var(--accent); }
.chat-verify.is-warning { color: var(--ino-alert-ink); }
.chat-verify.is-warning svg { color: currentColor; }

.chat-markdown a.chat-record {
  display: inline;
  padding: 0 6px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border-radius: 6px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.chat-markdown a.chat-record:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.chat-markdown h3 a.chat-record { padding: 0 4px; }

.chat-markdown a.chat-view-link {
  font-weight: 600;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.chat-action.chat-feedback { padding-inline: 7px; }
.chat-action.chat-feedback.is-active { color: var(--accent); }

.chat-history-owner { color: var(--accent); font-weight: 600; }

/* ── Ino: the chatbot's round emblem (a small friendly robot face) ───────── */
.ino-emblem,
.chat-avatar:not(.is-error):not(.is-warning) {
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, color-mix(in srgb, #fff 26%, var(--accent-bright)) 0%, var(--accent) 62%, color-mix(in srgb, var(--accent) 70%, var(--tone-blue)) 100%);
  overflow: hidden;
}
.chat-orb.ino-emblem { border-radius: 50%; }
.chat-hero-orb.ino-emblem { width: 64px; height: 64px; border-radius: 50%; }
.ino-emblem svg.ino-face,
.chat-avatar svg.ino-face { width: 100%; height: 100%; display: block; }
.ino-face .ino-eyes { transform-box: view-box; transform-origin: 16px 15.6px; animation: ino-blink 5.5s infinite; }
.ino-face .ino-bulb { transform-box: fill-box; transform-origin: center; }
.chat-avatar.is-thinking .ino-bulb { animation: ino-glow 1.1s ease-in-out infinite; }
@keyframes ino-blink {
  0%, 93%, 100% { transform: scaleY(1); }
  95.5% { transform: scaleY(0.12); }
}
@keyframes ino-glow {
  0%, 100% { transform: scale(1); fill: #fde68a; }
  50% { transform: scale(1.3); fill: #fbbf24; }
}
.ino-nav-btn { display: inline-flex; align-items: center; gap: 6px; }
.ino-emblem-nav { display: inline-block; flex: none; width: 20px; height: 20px; margin-left: -3px; box-shadow: 0 2px 6px -2px color-mix(in srgb, var(--accent) 70%, transparent); }
.ino-nav-btn:hover .ino-emblem-nav .ino-eyes { animation: ino-blink 0.6s 1; }

/* ── Ino: bar charts for "label | number" tables ─────────────────────────── */
.chat-chart {
  margin: 0.6em 0 0.9em;
  padding: 12px 14px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-2) 45%, transparent);
}
.chat-chart figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 0.86rem;
  font-weight: 650;
  color: var(--text);
}
.chat-chart-by { font-weight: 450; color: var(--text-2); }
.chat-chart-toggle {
  flex: none;
  padding: 2px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 550;
  cursor: pointer;
}
.chat-chart-toggle:hover { background: var(--hover); color: var(--text); }
.chat-bars { display: grid; gap: 4px; }
.chat-bar-row {
  display: grid;
  grid-template-columns: minmax(90px, 34%) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 3px 4px;
  border-radius: 6px;
  font-size: 0.84rem;
  line-height: 1.3;
}
.chat-bar-row:hover { background: var(--hover); }
.chat-bar-label { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-bar-track { display: flex; align-items: center; gap: 8px; min-width: 0; }
.chat-bar-fill {
  flex: none;
  height: 14px;
  border-radius: 0 4px 4px 0;
  background: var(--accent);
  transform-origin: left center;
  animation: chat-bar-grow 650ms cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
.chat-bar-row:hover .chat-bar-fill { background: var(--accent-bright); }
.chat-bar-value { flex: none; color: var(--text-2); font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.chat-markdown.is-streaming .chat-bar-fill { animation: none; }
.chat-chart-table { display: none; }
.chat-chart.show-table .chat-bars { display: none; }
.chat-chart.show-table .chat-chart-table { display: block; }
.chat-chart .chat-table-wrap { margin: 0; }
@keyframes chat-bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 600px) {
  .chat-bar-row { grid-template-columns: minmax(70px, 40%) minmax(0, 1fr); gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .chat-bar-fill, .ino-face .ino-eyes, .chat-avatar.is-thinking .ino-bulb { animation: none; }
}

/* ── Client search bar (Client and Fit views) ─────────────────────────────── */
.client-picker {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0.85rem 1.15rem;
  margin-bottom: var(--space-4);
}
.client-picker-label {
  display: grid;
  gap: 1px;
  flex: none;
  cursor: pointer;
}
.client-picker-label .eyebrow { margin: 0; }
.client-picker-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}
.client-picker .org-search {
  flex: 1;
  max-width: 560px;
}
@media (max-width: 700px) {
  .client-picker { flex-direction: column; align-items: stretch; gap: var(--space-2); }
  .client-picker .org-search { max-width: none; }
}

/* ── Grouped top navigation (Core, Find info, Admin) ─────────────────────── */
.nav-group { position: relative; display: inline-flex; flex: none; }
.nav-group.hidden { display: none; }
.mode-switch .nav-group-btn { display: inline-flex; align-items: center; gap: 5px; }
.nav-group-current { display: none; }
.nav-group-btn.btn-primary .nav-group-current:not(:empty) { display: inline; color: var(--muted); font-weight: 500; }
.nav-group-btn.btn-primary .nav-group-current:not(:empty)::before { content: "\00B7"; margin-right: 5px; }
.nav-chevron { width: 13px; height: 13px; opacity: 0.6; transition: transform var(--dur-fast) ease; }
.nav-group.open .nav-chevron { transform: rotate(180deg); }
.nav-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: var(--z-dropdown, 50);
  display: none;
  min-width: 180px;
  padding: 4px;
  gap: 2px;
  background: var(--bg-3);
  border: 1px solid var(--border-2, var(--border));
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.nav-group.open .nav-menu { display: grid; }
.mode-switch .nav-menu .nav-menu-item { justify-content: flex-start; width: 100%; text-align: left; }
.mode-switch .nav-menu .nav-menu-item.hidden { display: none; }
/* a heading inside a menu (Core → Matching) and the views under it */
.nav-menu-label { padding: 8px 12px 2px; font-size: 12px; font-weight: 600; color: var(--muted); }
.mode-switch .nav-menu .nav-menu-sub { padding-left: 22px; }

/* ── Client view (Client 360) in the style of Ino: soft cards, round avatar, pill tabs ── */
.client360 {
  --c360-grad: linear-gradient(135deg, var(--accent-bright) 0%, var(--accent) 55%, var(--tone-blue) 130%);
  --c360-radius: 16px;
  --c360-ease: cubic-bezier(0.22, 1, 0.36, 1);
  display: grid;
  gap: var(--space-4);
}

/* header */
.c360-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: var(--c360-radius);
  background: var(--bg-3);
  overflow: hidden;
  isolation: isolate;
}
.c360-hero::before {
  content: "";
  position: absolute;
  inset: -60% 40% auto -10%;
  height: 180%;
  background: radial-gradient(45% 45% at 30% 50%, color-mix(in srgb, var(--accent-bright) 12%, transparent), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.c360-identity { display: flex; align-items: center; gap: 14px; min-width: 0; }
.c360-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--c360-grad);
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--accent) 80%, transparent);
}
.c360-identity-text { display: grid; gap: 2px; min-width: 0; }
.c360-identity-text .eyebrow { margin: 0; }
.c360-identity-text h2 { font-size: 1.45rem; font-weight: 650; letter-spacing: -0.02em; line-height: 1.15; }
.c360-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.c360-tags:empty { display: none; }
.c360-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  background: var(--bg-2);
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 550;
  text-decoration: none;
  white-space: nowrap;
}
.c360-tag-k { color: var(--muted); font-weight: 500; }
.c360-tag--link { color: var(--accent-strong, var(--accent)); }
.c360-tag--link:hover { border-color: var(--accent); background: var(--hover); }
.c360-tag svg { width: 12px; height: 12px; }

.c360-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.c360-stat {
  display: grid;
  gap: 1px;
  min-width: 92px;
  padding: 9px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-2) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.c360-stat.hidden { display: none; }
.c360-stat span { font-size: 1.15rem; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--text); }
.c360-stat small { font-size: 0.72rem; color: var(--muted); }

/* tabs: a pill switch like Ino's mode switch */
.client360 .c360-tabs {
  justify-self: start;
  max-width: 100%;
  gap: 2px;
  padding: 3px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 999px;
  background: var(--bg-2);
}
.client360 .c360-tabs .tab {
  flex: none;
  margin: 0;
  padding: 6px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}
.client360 .c360-tabs .tab::after { display: none; }
.client360 .c360-tabs .tab:hover { color: var(--text); }
.client360 .c360-tabs .tab.active {
  color: var(--text);
  background: var(--bg-3);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 0 0 1px color-mix(in srgb, var(--border) 70%, transparent);
}
.client360 .tab.hidden { display: none; }

/* overview: main column + side column */
.c360-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr);
  gap: var(--space-4);
  align-items: start;
}
.c360-main, .c360-side { display: grid; gap: var(--space-4); min-width: 0; }
@media (max-width: 1100px) {
  .c360-overview { grid-template-columns: minmax(0, 1fr); }
}

.c360-card {
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: var(--c360-radius);
  background: var(--bg-3);
  animation: c360-rise 420ms var(--c360-ease) both;
}
@keyframes c360-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.c360-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: 12px;
}
.c360-card-head h3 { font-size: 0.95rem; font-weight: 650; display: flex; align-items: center; gap: 6px; }
.c360-card-head .text-muted { font-size: 0.78rem; margin-top: 2px; }
.c360-card-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.c360-filters .field { width: auto; min-width: 0; height: 30px; padding: 2px 8px; font-size: 0.78rem; border-radius: 8px; }

/* collapsible "All CRM fields" */
.c360-more > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
.c360-more > summary::-webkit-details-marker { display: none; }
.c360-more > summary h3 { font-size: 0.95rem; font-weight: 650; }
.c360-more > summary::after { content: "+"; color: var(--muted); font-size: 1.1rem; }
.c360-more[open] > summary::after { content: "\2212"; }
.c360-more[open] > summary { margin-bottom: 12px; }

/* profile */
.client360 .org-profile { display: grid; gap: 12px; }
.client360 .op-people { display: grid; gap: 8px; }
.client360 .op-person {
  border: 0;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 7%, var(--bg-2));
  padding: 10px 12px;
}
.client360 .op-avatar { border-radius: 50%; background: var(--c360-grad); color: #fff; }
.c360-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 0; }
.c360-fact { min-width: 0; }
.c360-fact dt { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.c360-fact dd { margin: 1px 0 0; font-size: 0.86rem; font-weight: 550; color: var(--text); overflow-wrap: anywhere; }
.client360 .op-chip-groups { display: grid; gap: 10px; }
.client360 .op-group-label { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.client360 .org-chip {
  border-radius: 999px;
  background: var(--bg-2);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  font-size: 0.74rem;
  padding: 2px 9px;
}
.c360-notes > summary { cursor: pointer; font-size: 0.82rem; font-weight: 600; color: var(--text-2); display: flex; align-items: center; gap: 6px; }
.c360-notes[open] > summary { margin-bottom: 8px; }
.client360 .op-notes { display: grid; gap: 10px; grid-template-columns: 1fr; }
.client360 .op-note { border: 0; padding: 0; }
.client360 .op-note-text { font-size: 0.84rem; color: var(--text-2); }

/* people */
.c360-people { display: grid; gap: 2px; }
.c360-person {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 8px 6px;
  border-radius: 10px;
}
.c360-person:hover { background: var(--hover); }
.c360-person-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bg-2);
  border: 1px solid var(--border);
  font-size: 0.74rem;
  font-weight: 650;
  color: var(--text-2);
}
.c360-person--key .c360-person-avatar { background: var(--c360-grad); border: 0; color: #fff; }
.c360-person-body { min-width: 0; display: grid; gap: 1px; }
.c360-person-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.c360-person-line strong { font-size: 0.86rem; font-weight: 600; }
.c360-person-line a { color: var(--text); text-decoration: none; }
.c360-person-line a:hover { color: var(--accent); }
.c360-person small { color: var(--muted); font-size: 0.74rem; }
.c360-person-reach { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 0.74rem; color: var(--text-2); }
.c360-person-reach a { color: var(--text-2); overflow-wrap: anywhere; }
.c360-badge { font-size: 0.64rem; font-weight: 650; padding: 1px 7px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.04em; }
.c360-badge--key { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-strong, var(--accent)); }
.c360-badge--member { background: var(--bg-2); color: var(--muted); }
.c360-badge--dev { background: color-mix(in srgb, var(--tone-blue) 12%, transparent); color: var(--tone-blue); }
.client360 .contact-dev-disclosure { margin-top: 8px; }
.client360 .contact-dev-disclosure > summary { cursor: pointer; font-size: 0.8rem; font-weight: 600; color: var(--text-2); padding: 6px; }

/* pricing */
.client360 .pricing-summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.client360 .pricing-summary-grid .metric {
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--bg-2);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.client360 .pricing-summary-grid .metric span { font-size: 1.05rem; }
.client360 .pricing-summary-grid .metric small { font-size: 0.7rem; }

/* tech chips */
.client360 .enr-chip { border-radius: 999px; font-size: 0.74rem; padding: 2px 9px; }
.client360 .overview-tech-stack { display: grid; gap: 12px; }

/* next best actions: calm rows, priority as a dot */
.client360 .action-list { display: grid; gap: 6px; }
.client360 .action-card {
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-left-width: 1px;
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--bg-3);
  transition: border-color 160ms, background 160ms;
}
.client360 .action-card:hover { border-color: var(--border-2, var(--border)); background: color-mix(in srgb, var(--bg-2) 40%, var(--bg-3)); }
.client360 .action-summary-title::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--warning);
  vertical-align: 1px;
}
.client360 .priority-high .action-summary-title::before { background: var(--danger); }
.client360 .priority-low .action-summary-title::before { background: var(--success); }

/* timeline: a quiet rail */
.client360 #recentTimeline { gap: 0; max-height: 560px; }
.client360 #recentTimeline .timeline-item {
  position: relative;
  border: 0;
  border-radius: 10px;
  padding: 10px 10px 10px 26px;
  background: transparent;
}
.client360 #recentTimeline .timeline-item:hover { background: var(--hover); }
.client360 #recentTimeline .timeline-item::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 16px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.client360 #recentTimeline .timeline-item::after {
  content: "";
  position: absolute;
  left: 12.5px;
  top: 28px;
  bottom: -10px;
  width: 1px;
  background: var(--border);
}
.client360 #recentTimeline .timeline-item:last-child::after { display: none; }
.client360 #recentTimeline .timeline-item p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.client360 #recentTimeline .timeline-item.expanded p { -webkit-line-clamp: unset; }

/* the other tabs get the same soft panels */
.client360 .tab-panel > .glass-panel,
.client360 .tab-panel > .filter-bar,
.client360 .tab-panel > .table-wrap { border-radius: var(--c360-radius); }

@media (max-width: 700px) {
  .c360-hero { padding: 16px; }
  .c360-stat { min-width: 0; flex: 1 1 40%; }
  .c360-facts { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .c360-card { animation: none; }
}

/* ── Stalling view in the style of Ino ──────────────────────────────────── */
.stall {
  --stall-radius: 16px;
  --stall-bad: var(--danger);
  --stall-warn: var(--warning);
  --stall-ok: var(--success);
  display: grid;
  gap: var(--space-4);
}
.stall.hidden { display: none; }

.stall-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: var(--stall-radius);
  background: var(--bg-3);
  overflow: hidden;
  isolation: isolate;
}
.stall-hero::before {
  content: "";
  position: absolute;
  inset: -60% 45% auto -10%;
  height: 180%;
  background: radial-gradient(45% 45% at 30% 50%, color-mix(in srgb, var(--danger) 9%, transparent), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.stall-hero-text { display: grid; gap: 2px; min-width: 0; max-width: 520px; }
.stall-hero-text .eyebrow { margin: 0; }
.stall-hero-text h2 { display: flex; align-items: center; gap: 8px; font-size: 1.45rem; font-weight: 650; letter-spacing: -0.02em; }
.stall-hero-text .text-muted { font-size: 0.85rem; }
.stall-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.stall-stat {
  display: grid;
  gap: 1px;
  min-width: 108px;
  padding: 10px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-2) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.stall-stat span { font-size: 1.3rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.stall-stat small { font-size: 0.72rem; color: var(--muted); }
.stall-stat small em { font-style: normal; font-weight: 650; }
.stall-stat--alert { background: color-mix(in srgb, var(--danger) 8%, var(--bg-3)); border-color: color-mix(in srgb, var(--danger) 25%, transparent); }
.stall-stat--alert span, .stall-stat--alert em { color: var(--danger); }

.stall-card {
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: var(--stall-radius);
  background: var(--bg-3);
}
.stall-card-head { margin-bottom: 12px; }
.stall-card-head h3 { font-size: 0.95rem; font-weight: 650; }
.stall-card-head .text-muted { font-size: 0.78rem; margin-top: 2px; }

/* stage groups */
.stall-stages { display: grid; gap: 14px; }
.stall-group { display: grid; gap: 8px; }
.stall-group-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.stall-group-head strong { font-size: 0.82rem; font-weight: 650; }
.stall-group-head span { font-size: 0.78rem; font-weight: 600; color: var(--text-2); }
.stall-group-head small { font-size: 0.74rem; color: var(--muted); }
.stall-group-head::before {
  content: "";
  align-self: center;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.stall-group--client .stall-group-head::before { background: var(--tone-blue); }
.stall-group--placed .stall-group-head::before { background: var(--success); }
.stall-group-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 8px; }
.stall-stage {
  display: grid;
  gap: 6px;
  align-content: start;
  text-align: left;
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: 12px;
  background: var(--bg-3);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), border-color 160ms, box-shadow 180ms;
}
.stall-stage:hover { transform: translateY(-1px); border-color: var(--border-2, var(--border)); box-shadow: var(--shadow-sm); }
.stall-stage.active { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent); }
.stall-stage--empty { opacity: 0.55; }
.stall-stage-name { font-size: 0.8rem; font-weight: 600; line-height: 1.25; color: var(--text-2); }
.stall-stage-count { display: flex; align-items: baseline; gap: 4px; }
.stall-stage-count b { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.stall-stage-count span { font-size: 0.78rem; color: var(--muted); }
.stall-stage--bad .stall-stage-count b { color: var(--stall-bad); }
.stall-stage--warn .stall-stage-count b { color: var(--stall-warn); }
.stall-stage--ok .stall-stage-count b { color: var(--text); }
.stall-stage-bar { position: relative; height: 4px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.stall-stage-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--stall-ok); }
.stall-stage--bad .stall-stage-bar i { background: var(--stall-bad); }
.stall-stage--warn .stall-stage-bar i { background: var(--stall-warn); }
.stall-stage small { font-size: 0.72rem; color: var(--muted); }

/* toolbar */
.stall-list { padding: 0; overflow: hidden; }
.stall-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.stall-search { flex: 1 1 240px; max-width: 360px; }
.stall-search .field {
  width: 100%;
  height: 34px;
  padding-left: 2.1rem;
  border-radius: 999px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398a1ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0.75rem center;
  background-size: 15px 15px;
}
.stall-toolbar .field-sm, .stall-toolbar select.field { width: auto; max-width: 220px; text-overflow: ellipsis; height: 34px; padding: 2px 10px; font-size: 0.8rem; border-radius: 999px; }
.stall-toolbar select.field:disabled { opacity: 0.55; }
.stall-toggle {
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-3);
  color: var(--text-2);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
.stall-toggle:hover { background: var(--hover); }
.stall-toggle.active { background: color-mix(in srgb, var(--danger) 10%, var(--bg-3)); border-color: color-mix(in srgb, var(--danger) 40%, transparent); color: var(--danger); }
.stall-toolbar-spacer { flex: 1; }

/* table */
.stall-table { border: 0; border-radius: 0; margin: 0; }
.stall-table table { width: 100%; }
.stall-table thead th { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 600; background: var(--bg-2); }
.stall-table tbody td { vertical-align: top; padding-top: 11px; padding-bottom: 11px; }
.stall-row { background: transparent; }
.stall-row:hover td { background: var(--hover); }
.stall-row td:first-child { box-shadow: inset 3px 0 0 transparent; }
.stall-row--bad td:first-child { box-shadow: inset 3px 0 0 var(--stall-bad); }
.stall-row--warn td:first-child { box-shadow: inset 3px 0 0 var(--stall-warn); }
.stall-cand a { font-weight: 600; color: var(--text); text-decoration: none; }
.stall-cand a:hover { color: var(--accent); }
.stall-sub { display: block; margin-top: 2px; color: var(--muted); font-size: 0.74rem; }
.stall-extras { display: flex; gap: 4px; margin-top: 4px; }
.stall-mini { font-size: 0.66rem; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--bg-2); color: var(--text-2); }
.stall-pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--bg-2);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
}
.stall-days { font-weight: 700; font-variant-numeric: tabular-nums; }
.stall-days--bad { color: var(--stall-bad); }
.stall-days--warn { color: var(--stall-warn); }
.stall-action { font-size: 0.84rem; }
.stall-project a { color: var(--text-2); }

@media (max-width: 700px) {
  .stall-hero { padding: 16px; }
  .stall-stat { min-width: 0; flex: 1 1 40%; }
  .stall-search { max-width: none; }
}

/* ── Three60 brand: emblem + wordmark ──────────────────────────────────── */
.brand-mark.t360-mark,
.login-brand-mark.t360-mark {
  width: 38px;
  height: 38px;
  padding: 0;
  background: none;
  border-radius: 11px;
  box-shadow: 0 6px 16px -6px rgba(7, 26, 36, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04);
  overflow: hidden;
}
.t360-mark .t360-emblem { width: 100%; height: 100%; display: block; }
.login-brand-mark.t360-mark--lg { width: 64px; height: 64px; border-radius: 18px; box-shadow: 0 18px 40px -16px rgba(7, 26, 36, 0.7); }
.t360-title { letter-spacing: -0.02em; }
.t360-title .t360-num {
  background: linear-gradient(120deg, var(--accent-bright) 0%, var(--accent) 60%, #c8902e 130%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
}
.t360-title .t360-word { font-weight: 500; color: var(--text-2); }
.login-brand .t360-title .t360-word { color: inherit; opacity: 0.8; }
.topbar-brand:hover .t360-mark .t360-emblem circle:nth-of-type(3) { animation: t360-orbit 1.2s ease-in-out 1; transform-origin: 32px 32px; }
@keyframes t360-orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .topbar-brand:hover .t360-mark .t360-emblem circle:nth-of-type(3) { animation: none; }
}

/* ── Book ─────────────────────────────────────────────────────────────
   Each project is one band on the canvas; opening it pulls a drawer out of the
   same band. Separation comes from space and surface, never from divider lines
   or coloured edge stripes. Attention is carried by text colour and tinted tags. */
.book-modern {
  --book-radius: 14px;
  --book-line: color-mix(in srgb, var(--border) 70%, transparent);
  --book-band: var(--bg-3);
  --book-well: color-mix(in srgb, var(--bg-2) 60%, var(--bg-3));
  display: grid;
  gap: var(--space-4);
}
[data-theme="dark"] .book-modern { --book-well: color-mix(in srgb, var(--bg) 70%, var(--bg-3)); }
.book-modern.hidden { display: none; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* header + figures */
.book-hero {
  display: grid;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--book-radius);
  background: var(--bg-3);
}
.book-hero-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.book-hero-head > div:first-child { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; min-width: 0; }
.book-hero-head h2 { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.015em; }
.book-hero-head .text-muted { font-size: 0.8rem; margin: 0; }
@media (max-width: 900px) { .book-hero-head .text-muted { display: none; } }
.book-stats { display: grid; grid-template-columns: 4fr 6fr 3fr; gap: 6px; }
@media (max-width: 1250px) { .book-stats { grid-template-columns: 1fr; } }
.book-stat-group {
  display: grid;
  align-content: start;
  gap: 2px;
  min-width: 0;
  padding: 6px 10px 7px;
  border-radius: 10px;
  background: var(--bg-2);
}
.book-stat-label { margin: 0; font-size: 0.72rem; font-weight: 600; color: var(--muted); }
.book-stat-row { display: flex; flex-wrap: nowrap; gap: 2px 14px; }
@media (max-width: 700px) { .book-stat-row { flex-wrap: wrap; row-gap: 4px; } .book-stat-row > .book-stat { flex: 1 1 40%; } }
.book-stat { flex: 1 1 0; min-width: 0; display: grid; align-content: start; gap: 0; padding: 0; border: 0; background: none; }
.book-stat.hidden { display: none; }
.book-stat-top { display: flex; align-items: center; gap: 2px; }
.book-stat-top > span { font-size: 1.1rem; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--text); }
.book-stat small { font-size: 0.72rem; color: var(--muted); line-height: 1.25; }
.book-stat .metric-info-btn { width: 20px; height: 20px; border: 0; background: transparent; color: var(--muted); opacity: 0; transition: opacity var(--dur-fast) ease; }
.book-stat:hover .metric-info-btn,
.book-stat .metric-info-btn:focus-visible { opacity: 1; }
@media (hover: none) { .book-stat .metric-info-btn { opacity: 0.6; } }
.book-stat .metric-info-btn svg { width: 13px; height: 13px; }
.book-stat--warn .book-stat-top > span { color: var(--warning); }
.book-stat--bad .book-stat-top > span { color: var(--danger); }

/* controls */
.book-modern .book-controls,
.book-modern .book-stats-panel { border-radius: var(--book-radius); }
.book-modern .book-bar { align-items: flex-end; gap: 10px; }
.book-modern .book-bar .filter-field > span { font-size: 0.72rem; font-weight: 600; color: var(--muted); }
.book-modern .book-bar .field { height: 38px; border-radius: 10px; padding: 0 12px; font-size: 0.86rem; }
.book-modern .book-bar-search .field {
  padding-left: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398a1ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0.8rem center;
  background-size: 15px 15px;
}
.book-modern .toolbar-refresh { height: 38px; border-radius: 10px; padding: 0 18px; }
.book-modern .book-phase-strip { padding-top: 4px; }
.book-modern .phase-chip { border-radius: 999px; }
.book-modern .phase-chip.active { border-color: transparent; background: var(--accent-tint-2); color: var(--accent-strong); font-weight: 600; }
.book-modern .book-more > summary { border-radius: 10px; }
.book-modern .book-more-grid .field { border-radius: 10px; }
.book-modern .checkbox-pill { border-radius: 999px; }

/* the list: header labels on the canvas, one band per project */
.book-modern > * { min-width: 0; }
.book-modern .book-table {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow-x: auto;
}
.book-modern .book-table table { border-collapse: separate; border-spacing: 0 6px; margin-top: -6px; min-width: 960px; }
.book-modern .book-table thead th {
  padding: 4px 14px 0;
  border: 0;
  background: transparent;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.book-modern .book-table th:nth-child(1), .book-modern .book-table td:nth-child(1) { width: 13%; }
.book-modern .book-table th:nth-child(2), .book-modern .book-table td:nth-child(2) { width: 36%; }
.book-modern .book-table th:nth-child(3), .book-modern .book-table td:nth-child(3) { width: 10%; }
.book-modern .book-table th:nth-child(4), .book-modern .book-table td:nth-child(4) { width: 12%; }
.book-modern .book-table th:nth-child(5), .book-modern .book-table td:nth-child(5) { width: 8%; }
.book-modern .book-table th:nth-child(6), .book-modern .book-table td:nth-child(6) { width: 10%; }
.book-modern .book-table th:nth-child(7), .book-modern .book-table td:nth-child(7) { width: 1%; white-space: nowrap; }
.book-modern .book-table .book-detail-row td { width: auto; }
.book-modern .book-table thead th.col-info { position: relative; }

/* the band colour sits on the row too (clipped to its rounded shape) so fractional
   cell widths never show the canvas through a hairline seam between cells */
.book-modern .book-row { cursor: pointer; background: var(--book-band); clip-path: inset(0 round 12px); }
.book-modern .book-row--open { clip-path: inset(0 round 12px 12px 0 0); }
.book-modern .book-row td {
  padding: 11px 14px;
  border: 0;
  background: var(--book-band);
  vertical-align: top;
  box-shadow: inset 0 1px 0 var(--book-line), inset 0 -1px 0 var(--book-line);
  transition: background var(--dur-fast) ease;
}
.book-modern .book-row td:first-child {
  border-radius: 12px 0 0 12px;
  box-shadow: inset 1px 0 0 var(--book-line), inset 0 1px 0 var(--book-line), inset 0 -1px 0 var(--book-line);
}
.book-modern .book-row td:last-child {
  border-radius: 0 12px 12px 0;
  box-shadow: inset -1px 0 0 var(--book-line), inset 0 1px 0 var(--book-line), inset 0 -1px 0 var(--book-line);
}
.book-modern .book-row:hover td { background: color-mix(in srgb, var(--accent) 3%, var(--book-band)); }
.book-modern .book-row--open td { box-shadow: inset 0 1px 0 var(--book-line); }
.book-modern .book-row--open td:first-child { border-radius: 12px 0 0 0; box-shadow: inset 1px 0 0 var(--book-line), inset 0 1px 0 var(--book-line); }
.book-modern .book-row--open td:last-child { border-radius: 0 12px 0 0; box-shadow: inset -1px 0 0 var(--book-line), inset 0 1px 0 var(--book-line); }
.book-modern .book-row--open:hover td { background: var(--book-band); }
.book-modern .book-row--closed td { opacity: 0.62; }
.book-modern .book-row--closed:hover td { opacity: 0.85; }

.book-modern .book-row td small { display: block; margin-top: 2px; color: var(--muted); font-size: 0.76rem; line-height: 1.4; }
.book-modern .cell-client strong { font-size: 0.9rem; font-weight: 650; line-height: 1.35; }
.book-modern .cell-client a { color: var(--text); text-decoration: none; }
.book-modern .cell-request { gap: 10px; }
.book-modern .cell-request-body { display: grid; gap: 0; }
.book-modern .cell-request-body > strong { font-size: 0.9rem; font-weight: 650; line-height: 1.35; }
.book-modern .cell-request-body strong a { color: var(--text); text-decoration: none; }
.book-modern .cell-client a:hover,
.book-modern .cell-request-body strong a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.book-modern .book-facts { display: flex; flex-wrap: wrap; gap: 0 6px; margin-top: 2px; font-size: 0.76rem; line-height: 1.45; color: var(--muted); }
.book-modern .book-fact { white-space: nowrap; }
.book-modern .book-facts > :not(:last-child)::after { content: "·"; margin-left: 6px; color: var(--muted-2); }
.book-modern .book-fact strong,
.book-modern .book-flags strong { display: inline; }
.book-modern .book-fact strong { color: var(--text-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.book-modern .book-facts .book-phase-chip { padding: 0; border: 0; background: none; color: var(--muted); font-size: inherit; font-style: normal; font-weight: 500; line-height: inherit; }
.book-modern .book-flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.book-modern .book-flags > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border: 0;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.5;
  font-style: normal;
}
.book-modern .book-flags strong { color: inherit; font-weight: 700; font-variant-numeric: tabular-nums; }
.book-modern .book-flags .book-followup-chip { background: color-mix(in srgb, var(--warning) 13%, transparent); color: var(--warning); }
.book-modern .book-flags .book-nocand-chip { background: color-mix(in srgb, var(--tone-violet) 12%, transparent); color: var(--tone-violet); }
.book-modern .book-flags .book-phase-chip--stalling { background: color-mix(in srgb, var(--danger) 11%, transparent); color: var(--danger); }

.book-modern .row-expand {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  margin: -2px 0 0;
  border: 0;
  border-radius: 8px;
  background: var(--bg-2);
  color: var(--text-2);
}
.book-modern .book-row:hover .row-expand { background: var(--bg-4); }
.book-modern .row-expand.open { background: var(--accent-tint-2); color: var(--accent); }
.book-modern .row-expand svg { transition: transform var(--dur) var(--ease); }

.book-modern .cell-cand { gap: 1px; white-space: nowrap; }
.book-modern .book-table td:nth-child(3) { white-space: nowrap; }
.book-modern .cell-cand .num { font-size: 1.05rem; font-weight: 650; line-height: 1.25; font-variant-numeric: tabular-nums; color: var(--text); }
.book-modern .cell-cand .cand-of { font-size: 0.76rem; font-weight: 500; color: var(--muted); }
.book-modern .cell-cand.cand-none .num { color: var(--warning); }
.book-modern .book-row td .cell-cand small { margin-top: 0; }
.book-modern .book-row td .cell-cand.cand-stale small { color: var(--warning); font-weight: 600; }

.book-modern .book-risk {
  display: inline-block;
  white-space: nowrap;
  padding: 2px 8px;
  margin-left: -8px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text-2);
}
.book-modern .book-risk::first-letter { text-transform: uppercase; }
.book-modern .book-risk--high { background: color-mix(in srgb, var(--danger) 11%, transparent); color: var(--danger); }
.book-modern .book-risk--medium { background: color-mix(in srgb, var(--warning) 13%, transparent); color: var(--warning); }
.book-modern .book-risk--low { color: var(--muted); font-weight: 500; }

.book-modern .book-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 2px; margin: -4px -4px 0 0; }
.book-modern .book-row-actions .icon-btn { width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); }
.book-modern .book-row-actions .icon-btn:hover { background: var(--hover-strong); color: var(--text); }
.book-modern .book-row-actions .icon-btn svg { width: 16px; height: 16px; }
.book-modern .book-note-btn { display: inline-flex; align-items: center; gap: 4px; height: 32px; margin-right: 4px; padding: 0 10px; border-radius: 8px; }
.book-modern .book-note-btn svg { width: 14px; height: 14px; }

/* the drawer under an open project */
.book-modern .book-detail-row { position: relative; top: -6px; background: var(--book-band); clip-path: inset(0 round 0 0 12px 12px); }
.book-modern .book-detail-row > td,
.book-modern .book-detail-row:hover > td {
  padding: 0 14px 14px;
  border: 0;
  border-radius: 0 0 12px 12px;
  background: var(--book-band);
  box-shadow: inset 1px 0 0 var(--book-line), inset -1px 0 0 var(--book-line), inset 0 -1px 0 var(--book-line);
}
.book-modern .book-detail-panel {
  display: grid;
  gap: 14px;
  padding: 16px 18px 18px;
  border-radius: 10px;
  background: var(--book-well);
  animation: book-drawer-in var(--dur-slow) var(--ease-spring);
}
@keyframes book-drawer-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .book-modern .book-detail-panel { animation: none; } }

.book-modern .book-detail-top { align-items: flex-end; gap: 6px 18px; font-size: 0.8rem; }
.book-modern .book-detail-top .book-phase-duration-section h4 { margin-bottom: 6px; }
.book-modern .book-phase-untracked-note { font-size: 0.8rem; }
.book-modern .book-phase-untracked-note strong { color: var(--text-2); font-weight: 600; }
.book-modern .info-dot { display: inline-flex; vertical-align: -2px; color: var(--muted); }
.book-modern .info-dot svg { width: 13px; height: 13px; }
.book-modern .book-hidden-lost-link { font-size: 0.8rem; }
.book-modern .cand-toolbar .btn { min-height: 28px; padding: 0 10px; border-radius: 8px; font-size: 0.76rem; }

.book-modern .book-detail-body { display: grid; gap: 18px 24px; align-items: start; }
@media (min-width: 1180px) {
  .book-modern .book-detail-body--aside { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); }
}
.book-modern .book-detail-main,
.book-modern .book-detail-aside { display: grid; gap: 16px; min-width: 0; }
.book-modern .book-detail-empty { margin: 0; padding: 14px 0; color: var(--muted); font-size: 0.86rem; }

/* section headings inside the drawer */
.book-modern .book-detail-panel .candidate-stage-group { display: grid; gap: 8px; padding: 0; border: 0; }
.book-modern .book-detail-panel .candidate-stage-group h4,
.book-modern .book-detail-top .book-phase-duration-section h4 {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding: 0;
  border: 0;
  font-size: 0.84rem;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}
.book-modern .book-detail-panel .candidate-stage-group h4 small { font-size: 0.76rem; font-weight: 500; color: var(--muted); }
.book-modern .book-client-tag {
  align-self: center;
  padding: 1px 7px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--tone-blue) 12%, transparent);
  color: var(--tone-blue);
  font-size: 0.7rem;
  font-weight: 650;
}

/* candidate rows */
.book-modern .book-detail-panel .candidate-detail-list { gap: 6px; }
.book-modern .book-detail-panel .candidate-detail-list li.candidate-detail-item {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: color-mix(in srgb, var(--tone-blue) 5%, var(--book-band));
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
/* candidates in the client's hands stand out as the plain white cards */
.book-modern .book-detail-panel .candidate-detail-list li.candidate-client-side { background: var(--book-band); }
.book-modern .book-detail-panel .candidate-detail-list li.candidate-filter-match { background: color-mix(in srgb, var(--accent) 12%, var(--book-band)); }
.book-modern .book-detail-panel .candidate-detail-list li.candidate-detail-item--lost { opacity: 0.6; }
.book-modern .cand-row { gap: 6px 18px; padding: 10px 14px; min-height: 44px; }
.book-modern summary.cand-row:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.book-modern .cand-main strong { font-size: 0.86rem; font-weight: 600; }
.book-modern .cand-meta { gap: 14px; }
.book-modern .cand-meta .candidate-rating-label { font-size: 0.72rem; color: var(--muted); }
.book-modern .cand-meta .candidate-rating-value { margin-left: 3px; font-size: 0.8rem; font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; }
.book-modern .cand-row .candidate-detail-org { font-size: 0.8rem; }
.book-modern .cand-when small { font-size: 0.74rem; font-variant-numeric: tabular-nums; }
.book-modern .candidate-client-share-btn {
  gap: 5px;
  min-height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: var(--accent-tint);
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 650;
}
.book-modern .candidate-client-share-btn:hover { background: var(--accent-tint-2); }
.book-modern .cand-panel { padding: 12px 16px 14px 38px; border-top: 0; background: color-mix(in srgb, var(--bg-2) 45%, var(--book-band)); }
.book-modern .cand-panel .chip-skill { border-color: transparent; background: var(--accent-tint); color: var(--text-2); }

/* stage timeline: steps joined by a short connector, the current one tinted */
.book-modern .book-detail-panel .candidate-stage-duration { gap: 4px 0; margin-top: 2px; }
.book-modern .book-detail-panel .stage-duration-badge {
  position: relative;
  gap: 5px;
  min-height: 0;
  padding: 2px 7px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-size: 0.74rem;
}
.book-modern .book-detail-panel .stage-duration-badge + .stage-duration-badge { margin-left: 16px; }
.book-modern .book-detail-panel .stage-duration-badge + .stage-duration-badge::before {
  content: "";
  position: absolute;
  left: -13px;
  top: 50%;
  width: 10px;
  height: 1.5px;
  border-radius: 1px;
  background: var(--border-2);
}
.book-modern .book-detail-panel .stage-duration-badge strong { color: var(--text-2); font-weight: 650; font-variant-numeric: tabular-nums; }
.book-modern .book-detail-panel .stage-duration-badge--current { background: color-mix(in srgb, var(--tone-blue) 12%, transparent); color: var(--text); }
.book-modern .book-detail-panel .stage-duration-badge--current strong { color: var(--tone-blue); }
.book-modern .book-detail-panel .stage-duration-badge--total { margin-left: 20px; background: transparent; color: var(--muted); }
.book-modern .book-detail-panel .stage-duration-badge--total::before { display: none; }

/* notes, tasks and contacted suppliers beside the candidates */
.book-modern .book-notes-section { padding: 0; border: 0; }
.book-modern .book-notes-summary,
.book-modern .book-activities-summary { align-items: center; gap: 8px; font-size: 0.84rem; font-weight: 650; color: var(--text); }
.book-modern .book-notes-summary small { font-size: 0.76rem; }
.book-modern .book-notes-summary::before,
.book-modern .book-activities-summary::before {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform var(--dur-fast) ease;
}
.book-modern .book-notes-details[open] > .book-notes-summary::before,
.book-modern .book-activities-details[open] > .book-activities-summary::before { transform: rotate(45deg); }
.book-modern .book-activities-summary { margin-top: 10px; font-size: 0.8rem; font-weight: 600; color: var(--text-2); cursor: pointer; }
.book-modern .book-notes-list { gap: 6px; margin-top: 2px; }
.book-modern .book-note-item,
.book-modern .book-note-item--activity {
  gap: 4px;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: var(--book-band);
  box-shadow: var(--shadow-sm);
}
.book-modern .book-note-body { margin: 0; font-size: 0.8rem; line-height: 1.5; color: var(--text-2); white-space: pre-line; }
.book-modern .book-note-meta small { font-size: 0.72rem; }
.book-modern .book-contacted-org-list { gap: 6px; margin-top: 8px; }
.book-modern .book-contacted-org { padding: 8px 12px; border: 0; border-radius: 10px; background: var(--book-band); box-shadow: var(--shadow-sm); }
.book-modern .book-contacted-org--awaiting { background: color-mix(in srgb, var(--warning) 6%, var(--book-band)); }
.book-modern .org-status { border-radius: 6px; padding: 1px 7px; font-size: 0.7rem; }

/* per-candidate notes and tasks */
.book-modern .book-candidate-context-details { margin: 0; padding: 0 14px 10px 38px; border-top: 0; }
.book-modern .book-candidate-context-summary { font-size: 0.74rem; font-weight: 600; color: var(--muted); }
.book-modern .book-candidate-context-summary:hover { color: var(--text); }

/* empty and loading */
.book-modern .book-empty-row td,
.book-modern .book-empty-row:hover td { padding: 0; border: 0; background: transparent; }
.book-modern .book-empty {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 40px 16px;
  border-radius: 12px;
  background: var(--book-band);
  box-shadow: inset 0 0 0 1px var(--book-line);
  text-align: center;
}
.book-modern .book-empty strong { font-size: 0.95rem; }
.book-modern .book-empty p { margin: 0 0 6px; }

/* ── Aliases for colour tokens older styles use but the theme never defined ──
   (undefined colours render transparent, which showed once the ambient page
   background was turned on everywhere). They follow the light/dark theme. */
:root {
  --bg-1: var(--bg-3);
  --surface: var(--bg-3);
  --surface-1: var(--bg-3);
  --surface-2: var(--bg-2);
  --text-muted: var(--muted);
}

/* ── Ino: stop button and stopped answers ─────────────────────────────── */
.chat-send.is-stop { background: var(--text); color: var(--bg-3); }
.chat-send.is-stop:hover { background: var(--danger); color: #fff; transform: scale(1.06); }
.chat-send.is-stop svg { width: 16px; height: 16px; opacity: 1; }
.chat-stopped {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 600;
}
.chat-stopped svg { width: 10px; height: 10px; }

/* ── Ino: chat history grouped by day, older days folded ─────────────────── */
button.chat-history-group {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin: 2px 0 0;
  padding: 10px 10px 6px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-2);
  text-align: left;
  cursor: pointer;
}
button.chat-history-group:hover { color: var(--text-2); background: var(--hover); }
.chat-history-caret {
  width: 0;
  height: 0;
  border-left: 4px solid currentColor;
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  transition: transform 160ms ease;
}
button.chat-history-group.is-open .chat-history-caret { transform: rotate(90deg); }
.chat-history-count {
  margin-left: auto;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--muted);
  font-size: 0.66rem;
  letter-spacing: 0;
}

/* ── Header: equal icon buttons + sync popover (sidebar removed) ─────────── */
.cockpit, .cockpit:has(.sidebar-collapse:not([open])) { grid-template-columns: minmax(0, 1fr); }
.topbar-utils { gap: 6px; }
.icon-btn.head-icon {
  position: relative;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 11px;
  border: 1px solid var(--border-2, var(--border));
  background: var(--bg-3);
  color: var(--text-2);
}
.icon-btn.head-icon:hover { background: var(--hover); color: var(--text); }
.icon-btn.head-icon svg { width: 17px; height: 17px; }
.icon-btn.head-icon.hidden { display: none; }
.head-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--bg-3);
}
.process-monitor-btn.is-active { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.head-dot {
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted-2, var(--muted));
  box-shadow: 0 0 0 2px var(--bg-3);
}
.head-dot[data-state="ok"] { background: var(--success); }
.head-dot[data-state="warn"] { background: var(--danger); }
.head-dot[data-state="running"] { background: var(--warning); animation: head-pulse 1.2s ease-in-out infinite; }
@keyframes head-pulse { 50% { transform: scale(1.35); } }

.sync-pop { position: relative; }
.sync-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: var(--z-dropdown, 60);
  width: 320px;
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border-2, var(--border));
  border-radius: 16px;
  background: var(--bg-3);
  box-shadow: var(--shadow-lg);
}
.sync-panel.hidden { display: none; }
.sync-panel-head { display: flex; align-items: center; gap: 10px; }
.sync-panel-head strong { font-size: 0.95rem; font-weight: 650; }
.sync-panel-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}
.sync-panel-icon svg { width: 17px; height: 17px; }
.sync-panel .sync-schedule-hint { margin: 1px 0 0; font-size: 0.74rem; color: var(--muted); }
.sync-panel .sync-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--bg-2);
  font-size: 0.8rem;
  color: var(--text-2);
}
.sync-state { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; }
.sync-state--warn { text-transform: capitalize; }
.sync-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.sync-state--ok { color: var(--success); }
.sync-state--warn { color: var(--danger); }
.sync-when { color: var(--muted); }
.sync-panel-actions { display: flex; align-items: center; gap: 6px; }
.sync-panel-actions .btn { border-radius: 999px; padding-inline: 16px; }
.sync-panel-spacer { flex: 1; }
.sync-panel-actions .icon-btn { width: 32px; height: 32px; border-radius: 10px; }
.sync-panel .sync-details { border-radius: 12px; font-size: 0.78rem; }
.sync-sources { display: grid; gap: 2px; padding-top: 12px; border-top: 1px solid var(--border); }
.sync-sources.hidden { display: none; }
.sync-sources-head { margin-bottom: 4px; font-size: 0.74rem; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.sync-source { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.sync-source-text { flex: 1; min-width: 0; display: grid; }
.sync-source-text strong { font-size: 0.84rem; font-weight: 600; }
.sync-source-text small { font-size: 0.74rem; color: var(--muted); }
.sync-source-run { color: var(--warning); font-weight: 600; }
.sync-source-bad { color: var(--danger); font-weight: 600; text-transform: capitalize; }
.sync-source .btn { border-radius: 999px; padding-inline: 12px; flex-shrink: 0; }
@media (max-width: 600px) { .sync-panel { width: min(320px, calc(100vw - 32px)); right: -90px; } }

/* ── Find info: Meetings and Emails (find.js) ──────────────────────────────── */
.find-view { gap: var(--space-4); }
.find-hero::before {
  background: radial-gradient(45% 45% at 30% 50%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%);
}
.find-card { overflow: visible; }
.find-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 12px 14px 0;
}
.find-tab {
  height: 32px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
}
.find-tab:hover { background: var(--hover); }
.find-tab.active { background: var(--bg-2); border-color: var(--border); color: var(--text); }
.find-search { max-width: 460px; }
.find-toggle.active {
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-3));
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent);
}
.find-count { font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.find-body { padding: 4px 0 8px; }
.find-empty { padding: 28px 18px; text-align: center; color: var(--muted); }
.find-empty p { margin: 0; color: var(--text-2); font-weight: 600; }
.find-empty small { display: block; margin-top: 4px; }
.find-muted { color: var(--muted); }

/* list rows */
.find-list { display: grid; }
.find-day {
  margin: 0;
  padding: 14px 18px 6px;
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.find-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 11px 18px;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 3px 0 0 transparent;
}
.find-row:hover { background: var(--hover); }
.find-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.find-row--bad { box-shadow: inset 3px 0 0 var(--danger); }
.find-row--warn { box-shadow: inset 3px 0 0 var(--warning); }
.find-time { display: grid; font-size: 0.82rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-2); }
.find-time small { font-size: 0.7rem; font-weight: 500; color: var(--muted); }
.find-main { display: grid; gap: 2px; min-width: 0; }
.find-main strong { font-size: 0.9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.find-sub { font-size: 0.76rem; color: var(--muted); }
.find-snippet { font-size: 0.78rem; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.find-company { font-weight: 600; color: var(--text-2); }
.find-company--internal { font-weight: 500; color: var(--muted); }
.find-side { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.find-mini { font-size: 0.66rem; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--bg-2); color: var(--text-2); white-space: nowrap; }
.find-link { font-size: 0.78rem; font-weight: 600; color: var(--accent); text-decoration: none; }
.find-link:hover { text-decoration: underline; }
.find-unread { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--accent); vertical-align: middle; }
.find-files { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.find-file {
  font-size: 0.7rem;
  padding: 1px 8px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: var(--bg-2);
  color: var(--text-2);
}

/* pills, avatars, waiting badge */
.find-pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--bg-2);
  color: var(--text-2);
}
.find-pill--ok { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.find-pill--bad { background: color-mix(in srgb, var(--danger) 13%, transparent); color: var(--danger); }
.find-pill--warn { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--warning); }
.find-pill--muted { color: var(--muted); }
.find-avatars { display: inline-flex; }
.find-avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg-2);
  border: 2px solid var(--bg-3);
  font-size: 0.64rem;
  font-weight: 650;
  color: var(--text-2);
}
.find-avatars .find-avatar + .find-avatar { margin-left: -7px; }
.find-avatar--more { background: var(--bg-4, var(--bg-2)); }
.find-wait { display: grid; justify-items: center; width: 52px; line-height: 1.1; }
.find-wait b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.find-wait small { font-size: 0.66rem; color: var(--muted); }
.find-wait--bad b { color: var(--danger); }
.find-wait--warn b { color: var(--warning); }
.find-row:has(.find-wait) { grid-template-columns: 56px minmax(0, 1fr) auto; }

/* tables (Companies, Team) */
.find-table tbody tr { cursor: pointer; }
.find-when span { display: block; font-size: 0.82rem; }
.find-when small { display: block; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 0.72rem; }

/* side panel */
.find-drawer { position: fixed; inset: 0; z-index: 700; } /* above the top bar (500), below modals (1000) */
.find-drawer.hidden { display: none; }
.find-drawer-backdrop { position: absolute; inset: 0; background: rgba(15, 20, 25, 0.32); }
.find-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(640px, 100vw);
  overflow-y: auto;
  padding: 22px 24px 32px;
  background: var(--bg-3);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  animation: find-slide 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes find-slide { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.find-drawer-close { position: sticky; top: 0; float: right; }
.find-drawer-panel h3 { margin: 2px 40px 4px 0; font-size: 1.2rem; font-weight: 650; letter-spacing: -0.01em; }
.find-drawer-panel .eyebrow { margin: 0; }
.find-drawer-panel .find-row { padding-left: 4px; padding-right: 4px; }
.find-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; }
.find-block { margin-top: 16px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--border) 80%, transparent); border-radius: 12px; }
.find-block h4 { margin: 0 0 6px; font-size: 0.7rem; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.find-block p { margin: 0; font-size: 0.86rem; }
.find-block--no_show { border-color: color-mix(in srgb, var(--danger) 40%, transparent); background: color-mix(in srgb, var(--danger) 6%, transparent); }
.find-block--not_held { border-color: color-mix(in srgb, var(--warning) 40%, transparent); }
.find-block--held { border-color: color-mix(in srgb, var(--success) 35%, transparent); }
.find-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.84rem; line-height: 1.5; color: var(--text); }
.find-text--clamped { max-height: 9.5em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.find-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.find-people li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; }
.find-people li span:nth-child(2) { display: grid; min-width: 0; }
.find-people strong { font-size: 0.84rem; font-weight: 600; }
.find-people small { font-size: 0.72rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.find-resp { font-size: 0.74rem; color: var(--muted); }
.find-resp--accepted { color: var(--success); }
.find-resp--declined { color: var(--danger); }
.find-resp--tentative { color: var(--warning); }
.find-thread { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 14px; }
.find-msg, .find-msg-body, .find-drawer-content { min-width: 0; }
.find-msg { padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--border) 80%, transparent); border-radius: 12px; background: var(--bg-3); }
.find-msg--outbound { background: color-mix(in srgb, var(--accent) 4%, var(--bg-3)); }
.find-msg header { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-bottom: 8px; }
.find-msg header span:nth-child(2) { display: grid; min-width: 0; }
.find-msg header strong { font-size: 0.84rem; }
.find-msg header small { font-size: 0.72rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.find-msg-date { font-size: 0.74rem; color: var(--muted); white-space: nowrap; }
.find-msg .find-files { margin: 0 0 8px; }
.find-msg footer { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; }

/* trends, project overview and sync line */
.find-more { padding: 0; }
.find-more > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; cursor: pointer; list-style: none; }
.find-more > summary::-webkit-details-marker { display: none; }
.find-more > summary span:first-child { display: grid; gap: 2px; }
.find-more > summary strong { font-size: 0.92rem; font-weight: 650; }
.find-more > summary small { font-size: 0.76rem; color: var(--muted); }
.find-more[open] > summary .section-collapse-caret { transform: rotate(90deg); }
.find-more-body { display: grid; gap: var(--space-3, 12px); padding: 0 14px 14px; }
.find-projects { display: grid; gap: var(--space-3, 12px); padding: 14px; }
.find-projects-intro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.find-projects-intro p { margin: 0; max-width: 560px; font-size: 0.82rem; }
.find-sync .find-sync-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px dashed color-mix(in srgb, var(--border) 90%, transparent);
  border-radius: 12px;
  background: transparent;
  font-size: 0.8rem;
}
.c360-find-links { display: flex; gap: 6px; margin-top: 6px; }
.find-jump {
  height: 26px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-3);
  color: var(--text-2);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
}
.find-jump:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }

@media (max-width: 700px) {
  .find-row { grid-template-columns: 1fr; gap: 6px; padding: 12px 16px; }
  .find-row:has(.find-wait) { grid-template-columns: 48px minmax(0, 1fr); }
  .find-row:has(.find-wait) .find-side { grid-column: 2; }
  .find-side { justify-content: flex-start; }
  .find-main strong, .find-snippet { white-space: normal; }
  .find-drawer-panel { padding: 18px 16px 28px; }
  .find-people li { grid-template-columns: 26px minmax(0, 1fr) auto; }
  .find-people li .find-pill { grid-column: 2; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .find-drawer-panel { animation: none; }
}

/* ── Find info: ease of use (sticky toolbar, groups, compact, quick filters) ── */
.find-sticky {
  position: sticky;
  top: var(--find-sticky-top, 0px);
  z-index: 6;
  background: var(--bg-3);
  border-radius: var(--stall-radius, 16px) var(--stall-radius, 16px) 0 0;
}
.find-stat { font: inherit; color: inherit; text-align: left; cursor: pointer; transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 160ms; }
.find-stat:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.find-stat:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.find-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 4px 0 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-3));
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 600;
}
.find-chip button { width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 1rem; line-height: 1; cursor: pointer; }
.find-chip button:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.find-density.active { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.find-body.is-loading { opacity: 0.55; transition: opacity 120ms; }

/* collapsible groups (days, waiting time) */
.find-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 14px 18px 6px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}
.find-group-head:hover { color: var(--text-2); }
.find-group-head small { font-size: 0.7rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.find-group-caret { display: inline-grid; width: 14px; height: 14px; transition: transform 160ms; }
.find-group-caret svg { width: 14px; height: 14px; }
.find-group.is-collapsed .find-group-caret { transform: rotate(-90deg); }
.find-group.is-collapsed .find-group-body { display: none; }
.find-group.is-collapsed .find-group-head { padding-bottom: 12px; border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); }
.find-row.is-current { background: color-mix(in srgb, var(--accent) 8%, transparent); }

/* compact rows */
.find-view.is-compact .find-row { padding-top: 6px; padding-bottom: 6px; gap: 10px; }
.find-view.is-compact .find-main { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.find-view.is-compact .find-main strong { flex: 0 1 auto; }
.find-view.is-compact .find-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.find-view.is-compact .find-snippet, .find-view.is-compact .find-files { display: none; }
.find-view.is-compact .find-avatar { width: 22px; height: 22px; font-size: 0.6rem; }
.find-view.is-compact .find-wait b { font-size: 0.92rem; }
.find-view.is-compact .find-group-head { padding-top: 10px; }

/* side panel: previous / next */
.find-drawer-nav { display: flex; align-items: center; gap: 6px; margin: 0 48px 10px 0; font-size: 0.76rem; color: var(--muted); }
.find-drawer-nav .icon-btn { font-size: 1.1rem; line-height: 1; }
.find-drawer-nav .icon-btn:disabled { opacity: 0.35; cursor: default; }

/* thread messages: newest open, older folded */
.find-msg header { cursor: pointer; }
.find-msg-peek { display: none; margin: 0; font-size: 0.8rem; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.find-msg.is-collapsed { padding-top: 10px; padding-bottom: 10px; }
.find-msg.is-collapsed header { margin-bottom: 2px; }
.find-msg.is-collapsed .find-msg-peek { display: block; padding-left: 36px; }
.find-msg.is-collapsed .find-msg-body { display: none; }

/* ── Key numbers (Companies panel) and folded statistics (Emails → Requests) ── */
.bp-stats, .bp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.bp-stat {
  display: grid;
  gap: 1px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--bg-2);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.bp-stat span { font-size: 1.2rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.bp-stat small { font-size: 0.72rem; color: var(--muted); }
.bp-stat em { font-style: normal; font-size: 0.72rem; color: var(--text-2); }
.bp-stat--alert { background: color-mix(in srgb, var(--danger) 8%, var(--bg-3)); border-color: color-mix(in srgb, var(--danger) 25%, transparent); }
.bp-stat--alert span { color: var(--danger); }
.bp-more { border: 1px solid color-mix(in srgb, var(--border) 80%, transparent); border-radius: 12px; }
.bp-more > summary { display: flex; align-items: baseline; gap: 10px; padding: 11px 14px; cursor: pointer; list-style: none; font-size: 0.86rem; font-weight: 650; }
.bp-more > summary::-webkit-details-marker { display: none; }
.bp-more > summary small { flex: 1; font-size: 0.74rem; font-weight: 500; color: var(--muted); }
.bp-more[open] > summary .section-collapse-caret { transform: rotate(90deg); }
.bp-more > div { padding: 0 14px 14px; }
/* ── Find Devs + Companies (find.js) ─────────────────────────────────────── */
.fx-toolbar { row-gap: 8px; }
.fx-search { flex: 2 1 260px; max-width: 420px; }
.fx-toolbar .ms.fx-ms { flex: 0 1 auto; min-width: 128px; max-width: 200px; }
.fx-toolbar .ms .ms-toggle {
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-3);
  color: var(--text-2);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
}
.fx-toolbar .ms.ms--active .ms-toggle, .fx-more .ms.ms--active .ms-toggle {
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-3));
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent);
}
.fx-toolbar .ms .ms-pop { z-index: 30; min-width: 240px; }
.fx-money .field { width: 112px; height: 34px; border-radius: 999px; padding: 2px 12px; font-size: 0.8rem; }
.fx-more-btn { display: inline-flex; align-items: center; gap: 6px; }
.fx-more-btn svg { width: 15px; height: 15px; }
.fx-more-btn.active { background: var(--bg-2); color: var(--text); }
.fx-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 0.68rem; }
.fx-badge.hidden { display: none; }
.fx-more {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px 12px;
  padding: 12px 14px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: color-mix(in srgb, var(--bg-2) 55%, var(--bg-3));
}
.fx-more.hidden { display: none; }
.fx-field { display: grid; gap: 4px; min-width: 0; }
.fx-field > span:first-child { font-size: 0.7rem; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.fx-field .field { width: 100%; height: 32px; border-radius: 10px; font-size: 0.82rem; }
.fx-field .ms .ms-toggle { width: 100%; height: 32px; border-radius: 10px; }
.fx-field--wide { grid-column: span 2; }
.fx-range { display: flex; align-items: center; gap: 6px; }
.fx-range .field { min-width: 0; }
.fx-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.fx-chips.hidden { display: none; }

/* result rows */
.fx-row { grid-template-columns: 40px minmax(0, 1fr) auto; }
.fx-avatar { width: 36px; height: 36px; font-size: 0.74rem; border-width: 0; background: color-mix(in srgb, var(--accent) 10%, var(--bg-2)); color: var(--accent); }
.fx-by { font-weight: 500; font-size: 0.78rem; color: var(--muted); }
.fx-chips-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.fx-chip { font-size: 0.7rem; padding: 1px 8px; border-radius: 999px; background: var(--bg-2); color: var(--text-2); border: 1px solid transparent; white-space: nowrap; }
.fx-chip--hit { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); font-weight: 600; }
.fx-chip--more { background: transparent; color: var(--muted); }
.fx-price { display: grid; justify-items: end; min-width: 86px; line-height: 1.15; }
.fx-price b { font-size: 1rem; font-variant-numeric: tabular-nums; }
.fx-price small { font-size: 0.68rem; color: var(--muted); }
.fx-price--none small { font-style: italic; }
.fx-record { display: grid; justify-items: end; font-size: 0.78rem; color: var(--text-2); line-height: 1.2; }
.fx-record b { font-variant-numeric: tabular-nums; color: var(--text); }
.fx-record small { font-size: 0.68rem; color: var(--muted); }
.fx-record--none small { font-style: italic; }
.find-mini.fx-ok { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.find-mini.fx-no { background: color-mix(in srgb, var(--warning) 14%, transparent); color: var(--warning); }
.find-view.is-compact .fx-chips-row { display: none; }
.find-view.is-compact .fx-avatar { width: 26px; height: 26px; font-size: 0.6rem; }
.find-view.is-compact .fx-row { grid-template-columns: 30px minmax(0, 1fr) auto; }

/* profile panels */
.fx-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 14px; margin: 14px 0 0; }
.fx-facts div { display: grid; gap: 1px; }
.fx-facts dt { font-size: 0.68rem; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.fx-facts dd { margin: 0; font-size: 0.86rem; }
.fx-price-block b { font-size: 1.05rem; }
.fx-deals { border: 1px solid color-mix(in srgb, var(--border) 80%, transparent); border-radius: 10px; max-height: 320px; overflow: auto; }
.fx-deals table { width: 100%; }
.fx-deals thead th { position: sticky; top: 0; }
.fx-kpis { margin-top: 4px; }

@media (max-width: 700px) {
  .fx-row { grid-template-columns: 36px minmax(0, 1fr); }
  .fx-row .find-side { grid-column: 2; }
  .fx-price, .fx-record { justify-items: start; }
  .fx-search { max-width: none; }
  .fx-toolbar .ms.fx-ms { max-width: none; flex: 1 1 140px; }
  .fx-field--wide { grid-column: auto; }
}
.fx-money { position: relative; display: inline-flex; align-items: center; }
.fx-money .field { width: 132px; padding-right: 64px; }
.fx-money span { position: absolute; right: 12px; font-size: 0.7rem; color: var(--muted); pointer-events: none; }

/* CV table in the developer profile: fit the panel instead of the global 720px table width */
.fx-deals { overflow-x: hidden; }
.fx-deals table { min-width: 0; table-layout: fixed; }
.fx-deals th:nth-child(1), .fx-deals td:nth-child(1) { width: 46%; }
.fx-deals th:nth-child(2), .fx-deals td:nth-child(2) { width: 26%; }
.fx-deals th:nth-child(3), .fx-deals td:nth-child(3) { width: 14%; }
.fx-deals th:nth-child(4), .fx-deals td:nth-child(4) { width: 14%; text-align: right; }
.fx-deals td { white-space: normal; overflow-wrap: anywhere; vertical-align: top; }

/* Stalling: the candidate table scrolls inside its card; headers stay visible */
#stallingView .stall-list > .stall-table { max-height: clamp(320px, calc(100vh - 300px), 760px); overflow: auto; overscroll-behavior: contain; }
#stallingView .stall-list > .stall-table thead th { position: sticky; top: 0; z-index: 2; }
@media (max-width: 700px) { #stallingView .stall-list > .stall-table { max-height: 72vh; } }

/* ── Rate approvals (Find info pattern) ─────────────────────────────────── */
.find-tab-count { margin-left: 4px; padding: 0 6px; border-radius: 999px; font-size: 0.72rem; font-weight: 650; background: color-mix(in srgb, var(--muted) 16%, transparent); }
.find-tab-count:empty { display: none; }
.ap-lock.active { color: var(--success); border-color: color-mix(in srgb, var(--success) 45%, transparent); }
.ap-row--warn { box-shadow: inset 3px 0 0 var(--danger); }
.ap-margin { font-variant-numeric: tabular-nums; }
.ap-numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 16px 0 0; }
.ap-numbers > div { padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--muted) 8%, transparent); }
.ap-numbers dt { font-size: 0.7rem; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.ap-numbers dd { margin: 2px 0 0; font-size: 1.15rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.ap-numbers small { color: var(--muted); font-size: 0.75rem; }
.ap-warn { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); font-size: 0.85rem; }
.ap-decide { border-color: color-mix(in srgb, var(--accent, var(--success)) 40%, transparent); }
.ap-decide--done { border-color: color-mix(in srgb, var(--success) 40%, transparent); }
.ap-decide p { margin: 4px 0 0; }
.ap-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ap-form .field { flex: 1 1 140px; max-width: 220px; font-size: 1rem; font-variant-numeric: tabular-nums; }
.ap-live { margin: 8px 0 0; font-size: 0.85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.ap-live--ok { color: var(--success); }
.ap-live--bad { color: var(--danger); }
.ap-desc > summary { cursor: pointer; list-style: none; }
.ap-desc > summary::-webkit-details-marker { display: none; }
.ap-desc > summary h4 { display: inline; margin: 0; }
.ap-desc > summary::after { content: " · show"; color: var(--muted); font-size: 0.75rem; }
.ap-desc[open] > summary::after { content: " · hide"; }
.ap-desc .approval-desc-body { margin-top: 8px; }

/* Names in Find info rows and panels link to Pipedrive (rows are div[role=button] so links can sit inside) */
.find-link-name { color: inherit; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
.find-link-name:hover, .find-link-name:focus-visible { color: var(--accent); border-bottom-color: currentColor; }
.find-row[role="button"] { -webkit-user-select: text; user-select: text; }

/* ── Data quality ───────────────────────────────────────────────────────── */
#dqStats { flex-wrap: wrap; }
#dqStats .stall-stat { min-width: 120px; }
#dqStats .stall-stat.is-active { outline: 2px solid var(--accent); outline-offset: -2px; }
.dq-row { cursor: default; grid-template-columns: minmax(0, 1fr) auto; }
.dq-row:hover { background: transparent; }
.dq-detail { color: var(--text-2); }
.dq-group-head { cursor: default; }
.find-footnote { margin: 0; padding: 10px 18px 14px; font-size: 0.75rem; color: var(--muted); }

/* ── Supplier scorecard ─────────────────────────────────────────────────── */
.sc { display: grid; gap: 10px; }
.sc-funnel { display: grid; gap: 6px; }
.sc-step { display: grid; grid-template-columns: minmax(80px, 1fr) auto; align-items: center; gap: 10px; }
.sc-bar { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 14%, transparent); overflow: hidden; }
.sc-bar span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.sc-step:nth-child(4) .sc-bar span { background: var(--success); }
.sc-step-text { font-size: 0.82rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sc-step-text small { color: var(--muted); margin-left: 2px; }
.sc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.sc-kpi { display: grid; gap: 1px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--muted) 8%, transparent); }
.sc-kpi b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.sc-kpi small { font-size: 0.72rem; color: var(--text-2); }
.sc-kpi em { font-style: normal; font-size: 0.72rem; color: var(--muted); }
.sc-examples { margin: 0; padding-left: 18px; font-size: 0.8rem; color: var(--text-2); }
.sc-examples li + li { margin-top: 3px; }
.sc-line { color: var(--text-2); }

/* Views with side panels don't animate in: a transform or opacity animation creates a containing
   block / stacking context, which clips the fixed side panel or puts it under the top bar. */
.find-view, .approvals-view { animation: none; }

/* ── Meetings → Prep ────────────────────────────────────────────────────── */
.find-note { margin: 0; padding: 10px 18px; font-size: 0.8rem; color: var(--text-2); background: color-mix(in srgb, var(--accent) 6%, transparent); border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent); }
.prep-toggle { white-space: nowrap; }
.prep-row .find-side { gap: 8px; }
.prep-ai p { margin: 0 0 6px; }
.prep-ai h4 small { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted); }
.prep-ai h5 { margin: 10px 0 4px; font-size: 0.72rem; font-weight: 650; color: var(--text-2); }
.prep-ai ul, .prep-list { margin: 0; padding-left: 18px; font-size: 0.86rem; }
.prep-ai li + li, .prep-list > li + li { margin-top: 4px; }
.prep-risks li::marker { color: var(--danger); }
.prep-sub { margin: 3px 0 0; padding-left: 16px; font-size: 0.8rem; color: var(--text-2); }
.prep-overdue { color: var(--danger); }
.prep-log .prep-recap { width: 100%; min-height: 140px; margin: 4px 0 8px; font: inherit; font-size: 0.86rem; line-height: 1.45; resize: vertical; }
.process-notification.is-link { cursor: pointer; }
.process-notification.is-link:hover { background: var(--hover); }
.prep-ino { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.dq-missing { margin-top: 2px; }
.dq-chip { font-size: 0.72rem; padding: 1px 8px; background: color-mix(in srgb, var(--warning, #d97706) 12%, transparent); color: var(--text-2); }

/* Meetings → Prep: Ino's research in the panel */
.prep-ino-block { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.prep-ino-answer { font-size: 0.88rem; line-height: 1.5; overflow-wrap: anywhere; }
.prep-ino-answer p { margin: 0 0 8px; }
.prep-ino-answer h1, .prep-ino-answer h2, .prep-ino-answer h3, .prep-ino-answer h4 { margin: 12px 0 4px; font-size: 0.86rem; font-weight: 650; text-transform: none; letter-spacing: 0; color: var(--text); }
.prep-ino-answer ul, .prep-ino-answer ol { margin: 0 0 8px; padding-left: 18px; }
.prep-ino-answer li + li { margin-top: 3px; }
.prep-ino-answer table { width: 100%; min-width: 0; border-collapse: collapse; font-size: 0.8rem; margin: 6px 0 10px; }
.prep-ino-answer th, .prep-ino-answer td { padding: 4px 6px; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); text-align: left; vertical-align: top; }
.prep-ino-answer a { color: var(--accent); }
.prep-ino-q { margin: 14px 0 6px; padding: 6px 10px; border-radius: 10px; font-size: 0.84rem; background: color-mix(in srgb, var(--muted) 10%, transparent); }
.prep-ino-wait { display: flex; align-items: center; gap: 8px; margin: 4px 0; font-size: 0.85rem; color: var(--text-2); }
.prep-ino-error { margin: 4px 0; color: var(--danger); font-size: 0.85rem; }
.prep-spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--accent) 25%, transparent); border-top-color: var(--accent); animation: prep-spin 0.8s linear infinite; flex: none; }
@keyframes prep-spin { to { transform: rotate(360deg); } }
.prep-ino-ask { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.prep-ino-ask .field { flex: 1 1 220px; }
.prep-intro { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.prep-intro .stall-toggle { white-space: nowrap; }
.prep-switch { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-2); cursor: pointer; padding: 0 4px; }
.prep-switch input { accent-color: var(--accent); }

/* Meetings → Prep: wide panel (2/3 of the screen), brief left, Ino chat right */
.find-drawer--wide .find-drawer-panel { width: min(1240px, max(640px, 66.6vw), 100vw); }
.prep-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 4px; }
.prep-col > .find-block:first-child { margin-top: 12px; }
.prep-col--ino { position: sticky; top: 0; }
@media (max-width: 1100px) { .prep-grid { grid-template-columns: minmax(0, 1fr); } .prep-col--ino { position: static; } }
.prep-ino-chat { display: flex; flex-direction: column; margin-top: 12px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius: 14px; background: color-mix(in srgb, var(--accent) 3%, var(--bg-3)); max-height: calc(100vh - 140px); }
.prep-ino-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.prep-ino-head .find-sub { margin-left: auto; }
.prep-ino-orb { width: 26px; height: 26px; }
.prep-ino-thread { flex: 1 1 auto; overflow-y: auto; padding: 12px; display: grid; gap: 12px; min-height: 120px; }
.prep-ino-thread .chat-row { animation: none; }
.prep-ino-thread .chat-markdown { font-size: 0.86rem; }
.prep-ino-thread .chat-bubble { max-width: 92%; font-size: 0.85rem; }
.prep-ino-thread .chat-actions { opacity: 1; }
.prep-ino-empty { margin: 0; }
.prep-ino-composer { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.prep-ino-composer textarea { flex: 1; resize: vertical; min-height: 44px; font: inherit; font-size: 0.86rem; }
.prep-ino-open { align-self: flex-end; margin: 0 12px 10px; }
.prep-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.prep-bar-actions { display: inline-flex; align-items: center; gap: 10px; }
.prep-check { width: 16px; height: 16px; margin: 0 8px 0 0; accent-color: var(--accent); vertical-align: -3px; cursor: pointer; }
.prep-check-spacer { display: inline-block; width: 24px; }
.prep-row .find-time { white-space: nowrap; }
.prep-row:has(.prep-check, .prep-check-spacer) { grid-template-columns: 124px minmax(0, 1fr) auto; }
.prep-start .find-actions { align-items: center; }

/* Prep list: a selection column on the left of each row */
.prep-row, .prep-row:has(.prep-check, .prep-check-spacer) { grid-template-columns: 22px 96px minmax(0, 1fr) auto; }
.prep-select { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; cursor: pointer; }
.prep-select input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.prep-select span { width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid color-mix(in srgb, var(--muted) 55%, transparent); background: var(--bg-3); transition: background 120ms, border-color 120ms, box-shadow 120ms; position: relative; }
.prep-select:hover span { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.prep-select input:focus-visible + span { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.prep-select input:checked + span { background: var(--accent); border-color: var(--accent); }
.prep-select input:checked + span::after { content: ""; position: absolute; left: 5px; top: 1.5px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.prep-select--none { cursor: default; }
.prep-row.is-checked { background: color-mix(in srgb, var(--accent) 7%, transparent); }

/* Prep: meetings that are over, and the progress steps while "Prep me" runs */
.prep-row.is-past { opacity: 0.55; }
.prep-row.is-past:hover, .prep-row.is-past.is-current { opacity: 0.85; }
.prep-progress h4 { margin-bottom: 10px; }
.prep-steps { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 10px; }
.prep-step { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; }
.prep-step strong { display: block; font-size: 0.88rem; font-weight: 600; }
.prep-step small { display: block; font-size: 0.76rem; color: var(--muted); }
.prep-step-dot { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700;
  border: 1.5px solid color-mix(in srgb, var(--muted) 45%, transparent); color: #fff; }
.prep-step--done .prep-step-dot { background: var(--success); border-color: var(--success); }
.prep-step--now .prep-step-dot { border-color: var(--accent); }
.prep-step--now strong { color: var(--accent); }
.prep-step--todo { opacity: 0.55; }
.prep-step--error .prep-step-dot { background: var(--danger); border-color: var(--danger); }
.prep-step-dot .prep-spinner { width: 12px; height: 12px; }

/* Log the outcome (every meeting) */
.prep-log > summary { cursor: pointer; list-style: none; }
.prep-log > summary::-webkit-details-marker { display: none; }
.prep-log > summary h4 { display: inline; }
.prep-log > summary::after { content: " · open"; color: var(--muted); font-size: 0.75rem; }
.prep-log[open] > summary::after { content: ""; }
.prep-log .prep-recap { margin-top: 8px; }
.prep-log-org { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--text-2); }
.prep-log-org--pick .field { min-width: 220px; }

/* Log the outcome: two clear steps, a preview of what is created, inline status */
.prep-log-steps { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 12px; counter-reset: logstep; }
.prep-log-steps > li { counter-increment: logstep; display: grid; gap: 6px; }
.prep-log-label { font-size: 0.78rem; font-weight: 650; color: var(--text-2); }
.prep-log-label::before { content: counter(logstep) ". "; color: var(--accent); }
.prep-log-where { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.prep-log-org { display: inline-flex; align-items: center; gap: 8px; font-size: 0.88rem; }
.prep-log-org strong, .prep-log-org { color: var(--text); }
.prep-log-preview { margin: 10px 0 6px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 6%, transparent); }
.prep-log-status { display: flex; align-items: center; gap: 8px; margin: 4px 0; font-size: 0.85rem; color: var(--text-2); }
.prep-log-status--error { color: var(--danger); }
.prep-log--done h4 { color: var(--success); }
/* Meeting panel tabs: Live coach | Prep & Ino | Outcome & tasks | Details */
.mt-tabs { display: flex; gap: 4px; margin: 18px 0 14px; padding: 4px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.mt-tab { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 14px; border: 0; border-radius: 9px;
  background: none; font: inherit; font-size: 0.86rem; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; transition: background 0.15s, color 0.15s; }
.mt-tab:hover { color: var(--text); }
.mt-tab[aria-selected="true"] { color: var(--text); background: var(--bg-3); box-shadow: 0 1px 3px rgb(0 0 0 / 0.08), 0 0 0 1px var(--border); }
.mt-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mt-tab-badge { min-width: 18px; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); font-size: 0.72rem; line-height: 18px; text-align: center; }
.mt-tab-badge--todo { background: color-mix(in srgb, var(--warning) 20%, transparent); color: var(--warning); }
.mt-tab-live { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 25%, transparent); }
.mt-pane[hidden] { display: none; }
/* inside a tab the sections need no fold-out header of their own */
.mt-pane > .live-call > summary { pointer-events: none; cursor: default; padding-top: 8px; padding-bottom: 8px; }
.mt-pane > .live-call > summary > .prep-section-icon, .mt-pane > .live-call > summary > h4 { display: none; }
.mt-pane > .live-call > summary::after { content: none !important; }
#mtDrawerBody .mt-pane > :first-child { margin-top: 0; }

/* What's new popup (after a deploy) */
.whats-new { display: grid; gap: 14px; }
.whats-new h4 { margin: 0 0 6px; font-size: 0.9rem; color: var(--accent); }
.whats-new section + section { padding-top: 12px; border-top: 1px solid var(--border); }

/* After the meeting: one card, tabs "Log the outcome" | "Create a task" */
.prep-after-tabs { display: flex; align-items: center; gap: 4px; margin: -2px 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.prep-after-tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 0.86rem; font-weight: 600; color: var(--muted); cursor: pointer; }
.prep-after-tab:hover { color: var(--text); background: var(--hover); }
.prep-after-tab[aria-selected="true"] { color: var(--text); background: var(--bg-3); box-shadow: 0 0 0 1px var(--border); }
.prep-after-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.prep-after-badge { min-width: 18px; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); font-size: 0.72rem; line-height: 18px; text-align: center; }
.prep-after-note { margin-left: auto; color: var(--muted); font-size: 0.75rem; }
.prep-after-tab { white-space: nowrap; }
@media (max-width: 520px) { .prep-after-note { display: none; } }
.prep-after .prep-log[hidden] { display: none; }
#mtDrawerBody .prep-after { margin-top: 18px; padding: 10px 16px 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-left: 4px solid var(--accent); background: var(--bg-3); }
#mtDrawerBody .prep-after .prep-log { margin: 0; border: 0; border-radius: 0; background: none; overflow: visible; }
#mtDrawerBody .prep-after .prep-log > * { margin-left: 0; margin-right: 0; }
#mtDrawerBody .prep-after .prep-log > :last-child { margin-bottom: 0; }
.prep-after .prep-log-steps { margin-top: 0; }
.prep-task .prep-log-head { margin: 4px 0 10px; }
.prep-task .prep-log-label::before { content: none; }
.prep-after .prep-recap { min-height: 110px; }
.prep-after .prep-task .prep-recap { min-height: 56px; margin: 0; }
.prep-task .prep-field > .field { width: 100%; box-sizing: border-box; }
.prep-task .prep-field > .prep-task-due { width: auto; min-width: 150px; }
.prep-task-made { list-style: none; margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--success) 10%, transparent); font-size: 0.85rem; display: grid; gap: 4px; }
.btn-link { border: 0; background: none; padding: 0; font: inherit; font-size: 0.8rem; color: var(--accent); cursor: pointer; text-decoration: underline; }

/* Company search in "Log the outcome" */
.prep-org-pick { position: relative; display: grid; gap: 6px; flex: 1 1 280px; max-width: 420px; }
.prep-org-menu { display: grid; max-height: 240px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-3); box-shadow: var(--shadow-sm, 0 4px 12px rgba(0,0,0,.08)); }
.prep-org-item { text-align: left; border: 0; background: none; padding: 7px 10px; font: inherit; font-size: 0.85rem; color: var(--text); cursor: pointer; }
.prep-org-item:hover, .prep-org-item.is-active { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.prep-org-create { color: var(--accent); font-weight: 600; border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.prep-org-head, .prep-org-empty { margin: 0; padding: 6px 10px; font-size: 0.72rem; color: var(--muted); }
.prep-log-status--error { display: grid; gap: 6px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--danger) 8%, transparent); }
.prep-log-error-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.prep-cost b { color: var(--text); }

/* ── Meeting panel: clear sections (Log the outcome / Prep / Ask Ino) ───── */
#mtDrawerBody .prep-log, #mtDrawerBody .prep-col--brief, #mtDrawerBody .prep-ino-chat, #mtDrawerBody .prep-progress {
  border-radius: 14px; }
#mtDrawerBody .prep-log { margin-top: 18px; padding: 0; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-left: 4px solid var(--accent); background: var(--bg-3); overflow: hidden; }
#mtDrawerBody .prep-log > :not(summary) { margin-left: 16px; margin-right: 16px; }
#mtDrawerBody .prep-log > :last-child { margin-bottom: 14px; }
.prep-section-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; list-style: none; }
.prep-section-head::-webkit-details-marker { display: none; }
.prep-section-head h4 { margin: 0; font-size: 0.95rem; font-weight: 650; text-transform: none; letter-spacing: 0; color: var(--text); }
.prep-section-head small { margin-left: auto; font-size: 0.75rem; color: var(--muted); }
.prep-section-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font-size: 0.85rem; }
.prep-log[open] > .prep-section-head { border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); margin-bottom: 4px; }
.prep-log > .prep-section-head::after { content: "▸"; margin-left: 8px; color: var(--muted); }
.prep-log[open] > .prep-section-head::after { content: "▾"; }
.prep-log > summary.prep-section-head h4 { display: block; }
.prep-section-head--static { cursor: default; padding: 0 2px 8px; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); margin-bottom: 4px; }
.prep-grid { margin-top: 22px; }
.prep-col--brief { padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--border) 85%, transparent); background: var(--bg-3); }
.prep-col--brief > .find-block { border: 0; padding: 10px 0 0; margin-top: 10px; border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent); border-radius: 0; }
.prep-col--brief > .find-block:first-of-type { border-top: 0; margin-top: 4px; }
.prep-col--ino .prep-ino-chat { margin-top: 0; }

/* Where it goes: label | field grid */
.prep-log-form { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 8px 12px; align-items: center; }
.prep-field-label { font-size: 0.78rem; color: var(--muted); }
.prep-field { min-width: 0; }
.prep-field-value { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 34px; padding: 4px 6px 4px 10px;
  border: 1px solid var(--border); border-radius: 8px; background: color-mix(in srgb, var(--muted) 5%, transparent); }
.prep-field-text { font-size: 0.88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prep-project { width: 100%; max-width: 100%; min-width: 0; text-overflow: ellipsis; }
.prep-org-pick { max-width: none; }
.prep-log-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px !important; padding: 8px 10px;
  border-radius: 10px; background: color-mix(in srgb, var(--accent) 6%, transparent); font-size: 0.8rem; }
.prep-log-will { color: var(--text-2); font-weight: 600; margin-right: 2px; }
.prep-chip { padding: 2px 8px; border-radius: 999px; background: var(--bg-3); border: 1px solid color-mix(in srgb, var(--border) 80%, transparent); font-size: 0.76rem; }
.prep-info { margin-left: auto; color: var(--muted); cursor: help; }
#mtDrawerBody .prep-log .ap-form { margin-top: 12px; justify-content: flex-end; }

/* Meetings: Fireflies summary + transcript under "Log the outcome" */
.ff-notes .chat-markdown { margin-top: 8px; font-size: 0.88rem; }
.ff-notes-label { margin: 12px 0 4px; font-size: 0.78rem; font-weight: 650; color: var(--text-2); }
.ff-transcript { margin-top: 12px; border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent); padding-top: 8px; }
.ff-transcript > summary { cursor: pointer; font-size: 0.82rem; font-weight: 600; color: var(--accent); }
.ff-transcript-text { margin-top: 8px; max-height: 420px; overflow-y: auto; padding-right: 6px; font-size: 0.84rem; line-height: 1.45; color: var(--text-2); }
.ff-transcript-text p { margin: 0 0 6px; }
.ff-transcript-text strong { color: var(--text); font-weight: 650; }

/* Meetings → Upcoming: today's meetings that are already over stay visible, greyed out */
.find-row--over { opacity: 0.55; }
.find-row--over:hover, .find-row--over.is-current { opacity: 0.85; }
.find-earlier { margin: 0 0 6px; padding: 0 14px; font-size: 0.82rem; }

/* Sync popover: one panel, every data source as a row (Pipedrive first, with its own actions) */
.sync-panel { width: 360px; }
.sync-source-card { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.sync-source-card-head { display: grid; }
.sync-source-card-head strong, .sync-source-text strong { font-size: 0.86rem; font-weight: 650; }
.sync-panel .sync-source-card-head .sync-schedule-hint, .sync-source-text .sync-schedule-hint { margin: 0; font-size: 0.74rem; color: var(--muted); }
.sync-sources { gap: 0; padding-top: 0; border-top: 0; }
.sync-source { padding: 10px 0; border-top: 1px solid var(--border); }


/* Log the outcome → "Where it goes": full-width company search; the empty hint is plain text, not a box */
.prep-org-pick .field { width: 100%; height: 34px; }
.prep-org-menu:has(> .prep-org-empty:only-child) { border: 0; box-shadow: none; background: none; }
.prep-org-menu > .prep-org-empty:only-child { padding: 0 2px; }
.prep-log-form { align-items: start; }
.prep-log-form > .prep-field-label { padding-top: 9px; }

/* Meetings: Teams / Zoom calls have no attendance stats; their pill carries the platform icon */
.find-pill--platform { display: inline-flex; align-items: center; gap: 5px; }
.find-platform-icon { width: 13px; height: 13px; flex-shrink: 0; }
.find-platform-icon--teams { color: #5b5fc7; }
.find-platform-icon--zoom { color: #2d8cff; }

/* Log the outcome: "Log as" Meeting / Call and "Log on" Company / Project switches */
.prep-seg { display: inline-flex; padding: 2px; gap: 2px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-2); }
.prep-seg-option { position: relative; cursor: pointer; }
.prep-seg-option input { position: absolute; opacity: 0; pointer-events: none; }
.prep-seg-option span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 6px; font-size: 0.82rem; color: var(--muted); }
.prep-seg-option span small { font-size: 0.72rem; opacity: 0.8; }
.prep-seg-option:hover span { color: var(--text); background: var(--hover); }
.prep-seg-option input:checked + span { background: var(--bg-3); color: var(--text); font-weight: 600; box-shadow: 0 0 0 1px var(--border); }
.prep-seg-option input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.prep-field-hint { display: inline-block; padding-top: 8px; }
#mtDrawerTitle .find-pill--blocker { vertical-align: middle; font-size: 0.72rem; }

/* Log the outcome: template picker next to "What happened" */
.prep-log-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#mtDrawerBody .prep-template { width: auto; max-width: 60%; height: 30px; padding: 2px 28px 2px 10px; font-size: 0.8rem; line-height: 1.2; }

/* Meetings: live call coach
   One answer card per question (Say, Ask, the next step, an internal footnote), a quiet data pill
   under it, and a message-style composer. Calm surfaces, generous spacing, one accent. */
.live-call > summary { cursor: pointer; }
.live-call--now { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 8%, transparent); }
.live-clock { margin-left: 6px; font-variant-numeric: tabular-nums; }
.live-cost { font-variant-numeric: tabular-nums; }

.live-thread { display: grid; gap: 28px; max-height: 560px; overflow-y: auto; overflow-anchor: none; margin: 16px -4px 0; padding: 4px 8px 4px 4px; }
.live-thread::-webkit-scrollbar { width: 6px; }
.live-thread::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted-2) 40%, transparent); border-radius: 3px; }

.live-empty { display: grid; justify-items: center; gap: 6px; padding: 28px 24px; text-align: center; border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-3)); border: 1px dashed color-mix(in srgb, var(--accent) 25%, var(--border)); color: var(--muted); font-size: 0.86rem; line-height: 1.5; }
.live-empty-icon { font-size: 1.4rem; }
.live-empty strong { color: var(--text); font-size: 0.95rem; font-weight: 650; }
.live-empty span:last-child { max-width: 360px; }

/* a question and its answer; earlier turns step back */
.live-turn { display: grid; gap: 12px; }
.live-turn:not(.is-last) { opacity: 0.55; transition: opacity 0.2s ease; }
.live-turn:not(.is-last):hover { opacity: 1; }
.live-q { justify-self: end; max-width: 80%; padding: 9px 14px; border-radius: 18px 18px 6px 18px; background: var(--accent); color: var(--accent-contrast);
  font-size: 0.88rem; line-height: 1.4; white-space: pre-wrap; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08); }
.live-a { display: grid; gap: 12px; }

.live-card { display: grid; gap: 18px; padding: 20px 22px; border-radius: 18px; background: var(--bg-3);
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.14); }
.live-card--thinking { justify-self: start; padding: 14px 18px; }
.live-dots { display: inline-flex; gap: 5px; }
.live-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-2); animation: live-dot 1.2s infinite ease-in-out; }
.live-dots i:nth-child(2) { animation-delay: 0.15s; }
.live-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes live-dot { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .live-dots i { animation: none; opacity: 0.6; } }

.live-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); }
.live-lead { font-size: 0.94rem; line-height: 1.5; color: var(--text); }
.live-lead p { margin: 0; }

.live-sec { display: grid; gap: 6px; }
.live-sec header { display: flex; align-items: center; justify-content: space-between; min-height: 22px; }
.live-sec p { margin: 0; font-size: 0.97rem; line-height: 1.55; color: var(--text); letter-spacing: -0.003em; }
.live-sec--say { padding-left: 14px; border-left: 3px solid var(--accent); }
.live-sec--say .live-label { color: var(--accent); }
.live-sec--say p { font-weight: 500; }
.live-sec--ask { padding-left: 14px; border-left: 3px solid color-mix(in srgb, var(--muted-2) 45%, transparent); }
.live-copy { padding: 3px 10px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--accent);
  font-size: 0.74rem; font-weight: 600; cursor: pointer; opacity: 0; transition: opacity 0.15s ease, background 0.15s ease; }
.live-card:hover .live-copy, .live-copy:focus-visible { opacity: 1; }
.live-copy:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }

.live-next { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px;
  background: color-mix(in srgb, var(--success) 8%, var(--bg-3)); }
.live-next-icon { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--success); color: #fff; font-size: 0.85rem; font-weight: 700; }
.live-next .live-label { color: var(--success); }
.live-next p { margin: 3px 0 0; font-size: 0.92rem; line-height: 1.5; font-weight: 600; color: var(--text); }

.live-internal { display: flex; gap: 8px; align-items: baseline; margin: -4px 0 0; font-size: 0.8rem; line-height: 1.45; color: var(--muted); }
.live-internal b { color: var(--warning); font-weight: 650; margin-right: 2px; }
.live-note { margin: 0; font-size: 0.78rem; color: var(--muted-2); }
.live-error { padding: 12px 16px; border-radius: 14px; background: color-mix(in srgb, var(--danger) 8%, transparent); color: var(--danger); font-size: 0.86rem; }

/* the data check: one quiet pill under the card; its facts open on click */
.live-pill { display: inline-flex; align-items: center; gap: 8px; justify-self: start; height: 30px; margin-left: 6px; padding: 0 8px 0 12px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent); background: var(--bg-3); color: var(--muted); font-size: 0.78rem; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); }
.live-pill .prep-spinner { width: 11px; height: 11px; }
.live-pill.is-ready { padding-right: 12px; cursor: pointer; color: var(--text); transition: background 0.15s ease, border-color 0.15s ease; }
.live-pill.is-ready b { color: var(--accent); font-weight: 650; }
.live-pill.is-ready:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); background: color-mix(in srgb, var(--accent) 5%, var(--bg-3)); }
.live-pill.is-quiet { height: 22px; padding: 0 4px; border: 0; background: none; box-shadow: none; color: var(--muted-2); font-size: 0.75rem; }
.live-pill-x { display: grid; place-items: center; width: 20px; height: 20px; border: 0; border-radius: 50%; background: none; color: var(--muted-2); font-size: 1rem; line-height: 1; cursor: pointer; }
.live-pill-x:hover { background: var(--hover); color: var(--text); }
.live-backed { display: grid; gap: 10px; justify-items: start; }
.live-more-body { justify-self: stretch; padding: 14px 18px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 4%, var(--bg-2)); font-size: 0.88rem; line-height: 1.5; }
.live-more-body ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.live-more-body p { margin: 0 0 6px; }
.live-more-body p:last-child { margin-bottom: 0; }

/* composer: situations, then one message field with the send button inside */
.live-composer { display: grid; gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent); }
.live-prompts { display: flex; flex-wrap: wrap; gap: 8px; }
.live-chip { padding: 6px 13px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--border) 75%, transparent); background: var(--bg-3); color: var(--text-2);
  font-size: 0.8rem; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.live-chip:hover:not([disabled]) { background: color-mix(in srgb, var(--accent) 6%, var(--bg-3)); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); color: var(--text); }
.live-chip:active:not([disabled]) { transform: scale(0.98); }
.live-chip[disabled] { opacity: 0.45; cursor: default; }
.live-form { display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 16px; border-radius: 22px; border: 1px solid var(--border); background: var(--bg-3);
  transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.live-form:focus-within { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent); }
#mtDrawerBody .live-input { flex: 1; min-width: 0; height: 32px; min-height: 32px; max-height: 140px; padding: 6px 0; border: 0; outline: 0; background: none; box-shadow: none;
  resize: none; overflow-y: hidden; scrollbar-width: none; color: var(--text); font: inherit; font-size: 0.94rem; line-height: 1.4; }
.live-send { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--accent); color: #fff; cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease; }
.live-send svg { width: 16px; height: 16px; }
.live-send:hover { background: var(--accent-strong); }
.live-send:active { transform: scale(0.94); }
.live-send.is-stop { background: var(--text-2); }
.live-send.is-stop span { width: 10px; height: 10px; border-radius: 2px; background: #fff; }
.live-foot { display: flex; justify-content: space-between; align-items: center; padding: 0 6px; font-size: 0.72rem; color: var(--muted-2); }
.live-foot kbd { padding: 1px 5px; border-radius: 4px; border: 1px solid color-mix(in srgb, var(--border) 80%, transparent); background: var(--bg-2); font: inherit; font-size: 0.68rem; }

/* Live call coach: what it knows about the client (one quiet line under the header) */
.live-brief { display: flex; align-items: center; gap: 10px; min-height: 40px; margin-top: 14px; padding: 8px 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-3)); color: var(--muted); font-size: 0.8rem; line-height: 1.35; }
.live-brief:empty { display: none; }
.live-brief .prep-spinner { width: 12px; height: 12px; flex: none; }
.live-brief b { color: var(--text); font-weight: 600; margin-right: 6px; }
.live-brief small { color: var(--muted); font-size: 0.78rem; }
.live-brief-check { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: var(--accent-contrast); font-size: 0.7rem; font-weight: 700; }

/* Mailbox view: developer mailboxes (devmail-admin.js). No row lines, no pills: rows separate by spacing and hover. */
/* the shared mailbox and when mail was last checked: one quiet line under the list */
.devmail-status { display: grid; gap: 2px; margin: 18px 0 0; font-size: 0.78rem; color: var(--muted); line-height: 1.5; }
.devmail-status .devmail-warn { color: #92400e; }
.devmail-admin .status-line { color: var(--text-2); }
.devmail-admin .status-line.devmail-error { color: #c0392f; }
.devmail-admin .status-line:empty { display: none; }
/* "Add developer": a card that opens from the header button, two tabs */
.devmail-add { margin: 0 0 18px; padding: 14px 16px 16px; border-radius: 14px; background: var(--bg-2); }
.devmail-add-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.devmail-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: 10px; background: var(--hover); }
.devmail-tab { border: 0; background: none; padding: 6px 12px; border-radius: 8px; font: inherit; font-size: 0.84rem; color: var(--text-2); cursor: pointer; }
.devmail-tab[aria-selected="true"] { background: var(--bg-3); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(7, 26, 36, .08); }
.devmail-hint { grid-column: 1 / -1; margin: 0; font-size: 0.82rem; color: var(--text-2); }
/* Mailbox → "How it works" */
.devmail-howto { max-height: min(86vh, 900px); }
.devmail-howto-body { overflow-y: auto; padding-right: 4px; font-size: 0.88rem; line-height: 1.5; color: var(--text-2); }
.devmail-howto-body h4 { margin: 18px 0 6px; font-size: 0.92rem; color: var(--text); }
.devmail-howto-body ol, .devmail-howto-body ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.devmail-howto-body strong { color: var(--text); font-weight: 600; }
.devmail-howto-lead { margin: 0; color: var(--text); }
.devmail-howto-tip { margin: 8px 0 0; padding: 8px 12px; border-radius: var(--radius-md, 10px); background: var(--bg-2); font-size: 0.84rem; }
.devmail-options { grid-column: 1 / -1; }
.devmail-options summary { cursor: pointer; font-size: 0.82rem; color: var(--text-2); }
.devmail-options-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin-top: 10px; }
.devmail-steps { grid-column: 1 / -1; margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 0.84rem; color: var(--text-2); }
.devmail-steps strong { color: var(--text); font-weight: 600; }
/* "Needs you": the setup, or emails that found no developer (collapsible, one compact line per email) */
.devmail-attention { margin: 0 0 14px; padding: 2px 4px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--warning) 22%, transparent);
  background: color-mix(in srgb, var(--warning) 5%, transparent); }
.devmail-attention h3 { margin: 10px 10px 4px; font-size: 0.92rem; font-weight: 600; color: var(--text); }
.devmail-attention > p { margin: 0 10px 10px; font-size: 0.82rem; color: var(--text-2); max-width: 90ch; }
.devmail-pending > summary { display: flex; align-items: center; gap: 8px; padding: 9px 10px; cursor: pointer; list-style: none; border-radius: 10px; }
.devmail-pending > summary::-webkit-details-marker { display: none; }
.devmail-pending > summary::before { content: ""; width: 7px; height: 7px; border: solid var(--muted); border-width: 0 1.5px 1.5px 0;
  transform: rotate(-45deg); transition: transform .15s ease-out; margin: 0 4px 0 2px; }
.devmail-pending[open] > summary::before { transform: rotate(45deg); }
.devmail-pending > summary:hover { background: var(--hover); }
.devmail-pending-title { font-size: 0.88rem; font-weight: 600; color: var(--text); }
.devmail-count { padding: 1px 8px; border-radius: 999px; font-size: 0.74rem; font-weight: 600; color: var(--warning);
  background: color-mix(in srgb, var(--warning) 12%, transparent); }
.devmail-pending-why { margin-left: auto; font-size: 0.76rem; color: var(--muted); text-decoration: underline dotted; cursor: help; }
.devmail-pending-bar { display: flex; align-items: center; gap: 10px; padding: 0 10px 6px; }
.devmail-check-all { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--muted); cursor: pointer; }
.devmail-unassigned { list-style: none; margin: 0; padding: 0 4px 6px; display: grid; gap: 2px; }
.devmail-unassigned li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; padding: 6px 6px;
  border-radius: 8px; }
.devmail-unassigned li:hover { background: var(--hover); }
.devmail-unassigned input[type="checkbox"], .devmail-check-all input { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); }
.devmail-unassigned-text { flex: 1 1 260px; min-width: 0; display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; overflow-wrap: anywhere; }
.devmail-unassigned-text strong { font-size: 0.85rem; font-weight: 600; color: var(--text); }
.devmail-unassigned-text span { font-size: 0.76rem; color: var(--muted); }
.devmail-tag { margin-right: 6px; padding: 0 6px; border-radius: 4px; font-size: 0.68rem; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); vertical-align: 1px; }
.devmail-unassigned select { width: auto; max-width: 100%; min-height: 28px; height: 28px; padding: 0 6px; font-size: 0.8rem; }
.devmail-unassigned .btn-sm, .devmail-pending-bar .btn-sm { min-height: 28px; height: 28px; padding: 0 10px; font-size: 0.8rem; }
/* "Details" of one email without a developer: everyone on it, then the text */
.devmail-mail-detail { flex: 1 1 100%; min-width: 0; margin: 4px 0 2px 25px; padding: 10px 12px; border-radius: 10px;
  background: var(--bg-2); font-size: 0.8rem; }
.devmail-mail-detail dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 12px; margin: 0; }
.devmail-mail-detail dt { color: var(--muted); }
.devmail-mail-detail dd { margin: 0; overflow-wrap: anywhere; color: var(--text); }
.devmail-mail-detail dd strong { font-weight: 600; }
.devmail-mail-detail h5 { margin: 10px 0 4px; font-size: 0.74rem; font-weight: 600; color: var(--muted); }
.devmail-mail-text { max-height: 240px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); line-height: 1.45; }
@media (max-width: 600px) { .devmail-mail-detail { margin-left: 0; } .devmail-mail-detail dl { grid-template-columns: 1fr; } }
/* the result of create / retry / switch: one compact card */
.devmail-done { display: grid; gap: 6px; margin: 0 0 4px; padding: 10px 12px; border-radius: 12px; background: var(--bg-2); max-width: 820px; }
.devmail-done-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.86rem; }
.devmail-done-head strong { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.devmail-done-head > span:not(.devmail-check-icon) { color: var(--text-2); font-size: 0.8rem; }
.devmail-done .devmail-check-icon { width: 18px; height: 18px; }
.devmail-dismiss { margin-left: auto; border: 0; background: none; color: var(--muted); font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.devmail-dismiss:hover { background: var(--hover); color: var(--text); }
.devmail-done-note { margin: 0; padding-left: 26px; font-size: 0.8rem; color: var(--text-2); }
.devmail-done-note.is-warn, .devmail-done-note.is-fail { color: color-mix(in srgb, var(--warning) 80%, var(--text)); }
.devmail-done .devmail-link { margin: 2px 0 0 26px; }
.devmail-texts { margin-left: 26px; }
.devmail-texts > summary { cursor: pointer; font-size: 0.8rem; color: var(--accent); width: fit-content; }
/* admin unlock: one password for the page */
.devmail-lock.is-unlocked { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.devmail-unlock { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 10px 12px; border-radius: 12px; background: var(--bg-2); font-size: 0.82rem; color: var(--text-2); }
.devmail-unlock .field { width: 200px; max-width: 100%; min-height: 30px; height: 30px; }
.devmail-unlock-error { color: #c0392f; }
.devmail-person { position: relative; }
.devmail-people { position: absolute; top: 100%; left: 0; right: 0; z-index: 5; background: #fff; border-radius: 12px;
  box-shadow: 0 2px 6px rgba(7, 26, 36, .08), 0 12px 28px rgba(7, 26, 36, .14); max-height: 260px; overflow: auto; padding: 4px; }
.devmail-person-option { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 7px 9px; border-radius: 8px; cursor: pointer; font: inherit; }
.devmail-person-option:hover, .devmail-person-option:focus-visible { background: rgba(15, 118, 110, .08); }
.devmail-address-field { grid-column: span 2; }
@media (max-width: 600px) { .devmail-address-field { grid-column: auto; } }
.devmail-address-row { display: flex; align-items: center; gap: 6px; }
.devmail-address-row .field { min-width: 0; flex: 1; }
.devmail-address-row span { white-space: nowrap; }
.devmail-link { display: flex; gap: 6px; margin-top: 6px; max-width: 640px; }
.devmail-link .field { flex: 1; min-width: 0; font-size: 12px; }
.devmail-error { color: #c0392f; }
/* developer list: one row per address, rows separate by space and a hover fill (no lines, no stripes) */
.devmail-list-wrap { margin-top: 22px; }
.devmail-list-title { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; font-size: 0.95rem; font-weight: 600; color: var(--text); }
.devmail-list-title span { font-size: 0.8rem; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.devmail-empty { margin: 18px 0 4px; color: var(--muted); }
/* one shrinkable column: a long address or the buttons never push the list wider than the screen */
.devmail-list { list-style: none; margin: 0 -10px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.devmail-item { min-width: 0; }
.devmail-item { border-radius: 12px; transition: background-color .15s ease-out; }
.devmail-item:hover, .devmail-item:focus-within { background: var(--hover); }
.devmail-item.is-off .devmail-who, .devmail-item.is-off .devmail-avatar { opacity: .6; }
/* fixed status and action columns, so every row lines up with the one above */
.devmail-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) 190px 300px; align-items: center; gap: 14px; padding: 12px 10px; }
.devmail-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font-size: 0.78rem; font-weight: 650; }
.devmail-who { display: grid; gap: 1px; min-width: 0; }
.devmail-who strong { font-size: 0.92rem; font-weight: 600; color: var(--text); }
.devmail-addr { font-size: 0.85rem; color: var(--text-2); overflow-wrap: anywhere; }
.devmail-facts { font-size: 0.76rem; color: var(--muted); }
.devmail-state { font-size: 0.82rem; font-weight: 500; color: var(--text-2); }
.devmail-state.is-attention { color: var(--warning); font-weight: 600; }
.devmail-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
/* "More": a native <details> menu */
.devmail-more { position: relative; }
.devmail-more > summary { list-style: none; cursor: pointer; }
.devmail-more > summary::-webkit-details-marker { display: none; }
.devmail-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; display: grid; min-width: 190px; padding: 4px;
  background: var(--bg-3, #fff); border-radius: 12px; box-shadow: 0 2px 6px rgba(7, 26, 36, .08), 0 12px 28px rgba(7, 26, 36, .14); }
.devmail-menu-item { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--text);
  font: inherit; font-size: 0.85rem; text-align: left; cursor: pointer; }
.devmail-menu-item:hover, .devmail-menu-item:focus-visible { background: var(--hover); outline: none; }
.devmail-menu-item.is-danger { color: var(--danger); }
/* Disable / Remove: confirm with the admin password, under the developer */
/* ── Mailbox monitoring: one line of numbers, then a real table (filled header, soft zebra rows). Compact on
   purpose: small text buttons in the rows, 34 px fields and buttons in the form. ──────────────────────────── */
.devmail-stats { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 18px 0 12px; font-size: 0.84rem; color: var(--text-2); }
.devmail-stats b { font-size: 0.95rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.devmail-stats .is-attention, .devmail-stats .is-attention b { color: color-mix(in srgb, var(--warning) 80%, var(--text)); }
#mailboxView .devmail-form .field { min-height: 34px; height: 34px; padding: 0 10px; font-size: 0.86rem; }
#mailboxView .devmail-form .btn, #mailboxView .stall-hero .btn { min-height: 34px; height: 34px; padding: 0 14px; font-size: 0.84rem; }
#mailboxView .devmail-form .filter-field span { font-size: 0.76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the create form: three equal columns (who / where the invite goes / the address), the button under them */
#mailboxView .devmail-form { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 16px; align-items: end; }
#mailboxView #devmailMoveForm { grid-template-columns: repeat(2, minmax(0, 1fr)) auto; }
#mailboxView .devmail-form[hidden] { display: none; }
@media (max-width: 1000px) { #mailboxView .devmail-form, #mailboxView #devmailMoveForm { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#mailboxView .devmail-form .devmail-address-field { grid-column: auto; }
#mailboxView .devmail-form #devmailCreateBtn, #mailboxView .devmail-form #devmailMoveBtn { justify-self: start; }
@media (max-width: 760px) { #mailboxView .devmail-form { grid-template-columns: minmax(0, 1fr); } }
.devmail-table .devmail-actions { gap: 2px; }
.devmail-table .devmail-actions .btn, .devmail-table .devmail-more > summary.btn {
  min-height: 30px; height: 30px; padding: 0 9px; border: 0; border-radius: 8px; background: transparent; box-shadow: none;
  color: var(--accent-strong, var(--accent)); font-size: 0.8rem; font-weight: 600;
}
.devmail-table .devmail-actions .btn:hover, .devmail-table .devmail-more > summary.btn:hover { background: var(--bg-2); }
.devmail-table .devmail-actions .btn-primary { background: var(--accent); color: #fff; }
/* the status words: soft fill + word, no dots */
.dm-pill { display: inline-flex; align-items: center; gap: 4px; justify-self: start; width: max-content; max-width: 100%;
  padding: 2px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.dm-pill b { font-weight: 800; font-variant-numeric: tabular-nums; }
.dm-pill.is-ok { background: color-mix(in srgb, var(--success) 13%, var(--bg-3)); color: color-mix(in srgb, var(--success) 85%, var(--text)); }
.dm-pill.is-warn { background: color-mix(in srgb, var(--warning) 15%, var(--bg-3)); color: color-mix(in srgb, var(--warning) 82%, var(--text)); }
.dm-pill.is-quiet { background: var(--bg-2); color: var(--text-2); font-weight: 500; }
.devmail-stats { gap: 6px 8px; }
.devmail-stats .dm-pill { padding: 3px 11px; font-size: 0.8rem; }
.devmail-cell .devmail-sub { margin-top: 2px; }
/* every column starts on the same line: the name with its status, then one pill per column, the buttons centred on it */
.devmail-table .devmail-list .devmail-row { align-items: start; }
.devmail-who-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 23px; }
.devmail-table .devmail-actions { margin-top: -4px; }
.devmail-table { --dm-cols: minmax(190px, 1.5fr) minmax(120px, 1fr) minmax(110px, 0.9fr) minmax(140px, 1.1fr) minmax(120px, 1fr) minmax(220px, auto); }
.devmail-thead, .devmail-table .devmail-row { display: grid; grid-template-columns: var(--dm-cols); align-items: center; gap: 14px; }
.devmail-thead { padding: 7px 12px; border-radius: 10px; background: var(--bg-2); font-size: 0.78rem; font-weight: 650; color: var(--text-2); }
.devmail-table .devmail-list { margin: 4px 0 0; gap: 0; }
.devmail-table .devmail-item { border-radius: 10px; }
.devmail-table .devmail-item:nth-child(even) { background: color-mix(in srgb, var(--bg-2) 50%, transparent); }
.devmail-table .devmail-row { padding: 8px 12px; }
.devmail-cell { display: grid; gap: 1px; min-width: 0; }
.devmail-main { font-size: 0.86rem; font-weight: 500; color: var(--text); }
.devmail-main.is-strong { font-weight: 700; }
.devmail-main.is-quiet { color: var(--muted); }
.devmail-main.is-ok { color: color-mix(in srgb, var(--success, #15803d) 80%, var(--text)); font-weight: 600; }
.devmail-main.is-attention { color: color-mix(in srgb, var(--warning) 75%, var(--text)); font-weight: 650; }
.devmail-sub { font-size: 0.76rem; color: var(--muted); overflow-wrap: anywhere; }
.devmail-table .devmail-who strong { font-size: 0.92rem; }
.devmail-table .devmail-addr { font-size: 0.78rem; color: var(--muted); overflow-wrap: anywhere; }
.devmail-badge { justify-self: start; margin-top: 3px; padding: 1px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; background: var(--bg-2); color: var(--text-2); }
.devmail-badge.is-active { background: color-mix(in srgb, var(--success, #15803d) 14%, var(--bg-3)); color: color-mix(in srgb, var(--success, #15803d) 80%, var(--text)); }
.devmail-badge.is-invited, .devmail-badge.is-provisioning { background: color-mix(in srgb, var(--warning) 14%, var(--bg-3)); color: color-mix(in srgb, var(--warning) 75%, var(--text)); }
.devmail-details { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 20px; margin: 0 12px 12px; padding: 12px 14px; border-radius: 10px; background: var(--bg-3); }
.devmail-details div { min-width: 0; }
.devmail-details dt { font-size: 0.74rem; color: var(--muted); }
.devmail-details dd { margin: 1px 0 0; font-size: 0.84rem; color: var(--text); overflow-wrap: anywhere; }
@media (max-width: 1100px) {
  /* one card per developer: the column names go in front of the values */
  .devmail-thead { display: none; }
  .devmail-table .devmail-row { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 10px 16px; }
  .devmail-table .devmail-who, .devmail-table .devmail-actions { grid-column: 1 / -1; }
  .devmail-table .devmail-actions { justify-content: flex-start; flex-wrap: wrap; }
  .devmail-cell[data-label]:not(.devmail-who)::before { content: attr(data-label); font-size: 0.72rem; color: var(--muted); }
}
@media (max-width: 520px) { .devmail-table .devmail-row { grid-template-columns: minmax(0, 1fr); } }

/* texts to copy for the client and the supplier (after create / resend, and per developer in More) */
.devmail-templates { display: grid; gap: 12px; max-width: 760px; margin: 10px 0 4px; }
.devmail-item .devmail-templates { margin: 0 10px 10px 60px; }
.devmail-templates h4 { margin: 0; font-size: 0.95rem; font-weight: 650; }
.devmail-templates-note { margin: -4px 0 0; font-size: 0.82rem; color: var(--text-2); }
.devmail-template { display: grid; gap: 8px; justify-items: start; padding: 12px 14px; border-radius: 12px; background: var(--bg-2); }
.devmail-template-head { display: grid; gap: 2px; }
.devmail-template-head strong { font-size: 0.9rem; }
.devmail-template-head span { font-size: 0.8rem; color: var(--text-2); }
.devmail-template textarea { width: 100%; max-width: none; resize: vertical; font: inherit; font-size: 0.86rem; line-height: 1.5; }
.devmail-confirm { margin: 0 10px 10px 60px; padding: 10px 12px; border-radius: 10px; background: var(--bg-2); font-size: 0.82rem; }
.devmail-confirm p { margin: 0 0 8px; max-width: 78ch; color: var(--text-2); overflow-wrap: anywhere; }
.devmail-confirm-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.devmail-confirm-row .field { width: 190px; max-width: 100%; min-height: 30px; height: 30px; }
.devmail-confirm .devmail-confirm-error { color: var(--danger); }
.devmail-confirm .devmail-confirm-error:empty { display: none; }
.devmail-confirm .btn-danger { background: var(--danger); color: #fff; border-color: transparent; }
.devmail-confirm .btn-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 85%, #000); }
/* "Test setup": one line per check, the fix right under the problem */
.devmail-check { margin: 0 0 18px; padding: 14px 16px; border-radius: 12px; background: var(--bg-2); }
.devmail-check-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.devmail-check-head { margin: 0; font-weight: 600; color: var(--text); }
.devmail-check-head span { margin-left: 6px; font-weight: 400; font-size: 0.8rem; color: var(--muted); }
.devmail-check-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.devmail-check-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 0.84rem; }
.devmail-check-list li div { display: grid; gap: 1px; min-width: 0; }
.devmail-check-list li span { color: var(--text-2); overflow-wrap: anywhere; }
.devmail-check-list strong { font-weight: 600; color: var(--text); }
.devmail-check-icon { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; }
.devmail-check-icon svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.is-ok .devmail-check-icon { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.is-warn .devmail-check-icon { background: color-mix(in srgb, var(--warning) 14%, transparent); color: var(--warning); }
.is-fail .devmail-check-icon { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.devmail-check-list .devmail-check-fix { color: var(--text); font-weight: 500; }
/* what "Create and send invite" did, in the message line under the form */
.devmail-result { margin: 4px 0 10px; padding: 12px 14px; border-radius: 12px; background: var(--bg-2); max-width: 760px; }
/* what went wrong, under the developer, with the way out next to it */
.devmail-problem { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 10px 10px 60px; padding: 10px 14px;
  border-radius: 10px; background: color-mix(in srgb, var(--warning) 9%, transparent); color: var(--text-2); font-size: 0.82rem; line-height: 1.5; }
.devmail-problem p { margin: 0; max-width: min(78ch, 100%); min-width: 0; overflow-wrap: anywhere; }
.devmail-problem strong { color: var(--warning); font-weight: 600; }
.devmail-problem.is-move { background: var(--bg-2); display: grid; justify-content: stretch; justify-items: start; gap: 8px; }
.devmail-problem.is-move strong { color: var(--text); }
.devmail-problem.is-move .devmail-warn strong { color: var(--warning); }
.devmail-show-removed { margin: 0 0 8px 2px; }
/* the valid sign-up link under a developer's row */
.devmail-signup { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0 12px 10px 12px; font-size: 0.8rem; color: var(--text-2); }
.devmail-signup-label { font-weight: 600; color: var(--text); }
.devmail-signup .devmail-link { margin-top: 0; flex: 1 1 360px; }
.devmail-signup .devmail-link .field { min-height: 32px; height: 32px; }
.devmail-signup-until { color: var(--muted); max-width: 78ch; }
.devmail-move-list { grid-column: 1 / -1; }
.devmail-move-list textarea { min-height: 72px; resize: vertical; font-family: inherit; }
/* moving from Google: the three steps, the current one highlighted */
.devmail-move-steps { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; font-size: 0.78rem; color: var(--muted); }
.devmail-move-steps li { display: inline-flex; align-items: center; gap: 6px; }
.devmail-move-steps li span { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 0.7rem;
  font-weight: 700; border: 1px solid var(--border); }
.devmail-move-steps li.is-done { color: var(--text-2); }
.devmail-move-steps li.is-done span { border-color: transparent; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.devmail-move-steps li.is-now { color: var(--text); font-weight: 600; }
.devmail-move-steps li.is-now span { border-color: transparent; background: var(--accent); color: #fff; }
.devmail-progress { width: min(420px, 100%); height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 18%, transparent); overflow: hidden; }
.devmail-progress span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .4s ease; }
.devmail-progress-line { font-size: 0.78rem; color: var(--text-2); }
@media (max-width: 900px) {
  .devmail-row { grid-template-columns: 36px minmax(0, 1fr); row-gap: 8px; }
  .devmail-state { grid-column: 2; }
  .devmail-actions { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; }
  .devmail-problem { margin-left: 10px; flex-direction: column; align-items: flex-start; }

  .devmail-confirm { margin-left: 10px; }
  .devmail-item .devmail-templates { margin-left: 10px; }
}
/* phones: buttons and fields big enough for a thumb */
@media (max-width: 760px) {
  #mailboxView .btn, #mailboxView .field { min-height: 40px; }
  .devmail-menu-item { padding: 12px 10px; }
}

/* ── Interviews (find.js: showInterviews) ─────────────────────────────────
   Roles by fill, never by a coloured edge; labels in sentence case. */
.iv-stat { min-width: 132px; border-color: transparent; }
.iv-stat.active { background: var(--accent-tint-2); color: var(--text); }
.iv-stat small em { color: var(--danger); }
#ivByProject.active { background: var(--accent-tint-2); border-color: transparent; color: var(--text); }
.interviews-view .find-list { gap: 2px; padding: 2px 8px 8px; }
.iv-row { border-top: 0; border-radius: 10px; padding-left: 12px; padding-right: 12px; }
.iv-row .find-side { gap: 6px; }
.iv-fit { min-width: 4.6em; text-align: center; font-variant-numeric: tabular-nums; }
.iv-rank { font-size: 0.74rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.iv-flag { background: var(--accent-tint-2); color: var(--accent-strong); }
.iv-quick { white-space: nowrap; }
.iv-project-waiting { background: color-mix(in srgb, var(--warning) 14%, transparent); color: var(--warning); }
.iv-project-closed { background: var(--bg-2); color: var(--muted); }
.iv-group-head .find-pill { font-size: 0.7rem; font-weight: 600; }
.iv-banner { margin: 6px 8px 4px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--warning) 9%, var(--bg-3)); }
.iv-banner p { margin: 0; font-size: 0.86rem; line-height: 1.45; }
.iv-banner .find-actions { margin: 8px 0 0; }
.iv-close { margin-top: 10px; }
.iv-form label.iv-grow .field { width: 100%; max-width: 360px; }
.iv-group-head { padding-top: 18px; font-size: 0.86rem; font-weight: 650; letter-spacing: 0; text-transform: none; color: var(--text); cursor: default; }
.iv-group-head small { font-size: 0.78rem; color: var(--muted); }

#ivDrawer .find-block h4 { margin: 0; font-size: 0.92rem; font-weight: 650; letter-spacing: 0; text-transform: none; color: var(--text); }
.iv-fit-block { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.iv-fit-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.iv-fit-head h4 { margin: 0 0 2px; }
.iv-fit-score { display: grid; justify-items: end; margin: 0; line-height: 1; }
.iv-fit-score b { font-size: 2.1rem; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.iv-fit-score span { font-size: 0.75rem; color: var(--muted); margin-top: 4px; }
.iv-summary { margin: 0; font-size: 0.9rem; line-height: 1.5; max-width: 65ch; }
.iv-sub { margin: 6px 0 0; font-size: 0.8rem; font-weight: 650; color: var(--text-2); }
.iv-must, .iv-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.iv-must li { display: grid; grid-template-columns: 5.2em minmax(0, 1fr); align-items: start; gap: 10px; }
.iv-must .find-pill { text-align: center; }
.iv-must b { display: block; font-size: 0.86rem; font-weight: 600; }
.iv-must small, .iv-dims small { display: block; margin-top: 2px; font-size: 0.76rem; color: var(--muted); line-height: 1.4; }
.iv-points li { font-size: 0.86rem; line-height: 1.45; }
.iv-dims { width: 100%; min-width: 0; border-collapse: separate; border-spacing: 0; font-size: 0.84rem; }
.iv-dims th { text-align: left; font-size: 0.78rem; font-weight: 650; letter-spacing: 0; text-transform: none; color: var(--text-2); padding: 7px 10px; background: var(--bg-2); border: 0; }
.iv-dims td { border: 0; }
.iv-dims th:first-child { border-radius: 8px 0 0 8px; }
.iv-dims th:last-child { border-radius: 0 8px 8px 0; }
.iv-dims td { padding: 8px 10px; vertical-align: top; }
.iv-dims tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--bg-2) 45%, transparent); }
.iv-dims td:nth-child(2), .iv-dims td:nth-child(3), .iv-dims th:nth-child(2), .iv-dims th:nth-child(3) { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.iv-dims td:nth-child(3) { font-weight: 650; }

.iv-stage-now { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 4px 0 0; }
.iv-late { font-size: 0.76rem; font-weight: 600; color: var(--danger); }
.iv-moves { margin-top: 10px; }
.iv-history { margin-top: 8px; font-size: 0.82rem; }
.iv-history summary { cursor: pointer; color: var(--text-2); }
.iv-history ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.iv-history li { display: flex; justify-content: space-between; gap: 12px; }
.iv-history small { color: var(--muted); font-variant-numeric: tabular-nums; }

.iv-numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; margin: 16px 0 0; }
.iv-numbers > div { padding: 10px 12px; border-radius: 12px; background: var(--bg-2); }
.iv-numbers dt { font-size: 0.78rem; font-weight: 600; color: var(--text-2); }
.iv-numbers dd { margin: 2px 0 0; font-size: 1.15rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.iv-numbers small { color: var(--muted); font-size: 0.75rem; }

.iv-next { margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: var(--accent-tint); }
.iv-next h4 { margin: 0 0 4px; font-size: 0.92rem; font-weight: 650; }
.iv-next p { margin: 0; font-size: 0.9rem; line-height: 1.5; max-width: 65ch; }
.iv-next .iv-late { display: block; margin-top: 2px; }
.iv-next .find-actions { margin-bottom: 0; }
.iv-dtabs { position: sticky; top: 0; z-index: 2; margin: 18px -4px 0; padding: 8px 4px; background: var(--bg-3); }
.iv-dpanel > .find-block:first-child { margin-top: 6px; }
.iv-numbers .is-bad dd { color: var(--danger); }

.iv-field { display: grid; gap: 6px; margin-top: 18px; }
.iv-field h5 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 0.86rem; font-weight: 650; }
.iv-field > .find-sub { margin: -2px 0 0; }
.iv-value { padding: 8px 10px; border-radius: 8px; background: var(--bg-2); }
.iv-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.iv-form label { display: grid; gap: 4px; font-size: 0.78rem; color: var(--text-2); }
.iv-form .iv-grow { flex: 1 1 220px; min-width: 0; }
.iv-form textarea { resize: vertical; min-height: 2.6em; }
.iv-override { margin-top: 4px; padding: 12px; border-radius: 12px; background: var(--bg-2); }
@media (max-width: 640px) {
  .iv-row .find-side { justify-content: flex-start; }
  .iv-fit-score b { font-size: 1.7rem; }
}

/* ── Interviews panel: Inpro design system (violet only on the main action, tone steps
   instead of outlines, 44 px controls, sentence case, visible focus) ─────────────── */
#ivDrawer {
  --iv-accent: #7A51EF;
  --iv-accent-hover: #6A3FE6;
  --iv-accent-ink: #5B3CC4;
  --iv-ink: #08080C;
  --iv-muted: #5D6270;
  --iv-tone: #F1F4FF;
  --iv-tone-2: #E8EDFF;
  --iv-surface: #FFFFFF;
  --iv-field-line: #C5CBDA;
}
[data-theme="dark"] #ivDrawer {
  --iv-accent: #8F6CF7;
  --iv-accent-hover: #A084F9;
  --iv-accent-ink: #B9A3FF;
  --iv-ink: #F2F3F7;
  --iv-muted: #A9AFBD;
  --iv-tone: #1D2030;
  --iv-tone-2: #262A3D;
  --iv-surface: #14161F;
  --iv-field-line: #40465B;
}
#ivDrawer .find-drawer-panel { background: var(--iv-surface); color: var(--iv-ink); }
#ivDrawer .find-drawer-panel h3 { font-size: 1.45rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
#ivDrawer .find-sub { color: var(--iv-muted); }
#ivDrawer ::selection { background: var(--iv-tone-2); color: var(--iv-ink); }

#ivDrawer .btn {
  min-height: 44px; padding: 0 18px; border: 0; border-radius: 10px; box-shadow: none;
  font-size: 0.9rem; font-weight: 600; letter-spacing: 0; text-transform: none;
  transition: background-color 160ms cubic-bezier(0.22, 1, 0.36, 1), color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
#ivDrawer .btn-primary { background: var(--iv-accent); color: #fff; }
#ivDrawer .btn-primary:hover:not(:disabled) { background: var(--iv-accent-hover); }
#ivDrawer .btn-ghost { background: var(--iv-tone); color: var(--iv-ink); }
#ivDrawer .btn-ghost:hover:not(:disabled) { background: var(--iv-tone-2); }
#ivDrawer .btn:disabled { opacity: 0.45; cursor: not-allowed; }
#ivDrawer .btn:focus-visible, #ivDrawer .icon-btn:focus-visible, #ivDrawer .find-tab:focus-visible,
#ivDrawer .iv-link:focus-visible, #ivDrawer .find-back:focus-visible { outline: 2px solid var(--iv-accent); outline-offset: 2px; }
#ivDrawer .find-drawer-nav .icon-btn, #ivDrawer .find-drawer-close { width: 44px; height: 44px; }
#ivDrawer .find-back { min-height: 44px; color: var(--iv-accent-ink); font-weight: 600; }

#ivDrawer .field {
  width: 100%; max-width: none; min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--iv-field-line); border-radius: 10px; box-shadow: none;
  background: var(--iv-surface); color: var(--iv-ink); font: inherit; font-size: 0.92rem; line-height: 1.45;
}
#ivDrawer select.field { padding-right: 34px; cursor: pointer; }
#ivDrawer textarea.field { min-height: 92px; resize: vertical; }
#ivDrawer .field::placeholder { color: var(--iv-muted); opacity: 1; }
#ivDrawer .field:focus { outline: 2px solid var(--iv-accent); outline-offset: 0; border-color: transparent; }

#ivDrawer .iv-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 10px 0 0; font-size: 0.86rem; color: var(--iv-muted); }
#ivDrawer .iv-link { display: inline-flex; align-items: center; min-height: 32px; color: var(--iv-accent-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
#ivDrawer .iv-link:hover { text-decoration-thickness: 2px; }

#ivDrawer .iv-next { margin-top: 18px; padding: 18px 20px; border-radius: 14px; background: var(--iv-tone); }
#ivDrawer .iv-next h4 { font-size: 0.95rem; }
#ivDrawer .iv-next p { color: var(--iv-ink); font-size: 0.95rem; }
#ivDrawer .iv-next .find-actions { gap: 8px; margin-top: 14px; }
#ivDrawer .iv-next .btn-ghost { background: var(--iv-surface); }
#ivDrawer .iv-next .btn-ghost:hover:not(:disabled) { background: var(--iv-tone-2); }

#ivDrawer .iv-dtabs { display: flex; gap: 4px; margin: 22px 0 0; padding: 4px; border: 0; border-radius: 12px; background: var(--iv-tone); }
#ivDrawer .iv-dtabs .find-tab { flex: 1 1 0; justify-content: center; min-height: 44px; border: 0; border-radius: 9px; background: transparent; color: var(--iv-muted); font-weight: 600; }
#ivDrawer .iv-dtabs .find-tab.active { background: var(--iv-surface); color: var(--iv-ink); }
#ivDrawer .iv-dtabs .find-tab-count { background: var(--iv-tone-2); color: var(--iv-ink); }

#ivDrawer .find-block, #ivDrawer .iv-sec { margin-top: 22px; padding: 0; border: 0; border-radius: 0; background: none; }
#ivDrawer .find-block h4 { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }
#ivDrawer .iv-numbers > div { background: var(--iv-tone); }
#ivDrawer .iv-numbers dt { color: var(--iv-muted); }
#ivDrawer .iv-value { background: var(--iv-tone); color: var(--iv-ink); }
#ivDrawer .iv-dims th { background: var(--iv-tone-2); color: var(--iv-ink); }
#ivDrawer .iv-dims tbody tr:nth-child(even) td { background: var(--iv-tone); }
#ivDrawer .iv-override, #ivDrawer .iv-close { padding: 14px; border-radius: 12px; background: var(--iv-tone); }
#ivDrawer .iv-next .iv-close { background: var(--iv-surface); }
#ivDrawer .iv-form label { color: var(--iv-ink); font-weight: 600; font-size: 0.84rem; }
#ivDrawer .iv-form label.iv-grow .field { max-width: none; }

#ivDrawer .iv-fit-block { gap: 12px; }
#ivDrawer .iv-fit-head h4 { margin: 0 0 8px; }
#ivDrawer .iv-fit-score b { font-size: 2.6rem; font-weight: 700; letter-spacing: -0.04em; color: var(--iv-ink); }
#ivDrawer .iv-fit-score span { color: var(--iv-muted); font-size: 0.8rem; }
#ivDrawer .iv-verdict { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 0; font-size: 0.92rem; line-height: 1.45; color: var(--iv-ink); }
#ivDrawer .iv-summary, #ivDrawer .iv-explain { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--iv-ink); max-width: 65ch; }
#ivDrawer .iv-sub { margin: 14px 0 0; font-size: 0.95rem; font-weight: 700; color: var(--iv-ink); }
#ivDrawer .iv-capped { display: grid; gap: 4px; padding: 14px 16px; border-radius: 12px; background: color-mix(in srgb, var(--danger) 9%, var(--iv-surface)); color: var(--iv-ink); font-size: 0.9rem; }
#ivDrawer .iv-capped p { margin: 0; line-height: 1.45; }
#ivDrawer .iv-asks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; margin: 0; border-radius: 12px; overflow: hidden; }
#ivDrawer .iv-asks > div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 12px; padding: 9px 14px; background: var(--iv-tone); }
#ivDrawer .iv-asks dt { color: var(--iv-muted); font-size: 0.86rem; font-weight: 600; }
#ivDrawer .iv-asks dd { margin: 0; font-size: 0.9rem; color: var(--iv-ink); }
#ivDrawer .iv-must small { color: var(--iv-muted); }
#ivDrawer .iv-dims td small { color: var(--iv-muted); }
#ivDrawer .iv-dims .iv-evidence { color: var(--iv-ink); }
#ivDrawer .iv-dims tfoot td { padding: 10px; background: var(--iv-tone-2); font-weight: 700; color: var(--iv-ink); }
#ivDrawer .iv-dims tfoot td:first-child { border-radius: 8px 0 0 8px; }
#ivDrawer .iv-dims tfoot td:last-child { border-radius: 0 8px 8px 0; text-align: right; }
#ivDrawer .iv-points { gap: 6px; }
#ivDrawer .iv-points li { position: relative; padding-left: 14px; color: var(--iv-ink); }
#ivDrawer .iv-points li::before { content: "–"; position: absolute; left: 0; color: var(--iv-muted); }
#ivDrawer .iv-source { margin-top: 10px; }
@media (max-width: 640px) { #ivDrawer .iv-asks > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* the Fit tab, dense (2026-10-23): one line for score, verdict and origin; small type; blue headings */
#ivDrawer { --iv-head: #1D4ED8; }
[data-theme="dark"] #ivDrawer { --iv-head: #7CB4FF; }
#ivDrawer .iv-fcol .iv-fsec > legend, #ivDrawer .iv-fcol .find-block h4, #ivDrawer .iv-fit-block h4, #ivDrawer .iv-fit-block .iv-sub { color: var(--iv-head); }
#ivDrawer .iv-fit-block { gap: 8px; margin-top: 12px; }
#ivDrawer .iv-fit-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
#ivDrawer .iv-fit-line h4 { margin: 0; font-size: 0.95rem; font-weight: 700; }
#ivDrawer .iv-fit-num { font-size: 0.8rem; color: var(--iv-muted); font-variant-numeric: tabular-nums; }
#ivDrawer .iv-fit-num b { font-size: 1.15rem; font-weight: 700; color: var(--iv-ink); letter-spacing: -0.01em; }
#ivDrawer .iv-fit-line .find-pill, #ivDrawer .iv-must .find-pill { padding: 1px 7px; font-size: 0.72rem; line-height: 1.5; }
#ivDrawer .iv-fit-none { font-size: 0.8rem; color: var(--iv-muted); }
#ivDrawer .iv-fit-tools { display: flex; gap: 2px; margin-left: auto; }
#ivDrawer .iv-fit-tools .iv-textbtn { min-height: 28px; padding: 0 8px; font-size: 0.78rem; }
#ivDrawer .iv-fit-block .iv-capped { display: block; margin: 0; padding: 6px 10px; border-radius: 8px; font-size: 0.8rem; line-height: 1.4; cursor: help; }
#ivDrawer .iv-fit-block .iv-sub { margin: 8px 0 0; font-size: 0.82rem; font-weight: 700; }
#ivDrawer .iv-fit-block .iv-sub[title] { cursor: help; }
#ivDrawer .iv-fit-block .iv-asks { gap: 0; border-radius: 8px; }
#ivDrawer .iv-fit-block .iv-asks > div { grid-template-columns: 8.5em minmax(0, 1fr); gap: 10px; padding: 4px 10px; }
#ivDrawer .iv-fit-block .iv-asks > div:nth-child(even) { background: var(--iv-surface); }
#ivDrawer .iv-fit-block .iv-asks dt { font-size: 0.78rem; }
#ivDrawer .iv-fit-block .iv-asks dd { font-size: 0.82rem; }
#ivDrawer .iv-fit-block .iv-must { gap: 4px; }
#ivDrawer .iv-fit-block .iv-must li { grid-template-columns: 4.6em minmax(0, 1fr); gap: 0 8px; align-items: baseline; }
#ivDrawer .iv-fit-block .iv-must b { font-size: 0.82rem; }
#ivDrawer .iv-fit-block .iv-must small { grid-column: 2; margin: 0; font-size: 0.74rem; }
#ivDrawer .iv-fit-block .iv-dims { font-size: 0.8rem; }
#ivDrawer .iv-fit-block .iv-dims th, #ivDrawer .iv-fit-block .iv-dims td { padding: 4px 8px; }
#ivDrawer .iv-fit-block .iv-dims th { font-size: 0.74rem; font-weight: 600; }
#ivDrawer .iv-fit-block .iv-dims td small { display: block; margin: 1px 0 0; font-size: 0.72rem; line-height: 1.35; }
#ivDrawer .iv-fit-block .iv-dims .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
#ivDrawer .iv-fit-block .iv-dims tbody tr { cursor: help; }
#ivDrawer .iv-fit-block .iv-dims tfoot td { padding: 5px 8px; }
/* the Fit tab: one layout for every block (blue heading, then label | content rows), colour only for meaning */
#ivDrawer .iv-fit-verdict { font-size: 0.86rem; font-weight: 700; color: var(--iv-ink); }
#ivDrawer .iv-fit-dl { display: grid; gap: 0; margin: 0; }
#ivDrawer .iv-fit-dl > div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 12px; padding: 4px 0; }
#ivDrawer .iv-fit-dl dt { font-size: 0.8rem; font-weight: 600; color: var(--iv-muted); overflow-wrap: anywhere; }
#ivDrawer .iv-fit-dl dd { margin: 0; font-size: 0.84rem; line-height: 1.45; color: var(--iv-ink); }
#ivDrawer .iv-fit-dl dd small { display: block; margin-top: 1px; font-size: 0.76rem; line-height: 1.4; color: var(--iv-muted); }
#ivDrawer .iv-fit-status { font-weight: 650; }
#ivDrawer .iv-fit-bad { color: var(--eq-late, #B42318); font-weight: 650; }
[data-theme="dark"] #ivDrawer .iv-fit-bad { color: #F97066; }
#ivDrawer .iv-fit-weight { font-weight: 500; font-variant-numeric: tabular-nums; }
#ivDrawer .iv-fit-val { margin-right: 4px; font-variant-numeric: tabular-nums; }
#ivDrawer .iv-fit-text { margin: 0; max-width: 72ch; font-size: 0.84rem; line-height: 1.45; color: var(--iv-ink); }
#ivDrawer .iv-fit-small { margin: 2px 0 0; font-size: 0.76rem; line-height: 1.4; color: var(--iv-muted); }
@media (max-width: 640px) { #ivDrawer .iv-fit-dl > div { grid-template-columns: minmax(0, 1fr); gap: 0; } }
#ivDrawer .iv-sg { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; }
#ivDrawer .iv-fit-block .iv-points { gap: 2px; }
#ivDrawer .iv-fit-block .iv-points li { font-size: 0.82rem; line-height: 1.4; }
#ivDrawer .iv-fit-block .iv-override { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; padding: 10px; border-radius: 8px; }
#ivDrawer .iv-fit-block .iv-override.hidden { display: none; }
#ivDrawer .iv-fit-block .iv-override .field { height: 32px; min-height: 32px; font-size: 0.84rem; }
#ivDrawer .iv-fit-block .iv-override label { display: grid; gap: 2px; font-size: 0.76rem; }

#ivDrawer .iv-person-form { display: grid; gap: 0; }
#ivDrawer .iv-field { display: grid; gap: 8px; margin-top: 24px; }
#ivDrawer .iv-field-label { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; font-weight: 650; color: var(--iv-ink); }
#ivDrawer .iv-field > .find-sub { margin: -4px 0 0; }
#ivDrawer .iv-savebar {
  position: sticky; bottom: -32px; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 28px -24px -32px; padding: 14px 24px 18px; background: var(--iv-tone);
}
#ivDrawer .iv-savebar-text { font-size: 0.88rem; font-weight: 600; color: var(--iv-ink); }
@media (prefers-reduced-motion: reduce) { #ivDrawer .btn { transition: none; } }
@media (max-width: 640px) {
  #ivDrawer .iv-dtabs .find-tab { font-size: 0.82rem; padding: 0 6px; }
  #ivDrawer .iv-savebar .btn { flex: 1 1 auto; }
}

/* ── Interviews: the candidate form (both panel sizes). Three titled sections; labels carry the hints as
   tooltips; earlier text is folded under "Earlier entries"; the short fields sit two per row. ──────────── */
#ivDrawer .iv-person-form { display: grid; gap: 0; }
#ivDrawer .iv-fsec { margin: 0; padding: 0; border: 0; min-width: 0; }
#ivDrawer .iv-fsec + .iv-fsec { margin-top: 28px; }
#ivDrawer .iv-fsec legend { padding: 0; margin: 0 0 10px; font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; color: var(--iv-ink); }
#ivDrawer .iv-fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; align-items: start; }
#ivDrawer .iv-f { display: grid; gap: 6px; min-width: 0; }
#ivDrawer .iv-f-wide { grid-column: 1 / -1; }
#ivDrawer .iv-f-head { display: flex; align-items: baseline; gap: 8px; min-height: 20px; }
#ivDrawer .iv-f-head label { font-size: 0.84rem; font-weight: 600; color: var(--iv-ink); cursor: default; }
#ivDrawer .iv-info {
  display: inline-grid; place-items: center; width: 16px; height: 16px; padding: 0; border: 1px solid var(--iv-field-line);
  border-radius: 50%; background: var(--iv-surface); color: var(--iv-muted); font: inherit; font-size: 0.66rem; font-weight: 700;
  line-height: 1; cursor: pointer; align-self: center;
}
#ivDrawer .iv-info:hover, #ivDrawer .iv-info[aria-expanded="true"] { border-color: var(--iv-head); color: var(--iv-head); }
#ivDrawer .iv-info:focus-visible { outline: 2px solid var(--iv-accent); outline-offset: 2px; }
#ivDrawer .iv-f-info { margin: 0; font-size: 0.76rem; line-height: 1.4; color: var(--iv-muted); }
#ivDrawer .iv-f-info.hidden { display: none; }
#ivDrawer .iv-replace-flag { display: inline-block; width: fit-content; margin: 4px 0 0; padding: 2px 8px; border-radius: 999px; background: #FFF1D6; color: #7A4B07; font-size: 0.75rem; font-weight: 600; cursor: help; }
#ivDrawer .iv-todo { padding: 1px 8px; border-radius: 999px; background: #FFF1D6; color: #7A4B07; font-size: 0.72rem; font-weight: 600; }
#ivDrawer .iv-person-form .field { min-height: 38px; padding: 7px 10px; border-radius: 8px; font-size: 0.88rem; line-height: 1.4; }
#ivDrawer .iv-person-form select.field { padding-right: 30px; }
#ivDrawer .iv-person-form textarea.field { min-height: 60px; }
#ivDrawer .iv-person-form .iv-f-short { max-width: 220px; }
#ivDrawer .iv-f-off { margin: 0; font-size: 0.82rem; color: var(--iv-muted); }
#ivDrawer .iv-earlier { font-size: 0.8rem; color: var(--iv-muted); }
#ivDrawer .iv-earlier summary { width: max-content; cursor: pointer; color: var(--iv-accent-ink); font-weight: 600; }
#ivDrawer .iv-earlier summary:focus-visible { outline: 2px solid var(--iv-accent); outline-offset: 2px; border-radius: 4px; }
#ivDrawer .iv-earlier p { margin: 6px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--iv-tone); color: var(--iv-ink); white-space: pre-line; line-height: 1.45; }
#ivDrawer .iv-savebar {
  position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 24px 0 0; padding: 10px 14px; border-radius: 12px 12px 0 0; background: var(--iv-tone);
}
@media (max-width: 640px) { #ivDrawer .iv-fgrid { grid-template-columns: minmax(0, 1fr); } }
/* the side panel (other stages): the bar sits flush on the panel's bottom edge, over its padding */
#ivDrawer:not(.find-drawer--full) .iv-savebar { bottom: -32px; margin: 24px -24px -32px; padding: 14px 24px 18px; border-radius: 0; }
@media (max-width: 640px) { #ivDrawer:not(.find-drawer--full) .iv-savebar { bottom: -28px; margin: 24px -16px -28px; padding: 12px 16px 16px; } }

/* "Overwrite in Pipedrive?": a small dialog over the panel */
#ivDrawer .iv-confirm { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; background: rgba(8, 8, 12, 0.32); }
#ivDrawer .iv-confirm-card {
  width: min(440px, 100%); padding: 20px 22px; border-radius: 16px; background: var(--iv-surface);
  box-shadow: 0 18px 48px rgba(8, 8, 12, 0.22); animation: iv-confirm-in 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes iv-confirm-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
#ivDrawer .iv-confirm-card h4 { margin: 0 0 10px; font-size: 1.05rem; font-weight: 700; color: var(--iv-ink); }
#ivDrawer .iv-confirm-card ul { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
#ivDrawer .iv-confirm-card li { display: grid; gap: 2px; padding: 8px 12px; border-radius: 10px; background: var(--iv-tone); font-size: 0.9rem; color: var(--iv-ink); }
#ivDrawer .iv-confirm-card s { color: var(--iv-muted); }
#ivDrawer .iv-confirm-card .find-actions { gap: 8px; margin: 12px 0 0; }

/* ── Interviews in "To be interviewed": the whole window as a workspace. One top bar (the toolbar tone), then
   two white panes split by one neutral line, each with a sticky header and its own scroll. ─────────────── */
#ivDrawer.find-drawer--full .find-drawer-panel {
  left: 0; width: 100vw; border-left: 0; box-shadow: none; padding: 0;
  display: flex; flex-direction: column; overflow: hidden; background: var(--iv-surface);
  animation: iv-full-in 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes iv-full-in { from { opacity: 0; } to { opacity: 1; } }
/* the page behind the full-window panel does not scroll (its scrollbar showed at the right edge for nothing) */
html:has(#ivDrawer.find-drawer--full:not(.hidden)), html:has(#ivDrawer.find-drawer--full:not(.hidden)) body { overflow: hidden; }
#ivDrawer.find-drawer--full .find-drawer-close,
#ivDrawer.find-drawer--full .find-drawer-bar { display: none; }  /* the top bar has its own back, paging and close */
#ivDrawer.find-drawer--full #ivDrawerBody, #ivDrawer.find-drawer--full .find-drawer-content {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
}
#ivDrawer .iv-top {
  flex: none; display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 10px clamp(16px, 2vw, 28px);
  background: var(--iv-tone);
}
#ivDrawer .iv-top-back, #ivDrawer .iv-top .icon-btn {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center; border: 0; border-radius: 10px;
  background: transparent; color: var(--iv-ink); font-size: 1.15rem; cursor: pointer;
}
#ivDrawer .iv-top-back:hover, #ivDrawer .iv-top .icon-btn:hover:not(:disabled) { background: var(--iv-tone-2); }
#ivDrawer .iv-top .icon-btn:disabled { opacity: 0.35; cursor: default; }
#ivDrawer .iv-top-back:focus-visible, #ivDrawer .iv-top .icon-btn:focus-visible { outline: 2px solid var(--iv-accent); outline-offset: 2px; }
#ivDrawer .iv-top-who { min-width: 0; flex: 1; }
#ivDrawer .iv-top-who h3 { margin: 0; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
#ivDrawer .iv-top-who h3 a { color: var(--iv-ink); text-decoration: none; }
#ivDrawer .iv-top-who h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
#ivDrawer .iv-top-who p { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 2px 0 0; font-size: 0.8rem; color: var(--iv-muted); }
#ivDrawer .iv-top-who p a { color: var(--iv-muted); }
#ivDrawer .iv-top-who .iv-late { font-size: 0.8rem; }
#ivDrawer .iv-top-links { display: flex; gap: 14px; font-size: 0.82rem; }
#ivDrawer .iv-top-links .iv-link { min-height: 32px; }
#ivDrawer .iv-top-actions { display: flex; align-items: center; gap: 10px; flex: none; }
#ivDrawer .iv-top-nav { display: flex; align-items: center; gap: 2px; font-size: 0.8rem; color: var(--iv-muted); font-variant-numeric: tabular-nums; }
#ivDrawer .iv-top-close { font-size: 1.4rem !important; }
#ivDrawer .iv-alert { flex: none; padding: 0 clamp(16px, 2vw, 28px); background: var(--iv-tone); }
#ivDrawer .iv-alert .iv-next { margin: 0 0 12px; padding: 12px 16px; background: #FFF6E5; }
#ivDrawer .iv-alert .iv-next h4 { display: none; }
#ivDrawer .iv-alert .iv-next p { font-size: 0.88rem; }
#ivDrawer .iv-alert .iv-next .btn-ghost { background: var(--iv-surface); }
/* one row: the note on the left, its buttons on the right; the close form wraps below */
#ivDrawer .iv-alert .iv-next--line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0 0 10px; padding: 6px 8px 6px 14px; border-radius: 10px; }
#ivDrawer .iv-alert .iv-next--line p { flex: 1 1 320px; max-width: none; }
#ivDrawer .iv-alert .iv-next--line .find-actions { margin: 0; gap: 6px; }
#ivDrawer .iv-alert .iv-next--line .btn { min-height: 32px; }
#ivDrawer .iv-alert .iv-next--line .iv-close:not(.hidden) { flex-basis: 100%; }

#ivDrawer .iv-split { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
#ivDrawer .iv-qcol, #ivDrawer .iv-fcol {
  min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--iv-field-line) transparent;
}
/* two different surfaces: the left is the script you read out (grey), the right is the form you fill in (white) */
#ivDrawer .iv-qcol { --iv-script: #F4F5F7; background: var(--iv-script); }
[data-theme="dark"] #ivDrawer .iv-qcol { --iv-script: #1A1C25; }
#ivDrawer .iv-qcol .iv-pane-head { background: var(--iv-script); }
#ivDrawer .iv-fcol { box-shadow: inset 1px 0 0 #E3E6EF; }
[data-theme="dark"] #ivDrawer .iv-fcol { box-shadow: inset 1px 0 0 #2A2E3D; }
#ivDrawer .iv-pane-head {
  position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 12px; min-height: 52px;
  padding: 8px clamp(16px, 2vw, 28px); background: var(--iv-surface);
}
#ivDrawer .iv-pane-head { flex-wrap: wrap; row-gap: 0; }
#ivDrawer .iv-pane-head h4, #ivDrawer .iv-qcount, #ivDrawer .iv-textbtn { white-space: nowrap; }
#ivDrawer .iv-pane-head h4 { margin: 0; font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; color: var(--iv-ink); }
#ivDrawer .iv-pane-body { padding: 4px clamp(16px, 2vw, 28px) 24px; }
#ivDrawer .iv-fcol .iv-pane-body { padding-bottom: 0; }
#ivDrawer .iv-qcount { font-size: 0.8rem; color: var(--iv-muted); font-variant-numeric: tabular-nums; }
#ivDrawer .iv-pane-tools { display: flex; gap: 4px; margin-left: auto; }
#ivDrawer .iv-textbtn {
  min-height: 36px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent;
  color: var(--iv-accent-ink); font: inherit; font-size: 0.84rem; font-weight: 600; cursor: pointer;
}
#ivDrawer .iv-textbtn:hover { background: var(--iv-tone); }
#ivDrawer .iv-textbtn:focus-visible { outline: 2px solid var(--iv-accent); outline-offset: 2px; }
/* the right pane's tabs as plain text tabs in its header */
#ivDrawer .iv-pane-head--tabs { padding-top: 6px; padding-bottom: 6px; }
#ivDrawer .iv-pane-head--tabs .iv-dtabs {
  position: static; display: flex; gap: 4px; margin: 0; padding: 0; border: 0; background: none;
}
#ivDrawer .iv-pane-head--tabs .find-tab {
  flex: none; min-height: 38px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent;
  color: var(--iv-muted); font-size: 0.88rem; font-weight: 600;
}
#ivDrawer .iv-pane-head--tabs .find-tab:hover { background: var(--iv-tone); color: var(--iv-ink); }
#ivDrawer .iv-pane-head--tabs .find-tab.active { background: var(--iv-tone-2); color: var(--iv-ink); }
#ivDrawer .iv-pane-head--tabs .find-tab-count { background: none; padding: 0; color: inherit; font-weight: 700; }

/* the questions: a calm list, groups separated by space */
#ivDrawer .iv-qfocus { margin: 0 0 4px; max-width: 70ch; font-size: 0.9rem; line-height: 1.5; color: var(--iv-ink); }
/* each question group is one white card on the grey script, its heading with an icon in blue */
#ivDrawer .iv-qgroup-wrap { margin-top: 12px; padding: 8px 10px 6px; border-radius: 10px; background: var(--iv-surface); }
#ivDrawer .iv-qgroup { display: flex; align-items: center; gap: 7px; margin: 0 0 2px; padding: 2px 0; font-size: 0.86rem; font-weight: 700; color: var(--iv-head, #1D4ED8); }
#ivDrawer .iv-qgroup-icon { flex: none; }
#ivDrawer .iv-qgroup-n { font-size: 0.76rem; font-weight: 500; color: var(--iv-muted); font-variant-numeric: tabular-nums; }
#ivDrawer .iv-qgroup-wrap .iv-qlist { margin: 0 -4px; }
#ivDrawer .iv-qgroup-wrap .iv-q:hover { background: var(--iv-tone); }
#ivDrawer .iv-qgroup-wrap .iv-qans > summary:hover { background: var(--iv-tone); }
#ivDrawer .iv-qgroup-wrap .iv-qans-body { background: var(--iv-script, var(--iv-tone)); }
#ivDrawer .iv-qlist { list-style: none; margin: 0 -10px; padding: 0; display: grid; gap: 2px; }
#ivDrawer .iv-q {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 9px 10px; border-radius: 10px; cursor: pointer; transition: background-color 150ms cubic-bezier(0.22, 1, 0.36, 1);
}
#ivDrawer .iv-q:hover { background: var(--iv-surface); }
/* the position summary: read out first, a white card on the grey script */
#ivDrawer .iv-qsummary { margin: 4px 0 0; border-radius: 10px; background: var(--iv-surface); }
#ivDrawer .iv-qsummary summary {
  display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 10px; cursor: pointer;
  list-style: none; font-size: 0.82rem; font-weight: 700; color: var(--iv-muted);
}
#ivDrawer .iv-qsummary summary::-webkit-details-marker { display: none; }
#ivDrawer .iv-qsummary summary::before {
  content: ""; width: 6px; height: 6px; margin-right: 2px; border: solid currentColor; border-width: 0 1.5px 1.5px 0;
  transform: rotate(-45deg); transition: transform 150ms cubic-bezier(0.22, 1, 0.36, 1);
}
#ivDrawer .iv-qsummary[open] summary::before { transform: rotate(45deg); }
#ivDrawer .iv-qsummary summary:hover { color: var(--iv-ink); }
#ivDrawer .iv-qsummary summary:focus-visible { outline: 2px solid var(--iv-accent); outline-offset: 2px; }
#ivDrawer .iv-qsummary p { margin: 0; padding: 0 14px 12px; max-width: 72ch; font-size: 0.92rem; line-height: 1.5; color: var(--iv-ink); }
#ivDrawer .iv-qpos-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
/* client, end client, period: label over value, in one wrapping row */
#ivDrawer .iv-qfacts { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; padding: 0 14px 12px; }
#ivDrawer .iv-qfacts div { min-width: 0; }
#ivDrawer .iv-qfacts dt { font-size: 0.75rem; color: var(--iv-muted); }
#ivDrawer .iv-qfacts dd { margin: 0; font-size: 0.86rem; font-weight: 600; color: var(--iv-ink); overflow-wrap: anywhere; }
/* the full description, unfolded on request inside the position card */
/* a small text link; the grey only shows around the text once it is open */
/* a question's sample answer: the same small blue link, lined up with the question text */
#ivDrawer .iv-qans { margin: -6px 10px 6px 40px; }
#ivDrawer .iv-qans > summary {
  display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 0 4px; margin-left: -4px; border-radius: 6px;
  list-style: none; font-size: 0.76rem; font-weight: 600; color: var(--iv-accent-ink); cursor: pointer;
}
#ivDrawer .iv-qans > summary::-webkit-details-marker { display: none; }
#ivDrawer .iv-qans > summary::before {
  content: ""; width: 5px; height: 5px; margin-right: 2px; border: solid currentColor; border-width: 0 1.5px 1.5px 0;
  transform: rotate(-45deg); transition: transform 150ms cubic-bezier(0.22, 1, 0.36, 1);
}
#ivDrawer .iv-qans[open] > summary::before { transform: rotate(45deg); }
#ivDrawer .iv-qans > summary:hover { background: var(--iv-surface); }
#ivDrawer .iv-qans > summary:focus-visible { outline: 2px solid var(--iv-accent); outline-offset: 2px; }
/* opened: what must be mentioned (bullets), then the answer with its key terms highlighted */
#ivDrawer .iv-qans-body { display: grid; gap: 6px; margin: 4px 0 0; max-width: 72ch; padding: 8px 10px; border-radius: 8px; background: var(--iv-surface); }
#ivDrawer .iv-qans-points { margin: 0; padding: 0 0 0 16px; display: grid; gap: 1px; font-size: 0.8rem; line-height: 1.4; color: var(--iv-ink); }
#ivDrawer .iv-qans-points li::marker { color: var(--iv-head); }
#ivDrawer .iv-qans p { margin: 0; font-size: 0.84rem; line-height: 1.5; color: var(--iv-ink); }
#ivDrawer .iv-key {
  padding: 0 2px; border-radius: 3px; font-weight: 650; color: var(--iv-ink);
  background: color-mix(in srgb, var(--iv-head) 13%, transparent);
}
#ivDrawer .iv-qans-wait { margin: -6px 10px 6px 40px; font-size: 0.76rem; color: var(--iv-muted); }
@media (prefers-reduced-motion: reduce) { #ivDrawer .iv-qans > summary::before { transition: none; } }
@media (max-width: 640px) { #ivDrawer .iv-qans, #ivDrawer .iv-qans-wait { margin-left: 42px; } }
#ivDrawer .iv-qdesc { margin: -4px 14px 10px; }
#ivDrawer .iv-qsummary .iv-qdesc > summary {
  display: inline-flex; width: auto; min-height: 24px; gap: 4px; padding: 0 4px; margin-left: -4px; border-radius: 6px;
  font-size: 0.78rem; font-weight: 600; color: var(--iv-accent-ink);
}
#ivDrawer .iv-qsummary .iv-qdesc > summary::before { width: 5px; height: 5px; }
#ivDrawer .iv-qsummary .iv-qdesc > summary:hover { background: var(--iv-tone); }
#ivDrawer .iv-qdesc-text {
  max-height: 360px; overflow-y: auto; margin-top: 6px; padding: 10px; border-radius: 8px; background: var(--iv-script, var(--iv-tone));
  white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.86rem; line-height: 1.5; color: var(--iv-ink);
}
#ivDrawer .iv-qsummary .iv-qdesc-notes { padding: 8px 0 0; font-size: 0.84rem; }
#ivDrawer .iv-qerror { margin: 4px 0 8px; font-size: 0.84rem; font-weight: 600; color: #B42318; }
[data-theme="dark"] #ivDrawer .iv-qerror { color: #F97066; }
/* EN / DE: a two-button switch */
#ivDrawer .iv-qlang { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--iv-tone-2); margin-right: 4px; }
#ivDrawer .iv-qlang button {
  min-height: 28px; min-width: 36px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent;
  color: var(--iv-muted); font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
#ivDrawer .iv-qlang button[aria-pressed="true"] { background: var(--iv-surface); color: var(--iv-ink); }
#ivDrawer .iv-qlang button:hover:not([aria-pressed="true"]):not(:disabled) { color: var(--iv-ink); }
#ivDrawer .iv-qlang button:disabled { cursor: progress; }
#ivDrawer .iv-qlang button:focus-visible { outline: 2px solid var(--iv-accent); outline-offset: 1px; }
#ivDrawer .iv-q input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--iv-accent); cursor: pointer; }
#ivDrawer .iv-q input:focus-visible { outline: 2px solid var(--iv-accent); outline-offset: 2px; }
#ivDrawer .iv-q-text { display: block; max-width: 72ch; font-size: 0.92rem; line-height: 1.45; font-weight: 600; color: var(--iv-ink); }
#ivDrawer .iv-q-listen { display: block; max-width: 72ch; margin-top: 3px; font-size: 0.82rem; line-height: 1.45; color: var(--iv-muted); }
#ivDrawer .iv-q.is-asked .iv-q-text { color: var(--iv-muted); font-weight: 500; }
#ivDrawer .iv-qsource { margin: 24px 0 0; font-size: 0.78rem; line-height: 1.45; color: var(--iv-muted); max-width: 70ch; }
#ivDrawer .iv-qsteer { display: grid; gap: 8px; margin: 4px 0 16px; padding: 14px; border-radius: 12px; background: var(--iv-surface); }
#ivDrawer .iv-qsteer.hidden { display: none; }
#ivDrawer .iv-qsteer label { font-size: 0.86rem; font-weight: 600; color: var(--iv-ink); }
#ivDrawer .iv-qsteer textarea.field { min-height: 60px; font-size: 0.88rem; }
#ivDrawer .iv-qsteer .find-actions { align-items: center; gap: 8px; margin: 0; }
#ivDrawer .iv-qsteer .btn-ghost { background: var(--iv-surface); }
#ivDrawer .iv-qsteer-note { font-size: 0.78rem; color: var(--iv-muted); }
#ivDrawer .iv-qwait p { margin: 4px 0 0; font-size: 0.88rem; color: var(--iv-ink); max-width: 60ch; }
#ivDrawer .iv-qskel { display: grid; gap: 10px; margin-top: 18px; }
#ivDrawer .iv-qskel span { height: 40px; border-radius: 10px; background: var(--iv-surface); animation: iv-qpulse 1.6s ease-in-out infinite; }
#ivDrawer .iv-qskel span:nth-child(2) { animation-delay: 0.2s; }
#ivDrawer .iv-qskel span:nth-child(3) { animation-delay: 0.4s; }
#ivDrawer .iv-qskel span:nth-child(4) { animation-delay: 0.6s; }
@keyframes iv-qpulse { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) {
  #ivDrawer.find-drawer--full .find-drawer-panel, #ivDrawer .iv-qskel span, #ivDrawer .iv-confirm-card { animation: none; }
  #ivDrawer .iv-q { transition: none; }
}
@media (max-width: 1099px) { #ivDrawer .iv-top-links { display: none; } }  /* the name and project link to Pipedrive too */
@media (max-width: 999px) {
  /* one column that scrolls as a whole: questions first, then the fields */
  #ivDrawer.find-drawer--full .find-drawer-panel { display: block; overflow-y: auto; }
  #ivDrawer.find-drawer--full #ivDrawerBody, #ivDrawer.find-drawer--full .find-drawer-content { display: block; }
  #ivDrawer .iv-top { position: sticky; top: 0; z-index: 5; }
  #ivDrawer .iv-split { display: block; }
  #ivDrawer .iv-qcol, #ivDrawer .iv-fcol { overflow: visible; }
  #ivDrawer .iv-qcol { padding-bottom: 8px; }
  #ivDrawer .iv-fcol { box-shadow: none; }
  #ivDrawer .iv-pane-head { position: static; }
}
@media (max-width: 640px) {
  #ivDrawer .iv-top { flex-wrap: wrap; gap: 8px 10px; }
  #ivDrawer .iv-top-who { order: 1; flex-basis: calc(100% - 50px); }
  #ivDrawer .iv-top-actions { order: 2; width: 100%; justify-content: space-between; }
  #ivDrawer .iv-top-actions .btn-primary { flex: 1; }
  #ivDrawer .iv-q { padding: 10px; }
  #ivDrawer .iv-q input { width: 20px; height: 20px; }
}

/* ── Header on phones and small tablets: one row with the open view and a Menu button; the navigation
   opens as a sheet under it (views as 48 px rows, groups as plain headings, tools as 44 px buttons) ── */
.nav-menu-toggle, .topbar-current { display: none; }
@media (max-width: 820px) {
  .topbar {
    --nav-tone: #F1F4FF;
    --nav-tone-2: #E8EDFF;
    flex-wrap: nowrap;
    gap: 12px;
    padding: 10px 16px;
  }
  [data-theme="dark"] .topbar { --nav-tone: #1D2030; --nav-tone-2: #2A2F45; }
  .topbar .app-version, .topbar .last-sync-badge { display: none; }
  .topbar-title { gap: 0; }
  .topbar-current {
    display: block;
    overflow: hidden;
    font-size: 0.85rem;
    color: var(--muted);
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .nav-menu-toggle {
    display: inline-flex;
    align-items: center;
    flex: none;
    gap: 8px;
    min-height: 44px;
    margin-left: auto;
    padding: 0 14px;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    background: var(--nav-tone);
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 160ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .nav-menu-toggle svg { width: 18px; height: 18px; }
  .nav-menu-toggle:hover, .topbar.is-nav-open .nav-menu-toggle { background: var(--nav-tone-2); }
  .nav-menu-toggle:focus-visible { outline: 2px solid #7A51EF; outline-offset: 2px; }

  .topbar-actions { display: none; }
  .topbar.is-nav-open { background: var(--bg-3); backdrop-filter: none; }
  .topbar.is-nav-open .topbar-actions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: grid;
    gap: 16px;
    max-height: calc(100dvh - 64px);
    padding: 8px 16px 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--bg-3);
    box-shadow: 0 18px 32px -18px rgba(8, 8, 12, 0.35);
    animation: nav-sheet-in 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .topbar.is-nav-open .mode-switch {
    display: grid;
    width: auto;
    gap: 2px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
  }
  .topbar.is-nav-open .mode-switch .btn {
    flex: none;
    justify-content: flex-start;
    width: 100%;
    min-height: 48px;
    padding: 0 12px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text);
    background: none;
    border: 0;
    border-radius: 10px;
    box-shadow: none;
  }
  .topbar.is-nav-open .mode-switch .btn.hidden { display: none; }
  .topbar.is-nav-open .mode-switch .btn:hover { background: var(--nav-tone); }
  .topbar.is-nav-open .mode-switch .btn.btn-primary { background: var(--nav-tone-2); font-weight: 600; }
  .topbar.is-nav-open .mode-switch .btn:focus-visible { outline: 2px solid #7A51EF; outline-offset: -2px; }
  /* groups (Core, Find info, Admin) open in place: their name becomes a plain heading */
  .topbar.is-nav-open .nav-group:not(.hidden) { display: block; }
  .topbar.is-nav-open .mode-switch .nav-group-btn { display: none; }
  .topbar.is-nav-open .nav-menu {
    position: static;
    display: grid;
    min-width: 0;
    gap: 2px;
    padding: 12px 0 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .topbar.is-nav-open .nav-menu::before {
    content: attr(aria-label);
    padding: 0 12px 4px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted);
  }
  .topbar.is-nav-open .nav-menu-label { padding: 6px 12px 2px; font-size: 0.85rem; }
  .topbar.is-nav-open .mode-switch .nav-menu .nav-menu-sub { padding-left: 28px; }
  /* sync, monitor, theme, log out */
  .topbar.is-nav-open .topbar-utils { flex-wrap: wrap; justify-content: flex-start; gap: 8px; width: auto; }
  .topbar.is-nav-open .icon-btn.head-icon { width: 44px; height: 44px; background: var(--nav-tone); border: 0; }
  .topbar.is-nav-open .icon-btn.head-icon:hover { background: var(--nav-tone-2); }
  .topbar.is-nav-open .head-dot { box-shadow: 0 0 0 2px var(--nav-tone); }
  .topbar.is-nav-open .sync-pop { display: contents; }
  .topbar.is-nav-open .sync-panel { position: static; flex: 1 1 100%; order: 10; width: auto; box-shadow: none; }
}
@keyframes nav-sheet-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .topbar.is-nav-open .topbar-actions { animation: none; } }

/* ── Find info → Emails (find.js): one system for every page ─────────────────────────────────
   The app's soft gradient ground, white surfaces, the black chip for what is selected and for the one
   primary action. Dense and neutral: 32px controls (36px on phones), 40px rows separated by a tint,
   no lines between rows, no coloured edges or stripes. Colour means one thing only: the accent red
   on a wait past two weeks. Every list is one grid: its header and its rows share the same columns. */
#emailView, .eq-menu, .eq-toast, #eqDrawer, #adminSpendPanel {
  --eq-accent: #7A51EF;
  --eq-ink: #08080C;
  --eq-muted: #5D6270;
  --eq-ground: #FFFFFF;
  --eq-tone: #F3F4F7;
  --eq-tone-2: #E7E9EE;
  --eq-zebra: #F8F9FB;
  --eq-hover: #F0F1F4;
  --eq-line: #CDD2DB;
  --eq-late: #B42318;
  --eq-late-ink: #A11A1A;
  --eq-head: #1D4ED8; /* headings of sections and groups: blue, so the parts of a page tell apart at a glance */
  --eq-radius: 12px;
}
[data-theme="dark"] #emailView, [data-theme="dark"] .eq-menu, [data-theme="dark"] .eq-toast,
[data-theme="dark"] #eqDrawer, [data-theme="dark"] #adminSpendPanel {
  --eq-ink: #F2F3F7;
  --eq-muted: #A9AFBD;
  --eq-ground: #15171E;
  --eq-tone: #1E212A;
  --eq-tone-2: #2A2E3A;
  --eq-zebra: #191C24;
  --eq-hover: #22252F;
  --eq-line: #3A3F4D;
  --eq-late: #F97066;
  --eq-late-ink: #F97066;
  --eq-head: #7CB4FF;
}

#emailView { gap: 16px; color: var(--eq-ink); }
#emailView .num, .eq-menu .num { text-align: right; font-variant-numeric: tabular-nums; }
#emailView :is(b, strong), #eqDrawer :is(b, strong), .eq-menu :is(b, strong) { color: inherit; }
.eq-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#emailView .hidden, #eqDrawer .hidden { display: none !important; }

/* the page header: back link, H1, context, status */
.eq-head { display: grid; gap: 2px; }
.eq-back {
  justify-self: start; height: 28px; margin: 0 0 4px; padding: 0; border: 0; background: none;
  color: var(--eq-muted); font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
.eq-back:hover { color: var(--eq-ink); }
.eq-titlerow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#eqHeadline { margin: 0; font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--eq-ink); overflow-wrap: anywhere; }
.eq-context { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 2px; margin: 2px 0 0; font-size: 0.8125rem; color: var(--eq-muted); }
.eq-status { margin: 6px 0 0; font-size: 0.9rem; color: var(--eq-ink); line-height: 1.45; }
.eq-status b { font-weight: 650; }
.eq-late-text { color: var(--eq-late); font-weight: 600; }
.eq-sep { margin: 0 6px; color: var(--eq-muted); }
.eq-info-btn {
  display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border: 0; border-radius: 8px;
  background: transparent; color: var(--eq-muted); cursor: pointer;
}
.eq-info-btn svg { width: 18px; height: 18px; }
.eq-info-btn:hover { background: color-mix(in srgb, var(--eq-ground) 70%, transparent); color: var(--eq-ink); }

/* search box and tabs on one line; quieter on a detail page */
.eq-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.eq-find { position: relative; flex: 1 1 320px; max-width: 560px; }
.eq-find-icon { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--eq-muted); pointer-events: none; }
.eq-find-input {
  width: 100%; height: 40px; padding: 0 12px 0 36px; border: 1px solid var(--eq-line); border-radius: 10px;
  background: var(--eq-ground); color: var(--eq-ink); font: inherit; font-size: 0.9rem;
}
.eq-find-input::placeholder { color: var(--eq-muted); opacity: 1; }
.eq-tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: color-mix(in srgb, var(--eq-tone-2) 70%, transparent); }
.eq-tab {
  height: 32px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent;
  color: var(--eq-muted); font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.eq-tab:hover { color: var(--eq-ink); }
.eq-tab.active { background: var(--eq-ink); color: var(--eq-ground); }
#emailView.is-detail .eq-find-input { height: 34px; background: color-mix(in srgb, var(--eq-ground) 70%, transparent); border-color: transparent; font-size: 0.85rem; }
#emailView.is-detail .eq-tabs { background: transparent; }
#emailView.is-detail .eq-tab { height: 30px; font-weight: 500; }

/* controls: chips (filters with a visible selected state), selects, inputs, buttons */
.eq-pane { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; }
.eq-pane > *, #emailView > * { min-width: 0; }
.eq-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.eq-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.eq-chip, .eq-kpi {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--eq-line);
  border-radius: 999px; background: var(--eq-ground); color: var(--eq-ink); font: inherit; font-size: 0.82rem; font-weight: 500;
  white-space: nowrap; cursor: pointer;
}
.eq-chip b, .eq-kpi b { font-weight: 700; font-variant-numeric: tabular-nums; }
.eq-chip:hover { background: var(--eq-tone); }
.eq-chip.active, .eq-chip.active:hover { border-color: var(--eq-ink); background: var(--eq-ink); color: var(--eq-ground); }
.eq-kpis { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.eq-kpi { cursor: default; }
.eq-source { margin: 0; font-size: 0.8rem; color: var(--eq-muted); }
.eq-filters-wrap { position: relative; margin-left: auto; }
.eq-filters-count:empty { display: none; }
.eq-filters-count { font-weight: 700; font-variant-numeric: tabular-nums; }
.eq-filters {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; display: grid; gap: 10px; width: 280px; padding: 12px;
  border-radius: var(--eq-radius); background: var(--eq-ground); box-shadow: 0 12px 32px rgba(8, 8, 12, 0.16), 0 0 0 1px var(--eq-tone-2);
}
.eq-pop-field { display: grid; gap: 4px; font-size: 0.78rem; color: var(--eq-muted); }
.eq-pop-field .eq-select { width: 100%; }
.eq-select, .eq-input {
  height: 32px; padding: 0 10px; border: 1px solid var(--eq-line); border-radius: 8px;
  background: var(--eq-ground); color: var(--eq-ink); font: inherit; font-size: 0.85rem;
}
.eq-select.is-on { border-color: var(--eq-ink); font-weight: 600; }
.eq-input::placeholder { color: var(--eq-muted); opacity: 1; }
.eq-input--grow { flex: 1 1 220px; min-width: 0; max-width: 420px; }
.eq-textarea { width: 100%; height: auto; min-height: 72px; padding: 8px 10px; line-height: 1.45; resize: vertical; }
.eq-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px;
  border: 1px solid var(--eq-line); border-radius: 8px; background: var(--eq-ground); color: var(--eq-ink); font: inherit;
  font-size: 0.82rem; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.eq-btn svg { width: 15px; height: 15px; }
.eq-btn:hover { background: var(--eq-tone); }
.eq-btn--primary, .eq-btn--primary:hover { border-color: var(--eq-ink); background: var(--eq-ink); color: var(--eq-ground); }
.eq-btn--primary:hover { opacity: 0.88; }
.eq-btn--quiet { border-color: transparent; background: transparent; color: var(--eq-muted); }
.eq-btn--quiet:hover { background: var(--eq-tone); color: var(--eq-ink); }
.eq-btn--icon { width: 32px; padding: 0; }
.eq-btn:disabled { opacity: 0.5; cursor: default; }
.eq-link {
  padding: 0; border: 0; background: none; color: var(--eq-ink); font: inherit; font-size: 0.82rem; font-weight: 600;
  text-decoration: none; cursor: pointer;
}
.eq-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.eq-link--quiet { color: var(--eq-muted); font-weight: 500; }
#emailView :is(button, a, input, select, textarea, [tabindex]):focus-visible,
#eqDrawer :is(button, a, input, select, textarea, [tabindex]):focus-visible,
.eq-menu :is(button, input):focus-visible { outline: 2px solid var(--eq-accent); outline-offset: 1px; }

/* one list: a white surface, a header that lines up with its rows, groups, rows split by a tint */
.eq-list { display: grid; border-radius: var(--eq-radius); background: var(--eq-ground); box-shadow: 0 0 0 1px var(--eq-tone-2); }
.eq-lhead, .eq-row { display: grid; align-items: center; column-gap: 16px; padding: 0 14px; }
.eq-lhead {
  position: sticky; top: var(--find-sticky-top, 0px); z-index: 2; min-height: 36px; border-radius: var(--eq-radius) var(--eq-radius) 0 0;
  background: var(--eq-ground); color: var(--eq-muted); font-size: 0.75rem; font-weight: 500;
}
.eq-lhead > *, .eq-row > * { min-width: 0; }
.eq-group { display: grid; }
.eq-group:last-child, .eq-list > .eq-row:last-child { border-radius: 0 0 var(--eq-radius) var(--eq-radius); }
.eq-row {
  position: relative; min-height: 40px; background: var(--eq-ground); color: var(--eq-ink);
  font-size: 0.85rem; cursor: pointer; transition: background-color 120ms ease-out, opacity 200ms ease-out, transform 200ms ease-out;
}
.eq-group > .eq-row:nth-child(odd), .eq-list > .eq-row:nth-child(even) { background: var(--eq-zebra); }
.eq-row:hover, .eq-group > .eq-row:hover, .eq-list > .eq-row:hover { background: var(--eq-hover); }
.eq-row.is-current, .eq-group > .eq-row.is-current { background: var(--eq-tone-2); }
.eq-row.is-closed > :not(.eq-row-actions) { opacity: 0.6; }
.eq-row.is-leaving { opacity: 0; transform: translateX(16px); }
.eq-list > .eq-row:last-child, .eq-group:last-child > .eq-row:last-child { border-radius: 0 0 var(--eq-radius) var(--eq-radius); }
.eq-row > span:not(.eq-row-actions):not(.eq-r-sub) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.eq-ghead, .eq-shead { display: flex; align-items: baseline; gap: 8px; padding: 16px 14px 6px; background: var(--eq-ground); }
.eq-lhead + .eq-group > .eq-ghead, .eq-lhead + .eq-group > .eq-shead { padding-top: 6px; }
.eq-gtitle {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; padding: 0; border: 0; background: none;
  color: var(--eq-ink); font: inherit; text-align: left; cursor: pointer;
}
span.eq-gtitle { cursor: default; }
.eq-gname, .eq-shead-name { font-size: 0.875rem; font-weight: 650; }
button.eq-gtitle:hover .eq-gname { text-decoration: underline; text-underline-offset: 2px; }
.eq-gcount { font-size: 0.8rem; font-weight: 500; color: var(--eq-muted); font-variant-numeric: tabular-nums; }
/* a group header that folds its rows (Requests overview, older open conversations) */
.eq-shead-btn {
  display: inline-flex; align-items: baseline; gap: 8px; margin: -4px -6px; padding: 4px 6px; border: 0; border-radius: 6px;
  background: none; color: var(--eq-ink); font: inherit; cursor: pointer;
}
.eq-shead-btn:hover { background: var(--eq-tone); }
.eq-caret {
  width: 6px; height: 6px; margin-right: 2px; border: solid var(--eq-muted); border-width: 0 1.5px 1.5px 0;
  transform: translateY(-2px) rotate(-45deg); transition: transform 150ms ease-out;
}
.eq-shead-btn[aria-expanded="true"] .eq-caret { transform: translateY(-3px) rotate(45deg); }
/* the request page: what needs us, then tabs */
.eq-todo-none { margin: 0; font-size: 0.875rem; color: var(--eq-muted); }
/* blue headings: sections, groups inside a list, file groups and the open page tab */
#emailView .eq-section-head h2, #emailView .eq-shead-name, #emailView .eq-fgroup-name, #emailView .eq-pagetab.active { color: var(--eq-head); }
#emailView .eq-shead-btn .eq-caret { border-color: var(--eq-head); }
#emailView .eq-fgroup-name { font-weight: 650; }
.eq-c-what { color: var(--eq-ink); }
.eq-pagetabs { display: flex; gap: 2px; margin-bottom: -12px; }
.eq-pagetab {
  display: inline-flex; align-items: baseline; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: 8px;
  background: transparent; color: var(--eq-muted); font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.eq-pagetab:hover { color: var(--eq-ink); background: color-mix(in srgb, var(--eq-ground) 60%, transparent); }
.eq-pagetab.active { background: var(--eq-ground); color: var(--eq-ink); box-shadow: 0 0 0 1px var(--eq-tone-2); }
.eq-files--grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); align-items: start; }
.eq-files--grid .eq-fgroup + .eq-fgroup { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .eq-caret { transition: none; } }
.eq-code { font-size: 0.75rem; font-weight: 500; color: var(--eq-muted); letter-spacing: 0; }
.eq-gco { font-size: 0.8rem; color: var(--eq-muted); }

/* columns of each list (header and rows share them) */
.eq-list--queue > .eq-lhead, .eq-list--queue .eq-row { grid-template-columns: minmax(130px, 1.1fr) minmax(0, 3fr) 132px 64px; }
.eq-list--requests > .eq-lhead, .eq-list--requests .eq-row { grid-template-columns: minmax(0, 2.2fr) minmax(96px, 0.9fr) minmax(0, 2fr) 140px 84px; }
.eq-list--todo > .eq-lhead, .eq-list--todo .eq-row { grid-template-columns: minmax(130px, 1fr) minmax(0, 3fr) 132px 64px; }
.eq-list--search > .eq-lhead, .eq-list--search .eq-row { grid-template-columns: minmax(110px, 0.9fr) minmax(150px, 1.1fr) minmax(0, 3fr) 84px; }
.eq-list--who > .eq-lhead, .eq-list--who .eq-row { grid-template-columns: minmax(140px, 1.3fr) minmax(150px, 1.4fr) minmax(90px, 0.9fr) minmax(110px, 1fr) 104px 52px; }
.eq-list--who.is-by-request > .eq-lhead, .eq-list--who.is-by-request .eq-row { grid-template-columns: minmax(160px, 1.8fr) minmax(150px, 1.3fr) minmax(90px, 0.8fr) minmax(110px, 1fr) 104px; }
.eq-list--mails > .eq-row { grid-template-columns: 74px minmax(150px, 1.2fr) minmax(0, 3fr) 92px; }
.eq-r-sub { display: none; }

/* cells */
.eq-co { min-width: 0; }
.eq-co-name { font-weight: 600; }
.eq-role { font-size: 0.78rem; color: var(--eq-muted); }
.eq-c-subj, .eq-c-msg { color: var(--eq-ink); }
.eq-c-msg b { font-weight: 600; margin-right: 4px; }
.eq-snip { color: var(--eq-muted); }
.eq-req-title { font-weight: 600; }
.eq-quiet, .eq-none { color: var(--eq-muted); }
.eq-wait { font-variant-numeric: tabular-nums; font-weight: 500; }
.eq-wait.is-late { color: var(--eq-late); font-weight: 650; }
.eq-person { display: inline-flex; align-items: center; gap: 6px; min-width: 0; vertical-align: middle; }
.eq-person-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eq-av {
  display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--eq-tone-2); color: var(--eq-ink); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0;
}
.eq-people { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.eq-more { font-size: 0.78rem; color: var(--eq-muted); }
.eq-dir { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 4px; color: var(--eq-muted); vertical-align: -3px; }
.eq-dir svg { width: 15px; height: 15px; }
.eq-clip { display: inline-flex; align-items: center; gap: 2px; margin-left: 8px; color: var(--eq-muted); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.eq-clip svg { width: 13px; height: 13px; }
.eq-c-meta { display: flex; justify-content: flex-end; gap: 8px; }
.eq-c-meta .eq-clip { margin-left: 0; }
.eq-ficon {
  display: inline-grid; place-items: center; flex: none; min-width: 34px; height: 22px; padding: 0 4px; border-radius: 5px;
  background: var(--eq-tone-2); color: var(--eq-ink); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.02em;
}
.eq-clip .eq-ficon { min-width: 30px; height: 20px; margin-right: 4px; }

/* hover actions: they sit over the owner and waiting cells, on the row's own tint, without moving anything */
.eq-row-actions {
  position: absolute; top: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: flex-end; gap: 4px;
  width: calc(132px + 64px + 16px + 28px); padding: 0 10px 0 14px; background: var(--eq-hover);
  opacity: 0; pointer-events: none; transition: opacity 120ms ease-out;
}
.eq-row:hover > .eq-row-actions, .eq-row:focus-within > .eq-row-actions { opacity: 1; pointer-events: auto; }
.eq-row:focus-visible > .eq-row-actions { opacity: 1; pointer-events: auto; }
.eq-act {
  height: 26px; padding: 0 10px; border: 1px solid var(--eq-line); border-radius: 7px; background: var(--eq-ground);
  color: var(--eq-ink); font: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer;
}
.eq-act:hover { border-color: var(--eq-ink); }
@media (hover: none) { .eq-row-actions { display: none; } }

.eq-more-btn {
  display: block; height: 32px; margin: 12px auto 0; padding: 0 16px; border: 1px solid var(--eq-line); border-radius: 999px;
  background: var(--eq-ground); color: var(--eq-ink); font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer;
}
.eq-more-btn:hover { background: var(--eq-tone); }

/* states: loading (the final layout in flat grey), empty, error */
.eq-sk { display: grid; padding: 6px 14px; border-radius: var(--eq-radius); background: var(--eq-ground); box-shadow: 0 0 0 1px var(--eq-tone-2); }
.eq-sk-row { display: flex; align-items: center; gap: 16px; height: 40px; }
.eq-sk-row i { display: block; height: 10px; border-radius: 5px; background: var(--eq-tone-2); }
.eq-state {
  display: grid; justify-items: start; gap: 6px; padding: 24px 20px; border-radius: var(--eq-radius);
  background: var(--eq-ground); box-shadow: 0 0 0 1px var(--eq-tone-2);
}
.eq-state-title { margin: 0; font-size: 0.95rem; font-weight: 650; color: var(--eq-ink); }
.eq-state-text { margin: 0; max-width: 64ch; font-size: 0.85rem; color: var(--eq-muted); line-height: 1.5; }
.eq-state .eq-btn { margin-top: 6px; }
.eq-state--error .eq-state-title::before { content: "!"; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 8px; border-radius: 50%; background: var(--eq-late); color: #fff; font-size: 0.7rem; vertical-align: 1px; }

/* the detail page: main column and side column start on one line */
.eq-detail { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.eq-detail-main, .eq-detail-side { display: grid; gap: 24px; min-width: 0; }
.eq-section { display: grid; gap: 8px; min-width: 0; }
.eq-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; min-height: 32px; }
.eq-section-head h2 { margin: 0; font-size: 1rem; font-weight: 650; color: var(--eq-ink); }
.eq-card { display: grid; gap: 10px; padding: 14px; border-radius: var(--eq-radius); background: var(--eq-ground); box-shadow: 0 0 0 1px var(--eq-tone-2); }
.eq-detail-side { position: sticky; top: calc(var(--find-sticky-top, 0px) + 16px); }
.eq-cv {
  display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 6px; border-radius: 5px;
  background: var(--eq-tone-2); color: var(--eq-ink); font-size: 0.72rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.eq-ask-log { display: grid; gap: 8px; max-height: none; }
.eq-ask-q { justify-self: end; max-width: 88%; padding: 6px 10px; border-radius: 10px; background: var(--eq-tone); font-size: 0.85rem; }
.eq-ask-a { font-size: 0.85rem; line-height: 1.5; }
.eq-ask-a.is-error { color: var(--eq-late-ink); }
.eq-ask-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.eq-fgroup + .eq-fgroup { margin-top: 8px; }
.eq-fgroup-name { margin: 4px 0; font-size: 0.78rem; font-weight: 600; color: var(--eq-muted); }
.eq-flist { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.eq-file {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 0; border-radius: 8px;
  background: none; color: var(--eq-ink); font: inherit; text-align: left; cursor: pointer;
}
.eq-file:hover { background: var(--eq-hover); }
.eq-file-main { display: grid; min-width: 0; }
.eq-file-name { overflow: hidden; font-size: 0.85rem; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.eq-file-main small { font-size: 0.75rem; color: var(--eq-muted); }

/* the find box's matches */
.eq-find-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40; display: grid; max-height: min(60vh, 440px);
  overflow: auto; padding: 6px; border-radius: var(--eq-radius); background: var(--eq-ground);
  box-shadow: 0 12px 32px rgba(8, 8, 12, 0.16), 0 0 0 1px var(--eq-tone-2);
}
.eq-hit {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 10px; border: 0;
  border-radius: 8px; background: none; color: var(--eq-ink); font: inherit; text-align: left; cursor: pointer;
}
.eq-hit-main { display: grid; min-width: 0; }
.eq-hit-main b { overflow: hidden; font-size: 0.875rem; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.eq-hit-main small { overflow: hidden; font-size: 0.78rem; color: var(--eq-muted); white-space: nowrap; text-overflow: ellipsis; }
.eq-hit-kind { font-size: 0.75rem; color: var(--eq-muted); }
.eq-hit.is-active, .eq-hit:hover { background: var(--eq-tone); }

/* small menus (snooze, give to, link, more) and the toast */
.eq-menu {
  position: fixed; z-index: 950; display: grid; overflow: auto; padding: 6px; border-radius: var(--eq-radius);
  background: var(--eq-ground); color: var(--eq-ink); box-shadow: 0 12px 32px rgba(8, 8, 12, 0.18), 0 0 0 1px var(--eq-tone-2);
}
.eq-menu-item {
  display: grid; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--eq-ink);
  font: inherit; font-size: 0.85rem; text-align: left; cursor: pointer;
}
.eq-menu-item small { font-size: 0.75rem; color: var(--eq-muted); }
.eq-menu-item:hover, .eq-menu-item:focus-visible { background: var(--eq-tone); outline: none; }
.eq-menu-item--quiet { color: var(--eq-muted); }
.eq-menu-search { display: grid; gap: 4px; padding: 6px; font-size: 0.75rem; color: var(--eq-muted); }
.eq-menu-search .eq-input { width: 100%; }
.eq-menu-empty { margin: 0; padding: 8px 10px; font-size: 0.82rem; color: var(--eq-muted); }
.eq-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 1100; display: flex; align-items: center; gap: 14px; padding: 10px 16px;
  border-radius: 10px; background: var(--eq-ink); color: var(--eq-ground); font-size: 0.85rem;
  box-shadow: 0 10px 28px rgba(8, 8, 12, 0.24); opacity: 0; pointer-events: none; transform: translate(-50%, 8px);
  transition: opacity 180ms ease-out, transform 180ms ease-out;
}
.eq-toast.is-shown { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.eq-toast-undo { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }

/* statistics and the sync bar under the section stay, quieter */
.eq-stats { margin-top: 4px; }
#emailView .find-sync .find-sync-bar { border: 0; background: color-mix(in srgb, var(--eq-ground) 60%, transparent); }
#emailView .find-sync .cal-sync-bar-label { font-size: 0.8rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--eq-ink); }
#emailView .find-sync .em-sync-since, #emailView .find-sync .cal-sync-status { font-size: 0.8rem; }
#emailView .find-sync .cal-sync-meta { font-size: 0.8rem; color: var(--eq-muted); }

/* ── the popup: one conversation (and the (i) panel) ── */
#eqDrawer .find-drawer-panel { width: min(820px, 100vw); padding: 0 0 32px; border-left: 0; background: var(--eq-ground); color: var(--eq-ink); }
#eqDrawer .find-drawer-close { top: 12px; margin: 12px 16px 0 0; }
#eqDrawer .find-back.is-root { display: none; }  /* the close button is the one way out of a conversation */
#eqDrawer .find-drawer-bar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 64px 8px 24px; background: var(--eq-ground); }
#eqDrawer .find-back { padding: 0; border: 0; background: none; color: var(--eq-muted); font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
#eqDrawer .find-back:hover { color: var(--eq-ink); }
#eqDrawer .find-drawer-nav { margin: 0 0 0 auto; color: var(--eq-muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.eqm { display: grid; gap: 12px; padding: 0 24px; }
.eqm-head { display: grid; gap: 6px; }
.eqm-head h2 { margin: 0; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; overflow-wrap: anywhere; }
.eqm-context { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 0; margin: 0; font-size: 0.82rem; color: var(--eq-muted); }
.eqm-reqs { display: flex; flex-wrap: wrap; gap: 2px 16px; margin: 0; font-size: 0.82rem; }
.eqm-req { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.eqm-req .eq-link { text-align: left; }
.eqm-state { margin: 2px 0 0; font-size: 0.9rem; line-height: 1.45; }
.eqm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.eqm-thread { display: grid; gap: 6px; }
.eqm-msg { border-radius: var(--eq-radius); background: var(--eq-zebra); }
.eqm-msg.is-open { background: var(--eq-ground); box-shadow: 0 0 0 1px var(--eq-tone-2); }
.eqm-msg-head {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 10px 14px;
  border: 0; background: none; color: var(--eq-ink); font: inherit; text-align: left; cursor: pointer;
}
.eqm-msg-head .eq-av { width: 28px; height: 28px; font-size: 0.72rem; }
.eqm-msg-who { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.eqm-msg-who b { flex: none; font-size: 0.875rem; font-weight: 650; }
.eqm-msg-peek { overflow: hidden; font-size: 0.82rem; color: var(--eq-muted); white-space: nowrap; text-overflow: ellipsis; }
.eqm-msg.is-open .eqm-msg-peek { display: none; }
.eqm-msg-date { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--eq-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.eqm-msg-date .eq-clip { margin: 0; }
.eqm-msg-body { display: none; padding: 0 16px 16px 52px; }
.eqm-msg.is-open .eqm-msg-body { display: block; }
.eqm-meta { display: grid; gap: 2px; margin: 0 0 12px; font-size: 0.8rem; }
.eqm-meta > div { display: flex; gap: 8px; min-width: 0; }
.eqm-meta dt { flex: none; width: 40px; color: var(--eq-muted); }
.eqm-meta dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.eqm-text {
  max-width: 70ch; margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--eq-ink);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.eqm-text a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.eqm-text img, .eqm-text table { max-width: 100%; }
.eqm-text--fold { margin-top: 6px; color: var(--eq-muted); }
.eqm-text--quote { padding: 10px 12px; border-radius: 8px; background: var(--eq-zebra); font-size: 0.85rem; }
.eqm-fold { display: block; margin-top: 10px; color: var(--eq-muted); font-weight: 500; }
.eqm-source { margin: 14px 0 0; font-size: 0.78rem; color: var(--eq-muted); }
.eqm-source a { color: var(--eq-ink); font-weight: 600; }
.eqm-files { display: grid; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; max-width: 70ch; }
.eqm-file { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; border-radius: 10px; background: var(--eq-zebra); }
.eqm-file-main { display: grid; flex: 1; min-width: 0; }
.eqm-file-name { overflow: hidden; font-size: 0.85rem; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.eqm-file-main small { font-size: 0.75rem; color: var(--eq-muted); }
.eqm-lightbox {
  position: fixed; inset: 0; z-index: 980; display: grid; grid-template-rows: auto 1fr; justify-items: center; gap: 12px; padding: 16px;
  background: rgba(8, 8, 12, 0.78);
}
.eqm-lightbox img { max-width: 92vw; max-height: 84vh; object-fit: contain; border-radius: 8px; background: #fff; }
.eqm--info .eqm-context { font-size: 0.9rem; color: var(--eq-ink); line-height: 1.5; }
.eqm-info h3 { margin: 6px 0 4px; font-size: 0.95rem; font-weight: 650; }
.eqm-info ul { display: grid; gap: 6px; margin: 0; padding-left: 18px; font-size: 0.875rem; line-height: 1.5; max-width: 68ch; }

/* ── phones: their own layout ── */
@media (max-width: 720px) {
  .eq-top { flex-direction: column; align-items: stretch; }
  .eq-find { flex: none; max-width: none; }
  .eq-find-input { height: 42px; }
  .eq-tabs { display: grid; grid-template-columns: repeat(3, 1fr); }
  .eq-tab { height: 36px; padding: 0 6px; }
  .eq-chip, .eq-select, .eq-input, .eq-btn { height: 36px; }
  .eq-input--grow { flex-basis: 100%; max-width: none; }
  .eq-bar > .eq-select { flex: 1 1 0; min-width: 0; }
  .eq-filters { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; }
  #eqPaneAnswer > .eq-bar { flex-wrap: nowrap; }
  #eqPaneAnswer .eq-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; min-width: 0; }
  #eqPaneAnswer .eq-chips::-webkit-scrollbar { display: none; }
  #eqPaneAnswer .eq-filters-wrap { flex: none; }
  #eqPaneAnswer > .eq-bar { gap: 8px; }
  #eqPaneAnswer .eq-chips { gap: 6px; }
  #eqPaneAnswer .eq-bar .eq-chip { padding-inline: 9px; }
  .eq-lhead { display: none; }
  .eq-ghead, .eq-shead { padding: 14px 14px 4px; }
  .eq-row { column-gap: 12px; row-gap: 2px; padding: 10px 14px; min-height: 58px; }
  .eq-row > * { font-size: 0.85rem; }
  /* To answer: company and wait, then subject and owner */
  .eq-list--queue .eq-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "co wait" "subj own"; }
  .eq-list--queue .eq-c-co { grid-area: co; }
  .eq-list--queue .eq-c-wait { grid-area: wait; }
  .eq-list--queue .eq-c-subj { grid-area: subj; color: var(--eq-muted); }
  .eq-list--queue .eq-c-own { grid-area: own; justify-self: end; }
  /* Requests: title and last email, then the next step. Needs you: company and wait, then what happened */
  .eq-list--requests .eq-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "req date" "next next"; }
  .eq-list--requests .eq-c-req { grid-area: req; }
  .eq-list--requests .eq-c-next { grid-area: next; font-size: 0.8rem; }
  .eq-list--requests .eq-row > :nth-child(5) { grid-area: date; }
  .eq-list--requests .eq-c-client, .eq-list--requests .eq-row > .eq-c-own { display: none; }
  .eq-list--todo .eq-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "co wait" "what what"; }
  .eq-list--todo .eq-c-co { grid-area: co; }
  .eq-list--todo .eq-c-what { grid-area: what; font-size: 0.8rem; }
  .eq-list--todo .eq-row > :nth-child(4) { grid-area: wait; }
  .eq-list--todo .eq-row > .eq-c-own { display: none; }
  /* Search: company and date, then the email */
  .eq-list--search .eq-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "co date" "msg msg"; }
  .eq-list--search .eq-c-co { grid-area: co; }
  .eq-list--search .eq-row > :last-child { grid-area: date; }
  .eq-list--search .eq-c-flow { display: none; }
  .eq-list--search .eq-c-msg { grid-area: msg; }
  /* detail: companies as two-line cards, emails as two lines */
  .eq-list--who .eq-row, .eq-list--who.is-by-request .eq-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "co wait" "last own"; }
  .eq-list--who .eq-c-co { grid-area: co; }
  .eq-list--who .eq-c-last { grid-area: last; color: var(--eq-muted); }
  .eq-list--who .eq-c-own { grid-area: own; justify-self: end; }
  .eq-list--who .eq-row > :nth-child(5) { grid-area: wait; }
  .eq-list--who .eq-c-with, .eq-list--who .eq-row > :nth-child(6) { display: none; }
  .eq-list--mails > .eq-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "flow date" "msg meta"; }
  .eq-list--mails .eq-c-flow { grid-area: flow; }
  .eq-list--mails .eq-c-date { grid-area: date; text-align: right; }
  .eq-list--mails .eq-c-msg { grid-area: msg; }
  .eq-list--mails .eq-c-meta { grid-area: meta; }
  .eq-detail { grid-template-columns: minmax(0, 1fr); }
  .eq-detail-side { position: static; }
  .eq-section-head .eq-bar { width: 100%; }
  .eq-section-head .eq-bar { flex-wrap: wrap; }
  .eq-section-head .eq-bar .eq-select { flex: 1 1 calc(50% - 4px); min-width: 0; }
  /* the popup becomes a full-screen sheet */
  #eqDrawer .find-drawer-panel { inset: 0; width: 100vw; animation-name: eq-sheet; }
  #eqDrawer .find-drawer-bar { padding: 10px 60px 8px 16px; }
  #eqDrawer .find-drawer-close { margin: 10px 12px 0 0; }
  .eqm { padding: 0 16px; }
  .eqm-msg-body { padding: 0 14px 14px; }
  .eqm-msg-head { grid-template-columns: 28px minmax(0, 1fr) auto; align-items: start; }
  .eqm-msg-head .eq-av, .eqm-msg-date { margin-top: 2px; }
  .eqm-msg-who { flex-direction: column; gap: 0; }
  .eqm-msg-peek { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .eqm-actions [data-copy-thread] { display: none; }
  .eqm-actions .eq-btn { flex: 1 1 auto; }
  .eqm-file { flex-wrap: wrap; row-gap: 4px; }
  .eqm-file-main { flex: 1 1 calc(100% - 48px); }
  .eqm-file > .eq-link { margin-left: 44px; }
  .eqm-file > .eq-link + .eq-link { margin-left: 12px; }
}
@keyframes eq-sheet { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .eq-row, .eq-toast, .eq-row-actions { transition: none; }
  #eqDrawer .find-drawer-panel { animation: none; }
}


/* ── Admin → AI spend: the usage log by feature and person (dense, like Find info → Emails) ── */
.ai-spend-panel { display: grid; gap: 10px; }
.ai-spend-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; }
.ai-spend-head h3 { margin: 0; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; color: var(--eq-ink); }
.ai-spend-head .eq-source { cursor: help; }
.ai-spend-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px; align-items: start; }
/* a real table on every width: white card, grey header band, zebra rows, no row lines */
.ai-spend-wrap { overflow-x: auto; border-radius: 12px; background: var(--eq-ground); box-shadow: 0 0 0 1px var(--eq-tone-2); }
.ai-spend-table { width: 100%; min-width: 0; border-collapse: separate; border-spacing: 0; font-size: 0.85rem; }
.ai-spend-table th { padding: 7px 10px; background: var(--eq-tone); color: var(--eq-muted); font-size: 0.75rem; font-weight: 600;
  text-align: left; white-space: nowrap; letter-spacing: 0; text-transform: none; border: 0; }
.ai-spend-table td { padding: 7px 10px; border: 0; background: var(--eq-ground); color: var(--eq-ink); white-space: nowrap; }
.ai-spend-table tbody tr:nth-child(even) td { background: var(--eq-zebra); }
.ai-spend-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ai-spend-table td b { font-weight: 700; }
.ai-spend-warn { color: var(--eq-late-ink); }
#adminSpendStatus:empty { display: none; }
@media (max-width: 820px) { .ai-spend-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .ai-spend-table .tok { display: none; }
  .ai-spend-table th, .ai-spend-table td { padding: 7px 8px; }
  .ai-spend-table td:first-child { white-space: normal; }
}

/* ── Mailbox → Developers / Meetings / Emails tabs (devmail-admin.js "Meetings / Emails") ── */
.mb-views { display: flex; width: max-content; max-width: 100%; margin: 0 0 10px; }
.mb-views .devmail-tab { min-height: 32px; }
.mb-views .devmail-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#devmailAdminPanel[hidden], .mb-pane[hidden], .mb-dates[hidden] { display: none !important; }
.mb-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 10px; }
.mb-bar .field { width: auto; height: 32px; padding: 0 0.6rem; font-size: 0.84rem; }
.mb-bar select.field { padding-right: 1.6rem; }
.mb-dates { display: inline-flex; align-items: center; gap: 6px; font-size: 0.84rem; color: var(--muted); }
.mb-count { margin-left: auto; font-size: 0.82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.mb-table-wrap { max-height: clamp(320px, calc(100vh - 250px), 680px); overflow: auto; overscroll-behavior: contain;
  border-radius: 10px; background: var(--bg-3); }
.mb-table-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mb-table-wrap[aria-busy="true"] { opacity: .6; transition: opacity .15s ease-out; }
.mb-table { min-width: 0; width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.mb-table th, .mb-table td { border: 0; padding: 0 12px; height: 38px; vertical-align: middle; font-size: 0.84rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-table th { position: sticky; top: 0; z-index: 1; height: 32px; background: var(--bg-2); color: var(--text-2);
  font-size: 0.78rem; font-weight: 650; text-transform: none; letter-spacing: 0; }
.mb-table tbody tr.is-alt td { background: color-mix(in srgb, var(--bg-2) 50%, var(--bg-3)); }
.mb-table tbody tr:not(.mb-detail):hover td, .mb-table tbody tr.is-open td { background: var(--bg-2); }
.mb-table .mb-when { color: var(--text-2); font-variant-numeric: tabular-nums; }
.mb-open { display: block; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: var(--text); text-align: left;
  cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-open:hover { text-decoration: underline; text-underline-offset: 2px; }
.mb-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 3px; }
.mb-table tr.is-unread .mb-open { font-weight: 700; }
.mb-table tr.is-off .mb-open { color: var(--muted); text-decoration: line-through; }
.mb-table tr.is-unread .mb-dir { color: var(--text); font-weight: 650; }
.mb-table .mb-dir { color: var(--muted); }
.mb-table tr.is-off td { color: var(--muted); }
/* one row opened under itself: who is on it and the text */
.mb-table tbody tr.mb-detail td[colspan] { height: auto; text-align: left; padding: 4px 12px 14px; white-space: normal; overflow: visible; background: var(--bg-2); }
.mb-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 14px; margin: 6px 0 8px; font-size: 0.82rem; }
.mb-facts dt { color: var(--muted); }
.mb-facts dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.mb-text { max-height: 320px; overflow: auto; padding: 10px 12px; border-radius: 8px; background: var(--bg-3); color: var(--text);
  font-size: 0.84rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.mb-note { margin: 0 0 6px; font-size: 0.8rem; color: var(--muted); }
.mb-detail-actions { margin: 8px 0 0; font-size: 0.82rem; }
.mb-link { color: var(--accent); text-underline-offset: 2px; }
.mb-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mb-answer.is-open { color: var(--danger); font-weight: 700; }
/* Meetings: Upcoming open, Past collapsed; the next meeting from now on stands out */
.mb-section { display: flex; align-items: center; gap: 6px; margin: 4px 0 6px; padding: 0 2px; font-size: 0.86rem; font-weight: 650; color: var(--text); }
.mb-section span { font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.mb-past { margin-top: 14px; }
.mb-past > summary { cursor: pointer; list-style: none; width: max-content; min-height: 32px; border-radius: 6px; }
.mb-past > summary::-webkit-details-marker { display: none; }
.mb-past > summary::before { content: ""; width: 7px; height: 7px; margin: 0 4px 0 2px; border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted); transform: rotate(-45deg); transition: transform .15s ease-out; }
.mb-past[open] > summary::before { transform: rotate(45deg); }
.mb-past > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mb-table tbody tr.is-next td { background: color-mix(in srgb, var(--accent) 10%, var(--bg-3)); }
.mb-table tbody tr.is-next .mb-open { font-weight: 700; }
.mb-next { color: var(--accent); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .mb-past > summary::before { transition: none; } }
.mb-answer.is-no_answer { color: var(--muted); }
.mb-meetings th:nth-child(1) { width: 250px; }
.mb-meetings th:nth-child(2) { width: 13%; }
.mb-meetings th:nth-child(4) { width: 18%; }
.mb-meetings th:nth-child(5) { width: 18%; }
.mb-meetings th:nth-child(6) { width: 128px; }
.mb-emails th:nth-child(1) { width: 190px; }
.mb-emails th:nth-child(2) { width: 16%; }
.mb-emails th:nth-child(3) { width: 84px; }
.mb-emails th:nth-child(4) { width: 22%; }
@media (max-width: 760px) {
  .mb-bar .field { height: 36px; flex: 1 1 140px; }
  .mb-count { flex-basis: 100%; margin-left: 0; }
  .mb-table-wrap { max-height: 72vh; }
}
@media (max-width: 900px) {
  /* tablets and phones: one compact block per row, the subject first */
  .mb-table thead { display: none; }
  .mb-table, .mb-table tbody { display: block; }
  .mb-table tr { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; padding: 8px 12px; }
  .mb-table tbody tr.is-alt { background: color-mix(in srgb, var(--bg-2) 50%, var(--bg-3)); }
  .mb-table tbody tr.is-open, .mb-table tbody tr.mb-detail { background: var(--bg-2); }
  .mb-table tbody tr.is-next { background: color-mix(in srgb, var(--accent) 10%, var(--bg-3)); }
  .mb-table tbody tr.is-next td { background: none; }
  .mb-table td, .mb-table tbody tr.is-alt td, .mb-table tbody tr:not(.mb-detail):hover td, .mb-table tbody tr.is-open td { height: auto; padding: 0; background: none; }
  .mb-table tr.mb-detail td { padding: 0 0 6px; background: none; }
  .mb-table tr.mb-detail > td { flex: 1 1 100%; }
  .mb-table .mb-subject { order: -2; flex: 1 1 calc(100% - 140px); min-width: 0; }
  .mb-table .mb-open { min-height: 24px; }
  .mb-table .mb-answer, .mb-table .mb-dir { order: -1; flex: none; text-align: right; }
  .mb-table tr:not(.mb-detail) td:not(.mb-subject):not(.mb-answer):not(.mb-dir) { flex: none; max-width: 100%; font-size: 0.78rem; color: var(--muted); }
  .mb-table td[data-label="From"]::before, .mb-table td[data-label="To"]::before, .mb-table td[data-label="Organiser"]::before,
  .mb-table td[data-label="Invited"]::before { content: attr(data-label) " "; }
}