/* ============================================================
   AURELIAN ADMIN — LIGHT FINANCIAL THEME
   ============================================================ */

:root {
  /* Backgrounds */
  --bg-primary: #FAF8F4;
  --bg-secondary: #F5F0E8;
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --bg-hover: #F0EBE3;

  /* Borders */
  --border-color: #E8E2D9;
  --border-glow: rgba(201, 168, 76, 0.08);
  --border-strong: #D4CEC4;
  --status-won-border: #A7F3D0;

  /* Text */
  --text-primary: #0F1F3D;
  --text-secondary: #6B7280;
  --text-muted: #6E7683;

  /* Accent — Warm Gold */
  --accent: #C9A84C;
  --accent-glow: rgba(201, 168, 76, 0.1);
  --accent-text: #8F7526; /* gold for TYPE — 5.1:1 on cream; #C9A84C stays for borders/fills */

  /* Type scale — 11px floor, reserved for uppercase micro-labels */
  --fs-11: 0.6875rem;
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-20: 1.25rem;
  --fs-26: 1.625rem;

  /* Status Colors */
  --status-new: #0F1F3D;
  --status-new-bg: var(--bg-secondary);
  --status-active: #0F1F3D;
  --status-active-bg: #EDE8DF;
  --status-won: #166534;
  --status-won-bg: #F0FAF0;
  --status-muted: #6B7280;
  --status-muted-bg: var(--bg-secondary);

  /* Relevance Colors */
  --alert: #92400E;
  --alert-bg: #FEF3C7;
  --likelihood-high: #92400E;
  --likelihood-high-bg: #FEF3C7;
  --likelihood-medium: #0F1F3D;
  --likelihood-medium-bg: var(--bg-secondary);
  --likelihood-low: #166534;
  --likelihood-low-bg: #F0FAF0;

  /* Layout */
  --sidebar-width: 260px;
  --sidebar-rail-width: 76px;
  --drawer-width: 480px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --transition-smooth: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.1);

  --font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: 'Outfit', sans-serif;
}

/* ── Gold & paper (light theme only), shared with the Aurelian OS portal ──
   This desk is the portal's Forvm module (II). The page keeps the desk's own
   cream (--bg-primary / --bg-secondary from :root) rather than the portal's
   marble — Sebastian's call, 2026-09-30. The dark theme is untouched:
   every override lives under :root:not([data-theme="dark"]). Figures keep
   Outfit / Plus Jakarta; Cinzel for labels, Cormorant for page titles.
   Text contrast on paper: ink 17.8:1, secondary 10.3:1, muted 5.8:1, gold 5.5:1. */
:root:not([data-theme="dark"]) {
  --bg-surface: #fffdf8;       /* warm paper */
  --bg-card: #fffdf8;
  --bg-hover: #f2ecdf;
  --border-color: #e8e1d3;
  --border-strong: #cdbfa4;
  --text-primary: #14161c;     /* ink */
  --text-secondary: #3d3f46;
  --text-muted: #6b6457;
  --accent-text: #7d6520;
  --status-new: #14161c;
  --status-active: #14161c;
  --status-active-bg: #ede6d8;
  --status-won: #3b6a33;       /* laurel */
  --status-won-bg: #ecf1e4;
  --alert: #8a5212;            /* ochre */
  --alert-bg: #f6ecd9;
  --likelihood-high: #8a5212;
  --likelihood-high-bg: #f6ecd9;
  --likelihood-medium: #14161c;
  --likelihood-low: #3b6a33;
  --likelihood-low-bg: #ecf1e4;
  --font-inscription: "Cinzel", Georgia, serif;
  --font-title: "Cormorant Garamond", Georgia, serif;
}
:root:not([data-theme="dark"]) .nav-section-label { font-family: var(--font-inscription); font-weight: 500; letter-spacing: 0.22em; color: var(--accent-text); }
:root:not([data-theme="dark"]) .header-title h1 { font-family: var(--font-title); font-weight: 500; font-size: 2.15rem; letter-spacing: -0.005em; line-height: 1.05; }
:root:not([data-theme="dark"]) .metric-label { font-family: var(--font-inscription); font-weight: 500; letter-spacing: 0.1em; color: var(--accent-text); }
:root:not([data-theme="dark"]) .metric-card,
:root:not([data-theme="dark"]) .table-container {
  background-color: var(--bg-card);
  border-color: var(--border-strong);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 18px 36px -28px rgba(20, 22, 28, 0.25);
}
:root:not([data-theme="dark"]) .board-card { background-color: var(--bg-card); }

/* The Forvm seal (sprite #forum-seal in index.html): sidebar lockup, rail mark, login. */
.seal-mark { display: block; width: 100%; height: 100%; color: #C9A84C; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
/* No display here: the phone header and collapsed rail hide .brand-lockup, and must keep winning. */
.brand-lockup.seal-lockup { width: auto; text-align: center; padding-top: 0.2rem; }
.seal-lockup .seal-mark { width: 58px; height: 58px; margin: 0 auto 0.35rem; }
.seal-lockup-name { display: block; font-family: "Cinzel", Georgia, serif; font-weight: 500; font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-primary); }
.seal-lockup-sub { display: block; font-family: "Cinzel", Georgia, serif; font-size: 0.58rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent-text); margin-top: 0.15rem; }

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

body {
  font-family: var(--font-family);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  overflow-x: hidden;
  height: 100vh;
  height: 100dvh;
}

/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Card */
.glass-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: var(--transition-smooth);
}

.glass-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
  border-color: var(--border-strong);
}

/* App Layout */
.app-container {
  display: flex;
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  overflow: hidden;
}

/* ============================================================
   SIDEBAR
   ============================================================ */

.sidebar {
  width: var(--sidebar-width);
  background-color: var(--bg-secondary);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  z-index: 10;
  padding: 1.5rem 1rem;
  transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1), padding 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-brand {
  position: relative;    /* the toggle is pinned to its corner (below) */
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  padding-left: 0.5rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(201,168,76,0.18);
}

/* ── Brand lockup ────────────────────────────────────────────────────────
   The expanded sidebar shows the designed lockup (medallion over the ETZ
   ADVISORY wordmark) as one transparent image. The medallion + text pair
   below it is the fallback for the two places the wordmark cannot be read:
   the collapsed rail and the mobile header. Exactly one is ever visible. */
.brand-lockup {
  display: block;
  width: 84px;           /* ~89px tall; the nav needs the rest of the column */
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
.sidebar-brand:has(.brand-lockup) { padding-left: 0; }
/* The lockup carries the name, so the text pair stands down beside it. */
.brand-lockup ~ .brand-logo,
.brand-lockup ~ .brand-nameblock { display: none; }
/* The toggle is pinned to the top-right corner, out of the flow — as a flex
   item it took width beside the lockup and pushed the logo off-centre. */
.brand-lockup ~ .btn-sidebar-toggle { position: absolute; top: -0.25rem; right: 0; margin-left: 0; }

.btn-sidebar-toggle {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.35rem;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
  flex-shrink: 0;
}
.btn-sidebar-toggle i,
.btn-sidebar-toggle svg { width: 17px; height: 17px; }
.btn-sidebar-toggle:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}

.brand-logo {
  width: 38px;
  height: 38px;
  background: transparent;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.brand-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.sidebar-mark {
  width: 100%;
  height: 100%;
  display: block;
}

.brand-nameblock {
  display: flex;
  flex-direction: column;
  line-height: 1;
  gap: 0.18rem;
}

.brand-name-main {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-16);
  letter-spacing: 0.14em;
  color: var(--text-primary);
  text-transform: uppercase;
}

.brand-name-sub {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-12);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex-grow: 1;
  /* The nav outgrew short viewports at 15 items, shoving the acting-as
     switcher below the fold. Scroll the LIST, not the sidebar: brand stays
     fixed above, the user footer stays pinned below, and only this middle
     band moves. min-height: 0 is what actually permits a flex child to
     shrink enough to scroll. */
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
  padding-right: 2px;
}
/* Short desktop viewports (a 900px-tall laptop window): tighten the rows so
   the whole nav fits instead of the last item being sliced by the footer. The
   scroll above stays as the backstop for anything shorter. */
@media (min-width: 901px) and (max-height: 960px) {
  .sidebar-nav { gap: 0.1rem; }
  .sidebar-nav .nav-item { padding-top: 0.48rem; padding-bottom: 0.48rem; }
  .sidebar-nav .nav-section-label { padding-top: 0.6rem; margin-top: 0; }
}
.sidebar-nav::-webkit-scrollbar { width: 5px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 999px; }
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: var(--accent); }

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 1rem;
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  font-size: var(--fs-14);
  font-weight: 500;
  transition: var(--transition-smooth);
}

.nav-item i,
.nav-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.nav-item:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}

.nav-item.active {
  background-color: #EDE8DF;
  box-shadow: inset 2px 0 0 var(--accent);
  color: #0F1F3D;
  font-weight: 600;
}

.nav-item.active i,
.nav-item.active svg { color: var(--accent); }

.nav-item.disabled { opacity: 0.4; cursor: not-allowed; }

.sidebar-footer {
  border-top: 1px solid var(--border-color);
  padding-top: 1.1rem;
  margin-top: auto;
  display: flex;
  align-items: center;
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-grow: 1;
}

.user-avatar {
  width: 34px;
  height: 34px;
  background-color: rgba(201, 168, 76, 0.12);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--fs-12);
  color: #0F1F3D;
  border: 1px solid rgba(201, 168, 76, 0.22);
  flex-shrink: 0;
}

.user-info { display: flex; flex-direction: column; }

.user-name {
  font-weight: 600;
  font-size: var(--fs-12);
  color: var(--text-primary);
}

.user-role {
  font-size: var(--fs-11);
  color: var(--text-muted);
}

/* ============================================================
   MAIN CONTENT
   ============================================================ */

.main-content {
  flex-grow: 1;
  overflow-y: auto;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

/* Top Bar */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

/* Copy that depends on the input device, not the width: the board can be
   dragged with a mouse but only tapped on touch. */
.touch-only { display: none; }
@media (hover: none) and (pointer: coarse) {
  .pointer-only { display: none; }
  .touch-only { display: inline; }
}

.header-title h1 {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--text-primary);
}

.header-subtitle {
  font-size: var(--fs-13);
  color: var(--text-secondary);
  margin-top: 0.2rem;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.connection-status {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background-color: var(--bg-card);
  padding: 0.42rem 0.85rem;
  border-radius: 20px;
  border: 1px solid var(--border-color);
  font-size: var(--fs-12);
  font-weight: 500;
  color: var(--text-secondary);
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  background-color: #f59e0b;
  flex-shrink: 0;
}

.connection-status.connected .status-dot  { background-color: var(--status-won); }
.connection-status.disconnected .status-dot { background-color: var(--alert); }

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.52rem 1rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-13);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-smooth);
  border: 1px solid transparent;
}

.btn-primary {
  background: #0F1F3D;
  color: white;
  box-shadow: 0 1px 4px rgba(15, 31, 61, 0.18);
}

.btn-primary:hover {
  background: #162d4a;
  box-shadow: 0 4px 10px rgba(201, 168, 76, 0.22);
}

.btn-secondary {
  background-color: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-secondary);
}

.btn-secondary:hover {
  background-color: var(--bg-hover);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

/* ============================================================
   METRICS
   ============================================================ */

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.metric-card {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.25rem 1.5rem;
}

/* Clickable stat tile → quick filter (Overdue Follow-ups). */
.metric-clickable {
  position: relative;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.metric-clickable:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(15, 31, 61, 0.10); }
.metric-clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.metric-card.metric-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.35);
}
.metric-filter-hint {
  position: absolute; top: 0.6rem; right: 0.8rem;
  font-size: var(--fs-11); font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--accent-text); opacity: 0; transition: opacity 0.15s ease;
}
.metric-card.metric-active .metric-filter-hint { opacity: 1; }

.metric-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.metric-icon i,
.metric-icon svg { width: 20px; height: 20px; }

.metric-icon.total {
  background-color: rgba(201, 168, 76, 0.1);
  color: var(--accent);
  border: 1px solid rgba(201, 168, 76, 0.2);
}

.metric-icon.new {
  background-color: var(--status-new-bg);
  color: var(--status-new);
  border: 1px solid var(--border-color);
}

.metric-icon.inprogress {
  background-color: var(--status-active-bg);
  color: var(--status-active);
  border: 1px solid var(--accent);
}

.metric-icon.completed {
  background-color: var(--status-won-bg);
  color: var(--status-won);
  border: 1px solid var(--status-won-border);
}

.metric-content { display: flex; flex-direction: column; }

.metric-label {
  font-size: var(--fs-11);
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.metric-value {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  margin-top: 0.1rem;
  color: var(--text-primary);
}

/* ============================================================
   WORKDESK TABLE
   ============================================================ */

.workdesk {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow: hidden;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
}

.search-box {
  position: relative;
  max-width: 360px;
  width: 100%;
}

.search-box i,
.search-box svg {
  position: absolute;
  left: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--text-muted);
  pointer-events: none;
}

.search-box input {
  width: 100%;
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  padding: 0.58rem 1rem 0.58rem 2.2rem;
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: var(--fs-13);
  transition: var(--transition-smooth);
}

.search-box input::placeholder { color: var(--text-muted); }

.search-box input:focus {
  outline: none;
  border-color: var(--accent);
  background-color: var(--bg-card);
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.15);
}

.filters { display: flex; gap: 0.85rem; align-items: center; }

.filter-group { display: flex; align-items: center; gap: 0.45rem; }
.filter-group-sort { display: none; } /* phones only — the header sorts elsewhere */

.filter-group label {
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--text-secondary);
}

.filter-group select {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 0.44rem 1.5rem 0.44rem 0.65rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-13);
  font-family: var(--font-family);
  cursor: pointer;
  transition: var(--transition-smooth);
  appearance: auto;
}

.filter-group select:focus {
  outline: none;
  border-color: var(--accent);
}

/* Table */
.table-container {
  overflow-x: auto;
  flex-grow: 1;
}

.triage-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.triage-table th,
.triage-table td {
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
  font-size: var(--fs-13);
}

.triage-table th {
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: var(--fs-11);
  letter-spacing: 0.6px;
  background-color: var(--bg-secondary);
  white-space: nowrap;
}

.triage-table tbody tr {
  cursor: pointer;
  transition: var(--transition-smooth);
}

/* The Work Desk's Prospect (name) column has no fixed width, so in an
   auto-layout table it greedily absorbs all horizontal slack — on a wide
   monitor that reads as a big empty column between Prospect and Owners. Cap it
   so the leftover width flows to the rightmost Next-touch column (min-width'd,
   the useful place for extra room) and lands at the table edge, not mid-row. */
#leads-workdesk .triage-table th:nth-child(3),
#leads-workdesk .triage-table td.cell-primary {
  max-width: 360px;
}

.triage-table tbody tr:hover { background-color: var(--bg-hover); }

.table-loading {
  text-align: center;
  padding: 4rem 0 !important;
  color: var(--text-secondary);
  font-size: var(--fs-13);
}

.loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-color);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.65rem;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   BADGES
   ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.52rem;
  border-radius: 5px;
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* Status */
.badge-status-new {
  background-color: var(--status-new-bg);
  color: var(--status-new);
  border: 1px solid var(--border-color);
}
.badge-status-in-progress {
  background-color: var(--status-active-bg);
  color: var(--status-active);
  border: 1px solid var(--accent);
}
.badge-status-completed {
  background-color: var(--status-won-bg);
  color: var(--status-won);
  border: 1px solid var(--status-won-border);
}

/* Relevance */
.badge-rel-essential {
  background-color: var(--alert-bg);
  color: var(--alert);
  border: 1px solid var(--accent);
}
.badge-rel-high {
  background-color: var(--likelihood-high-bg);
  color: var(--likelihood-high);
  border: 1px solid var(--accent);
}
.badge-rel-medium {
  background-color: var(--likelihood-medium-bg);
  color: var(--likelihood-medium);
  border: 1px solid var(--border-color);
}
.badge-rel-low {
  background-color: var(--likelihood-low-bg);
  color: var(--likelihood-low);
  border: 1px solid var(--status-won-border);
}

/* Table item display */
.item-meta {
  font-size: var(--fs-11);
  color: var(--text-muted);
  margin-top: 0.2rem;
}

.item-title {
  font-weight: 600;
  color: var(--text-primary);
}

/* Umbrella/channel tag — individual prospects that share a referral group
   (e.g. "IP Partners"). Small, muted; searchable but not a merge. */
.group-tag {
  display: inline-block;
  vertical-align: 1px;
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  background-color: var(--bg-hover);
  border: 1px solid var(--border-strong);
  color: #47536B;
}

/* ============================================================
   READ-ONLY VIEWER MODE
   Body gets .role-viewer (core/acting-user.js) when the acting user is a
   role:"viewer". Every write affordance is removed here; the real enforcement
   is Backend/firestore.rules (isViewer can read, never write). Pure action
   controls are hidden; value-bearing inputs are frozen (kept visible so the
   viewer still SEES status / next touch, just can't change them).
   ============================================================ */
body.role-viewer #btn-add-prospect,
body.role-viewer #form-add-note,
body.role-viewer #btn-save-prospect-edits,
body.role-viewer #btn-save-next-touch,
body.role-viewer #btn-summarize-history,
body.role-viewer #btn-summarize-call,
body.role-viewer #btn-delete-prospect,
body.role-viewer .note-delete,
body.role-viewer #mn-approve-all,
body.role-viewer .mn-actions,
body.role-viewer .bulk-check-col,
body.role-viewer #bulk-bar {
  display: none !important;
}

/* Ghost danger button — delete affordances (edit drawer, Trash). Low-key until
   hovered so it never competes with the primary action. */
.btn-danger-ghost {
  background: transparent;
  border: 1px solid transparent;
  color: #8B1A1A;
}
.btn-danger-ghost:hover {
  background: #FBECEC;
  border-color: #E4B4B4;
}
:root[data-theme="dark"] .btn-danger-ghost { color: #e8a5a5; }
:root[data-theme="dark"] .btn-danger-ghost:hover { background: rgba(139, 26, 26, 0.22); border-color: #7a2a2a; }

/* Per-note delete affordance in the timeline — appears on hover of the bubble. */
.note-header-right { display: inline-flex; align-items: center; gap: 0.4rem; }
.note-delete {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 2px;
  border-radius: 4px;
  line-height: 0;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.note-bubble:hover .note-delete { opacity: 0.65; }
.note-delete:hover { opacity: 1; color: #8B1A1A; }
.note-delete i, .note-delete svg { width: 13px; height: 13px; }
/* Frozen (visible but inert) — current status highlight and next-touch text
   stay readable; edit-drawer fields show their values but can't be changed. */
body.role-viewer .status-button-group,
body.role-viewer .next-touch-editor,
body.role-viewer #prospect-edit-drawer input,
body.role-viewer #prospect-edit-drawer select,
body.role-viewer #prospect-edit-drawer textarea,
body.role-viewer #prospect-edit-drawer .np-collab-chips,
body.role-viewer #edit-alias-chips {
  pointer-events: none;
  opacity: 0.7;
}
/* The alias text input is a write control — hide it outright for viewers
   (the chips above still render, frozen, so the names stay readable). */
body.role-viewer #edit-alias-input { display: none !important; }

/* "Also known as" chips — alternate names / key people fed to the matcher. */
.alias-hint {
  font-size: var(--fs-12);
  color: var(--text-muted);
  margin: 0.15rem 0 0.45rem;
  line-height: 1.35;
}
.alias-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.4rem; }
.alias-chips:empty { display: none; }
.alias-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.14rem 0.3rem 0.14rem 0.55rem;
  border-radius: 999px;
  font-size: var(--fs-12);
  font-weight: 600;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
}
.alias-chip-x {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  color: var(--text-muted);
  padding: 0 0.15rem;
}
.alias-chip-x:hover { color: var(--accent-red, #8B1A1A); }

/* Contract-documents progress ("3/6" of the tracked docs sent/executed) —
   detail lives in the title tooltip and the edit drawer's Contracts section. */
.contracts-chip {
  display: inline-block;
  padding: 0.14rem 0.5rem;
  border-radius: 999px;
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: 0.3px;
  background-color: var(--bg-hover);
  border: 1px solid var(--border-strong);
  color: #47536B;
  cursor: default;
}
.contracts-chip-done {
  background-color: var(--status-won-bg);
  border-color: var(--status-won-border);
  color: var(--status-won);
}

/* ============================================================
   ANALYTICS
   ============================================================ */
.an-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.9rem;
  margin-bottom: 1rem;
}
.an-tile {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  padding: 0.9rem 1rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.an-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(15, 31, 61, 0.08); }
.an-tile-label { font-size: var(--fs-11); text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); font-weight: 700; }
.an-tile-value { font-size: 1.6rem; font-weight: 800; color: var(--text-primary); font-family: var(--font-family); margin-top: 0.15rem; }
.an-tile-sub { font-size: var(--fs-12); color: var(--text-secondary); margin-top: 0.1rem; }

.an-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
}
.an-card { padding: 1rem 1.1rem; }
.an-span-2 { grid-column: 1 / -1; }
.an-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.7rem; }
.an-card-head .section-subtitle { margin: 0; }

/* One shared grid per card so every row lines up on the same tracks (count +
   metric columns align across rows, sized to the widest row — no fixed widths
   that would let a wide "$4.5B" steal width from the bar track). */
/* Funnel card: the stacked-bar pattern shared with Command (14px tall here). */
.an-funnel { display: flex; flex-direction: column; gap: 0.65rem; }
.an-funnel .cmd-stacked-bar { height: 14px; }

.an-bars { display: grid; grid-template-columns: 130px 1fr 2.5ch auto; row-gap: 0.55rem; column-gap: 0.7rem; }
.an-bar-row { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: center; }
.an-bars > p { grid-column: 1 / -1; }
.an-bar-label { font-size: var(--fs-13); color: var(--text-primary); font-weight: 600; display: flex; align-items: center; gap: 0.35rem; }
.an-conv { font-size: var(--fs-11); color: var(--text-muted); font-weight: 600; }
.an-bar-track { height: 14px; background: var(--bg-secondary); border-radius: 999px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(15, 31, 61, 0.06); }
.an-bar-fill {
  height: 100%; width: 0; border-radius: 999px; min-width: 3px;
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 70ms);
}
@media (prefers-reduced-motion: reduce) {
  .an-bar-fill { transition: none; }
}
.an-fill-gold { background: linear-gradient(90deg, var(--accent), #E4C878); }
.an-fill-navy { background: linear-gradient(90deg, #33527E, #4A6DA0); }
.an-fill-won { background: #2C7A4B; }
.an-fill-lost { background: #B4886A; }
.an-bar-count { font-size: var(--fs-13); font-weight: 700; color: var(--text-primary); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.an-bar-sub { font-size: var(--fs-11); color: var(--text-muted); font-weight: 500; white-space: nowrap; text-align: left; }
.an-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.an-dot-won { background: #2C7A4B; }
.an-dot-lost { background: #B4886A; }

@media (max-width: 900px) {
  .an-tiles { grid-template-columns: repeat(2, 1fr); }
  .an-grid { grid-template-columns: 1fr; }
  .an-bars { grid-template-columns: 100px 1fr 2.5ch auto; }
}

/* Bulk-select column + action bar (leads work desk). */
.bulk-check-col { width: 34px; text-align: center; padding-left: 8px; padding-right: 0; }
.bulk-check-col input { cursor: pointer; width: 15px; height: 15px; accent-color: var(--accent); }
.triage-table tbody tr.row-selected { background: var(--bg-hover); }

.bulk-bar {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin: 0 0 0.75rem;
  padding: 0.6rem 0.9rem;
  background: var(--navy, #0F1F3D);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.bulk-bar .bulk-count { color: #fff; font-weight: 700; font-size: var(--fs-14); }
.bulk-controls { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.bulk-controls select {
  font-size: var(--fs-13);
  padding: 0.3rem 0.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-primary);
}

/* At-Risk / retention lead marker — a client dissolving or unwinding, kept out
   of the pipeline view + metrics. Red to read as "attention", not pipeline. */
.risk-tag {
  display: inline-block;
  vertical-align: 1px;
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  background-color: #FBECEC;
  border: 1px solid #E4B4B4;
  color: #8B1A1A;
}
:root[data-theme="dark"] .risk-tag {
  background-color: rgba(139, 26, 26, 0.22);
  border-color: #7a2a2a;
  color: #e8a5a5;
}

.item-desc-snippet {
  color: var(--text-secondary);
  font-size: var(--fs-12);
  margin-top: 0.12rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 480px;
}

/* Empty State */
.table-empty {
  text-align: center;
  color: var(--text-secondary);
  padding: 3.5rem 0 !important;
  font-size: var(--fs-13);
}

.table-empty i,
.table-empty svg {
  display: block;
  margin: 0 auto 0.65rem;
  width: 28px;
  height: 28px;
  opacity: 0.3;
}

/* ============================================================
   DRAWER
   ============================================================ */

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: var(--drawer-width);
  height: 100vh;
  background-color: var(--bg-card);
  border-left: 1px solid var(--border-color);
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.07);
  z-index: 100;
  transform: translateX(100%);
  transition: var(--transition-smooth);
  display: flex;
  flex-direction: column;
}

.drawer.open { transform: translateX(0); }

.drawer-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  background-color: var(--bg-secondary);
}

.drawer-header-title {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.drawer-header-title h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-primary);
}

.drawer-tag {
  align-self: flex-start;
  font-size: var(--fs-11);
  font-weight: 800;
  padding: 0.12rem 0.42rem;
  border-radius: 4px;
}

.btn-close-drawer {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.3rem;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
  flex-shrink: 0;
}

.btn-close-drawer:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}
.btn-close-drawer:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The drawer opens with focus on its title (a dialog convention): screen
   readers announce the client, and no button lights up on a tap. */
#drawer-prospect-name:focus { outline: none; }

.drawer-body {
  flex-grow: 1;
  overflow-y: auto;
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.drawer-section {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.section-subtitle {
  font-family: var(--font-display);
  font-size: var(--fs-11);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  border-left: 2px solid var(--accent);
  padding-left: 0.5rem;
}

.info-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  background-color: var(--bg-primary);
  padding: 0.9rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
}

.meta-item { display: flex; flex-direction: column; gap: 0.2rem; }

.meta-label {
  font-size: var(--fs-11);
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.meta-value {
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--text-primary);
}

.meta-value.code {
  font-family: monospace;
  color: var(--accent-text);
}

.info-description p {
  font-size: var(--fs-14);
  line-height: 1.55;
  color: var(--text-secondary);
}

/* Status Buttons — ordered pipeline row, terminal pair separated below */
.status-button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.status-button-group .btn-status { flex: 1 1 auto; }
.status-terminal-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: 0.15rem;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--border-color);
}

.btn-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.58rem 0.5rem;
  border: 1px solid var(--border-color);
  background-color: var(--bg-card);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  font-size: var(--fs-12);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.btn-status:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.btn-status.active {
  border-color: var(--text-primary);
  background-color: var(--status-active-bg);
  color: var(--text-primary);
}

.btn-status.active[data-status="Closed Won"] {
  border-color: var(--status-won);
  background-color: var(--status-won-bg);
  color: var(--status-won);
}

.btn-status.active[data-status="Closed Lost"] {
  border-color: #FCA5A5;
  background-color: #FEE2E2;
  color: #991B1B;
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.dot-new        { background-color: var(--status-new); }
.dot-inprogress { background-color: var(--status-active); }
.dot-completed  { background-color: var(--status-won); }

/* Notes Timeline */
.notes-timeline {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 0.2rem;
}

.note-bubble {
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  padding: 0.8rem 0.95rem;
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  transition: var(--transition-smooth);
}

.note-bubble:hover {
  border-color: var(--border-strong);
  background-color: var(--bg-hover);
}

/* A freshly-added note eases in (fade + gentle rise) instead of popping. Only
   the newest bubble gets this class (see renderNotes). */
@keyframes noteEnter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.note-bubble-entering {
  animation: noteEnter 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
  .note-bubble-entering { animation: none; }
}

.note-header {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-11);
  align-items: center;
}

.note-author {
  font-weight: 700;
  color: var(--accent-text);
}

.note-time { color: var(--text-muted); }

.note-content {
  font-size: var(--fs-13);
  line-height: 1.5;
  color: var(--text-primary);
  white-space: pre-wrap;
}

.no-notes {
  font-size: var(--fs-12);
  color: var(--text-muted);
  text-align: center;
  padding: 1.5rem 0;
  font-style: italic;
}

/* Add Note Form */
.add-note-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.25rem;
}

.add-note-form textarea {
  width: 100%;
  height: 80px;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem;
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: var(--fs-13);
  resize: vertical;
  transition: var(--transition-smooth);
}

.add-note-form textarea::placeholder { color: var(--text-muted); }

.add-note-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.15);
}

.form-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.add-note-form.expanded-note-mode textarea { min-height: 200px; }

.btn-icon {
  width: 34px;
  height: 34px;
  padding: 0;
  justify-content: center;
}

.btn-icon.active {
  border-color: var(--accent);
  color: var(--accent);
  background-color: rgba(201, 168, 76, 0.08);
}

/* Drawer Backdrop */
.drawer-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background-color: rgba(15, 23, 42, 0.25);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-smooth);
}

.drawer-backdrop.active { opacity: 1; visibility: visible; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {
  .app-container { flex-direction: column; }
  .sidebar {
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
    padding: 1rem;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .sidebar-brand { margin-bottom: 0; }
  .sidebar-nav { flex-direction: row; flex-grow: 0; margin-bottom: 0; gap: 0.2rem; }
  .sidebar-footer { display: none; }
  .main-content { padding: 1.25rem; }
  .drawer { width: 100%; }
}

/* ============================================================
   SIDEBAR — COLLAPSED ICON RAIL
   ============================================================ */

.app-container.sidebar-collapsed .sidebar {
  width: var(--sidebar-rail-width);
  padding-left: 0.6rem;
  padding-right: 0.6rem;
}

/* Hide text labels; keep icons */
.app-container.sidebar-collapsed .brand-lockup { display: none; }
.app-container.sidebar-collapsed .brand-lockup ~ .brand-logo { display: flex; }

.app-container.sidebar-collapsed .brand-nameblock,
.app-container.sidebar-collapsed .nav-item span,
.app-container.sidebar-collapsed .nav-section-label,
.app-container.sidebar-collapsed .user-info,
.app-container.sidebar-collapsed .btn-logout {
  display: none;
}

/* Center the logo + toggle in the rail */
.app-container.sidebar-collapsed .sidebar-brand {
  flex-direction: column;
  gap: 0.4rem;
  padding-left: 0;
  padding-bottom: 0.9rem;
  align-items: center;
  border-bottom: 1px solid rgba(201,168,76,0.18);
}
.app-container.sidebar-collapsed .brand-logo { width: 34px; height: 34px; }
/* Back in the flow, under the medallion: the rail is too narrow for a corner. */
.app-container.sidebar-collapsed .btn-sidebar-toggle,
.app-container.sidebar-collapsed .brand-lockup ~ .btn-sidebar-toggle { position: static; margin-left: 0; }

/* Center nav icons, drop the horizontal padding */
.app-container.sidebar-collapsed .nav-item {
  justify-content: center;
  padding: 0.65rem 0;
  gap: 0;
}
.app-container.sidebar-collapsed .nav-item.active {
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* Footer: just the avatar, centered */
.app-container.sidebar-collapsed .sidebar-footer { justify-content: center; }
.app-container.sidebar-collapsed .user-profile { flex-grow: 0; }

/* Utility */
.hidden { display: none !important; }

/* Logout */
.btn-logout {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.45rem;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
  margin-left: auto;
}

.btn-logout:hover {
  background-color: rgba(220, 38, 38, 0.06);
  color: var(--alert);
}

/* ============================================================
   LOGIN
   ============================================================ */

.login-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100vw;
  padding: 1.5rem;
  position: fixed;
  top: 0; left: 0;
  z-index: 1000;

  /* Graduated cream ground + faint diamond grid */
  background-color: #EEE0CC;
  background-image:
    linear-gradient(45deg,  rgba(12,30,54,0.026) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(12,30,54,0.026) 25%, transparent 25%),
    linear-gradient(45deg,  transparent 75%, rgba(12,30,54,0.026) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(12,30,54,0.026) 75%),
    radial-gradient(ellipse 80% 72% at 50% 44%, #fdfbf7 0%, #EEE0CC 100%);
  background-size: 18px 18px, 18px 18px, 18px 18px, 18px 18px, 100% 100%;
  background-position: 0 0, 0 9px, 9px -9px, -9px 0px, 0 0;
}

.login-card {
  width: 100%;
  max-width: 430px;
  background: #ffffff;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(201,168,76,0.42);
  box-shadow:
    0 8px 48px rgba(12,30,54,0.11),
    0 2px 12px rgba(12,30,54,0.07),
    inset 0 0 0 4px rgba(255,255,255,0.8);
  overflow: hidden;
  position: relative;
}

/* Faint watermark — hexagon geometry behind the form */
.login-watermark {
  position: absolute;
  bottom: 1.25rem;
  right: -0.75rem;
  width: 148px;
  height: 148px;
  opacity: 0.045;
  pointer-events: none;
  flex-shrink: 0;
}

.login-inner {
  padding: 2rem 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
  position: relative;
}

.login-header {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(201,168,76,0.2);
}

.login-header .brand-logo {
  flex-shrink: 0;
  width: 58px;
  height: 58px;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.login-title-group h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  line-height: 1.2;
  margin-bottom: 0.22rem;
}

.login-title-group p {
  font-size: var(--fs-11);
  color: var(--text-secondary);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
}

.input-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.input-group label {
  font-size: var(--fs-11);
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.forgot-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: var(--fs-11);
  font-weight: 500;
  color: var(--accent-text);
  font-family: var(--font-family);
  transition: color 0.15s ease;
}

.forgot-link:hover { color: var(--text-primary); }
.forgot-link:disabled { opacity: 0.45; cursor: default; }

.input-wrapper { position: relative; }

.input-wrapper > i,
.input-wrapper > svg {
  position: absolute;
  left: 0.78rem;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--text-muted);
  pointer-events: none;
}

.input-wrapper input {
  width: 100%;
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  padding: 0.68rem 2.6rem 0.68rem 2.2rem;
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: var(--fs-13);
  transition: border-color 0.2s ease, background-color 0.15s ease, box-shadow 0.2s ease;
}

.input-wrapper input::placeholder { color: var(--text-muted); }

.input-wrapper input:focus {
  outline: none;
  background-color: #ffffff;
  border-color: var(--border-color);
  border-bottom-color: var(--accent);
  box-shadow: 0 4px 14px rgba(12,30,54,0.07);
}

.input-eye-btn {
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  border-radius: 4px;
  transition: color 0.15s ease;
}

.input-eye-btn:hover { color: var(--text-secondary); }

.input-eye-btn i,
.input-eye-btn svg { width: 14px; height: 14px; }

.login-error {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--alert-bg);
  border: 1px solid rgba(220, 38, 38, 0.18);
  color: var(--alert);
  padding: 0.62rem 0.8rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-12);
  font-weight: 500;
}

.login-error i,
.login-error svg { width: 14px; height: 14px; flex-shrink: 0; }

.login-success {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--status-won-bg);
  border: 1px solid var(--status-won-border);
  color: var(--status-won);
  padding: 0.62rem 0.8rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-12);
  font-weight: 500;
}

.login-success i,
.login-success svg { width: 14px; height: 14px; flex-shrink: 0; }

.btn-block {
  width: 100%;
  justify-content: center;
  padding: 0.76rem;
  font-size: var(--fs-14);
  border-radius: var(--radius-sm);
  margin-top: 0.2rem;
  border: 1px solid transparent;
  transition: var(--transition-smooth), transform 0.22s ease;
}

/* Login-specific button hover — lift with gold underglow */
.login-form .btn-primary:hover {
  background: #0F2540;
  transform: translateY(-1.5px);
  box-shadow: 0 8px 28px rgba(12,30,54,0.18), 0 2px 10px rgba(201,168,76,0.22);
  border-color: rgba(201,168,76,0.2);
}

.login-form .btn-primary:active {
  transform: translateY(0);
  box-shadow: none;
}

/* "or" divider between password + Google sign-in */
.login-or {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 1.1rem 0 0.9rem;
  color: var(--text-secondary);
  font-size: var(--fs-11);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.login-or::before,
.login-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-color);
}

.btn-google {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-family: var(--font-family);
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: var(--transition-smooth);
}
.btn-google:hover {
  background: var(--bg-primary);
  border-color: var(--accent);
  box-shadow: 0 4px 14px rgba(12,30,54,0.07);
}
.btn-google:disabled { opacity: 0.6; cursor: default; }
.btn-google svg { flex-shrink: 0; }

.login-footer {
  text-align: center;
  font-size: var(--fs-11);
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  border-top: 1px solid var(--border-color);
  padding-top: 1rem;
  margin-top: 1.25rem;
}

/* ============================================================
   RELEVANCE ROW STRIPES
   ============================================================ */

.row-rel-essential { box-shadow: inset 3px 0 0 var(--alert); }
.row-rel-high      { box-shadow: inset 3px 0 0 var(--likelihood-high); }
.row-rel-medium    { box-shadow: inset 3px 0 0 var(--likelihood-medium); }
.row-rel-low       { box-shadow: inset 3px 0 0 rgba(21, 128, 61, 0.5); }

/* Drawer relevance left accent */
.drawer[data-relevance="Essential"] { border-left-color: var(--alert); }
.drawer[data-relevance="High"]      { border-left-color: var(--likelihood-high); }
.drawer[data-relevance="Medium"]    { border-left-color: var(--likelihood-medium); }
.drawer[data-relevance="Low"]       { border-left-color: var(--likelihood-low); }

/* ============================================================
   ENRICHED NOTE BUBBLES
   ============================================================ */

.note-bubble.enriched-note {
  border-left: 2px solid rgba(201, 168, 76, 0.35);
  background-color: rgba(201, 168, 76, 0.04);
}

.enriched-chip {
  display: inline-flex;
  align-items: center;
  background-color: rgba(201, 168, 76, 0.1);
  border: 1px solid rgba(201, 168, 76, 0.22);
  color: var(--accent-text);
  font-size: var(--fs-11);
  font-weight: 700;
  padding: 0.05rem 0.28rem;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  vertical-align: middle;
  margin-left: 0.3rem;
}

/* ============================================================
   ENRICHED NOTE MODAL
   ============================================================ */

.enriched-note-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background-color: rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.enriched-note-overlay.active { opacity: 1; visibility: visible; }

.enriched-note-dialog {
  width: 100%;
  max-width: 700px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  max-height: 88vh;
  transform: translateY(16px) scale(0.98);
  opacity: 0;
  transition: transform 0.25s var(--transition-bounce), opacity 0.2s ease;
}

.enriched-note-overlay.active .enriched-note-dialog {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.enriched-dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1.35rem 1.6rem 1.15rem;
  border-bottom: 1px solid var(--border-color);
  gap: 1rem;
  flex-shrink: 0;
  background-color: var(--bg-secondary);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.enriched-dialog-label { display: flex; flex-direction: column; gap: 0.1rem; }

.enriched-dialog-meta {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.3rem;
}

.enriched-dialog-badge-label {
  display: inline-flex;
  align-items: center;
  background-color: rgba(201, 168, 76, 0.1);
  border: 1px solid rgba(201, 168, 76, 0.22);
  color: var(--accent-text);
  font-size: var(--fs-11);
  font-weight: 700;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.enriched-dialog-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.25;
  max-width: 500px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.enriched-dialog-subtitle {
  font-size: var(--fs-11);
  color: var(--text-muted);
  margin-top: 0.18rem;
}

.enriched-dialog-body {
  flex-grow: 1;
  padding: 1.35rem 1.6rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.enriched-dialog-body textarea {
  flex-grow: 1;
  width: 100%;
  min-height: 280px;
  max-height: 52vh;
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: var(--fs-14);
  line-height: 1.65;
  resize: vertical;
  transition: var(--transition-smooth);
}

.enriched-dialog-body textarea::placeholder { color: var(--text-muted); }

.enriched-dialog-body textarea:focus {
  outline: none;
  border-color: var(--accent);
  background-color: var(--bg-card);
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.15);
}

.enriched-dialog-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.6rem 1.3rem;
  border-top: 1px solid var(--border-color);
  gap: 1rem;
  flex-shrink: 0;
}

.enriched-dialog-hint {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-11);
  color: var(--text-muted);
}

.enriched-dialog-hint i,
.enriched-dialog-hint svg { width: 13px; height: 13px; flex-shrink: 0; }

.enriched-dialog-actions { display: flex; gap: 0.65rem; align-items: center; }

/* ============================================================
   DAILY LOGS SECTION
   ============================================================ */

#section-command,
#section-leads,
#section-followups,
#section-prospects {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

#section-logs {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  min-height: 100%;
}

.logs-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 1.5rem;
  align-items: flex-start;
}

/* Form Panel */
.logs-form-panel {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: sticky;
  top: 0;
}

.logs-form-header h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.logs-form-header p {
  font-size: var(--fs-12);
  color: var(--text-muted);
  margin-top: 0.2rem;
}

.logs-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.logs-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

.log-field-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.log-field-group label {
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--text-secondary);
}

.log-field-group input[type="date"],
.log-field-group input[type="text"],
.log-field-group input[type="number"],
.log-field-group select {
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.54rem 0.75rem;
  font-size: var(--fs-13);
  font-family: var(--font-family);
  color: var(--text-primary);
  transition: var(--transition-smooth);
  width: 100%;
}

.log-field-group input::placeholder { color: var(--text-muted); }

.log-field-group input[type="date"]:focus,
.log-field-group input[type="text"]:focus,
.log-field-group input[type="number"]:focus,
.log-field-group select:focus {
  outline: none;
  border-color: var(--accent);
  background-color: var(--bg-card);
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.15);
}

.log-field-group textarea {
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.8rem;
  font-size: var(--fs-13);
  font-family: var(--font-family);
  color: var(--text-primary);
  resize: vertical;
  transition: var(--transition-smooth);
  line-height: 1.55;
}

.log-field-group textarea::placeholder { color: var(--text-muted); }

.log-field-group textarea:focus {
  outline: none;
  border-color: var(--accent);
  background-color: var(--bg-card);
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.15);
}

.required-mark { color: var(--alert); }

/* Log History Panel */
.logs-history-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.logs-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logs-history-header h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.log-count-badge {
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--text-muted);
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  padding: 0.18rem 0.55rem;
  border-radius: 20px;
}

.logs-history-list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.logs-loading {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--text-secondary);
  font-size: var(--fs-13);
  padding: 2rem 0;
  justify-content: center;
}

.logs-empty-state {
  text-align: center;
  padding: 3.5rem 0;
  color: var(--text-muted);
  font-size: var(--fs-13);
}

.logs-empty-state i,
.logs-empty-state svg {
  display: block;
  margin: 0 auto 0.65rem;
  width: 28px;
  height: 28px;
  opacity: 0.3;
}

/* Log Entry Card */
.log-entry-card {
  padding: 0;
  overflow: hidden;
}

.log-card-header {
  padding: 0.9rem 1.2rem 0.7rem;
  background-color: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.log-card-meta {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.log-card-date {
  font-size: var(--fs-13);
  font-weight: 700;
  color: var(--text-primary);
  font-family: var(--font-display);
}

.log-project-badge {
  font-size: var(--fs-11) !important;
  padding: 0.1rem 0.38rem !important;
}

.log-card-project {
  font-size: var(--fs-12);
  color: var(--text-secondary);
  margin-top: 0.15rem;
}

.log-card-body {
  padding: 1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.log-card-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.log-card-field-label {
  font-size: var(--fs-11);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.log-card-field-label.blocker-label { color: var(--likelihood-high); }
.log-card-field-label.next-label    { color: var(--accent-text); }

.log-card-field p {
  font-size: var(--fs-13);
  line-height: 1.55;
  color: var(--text-primary);
  white-space: pre-wrap;
}

/* Generate Brief Button */
.btn-generate-brief {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.9rem;
  background-color: rgba(201, 168, 76, 0.08);
  border: 1px solid rgba(201, 168, 76, 0.22);
  color: var(--accent-text);
  border-radius: var(--radius-sm);
  font-size: var(--fs-12);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-smooth);
  align-self: flex-start;
}

.btn-generate-brief:hover {
  background-color: rgba(201, 168, 76, 0.14);
  border-color: rgba(201, 168, 76, 0.35);
}

.btn-generate-brief i,
.btn-generate-brief svg { width: 14px; height: 14px; }

/* AI Brief */
.log-ai-brief {
  background-color: rgba(201, 168, 76, 0.05);
  border: 1px solid rgba(201, 168, 76, 0.18);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.ai-brief-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-11);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent-text);
}

.ai-brief-header i,
.ai-brief-header svg { width: 13px; height: 13px; }

.ai-brief-timestamp {
  font-weight: 400;
  color: var(--text-muted);
  margin-left: auto;
  text-transform: none;
  letter-spacing: 0;
}

.ai-brief-text {
  font-size: var(--fs-13);
  line-height: 1.6;
  color: var(--text-secondary);
  white-space: pre-wrap;
}

.log-card-footer {
  padding: 0.55rem 1.2rem;
  border-top: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #FAF8F4;
}

.log-card-time {
  font-size: var(--fs-11);
  color: var(--text-muted);
}

.log-card-id {
  font-family: monospace;
  font-size: var(--fs-11);
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .logs-layout { grid-template-columns: 1fr; }
  .logs-form-panel { position: static; }
}

/* ============================================================
   NAV SECTION LABELS
   ============================================================ */

.nav-section-label {
  font-size: var(--fs-11);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  padding: 0.9rem 0.5rem 0.2rem;
  margin-top: 0.2rem;
  user-select: none;
}

/* ============================================================
   CRM SHARED
   ============================================================ */

#section-contacts,
#section-pipeline,
#section-team,
#section-clients {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

/* CRM stat row */
.crm-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.85rem;
}

.crm-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.1rem 1.25rem;
}

.crm-stat-num {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.crm-stat-label {
  font-size: var(--fs-11);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-top: 0.3rem;
}

/* CRM tab group in toolbar */
.crm-tab-group {
  display: flex;
  gap: 0.2rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 3px;
}

.crm-tab {
  padding: 0.3rem 0.75rem;
  border: none;
  background: transparent;
  border-radius: 5px;
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.crm-tab:hover { background: var(--bg-card); color: var(--text-primary); }

.crm-tab.active {
  background: var(--bg-card);
  color: var(--accent-text);
  box-shadow: 0 1px 3px rgba(0,0,0,0.07);
}

/* Contact avatar */
.contact-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.contact-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--av-bg);
  color: var(--av-color);
  font-size: var(--fs-11);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid color-mix(in srgb, var(--av-color) 15%, transparent);
}

.contact-email {
  font-size: var(--fs-12);
  color: var(--text-secondary);
}

/* Row action button */
.btn-row-action {
  background: none;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.28rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
}

.btn-row-action:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.btn-row-action i,
.btn-row-action svg { width: 14px; height: 14px; }

/* ============================================================
   PIPELINE / KANBAN
   ============================================================ */

.pipeline-total-badge {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 0.38rem 0.85rem;
  font-size: var(--fs-12);
  font-weight: 700;
  color: var(--color-done);
}

.pipeline-total-badge i,
.pipeline-total-badge svg { width: 13px; height: 13px; }

.pipeline-board {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 1rem;
  padding-left: 0.1rem;
}

.pipeline-board::-webkit-scrollbar { height: 4px; }
.pipeline-board::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }

.pipeline-col {
  min-width: 215px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.pipeline-col-header {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0 0.1rem;
  margin-bottom: 0.15rem;
}

.pipeline-col-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pipeline-col-title {
  font-size: var(--fs-12);
  font-weight: 700;
  color: var(--text-secondary);
  flex-grow: 1;
}

.pipeline-col-count {
  font-size: var(--fs-11);
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 0.05rem 0.42rem;
}

.deal-card {
  padding: 0.95rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.deal-card:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,0.09);
  transform: translateY(-1px);
}

.deal-card-top {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}

.deal-logo {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background-color: var(--dl-bg);
  color: var(--dl-color);
  font-size: var(--fs-11);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid color-mix(in srgb, var(--dl-color) 15%, transparent);
}

.deal-company {
  font-size: var(--fs-13);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.deal-contact {
  font-size: var(--fs-12);
  color: var(--text-muted);
  margin-top: 0.1rem;
}

.deal-value {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
}

.deal-value-won { color: var(--status-won); }

.deal-days {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--fs-11);
  color: var(--text-muted);
}

.deal-days i,
.deal-days svg { width: 11px; height: 11px; }

.deal-days-hot { color: var(--likelihood-high); font-weight: 600; }
.deal-days-won { color: var(--status-won); font-weight: 600; }

.deal-card-hot {
  border-left: 2px solid var(--likelihood-high);
}

.deal-card-won {
  border-left: 2px solid var(--status-won);
}

/* ============================================================
   TEAM DIRECTORY
   ============================================================ */

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.team-card {
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  position: relative;
  transition: var(--transition-smooth);
}

.team-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.08); }

.team-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}

.team-avatar {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background-color: var(--ta-bg);
  color: var(--ta-color);
  font-size: var(--fs-13);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--ta-color) 15%, transparent);
}

.team-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--bg-card);
}

.team-status-online { background-color: var(--status-won); }
.team-status-away   { background-color: #f59e0b; }
.team-status-offline { background-color: var(--text-muted); }

/* Former employee — muted card, dated badge, greyed avatar. Kept visible so
   their frozen book stays in oversight's view; clearly not an active member. */
.team-card.former { opacity: 0.72; }
.team-card.former .team-avatar { filter: grayscale(0.6); }
.team-former-badge {
  display: inline-block;
  margin-top: 0.15rem;
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}
/* Former owner's initials chip, wherever it appears on their deals. */
.owner-chip.owner-chip-former { opacity: 0.7; }

.team-name {
  font-size: var(--fs-16);
  font-weight: 700;
  color: var(--text-primary);
  font-family: var(--font-display);
}

.team-role {
  font-size: var(--fs-12);
  color: var(--text-secondary);
  margin-bottom: 0.15rem;
}

.team-email {
  font-size: var(--fs-12);
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.team-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.35rem;
}

.team-tag {
  font-size: var(--fs-11);
  font-weight: 600;
  color: var(--accent-text);
  background: rgba(201, 168, 76, 0.08);
  border: 1px solid rgba(201, 168, 76, 0.2);
  border-radius: 4px;
  padding: 0.1rem 0.38rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.team-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--border-color);
}

.team-project-count {
  font-size: var(--fs-11);
  color: var(--text-muted);
  font-weight: 600;
}

/* ============================================================
   CLIENT PROJECTS
   ============================================================ */

.health-indicator {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-12);
  font-weight: 600;
}

.health-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.health-green  { background-color: var(--status-won); }
.health-yellow { background-color: #f59e0b; }
.health-red    { background-color: var(--alert); }

.triage-link-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--accent-text);
  background: rgba(201, 168, 76, 0.08);
  border: 1px solid rgba(201, 168, 76, 0.2);
  border-radius: 5px;
  padding: 0.18rem 0.5rem;
}

.triage-link-badge i,
.triage-link-badge svg { width: 12px; height: 12px; }

.triage-link-empty {
  color: var(--text-muted);
  background: var(--bg-primary);
  border-color: var(--border-color);
}

@media (max-width: 900px) {
  .crm-stats-row { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   ETZ PROSPECT LEADS — status badges, owner chips, date pills
   ============================================================ */

/* Stage badges — the sales sequence reads cool → warm as a deal advances:
   slate (Introduction) → sky (Demo) → navy (Due Diligence) → gold (Contract). */
.badge-status-introduction {
  background-color: #EEF2F7;
  color: #475569;
  border: 1px solid #CBD5E1;
}
.badge-status-demo {
  background-color: #E0F2FE;
  color: #0369A1;
  border: 1px solid #7DD3FC;
}
.badge-status-due-diligence {
  background-color: var(--status-active-bg);
  color: var(--status-active);
  border: 1px solid var(--accent);
}
.badge-status-contract {
  background-color: var(--alert-bg);
  color: var(--alert);
  border: 1px solid var(--accent);
}
.badge-status-stalled {
  background-color: var(--status-muted-bg);
  color: var(--status-muted);
  border: 1px solid var(--border-color);
}
.badge-status-closed-won {
  background-color: var(--status-won-bg);
  color: var(--status-won);
  border: 1px solid var(--status-won-border);
}
.badge-status-closed-lost {
  background-color: #FEE2E2;
  color: #991B1B;
  border: 1px solid #FCA5A5;
}
/* Pre-existing client — teal, deliberately distinct from Won's green: a
   client the desk didn't win must not read as a win. */
.badge-status-client {
  background-color: #CCFBF1;
  color: #0F766E;
  border: 1px solid #5EEAD4;
}
:root[data-theme="dark"] .badge-status-client { background: rgba(15, 118, 110, 0.22); color: #7DD8CC; border-color: rgba(15, 118, 110, 0.5); }

/* Stage transition dots */
.dot-introduction  { background-color: #64748B; }
.dot-demo          { background-color: #6F93BA; }
.dot-due-diligence { background-color: var(--status-active); }
.dot-contract      { background-color: var(--alert); }
.dot-stalled       { background-color: var(--status-muted); }
.dot-closed-won    { background-color: var(--status-won); }
.dot-client        { background-color: #0F766E; }
.dot-closed-lost   { background-color: #991B1B; }

/* Owner initials chips */
.owner-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}
.owner-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: rgba(201, 168, 76, 0.12);
  border: 1px solid rgba(201, 168, 76, 0.28);
  color: #0F1F3D;
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* Pipeline $ value cell */
.pipeline-value-cell {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-14);
  color: var(--text-primary);
}

/* All Prospects dataframe — tabular numeric cells */
.df-num {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-14);
  color: var(--text-primary);
}
#prospects-df-table td:nth-child(3),
#prospects-df-table th:nth-child(3),
#prospects-df-table td:nth-child(4),
#prospects-df-table th:nth-child(4) {
  text-align: right;
}

/* Deadline date pills */
.date-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.3rem;
  padding: 0.14rem 0.5rem;
  border-radius: 999px;
  font-size: var(--fs-11);
  font-weight: 600;
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  white-space: nowrap;
}
.date-pill-overdue {
  background-color: #FEE2E2;
  border-color: #FCA5A5;
  color: #991B1B;
}
.date-pill-soon {
  background-color: var(--alert-bg);
  border-color: var(--accent);
  color: var(--alert);
}
/* Derived Follow up: stalled — nothing real happened in 14+ days (incl.
   rolled-forward deadlines). Muted slate, deliberately calmer than overdue. */
.date-pill-stalled {
  background-color: var(--bg-hover);
  border-color: var(--border-strong);
  color: #47536B;
}
.cell-followup .date-pill { margin-top: 0; }

/* Drawer status attribution caption */
.status-caption {
  margin-top: 0.55rem;
  font-size: var(--fs-11);
  color: var(--text-muted);
}

/* Next touch editor */
.next-touch-editor {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.next-touch-editor input[type="text"],
.next-touch-editor input[type="date"] {
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.75rem;
  font-family: var(--font-family);
  font-size: var(--fs-13);
  color: var(--text-primary);
  outline: none;
  transition: var(--transition-smooth);
}
.next-touch-editor input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.next-touch-row {
  display: flex;
  gap: 0.5rem;
}
.next-touch-row input[type="date"] { flex-grow: 1; }

/* Acting-user select in sidebar footer */
.user-select {
  /* Strip the native select chrome (its arrow overlaps long names and its
     built-in inset misaligns the text from the role line below). */
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  /* Custom muted chevron with reserved space so text never collides with it. */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  border: none;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: var(--fs-12);
  color: var(--text-primary);
  cursor: pointer;
  outline: none;
  padding: 0 18px 0 0;
  max-width: 148px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Locked acting-as: a regular user is bound to their own identity and can't
   switch. Render as plain text — no pointer, no arrow, no disabled dimming. */
.user-select.user-select-locked {
  cursor: default;
  opacity: 1;
  background-image: none;
  padding-right: 0;
}

/* ============================================================
   FOLLOW-UPS VIEW
   ============================================================ */

.followups-groups {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  padding-bottom: 2rem;
}

.followup-group-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-14);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.followup-header-overdue { color: #991B1B; }
.followup-header-soon    { color: var(--alert); }
.followup-header-muted   { color: var(--text-muted); }

.followup-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.9rem;
}

.followup-card {
  cursor: pointer;
}

.followup-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}
.followup-card-top .date-pill { margin-top: 0; }

.followup-card .deal-contact {
  margin-bottom: 0.6rem;
  white-space: normal;
}

.followup-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--border-color);
}

/* ============================================================
   NOTES TIMELINE — type chips, structured AI summaries
   ============================================================ */

.note-structured {
  margin-top: 0.5rem;
  padding: 0.5rem 0.65rem;
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
}
.note-structured-label {
  display: block;
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
}
.note-structured ul {
  margin: 0;
  padding-left: 1.1rem;
  font-size: var(--fs-12);
  color: var(--text-secondary);
}
.note-structured li { margin-bottom: 0.15rem; }

.note-source {
  margin-top: 0.4rem;
  font-size: var(--fs-11);
  color: var(--text-muted);
  font-style: italic;
}

/* ============================================================
   CALL NOTES / AI SUMMARY MODAL
   ============================================================ */

.call-notes-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
  margin-top: 0.5rem;
  font-size: var(--fs-12);
}
.call-notes-count { color: var(--text-muted); }
.call-notes-count-warn { color: #B45309; font-weight: 600; }
.call-notes-warn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #B45309;
  font-weight: 500;
}
.call-notes-warn.hidden { display: none; }
.call-notes-warn i { width: 13px; height: 13px; flex-shrink: 0; }

.call-summary-preview {
  margin-top: 0.8rem;
  padding: 0.9rem 1rem;
  background-color: var(--bg-primary);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  max-height: 240px;
  overflow-y: auto;
}
.call-summary-preview.hidden { display: none; }

.call-preview-header {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--alert);
  margin-bottom: 0.5rem;
}
.call-preview-header i { width: 14px; height: 14px; }

.call-preview-sentiment {
  margin-left: auto;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: var(--fs-11);
  text-transform: capitalize;
}
.sentiment-positive { background-color: var(--status-won-bg); color: var(--status-won); }
.sentiment-neutral  { background-color: var(--status-muted-bg); color: var(--status-muted); }
.sentiment-negative { background-color: #FEE2E2; color: #991B1B; }

.call-preview-summary {
  font-size: var(--fs-13);
  color: var(--text-primary);
  line-height: 1.5;
  margin-bottom: 0.4rem;
}

/* ============================================================
   SORTABLE TABLE — click-to-sort headers + Date column
   ============================================================ */

.th-sortable {
  cursor: pointer;
  user-select: none;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.th-sortable:hover {
  color: var(--text-secondary);
  background-color: #EDE8DF;
}
.th-sortable.sorted {
  color: var(--accent-text);
}

.sort-arrow {
  display: inline-block;
  margin-left: 0.3rem;
  font-size: var(--fs-11);
  line-height: 1;
  color: var(--accent-text);
}

/* Date (first) column — timeAgo primary + absolute date underneath */
.cell-date .date-primary {
  font-weight: 600;
  font-size: var(--fs-13);
  color: var(--text-primary);
  white-space: nowrap;
}

/* ============================================================
   COLLAPSIBLE DRAWER — collapse button + floating reopen tab
   ============================================================ */

.drawer-header-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

/* Floating tab on the right edge — appears when the drawer is collapsed
   but a prospect is still selected. Click to bring the panel back. */
.drawer-reopen-tab {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%) translateX(100%);
  z-index: 99;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 190px;
  padding: 0.7rem 0.85rem 0.7rem 0.7rem;
  background-color: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-right: none;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  box-shadow: -4px 0 18px rgba(0, 0, 0, 0.08);
  font-family: var(--font-family);
  font-weight: 600;
  font-size: var(--fs-12);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, visibility 0.2s ease;
}

.drawer-reopen-tab.visible {
  transform: translateY(-50%) translateX(0);
  opacity: 1;
  visibility: visible;
}

.drawer-reopen-tab:hover {
  background-color: var(--bg-secondary);
  border-color: var(--accent);
}

.drawer-reopen-tab i,
.drawer-reopen-tab svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
  flex-shrink: 0;
}

.drawer-reopen-tab span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   TOUCHPOINT HISTORY MODAL — large centered, blurred backdrop
   ============================================================ */

/* Sit above the drawer (z-index 100) and the other modals (300) */
.timeline-overlay { z-index: 400; }

.timeline-dialog {
  max-width: 900px;
  max-height: 90vh;
}

/* Drawer section subtitle row: title + expand button */
.section-subtitle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.section-subtitle-row .section-subtitle { margin-bottom: 0; }

.btn-timeline-expand {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-family);
  font-size: var(--fs-12);
  font-weight: 600;
  transition: var(--transition-smooth);
  flex-shrink: 0;
}
.btn-timeline-expand:hover {
  background-color: var(--bg-secondary);
  border-color: var(--accent);
  color: var(--text-primary);
}
.btn-timeline-expand i,
.btn-timeline-expand svg { width: 14px; height: 14px; }

/* Small button variant (used for Generate in the summary head) */
.btn-sm {
  padding: 0.4rem 0.7rem;
  font-size: var(--fs-12);
}

/* Pinned AI summary zone */
.timeline-summary-zone {
  padding: 1rem 1.75rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
  background-color: #FBF9F4;
  flex-shrink: 0;
  max-height: 42vh;
  overflow-y: auto;
}

.timeline-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}
.timeline-summary-head-label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--alert);
}
.timeline-summary-head-label i,
.timeline-summary-head-label svg { width: 15px; height: 15px; }

.timeline-summary-empty {
  font-size: var(--fs-13);
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.5;
}

.timeline-summary-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}

.timeline-summary-overview {
  font-size: var(--fs-14);
  color: var(--text-primary);
  line-height: 1.55;
  margin-bottom: 0.55rem;
}

.timeline-summary-caption {
  margin-top: 0.7rem;
  font-size: var(--fs-11);
  color: var(--text-muted);
}

/* Momentum pills */
.momentum-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.14rem 0.55rem;
  border-radius: 999px;
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: 0.2px;
}
.momentum-heating_up { background-color: var(--alert-bg); color: var(--alert); }
.momentum-steady     { background-color: var(--status-won-bg); color: var(--status-won); }
.momentum-stalled    { background-color: #FEF3C7; color: #92400E; }
.momentum-cooling    { background-color: var(--status-new-bg); color: var(--status-new); }

/* Scrollable full-history body */
.timeline-body {
  flex-grow: 1;
  overflow-y: auto;
  padding: 1.1rem 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.timeline-body-label {
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.7rem;
}

/* Override the drawer's cramped 280px cap — the modal timeline is roomy */
.timeline-notes-list {
  max-height: none;
  overflow: visible;
  gap: 0.75rem;
}

/* ============================================================
   TOP PROSPECTS — strategic lead dossier board
   ============================================================ */

.dossier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 1rem;
  padding-bottom: 2rem;
  /* stretch (grid default): every card in a row gets the row's height, so a
     card with a sparse touchpoint block doesn't end short of its neighbors */
}

.dossier-card {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1.1rem 1.2rem;
  cursor: pointer;
  transition: var(--transition-smooth);
}
.dossier-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
}
.dossier-card-hot { border-left: 2px solid var(--likelihood-high); }

.dossier-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.dossier-identity { flex-grow: 1; min-width: 0; }
.dossier-identity .deal-company { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dossier-category {
  flex-shrink: 0;
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  background-color: var(--bg-primary);
}
.dossier-category-ria {
  border-color: var(--accent);
  color: var(--alert);
  background-color: var(--alert-bg);
}

.dossier-financials {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.85rem;
}
.dossier-stat { display: flex; flex-direction: column; gap: 0.15rem; }
.dossier-stat-label {
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.dossier-stat-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text-primary);
}
.dossier-stat-accent { color: var(--alert); }

.dossier-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.close-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.14rem 0.55rem;
  border-radius: 999px;
  font-size: var(--fs-11);
  font-weight: 700;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--status-new);
  white-space: nowrap;
}
.dossier-status-meta {
  margin-left: auto;
  font-size: var(--fs-11);
  color: var(--text-muted);
  white-space: nowrap;
}

.dossier-block { display: flex; flex-direction: column; gap: 0.3rem; }
.dossier-block-label {
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.dossier-block p {
  font-size: var(--fs-12);
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}
.dossier-block-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(0.78rem * 1.5 * 2);
}

.dossier-line {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(0.78rem * 1.5 * 2);
}
.dossier-line-tag {
  display: inline-block;
  font-size: var(--fs-11);
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 0.08rem 0.4rem;
  margin-right: 0.4rem;
  border-radius: 4px;
  background-color: var(--status-new-bg);
  color: var(--status-new);
  border: 1px solid var(--border-color);
  vertical-align: 1px;
}
.dossier-line-tag.tag-next {
  background-color: var(--alert-bg);
  color: var(--alert);
  border-color: var(--accent);
}
.dossier-line-date { color: var(--text-muted); font-size: var(--fs-12); }
.dossier-block .date-pill { align-self: flex-start; }

.dossier-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border-top: 1px solid var(--border-color);
  padding-top: 0.65rem;
  /* pin to the card bottom — stretched cards park their slack above the
     footer, so owner chips and the updated stamp align across a row */
  margin-top: auto;
}
.dossier-updated { font-size: var(--fs-11); color: var(--text-muted); }

/* ============================================================
   ADD PROSPECT MODAL
   ============================================================ */
.add-prospect-dialog { max-width: 640px; }

/* Override the Call-Notes body defaults (overflow:hidden, tall single textarea)
   — this form has many fields, so let it scroll if it exceeds the modal. */
.add-prospect-body {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  overflow-y: auto;
}

.add-prospect-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem 1rem;
}
.add-prospect-grid .span-2 { grid-column: 1 / -1; }

.add-prospect-body textarea {
  flex-grow: 0;
  min-height: 58px;
  max-height: 160px;
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.75rem;
  font-size: var(--fs-13);
  font-family: var(--font-family);
  color: var(--text-primary);
  resize: vertical;
  line-height: 1.5;
  transition: var(--transition-smooth);
}
.add-prospect-body textarea::placeholder { color: var(--text-muted); }
.add-prospect-body textarea:focus {
  outline: none;
  border-color: var(--accent);
  background-color: var(--bg-card);
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.15);
}

/* Owner + collaborator picker */
.owner-collab-picker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.np-owner-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  font-size: var(--fs-12);
  font-weight: 700;
  background-color: var(--alert-bg);
  color: var(--alert);
  border: 1px solid var(--accent);
  white-space: nowrap;
}
.np-collab-sep { color: var(--text-muted); font-weight: 700; }
.np-collab-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.np-collab-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.6rem 0.28rem 0.3rem;
  border-radius: 999px;
  font-size: var(--fs-12);
  font-weight: 600;
  background-color: var(--bg-primary);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: var(--transition-smooth);
}
.np-collab-chip:hover { border-color: var(--accent); color: var(--text-primary); }
.np-collab-chip.selected {
  background-color: #0F1F3D;
  color: #FFFFFF;
  border-color: #0F1F3D;
}
.np-collab-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: var(--fs-11);
  font-weight: 700;
  background-color: rgba(15, 31, 61, 0.08);
  color: #0F1F3D;
}
.np-collab-chip.selected .np-collab-initials {
  background-color: rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
}
.np-collab-hint { font-size: var(--fs-11); color: var(--text-muted); margin-top: 0.3rem; }

.np-error {
  font-size: var(--fs-12);
  color: #C0392B;
  font-weight: 600;
  margin: 0;
}

/* ============================================================
   EDIT PROSPECT DRAWER
   ============================================================ */
#edit-drawer-badge {
  background-color: rgba(201, 168, 76, 0.1);
  border: 1px solid rgba(201, 168, 76, 0.22);
  color: var(--accent-text);
}

.drawer-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  padding: 1rem 1.4rem;
  border-top: 1px solid var(--border-color);
  flex-shrink: 0;
}

.changelog-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.changelog-entry {
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-sm);
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
}

.changelog-line {
  margin: 0;
  font-size: var(--fs-12);
  color: var(--text-primary);
  line-height: 1.45;
}
.changelog-line strong { font-weight: 700; }

.changelog-meta {
  display: block;
  margin-top: 0.2rem;
  font-size: var(--fs-11);
  color: var(--text-muted);
}

.changelog-empty {
  font-size: var(--fs-12);
  color: var(--text-muted);
  margin: 0;
}

/* ============================================================
   COMMAND / DAILY TRIAGE VIEW
   ============================================================ */
.cmd-section-label {
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 1rem 1.25rem 0.6rem;
}

.cmd-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 0.35rem;
  border-radius: 999px;
  font-size: var(--fs-12);
  font-weight: 700;
  background-color: var(--bg-hover);
  color: #47536B;
}
.cmd-count-overdue { background-color: #FEE2E2; color: #991B1B; }
.cmd-count-stalled { background-color: var(--bg-hover); color: #47536B; }

/* Action queue rows */
#cmd-queue tbody tr { cursor: pointer; }
#cmd-queue tbody tr:hover { background-color: var(--bg-hover); }
#cmd-queue tbody tr.active {
  background-color: var(--bg-hover);
  box-shadow: inset 3px 0 0 var(--accent);
}
/* One meta line under the name: stage dot + stage · group. */
.cmd-row-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem;
  margin-top: 0.2rem;
  font-size: var(--fs-12); color: var(--text-muted);
}
.cmd-stage { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--text-secondary); font-weight: 500; }
.cmd-stage .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.cmd-group { text-transform: uppercase; letter-spacing: 0.4px; font-size: var(--fs-11); font-weight: 600; }
#cmd-queue td { padding-top: 0.7rem; padding-bottom: 0.7rem; }
#cmd-queue .date-pill { margin-top: 0; }

/* Folded rows ("Show all N"). */
#cmd-queue tbody tr.cmd-row-folded { display: none; }
.cmd-queue-more {
  display: block; width: 100%;
  padding: 0.8rem 1.25rem;
  background: none; border: none; border-top: 1px solid var(--border-color);
  color: var(--accent-text); font: inherit; font-size: var(--fs-13); font-weight: 600;
  cursor: pointer; text-align: center;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.cmd-queue-more:hover { background: var(--bg-hover); }
.cmd-queue-more:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Row shortcuts — quiet until the row is hovered or focused. */
.cmd-actions-cell { text-align: right; }
.cmd-row-actions { display: inline-flex; gap: 0.2rem; opacity: 0; transition: opacity 0.12s ease; }
#cmd-queue tbody tr:hover .cmd-row-actions,
#cmd-queue tbody tr:focus-within .cmd-row-actions,
#cmd-queue tbody tr.active .cmd-row-actions { opacity: 1; }
@media (hover: none) { .cmd-row-actions { opacity: 1; } }
.cmd-act {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border: 1px solid var(--border-color); border-radius: var(--radius-sm);
  background: var(--bg-card); color: var(--text-secondary);
  cursor: pointer; transition: var(--transition-smooth);
}
.cmd-act:hover { border-color: var(--accent); color: var(--accent-text); }
.cmd-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cmd-act i, .cmd-act svg { width: 15px; height: 15px; }

/* Graded overdue: a few days late is softer, a month+ is loudest. */
.date-pill-overdue.date-pill-mild { background-color: #FEF2F2; border-color: #FECACA; color: #B91C1C; }
.date-pill-overdue.date-pill-severe { background-color: #B91C1C; border-color: #B91C1C; color: #FFFFFF; }

/* Tiles: Needs Action leads (it's the whole queue); zero tiles recede. */
.cmd-metrics { grid-template-columns: 1.5fr repeat(3, 1fr); }
.metric-sub { font-size: var(--fs-12); color: var(--text-muted); margin-top: 0.1rem; }
.metric-card.metric-zero { opacity: 0.6; }
.metric-card.metric-zero:hover { opacity: 1; }

/* By-owner strip — one card per owner, click to filter the queue. */
.cmd-owner-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));  /* 5 owners fit one row */
  gap: 0.6rem;
  padding: 0 1.25rem 1.1rem;
}
.cmd-owner-card {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
  background: var(--bg-card); color: inherit; font: inherit; text-align: left;
  cursor: pointer; transition: var(--transition-smooth);
}
.cmd-owner-card:hover { border-color: var(--border-strong); background: var(--bg-hover); }
.cmd-owner-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cmd-owner-card.selected { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.3); }
.cmd-owner-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cmd-owner-name { font-size: var(--fs-13); font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd-owner-money { font-size: var(--fs-11); color: var(--text-muted); }
.cmd-owner-counts { display: inline-flex; gap: 0.25rem; flex-shrink: 0; }
.cmd-count-due { background-color: var(--alert-bg); color: var(--alert); }
.cmd-owner-empty { padding: 0 1.25rem 1rem; }

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

@media (max-width: 1100px) {
  .cmd-metrics { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .cmd-owner-strip { grid-template-columns: 1fr; padding: 0 1rem 1rem; }
  /* Phones: shortcuts sit at the foot of the card, always visible. */
  #cmd-queue td.cmd-actions-cell { justify-content: flex-end; padding-top: 0.4rem; }
  .cmd-act { width: 36px; height: 36px; }
}

.cmd-clear {
  margin-left: 0.5rem;
  font-size: var(--fs-11);
  font-weight: 700;
  color: var(--accent-text);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
}
.cmd-clear:hover { text-decoration: underline; }

/* ============================================================
   ENVIRONMENT BADGE / SWITCHER (fixed top-right)
   ============================================================ */
.env-badge {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.75rem;
  margin-top: 0.5rem;
  border-top: 1px solid var(--border-color);
  border-radius: 0;
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  user-select: none;
  background: none;
  color: var(--text-muted);
  transition: var(--transition-smooth);
}
.env-badge:hover { background-color: var(--bg-hover); color: var(--text-primary); }
.env-badge i, .env-badge svg { width: 13px; height: 13px; opacity: 0.6; margin-left: auto; }

.env-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background-color: #94A3B8;
  flex-shrink: 0;
}
.env-dot-local, .env-dot-sandbox, .env-dot-production { }
.env-dot-sandbox { background-color: #D97706; }
.env-dot-production { background-color: var(--accent); }

.env-badge.env-local { color: #47536B; }
.env-badge.env-sandbox { color: #92400E; }
.env-badge.env-production { color: #9A7B1E; }

/* Read-only indicator for non-oversight users: visible label, no switching —
   drop the pointer, the hover state, and the dropdown chevron. */
.env-badge-readonly { cursor: default; }
.env-badge-readonly:hover { background-color: transparent; }
.env-badge-readonly > i, .env-badge-readonly > svg { display: none; }

.env-menu {
  position: absolute;
  bottom: calc(100% + 0.3rem);
  left: 0.5rem;
  min-width: 150px;
  padding: 0.3rem;
  border-radius: var(--radius-sm);
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.env-menu-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
}
.env-menu-item:hover { background-color: var(--bg-hover); }
.env-menu-item.selected { background-color: var(--bg-hover); }
.env-menu-item.selected::after { content: "✓"; margin-left: auto; color: var(--accent); font-weight: 800; }

/* Collapsed rail: hide label + chevron, center the env dot */
.app-container.sidebar-collapsed .env-badge {
  justify-content: center;
  padding: 0.5rem 0;
}
.app-container.sidebar-collapsed #env-badge-label,
.app-container.sidebar-collapsed .env-badge > i,
.app-container.sidebar-collapsed .env-badge > svg { display: none; }

/* ============================================================
   CUSTOM DATE PICKER (replaces the native <input type="date"> popup)
   ============================================================ */
.dp-input {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='15'%20height='15'%20fill='none'%20stroke='%23967B61'%20stroke-width='1.5'%20stroke-linecap='round'%3E%3Crect%20x='2.5'%20y='3.5'%20width='10'%20height='9'%20rx='1.5'/%3E%3Cpath%20d='M2.5%206h10M5%202.3v2M10%202.3v2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.1rem;
}

.dp-popup {
  position: fixed;
  z-index: 4000;
  width: 264px;
  background: #ffffff;
  border: 1px solid rgba(201, 168, 76, 0.35);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(12, 30, 54, 0.16), 0 2px 8px rgba(12, 30, 54, 0.08);
  padding: 0.85rem;
  user-select: none;
  animation: dpIn 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes dpIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .dp-popup { animation: none; } }

.dp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}
.dp-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-14);
  color: var(--text-primary);
}
.dp-titles { display: flex; gap: 0.15rem; align-items: baseline; }
.dp-titlebtn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-14);
  color: var(--text-primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.15rem 0.35rem;
  border-radius: 6px;
  transition: var(--transition-smooth);
}
.dp-titlebtn:hover { background: var(--bg-secondary); color: var(--accent-text); }

/* Month + year quick-jump grids */
.dp-cells {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 0.35rem 0;
}
.dp-cell {
  padding: 0.65rem 0.3rem;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-family);
  font-size: var(--fs-13);
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color 0.12s, color 0.12s;
}
.dp-cell:hover { background: var(--bg-secondary); }
.dp-cell.dp-sel {
  background: var(--accent);
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(201, 168, 76, 0.4);
}
.dp-nav { display: flex; gap: 0.2rem; }
.dp-nav button {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: var(--transition-smooth);
}
.dp-nav button:hover { background: var(--bg-secondary); color: var(--text-primary); }

.dp-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 0.25rem;
}
.dp-weekdays span {
  text-align: center;
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  text-transform: uppercase;
  padding: 0.2rem 0;
}

.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-day {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-family);
  font-size: var(--fs-13);
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color 0.12s, color 0.12s;
}
.dp-day:hover { background: var(--bg-secondary); }
.dp-day.dp-out { color: #C4BBAC; }
.dp-day.dp-today { box-shadow: inset 0 0 0 1.5px rgba(201, 168, 76, 0.55); }
.dp-day.dp-sel {
  background: var(--accent);
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(201, 168, 76, 0.4);
}
.dp-day.dp-sel:hover { background: var(--accent-text); }

.dp-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border-color);
}
.dp-foot button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-family);
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--accent-text);
  padding: 0.2rem 0.3rem;
  border-radius: 6px;
  transition: var(--transition-smooth);
}
.dp-foot button:hover { color: var(--accent); background: rgba(201, 168, 76, 0.08); }

/* ============================================================
   MEETING NOTES INBOX
   ============================================================ */

/* Pending-count pill on the sidebar nav item */
.nav-count-badge {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-11);
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: var(--accent);
  border-radius: 20px;
}
.sidebar-collapsed .nav-count-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  margin-left: 0;
}

/* Responsive card grid — fills the content width (2-up on wide screens), so
   the toolbar's right-aligned actions sit flush over the card area instead of
   floating beside a narrow single column. */
.meeting-notes-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
  gap: 1.25rem;
  position: relative; /* positioning context for cards animating out (absolute) */
  /* default stretch: cards in a row share the same height (harmonized rows) */
}
@media (max-width: 980px) {
  .meeting-notes-list { grid-template-columns: 1fr; }
}
.meeting-notes-list > .logs-empty-state { grid-column: 1 / -1; }

.mn-card,
.cs-card {
  padding: 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.mn-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
}

.mn-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-16);
  color: var(--text-primary);
  line-height: 1.3;
}

.mn-meta {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.2rem;
  font-size: var(--fs-12);
  color: var(--text-muted);
}
.mn-meta .mn-dot { opacity: 0.5; }

.mn-conf {
  flex-shrink: 0;
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.2rem 0.55rem;
  border-radius: 20px;
  white-space: nowrap;
}
.mn-conf.conf-high { color: var(--status-won); background: var(--status-won-bg); border: 1px solid #C6E7CC; }
.mn-conf.conf-mid  { color: #92400E; background: #FEF3C7; border: 1px solid #F3E0A6; }
.mn-conf.conf-low  { color: #6B7280; background: var(--bg-secondary); border: 1px solid var(--border-color); }
.mn-conf.conf-none { color: #9A7B1E; background: rgba(201, 168, 76, 0.13); border: 1px solid rgba(201, 168, 76, 0.35); }

.mn-summary {
  font-size: var(--fs-14);
  line-height: 1.5;
  color: var(--text-secondary);
}
.cal-guests { color: var(--text-muted); }

/* Calendar Sync tabs — split client touches from administrative/ops. */
/* A reviewed card leaves with a beat of confirmation, then collapses — it used
   to blink out the instant the Firestore snapshot landed, which read as the app
   losing your click rather than accepting it. Green flash = accepted, collapse
   = filed. */
@keyframes cs-card-out {
  0% { opacity: 1; transform: none; max-height: 420px; }
  22% {
    opacity: 1; transform: scale(0.995);
    background-color: rgba(22, 101, 52, 0.10);
    box-shadow: inset 0 0 0 1px rgba(22, 101, 52, 0.35);
    max-height: 420px;
  }
  55% { opacity: 0.55; transform: scale(0.985) translateY(-2px); max-height: 420px; }
  100% {
    opacity: 0; transform: scale(0.97) translateY(-6px);
    max-height: 0; margin-top: 0; margin-bottom: 0;
    padding-top: 0; padding-bottom: 0; border-width: 0;
  }
}
.cs-card.cs-card-exit {
  overflow: hidden;
  pointer-events: none;
  animation: cs-card-out 440ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
:root[data-theme="dark"] .cs-card.cs-card-exit { /* same shape, dark-safe tint */ }
@media (prefers-reduced-motion: reduce) {
  .cs-card.cs-card-exit { animation-duration: 1ms; }
}

/* Bundled review — pick several, act once. */
.cs-pick {
  display: inline-flex; align-items: center; gap: 0.35rem;
  margin-right: auto;                     /* pin left, actions stay right */
  font-size: var(--fs-12); color: var(--text-muted); cursor: pointer;
  user-select: none;
}
.cs-pick input { cursor: pointer; }
.cs-card.cs-picked {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-glow, rgba(201, 168, 76, 0.35));
}
/* `display:flex` on a class outranks the reset's [hidden]{display:none}, so the
   bar must opt out explicitly or it renders as an empty strip when empty. */
.cs-bulkbar[hidden] { display: none; }
.cs-bulkbar {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  margin: 0 0 0.75rem; padding: 0.6rem 0.9rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  position: sticky; top: 0; z-index: 5;
}
.cs-bulk-n { font-weight: 700; font-size: var(--fs-13); color: var(--text-primary); margin-right: auto; }
.cs-bulk-clear {
  background: none; border: none; cursor: pointer;
  font-size: var(--fs-12); color: var(--text-muted); text-decoration: underline;
}
.cs-bulkbar .btn-primary,
.cs-bulkbar .btn-secondary {
  padding: 0.45rem 0.9rem;
  font-family: var(--font-family);
  font-size: var(--fs-13);
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
}
.cs-bulkbar button[disabled] { opacity: 0.6; cursor: progress; }

.cs-tabs {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; margin-bottom: 1.1rem; flex-wrap: wrap;
}
.cs-tablist {
  display: inline-flex; gap: 0.25rem;
  background: var(--bg-secondary); padding: 0.25rem; border-radius: 10px;
}
.cs-tab {
  display: inline-flex; align-items: center; gap: 0.45rem;
  border: none; background: transparent; cursor: pointer;
  font-family: var(--font-family); font-size: var(--fs-14); font-weight: 600;
  color: var(--text-secondary); padding: 0.4rem 0.85rem; border-radius: var(--radius-sm);
  transition: background 0.15s ease, color 0.15s ease;
}
.cs-tab:hover { color: var(--text-primary); }
.cs-tab.active {
  background: var(--bg-card); color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(15, 31, 61, 0.10);
}
.cs-tab-count {
  font-size: var(--fs-12); font-weight: 700; color: var(--text-muted);
  background: var(--bg-hover); border-radius: 999px;
  padding: 0.05rem 0.42rem; min-width: 1.15rem; text-align: center;
}
.cs-tab.active .cs-tab-count { color: var(--accent-text); }

/* Meetings archive: scope tabs reuse the Calendar Sync segmented control, and
   a meeting with no tracked client is labelled rather than hidden. */
.mtg-tabs { margin-bottom: 1rem; }

/* Contract Sync: an onboarding row that needs a client chosen before it can
   apply, plus its sheet note. */
.cs-assign { display: flex; align-items: center; gap: 0.5rem; margin: 0.15rem 0 0.1rem; }
.cs-assign .cs-prospect {
  flex: 1; min-width: 0; min-height: 38px;
  padding: 0.35rem 0.6rem;
  font-family: var(--font-family); font-size: var(--fs-13);
  color: var(--text-primary); background: var(--bg-card);
  border: 1px solid var(--border-color); border-radius: var(--radius-sm);
}
.cs-onb-note { font-style: italic; }

/* Onboarding stage (Clients Onboarding tab) — one pill, the furthest stage.
   Colour runs cool -> green along the funnel, and only Funded reaches the
   win green: an open account with no money in it is progress, not a win. */
.onb-pill {
  display: inline-block;
  margin-top: 0.3rem;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: var(--fs-11);
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-secondary);
}
/* Under the signature count in the narrow Contracts column, never beside it. */
.cell-contracts .onb-pill { display: block; width: max-content; }
.onb-kyc-wait { border-style: dashed; color: var(--text-muted); }
.onb-kyc      { color: var(--text-secondary); }
.onb-sent     { color: #0369A1; border-color: #7DD3FC; background: #F0F9FF; }
.onb-open     { color: var(--accent-text); border-color: var(--accent); background: var(--alert-bg, #FBF6E9); }
.onb-funded   { color: var(--status-won); border-color: var(--status-won-border); background: var(--status-won-bg); }
:root[data-theme="dark"] .onb-sent { color: #7DD3FC; border-color: rgba(125, 211, 252, 0.45); background: rgba(3, 105, 161, 0.18); }
:root[data-theme="dark"] .onb-open { background: rgba(201, 168, 76, 0.14); }

/* Drawer: the pill, then everything the sheet said on the line under it. */
.meta-item-wide { grid-column: 1 / -1; }
#drawer-onboarding .onb-pill { margin-top: 0; }
.onb-detail {
  display: block;
  margin-top: 0.3rem;
  font-size: var(--fs-12);
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.45;
}

/* Contract state (core/contract-state.js) — one pill per Contract-stage lead.
   Tone follows the lane: the onboarding funnel's "in motion" blue while the
   packet is live (the gold belongs to the Contract badge beside it), a calm
   dashed outline when it's deliberately on hold, amber when it needs the
   owner's decision. Only Funded is green; only a deal the sheet ended is red. */
.cstate-pill {
  display: inline-block;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: var(--fs-11);
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-secondary);
  cursor: default;
}
.cstate-execution { color: #0369A1; border-color: #7DD3FC; background: #F0F9FF; }
.cstate-k-funded  { color: var(--status-won); border-color: var(--status-won-border); background: var(--status-won-bg); }
.cstate-blocked   { color: #47536B; border-style: dashed; border-color: var(--border-strong); background: var(--bg-hover); }
.cstate-decide    { color: var(--alert); border-color: #F2C879; background: var(--alert-bg); }
.cstate-k-not-proceeding,
.cstate-k-declined { color: #991B1B; border-color: #FCA5A5; background: #FEF2F2; }
:root[data-theme="dark"] .cstate-execution { color: #7DD3FC; border-color: rgba(125, 211, 252, 0.45); background: rgba(3, 105, 161, 0.18); }
:root[data-theme="dark"] .cstate-blocked { color: #C9D4E6; }
:root[data-theme="dark"] .cstate-decide { border-color: rgba(227, 198, 113, 0.5); }
:root[data-theme="dark"] .cstate-k-not-proceeding,
:root[data-theme="dark"] .cstate-k-declined { color: #FCA5A5; border-color: rgba(252, 165, 165, 0.45); background: rgba(153, 27, 27, 0.2); }
/* Under the stage badge in the Work Desk, never beside it. */
td[data-label="Stage"] .cstate-pill { display: block; width: max-content; margin-top: 0.3rem; }

/* Board: the Contract column's lanes. */
.board-lane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.35rem;
  padding: 0 0.15rem;
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.board-lane-head:first-child { margin-top: 0; }
.board-lane-decide { color: var(--alert); }
.board-lane-count { font-variant-numeric: tabular-nums; font-weight: 600; }
.board-card-state { margin-top: 0.3rem; }

/* Drawer: the evidence behind the Contract stage, and the owner's calls. */
.contract-triage {
  margin-top: 0.75rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
}
.ct-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ct-label {
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ct-detail { margin-top: 0.4rem; font-size: var(--fs-12); color: var(--text-secondary); line-height: 1.45; }
.ct-conflicts { margin: 0.4rem 0 0 1rem; padding: 0; font-size: var(--fs-12); color: #991B1B; line-height: 1.45; }
:root[data-theme="dark"] .ct-conflicts { color: #FCA5A5; }
.ct-call { margin-top: 0.4rem; font-size: var(--fs-12); color: var(--text-muted); font-style: italic; }
.ct-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.ct-hold-form { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.6rem; }
.ct-hold-form select,
.ct-hold-form input[type="text"] {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.65rem;
  font-family: var(--font-family);
  font-size: var(--fs-13);
  color: var(--text-primary);
}
.ct-hold-form input[type="text"]:focus,
.ct-hold-form select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.ct-hold-buttons { display: flex; justify-content: flex-end; gap: 0.4rem; }
body.role-viewer .ct-actions,
body.role-viewer .ct-hold-form { display: none !important; }
/* A disabled apply must LOOK disabled: the onboarding card's button is dead
   until a client is chosen, and a full-contrast button that ignores clicks
   reads as a broken app rather than a deliberate gate. */
.cs-card .cs-apply[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}
/* A new-client card that looks like someone already in the book (or another
   row for the same person). It already wears the unmatched gold edge; the
   banner is what sets it apart. */
.cs-card .mn-verify.cs-dup { margin-top: 0; }
.mtg-count-internal {
  color: var(--text-muted);
  background: var(--bg-hover);
  border-color: var(--border-color);
  font-weight: 600;
}

/* Calendar Sync card internals — tidy meta, subtle context, left-aligned age. */
.mn-meta .cal-meta-when, .mn-meta .cal-meta-loc { display: inline-flex; align-items: center; gap: 0.3rem; }
.mn-meta .cal-meta-when i, .mn-meta .cal-meta-loc i { width: 13px; height: 13px; opacity: 0.65; }
.cs-context {
  font-size: var(--fs-13); color: var(--text-secondary);
  margin-top: 0.15rem; padding-left: 0.05rem;
}
.cs-card .mn-actions { align-items: center; }
.cs-card .mn-actions .cs-ago {
  margin-right: auto; font-size: var(--fs-12); color: var(--text-muted);
}

.mn-raw {
  font-size: var(--fs-13);
  border-top: 1px dashed var(--border-color);
  padding-top: 0.65rem;
}
.mn-raw summary {
  cursor: pointer;
  color: var(--accent-text);
  font-weight: 600;
  font-size: var(--fs-12);
  user-select: none;
}
.mn-raw summary:hover { text-decoration: underline; }
.mn-raw pre {
  margin: 0.55rem 0 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-family);
  font-size: var(--fs-13);
  line-height: 1.5;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.8rem;
}
.mn-doclink {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--accent-text);
}

.mn-assign {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.mn-assign-label {
  font-size: var(--fs-12);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.mn-select {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0.7rem;
  font-family: var(--font-family);
  font-size: var(--fs-14);
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-smooth);
}
.mn-select:hover { border-color: var(--border-strong); }
.mn-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.mn-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  border-top: 1px solid var(--border-color);
  padding-top: 0.85rem;
  margin-top: auto; /* pin to the card bottom so equal-height rows align actions */
}
.mn-actions button {
  padding: 0.5rem 0.95rem;
  font-family: var(--font-family);
  font-size: var(--fs-13);
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--transition-smooth);
}
.mn-actions .mn-post:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

/* Meeting-notes: lead-name mention + unmatched state.
   Unmatched cards get the gold rail plus a whisper of warm tint at the top —
   enough to scan for, not enough to shout. */
.mn-card.mn-unmatched,
.cs-card.mn-unmatched {
  border-left: 3px solid var(--accent);
  background: linear-gradient(180deg, rgba(201, 168, 76, 0.05), rgba(201, 168, 76, 0) 60%), var(--bg-card);
}
.mn-card.mn-unmatched .mn-mention {
  background: rgba(201, 168, 76, 0.09);
  border-color: rgba(201, 168, 76, 0.28);
}
.mn-mention {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-12);
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.6rem;
}
.mn-mention strong { color: var(--text-primary); font-weight: 600; }
.mn-mention i, .mn-mention svg { width: 13px; height: 13px; opacity: 0.6; flex-shrink: 0; }

/* Weak / ambiguous match — verify before posting; kept out of bulk approve. */
.mn-card.mn-needs-verify { border-left: 3px solid var(--accent); }
.mn-verify {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  font-size: var(--fs-12);
  color: var(--accent-text);
  background: var(--accent-glow);
  border: 1px solid rgba(201, 168, 76, 0.4);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.6rem;
  margin-top: 0.5rem;
}
.mn-verify strong { font-weight: 700; }
.mn-verify i, .mn-verify svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; }

/* Meeting-notes: owner row + new-lead owner picker */
.mn-owner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.mn-owner-label {
  font-size: var(--fs-12);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.mn-owner-names {
  font-size: var(--fs-13);
  color: var(--text-secondary);
}
.mn-newlead {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.mn-owner-select {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0.7rem;
  font-family: var(--font-family);
  font-size: var(--fs-14);
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-smooth);
}
.mn-owner-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* ============================================================
   MEETING NOTES — refined admin filter toolbar
   ============================================================ */
.mn-filters {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Shared control shell — consistent 38px height, hairline, soft lift */
.mn-filter-input,
.mn-filter-owner {
  height: 38px;
  font-family: var(--font-family);
  font-size: var(--fs-13);
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15, 31, 61, 0.03);
  transition: var(--transition-smooth);
}
.mn-filter-input::placeholder { color: var(--text-muted); }
.mn-filter-input:hover,
.mn-filter-owner:hover { border-color: var(--border-strong); }
.mn-filter-input:focus,
.mn-filter-owner:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* Search field with a leading glass icon */
.mn-search { position: relative; display: flex; align-items: center; }
.mn-search > i,
.mn-search > svg {
  position: absolute;
  left: 0.7rem;
  width: 15px; height: 15px;
  color: var(--text-muted);
  pointer-events: none;
}
.mn-filter-input {
  width: 220px;
  padding: 0 0.85rem 0 2.15rem;
}

/* Owner select — leading users icon + custom chevron (native arrow hidden) */
.mn-select-wrap { position: relative; display: flex; align-items: center; }
.mn-select-wrap > i:first-child,
.mn-select-wrap > svg:first-child {
  position: absolute;
  left: 0.7rem;
  width: 15px; height: 15px;
  color: var(--text-muted);
  pointer-events: none;
}
.mn-select-chevron {
  position: absolute;
  right: 0.65rem;
  width: 15px; height: 15px;
  color: var(--text-muted);
  pointer-events: none;
}
.mn-filter-owner {
  padding: 0 2rem 0 2.15rem;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

/* Pending counter — refined gold-tinted pill with a status dot */
.mn-pending-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  height: 38px;
  padding: 0 0.9rem;
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: #9A7B1E;
  background: linear-gradient(180deg, rgba(201, 168, 76, 0.11), rgba(201, 168, 76, 0.045));
  border: 1px solid rgba(201, 168, 76, 0.30);
  border-radius: 20px;
  white-space: nowrap;
}
.mn-pending-badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.16);
}

/* Meeting-notes: toolbar row (below the header) — filters left, actions right */
.mn-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 1.5rem 0 2rem;          /* room to breathe: header ↕ toolbar ↕ cards */
}
.mn-toolbar-right {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Segmented scope toggle. The track is recessed and the selected pill sits
   proud of it with a hairline gold ring — the selection reads as a physical
   position rather than just a colour change. */
.mn-scope-toggle {
  display: inline-flex;
  padding: 3px;
  background: linear-gradient(180deg, rgba(15, 31, 61, 0.045), rgba(15, 31, 61, 0.02));
  border: 1px solid var(--border-color);
  border-radius: 11px;
  box-shadow: inset 0 1px 2px rgba(15, 31, 61, 0.055);
}
.mn-scope-toggle button {
  padding: 0.34rem 0.8rem;
  font-family: var(--font-family);
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: 0.012em;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.mn-scope-toggle button:hover:not(.active) { color: var(--text-primary); }
.mn-scope-toggle button.active {
  color: var(--text-primary);
  background: var(--bg-card);
  box-shadow:
    0 1px 2px rgba(15, 31, 61, 0.10),
    0 0 0 1px rgba(201, 168, 76, 0.30);
}
.mn-scope-toggle button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Contract Sync: one tab per kind of card, each with its count. Four tabs
   outgrow a phone, so the track scrolls inside itself rather than wrapping
   into a ragged second row or pushing the page sideways. */
.cs-type-tabs {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.cs-type-tabs::-webkit-scrollbar { display: none; }
.cs-type-tabs button { flex: none; white-space: nowrap; }
.cs-type-tabs button:disabled { cursor: default; opacity: 0.6; }   /* mid bulk run */
.cs-tab-n {
  margin-left: 0.4rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text-muted);
}
.cs-tab-n:empty { display: none; }
.cs-type-tabs button.active .cs-tab-n { color: var(--accent-text); }

/* Primary action — a deep navy with a lit top edge and a gold hairline, so it
   reads as milled metal rather than a flat rectangle. */
.mn-approve-all {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  height: 38px;
  padding: 0 1.05rem;
  font-family: var(--font-family);
  font-size: var(--fs-13);
  font-weight: 650;
  letter-spacing: 0.012em;
  /* The count changes as rows are applied; tabular figures stop the label
     shifting width on every tick. */
  font-variant-numeric: tabular-nums;
  color: #F7F4EC;
  background: linear-gradient(180deg, #1C3459 0%, #0F1F3D 100%);
  border: 1px solid rgba(201, 168, 76, 0.28);
  border-radius: 11px;
  box-shadow:
    0 1px 2px rgba(15, 31, 61, 0.20),
    0 6px 16px -6px rgba(15, 31, 61, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease,
              box-shadow 0.2s ease, transform 0.2s ease;
}
.mn-approve-all:hover:not(:disabled) {
  background: linear-gradient(180deg, #234271 0%, #132747 100%);
  border-color: rgba(201, 168, 76, 0.58);
  box-shadow:
    0 2px 5px rgba(15, 31, 61, 0.22),
    0 12px 24px -10px rgba(201, 168, 76, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.13);
  transform: translateY(-1px);
}
.mn-approve-all:active:not(:disabled) {
  transform: translateY(0);
  box-shadow:
    0 1px 2px rgba(15, 31, 61, 0.24),
    inset 0 1px 3px rgba(0, 0, 0, 0.22);
}
.mn-approve-all:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Nothing to apply is a RESTING state, not a broken one. Dimming the navy left
   a muddy grey slab; a quiet surface reads as "the queue is clear". */
.mn-approve-all:disabled {
  opacity: 1;
  color: var(--text-muted);
  background: var(--bg-secondary);
  border-color: var(--border-color);
  box-shadow: none;
  transform: none;
  cursor: default;
}
.mn-approve-all:disabled i, .mn-approve-all:disabled svg { opacity: 0.5; }
.mn-approve-all i, .mn-approve-all svg { width: 15px; height: 15px; }

@media (prefers-reduced-motion: reduce) {
  .mn-approve-all { transition: none; }
  .mn-approve-all:hover:not(:disabled) { transform: none; }
}

/* ============================================================
   TOASTS + THEMED CONFIRM
   ============================================================ */
/* Persistent "live data unavailable" banner (core/connection-banner.js). Sits
   above everything: it means the view is NOT the live book. Not dismissible by
   timeout — only by a clean snapshot or a reload. */
.data-banner {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 5000;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1rem;
  background: #8B1A1A;
  color: #FFF3F3;
  font-size: var(--fs-13);
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
.data-banner.visible { display: flex; }
.data-banner i, .data-banner svg { width: 16px; height: 16px; flex-shrink: 0; }
.data-banner-msg { flex: 1; line-height: 1.4; font-weight: 500; }
.data-banner-retry {
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.16);
  color: inherit;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 6px;
  padding: 0.25rem 0.7rem;
  font: inherit;
  font-size: var(--fs-12);
  cursor: pointer;
}
.data-banner-retry:hover { background: rgba(255, 255, 255, 0.26); }
/* Push the app down so the banner never covers the header. */
body.has-data-banner .main-content, body.has-data-banner .sidebar { padding-top: 2.4rem; }

.toast-container {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  z-index: 4000;
}
.toast {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: 420px;
  padding: 0.7rem 0.9rem;
  background: #0F1F3D;
  color: #fff;
  font-size: var(--fs-13);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 31, 61, 0.28);
  animation: toast-in 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.1);
}
.toast i, .toast svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }
.toast-msg { line-height: 1.4; }
.toast-actions { display: flex; gap: 0.4rem; margin-left: 0.2rem; }
.toast-action {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.6rem;
  font-family: var(--font-family);
  font-size: var(--fs-12);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition-smooth);
}
.toast-action:hover { background: rgba(201, 168, 76, 0.4); }
.toast-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.55);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.1rem;
}
.toast-close:hover { color: #fff; }
.toast-out { opacity: 0; transform: translateY(6px); transition: all 0.18s ease; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.tconfirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 31, 61, 0.35);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4100;
  animation: toast-in 0.15s ease;
}
.tconfirm { width: min(420px, calc(100vw - 2rem)); padding: 1.25rem 1.35rem; }
.tconfirm-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-primary);
  margin-bottom: 0.4rem;
}
.tconfirm-msg { font-size: var(--fs-14); color: var(--text-secondary); line-height: 1.5; margin-bottom: 1.1rem; }
.tconfirm-actions { display: flex; justify-content: flex-end; gap: 0.6rem; }
.tconfirm-actions button {
  padding: 0.5rem 0.95rem;
  font-family: var(--font-family);
  font-size: var(--fs-13);
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--transition-smooth);
}
.tconfirm-actions .tconfirm-cancel { border-color: var(--border-color); }

.tconfirm-digest { width: min(460px, calc(100vw - 2rem)); }
.tconfirm-digest-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: min(320px, 50vh);
  overflow-y: auto;
  margin-bottom: 1.1rem;
}
.tconfirm-digest-row {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 0.6rem;
  row-gap: 0.15rem;
  align-items: center;
  width: 100%;
  padding: 0.55rem 0.7rem;
  background: var(--surface-2, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-family);
  transition: var(--transition-smooth);
}
.tconfirm-digest-row:hover { border-color: var(--accent, var(--text-primary)); }
.tconfirm-digest-name { font-weight: 600; font-size: var(--fs-14); color: var(--text-primary); }
.tconfirm-digest-sub {
  grid-column: 1 / -1;
  font-size: var(--fs-12);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   SKELETON LOADING
   ============================================================ */
@keyframes sk-shimmer { 0% { background-position: -300px 0; } 100% { background-position: 300px 0; } }
.sk-line {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--bg-secondary) 25%, #EDE6DA 50%, var(--bg-secondary) 75%);
  background-size: 600px 100%;
  animation: sk-shimmer 1.2s infinite linear;
}
.sk-row td { padding: 1.05rem 1.2rem; }
.sk-card { min-height: 190px; }
.sk-card .sk-line + .sk-line { margin-top: 0.9rem; }

/* Empty-state CTA button */
.logs-empty-state .empty-cta {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  font-family: var(--font-family);
  font-size: var(--fs-13);
  font-weight: 600;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-smooth);
}

/* Clamp inbox summaries so grid rows stay uniform (full text in "Full notes") */
.mn-summary {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Outreach cards. The drafted message is what the reviewer actually approves,
   so it must never clamp the way a preview summary does. */
.or-message {
  font-size: var(--fs-14);
  line-height: 1.55;
  color: var(--text-primary);
  background: var(--surface-2);
  border-left: 2px solid var(--accent);
  border-radius: 6px;
  padding: 10px 12px;
  margin-top: 10px;
  white-space: pre-wrap;
  font-family: inherit;
}
.or-warm-row { gap: 8px; }
.or-warm-via {
  flex: 1;
  min-width: 150px;
  padding: 5px 9px;
  font: inherit;
  color: var(--text-primary);
  background: var(--surface-2);
  border: 1px solid var(--border-color);
  border-radius: 6px;
}
.or-warm-set { font-weight: 600; color: var(--text-primary); }

/* ============================================================
   ⌘K COMMAND PALETTE
   ============================================================ */
.palette-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 31, 61, 0.30);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 13vh;
  z-index: 4200;
  animation: toast-in 0.15s ease;
}
.palette { width: min(560px, calc(100vw - 2rem)); padding: 0; overflow: hidden; }
.palette-input-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border-color);
}
.palette-input-row i, .palette-input-row svg { width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; }
.palette-input-row input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-family);
  font-size: var(--fs-16);
  color: var(--text-primary);
}
.palette-input-row kbd {
  font-size: var(--fs-11);
  font-family: var(--font-family);
  color: var(--text-muted);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 5px;
  padding: 0.15rem 0.4rem;
}
.palette-results { max-height: 330px; overflow-y: auto; padding: 0.4rem; }
.palette-section-label {
  font-size: var(--fs-11);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: 0.5rem 0.7rem 0.25rem;
}
.palette-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--fs-14);
  color: var(--text-primary);
}
.palette-item.active, .palette-item:hover { background: var(--bg-hover); }
.palette-item i, .palette-item svg { width: 15px; height: 15px; color: var(--text-muted); flex-shrink: 0; }
.palette-item .pi-meta { margin-left: auto; font-size: var(--fs-12); color: var(--text-muted); white-space: nowrap; }
.palette-empty { padding: 1.1rem; text-align: center; font-size: var(--fs-13); color: var(--text-muted); }

/* ============================================================
   PIPELINE BOARD (kanban)
   ============================================================ */
.board-columns {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: 1rem;
}
.board-col {
  flex-shrink: 0;
  width: 250px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: var(--transition-smooth);
}
.board-col.drag-over {
  border-color: var(--accent);
  background: rgba(201, 168, 76, 0.07);
}
.board-col-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.8rem 0.5rem;
}
.board-col-count {
  margin-left: auto;
  font-size: var(--fs-11);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.board-col-sum {
  padding: 0 0.8rem 0.5rem;
  font-size: var(--fs-11);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.board-cards {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0 0.6rem 0.6rem;
  min-height: 48px;
}
.board-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.75rem;
  cursor: grab;
  box-shadow: 0 1px 2px rgba(15, 31, 61, 0.04);
  transition: var(--transition-smooth);
}
.board-card:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(15, 31, 61, 0.10); border-color: var(--border-strong); }
.board-card:active { cursor: grabbing; }
.board-card.dragging { opacity: 0.45; }
/* core/motion.js flipRender: the hover transition would fight Flip's transforms */
.is-flipping .board-card { transition: none !important; }
.board-card-name { font-weight: 600; font-size: var(--fs-13); color: var(--text-primary); line-height: 1.3; }
.board-card-next { font-size: var(--fs-12); color: var(--text-muted); margin-top: 0.25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 0.5rem; }
.board-card-foot .pipeline-value-cell { font-size: var(--fs-12); }

/* ============================================================
   OWNER HUES — one stable, muted color per owner
   ============================================================ */
.owner-hue-gr { --oh: #4A6741; --oh-bg: rgba(91, 117, 83, 0.14);  --oh-bd: rgba(91, 117, 83, 0.34); }   /* George — sage */
.owner-hue-jg { --oh: #33527E; --oh-bg: rgba(62, 92, 138, 0.13);  --oh-bd: rgba(62, 92, 138, 0.32); }   /* Jiazi — steel blue */
.owner-hue-sj { --oh: #8A5A2E; --oh-bg: rgba(158, 107, 58, 0.14); --oh-bd: rgba(158, 107, 58, 0.34); }  /* Samuel — bronze */
.owner-hue-sb { --oh: #7A4458; --oh-bg: rgba(139, 84, 105, 0.13); --oh-bd: rgba(139, 84, 105, 0.32); }  /* Seth — mulberry */
.owner-hue-cp { --oh: #2E6E6A; --oh-bg: rgba(46, 110, 106, 0.13); --oh-bd: rgba(46, 110, 106, 0.32); }  /* Chi — teal */
.owner-hue-vv { --oh: #6E5A8A; --oh-bg: rgba(122, 101, 158, 0.13);--oh-bd: rgba(122, 101, 158, 0.32); } /* Valerie — plum */
.owner-hue-sr { --oh: #3B4B66; --oh-bg: rgba(59, 75, 102, 0.13); --oh-bd: rgba(59, 75, 102, 0.32); }   /* Sebastian — graphite */

.owner-chip[class*="owner-hue-"] {
  background-color: var(--oh-bg);
  border-color: var(--oh-bd);
  color: var(--oh);
}
.team-avatar { --ta-bg: #0F1F3D; --ta-color: #FFFFFF; } /* fallback for non-owners */
.team-avatar[class*="owner-hue-"] { --ta-bg: var(--oh-bg); --ta-color: var(--oh); }

/* ============================================================
   MICRO-INTERACTIONS
   ============================================================ */
/* Clickable cards lift on hover */
.deal-card, .dossier-card {
  transition: var(--transition-bounce);
}
.deal-card:hover, .dossier-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 31, 61, 0.10), 0 2px 6px rgba(201, 168, 76, 0.10);
}
/* Status badges ease between colors when a status changes */
.badge { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
/* Buttons acknowledge the press */
.btn-primary:active, .btn-secondary:active, .mn-approve-all:active,
.mn-actions button:active, .btn-status:active, .toast-action:active {
  transform: scale(0.96);
}
.btn-status { transition: var(--transition-bounce); }
/* Owner chips pop slightly under the cursor (title tooltip reveals the name) */
.owner-chip { transition: var(--transition-bounce); }
.owner-chip:hover { transform: scale(1.15); z-index: 1; }
/* Sidebar icons nudge toward their destination */
.nav-item svg { transition: var(--transition-bounce); }
.nav-item:hover svg { transform: translateX(2px); }

/* ============================================================
   COMMAND — pipeline by stage (labeled row per stage, no chart lib)
   ============================================================ */
.cmd-pipeline-rows {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  /* .workdesk is a full-bleed card (tables pad their own cells) — these rows
     need the card inset themselves, or they clip at the rounded edges. */
  padding: 0.35rem 1.25rem 1.2rem;
}
/* Pipeline by stage: one stacked bar + wrapping legend (compressed from the
   old per-stage rows so the action queue starts above the fold). */
.cmd-bar-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.cmd-bar-total {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  padding-right: 1.25rem;
  font-variant-numeric: tabular-nums;
}
.cmd-stacked-bar {
  display: flex;
  gap: 2px;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--bg-secondary);
}
.cmd-bar-seg { display: block; height: 100%; min-width: 3px; }
.cmd-bar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  margin-top: 0.15rem;
}
.cmd-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}
.cmd-legend-item .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cmd-legend-name { font-size: var(--fs-12); color: var(--text-secondary); }
.cmd-legend-value {
  font-size: var(--fs-12);
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.cmd-legend-count { font-size: var(--fs-12); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cmd-stage-empty { font-size: var(--fs-13); color: var(--text-muted); padding: 0.6rem 0; }

/* The queue is the dominant surface — heavier card shadow than .glass-card. */
.cmd-queue-card { box-shadow: 0 2px 8px rgba(15, 31, 61, 0.06); }

/* Gold chip in the queue label naming the active tile filter. */
.cmd-filter-chip {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: rgba(201, 168, 76, 0.16);
  border: 1px solid rgba(201, 168, 76, 0.45);
  color: var(--accent-text);
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  vertical-align: middle;
}

/* ============================================================
   DARK MODE — navy ground, gold accent
   ============================================================ */
:root[data-theme="dark"] {
  --bg-primary: #0B1424;
  --bg-secondary: #101C30;
  --bg-surface: #152238;
  --bg-card: #152238;
  --bg-hover: #1B2A44;
  --border-color: #263A57;
  --border-glow: rgba(201, 168, 76, 0.15);
  --text-primary: #E9EDF5;
  --text-secondary: #9AA7BC;
  --text-muted: #6B7A93;
  --status-new: #E9EDF5;          --status-new-bg: #1B2A44;
  --status-active: #E9EDF5; --status-active-bg: #22344F;
  --status-won: #7BD8A0;     --status-won-bg: rgba(34, 110, 72, 0.25);
  --status-muted: #9AA7BC;    --status-muted-bg: #1B2A44;
  --alert: #E3C671;      --alert-bg: rgba(201, 168, 76, 0.16);
  --likelihood-high: #E3C671;           --likelihood-high-bg: rgba(201, 168, 76, 0.16);
  --likelihood-medium: #C9D4E6;         --likelihood-medium-bg: #22344F;
  --likelihood-low: #7BD8A0;            --likelihood-low-bg: rgba(34, 110, 72, 0.22);
  --accent-text: #E4C878;
  --border-strong: #33496B;
  --status-won-border: rgba(60, 160, 100, 0.5);
}

/* Navy primary buttons would vanish on a navy ground — flip them to gold. */
:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .mn-approve-all {
  background: var(--accent);
  color: #0F1F3D;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
:root[data-theme="dark"] .btn-primary:hover:not(:disabled),
:root[data-theme="dark"] .mn-approve-all:hover:not(:disabled) {
  background: #D9BC63;
  box-shadow: 0 4px 12px rgba(201, 168, 76, 0.30);
}
:root[data-theme="dark"] .contracts-chip {
  background-color: #1B2A44;
  border-color: #2C4166;
  color: #C9D4E6;
}
:root[data-theme="dark"] .contracts-chip-done {
  background-color: var(--status-won-bg);
  border-color: #2C6E48;
  color: var(--status-won);
}
:root[data-theme="dark"] .toast { background: #1B2A44; border: 1px solid #2C4166; }
:root[data-theme="dark"] .login-card { background: var(--bg-card); }
:root[data-theme="dark"] .log-card-header { background-color: var(--bg-secondary); }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2C4166; }
:root[data-theme="dark"] .pipeline-board::-webkit-scrollbar-thumb { background: #2C4166; }
:root[data-theme="dark"] .sk-line {
  background: linear-gradient(90deg, var(--bg-secondary) 25%, #22344F 50%, var(--bg-secondary) 75%);
  background-size: 600px 100%;
}

/* Hardcoded light badges → dark equivalents */
:root[data-theme="dark"] .badge-status-closed-lost  { background: rgba(153, 27, 27, 0.22); color: #F1A8A8; border-color: rgba(220, 90, 90, 0.45); }
:root[data-theme="dark"] .badge-status-introduction { background: #22344F; color: #A9B8CE; border-color: #33496B; }
:root[data-theme="dark"] .badge-status-demo         { background: rgba(3, 105, 161, 0.22); color: #7CC8F0; border-color: rgba(3, 105, 161, 0.5); }
:root[data-theme="dark"] .badge-status-stalled      { border-color: #33496B; }
:root[data-theme="dark"] .metric-icon.new          { border-color: #33496B; }
:root[data-theme="dark"] .mn-conf.conf-high { background: rgba(22, 101, 52, 0.22); color: #7BD8A0; border-color: rgba(60, 160, 100, 0.5); }
:root[data-theme="dark"] .mn-conf.conf-mid  { background: rgba(201, 168, 76, 0.16); color: #E3C671; border-color: rgba(201, 168, 76, 0.4); }
:root[data-theme="dark"] .mn-conf.conf-none { color: #E3C671; }
:root[data-theme="dark"] .mn-pending-badge  { color: #E3C671; }
:root[data-theme="dark"] .env-badge.env-production { color: #E3C671; }

/* Owner chips: same hue family, lightened text for the navy ground */
:root[data-theme="dark"] .owner-chip { color: #E9EDF5; }
:root[data-theme="dark"] .owner-hue-gr { --oh: #9DBE92; }
:root[data-theme="dark"] .owner-hue-jg { --oh: #93B2E0; }
:root[data-theme="dark"] .owner-hue-sj { --oh: #DBAD79; }
:root[data-theme="dark"] .owner-hue-sb { --oh: #D598B2; }
:root[data-theme="dark"] .owner-hue-cp { --oh: #7FC8C3; }
:root[data-theme="dark"] .owner-hue-vv { --oh: #BCA6DE; }
:root[data-theme="dark"] .owner-hue-sr { --oh: #9FB0CE; }
:root[data-theme="dark"] .team-avatar { --ta-bg: #22344F; --ta-color: #E9EDF5; }

/* Dark-mode fixes for hardcoded light surfaces spotted in review */
:root[data-theme="dark"] .triage-table th { background-color: var(--bg-secondary); }
/* Hard-coded slate on navy was near-invisible; lift the neutral counts. */
:root[data-theme="dark"] .cmd-count:not(.cmd-count-overdue):not(.cmd-count-due) { background-color: #243553; color: var(--text-secondary); }
:root[data-theme="dark"] .nav-item.active {
  background-color: rgba(201, 168, 76, 0.13);
  color: #E9EDF5;
}

/* Header action pair (count pill + Add Prospect): one 38px control family —
   matching heights, icon scale, and radius language, so the pair reads as a
   single toolbar instead of two unrelated elements. */
.pipeline-total-badge {
  height: 38px;
  padding: 0 0.95rem;
  gap: 0.45rem;
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 2px rgba(15, 31, 61, 0.03);
}
.pipeline-total-badge i,
.pipeline-total-badge svg { width: 14px; height: 14px; color: var(--text-muted); }

#btn-add-prospect {
  height: 38px;
  padding: 0 1.05rem;
  border-radius: 10px;
  font-size: var(--fs-13);
}
#btn-add-prospect i,
#btn-add-prospect svg { width: 16px; height: 16px; }

/* Meeting-notes: "set next touch" opt-in row (a date was found in the summary) */
.mn-nexttouch {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.65rem;
  font-size: var(--fs-13);
  color: var(--text-secondary);
  background: rgba(201, 168, 76, 0.07);
  border: 1px solid rgba(201, 168, 76, 0.22);
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
}
.mn-nexttouch:hover { background: rgba(201, 168, 76, 0.11); }
.mn-nexttouch i, .mn-nexttouch svg { width: 14px; height: 14px; color: var(--accent); }
.mn-nexttouch strong { color: var(--text-primary); font-weight: 600; }
.mn-nt-check {
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}

/* ============================================================
   MEETINGS ARCHIVE
   ============================================================ */
.mtg-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 1.5rem 0 2rem;
}
.meetings-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
  gap: 1.25rem;
}
@media (max-width: 980px) { .meetings-list { grid-template-columns: 1fr; } }
.meetings-list > .logs-empty-state { grid-column: 1 / -1; }

.mtg-card {
  padding: 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.mtg-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
}
.mtg-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-16);
  color: var(--text-primary);
  line-height: 1.3;
}
.mtg-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 0.3rem;
  font-size: var(--fs-12);
  color: var(--text-muted);
}
.mtg-meta span { display: inline-flex; align-items: center; gap: 0.3rem; }
.mtg-meta i, .mtg-meta svg { width: 12px; height: 12px; }
.mtg-attendees { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mtg-dot { opacity: 0.5; }
.mtg-count {
  flex-shrink: 0;
  font-size: var(--fs-11);
  font-weight: 700;
  color: #9A7B1E;
  background: rgba(201, 168, 76, 0.13);
  border: 1px solid rgba(201, 168, 76, 0.30);
  border-radius: 20px;
  padding: 0.2rem 0.55rem;
  white-space: nowrap;
}
.mtg-summary { font-size: var(--fs-14); line-height: 1.5; color: var(--text-secondary); }

.mtg-clients { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.mtg-client {
  font-family: var(--font-family);
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 0.25rem 0.65rem;
  cursor: pointer;
  transition: var(--transition-smooth);
}
.mtg-client[data-id]:hover { border-color: var(--accent); background: rgba(201, 168, 76, 0.08); }
.mtg-client-lead { cursor: default; color: var(--text-muted); font-weight: 500; border-style: dashed; }

.mtg-details { font-size: var(--fs-13); border-top: 1px dashed var(--border-color); padding-top: 0.65rem; }
.mtg-details summary {
  cursor: pointer;
  color: var(--accent-text);
  font-weight: 600;
  font-size: var(--fs-12);
  user-select: none;
}
.mtg-details summary:hover { text-decoration: underline; }
.mtg-block { margin-top: 0.7rem; }
.mtg-block-label {
  font-size: var(--fs-11);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}
.mtg-block-list { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.3rem; }
.mtg-block-list li { font-size: var(--fs-13); line-height: 1.45; color: var(--text-secondary); }
.mtg-doclink { display: inline-block; margin-top: 0.7rem; font-size: var(--fs-12); font-weight: 600; color: var(--accent-text); }

/* Meetings: team-attendee label row (which of the 7 users were there) */
.mtg-team {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.mtg-team-label {
  font-size: var(--fs-11);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.mtg-team-names {
  font-size: var(--fs-13);
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   MOBILE — phone tier (≤700px) + tablet fixes.
   Appended last on purpose: these overrides tie on specificity
   with earlier rules and must win by source order. Everything
   uses the existing custom properties so dark mode is covered.
   ============================================================ */

/* Mobile nav elements exist in the DOM at every width; only phones show them. */
.mobile-tabbar,
.mobile-more-sheet,
.mobile-more-backdrop { display: none; }

@media (max-width: 900px) {
  /* Rail toggling is meaningless once the sidebar is a top bar. */
  .btn-sidebar-toggle { display: none; }
}

/* ============================================================
   MOBILE + TABLET NAV (≤900px)
   Below the desktop sidebar there is no honest horizontal form for a
   15-item nav — as a row it ran to ~2000px on an 820px iPad with nothing
   to say it scrolled. So from tablet down the nav is a bottom tab bar plus
   a "More" sheet, and the sidebar shrinks to a slim brand header.
   ============================================================ */
@media (max-width: 900px) {
  :root { --m-tabbar-h: 56px; }

  /* ---------- Slim header ---------- */
  /* The app runs standalone with viewport-fit=cover, so the status bar sits
     over the top edge; the header pads itself out from under the notch. */
  .sidebar { padding: calc(0.5rem + env(safe-area-inset-top)) 1rem 0.5rem; }
  body.has-data-banner .sidebar { padding-top: calc(2.4rem + env(safe-area-inset-top)); }
  .sidebar-brand { margin: 0; padding: 0; border-bottom: none; gap: 0.6rem; }
  /* No room for a stacked lockup in a ~50px bar — medallion + text instead. */
  .brand-lockup { display: none; }
  .brand-lockup ~ .brand-logo { display: flex; }
  .brand-lockup ~ .brand-nameblock { display: flex; }
  .brand-logo { width: 30px; height: 30px; }
  .brand-name-main { font-size: var(--fs-14); }
  .brand-name-sub { font-size: 10px; }
  .env-badge { margin-top: 0; border-top: none; padding: 0.35rem 0.5rem; }
  /* The badge now sits at the right edge of a ~50px header: its menu opens
     leftwards and DOWN (there is no room above). */
  .env-menu { left: auto; right: 0; bottom: auto; top: calc(100% + 0.3rem); }
  .sidebar-nav { display: none; }

  /* Clear the fixed bottom tab bar — content and toasts alike. */
  .main-content { padding-bottom: calc(1.25rem + var(--m-tabbar-h) + env(safe-area-inset-bottom)); }
  .toast-container { bottom: calc(var(--m-tabbar-h) + env(safe-area-inset-bottom) + 0.75rem); }

  /* ---------- Bottom tab bar ---------- */
  .mobile-tabbar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90; /* below drawer-backdrop/drawer (99/100) and modals */
    /* Translucent over the scrolling page, the way the platform's own bars
       are. The plain colour is the fallback where color-mix is unsupported. */
    background: var(--bg-secondary);
    background: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--border-color);
    padding: 0.2rem 0.4rem calc(0.2rem + env(safe-area-inset-bottom));
  }
  .mobile-tabbar .nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    min-height: 48px;
    padding: 0.2rem 0;
    margin: 0;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    font-family: var(--font-family);
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  /* The icon sits in a soft pill; only the active one is tinted. */
  .mobile-tabbar .nav-item i,
  .mobile-tabbar .nav-item svg {
    width: 20px; height: 20px; padding: 2px 10px; box-sizing: content-box; border-radius: 999px;
    transition: background 0.18s ease;
  }
  .mobile-tabbar .nav-item.active { color: var(--accent-text); background: none; font-weight: 600; }
  .mobile-tabbar .nav-item.active svg { background: var(--accent-glow); }
  .mobile-tabbar .nav-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  /* Something is waiting in a section behind "More": a dot by its icon. */
  #mobile-tab-more { position: relative; }
  #mobile-tab-more.has-pending::after {
    content: ""; position: absolute; top: 6px; left: calc(50% + 8px);
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent); box-shadow: 0 0 0 2px var(--bg-secondary);
  }

  /* ---------- "More" sheet ---------- */
  .mobile-more-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 205;
    background: rgba(15, 23, 42, 0.35);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-smooth);
    touch-action: none;
  }
  .mobile-more-backdrop.open { opacity: 1; visibility: visible; }

  .mobile-more-sheet {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 210;
    background: var(--bg-card);
    border-top: 1px solid var(--border-color);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 0.5rem 0.9rem calc(0.9rem + env(safe-area-inset-bottom));
    /* Never reaches the top: the backdrop stays tappable, and a short screen
       (landscape, an SE) scrolls the sheet instead of clipping it. */
    max-height: calc(100dvh - 3rem - env(safe-area-inset-top));
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(100%);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .mobile-more-sheet.open { transform: none; }
  /* Grab handle. */
  .mobile-more-sheet::before {
    content: ""; flex: 0 0 auto; align-self: center;
    width: 36px; height: 4px; border-radius: 2px;
    background: var(--border-strong); margin-bottom: 0.4rem;
  }
  /* The page behind must not scroll under an open sheet. */
  body.more-open .main-content { overflow: hidden; }
  .mobile-more-sheet .nav-section-label { padding: 0.55rem 0.25rem 0.3rem; margin: 0; }
  /* Icon tiles, three across. Fixed-width tiles stop two-word labels
     truncating, and a tile has a corner for its pending badge. */
  .mobile-more-group {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  #mobile-more-sheet .nav-item {
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 64px;
    width: 100%;
    margin: 0;
    padding: 0.5rem 0.4rem;
    border: none;
    border-radius: 10px;
    background: var(--bg-secondary);
    box-shadow: none;
    font-family: var(--font-family);
    font-size: var(--fs-11);
    font-weight: 600;
    line-height: 1.15;
    color: var(--text-secondary);
    text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  #mobile-more-sheet .nav-item.hidden { display: none; }
  #mobile-more-sheet .nav-item i,
  #mobile-more-sheet .nav-item svg { width: 22px; height: 22px; color: var(--text-secondary); }
  #mobile-more-sheet .nav-item > span:not(.nav-count-badge) {
    max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #mobile-more-sheet .nav-count-badge { position: absolute; top: 5px; right: 5px; margin: 0; }
  /* Active = a tinted tile with a gold hairline, not the sidebar's left bar. */
  #mobile-more-sheet .nav-item.active {
    box-shadow: inset 0 0 0 1px var(--accent);
    background: var(--accent-glow);
    color: var(--accent-text);
  }
  #mobile-more-sheet .nav-item.active svg { color: var(--accent); }
  #mobile-more-sheet .nav-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  #mobile-more-sheet .mobile-more-logout {
    flex-direction: row;
    justify-content: flex-start;
    gap: 0.6rem;
    min-height: 44px;
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: none;
    border-radius: 0;
    border-top: 1px solid var(--border-color);
    font-size: var(--fs-13);
  }

  /* The desktop active marker is an inset LEFT bar (box-shadow). On a tab it
     rendered as a stray gold stripe beside the icon; tabs mark active on the
     top edge instead. The id outranks the dark-theme rule. */
  #mobile-tabbar .nav-item { border-radius: 0; }
  #mobile-tabbar .nav-item.active { box-shadow: inset 0 2px 0 var(--accent); background: none; }

  /* Four tiles split 3+1 at tablet width; 2×2 reads as one row of numbers. */
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {

  /* ---------- One phone scale ----------
     Every full-size control is --m-ctl tall and every in-card one --m-ctl-sm,
     with one button font and one card-title size. Five heights (26 / 33 /
     38 / 40 / 44) and full-width 44px primaries beside 13px text were what
     made the phone read "big and unrefined". Change a token, not a rule. */
  :root {
    --m-ctl: 40px;
    --m-ctl-sm: 34px;
    --m-fs-btn: var(--fs-13);
    --m-fs-title: var(--fs-15);
    --m-fs-meta: var(--fs-12);
    --m-radius: 10px;
    --m-gap: 1rem;
    --m-label-col: 100px;
  }

  /* ---------- Global ---------- */
  .main-content {
    padding: 1rem;
    /* Clear the fixed bottom tab bar. */
    padding-bottom: calc(1rem + var(--m-tabbar-h) + env(safe-area-inset-bottom));
  }
  .top-bar { flex-wrap: wrap; gap: 0.6rem; }
  #section-command, #section-leads, #section-followups, #section-prospects { gap: var(--m-gap); }
  /* The platform's grey tap flash fights our own :active states. */
  a, button, [role="button"], .triage-table tbody tr, .board-card, .deal-card, .metric-clickable {
    -webkit-tap-highlight-color: transparent;
  }
  a, button, select, input, textarea, [role="button"] { touch-action: manipulation; }

  /* ---------- Type ---------- */
  .header-title h1 { font-size: 1.5rem; }
  /* The light theme sets the title at (0,3,1); restate under it. */
  :root:not([data-theme="dark"]) .header-title h1 { font-size: 1.75rem; }
  .header-subtitle { font-size: var(--m-fs-meta); }
  .item-meta, .cell-date .date-primary { font-size: var(--m-fs-meta); }

  /* 16px form controls stop iOS Safari zooming the page on focus. One rule,
     more specific than any control's own font-size — the drawer's date and
     text inputs used to win at 13px and zoom. Checkboxes are the platform's. */
  body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
    font-size: 16px;
  }

  /* ---------- Controls ---------- */
  .btn {
    min-height: var(--m-ctl);
    padding: 0 0.9rem;
    font-size: var(--m-fs-btn);
    border-radius: var(--m-radius);
    white-space: nowrap;
  }
  .btn-sm { min-height: var(--m-ctl-sm); padding: 0 0.7rem; }
  /* Icon-only buttons (the sparkle beside Add Note) are squares: the .btn
     side padding above would squeeze the icon to a 5px column. */
  .btn-icon { width: var(--m-ctl); height: var(--m-ctl); padding: 0; }
  .btn-primary { box-shadow: none; }
  #btn-add-prospect { height: var(--m-ctl); }
  .search-box input { height: var(--m-ctl); padding-top: 0; padding-bottom: 0; border-radius: var(--m-radius); text-overflow: ellipsis; }
  .search-box input::placeholder { text-overflow: ellipsis; }
  .mn-filter-input, .mn-filter-owner { height: var(--m-ctl); border-radius: var(--m-radius); }
  .mn-approve-all { height: var(--m-ctl); border-radius: var(--m-radius); }
  .mn-scope-toggle { padding: 3px; border-radius: var(--m-radius); }
  .mn-scope-toggle button { height: calc(var(--m-ctl) - 6px); padding: 0 0.75rem; }
  .mn-actions button { min-height: var(--m-ctl-sm); padding: 0 0.8rem; }
  .btn-status {
    min-height: var(--m-ctl-sm); padding: 0 0.5rem; font-size: var(--fs-12);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .btn-close-drawer { width: 36px; height: 36px; padding: 0; }

  /* ---------- Work Desk toolbar: search + sort on one line, filters on the next ---------- */
  /* Four selects across a 390px screen leave ~57px of text at the 16px the
     inputs must be; three leave ~87px, enough for every default label. */
  .toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 0.5rem;
    row-gap: 0.5rem;
    padding: 0.7rem 0.85rem;
  }
  .toolbar > .search-box { grid-column: 1; grid-row: 1; max-width: none; }
  .toolbar > .filter-group-sort { grid-column: 2; grid-row: 1; }
  .toolbar > .filters {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
  }
  .filter-group { display: block; position: relative; min-width: 0; }
  .filter-group-sort { display: block; }
  /* Owner · Stage · Likelihood — the two you filter by most, first. */
  .filter-group:has(#filter-status) { order: 1; }
  .filter-group:has(#filter-likelihood) { order: 2; }
  /* Each filter wears its label as a small caption over a short value
     ("All"): "All owners" / "Any likelihood" don't fit a third of a phone at
     the 16px a select must be. The sort's values ("Updated", "Next touch")
     speak for themselves, so its label stays for assistive tech only. */
  .filter-group label {
    display: block;
    margin: 0 0 0.15rem 0.15rem;
    font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
  }
  .filter-group-sort label {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .filter-group select {
    width: 100%;
    height: var(--m-ctl);
    min-height: 0;
    padding: 0 1.5rem 0 0.6rem;
    border-radius: var(--m-radius);
    appearance: none;
    -webkit-appearance: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .filter-group-sort select { width: auto; max-width: 124px; }
  /* One chevron for every select, in the theme's muted ink. Anchored to the
     bottom: the select sits under its caption, 40px tall. */
  .filter-group::after {
    content: ""; position: absolute; right: 0.55rem; bottom: 14px;
    width: 12px; height: 12px;
    pointer-events: none; background: var(--text-muted);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .mn-search, .mn-filters { width: 100%; }
  .mn-toolbar-right { flex-wrap: wrap; }
  .mn-filters { flex-wrap: wrap; }
  .mn-select-wrap { flex: 1 1 100%; }
  .mn-select-wrap .mn-filter-owner { width: 100%; }

  /* ---------- Tables → stacked cards ---------- */
  .table-container { overflow-x: visible; }
  .triage-table thead { display: none; } /* trade-off: no column sort on phones */
  .triage-table,
  .triage-table tbody { display: block; width: 100%; }
  /* One frame (the panel) and rows as separators — not a card inside a card. */
  .triage-table tbody tr {
    display: block;
    margin: 0;
    padding: 0.4rem 0 0.5rem;
    border: 0;
    border-bottom: 1px solid var(--border-color);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .triage-table tbody tr:last-child { border-bottom: 0; }
  .triage-table tbody tr:active { background: var(--bg-hover); }
  .triage-table td {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.22rem 0.85rem;
    border-bottom: none;
    white-space: normal;
  }
  /* A fixed label column: values line up whatever the label's width. */
  .triage-table td[data-label] {
    display: grid;
    grid-template-columns: var(--m-label-col) minmax(0, 1fr);
    column-gap: 0.6rem;
    align-items: baseline;
    justify-items: start;
    text-align: left;   /* the desktop right-aligns its numeric columns */
  }
  .triage-table td[data-label] > * { justify-self: start; }
  .triage-table td[data-label]::before {
    content: attr(data-label);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .triage-table td.cell-primary {
    display: block;
    padding: 0.45rem 0.85rem 0.4rem;
    border-bottom: 1px dashed var(--border-color);
    margin-bottom: 0.3rem;
  }
  .triage-table td.cell-primary .item-title { font-size: var(--m-fs-title); }
  .triage-table td:empty { display: none; }
  /* Bulk-select is a desktop workflow — hide the checkbox column on phones. */
  .bulk-check-col { display: none; }
  .bulk-bar { display: none; }
  .triage-table td.table-empty,
  .triage-table td.table-loading { display: block; text-align: center; }
  .sk-row td { display: block; }
  /* Trash has no panel around its table: give the table the frame itself. */
  #section-trash .table-container {
    border: 1px solid var(--border-color); border-radius: var(--radius-md);
    background: var(--bg-card); overflow: hidden;
  }

  /* ---------- Modals → full screen ---------- */
  .enriched-note-overlay { padding: 0; align-items: stretch; }
  .enriched-note-dialog,
  .timeline-dialog,
  .add-prospect-dialog {
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }
  .enriched-dialog-header { border-radius: 0; }
  .enriched-dialog-title { white-space: normal; }
  .enriched-dialog-footer { flex-wrap: wrap; gap: 0.5rem; padding-bottom: calc(0.85rem + env(safe-area-inset-bottom)); }
  .enriched-dialog-hint { display: none; } /* frees room for the action buttons */
  /* Secondary buttons keep their natural width; the primary (last) fills.
     Both used to stretch, and "Create Prospect" wrapped onto two lines. */
  .enriched-dialog-actions { width: 100%; display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .enriched-dialog-actions .btn { flex: 0 0 auto; justify-content: center; }
  .enriched-dialog-actions .btn:last-child { flex: 1 1 auto; }
  .enriched-dialog-body textarea { min-height: 160px; }
  .add-prospect-grid { grid-template-columns: 1fr; }

  /* ---------- Drawers ---------- */
  .drawer { height: 100dvh; }
  .drawer-header { padding: 0.85rem 1rem; }
  .drawer-body { padding: 1rem; gap: 1rem; }
  /* Five stages as 3 + 2 rows of small pills (was three rows of 44px). */
  .status-button-group { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
  .status-terminal-group { grid-template-columns: 1fr 1fr; }
  .drawer-footer { flex-wrap: wrap; gap: 0.5rem; }
  .drawer-footer .btn { flex: 0 0 auto; justify-content: center; }
  .drawer-footer .btn:last-child { flex: 1 1 auto; }
  /* Collapse-to-tab is a desktop affordance; the drawer is full-width here. */
  #btn-collapse-drawer { display: none; }
  .drawer-reopen-tab { display: none !important; }
  .dp-popup { max-width: calc(100vw - 2rem); }

  /* ---------- Toasts & confirms ---------- */
  .toast-container { left: 1rem; right: 1rem; align-items: stretch; }
  .toast { max-width: none; }
  .tconfirm { width: calc(100vw - 2rem); padding: 1.1rem 1.1rem 1rem; }
  .tconfirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .tconfirm-actions button { min-height: var(--m-ctl); border-radius: var(--m-radius); }
  .tconfirm-overlay { padding-bottom: env(safe-area-inset-bottom); }

  /* ---------- Kanban board ---------- */
  /* One column per screen with a sliver of the next, so the swipe is obvious. */
  .board-columns { gap: 0.75rem; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .board-col { width: calc(100vw - 4rem); scroll-snap-align: start; }

  /* ---------- KPI tiles: a stat strip, not four hero cards ---------- */
  /* The 44px icon cost a third of each tile and pushed the label onto two
     lines; equal rows stop the 144px / 82px stagger. */
  .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 0.5rem; }
  .metric-card { padding: 0.7rem 0.85rem; gap: 0; }
  .metric-icon { display: none; }
  .metric-content { min-width: 0; }
  .metric-label { font-size: 10px; letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  :root:not([data-theme="dark"]) .metric-label { letter-spacing: 0.06em; }
  .metric-value { font-size: 1.35rem; line-height: 1.15; margin-top: 0.1rem; }
  .metric-sub { font-size: var(--fs-11); }
  .metric-filter-hint { top: 0.45rem; right: 0.6rem; font-size: 9px; }
  .team-grid { grid-template-columns: 1fr; }
  .dossier-grid { grid-template-columns: 1fr; }
  .mtg-attendees { max-width: 100%; }

  /* ---------- Login ---------- */
  .login-container { padding: 1rem; }
  .login-inner { padding: 1.5rem 1.25rem; }

  /* ---------- Work Desk cards: what leads, what trails, what vanishes ---------- */
  /* DOM order is the desktop column order (Updated first). On a card the
     NAME leads and the timestamp trails. */
  .triage-table tbody tr { display: flex; flex-direction: column; }
  .triage-table td.cell-primary { order: -1; }
  .triage-table td.cell-date {
    order: 10; margin-top: 0.3rem; padding-top: 0.45rem;
    border-top: 1px dashed var(--border-color);
  }
  /* `.triage-table td` (0,1,1) outranked the bare class above — the checkbox
     was showing after all. */
  .triage-table td.bulk-check-col { display: none; }
  /* A row reading "EST. CLOSE —" says nothing on a phone. Blank cells carry
     a .cell-blank placeholder; the whole row (label included) goes with it. */
  .triage-table td:has(> .cell-blank:only-child),
  .triage-table td:has(> .owner-chip-row:empty) { display: none; }

  /* ---------- Review cards (Meeting Notes / Contract Sync / Calendar Sync) ---------- */
  .mn-card, .cs-card { min-width: 0; max-width: 100%; }
  .mn-card-top > :first-child { min-width: 0; flex: 1 1 auto; }
  /* Meta wraps BETWEEN units, never inside one ("Wed 29 Jul, / 21:10" was
     the old read); a long email may still break rather than overflow. */
  .mn-meta { flex-wrap: wrap; row-gap: 0.15rem; overflow-wrap: anywhere; }
  .mn-actions { flex-wrap: wrap; }
  .mn-actions button { flex: 1 1 0; }
  /* Calendar Sync: select + age on one line, the two buttons on the next. */
  .cs-card .mn-actions {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 0.55rem 0.6rem; align-items: center;
  }
  .cs-card .mn-actions .cs-pick { margin: 0; }
  .cs-card .mn-actions .cs-ago { margin: 0; justify-self: end; white-space: nowrap; }
  .cs-card .mn-actions .cs-dismiss,
  .cs-card .mn-actions .cs-apply { width: 100%; }

  /* ---------- Meetings ---------- */
  /* A nowrap names line made the card's min-content wider than the phone,
     which blew the 1fr grid track out to ~640px. */
  .mtg-card { min-width: 0; }
  .mtg-team { flex-wrap: wrap; }
  .mtg-team-names { flex: 1 1 100%; min-width: 0; }
  .mtg-toolbar .search-box { max-width: none; flex: 1 1 100%; }

  /* ---------- Work Desk: a scannable LIST, not a stack of labelled cards ----------
     A card spent five labelled rows (252px, 38% of the screen) saying what a
     desktop row says in one line — 36 leads was ~9,000px of thumb. Now:
         name ································ STAGE
         owners · $size · close% ··············· 72d
         next touch · pills
     Everything else is one tap away in the drawer. Other tables keep the
     labelled-card treatment; this is scoped to the desk. */
  #leads-workdesk .triage-table tbody tr {
    display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;
    gap: 0.25rem 0.5rem;
    margin: 0;
    padding: 0.6rem 0.85rem 0.65rem;
  }
  #leads-workdesk .triage-table td { display: block; padding: 0; margin: 0; border: none; }
  #leads-workdesk .triage-table td[data-label]::before { content: none; }
  /* Line 1: name fills, stage pins right. */
  #leads-workdesk .triage-table td.cell-primary { order: 1; flex: 1 1 0; min-width: 0; }
  #leads-workdesk .triage-table td.cell-primary .item-title {
    font-size: var(--m-fs-title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #leads-workdesk .triage-table td.cell-primary .item-desc-snippet,
  #leads-workdesk .triage-table td.cell-primary .item-meta { display: none; }
  #leads-workdesk .triage-table td[data-label="Stage"] { order: 2; flex: 0 0 auto; }
  /* A zero-height item that spans the row: the break between line 1 and 2. */
  #leads-workdesk .triage-table tbody tr::before { content: ""; flex-basis: 100%; height: 0; order: 3; }
  /* Line 2: owners, size, close odds — and the age, pinned right, small. */
  #leads-workdesk .triage-table td[data-label="Owners"] { order: 4; }
  #leads-workdesk .triage-table td[data-label="Pipeline"] { order: 5; }
  #leads-workdesk .triage-table td.cell-conf { order: 6; }
  #leads-workdesk .triage-table td.cell-date { order: 7; margin-left: auto; }
  #leads-workdesk .triage-table td.cell-date .date-primary {
    font-size: var(--m-fs-meta); font-weight: 500; color: var(--text-muted);
  }
  #leads-workdesk .triage-table td.cell-date .item-meta { display: none; }
  /* Line 3: the next touch, full width. */
  #leads-workdesk .triage-table td.cell-next { order: 9; flex: 1 1 100%; margin-top: 0.1rem; }
  #leads-workdesk .triage-table td.cell-next .item-desc-snippet { max-width: 100%; }
  /* Off the list (in the drawer): est. close, contracts, bulk-select, blanks. */
  #leads-workdesk .triage-table td:empty,
  #leads-workdesk .triage-table td.bulk-check-col,
  #leads-workdesk .triage-table td.cell-close,
  #leads-workdesk .triage-table td.cell-contracts,
  #leads-workdesk .triage-table td:has(> .cell-blank:only-child),
  #leads-workdesk .triage-table td:has(> .owner-chip-row:empty) { display: none; }
  #leads-workdesk .triage-table td.table-empty,
  #leads-workdesk .triage-table td.table-loading { flex: 1 1 100%; text-align: center; }
}

/* ── Pipeline health chip (Meeting Notes header) ───────────────────────────
   Tells the team whether an empty inbox means "quiet week" or "the sync is
   down". Colour alone never carries the meaning — the label always says it,
   and title= carries the detail. */
.pipe-health {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.3rem 0.7rem; border-radius: 999px;
  background: var(--bg-secondary); border: 1px solid var(--border-color);
  font-size: var(--fs-12); color: var(--text-secondary); white-space: nowrap;
  cursor: default;
}
.pipe-health .pipe-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
  background: var(--text-muted);
}
.pipe-health.pipe-ok .pipe-dot { background: #2C7A4B; }
.pipe-health.pipe-stale .pipe-dot { background: var(--accent); }
.pipe-health.pipe-dead .pipe-dot { background: #B4413C; }
/* A dead pipeline is the one state worth interrupting for. */
.pipe-health.pipe-dead {
  background: color-mix(in srgb, #B4413C 10%, var(--bg-secondary));
  border-color: color-mix(in srgb, #B4413C 35%, var(--border-color));
  color: #B4413C; font-weight: 600;
}
.pipe-health.pipe-stale {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border-color));
}
@media (max-width: 700px) { .pipe-health { display: none; } }

/* ── Momentum board (admin accountability view) ────────────────────────────
   Three blunt stages; the design job is to make hard numbers read as a
   considered instrument, not a report card. Labels always carry the text —
   colour is reinforcement, never the message. */
/* Two per row, deliberately fixed rather than auto-fit: a third column squeezed
   the KPI strip into wrapping and clipped the evidence chips.
   Cards span 6 rows and adopt them with subgrid, so every section — header,
   meter, pills, KPIs, attention list, AI read — starts at the same y across the
   row. Without it each section began wherever the one above happened to end,
   so a card with fewer attention rows floated its AI panel up and the pair
   read as misaligned. */
.mo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
.mo-card { padding: 1.25rem 1.35rem 1.15rem;
  display: grid; grid-template-rows: subgrid; grid-row: span 6; align-content: start;
  border: 1px solid var(--border-color); transition: box-shadow 0.25s ease, transform 0.25s ease; }
.mo-card:hover { box-shadow: 0 2px 4px rgba(15, 31, 61, 0.06), 0 14px 34px -14px rgba(15, 31, 61, 0.22); }

.mo-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.85rem; }
.mo-head-id { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.mo-owner-name { font-size: 1.02rem; font-weight: 750; letter-spacing: -0.01em; color: var(--text-primary); margin: 0; }
.mo-open { font-size: var(--fs-11); color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Advancing meter — a milled channel with a gauged fill, % pinned right so it
   never fights the fill for contrast. */
.mo-advbar { position: relative; height: 24px; margin: 0 0 0.7rem; border-radius: 999px;
  background: linear-gradient(180deg, rgba(15, 31, 61, 0.055), rgba(15, 31, 61, 0.02));
  border: 1px solid var(--border-color);
  box-shadow: inset 0 1px 2px rgba(15, 31, 61, 0.06); overflow: hidden; }
.mo-advbar-fill { height: 100%; border-radius: 999px; min-width: 3px;
  background: linear-gradient(180deg, #38935c 0%, #2C7A4B 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 0 10px -2px rgba(44, 122, 75, 0.5);
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.mo-advbar-label { position: absolute; top: 0; right: 0.75rem; bottom: 0; display: flex; align-items: center;
  font-size: var(--fs-11); font-weight: 750; letter-spacing: 0.04em; color: var(--text-primary);
  font-variant-numeric: tabular-nums; text-transform: uppercase; }

.mo-pills { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.95rem; }
.mo-pill { display: inline-flex; align-items: center; gap: 0.32rem; font-size: var(--fs-11); font-weight: 600;
  padding: 0.2rem 0.6rem; border-radius: 999px; border: 1px solid var(--border-color); color: var(--text-secondary); }
.mo-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); }
.mo-pill-n { font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.mo-pill.mo-advancing { border-color: rgba(44, 122, 75, 0.4); background: rgba(44, 122, 75, 0.07); }
.mo-pill.mo-advancing::before { background: #2C7A4B; }
.mo-pill.mo-drifting { border-color: rgba(201, 168, 76, 0.45); background: rgba(201, 168, 76, 0.09); }
.mo-pill.mo-drifting::before { background: var(--accent); }
.mo-pill.mo-stalled { border-color: rgba(180, 65, 60, 0.4); background: rgba(180, 65, 60, 0.07); }
.mo-pill.mo-stalled::before { background: #B4413C; }

.mo-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.45rem; margin-bottom: 1rem; }
.mo-kpi { background: linear-gradient(180deg, var(--bg-card), var(--bg-secondary));
  border: 1px solid var(--border-color); border-radius: 11px; padding: 0.5rem 0.55rem 0.45rem;
  display: flex; flex-direction: column; gap: 0.14rem; min-width: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); }
.mo-kpi-v { font-size: var(--fs-13); font-weight: 780; color: var(--text-primary);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em; line-height: 1.15;
  /* Never ellipsize a KPI — a truncated "$…" hides the exact number the tile
     exists to show. Wrapping to a second line is the honest fallback. */
  overflow-wrap: anywhere; }
.mo-kpi-l { font-size: var(--fs-11); color: var(--text-muted); text-transform: uppercase;
  letter-spacing: 0.07em; font-weight: 650; line-height: 1.25; }

.mo-attention { min-height: 0; }
.mo-attention-head { font-size: var(--fs-11); font-weight: 750; color: var(--text-primary);
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.45rem;
  display: flex; align-items: baseline; gap: 0.45rem; flex-wrap: wrap; }
.mo-attention-sub { font-weight: 500; color: var(--text-muted); text-transform: none; letter-spacing: 0; font-size: var(--fs-11); }
.mo-lead { display: grid; grid-template-columns: 8px 1fr auto; grid-template-areas: "dot name value" "dot why why";
  column-gap: 0.6rem; row-gap: 0.08rem; align-items: center; padding: 0.45rem 0.5rem;
  border-radius: 10px; cursor: pointer; transition: background 0.15s ease; }
.mo-lead:hover { background: var(--bg-hover); }
.mo-lead + .mo-lead { border-top: 1px dashed var(--border-color); border-radius: 0 0 10px 10px; }
.mo-lead:hover + .mo-lead, .mo-lead + .mo-lead:hover { border-top-color: transparent; }
.mo-lead-stage { grid-area: dot; width: 8px; height: 8px; border-radius: 50%; }
.mo-lead-stage.mo-advancing { background: #2C7A4B; box-shadow: 0 0 0 3px rgba(44, 122, 75, 0.15); }
.mo-lead-stage.mo-drifting  { background: var(--accent); box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.18); }
.mo-lead-stage.mo-stalled   { background: #B4413C; box-shadow: 0 0 0 3px rgba(180, 65, 60, 0.14); }
.mo-lead-name { grid-area: name; font-size: var(--fs-14); font-weight: 660; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mo-lead-value { grid-area: value; font-size: var(--fs-13); font-weight: 750; color: var(--text-primary);
  font-variant-numeric: tabular-nums; }
.mo-lead-why { grid-area: why; font-size: var(--fs-12); color: var(--text-muted);
  display: flex; align-items: center; gap: 0.35rem; min-width: 0; }
/* The reason truncates; the chip never does — it's the classification, and
   "worked, uncomm…" tells you nothing. */
.mo-lead-why > .mo-reason { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mo-lead-why > .mo-parked { flex: 0 0 auto; }
.mo-clear { font-size: var(--fs-13); color: var(--text-muted); padding: 0.3rem 0.5rem; }

/* The AI affordance — quiet gold, sparkles, earns its press. */
.mo-brief { margin-top: 0.9rem; border-top: 1px dashed var(--border-color); padding-top: 0.75rem; align-self: start; }
.mo-brief-btn { display: inline-flex; align-items: center; gap: 0.4rem; height: 32px; padding: 0 0.85rem;
  font-family: var(--font-family); font-size: var(--fs-12); font-weight: 700; letter-spacing: 0.02em;
  color: var(--text-primary); cursor: pointer; border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(201, 168, 76, 0.13), rgba(201, 168, 76, 0.05));
  border: 1px solid rgba(201, 168, 76, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
.mo-brief-btn i, .mo-brief-btn svg { width: 13px; height: 13px; color: var(--accent); }
.mo-brief-btn:hover:not(:disabled) { border-color: rgba(201, 168, 76, 0.75); transform: translateY(-1px);
  box-shadow: 0 6px 14px -6px rgba(201, 168, 76, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.55); }
.mo-brief-btn:disabled { opacity: 0.55; cursor: default; }
.mo-brief-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The read itself — a framed AI surface, distinct from human notes. */
.mo-brief-out { margin-top: 0.65rem; }
.mo-brief-panel { position: relative; border-radius: 12px; padding: 0.85rem 1rem 0.7rem;
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.1), rgba(201, 168, 76, 0.028) 55%);
  border: 1px solid rgba(201, 168, 76, 0.38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45); }
.mo-brief-eyebrow { display: flex; align-items: center; gap: 0.4rem; font-size: var(--fs-11); font-weight: 750;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 0.5rem; }
.mo-brief-eyebrow i, .mo-brief-eyebrow svg { width: 12px; height: 12px; }
.mo-brief-stale { margin-left: auto; font-size: var(--fs-11); font-weight: 700; letter-spacing: 0.06em;
  color: #8a6d1f; background: rgba(201, 168, 76, 0.16); border: 1px solid rgba(201, 168, 76, 0.4);
  padding: 0.1rem 0.45rem; border-radius: 999px; text-transform: uppercase; }
.mo-brief-text { font-size: var(--fs-14); line-height: 1.6; color: var(--text-primary); margin: 0 0 0.65rem; }
.mo-brief-move { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.55rem 0.75rem;
  background: var(--bg-card); border: 1px solid var(--border-color); border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm); margin-bottom: 0.55rem; }
.mo-brief-move-label { font-size: var(--fs-11); font-weight: 750; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-text); }
.mo-brief-move p { font-size: var(--fs-13); font-weight: 600; color: var(--text-primary); margin: 0; line-height: 1.5; }
.mo-brief-cap { font-size: var(--fs-11); color: var(--text-muted); letter-spacing: 0.02em; }
.mo-brief-loading .sk-line { height: 10px; margin: 0.45rem 0; }

@media (max-width: 1100px) { .mo-grid { grid-template-columns: 1fr; } }
@media (max-width: 820px) { .mo-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .mo-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) {
  .mo-card, .mo-brief-btn, .mo-advbar-fill { transition: none; }
  .mo-brief-btn:hover:not(:disabled) { transform: none; }
}


/* ── Team momentum (private, one reader) ───────────────────────────────────
   Deliberately reads as a different instrument from the owner cards: navy
   header band, wider stat strip, and a "private" marker so it's never unclear
   that this is not a shared surface. */
.tm-panel { padding: 1.15rem 1.35rem 1.25rem; margin-bottom: 1.1rem;
  border: 1px solid rgba(15, 31, 61, 0.18);
  box-shadow: 0 2px 4px rgba(15, 31, 61, 0.05), 0 16px 40px -20px rgba(15, 31, 61, 0.3); }
.tm-head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  flex-wrap: wrap; margin-bottom: 0.9rem; }
.tm-title { display: flex; align-items: center; gap: 0.55rem; }
.tm-title h3 { font-size: 1.05rem; font-weight: 780; letter-spacing: -0.015em; margin: 0; color: var(--text-primary); }
.tm-title i, .tm-title svg { width: 17px; height: 17px; color: var(--accent); }
.tm-private { font-size: var(--fs-11); font-weight: 750; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--text-muted); border: 1px solid var(--border-color); border-radius: 999px;
  padding: 0.12rem 0.5rem; cursor: help; }

.tm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 0.5rem;
  padding: 0.75rem 0.85rem; border-radius: 12px; margin-bottom: 0.95rem;
  background: linear-gradient(160deg, #0F1F3D, #16294A); }
.tm-stat { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.tm-stat-v { font-size: var(--fs-14); font-weight: 780; color: #F4F1E7; font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em; overflow-wrap: anywhere; }
.tm-stat-l { font-size: var(--fs-11); color: #9AA6B8; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 650; }

.tm-read .mo-brief-text { font-size: var(--fs-14); }
.tm-block { margin-bottom: 0.6rem; }
.tm-block-label { display: block; font-size: var(--fs-11); font-weight: 750; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent-text); margin-bottom: 0.25rem; }
.tm-block ul { margin: 0; padding-left: 1.05rem; display: flex; flex-direction: column; gap: 0.22rem; }
.tm-block li { font-size: var(--fs-13); color: var(--text-primary); line-height: 1.5; }
.tm-why { color: var(--text-muted); font-size: var(--fs-12); }
.tm-question { padding: 0.55rem 0.75rem; background: var(--bg-card); border: 1px solid var(--border-color);
  border-left: 3px solid var(--accent); border-radius: var(--radius-sm); }
.tm-question p { margin: 0; font-size: var(--fs-13); font-weight: 600; color: var(--text-primary); line-height: 1.5; }

/* Parked-cause chip: separates "worked but not committed" (a discipline
   problem) from "no action at all" (real neglect). They look identical in the
   raw stage label, and conflating them is how an accountability tool ends up
   accusing someone of laziness for a logging gap. */
.mo-parked { margin-left: 0.4rem; font-size: var(--fs-11); font-weight: 700; letter-spacing: 0.03em;
  padding: 0.05rem 0.38rem; border-radius: 999px; white-space: nowrap; }
.mo-parked-engaged { color: #8a6d1f; background: rgba(201, 168, 76, 0.16); border: 1px solid rgba(201, 168, 76, 0.4); }
.mo-parked-neglected { color: #9c3a35; background: rgba(180, 65, 60, 0.12); border: 1px solid rgba(180, 65, 60, 0.35); }

/* Trend + forecast integrity (team panel). Direction is stated in words as well
   as colour, so it survives print, colour-blindness, and being read aloud. */
.tm-trend { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  padding: 0.45rem 0.7rem; margin-bottom: 0.8rem; border-radius: var(--radius-sm);
  background: var(--bg-secondary); border: 1px solid var(--border-color); font-size: var(--fs-12); }
.tm-trend-empty { color: var(--text-muted); }
.tm-trend-label { font-size: var(--fs-11); font-weight: 750; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted); }
.tm-trend-item { color: var(--text-secondary); }
.tm-delta { font-weight: 750; font-variant-numeric: tabular-nums; }
.tm-delta-good { color: #2C7A4B; }
.tm-delta-bad { color: #B4413C; }

.tm-forecast { border-radius: 11px; padding: 0.7rem 0.85rem; margin-bottom: 0.85rem;
  border: 1px solid var(--border-color); background: var(--bg-card); }
.tm-forecast-ok   { border-left: 3px solid #2C7A4B; }
.tm-forecast-warn { border-left: 3px solid var(--accent); }
.tm-forecast-bad  { border-left: 3px solid #B4413C; }
.tm-forecast-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; }
.tm-forecast-pct { font-size: var(--fs-13); font-weight: 780; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.tm-forecast-line { margin: 0.3rem 0 0; font-size: var(--fs-13); line-height: 1.5; color: var(--text-primary); }
.tm-unbacked { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.18rem; }
.tm-unbacked-row { display: grid; grid-template-columns: 1fr auto auto; gap: 0.5rem; align-items: baseline;
  font-size: var(--fs-12); padding: 0.18rem 0; border-top: 1px dashed var(--border-color); }
.tm-unbacked-name { font-weight: 650; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-unbacked-owner { color: var(--text-muted); font-size: var(--fs-11); }
.tm-unbacked-val { font-weight: 750; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.tm-unbacked-why { grid-column: 1 / -1; color: var(--text-muted); font-size: var(--fs-11); }

/* Tier chip on momentum leads. Only non-standard tiers get a chip — the point
   is to make a slower clock VISIBLE, so a 40-day-idle billionaire read as
   "still inside cadence" is legible rather than looking like leniency. */
.mo-tier { display: inline-flex; align-items: center; justify-content: center; min-width: 1.35rem;
  height: 1.05rem; padding: 0 0.32rem; border-radius: 5px; font-size: var(--fs-11); font-weight: 800;
  letter-spacing: 0.04em; margin-left: 0.35rem; flex: 0 0 auto; cursor: help; }
.mo-tier-billionaire { color: #5a4a10; background: rgba(201, 168, 76, 0.22); border: 1px solid rgba(201, 168, 76, 0.55); }
.mo-tier-classA { color: #2c4a7a; background: rgba(51, 82, 126, 0.10); border: 1px solid rgba(51, 82, 126, 0.35); }
.tm-closeable { margin-top: 0.45rem; }
.tm-closeable-warn { color: #7a2f2b; }
.tm-yearend { padding: 0.55rem 0.75rem; background: rgba(201, 168, 76, 0.08); border: 1px solid rgba(201, 168, 76, 0.35);
  border-left: 3px solid var(--accent); border-radius: var(--radius-sm); }
.tm-yearend p { margin: 0; font-size: var(--fs-14); font-weight: 650; color: var(--text-primary); line-height: 1.5; }


/* ============================================================
   WORK DESK — merged Next cell, likelihood flame, demoted contracts
   ============================================================ */
.likelihood-flame { display: inline-flex; vertical-align: -2px; margin-left: 0.3rem; color: var(--accent-text); }
.likelihood-flame i, .likelihood-flame svg { width: 13px; height: 13px; }
.cell-next .next-pills { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.cell-primary-contracts { margin-top: 0.3rem; }

/* ============================================================
   CLOSE CONFIDENCE — chip + "why this score" popover
   ============================================================ */
.conf-chip {
  cursor: pointer;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.conf-chip:hover { filter: brightness(0.96); }
.conf-chip.conf-stale { opacity: 0.65; }
.conf-chip.conf-stale::after { content: " ·"; }
.mn-conf.conf-low {
  background: #FEE2E2;
  color: #991B1B;
  border: 1px solid #FCA5A5;
}
:root[data-theme="dark"] .mn-conf.conf-low { background: rgba(153, 27, 27, 0.22); color: #F1A8A8; border-color: rgba(220, 90, 90, 0.45); }

.drawer-conf-chip { margin-left: 0.5rem; vertical-align: middle; }

.conf-pop {
  position: absolute;
  z-index: 1200;
  width: 320px;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 10px 32px rgba(15, 31, 61, 0.16);
  padding: 0.9rem 1rem;
}
.conf-pop.hidden { display: none; }
.conf-pop-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.conf-pop-title {
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.conf-pop-stale {
  margin-left: auto;
  font-size: var(--fs-11);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent-text);
  background: rgba(201, 168, 76, 0.16);
  border: 1px solid rgba(201, 168, 76, 0.45);
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
}
.conf-pop-rationale {
  font-size: var(--fs-13);
  color: var(--text-primary);
  line-height: 1.45;
  margin: 0 0 0.6rem;
}
.conf-pop-factor {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: var(--fs-12);
  color: var(--text-secondary);
  padding: 0.15rem 0;
}
.conf-factor-dir { font-weight: 800; width: 0.9em; flex-shrink: 0; text-align: center; }
.conf-dir-pos { color: var(--status-won); }
.conf-dir-neg { color: #991B1B; }
:root[data-theme="dark"] .conf-dir-neg { color: #F1A8A8; }
.conf-pop-cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 0.65rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border-color);
  font-size: var(--fs-11);
  color: var(--text-muted);
}
.conf-rescore-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--fs-11);
  font-weight: 700;
  color: var(--accent-text);
  background: none;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0.25rem 0.6rem;
  cursor: pointer;
}
.conf-rescore-btn:hover { background: var(--bg-secondary); }
.conf-rescore-btn svg { width: 12px; height: 12px; }

/* Compact touch cells: one truncated line each, full text in the tooltip —
   the columns stay narrow no matter how chatty the note was. */
.cell-next .cell-clamp {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
@media (max-width: 700px) {
  /* Mobile cards have room — let the text wrap there. */
  .cell-next .cell-clamp { white-space: normal; }
}

/* Product fit is free text on a lead, so it is whatever someone pasted. One
   paragraph used to set the height of the entire row (a 500px row for a
   three-sentence thesis). Two lines here, the whole thing on hover, and the
   record's own timeline for the long version. */
.cell-primary .cell-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 480px;
}

/* Client-engagement chip in the Next-touch cell — the merged "last touch"
   signal. Client-fresh reads positive (they're leaning in); "Client quiet"
   warns that the counterparty has gone silent; stale greys out (past cadence).
   We never chip our OWN last action — that was noise. */
.touch-actor {
  display: inline-block;
  font-size: var(--fs-11);
  font-weight: 600;
  line-height: 1.2;
  padding: 0.05rem 0.4rem;
  border-radius: 6px;
  white-space: nowrap;
}
.touch-actor-client { color: #166534; background: rgba(22, 101, 52, 0.10); }
.touch-actor-silent { color: #92400E; background: rgba(146, 64, 14, 0.10); }
.touch-actor-stale  { color: var(--text-muted); background: rgba(110, 118, 131, 0.10); }
:root[data-theme="dark"] .touch-actor-client { color: #6BBF8A; background: rgba(22, 101, 52, 0.22); }
:root[data-theme="dark"] .touch-actor-silent { color: #E3B341; background: rgba(146, 64, 14, 0.22); }

/* A next step whose date has passed: the text stays (it's still the last thing
   promised) but reads as history, and the dead date is replaced by the state. */
.cell-next .next-lapsed { color: var(--text-muted); }
.next-lapsed-tag {
  display: inline-block;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--status-muted-bg);
  border: 1px solid var(--border-color);
  color: var(--status-muted);
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  white-space: nowrap;
}
:root[data-theme="dark"] .next-lapsed-tag { border-color: #33496B; }

/* Outstanding commitment + the one action that closes it out. */
.commitment-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.6rem;
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  background: var(--bg-secondary);
}
.commitment-text { flex: 1; min-width: 0; }
.commitment-text > span:first-child {
  display: block;
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.commitment-due {
  display: block;
  margin-top: 0.1rem;
  font-size: var(--fs-11);
  color: var(--text-muted);
}
.commitment-due.commitment-late { color: var(--alert); font-weight: 700; }
.commitment-due.commitment-undated { color: var(--accent-text); font-weight: 700; }
.commitment-done { flex-shrink: 0; padding: 0.35rem 0.8rem; }
.commitment-done svg { width: 14px; height: 14px; }

/* Composer banner while a commitment is being closed out. */
.completing-hint {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.65rem;
  margin-bottom: 0.5rem;
  border-radius: 8px;
  background: var(--status-won-bg);
  border: 1px solid var(--status-won-border);
  color: var(--status-won);
  font-size: var(--fs-12);
}
.completing-hint svg { width: 14px; height: 14px; flex-shrink: 0; }
.completing-hint span { flex: 1; }
.completing-cancel {
  background: none;
  border: none;
  color: inherit;
  font-size: var(--fs-11);
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}
.add-note-form.is-completing textarea { border-color: var(--status-won); }

/* Evidence-driven close: the open-commitment strip on a sync review card. */
.cs-commitment {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0.6rem 0 0.2rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid rgba(201, 168, 76, 0.45);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  background: rgba(201, 168, 76, 0.08);
  cursor: pointer;
  font-size: var(--fs-12);
  color: var(--text-primary);
}
.cs-commitment input { margin-top: 0.15rem; accent-color: var(--accent); }
.cs-commitment-flag {
  font-weight: 700;
  color: var(--accent-text);
  margin-right: 0.35rem;
}

/* ============================================================
   CLOSE ODDS BY MONTH — vertical AUM columns + confidence labels
   ============================================================ */
.an-colchart {
  display: flex;
  align-items: stretch;
  justify-content: center;   /* gather the story; don't scatter it across the card */
  gap: 2.2rem;
  padding: 0.5rem 1.25rem 0.2rem;
  overflow-x: auto;
}
.an-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  min-width: 96px;
  flex: 0 1 150px;
}
.an-col-conf { min-height: 1.35rem; }
.an-col-value {
  font-family: var(--font-display);
  font-size: var(--fs-13);
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.an-col-track {
  height: 130px;
  width: 100%;
  max-width: 56px;
  display: flex;
  align-items: flex-end;      /* columns grow from the baseline */
  /* No ghost column: an empty track painted full-height reads as data and
     dwarfs real bars (a $101B month looked like a sliver under a beige
     tower). Bars rise from the shared baseline drawn on the chart itself. */
  background: none;
  border-bottom: 2px solid var(--border-color);
}
.an-col-fill {
  width: 100%;
  height: 0;                   /* animated to var(--h) on render */
  min-height: 4px;
  background: var(--status-active);
  border-radius: 4px 4px 0 0;  /* rounded data-end, flat baseline */
  transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.an-col-undated .an-col-fill { background: var(--status-muted); opacity: 0.55; }
/* The share of a column placed by Aurelian's estimate rather than an owner's
   date. Hatched, not a second colour: same money, softer claim — cadence-based
   estimates slide forward every week a deal stays open. It sits at the TOP of
   the bar (owner-committed money is the base) and, being a child of the fill,
   grows with the bar's own animation. */
.an-col-fill { position: relative; overflow: hidden; }
.an-col-estfill {
  position: absolute; top: 0; left: 0; width: 100%;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0 3px, transparent 3px 7px);
}
.an-colchart-legend .dot-est {
  background: var(--status-active);
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0 2px, transparent 2px 4px);
}
.an-est-tag {
  font-size: var(--fs-11); font-weight: 600; font-style: italic;
  color: var(--text-muted); margin-left: 0.3rem; white-space: nowrap;
}
.an-colchart-legend {
  display: flex;
  justify-content: center;
  gap: 1.4rem;
  padding: 0.35rem 1.25rem 0.9rem;
  font-size: var(--fs-12);
  color: var(--text-secondary);
}
.an-colchart-legend .dot { width: 9px; height: 9px; border-radius: 2px; display: inline-block; margin-right: 0.35rem; vertical-align: -1px; }
.an-col-undated .an-col-label { font-style: italic; }
.an-col-label {
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}
.an-col-deals { font-size: var(--fs-11); color: var(--text-muted); }

/* Odds-by-month: trend + flag + expandable cohort detail */
.an-col[role="button"] { cursor: pointer; border-radius: 10px; padding: 0.3rem 0.2rem 0.4rem; }
.an-col[role="button"]:hover { background: var(--bg-hover); }
.an-col-open { background: var(--bg-secondary); box-shadow: inset 0 -3px 0 var(--accent); }
.an-col-flag { min-height: 1.3rem; }
.an-flag {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.08rem 0.5rem; border-radius: 999px;
  font-size: var(--fs-11); font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase;
  white-space: nowrap;
}
.an-flag svg { width: 12px; height: 12px; }
.an-flag-good { background: var(--status-won-bg); color: var(--status-won); border: 1px solid var(--status-won-border); }
.an-flag-bad  { background: #FEE2E2; color: #991B1B; border: 1px solid #FCA5A5; }
.an-flag-hold { background: rgba(201, 168, 76, 0.16); color: var(--accent-text); border: 1px solid rgba(201, 168, 76, 0.45); }
:root[data-theme="dark"] .an-flag-bad { background: rgba(153, 27, 27, 0.22); color: #F1A8A8; border-color: rgba(220, 90, 90, 0.45); }

.an-col-delta { font-size: var(--fs-11); font-weight: 800; margin-left: 0.3rem; }
.an-delta-up   { color: var(--status-won); }
.an-delta-down { color: #991B1B; }
:root[data-theme="dark"] .an-delta-down { color: #F1A8A8; }

.an-col-spark, .an-cohort-spark { min-height: 22px; display: inline-flex; }
.an-spark { width: 64px; height: 22px; color: var(--text-muted); }
.conf-high .an-spark, .an-col-spark.conf-high .an-spark { color: var(--status-won); }
.conf-mid .an-spark,  .an-col-spark.conf-mid .an-spark  { color: var(--accent-text); }
.conf-low .an-spark,  .an-col-spark.conf-low .an-spark  { color: #991B1B; }
:root[data-theme="dark"] .conf-low .an-spark { color: #F1A8A8; }
.an-col-spark.conf-high { color: var(--status-won); }
.an-col-spark.conf-mid { color: var(--accent-text); }
.an-col-spark.conf-low { color: #991B1B; }
:root[data-theme="dark"] .an-col-spark.conf-low { color: #F1A8A8; }

.an-cohort-detail {
  margin: 0.4rem 1.25rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-secondary);
  padding: 0.75rem 1rem;
}
.an-cohort-head {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: var(--fs-12); font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--text-secondary); margin-bottom: 0.5rem;
}
.an-cohort-head .cmd-clear { margin-left: auto; }
.an-cohort-row {
  display: grid;
  grid-template-columns: minmax(160px, 220px) 170px minmax(0, 1fr);
  gap: 0.9rem; align-items: center;
  padding: 0.45rem 0;
  border-top: 1px solid var(--border-color);
}
.an-cohort-row:first-of-type { border-top: none; }
.an-cohort-id { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.an-cohort-name { font-size: var(--fs-13); font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-cohort-conf { display: inline-flex; align-items: center; gap: 0.45rem; }
.an-cohort-why { font-size: var(--fs-12); color: var(--text-secondary); line-height: 1.45; }
@media (max-width: 700px) {
  .an-cohort-row { grid-template-columns: 1fr; gap: 0.3rem; }
}

/* Overall odds strip + expected-AUM inner bars + granularity toggle */
.an-odds-overall {
  display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
  padding: 0.65rem 1.25rem 0.35rem;
}
.an-overall-main {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: none; border: 1px solid var(--border-color); border-radius: 10px;
  padding: 0.35rem 0.7rem; cursor: pointer;
}
.an-overall-main:hover { background: var(--bg-hover); }
.an-overall-pct { font-size: var(--fs-14); padding: 0.15rem 0.6rem; }
.an-overall-label { font-size: var(--fs-11); font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-secondary); }
.an-overall-facts { display: flex; flex-direction: column; gap: 0.05rem; font-size: var(--fs-13); color: var(--text-primary); }
.an-odds-toggle { margin-left: auto; display: inline-flex; border: 1px solid var(--border-color); border-radius: 999px; overflow: hidden; }
.an-tgl {
  background: none; border: none; padding: 0.25rem 0.8rem; cursor: pointer;
  font-size: var(--fs-12); font-weight: 700; color: var(--text-secondary);
}
.an-tgl.active { background: var(--status-active); color: #fff; }

.an-col-track { position: relative; }
.an-col-expfill {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 46%;
  height: var(--h); min-height: 2px;
  background: var(--accent);
  border-radius: 3px 3px 0 0;
}
.an-col-expected { font-size: var(--fs-11); font-weight: 700; color: var(--accent-text); min-height: 1rem; }

/* Why-the-move decomposition inside the whole-book panel */
.an-bookmove {
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-card, #fff);
  padding: 0.65rem 0.85rem;
  margin-bottom: 0.6rem;
}
.an-bookmove-head { font-size: var(--fs-13); font-weight: 700; color: var(--text-primary); margin-bottom: 0.45rem; }
.an-bookmove-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.an-bookmove-sub { font-size: var(--fs-11); font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); margin-bottom: 0.25rem; }
.an-mover { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.15rem 0; font-size: var(--fs-12); }
.an-mover-name { font-weight: 600; color: var(--text-primary); }
.an-mover-pull { color: var(--text-secondary); margin-left: auto; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .an-bookmove-cols { grid-template-columns: 1fr; } }


/* Est. close column: owner's date via .close-pill; Aurelian estimates are
   italic with a subtle tone; past dates read as slipped, not planned. */
.cell-close .close-pill { margin-top: 0; white-space: nowrap; }
.close-pill-ai { font-style: italic; opacity: 0.85; }
.close-pill-past { background: var(--surface-subtle, rgba(30,41,59,0.06)); color: var(--text-secondary); }

/* v2 confidence popover: the binding ceiling line */
.conf-pop-ceiling {
  font-size: var(--fs-12);
  font-weight: 700;
  color: var(--accent-text);
  background: rgba(201, 168, 76, 0.12);
  border-radius: 6px;
  padding: 0.25rem 0.55rem;
  margin-bottom: 0.45rem;
}

/* Hybrid split: engine number · Aurelian read → blend */
/* The move beside a Close % chip: a sibling of the button, never inside it. */
.conf-move { margin-left: 0.3rem; vertical-align: 1px; white-space: nowrap; }
.conf-pop-move {
  font-size: var(--fs-12);
  color: var(--text-secondary);
  margin: 0.15rem 0 0.45rem;
}
.conf-pop-move .conf-move-inline { margin-left: 0; }
.conf-pop-blend {
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--surface-subtle, rgba(30, 41, 59, 0.06));
  border-radius: 6px;
  padding: 0.25rem 0.55rem;
  margin-bottom: 0.45rem;
}

/* "They initiated" toggle on the note composer */
.initiator-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.35rem 0 0.1rem;
  font-size: var(--fs-12);
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}
.initiator-toggle input { accent-color: var(--accent); }


/* Ceiling-bound confidence chips: the lock says "the evidence isn't the
   limit — the cap is", and the tooltip names which one. */
.conf-chip.conf-capped, .conf-chip.conf-nopr { display: inline-flex; align-items: center; gap: 0.25rem; }
.conf-chip.conf-capped svg, .conf-chip.conf-nopr svg { width: 10px; height: 10px; opacity: 0.75; }


/* Owner-card action groups: two different sales motions, never one list */
.mo-group-head {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: var(--fs-11); font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase;
  margin: 0.55rem 0 0.25rem;
}
.mo-group-head svg { width: 12px; height: 12px; }
.mo-group-escalate { color: var(--accent-text); }
.mo-group-reengage { color: #991B1B; }
:root[data-theme="dark"] .mo-group-reengage { color: #F1A8A8; }
.mo-kpi-delta { font-size: var(--fs-11); font-weight: 800; }

/* Momentum on touch: there is no hover, so the evidence that lived in the
   row's tooltip renders inline — every reason, wrapped — and the "hover"
   hint goes away with it. */
.mo-reason-all { display: none; }
@media (hover: none) {
  .mo-hint-hover { display: none; }
  .mo-lead-why { flex-wrap: wrap; }
  .mo-lead-why > .mo-reason-first { display: none; }
  .mo-lead-why > .mo-reason-all { display: block; flex: 1 1 100%; white-space: normal; line-height: 1.4; }
}